Skip to content

Commit

Permalink
refactor: updated css variables naming
Browse files Browse the repository at this point in the history
  • Loading branch information
@brianacnguyen
brianacnguyen committed May 31, 2024
1 parent 418a5af commit 686a77f
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 138 deletions.
180 changes: 90 additions & 90 deletions src/css/brand-colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,103 +7,103 @@

:root {
/* Grey */
--brand-colors-grey-100: #dadce5;
--brand-colors-grey-200: #b7bbc8;
--brand-colors-grey-300: #9ca1af;
--brand-colors-grey-400: #858b9a;
--brand-colors-grey-500: #686e7d;
--brand-colors-grey-600: #4b505c;
--brand-colors-grey-700: #31333a;
--brand-colors-grey-800: #222325;
--brand-colors-grey-900: #121314;
--brand-colors-grey-1000: #000000;
--brand-colors-grey-050: #f3f5f9;
--brand-colors-grey-000: #ffffff;
--brand-colors-grey-025: #f7f9fc;
--brand-colors-grey-grey100: #dadce5;
--brand-colors-grey-grey200: #b7bbc8;
--brand-colors-grey-grey300: #9ca1af;
--brand-colors-grey-grey400: #858b9a;
--brand-colors-grey-grey500: #686e7d;
--brand-colors-grey-grey600: #4b505c;
--brand-colors-grey-grey700: #31333a;
--brand-colors-grey-grey800: #222325;
--brand-colors-grey-grey900: #121314;
--brand-colors-grey-grey1000: #000000;
--brand-colors-grey-grey050: #f3f5f9;
--brand-colors-grey-grey000: #ffffff;
--brand-colors-grey-grey025: #f7f9fc;
/* Blue */
--brand-colors-blue-100: #d6dbff;
--brand-colors-blue-200: #adb6fe;
--brand-colors-blue-300: #8b99ff;
--brand-colors-blue-400: #6f7eff;
--brand-colors-blue-500: #4459ff;
--brand-colors-blue-600: #2c3dc5;
--brand-colors-blue-700: #1c277f;
--brand-colors-blue-800: #131b59;
--brand-colors-blue-900: #0b0f32;
--brand-colors-blue-050: #f4f5ff;
--brand-colors-blue-025: #f8f9ff;
--brand-colors-blue-blue100: #d6dbff;
--brand-colors-blue-blue200: #adb6fe;
--brand-colors-blue-blue300: #8b99ff;
--brand-colors-blue-blue400: #6f7eff;
--brand-colors-blue-blue500: #4459ff;
--brand-colors-blue-blue600: #2c3dc5;
--brand-colors-blue-blue700: #1c277f;
--brand-colors-blue-blue800: #131b59;
--brand-colors-blue-blue900: #0b0f32;
--brand-colors-blue-blue050: #f4f5ff;
--brand-colors-blue-blue025: #f8f9ff;
/* Green */
--brand-colors-green-100: #c1e6c9;
--brand-colors-green-200: #80cb91;
--brand-colors-green-300: #4cb564;
--brand-colors-green-400: #279f41;
--brand-colors-green-500: #1c7e33;
--brand-colors-green-600: #145d25;
--brand-colors-green-700: #0d3b18;
--brand-colors-green-800: #092912;
--brand-colors-green-900: #051709;
--brand-colors-green-050: #ebf7ee;
--brand-colors-green-025: #f1faf4;
--brand-colors-green-green100: #c1e6c9;
--brand-colors-green-green200: #80cb91;
--brand-colors-green-green300: #4cb564;
--brand-colors-green-green400: #279f41;
--brand-colors-green-green500: #1c7e33;
--brand-colors-green-green600: #145d25;
--brand-colors-green-green700: #0d3b18;
--brand-colors-green-green800: #092912;
--brand-colors-green-green900: #051709;
--brand-colors-green-green050: #ebf7ee;
--brand-colors-green-green025: #f1faf4;
/* Red */
--brand-colors-red-100: #ffd2d5;
--brand-colors-red-200: #ffa1aa;
--brand-colors-red-300: #ff7584;
--brand-colors-red-400: #f74d5e;
--brand-colors-red-500: #ca3542;
--brand-colors-red-600: #952731;
--brand-colors-red-700: #611a20;
--brand-colors-red-800: #431216;
--brand-colors-red-900: #3b0f13;
--brand-colors-red-050: #fff2f3;
--brand-colors-red-025: #fff6f7;
--brand-colors-red-red100: #ffd2d5;
--brand-colors-red-red200: #ffa1aa;
--brand-colors-red-red300: #ff7584;
--brand-colors-red-red400: #f74d5e;
--brand-colors-red-red500: #ca3542;
--brand-colors-red-red600: #952731;
--brand-colors-red-red700: #611a20;
--brand-colors-red-red800: #431216;
--brand-colors-red-red900: #3b0f13;
--brand-colors-red-red050: #fff2f3;
--brand-colors-red-red025: #fff6f7;
/* Yellow */
--brand-colors-yellow-100: #ffd957;
--brand-colors-yellow-200: #f0b034;
--brand-colors-yellow-300: #e18f01;
--brand-colors-yellow-400: #c37b02;
--brand-colors-yellow-500: #9a6300;
--brand-colors-yellow-600: #714802;
--brand-colors-yellow-700: #482d01;
--brand-colors-yellow-800: #321f00;
--brand-colors-yellow-900: #1c1100;
--brand-colors-yellow-050: #fff5d5;
--brand-colors-yellow-025: #fff9e6;
--brand-colors-yellow-yellow100: #ffd957;
--brand-colors-yellow-yellow200: #f0b034;
--brand-colors-yellow-yellow300: #e18f01;
--brand-colors-yellow-yellow400: #c37b02;
--brand-colors-yellow-yellow500: #9a6300;
--brand-colors-yellow-yellow600: #714802;
--brand-colors-yellow-yellow700: #482d01;
--brand-colors-yellow-yellow800: #321f00;
--brand-colors-yellow-yellow900: #1c1100;
--brand-colors-yellow-yellow050: #fff5d5;
--brand-colors-yellow-yellow025: #fff9e6;
/* Orange */
--brand-colors-orange-100: #ffd4c1;
--brand-colors-orange-200: #ffa47c;
--brand-colors-orange-300: #ff7940;
--brand-colors-orange-400: #f35714;
--brand-colors-orange-500: #c3420d;
--brand-colors-orange-600: #932d06;
--brand-colors-orange-700: #631800;
--brand-colors-orange-800: #451100;
--brand-colors-orange-900: #280a00;
--brand-colors-orange-050: #fff0ea;
--brand-colors-orange-025: #fff8f5;
--brand-colors-orange-orange100: #ffd4c1;
--brand-colors-orange-orange200: #ffa47c;
--brand-colors-orange-orange300: #ff7940;
--brand-colors-orange-orange400: #f35714;
--brand-colors-orange-orange500: #c3420d;
--brand-colors-orange-orange600: #932d06;
--brand-colors-orange-orange700: #631800;
--brand-colors-orange-orange800: #451100;
--brand-colors-orange-orange900: #280a00;
--brand-colors-orange-orange050: #fff0ea;
--brand-colors-orange-orange025: #fff8f5;
/* Purple */
--brand-colors-purple-100: #efd2ff;
--brand-colors-purple-200: #dfa4ff;
--brand-colors-purple-300: #d27dff;
--brand-colors-purple-400: #b864f5;
--brand-colors-purple-500: #8f44e4;
--brand-colors-purple-600: #6c2ab2;
--brand-colors-purple-700: #6c2ab2;
--brand-colors-purple-800: #380658;
--brand-colors-purple-900: #280a00;
--brand-colors-purple-050: #fbf2ff;
--brand-colors-purple-025: #fcf6ff;
--brand-colors-purple-purple100: #efd2ff;
--brand-colors-purple-purple200: #dfa4ff;
--brand-colors-purple-purple300: #d27dff;
--brand-colors-purple-purple400: #b864f5;
--brand-colors-purple-purple500: #8f44e4;
--brand-colors-purple-purple600: #6c2ab2;
--brand-colors-purple-purple700: #6c2ab2;
--brand-colors-purple-purple800: #380658;
--brand-colors-purple-purple900: #280a00;
--brand-colors-purple-purple050: #fbf2ff;
--brand-colors-purple-purple025: #fcf6ff;
/* Lime */
--brand-colors-lime-100: #b8ef4a;
--brand-colors-lime-200: #95ca45;
--brand-colors-lime-300: #7ab040;
--brand-colors-lime-400: #64993d;
--brand-colors-lime-500: #457a39;
--brand-colors-lime-600: #275b35;
--brand-colors-lime-700: #093a31;
--brand-colors-lime-800: #012826;
--brand-colors-lime-900: #011515;
--brand-colors-lime-025: #effed9;
--brand-colors-lime-050: #e3febd;
--brand-colors-lime-lime100: #b8ef4a;
--brand-colors-lime-lime200: #95ca45;
--brand-colors-lime-lime300: #7ab040;
--brand-colors-lime-lime400: #64993d;
--brand-colors-lime-lime500: #457a39;
--brand-colors-lime-lime600: #275b35;
--brand-colors-lime-lime700: #093a31;
--brand-colors-lime-lime800: #012826;
--brand-colors-lime-lime900: #011515;
--brand-colors-lime-lime025: #effed9;
--brand-colors-lime-lime050: #e3febd;
/* White */
--brand-colors-white: #ffffff;
/* Black */
Expand Down
48 changes: 24 additions & 24 deletions src/css/dark-theme-colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

[data-theme='dark'] {
/* For default neutral backgrounds */
--color-background-default: var(--brand-colors-grey-800);
--color-background-default: var(--brand-colors-grey-grey800);
/* For secondary neutral backgrounds. */
--color-background-alternative: var(--brand-colors-grey-900);
--color-background-alternative: var(--brand-colors-grey-grey900);
/* For "hover" states that use background-default. */
--color-background-default-hover: #313235;
/* For "pressed" states that use background-alternative. */
Expand All @@ -22,81 +22,81 @@
/* For "pressed" state that use no background fill. (black-12% | white-12%) */
--color-background-pressed: #ffffff1f;
/* For default neutral text. */
--color-text-default: var(--brand-colors-grey-000);
--color-text-default: var(--brand-colors-grey-grey000);
/* For softer contrast neutral text */
--color-text-alternative: var(--brand-colors-grey-200);
--color-text-alternative: var(--brand-colors-grey-grey200);
/* For the softest contrast neutral text (not accessible) */
--color-text-muted: var(--brand-colors-grey-400);
--color-text-muted: var(--brand-colors-grey-grey400);
/* For default neutral icons */
--color-icon-default: var(--brand-colors-grey-000);
--color-icon-default: var(--brand-colors-grey-grey000);
/* For softer neutral icons */
--color-icon-alternative: var(--brand-colors-grey-200);
--color-icon-alternative: var(--brand-colors-grey-grey200);
/* For the weakest contrast neutral icons (not accessible) */
--color-icon-muted: var(--brand-colors-grey-400);
--color-icon-muted: var(--brand-colors-grey-grey400);
/* For soft contrast neutral border */
--color-border-default: var(--brand-colors-grey-400);
--color-border-default: var(--brand-colors-grey-grey400);
/* For the weakest contrast neutral border (grey200-40% | grey400-20%) */
--color-border-muted: #858b9a33;
/* For the default shade of screen (black-40%) */
--color-overlay-default: #00000066;
/* For a stronger shade of screen (black-80%) */
--color-overlay-alternative: #000000cc;
/* For elements used on top of overlay/alternative. Used for text, icon or border */
--color-overlay-inverse: var(--brand-colors-grey-000);
--color-overlay-inverse: var(--brand-colors-grey-grey000);
/* For interactive, active, and selected semantics. Used for text, background, icon or border */
--color-primary-default: var(--brand-colors-blue-300);
--color-primary-default: var(--brand-colors-blue-blue300);
/* For the stronger contrast primary semantic elements. */
--color-primary-alternative: var(--brand-colors-blue-200);
--color-primary-alternative: var(--brand-colors-blue-blue200);
/* For the weakest contrast primary semantic backgrounds. (blue500-10% | blue300-15%) */
--color-primary-muted: #8b99ff26;
/* For elements used on top of primary/default. Used for text, icon or border */
--color-primary-inverse: var(--brand-colors-grey-900);
--color-primary-inverse: var(--brand-colors-grey-grey900);
/* For the "hover" state of primary-default elements */
--color-primary-default-hover: #a8b2ff;
/* For the "pressed" state of primary-default elements */
--color-primary-default-pressed: #c7ceff;
/* For the critical alert semantic elements. Used for text, background, icon or border */
--color-error-default: var(--brand-colors-red-300);
--color-error-default: var(--brand-colors-red-red300);
/* For the stronger contrast error semantic elements. */
--color-error-alternative: var(--brand-colors-red-200);
--color-error-alternative: var(--brand-colors-red-red200);
/* For the weakest contrast critical alert semantic backgrounds. (red500-10% | red300-15%) */
--color-error-muted: #ff758426;
/* For elements used on top of error/default. Used for text, icon or border */
--color-error-inverse: var(--brand-colors-grey-900);
--color-error-inverse: var(--brand-colors-grey-grey900);
/* For the "hover" state of error-default elements. */
--color-error-default-hover: #ff94a0;
/* For the "pressed" state of error-default elements. */
--color-error-default-pressed: #ffb2bb;
/* For the caution alert semantic elements. Used for text, background, icon or border */
--color-warning-default: var(--brand-colors-yellow-100);
--color-warning-default: var(--brand-colors-yellow-yellow100);
/* For the weakest contrast caution alert semantic backgrounds. (yellow500-10% | yellow100-15%) */
--color-warning-muted: #ffd95726;
/* For elements used on top of warning/default. Used for text, icon or border */
--color-warning-inverse: var(--brand-colors-grey-900);
--color-warning-inverse: var(--brand-colors-grey-grey900);
/* For the "hover" state of warning-default elements */
--color-warning-default-hover: #ffe794;
/* For the "pressed" state of warning-default elements */
--color-warning-default-pressed: #ffeeb2;
/* For the positive semantic elements. Used for text, background, icon or border */
--color-success-default: var(--brand-colors-green-300);
--color-success-default: var(--brand-colors-green-green300);
/* For the weakest contrast positive semantic backgrounds. (green500-10% | green300-10%) */
--color-success-muted: #4cb56426;
/* For elements used on top of success/default. Used for text, icon or border */
--color-success-inverse: var(--brand-colors-grey-900);
--color-success-inverse: var(--brand-colors-grey-grey900);
/* For the "hover" state of success-default elements */
--color-success-default-hover: #60bd76;
/* For the "pressed" state of success-default elements */
--color-success-default-pressed: #76c688;
/* For informational read-only elements. Used for text, background, icon or border */
--color-info-default: var(--brand-colors-blue-300);
--color-info-default: var(--brand-colors-blue-blue300);
/* For the weakest contrast informational semantic backgrounds.(blue500-10% | blue300-15%) */
--color-info-muted: #8b99ff26;
/* For elements used on top of info/default. Used for text, icon or border */
--color-info-inverse: var(--brand-colors-grey-900);
--color-info-inverse: var(--brand-colors-grey-grey900);
/* For Flask primary accent color. */
--color-flask-default: var(--brand-colors-purple-300);
--color-flask-default: var(--brand-colors-purple-purple300);
/* For elements used on top of flask/default. Used for text, icon or border */
--color-flask-inverse: var(--brand-colors-grey-900);
--color-flask-inverse: var(--brand-colors-grey-grey900);
/* For neutral drop shadow color. (black-10% | black-40%) */
--color-shadow-default: #00000066;
/* For primary drop shadow color. (blue500-20% | blue300-20%) */
Expand Down
Loading

0 comments on commit 686a77f

Please sign in to comment.