Skip to content

Commit 2197ec8

Browse files
DchykDchyk
authored
Delete unused and consolidate existing duplicates into synth variables (#1351)
* Delete deprecated color variables * Consolidate --synth-gray-300 * Consolidate --synth-blue-300 * Consolidate --synth-red-200 * Consolidate --synth-blue-400 * Consolidate --synth-emerald-400 * Consolidate --synth-green-200 * Consolidate --synth-green-300 * Consolidate --synth-green-600 * Consolidate --synth-gray-100 * Consolidate --synth-red-300 * Restore ux variables that are still being used * Consolidate --synth-navy-300
1 parent 0f6961d commit 2197ec8

File tree

14 files changed

+49
-107
lines changed

14 files changed

+49
-107
lines changed

‎scss/buttons.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
}
1010

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

1515
&:hover {
16-
background-color: var(--ux-blue);
16+
background-color: var(--synth-blue-300);
1717
color: var(--ux-white);
1818
}
1919
}
@@ -481,7 +481,7 @@ $primary: $ux-emerald-600;
481481
text-decoration: none;
482482

483483
&:disabled {
484-
color: var(--ux-blue);
484+
color: var(--synth-blue-300);
485485
opacity: 0.5;
486486
}
487487

‎scss/css_properties.scss‎

Lines changed: 4 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,10 @@
2727
--ux-emerald: #158D71;
2828
--ux-gray: #A1A1A1;
2929
--ux-green: #04713C;
30-
--ux-light-blue: #7CCBF2;
3130
--ux-navy: #011936;
3231
--ux-orange: #F59C27;
3332
--ux-purple: #725CCC;
3433
--ux-red: #E03131;
35-
--ux-sand: #DABDA2;
3634
--ux-teal: #0E4749;
3735
--ux-yellow: #F3CE14;
3836
--ux-white: #FFF;
@@ -49,7 +47,7 @@
4947
--ux-blue-200: #BDD1FB;
5048
--ux-blue-300: #A6C0F5;
5149
--ux-blue-400: #7497DF;
52-
--ux-blue-500: var(--ux-blue);
50+
--ux-blue-500: var(--synth-blue-300);
5351
--ux-blue-600: #2854AF;
5452
--ux-blue-700: #143C8D;
5553
--ux-blue-800: #0B2D72;
@@ -59,11 +57,10 @@
5957
--ux-emerald-200: #91CABB;
6058
--ux-emerald-300: #65B8A2;
6159
--ux-emerald-400: #3EA388;
62-
--ux-emerald-500: var(--ux-emerald);
60+
--ux-emerald-500: var(--synth-emerald-400);
6361
--ux-emerald-600: #177863;
6462
--ux-emerald-700: #156152;
6563
--ux-emerald-800: #0D4A3E;
66-
--ux-emerald-900: #073B31;
6764

6865
--ux-gray-100: #F9F9F9;
6966
--ux-gray-200: #F1F1F1;
@@ -78,7 +75,7 @@
7875
--ux-green-100: #D4F6E5;
7976
--ux-green-200: #A3F9CF;
8077
--ux-green-300: #70E2AB;
81-
--ux-green-400: #40CC88;
78+
--ux-green-400: #40cc88;
8279
--ux-green-500: #21B36C;
8380
--ux-green-600: #09914F;
8481
--ux-green-700: var(--ux-green);
@@ -99,10 +96,6 @@
9996
--ux-neutral-200: var(--ux-cream);
10097
--ux-neutral-300: #E6E2E0;
10198
--ux-neutral-400: #CECBC9;
102-
--ux-neutral-500: #B5B0AB;
103-
--ux-neutral-600: #9A938D;
104-
--ux-neutral-700: #817874;
105-
--ux-neutral-800: #33312F;
10699
--ux-neutral-900: var(--ux-black);
107100

108101
--ux-orange-100: #FDEAD2;
@@ -119,31 +112,15 @@
119112
--ux-red-200: #F3BDBD;
120113
--ux-red-300: #EB7A7A;
121114
--ux-red-400: #E44E4E;
122-
--ux-red-500: var(--ux-red);
115+
--ux-red-500: var(--synth-red-200);
123116
--ux-red-600: #C71F1F;
124117
--ux-red-700: #B11B1B;
125118
--ux-red-800: #9B1818;
126119
--ux-red-900: #470404;
127120

128-
--ux-sand-100: #ECE1D4;
129-
--ux-sand-200: #E8DAC9;
130-
--ux-sand-300: #E5D2BD;
131-
--ux-sand-400: #DFC7AF;
132-
--ux-sand-500: var(--ux-sand);
133-
--ux-sand-600: #D4B191;
134-
--ux-sand-700: #CFAA86;
135-
--ux-sand-800: #C59B72;
136-
--ux-sand-900: #BA8E5E;
137-
138121
--ux-teal-100: #CAE1E2;
139-
--ux-teal-200: #A2CBCD;
140-
--ux-teal-300: #85A9AA;
141-
--ux-teal-400: #408F91;
142-
--ux-teal-500: #2A7779;
143122
--ux-teal-600: #1C5D5F;
144-
--ux-teal-700: var(--ux-teal);
145123
--ux-teal-800: #093C3F;
146-
--ux-teal-900: #083236;
147124

148125
--ux-yellow-100: #FFF1AB;
149126
--ux-yellow-200: #FFEB85;
@@ -155,14 +132,8 @@
155132
--ux-yellow-800: #A98D01;
156133
--ux-yellow-900: #453A00;
157134

158-
--ux-purple-100: #EAE6FA;
159135
--ux-purple-200: #DCD7F1;
160-
--ux-purple-300: #BDB3E5;
161-
--ux-purple-400: #9382D9;
162136
--ux-purple-500: var(--ux-purple);
163-
--ux-purple-600: #5642A6;
164-
--ux-purple-700: #42308C;
165-
--ux-purple-800: #34227A;
166137
--ux-purple-900: #120640;
167138

168139
--synth-spacing-base: 4px;

‎scss/forms/form_group.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@
2828

2929
&--is-invalid {
3030
input, select, textarea {
31-
border-color: var(--ux-red);
31+
border-color: var(--synth-red-200);
3232
}
3333

3434
.Input {
3535
// important because Input.scss focus style also sets this border
36-
border-color: var(--ux-red-600) !important;
36+
border-color: var(--synth-red-300) !important;
3737
}
3838
}
3939

@@ -73,7 +73,7 @@
7373
&__invalid-feedback {
7474
font: var(--synth-font-subtext-medium);
7575

76-
color: var(--ux-red);
76+
color: var(--synth-red-200);
7777
padding: 6px 0;
7878
margin: 0;
7979

‎scss/variables.scss‎

Lines changed: 14 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -15,38 +15,37 @@
1515
SYNTH_WARNING_AMBER_LIGHT: var(--synth-yellow-100);
1616
SYNTH_WARNING_AMBER_ALTERNATE: var(--synth-orange-100);
1717

18-
SYNTH_ALERT_BG_NEUTRAL: var(--synth-alert-bg-neutral);
18+
SYNTH_ALERT_BG_NEUTRAL: var(--synth-gray-300);
1919
SYNTH_DIV_STROKE_NEUTRAL: var(--synth-div-stroke-neutral);
2020
SYNTH_HEADER_NEUTRAL: var(--synth-header-neutral);
2121
SYNTH_PAGE_NEUTRAL: var(--synth-page-neutral);
22-
SYNTH_TEXT_NEUTRAL: var(--synth-text-neutral);
23-
SYNTH_UNSELECTED_NEUTRAL: var(--synth-unselected-neutral);
22+
SYNTH_TEXT_NEUTRAL: var(--synth-gray-600);
23+
SYNTH_UNSELECTED_NEUTRAL: var(--synth-gray-500);
2424

25-
SYNTH_ACCENT_GREEN: var(--synth-accent-green);
25+
SYNTH_ACCENT_GREEN: var(--synth-emerald-400);
2626
SYNTH_DARK_BACKGROUND_SELECTED_BLUE: var(--synth-dark-background-selected-blue);
2727
SYNTH_HOVER_STATE: var(--synth-hover-state);
2828
SYNTH_INDICATOR_STROKE_GREEN: var(--synth-indicator-stroke-green);
29-
SYNTH_NAVBAR_BLUE: var(--synth-navbar-blue);
29+
SYNTH_NAVBAR_BLUE: var(--synth-navy-300);
3030
SYNTH_PRIMARY_CTA_BLUE: var(--synth-primary-cta-blue);
3131
SYNTH_SELECTED_STATE_GREEN: var(--synth-selected-state-green);
3232

33-
SYNTH_HYPERLINK_COLOR: var(--synth-hyperlink-color);
33+
SYNTH_HYPERLINK_COLOR: var(--synth-blue-300);
3434

3535
SYNTH_HOVER_BLUE: var(--synth-hover-blue);
3636
SYNTH_HEADER_GRAY_BLUE: var(--synth-header-gray-blue);
3737

3838
UX_BLACK: var(--ux-black);
39-
UX_BLUE: var(--ux-blue);
39+
UX_BLUE: var(--synth-blue-300);
4040
UX_CREAM: var(--ux-cream);
4141

42-
UX_EMERALD: var(--ux-emerald);
42+
UX_EMERALD: var(--synth-emerald-400);
4343
UX_GRAY: var(--ux-gray);
4444
UX_GREEN: var(--ux-green);
4545
UX_NAVY: var(--ux-navy);
4646
UX_ORANGE: var(--ux-orange);
4747
UX_PURPLE: var(--ux-purple);
48-
UX_RED: var(--ux-red);
49-
UX_SAND: var(--ux-sand);
48+
UX_RED: var(--synth-red-200);
5049
UX_TEAL: var(--ux-teal);
5150
UX_YELLOW: var(--ux-yellow);
5251
UX_WHITE: var(--ux-white);
@@ -58,18 +57,17 @@
5857
UX_BLUE_500: var(--ux-blue-500);
5958
UX_BLUE_600: var(--ux-blue-600);
6059
UX_BLUE_700: var(--ux-blue-700);
61-
UX_BLUE_800: var(--ux-blue-800);
60+
UX_BLUE_800: var(--synth-blue-400);
6261
UX_BLUE_900: var(--ux-blue-900);
6362

6463
UX_EMERALD_100: var(--ux-emerald-100);
6564
UX_EMERALD_200: var(--ux-emerald-200);
6665
UX_EMERALD_300: var(--ux-emerald-300);
6766
UX_EMERALD_400: var(--ux-emerald-400);
68-
UX_EMERALD_500: var(--ux-emerald-500);
67+
UX_EMERALD_500: var(--synth-emerald-400);
6968
UX_EMERALD_600: var(--ux-emerald-600);
7069
UX_EMERALD_700: var(--ux-emerald-700);
7170
UX_EMERALD_800: var(--ux-emerald-800);
72-
UX_EMERALD_900: var(--ux-emerald-900);
7371

7472
UX_GRAY_100: var(--ux-gray-100);
7573
UX_GRAY_200: var(--ux-gray-200);
@@ -84,11 +82,10 @@
8482
UX_GREEN_100: var(--ux-green-100);
8583
UX_GREEN_200: var(--ux-green-200);
8684
UX_GREEN_300: var(--ux-green-300);
87-
UX_GREEN_400: var(--ux-green-400);
8885
UX_GREEN_500: var(--ux-green-500);
89-
UX_GREEN_600: var(--ux-green-600);
86+
UX_GREEN_600: var(--synth-green-200);
9087
UX_GREEN_700: var(--ux-green-700);
91-
UX_GREEN_800: var(--ux-green-800);
88+
UX_GREEN_800: var(--synth-green-300);
9289
UX_GREEN_900: var(--ux-green-900);
9390

9491
UX_NAVY_100: var(--ux-navy-100);
@@ -106,10 +103,6 @@
106103

107104
UX_NEUTRAL_300: var(--ux-neutral-300);
108105
UX_NEUTRAL_400: var(--ux-neutral-400);
109-
UX_NEUTRAL_500: var(--ux-neutral-500);
110-
UX_NEUTRAL_600: var(--ux-neutral-600);
111-
UX_NEUTRAL_700: var(--ux-neutral-700);
112-
UX_NEUTRAL_800: var(--ux-neutral-800);
113106
UX_NEUTRAL_900: var(--ux-black);
114107

115108
UX_ORANGE_100: var(--ux-orange-100);
@@ -127,38 +120,16 @@
127120
UX_RED_300: var(--ux-red-300);
128121
UX_RED_400: var(--ux-red-400);
129122
UX_RED_500: var(--ux-red-500);
130-
UX_RED_600: var(--ux-red-600);
123+
UX_RED_600: var(--synth-red-300);
131124
UX_RED_700: var(--ux-red-700);
132125
UX_RED_800: var(--ux-red-800);
133126
UX_RED_900: var(--ux-red-900);
134127

135-
UX_SAND_100: var(--ux-sand-100);
136-
UX_SAND_200: var(--ux-sand-200);
137-
UX_SAND_300: var(--ux-sand-300);
138-
UX_SAND_400: var(--ux-sand-400);
139-
UX_SAND_500: var(--ux-sand-500);
140-
UX_SAND_600: var(--ux-sand-600);
141-
UX_SAND_700: var(--ux-sand-700);
142-
UX_SAND_800: var(--ux-sand-800);
143-
UX_SAND_900: var(--ux-sand-900);
144-
145-
UX_TEAL_100: var(--ux-teal-100);
146-
UX_TEAL_200: var(--ux-teal-200);
147-
UX_TEAL_300: var(--ux-teal-300);
148-
UX_TEAL_400: var(--ux-teal-400);
149-
UX_TEAL_500: var(--ux-teal-500);
150-
UX_TEAL_600: var(--ux-teal-600);
151-
UX_TEAL_700: var(--ux-teal-700);
152-
UX_TEAL_800: var(--ux-teal-800);
153-
UX_TEAL_900: var(--ux-teal-900);
154-
155128
UX_YELLOW_100: var(--ux-yellow-100);
156129
UX_YELLOW_200: var(--ux-yellow-200);
157130
UX_YELLOW_300: var(--ux-yellow-300);
158131
UX_YELLOW_400: var(--ux-yellow-400);
159132
UX_YELLOW_500: var(--ux-yellow-500);
160-
UX_YELLOW_600: var(--ux-yellow-600);
161-
UX_YELLOW_700: var(--ux-yellow-700);
162133
UX_YELLOW_800: var(--ux-yellow-800);
163134
UX_YELLOW_900: var(--ux-yellow-900);
164135
}

‎src/Accordion/AccordionItem.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@
2020

2121
&--info {
2222
background-color: var(--ux-blue-100);
23-
color: var(--ux-blue-800);
23+
color: var(--synth-blue-400);
2424
}
2525
}

‎src/Alert/Alert.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@
4545
;
4646
}
4747

48-
background-color: var(--synth-alert-bg-neutral);
48+
background-color: var(--synth-gray-300);
4949
border-radius: var(--ux-border-radius);
50-
color: var(--synth-text-neutral);
50+
color: var(--synth-gray-600);
5151
margin-bottom: var(--synth-spacing-4);
5252
padding: var(--synth-spacing-4);
5353
position: relative;
@@ -93,7 +93,7 @@
9393
}
9494

9595
.Alert-success {
96-
border-left: 8px solid var(--synth-accent-green);
96+
border-left: 8px solid var(--synth-emerald-400);
9797

9898
.close {
9999
@include close-action;
@@ -104,7 +104,7 @@
104104
}
105105

106106
.Alert__icon {
107-
color: var(--synth-accent-green);
107+
color: var(--synth-emerald-400);
108108

109109
.fa-check {
110110
color: var(--ux-gray-100);
@@ -113,7 +113,7 @@
113113
}
114114

115115
.Alert-info {
116-
border-left: 8px solid var(--synth-hyperlink-color);
116+
border-left: 8px solid var(--synth-blue-300);
117117

118118
.close {
119119
@include close-action;
@@ -176,7 +176,7 @@
176176
}
177177

178178
.Alert__icon {
179-
color: var(--ux-red);
179+
color: var(--synth-red-200);
180180
}
181181
}
182182
}
@@ -245,7 +245,7 @@
245245

246246
.Alert-success {
247247
background-color: var(--ux-green-100);
248-
color: var(--ux-green-800);
248+
color: var(--synth-green-300);
249249
border-left: 8px solid var(--ux-green-400);
250250

251251
.close {
@@ -260,14 +260,14 @@
260260
color: var(--ux-green-400);
261261

262262
.fa-check {
263-
color: var(--ux-green-800);
263+
color: var(--synth-green-300);
264264
}
265265
}
266266
}
267267

268268
.Alert-info {
269269
background-color: var(--ux-blue-100);
270-
color: var(--ux-blue-800);
270+
color: var(--synth-blue-400);
271271
border-left: 8px solid var(--ux-blue-300);
272272

273273
.close {
@@ -347,6 +347,6 @@
347347
}
348348

349349
.Alert__icon {
350-
color: var(--ux-red);
350+
color: var(--synth-red-200);
351351
}
352352
}

‎src/Avatar/Avatar.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
vertical-align: middle;
2828
}
2929

30-
background-color: var(--ux-blue);
30+
background-color: var(--synth-blue-300);
3131
border-radius: 50%;
3232
color: var(--ux-white);
3333
display: inline-block;

‎src/DateTimePicker/DateTimePicker.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
.react-datepicker-wrapper
124124
.react-datepicker__input-container
125125
input {
126-
border: thin solid var(--ux-red);
126+
border: thin solid var(--synth-red-200);
127127
}
128128

129129
// Undoing some styles when this is nested within a bootstrap table

0 commit comments

Comments
 (0)