Skip to content

Commit 236b6f7

Browse files
NikGurevNikGurev
committed
fix(file-upload): disabled state colors (#DS-3824)
1 parent 7ca0694 commit 236b6f7

File tree

4 files changed

+103
-21
lines changed

4 files changed

+103
-21
lines changed

‎packages/components/file-upload/_file-upload-theme.scss

Lines changed: 94 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,20 @@
1616
background-color: var(--kbq-file-upload-single-default-container-background);
1717
border-color: var(--kbq-file-upload-single-default-container-border) !important;
1818

19+
&:not(.kbq-disabled, .kbq-error) {
20+
.kbq-file-upload__action {
21+
color: var(--kbq-file-upload-single-default-icon-button-color);
22+
}
23+
24+
.kbq-dropzone__icon {
25+
color: var(--kbq-file-upload-single-default-upload-icon-color);
26+
}
27+
28+
.file-item__text-wrapper .kbq-icon.kbq-empty {
29+
color: var(--kbq-file-upload-single-default-left-icon-color);
30+
}
31+
}
32+
1933
&.dragover {
2034
background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
2135
border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
@@ -27,20 +41,43 @@
2741
border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
2842
}
2943

30-
:not(.kbq-link),
31-
.kbq-icon.kbq-empty {
44+
.kbq-dropzone__icon {
45+
color: var(--kbq-file-upload-single-states-error-upload-icon-color);
46+
}
47+
48+
.file-item__text-wrapper .kbq-icon.kbq-empty {
49+
color: var(--kbq-file-upload-single-states-error-left-icon-color);
50+
}
51+
52+
.file-item__text,
53+
.dropzone__text:not(.kbq-link) {
3254
color: var(--kbq-file-upload-single-states-error-text-block-color);
3355
}
56+
57+
.kbq-file-upload__action {
58+
color: var(--kbq-file-upload-single-states-error-icon-button-color);
59+
}
3460
}
3561

3662
&.kbq-disabled {
3763
background-color: var(--kbq-file-upload-single-states-disabled-container-background);
3864
border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
3965

40-
&,
41-
.kbq-icon.kbq-empty,
42-
.kbq-link {
43-
color: var(--kbq-file-upload-single-states-disabled-container-border);
66+
.kbq-dropzone__icon {
67+
color: var(--kbq-file-upload-single-states-disabled-upload-icon-color);
68+
}
69+
70+
.file-item__text-wrapper .kbq-icon.kbq-empty {
71+
color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
72+
}
73+
74+
.dropzone__text,
75+
.file-item__text {
76+
color: var(--kbq-file-upload-single-states-disabled-text-block-color);
77+
}
78+
79+
.kbq-file-upload__action {
80+
color: var(--kbq-file-upload-single-states-disabled-icon-button-color);
4481
}
4582
}
4683
}
@@ -59,6 +96,12 @@
5996
border-bottom-color: var(--kbq-file-upload-multiple-default-grid-divider-color);
6097
}
6198

99+
&:not(.kbq-disabled, .kbq-error) {
100+
.kbq-dropzone__icon {
101+
color: var(--kbq-file-upload-multiple-default-upload-icon-color);
102+
}
103+
}
104+
62105
&.dragover {
63106
background-color: var(--kbq-file-upload-multiple-states-on-drag-container-background);
64107
border-color: var(--kbq-file-upload-multiple-states-on-drag-container-border) !important;
@@ -67,6 +110,10 @@
67110
border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-container-background) !important;
68111
}
69112

113+
.kbq-dropzone__icon {
114+
color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
115+
}
116+
70117
&.selected {
71118
.dropzone {
72119
border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
@@ -78,10 +125,28 @@
78125
background-color: var(--kbq-file-upload-multiple-states-disabled-container-background);
79126
border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
80127

81-
&,
82-
.kbq-icon.kbq-empty,
83-
.kbq-link {
84-
color: var(--kbq-file-upload-multiple-states-disabled-container-border);
128+
.kbq-dropzone__icon {
129+
color: var(--kbq-file-upload-multiple-states-disabled-upload-icon-color);
130+
}
131+
132+
.dropzone__text,
133+
.kbq-file-multiple-uploaded__header {
134+
color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
135+
}
136+
137+
.multiple__uploaded-item {
138+
.kbq-file-upload__file .kbq-icon.kbq-empty {
139+
color: var(--kbq-file-upload-multiple-states-disabled-left-icon-color);
140+
}
141+
142+
.file-item__text,
143+
.kbq-file-upload__size {
144+
color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
145+
}
146+
147+
.kbq-file-upload__action .kbq-icon.kbq-empty {
148+
color: var(--kbq-file-upload-multiple-states-disabled-icon-button-color);
149+
}
85150
}
86151

87152
&.selected {
@@ -96,30 +161,42 @@
96161
background-color: var(--kbq-background-error-less);
97162
border-color: var(--kbq-line-error) !important;
98163

99-
:not(.kbq-link),
100-
.kbq-icon.kbq-empty {
101-
color: var(--kbq-foreground-error);
164+
.kbq-dropzone__icon {
165+
color: var(--kbq-file-upload-single-states-error-upload-icon-color);
166+
}
167+
168+
.dropzone__text:not(.kbq-link),
169+
.kbq-file-multiple-uploaded__header {
170+
color: var(--kbq-file-upload-single-states-error-text-block-color);
102171
}
103172
}
104173

105174
.multiple__uploaded-item {
106175
&:has(.kbq-file-upload__row.error) {
107176
background-color: var(--kbq-background-error-less);
108177

109-
:not(.kbq-link),
110-
.kbq-icon.kbq-empty {
178+
.file-item__text,
179+
.kbq-file-upload__size {
111180
color: var(--kbq-foreground-error);
112181
}
182+
183+
.kbq-file-upload__file .kbq-icon.kbq-empty {
184+
color: var(--kbq-file-upload-multiple-states-error-left-icon-color);
185+
}
186+
187+
.kbq-file-upload__action .kbq-icon.kbq-empty {
188+
color: var(--kbq-file-upload-multiple-states-error-icon-button-color);
189+
}
113190
}
114191
}
115192
}
116193

117194
.multiple__uploaded-item {
118-
& .kbq-file-upload__file .kbq-icon.kbq-empty {
195+
.kbq-file-upload__file .kbq-icon.kbq-empty {
119196
color: var(--kbq-file-upload-multiple-default-left-icon-color);
120197
}
121198

122-
& .kbq-file-upload__action .kbq-icon.kbq-empty {
199+
.kbq-file-upload__action .kbq-icon.kbq-empty {
123200
color: var(--kbq-file-upload-multiple-default-icon-button-color);
124201
}
125202
}

‎packages/components/file-upload/file-upload-tokens.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,15 @@
3333
--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
3434
--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
3535
--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);
36+
--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);
3637
--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
3738
--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
39+
--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);
3840
--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
3941
--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);
4042
--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
4143
--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
44+
--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
4245
--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
4346
--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
4447
--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);
@@ -63,6 +66,7 @@
6366
--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);
6467
--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
6568
--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
69+
--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
6670
--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
6771
--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
6872
--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);

‎packages/components/file-upload/multiple-file-upload.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@if (!files.length) {
1111
<div class="dropzone">
1212
@if (size === 'default') {
13-
<i color="contrast-fade" kbq-icon="kbq-cloud-arrow-up-o_32"></i>
13+
<i kbq-icon="kbq-cloud-arrow-up-o_32" class="kbq-dropzone__icon"></i>
1414
<div class="dropzone__text">
1515
<span class="multiple__header">{{ config.title }}</span>
1616
<div>
@@ -19,7 +19,7 @@
1919
</div>
2020
</div>
2121
} @else {
22-
<i color="contrast-fade" kbq-icon="kbq-cloud-arrow-up-o_24"></i>
22+
<i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-dropzone__icon"></i>
2323
<span class="dropzone__text multiple__caption">
2424
{{ separatedCaptionTextForCompactSize[0] }}
2525
<label kbq-link pseudo [disabled]="disabled" [for]="inputId" [tabIndex]="-1">
@@ -87,7 +87,7 @@
8787
</div>
8888
<div class="btn-upload">
8989
<div class="dropzone">
90-
<i kbq-icon="kbq-cloud-arrow-up-o_24"></i>
90+
<i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-dropzone__icon"></i>
9191
<span class="dropzone__text multiple__caption">
9292
{{ separatedCaptionTextWhenSelected[0] }}
9393
<label kbq-link pseudo [disabled]="disabled" [for]="inputId" [tabIndex]="-1">

‎packages/components/file-upload/single-file-upload.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
>
88
@if (!file) {
99
<div class="dropzone">
10-
<i color="contrast-fade" kbq-icon="kbq-cloud-arrow-up-o_24"></i>
10+
<i kbq-icon="kbq-cloud-arrow-up-o_24" class="kbq-dropzone__icon"></i>
1111
<!-- prettier-ignore -->
1212
<span class="dropzone__text">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]="disabled" [tabIndex]="-1" [for]="inputId">{{ config.browseLink }}<input #input type="file" class="cdk-visually-hidden" [id]="inputId" [accept]="acceptedFiles" [disabled]="disabled" (change)="onFileSelectedViaClick($event)"></label>{{ separatedCaptionText[1] }}</span>
1313
</div>
@@ -27,6 +27,7 @@
2727
</div>
2828
<i
2929
kbq-icon-button="kbq-xmark-circle_16"
30+
class="kbq-file-upload__action"
3031
[disabled]="disabled"
3132
(click)="deleteItem($event)"
3233
(keydown.backspace)="deleteItem()"

0 commit comments

Comments
 (0)