Skip to content

Commit 3cf6ba5

Browse files
kyleshikeKyle Shike
kyleshike
authored and
Kyle Shike
committed
Remove Sass vars represented as CSS Properties (#1202)
1 parent 2ba4e6f commit 3cf6ba5

File tree

75 files changed

+915
-1074
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+915
-1074
lines changed

‎.storybook/preview.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,22 @@ const preview = {
1313
],
1414
parameters: {
1515
backgrounds: {
16-
default: '$ux-white',
16+
default: '--ux-white',
1717
values: [
1818
{
19-
name: '$ux-white',
19+
name: '--ux-white',
2020
value: colors.UX_WHITE,
2121
},
2222
{
23-
name: '$ux-cream',
23+
name: '--ux-cream',
2424
value: colors.UX_CREAM,
2525
},
2626
{
27-
name: '$ux-emerald-600',
27+
name: '--ux-emerald-600',
2828
value: colors.UX_EMERALD_600,
2929
},
3030
{
31-
name: '$ux-neutral-800',
31+
name: '--ux-neutral-800',
3232
value: colors.UX_NEUTRAL_800,
3333
}
3434
],

‎scss/baseline.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
@import './colors/palette';
2-
@import './typography';
3-
41
body {
5-
font-family: $synth-font-family;
6-
font-size: $synth-font-size-base;
7-
color: $ux-gray-900;
2+
font-family: var(--synth-font-family);
3+
font-size: var(--synth-font-size-base);
4+
color: var(--ux-gray-900);
85
}

‎scss/borders.scss‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎scss/box_shadow.scss‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎scss/buttons.scss‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
@import './colors';
22

33
.btn-link--neutral {
4-
color: $ux-gray-500;
4+
color: var(--ux-gray-500);
55

66
&:hover {
7-
color: $ux-gray-700;
7+
color: var(--ux-gray-700);
88
}
99
}
1010

1111
.btn-outline-secondary {
12-
color: $ux-blue;
13-
border-color: $ux-blue;
12+
color: var(--ux-blue);
13+
border-color: var(--ux-blue);
1414

1515
&:hover {
16-
background-color: $ux-blue;
17-
color: $ux-white;
16+
background-color: var(--ux-blue);
17+
color: var(--ux-white);
1818
}
1919
}
2020

@@ -26,13 +26,13 @@ $warning: $ux-yellow-400;
2626

2727
@mixin btn-focus-outline {
2828
box-shadow: none !important;
29-
outline: 2px solid $ux-blue-500;
29+
outline: 2px solid var(--ux-blue-500);
3030
outline-offset: 2px;
3131
}
3232

3333
@mixin btn-focus-outline--dark-bg {
3434
box-shadow: none !important;
35-
outline: 2px solid $ux-white;
35+
outline: 2px solid var(--ux-white);
3636
outline-offset: 2px;
3737
}
3838

@@ -133,11 +133,11 @@ $warning: $ux-yellow-400;
133133
$btn-outline-primary-hover-border,
134134
$btn-outline-primary-hover-color,
135135
);
136-
border-color: $btn-outline-primary-border;
136+
border-color: var(--btn-outline-primary-border);
137137

138138
&:active {
139-
background-color: $btn-outline-primary-active-background;
140-
border-color: $btn-outline-primary-active-border-color;
139+
background-color: var(--btn-outline-primary-active-background);
140+
border-color: var(--btn-outline-primary-active-border-color);
141141
}
142142

143143
&:focus-visible {
@@ -170,11 +170,11 @@ $warning: $ux-yellow-400;
170170
$btn-outline-primary-hover-border,
171171
$btn-outline-primary-hover-color,
172172
);
173-
border-color: $btn-outline-primary-border;
173+
border-color: var(--btn-outline-primary-border);
174174

175175
&:active {
176-
background-color: $btn-outline-primary-active-background;
177-
border-color: $btn-outline-primary-active-border-color;
176+
background-color: var(--btn-outline-primary-active-background);
177+
border-color: var(--btn-outline-primary-active-border-color);
178178
}
179179

180180
&:focus-visible {
@@ -225,7 +225,7 @@ $warning: $ux-yellow-400;
225225

226226
&:active, &.btn-tertiary:focus {
227227
box-shadow: none;
228-
border-color: $synth-hyperlink-color;
228+
border-color: var(--synth-hyperlink-color);
229229
}
230230
}
231231

@@ -286,11 +286,11 @@ $warning: $ux-yellow-400;
286286
$btn-outline-danger-hover-border,
287287
$btn-outline-danger-hover-color,
288288
);
289-
border-color: $btn-outline-danger-border;
289+
border-color: var(--btn-outline-danger-border);
290290

291291
&:active {
292-
background-color: $btn-outline-danger-active-background;
293-
border-color: $btn-outline-danger-active-border-color;
292+
background-color: var(--btn-outline-danger-active-background);
293+
border-color: var(--btn-outline-danger-active-border-color);
294294
}
295295

296296
&:focus-visible {
@@ -359,11 +359,11 @@ $warning: $ux-yellow-400;
359359
$btn-outline-warning-hover-border,
360360
$btn-outline-warning-hover-color,
361361
);
362-
border-color: $btn-outline-warning-border;
362+
border-color: var(--btn-outline-warning-border);
363363

364364
&:active {
365-
background-color: $btn-outline-warning-active-background;
366-
border-color: $btn-outline-warning-active-border-color;
365+
background-color: var(--btn-outline-warning-active-background);
366+
border-color: var(--btn-outline-warning-active-border-color);
367367
}
368368

369369
&:focus-visible {
@@ -403,7 +403,7 @@ $warning: $ux-yellow-400;
403403
);
404404

405405
&:disabled {
406-
color: $ux-gray-500;
406+
color: var(--ux-gray-500);
407407
}
408408

409409
&:focus-visible {
@@ -436,17 +436,17 @@ $warning: $ux-yellow-400;
436436
$btn-outline-transparent-hover-border,
437437
$btn-outline-transparent-hover-color,
438438
);
439-
border-color: $btn-outline-transparent-border;
439+
border-color: var(--btn-outline-transparent-border);
440440

441441
&:active {
442-
background-color: $btn-outline-transparent-active-background;
443-
border-color: $btn-outline-transparent-active-border-color;
442+
background-color: var(--btn-outline-transparent-active-background);
443+
border-color: var(--btn-outline-transparent-active-border-color);
444444
}
445445

446446
&:disabled {
447-
background-color: $ux-gray-300;
447+
background-color: var(--ux-gray-300);
448448
border: $ux-gray-400;
449-
color: $ux-gray-800;
449+
color: var(--ux-gray-800);
450450
}
451451

452452
&:focus-visible {
@@ -486,7 +486,7 @@ $warning: $ux-yellow-400;
486486
);
487487

488488
&:disabled {
489-
color: $ux-white;
489+
color: var(--ux-white);
490490
}
491491

492492
&:focus-visible {
@@ -526,7 +526,7 @@ $warning: $ux-yellow-400;
526526
);
527527

528528
&:disabled {
529-
color: $ux-white;
529+
color: var(--ux-white);
530530
}
531531

532532
&:focus-visible {
@@ -566,7 +566,7 @@ $warning: $ux-yellow-400;
566566
);
567567

568568
&:disabled {
569-
color: $ux-white;
569+
color: var(--ux-white);
570570
}
571571

572572
&:focus-visible {
@@ -606,7 +606,7 @@ $warning: $ux-yellow-400;
606606
);
607607

608608
&:disabled {
609-
color: $ux-white;
609+
color: var(--ux-white);
610610
}
611611

612612
&:focus-visible {
@@ -648,7 +648,7 @@ $warning: $ux-yellow-400;
648648
text-decoration: none;
649649

650650
&:disabled {
651-
color: $ux-blue;
651+
color: var(--ux-blue);
652652
opacity: 0.5;
653653
}
654654

‎scss/colors.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import './colors/flash';
21
@import './colors/inputs';
32
@import './colors/mod_rainbow';
43
@import './colors/palette';

‎scss/colors/flash.scss‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎scss/colors/mod_rainbow.scss‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
@mixin mod-rainbow($selector: '', $lighten: 0%, $color: $ux-white) {
1+
@mixin mod-rainbow($selector: '', $lighten: 0%, $color: #fff) {
22
&.ui-mod #{$selector} {
33
color: $color;
44
}
55

66
&.ui-mod--0 #{$selector} {
7-
background-color: $ux-gray-300;
8-
color: $ux-gray-800;
7+
background-color: var(--ux-gray-300);
8+
color: var(--ux-gray-800);
99
}
1010

1111
&.ui-mod--1 #{$selector} {
12-
background-color: $ux-green-300;
13-
color: $ux-green-900;
12+
background-color: var(--ux-green-300);
13+
color: var(--ux-green-900);
1414
}
1515

1616
&.ui-mod--2 #{$selector} {
17-
background-color: $ux-orange-200;
18-
color: $ux-orange-900;
17+
background-color: var(--ux-orange-200);
18+
color: var(--ux-orange-900);
1919
}
2020

2121
&.ui-mod--3 #{$selector} {
22-
background-color: $ux-yellow-300;
23-
color: $ux-yellow-900;
22+
background-color: var(--ux-yellow-300);
23+
color: var(--ux-yellow-900);
2424
}
2525

2626
&.ui-mod--4 #{$selector} {
27-
background-color: $ux-red-200;
28-
color: $ux-red-900;
27+
background-color: var(--ux-red-200);
28+
color: var(--ux-red-900);
2929
}
3030

3131
&.ui-mod--5 #{$selector} {
32-
background-color: $ux-purple-200;
33-
color: $ux-purple-900;
32+
background-color: var(--ux-purple-200);
33+
color: var(--ux-purple-900);
3434
}
3535
}

0 commit comments

Comments
 (0)