Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

Commit 2ca8779

Browse files
brianacnguyenbrianacnguyen
committed
refactor: updated css variable namings
1 parent 39cc2ae commit 2ca8779

File tree

3 files changed

+136
-136
lines changed

3 files changed

+136
-136
lines changed

‎src/css/brand-colors.css‎

Lines changed: 90 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -7,103 +7,103 @@
77
*/
88
:root {
99
/* Grey */
10-
--brand-colors-grey-100: #d6d9dc;
11-
--brand-colors-grey-200: #bbc0c5;
12-
--brand-colors-grey-300: #9fa6ae;
13-
--brand-colors-grey-400: #848c96;
14-
--brand-colors-grey-500: #6a737d;
15-
--brand-colors-grey-600: #535a61;
16-
--brand-colors-grey-700: #3b4046;
17-
--brand-colors-grey-800: #24272a;
18-
--brand-colors-grey-900: #141618;
19-
--brand-colors-grey-1000: #000000;
20-
--brand-colors-grey-050: #f2f4f6;
21-
--brand-colors-grey-000: #ffffff;
22-
--brand-colors-grey-025: #fafbfc;
10+
--brand-colors-grey-grey100: #d6d9dc;
11+
--brand-colors-grey-grey200: #bbc0c5;
12+
--brand-colors-grey-grey300: #9fa6ae;
13+
--brand-colors-grey-grey400: #848c96;
14+
--brand-colors-grey-grey500: #6a737d;
15+
--brand-colors-grey-grey600: #535a61;
16+
--brand-colors-grey-grey700: #3b4046;
17+
--brand-colors-grey-grey800: #24272a;
18+
--brand-colors-grey-grey900: #141618;
19+
--brand-colors-grey-grey1000: #000000;
20+
--brand-colors-grey-grey050: #f2f4f6;
21+
--brand-colors-grey-grey000: #ffffff;
22+
--brand-colors-grey-grey025: #fafbfc;
2323
/* Blue */
24-
--brand-colors-blue-100: #a7d9fe;
25-
--brand-colors-blue-200: #75c4fd;
26-
--brand-colors-blue-300: #43aefc;
27-
--brand-colors-blue-400: #1098fc;
28-
--brand-colors-blue-500: #0376c9;
29-
--brand-colors-blue-600: #0260a4;
30-
--brand-colors-blue-700: #024272;
31-
--brand-colors-blue-800: #01253f;
32-
--brand-colors-blue-900: #00080d;
33-
--brand-colors-blue-050: #eaf6ff;
34-
--brand-colors-blue-025: #eaf6ff;
24+
--brand-colors-blue-blue100: #a7d9fe;
25+
--brand-colors-blue-blue200: #75c4fd;
26+
--brand-colors-blue-blue300: #43aefc;
27+
--brand-colors-blue-blue400: #1098fc;
28+
--brand-colors-blue-blue500: #0376c9;
29+
--brand-colors-blue-blue600: #0260a4;
30+
--brand-colors-blue-blue700: #024272;
31+
--brand-colors-blue-blue800: #01253f;
32+
--brand-colors-blue-blue900: #00080d;
33+
--brand-colors-blue-blue050: #eaf6ff;
34+
--brand-colors-blue-blue025: #eaf6ff;
3535
/* Green */
36-
--brand-colors-green-100: #afecbd;
37-
--brand-colors-green-200: #5dd879;
38-
--brand-colors-green-300: #28a745;
39-
--brand-colors-green-400: #28a745;
40-
--brand-colors-green-500: #1c8234;
41-
--brand-colors-green-600: #145523;
42-
--brand-colors-green-700: #145523;
43-
--brand-colors-green-800: #0a2c12;
44-
--brand-colors-green-900: #041007;
45-
--brand-colors-green-050: #d6ffdf;
46-
--brand-colors-green-025: #f3fcf5;
36+
--brand-colors-green-green100: #afecbd;
37+
--brand-colors-green-green200: #5dd879;
38+
--brand-colors-green-green300: #28a745;
39+
--brand-colors-green-green400: #28a745;
40+
--brand-colors-green-green500: #1c8234;
41+
--brand-colors-green-green600: #145523;
42+
--brand-colors-green-green700: #145523;
43+
--brand-colors-green-green800: #0a2c12;
44+
--brand-colors-green-green900: #041007;
45+
--brand-colors-green-green050: #d6ffdf;
46+
--brand-colors-green-green025: #f3fcf5;
4747
/* Red */
48-
--brand-colors-red-100: #f7d5d8;
49-
--brand-colors-red-200: #f1b9be;
50-
--brand-colors-red-300: #e88f97;
51-
--brand-colors-red-400: #e06470;
52-
--brand-colors-red-500: #d73847;
53-
--brand-colors-red-600: #8e1d28;
54-
--brand-colors-red-700: #64141c;
55-
--brand-colors-red-800: #3a0c10;
56-
--brand-colors-red-900: #3a0c10;
57-
--brand-colors-red-050: #fcf2f3;
58-
--brand-colors-red-025: #fcf2f3;
48+
--brand-colors-red-red100: #f7d5d8;
49+
--brand-colors-red-red200: #f1b9be;
50+
--brand-colors-red-red300: #e88f97;
51+
--brand-colors-red-red400: #e06470;
52+
--brand-colors-red-red500: #d73847;
53+
--brand-colors-red-red600: #8e1d28;
54+
--brand-colors-red-red700: #64141c;
55+
--brand-colors-red-red800: #3a0c10;
56+
--brand-colors-red-red900: #3a0c10;
57+
--brand-colors-red-red050: #fcf2f3;
58+
--brand-colors-red-red025: #fcf2f3;
5959
/* Yellow */
60-
--brand-colors-yellow-100: #ffdf70;
61-
--brand-colors-yellow-200: #ffc70a;
62-
--brand-colors-yellow-300: #f8883b;
63-
--brand-colors-yellow-400: #f66a0a;
64-
--brand-colors-yellow-500: #bf5208;
65-
--brand-colors-yellow-600: #954005;
66-
--brand-colors-yellow-700: #632b04;
67-
--brand-colors-yellow-800: #321602;
68-
--brand-colors-yellow-900: #321602;
69-
--brand-colors-yellow-050: #fff2c5;
70-
--brand-colors-yellow-025: #fefcde;
60+
--brand-colors-yellow-yellow100: #ffdf70;
61+
--brand-colors-yellow-yellow200: #ffc70a;
62+
--brand-colors-yellow-yellow300: #f8883b;
63+
--brand-colors-yellow-yellow400: #f66a0a;
64+
--brand-colors-yellow-yellow500: #bf5208;
65+
--brand-colors-yellow-yellow600: #954005;
66+
--brand-colors-yellow-yellow700: #632b04;
67+
--brand-colors-yellow-yellow800: #321602;
68+
--brand-colors-yellow-yellow900: #321602;
69+
--brand-colors-yellow-yellow050: #fff2c5;
70+
--brand-colors-yellow-yellow025: #fefcde;
7171
/* Orange */
72-
--brand-colors-orange-100: #fbc49d;
73-
--brand-colors-orange-200: #faa66c;
74-
--brand-colors-orange-300: #f8883b;
75-
--brand-colors-orange-400: #f66a0a;
76-
--brand-colors-orange-500: #bf5208;
77-
--brand-colors-orange-600: #954005;
78-
--brand-colors-orange-700: #632b04;
79-
--brand-colors-orange-800: #321602;
80-
--brand-colors-orange-900: #321602;
81-
--brand-colors-orange-050: #fde2cf;
82-
--brand-colors-orange-025: #fef5ef;
72+
--brand-colors-orange-orange100: #fbc49d;
73+
--brand-colors-orange-orange200: #faa66c;
74+
--brand-colors-orange-orange300: #f8883b;
75+
--brand-colors-orange-orange400: #f66a0a;
76+
--brand-colors-orange-orange500: #bf5208;
77+
--brand-colors-orange-orange600: #954005;
78+
--brand-colors-orange-orange700: #632b04;
79+
--brand-colors-orange-orange800: #321602;
80+
--brand-colors-orange-orange900: #321602;
81+
--brand-colors-orange-orange050: #fde2cf;
82+
--brand-colors-orange-orange025: #fef5ef;
8383
/* Purple */
84-
--brand-colors-purple-100: #efd2ff;
85-
--brand-colors-purple-200: #cfb5f0;
86-
--brand-colors-purple-300: #d27dff;
87-
--brand-colors-purple-400: #b864f5;
88-
--brand-colors-purple-500: #8b45b6;
89-
--brand-colors-purple-600: #6c2ab2;
90-
--brand-colors-purple-700: #4c1178;
91-
--brand-colors-purple-800: #32054d;
92-
--brand-colors-purple-900: #280a00;
93-
--brand-colors-purple-050: #fbf2ff;
94-
--brand-colors-purple-025: #fcf6ff;
84+
--brand-colors-purple-purple100: #efd2ff;
85+
--brand-colors-purple-purple200: #cfb5f0;
86+
--brand-colors-purple-purple300: #d27dff;
87+
--brand-colors-purple-purple400: #b864f5;
88+
--brand-colors-purple-purple500: #8b45b6;
89+
--brand-colors-purple-purple600: #6c2ab2;
90+
--brand-colors-purple-purple700: #4c1178;
91+
--brand-colors-purple-purple800: #32054d;
92+
--brand-colors-purple-purple900: #280a00;
93+
--brand-colors-purple-purple050: #fbf2ff;
94+
--brand-colors-purple-purple025: #fcf6ff;
9595
/* Lime */
96-
--brand-colors-lime-100: #b8ef4a;
97-
--brand-colors-lime-200: #95ca45;
98-
--brand-colors-lime-300: #7ab040;
99-
--brand-colors-lime-400: #64993d;
100-
--brand-colors-lime-500: #457a39;
101-
--brand-colors-lime-600: #275b35;
102-
--brand-colors-lime-700: #093a31;
103-
--brand-colors-lime-800: #022321;
104-
--brand-colors-lime-900: #011515;
105-
--brand-colors-lime-025: #effed9;
106-
--brand-colors-lime-050: #e3febd;
96+
--brand-colors-lime-lime100: #b8ef4a;
97+
--brand-colors-lime-lime200: #95ca45;
98+
--brand-colors-lime-lime300: #7ab040;
99+
--brand-colors-lime-lime400: #64993d;
100+
--brand-colors-lime-lime500: #457a39;
101+
--brand-colors-lime-lime600: #275b35;
102+
--brand-colors-lime-lime700: #093a31;
103+
--brand-colors-lime-lime800: #022321;
104+
--brand-colors-lime-lime900: #011515;
105+
--brand-colors-lime-lime025: #effed9;
106+
--brand-colors-lime-lime050: #e3febd;
107107
/* White and Black */
108108
--brand-colors-white: #ffffff;
109109
--brand-colors-black: #000000;

‎src/css/dark-theme-colors.css‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
*/
44
[data-theme='dark'] {
55
/* For default neutral backgrounds */
6-
--color-background-default: var(--brand-colors-grey-800);
6+
--color-background-default: var(--brand-colors-grey-grey800);
77
/* For secondary neutral backgrounds. */
8-
--color-background-alternative: var(--brand-colors-grey-900);
8+
--color-background-alternative: var(--brand-colors-grey-grey900);
99
/* For "hover" states that use background-default. */
1010
--color-background-default-hover: #313235;
1111
/* For "pressed" states that use background-alternative. */
@@ -19,79 +19,79 @@
1919
/* For "pressed" state that use no background fill. */
2020
--color-background-pressed: #ffffff14;
2121
/* For default neutral text. */
22-
--color-text-default: var(--brand-colors-grey-000);
22+
--color-text-default: var(--brand-colors-grey-grey000);
2323
/* For softer contrast neutral text */
24-
--color-text-alternative: var(--brand-colors-grey-200);
24+
--color-text-alternative: var(--brand-colors-grey-grey200);
2525
/* For the softest contrast neutral text (not accessible) */
26-
--color-text-muted: var(--brand-colors-grey-400);
26+
--color-text-muted: var(--brand-colors-grey-grey400);
2727
/* For default neutral icons */
28-
--color-icon-default: var(--brand-colors-grey-000);
28+
--color-icon-default: var(--brand-colors-grey-grey000);
2929
/* For softer neutral icons */
30-
--color-icon-alternative: var(--brand-colors-grey-200);
30+
--color-icon-alternative: var(--brand-colors-grey-grey200);
3131
/* For the weakest contrast neutral icons (not accessible) */
32-
--color-icon-muted: var(--brand-colors-grey-400);
32+
--color-icon-muted: var(--brand-colors-grey-grey400);
3333
/* For soft contrast neutral border */
34-
--color-border-default: var(--brand-colors-grey-400);
34+
--color-border-default: var(--brand-colors-grey-grey400);
3535
/* For the weakest contrast neutral border */
3636
--color-border-muted: #848c9629;
3737
/* For the default shade of screen */
3838
--color-overlay-default: #00000099;
3939
/* For a stronger shade of screen */
4040
--color-overlay-alternative: #000000cc;
4141
/* For interactive, active, and selected semantics. Used for text, background, icon or border */
42-
--color-primary-default: var(--brand-colors-blue-300);
42+
--color-primary-default: var(--brand-colors-blue-blue300);
4343
/* For the stronger contrast primary semantic elements. */
44-
--color-primary-alternative: var(--brand-colors-blue-200);
44+
--color-primary-alternative: var(--brand-colors-blue-blue200);
4545
/* For the weakest contrast primary semantic backgrounds. */
4646
--color-primary-muted: #43aefc26;
4747
/* For elements used on top of primary/default. Used for text, icon or border */
48-
--color-primary-inverse: var(--brand-colors-grey-900);
48+
--color-primary-inverse: var(--brand-colors-grey-grey900);
4949
/* For the "hover" state of primary-default elements */
5050
--color-primary-default-hover: #26a2fc;
5151
/* For the "pressed" state of primary-default elements */
5252
--color-primary-default-pressed: #3baafd;
5353
/* For the critical alert semantic elements. Used for text, background, icon or border */
54-
--color-error-default: var(--brand-colors-red-300);
54+
--color-error-default: var(--brand-colors-red-red300);
5555
/* For the stronger contrast error semantic elements. */
56-
--color-error-alternative: var(--brand-colors-red-200);
56+
--color-error-alternative: var(--brand-colors-red-red200);
5757
/* For the weakest contrast critical alert semantic backgrounds. */
5858
--color-error-muted: #e88f9726;
5959
/* For elements used on top of error/default. Used for text, icon or border */
60-
--color-error-inverse: var(--brand-colors-grey-900);
60+
--color-error-inverse: var(--brand-colors-grey-grey900);
6161
/* For the "hover" state of error-default elements. */
6262
--color-error-default-hover: #e47782;
6363
/* For the "pressed" state of error-default elements. */
6464
--color-error-default-pressed: #e78891;
6565
/* For the caution alert semantic elements. Used for text, background, icon or border */
66-
--color-warning-default: var(--brand-colors-yellow-100);
66+
--color-warning-default: var(--brand-colors-yellow-yellow100);
6767
/* For the weakest contrast caution alert semantic backgrounds. */
6868
--color-warning-muted: #ffdf7026;
6969
/* For elements used on top of warning/default. Used for text, icon or border */
70-
--color-warning-inverse: var(--brand-colors-grey-900);
70+
--color-warning-inverse: var(--brand-colors-grey-grey900);
7171
/* For the "hover" state of warning-default elements */
7272
--color-warning-default-hover: #ffe485;
7373
/* For the "pressed" state of warning-default elements */
7474
--color-warning-default-pressed: #ffe899;
7575
/* For the positive semantic elements. Used for text, background, icon or border */
76-
--color-success-default: var(--brand-colors-green-300);
76+
--color-success-default: var(--brand-colors-green-green300);
7777
/* For the weakest contrast positive semantic backgrounds. */
7878
--color-success-muted: #28a74526;
7979
/* For elements used on top of success/default. Used for text, icon or border */
80-
--color-success-inverse: var(--brand-colors-grey-900);
80+
--color-success-inverse: var(--brand-colors-grey-grey900);
8181
/* For the "hover" state of success-default elements */
8282
--color-success-default-hover: #2cb94c;
8383
/* For the "pressed" state of success-default elements */
8484
--color-success-default-pressed: #30ca53;
8585
/* For informational read-only elements. Used for text, background, icon or border */
86-
--color-info-default: var(--brand-colors-blue-300);
86+
--color-info-default: var(--brand-colors-blue-blue300);
8787
/* For the weakest contrast informational semantic backgrounds. */
8888
--color-info-muted: #43aefc26;
8989
/* For elements used on top of info/default. Used for text, icon or border */
90-
--color-info-inverse: var(--brand-colors-grey-900);
90+
--color-info-inverse: var(--brand-colors-grey-grey900);
9191
/* For Flask primary accent color. */
92-
--color-flask-default: var(--brand-colors-purple-300);
92+
--color-flask-default: var(--brand-colors-purple-purple300);
9393
/* For elements used on top of flask/default. Used for text, icon or border */
94-
--color-flask-inverse: var(--brand-colors-grey-900);
94+
--color-flask-inverse: var(--brand-colors-grey-grey900);
9595
/* For neutral drop shadow color. */
9696
--color-shadow-default: #00000066;
9797
/* For primary drop shadow color. */

0 commit comments

Comments
 (0)