Skip to content

Commit 3f7cbc1

Browse files
tw15egankodiakhq[bot]
tw15egan
and
kodiakhq[bot]
authored
feat(Tokens): update color tokens pt. 2 (#8326)
* feat(FileUploader): begin updating color tokens * feat(FileUploader): update color tokens * feat(Form): update color tokens * feat(InlineLoading): update color tokens * feat(Link): update link styles * feat(ListBox): update color tokens * feat(Loading): update color tokens * feat(Modal): update color tokens * feat(MultiSelect): update color tokens * feat(Notification): update color tokens * feat(NumberInput): update color tokens * style(Tokens): replace layer-alt, fix focus-inverse spelling Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 58e3035 commit 3f7cbc1

File tree

14 files changed

+213
-175
lines changed

14 files changed

+213
-175
lines changed

‎packages/components/src/components/file-uploader/_file-uploader.scss‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
.#{$prefix}--file--invalid {
2626
margin-right: $carbon--spacing-03;
27-
fill: $support-01;
27+
fill: $support-error;
2828
}
2929

3030
// TODO: sync with type
@@ -33,11 +33,11 @@
3333
@include type-style('productive-heading-01');
3434

3535
margin-bottom: $carbon--spacing-03;
36-
color: $text-01;
36+
color: $text-primary;
3737
}
3838

3939
.#{$prefix}--file--label--disabled {
40-
color: $disabled-02;
40+
color: $text-disabled;
4141
}
4242

4343
.#{$prefix}--file-input {
@@ -58,15 +58,15 @@
5858
width: 100%;
5959
max-width: rem(320px);
6060
margin-bottom: $carbon--spacing-03;
61-
color: $link-01;
61+
color: $link-primary;
6262
outline: 2px solid transparent;
6363
outline-offset: -2px;
6464
cursor: pointer;
6565
transition: $duration--fast-02 motion(standard, productive);
6666

6767
&:focus,
6868
&:hover {
69-
outline: 2px solid $interactive-03;
69+
outline: 2px solid $focus;
7070
}
7171

7272
&:hover,
@@ -77,37 +77,37 @@
7777
}
7878

7979
&:active {
80-
color: $text-01;
80+
color: $text-primary;
8181
}
8282
}
8383

8484
.#{$prefix}--file-browse-btn--disabled {
85-
color: $disabled-02;
85+
color: $text-disabled;
8686
text-decoration: none;
8787
cursor: no-drop;
8888

8989
&:hover,
9090
&:focus {
91-
color: $disabled-02;
91+
color: $text-disabled;
9292
text-decoration: none;
9393
outline: none;
9494
}
9595
}
9696

9797
.#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container {
98-
border: 1px dashed $disabled-02;
98+
border: 1px dashed $button-disabled;
9999
}
100100

101101
.#{$prefix}--label-description {
102102
@include reset;
103103
@include type-style('body-short-01');
104104

105105
margin-bottom: $carbon--spacing-05;
106-
color: $text-02;
106+
color: $text-secondary;
107107
}
108108

109109
.#{$prefix}--label-description--disabled {
110-
color: $disabled-02;
110+
color: $text-disabled;
111111
}
112112

113113
// For backwards compatibility
@@ -134,7 +134,7 @@
134134
min-height: $carbon--spacing-09;
135135
margin-bottom: $carbon--spacing-03;
136136
word-break: break-word;
137-
background-color: $field-01;
137+
background-color: $field;
138138

139139
&:last-child {
140140
margin-bottom: 0;
@@ -184,7 +184,7 @@
184184

185185
max-width: rem(320px);
186186
margin-bottom: $carbon--spacing-03;
187-
background-color: $field-01;
187+
background-color: $field;
188188
outline-width: 1px;
189189
}
190190

@@ -204,7 +204,7 @@
204204

205205
.#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement {
206206
padding-top: $carbon--spacing-05;
207-
border-top: 1px solid $ui-03;
207+
border-top: 1px solid $border-subtle;
208208
}
209209

210210
.#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm
@@ -233,7 +233,7 @@
233233

234234
.#{$prefix}--file__selected-file--invalid
235235
.#{$prefix}--form-requirement__supplement {
236-
color: $text-01;
236+
color: $text-primary;
237237
}
238238

239239
// TODO: deprecate
@@ -252,7 +252,7 @@
252252
+ .#{$prefix}--form-requirement
253253
.#{$prefix}--form-requirement__supplement {
254254
padding-bottom: $carbon--spacing-03;
255-
color: $text-01;
255+
color: $text-primary;
256256
}
257257

258258
.#{$prefix}--file__state-container {
@@ -263,13 +263,13 @@
263263
padding-right: $carbon--spacing-05;
264264

265265
.#{$prefix}--loading__svg {
266-
stroke: $ui-05;
266+
stroke: $icon-primary;
267267
}
268268
}
269269

270270
.#{$prefix}--file__state-container .#{$prefix}--file-complete {
271271
cursor: pointer;
272-
fill: $interactive-04;
272+
fill: $interactive;
273273

274274
&:focus {
275275
@include focus-outline('border');
@@ -278,14 +278,14 @@
278278
// for checkmark contrast
279279
[data-icon-path='inner-path'] {
280280
opacity: 1;
281-
fill: $icon-03;
281+
fill: $icon-on-color;
282282
}
283283
}
284284

285285
.#{$prefix}--file__state-container .#{$prefix}--file-invalid {
286286
width: $carbon--spacing-05;
287287
height: $carbon--spacing-05;
288-
fill: $support-01;
288+
fill: $support-error;
289289
}
290290

291291
.#{$prefix}--file__state-container .#{$prefix}--file-close {
@@ -298,15 +298,15 @@
298298
background-color: transparent;
299299
border: none;
300300
cursor: pointer;
301-
fill: $icon-01;
301+
fill: $icon-primary;
302302

303303
&:focus {
304304
@include focus-outline('outline');
305305
}
306306
}
307307

308308
.#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
309-
fill: $icon-01;
309+
fill: $icon-primary;
310310

311311
// Windows, Firefox HCM Fix
312312
@media screen and (-ms-high-contrast: active),
@@ -327,12 +327,12 @@
327327
height: rem(96px);
328328
padding: $carbon--spacing-05;
329329
overflow: hidden;
330-
border: 1px dashed $ui-04;
330+
border: 1px dashed $border-strong;
331331
}
332332

333333
.#{$prefix}--file__drop-container--drag-over {
334334
background: none;
335-
outline: 2px solid $interactive-03;
335+
outline: 2px solid $focus;
336336
outline-offset: -2px;
337337
}
338338
}

‎packages/components/src/components/form/_form.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343

4444
display: inline-block;
4545
margin-bottom: $carbon--spacing-03;
46-
color: $text-02;
46+
color: $text-secondary;
4747
font-weight: $input-label-weight;
4848
line-height: 1rem;
4949
vertical-align: baseline;
@@ -166,19 +166,19 @@
166166
// Added to prevent error text from displaying under helper text in Safari (#6392)
167167
width: 100%;
168168
margin-top: $carbon--spacing-02;
169-
color: $text-02;
169+
color: $text-secondary;
170170
opacity: 1;
171171
}
172172

173173
.#{$prefix}--label--disabled,
174174
.#{$prefix}--form__helper-text--disabled {
175-
color: $disabled-02;
175+
color: $text-disabled;
176176
}
177177

178178
// If a FormGroup is disabled, Form labels and helper text nested inside should also be disabled
179179
fieldset[disabled] .#{$prefix}--label,
180180
fieldset[disabled] .#{$prefix}--form__helper-text {
181-
color: $disabled-02;
181+
color: $text-disabled;
182182
}
183183
}
184184

‎packages/components/src/components/inline-loading/_inline-loading.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
.#{$prefix}--inline-loading__text {
3535
@include type-style('label-01');
3636

37-
color: $text-02;
37+
color: $text-secondary;
3838
}
3939

4040
.#{$prefix}--inline-loading__animation {
@@ -46,7 +46,7 @@
4646
}
4747

4848
.#{$prefix}--inline-loading__checkmark-container {
49-
fill: $support-02;
49+
fill: $support-success;
5050

5151
// For deprecated older markup
5252
&.#{$prefix}--inline-loading__svg {
@@ -66,7 +66,7 @@
6666
animation-duration: 250ms;
6767
animation-fill-mode: forwards;
6868
fill: none;
69-
stroke: $interactive-04;
69+
stroke: $interactive;
7070
stroke-width: 1.8;
7171
stroke-dasharray: 12;
7272
stroke-dashoffset: 12;
@@ -75,15 +75,15 @@
7575
.#{$prefix}--inline-loading--error {
7676
width: rem(16px);
7777
height: rem(16px);
78-
fill: $support-01;
78+
fill: $support-error;
7979

8080
&[hidden] {
8181
display: none;
8282
}
8383
}
8484

8585
.#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
86-
stroke: $interactive-04;
86+
stroke: $interactive;
8787
}
8888
/* If IE11 Don't show check animation */
8989
@media screen and (-ms-high-contrast: active),

‎packages/components/src/components/link/_link.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,20 @@
2525
@include reset;
2626
@include type-style('body-short-01');
2727

28-
color: $link-01;
28+
color: $link-primary;
2929
text-decoration: none;
3030
outline: none;
3131
transition: color $duration--fast-01 motion(standard, productive);
3232

3333
&:hover {
34-
color: $hover-primary-text;
34+
color: $link-primary-hover;
3535
text-decoration: underline;
3636
}
3737

3838
&:active,
3939
&:active:visited,
4040
&:active:visited:hover {
41-
color: $text-01;
41+
color: $text-primary;
4242
text-decoration: underline;
4343
}
4444

@@ -47,11 +47,11 @@
4747
}
4848

4949
&:visited {
50-
color: $link-01;
50+
color: $link-primary;
5151
}
5252

5353
&:visited:hover {
54-
color: $hover-primary-text;
54+
color: $link-primary-hover;
5555
}
5656
}
5757

@@ -61,18 +61,18 @@
6161
@include type-style('body-short-01');
6262

6363
display: inline;
64-
color: $disabled-02;
64+
color: $text-disabled;
6565
font-weight: 400;
6666
text-decoration: none;
6767
cursor: not-allowed;
6868
}
6969

7070
.#{$prefix}--link.#{$prefix}--link--visited:visited {
71-
color: $visited-link;
71+
color: $link-visited;
7272
}
7373

7474
.#{$prefix}--link.#{$prefix}--link--visited:visited:hover {
75-
color: $hover-primary-text;
75+
color: $link-primary-hover;
7676
}
7777

7878
.#{$prefix}--link.#{$prefix}--link--inline {

0 commit comments

Comments
 (0)