Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DO NOT MERGE: Brand Evolution Colors #327

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

DO NOT MERGE: Brand Evolution Colors #327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51b6c5d
Updated tokens to brand evolution colors
brianacnguyen Jan 15, 2025
7c1783c
Added missing semicolon
brianacnguyen Jan 15, 2025
5b2c545
chore: updating dark theme colors
georgewrmarshall Jan 28, 2025
3ab3ce4
chore: fixing tests
georgewrmarshall Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 74 additions & 73 deletions packages/design-tokens/src/css/brand-colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,94 @@
/**
* @deprecated these brand colors have been deprecated in favor of the new brand colors
* Brand Colors
* Do not use "--brand-colors" in your code
* Instead use the "--color-" variables to ensure
* theme compatible styles
*/

:root {
/* Grey */
--brand-colors-grey-grey100: #d6d9dc;
--brand-colors-grey-grey200: #bbc0c5;
--brand-colors-grey-grey300: #9fa6ae;
--brand-colors-grey-grey400: #848c96;
--brand-colors-grey-grey500: #6a737d;
--brand-colors-grey-grey600: #535a61;
--brand-colors-grey-grey700: #3b4046;
--brand-colors-grey-grey800: #24272a;
--brand-colors-grey-grey900: #141618;
--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: #f2f4f6;
--brand-colors-grey-grey050: #f3f5f9;
--brand-colors-grey-grey000: #ffffff;
--brand-colors-grey-grey025: #fafbfc;
--brand-colors-grey-grey025: #f7f9fc;
/* Blue */
--brand-colors-blue-blue100: #a7d9fe;
--brand-colors-blue-blue200: #75c4fd;
--brand-colors-blue-blue300: #43aefc;
--brand-colors-blue-blue400: #1098fc;
--brand-colors-blue-blue500: #0376c9;
--brand-colors-blue-blue600: #0260a4;
--brand-colors-blue-blue700: #024272;
--brand-colors-blue-blue800: #01253f;
--brand-colors-blue-blue900: #00080d;
--brand-colors-blue-blue050: #eaf6ff;
--brand-colors-blue-blue025: #eaf6ff;
--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-green100: #afecbd;
--brand-colors-green-green200: #5dd879;
--brand-colors-green-green300: #28a745;
--brand-colors-green-green400: #28a745;
--brand-colors-green-green500: #1c8234;
--brand-colors-green-green600: #145523;
--brand-colors-green-green700: #145523;
--brand-colors-green-green800: #0a2c12;
--brand-colors-green-green900: #041007;
--brand-colors-green-green050: #d6ffdf;
--brand-colors-green-green025: #f3fcf5;
--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-red100: #f7d5d8;
--brand-colors-red-red200: #f1b9be;
--brand-colors-red-red300: #e88f97;
--brand-colors-red-red400: #e06470;
--brand-colors-red-red500: #d73847;
--brand-colors-red-red600: #8e1d28;
--brand-colors-red-red700: #64141c;
--brand-colors-red-red800: #3a0c10;
--brand-colors-red-red900: #3a0c10;
--brand-colors-red-red050: #fcf2f3;
--brand-colors-red-red025: #fcf2f3;
--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-yellow100: #ffdf70;
--brand-colors-yellow-yellow200: #ffc70a;
--brand-colors-yellow-yellow300: #f8883b;
--brand-colors-yellow-yellow400: #f66a0a;
--brand-colors-yellow-yellow500: #bf5208;
--brand-colors-yellow-yellow600: #954005;
--brand-colors-yellow-yellow700: #632b04;
--brand-colors-yellow-yellow800: #321602;
--brand-colors-yellow-yellow900: #321602;
--brand-colors-yellow-yellow050: #fff2c5;
--brand-colors-yellow-yellow025: #fefcde;
--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-orange100: #fbc49d;
--brand-colors-orange-orange200: #faa66c;
--brand-colors-orange-orange300: #f8883b;
--brand-colors-orange-orange400: #f66a0a;
--brand-colors-orange-orange500: #bf5208;
--brand-colors-orange-orange600: #954005;
--brand-colors-orange-orange700: #632b04;
--brand-colors-orange-orange800: #321602;
--brand-colors-orange-orange900: #321602;
--brand-colors-orange-orange050: #fde2cf;
--brand-colors-orange-orange025: #fef5ef;
--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-purple100: #efd2ff;
--brand-colors-purple-purple200: #cfb5f0;
--brand-colors-purple-purple200: #dfa4ff;
--brand-colors-purple-purple300: #d27dff;
--brand-colors-purple-purple400: #b864f5;
--brand-colors-purple-purple500: #8b45b6;
--brand-colors-purple-purple500: #8f44e4;
--brand-colors-purple-purple600: #6c2ab2;
--brand-colors-purple-purple700: #4c1178;
--brand-colors-purple-purple800: #32054d;
--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;
Expand All @@ -100,11 +100,12 @@
--brand-colors-lime-lime500: #457a39;
--brand-colors-lime-lime600: #275b35;
--brand-colors-lime-lime700: #093a31;
--brand-colors-lime-lime800: #022321;
--brand-colors-lime-lime800: #012826;
--brand-colors-lime-lime900: #011515;
--brand-colors-lime-lime025: #effed9;
--brand-colors-lime-lime050: #e3febd;
/* White and Black */
/* White */
--brand-colors-white: #ffffff;
/* Black */
--brand-colors-black: #000000;
}
182 changes: 91 additions & 91 deletions packages/design-tokens/src/css/dark-theme-colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,126 +1,126 @@
/**
* Dark Theme Colors
*/
*/
[data-theme='dark'],
.dark {
/* For default neutral surface (#141618) */
/* For default neutral surface (#121314) */
--color-background-default: var(--brand-colors-grey-grey900);
/* For sunken neutral surface below background/default (#000000) */
--color-background-alternative: var(--brand-colors-grey-grey1000);
/* For raised neutral surface above background/default (#24272a) */
/* For raised neutral surface above background/default (#222325s) */
--color-background-muted: var(--brand-colors-grey-grey800);
/* Hover state surface for background/default (#1e2124) */
--color-background-default-hover: #1e2124;
/* Pressed state surface for background/default (#272b2f) */
--color-background-default-pressed: #272b2f;
/* Hover state surface for background/alternative (#0a0a0a) */
--color-background-alternative-hover: #0a0a0a;
/* Pressed state surface for background/alternative (#141414) */
--color-background-alternative-pressed: #141414;
/* Hover state surface for background/default (#313235) */
--color-background-default-hover: #313235;
/* Pressed state surface for background/default (#3f4145) */
--color-background-default-pressed: #3f4145;
/* Hover state surface for background/alternative (#1f2123) */
--color-background-alternative-hover: #1f2123;
/* Pressed state surface for background/alternative (#2e3033) */
--color-background-alternative-pressed: #2e3033;
/* Hover state surface for background/muted (#2d3034) */
--color-background-muted-hover: #2d3034;
/* Pressed state surface for background/muted (#363b3f) */
--color-background-muted-pressed: #363b3f;
/* General purpose hover state tint (#ffffff0a) */
--color-background-hover: #ffffff0a;
/* General purpose pressed state tint (#ffffff14) */
--color-background-pressed: #ffffff14;
/* General purpose hover state tint (#ffffff0f) */
--color-background-hover: #ffffff0f;
/* General purpose pressed state tint (#ffffff1f) */
--color-background-pressed: #ffffff1f;
/* Default color for text (#ffffff) */
--color-text-default: var(--brand-colors-grey-grey000);
/* Softer color for text (#9fa6ae) */
--color-text-alternative: var(--brand-colors-grey-grey300);
/* Muted color for text (Not accessible) (#6a737d) */
--color-text-muted: var(--brand-colors-grey-grey500);
/* Default color for icons, following text/default (#ffffff) */
/* Softer color for text (#adb6fe) */
--color-text-alternative: var(--brand-colors-grey-grey200);
/* Muted color for text (Not accessible) (#9ca1af) */
--color-text-muted: var(--brand-colors-grey-grey400);
/* Default color for icons (#ffffff) */
--color-icon-default: var(--brand-colors-grey-grey000);
/* Softer color for icons, following text/alternative (#9fa6ae) */
--color-icon-alternative: var(--brand-colors-grey-grey300);
/* Muted color for icons (Not accessible), following text/muted (#6a737d) */
--color-icon-muted: var(--brand-colors-grey-grey500);
/* Default color for borders (#6a737d) */
--color-border-default: var(--brand-colors-grey-grey500);
/* Muted color for borders (#848c9629) */
--color-border-muted: #848c9629;
/* Default color for overlays(scrim) (#00000099) */
--color-overlay-default: #00000099;
/* Dimmer color for overlays(scrim) (#000000cc) */
/* Softer color for icons (#adb6fe) */
--color-icon-alternative: var(--brand-colors-grey-grey200);
/* Muted color for icons (Not accessible) (#9ca1af) */
--color-icon-muted: var(--brand-colors-grey-grey400);
/* Default color for borders (#9ca1af) */
--color-border-default: var(--brand-colors-grey-grey400);
/* Muted color for borders (#858b9a33) */
--color-border-muted: #858b9a33;
/* Default color for overlays (scrim) (black-40%) */
--color-overlay-default: #00000066;
/* Dimmer color for overlays (scrim) (black-80%) */
--color-overlay-alternative: #000000cc;
/* For elements placed on top of overlay/alternative (#ffffff) */
--color-overlay-inverse: var(--brand-colors-grey-grey000);
/* For primary semantic elements: interactive, active, selected (#43aefc) */
/* For primary semantic elements: interactive, active, selected (#8b99ff) */
--color-primary-default: var(--brand-colors-blue-blue300);
/* Stronger color for primary semantic elements (#75c4fd) */
/* Stronger color for primary semantic elements (#adb6fe) */
--color-primary-alternative: var(--brand-colors-blue-blue200);
/* Muted color for primary semantic elements (#43aefc26) */
--color-primary-muted: #43aefc26;
/* For elements placed on top of primary/default (#141618) */
/* Muted color for primary semantic elements (#8b99ff26) */
--color-primary-muted: #8b99ff26;
/* For elements placed on top of primary/default (#121314) */
--color-primary-inverse: var(--brand-colors-grey-grey900);
/* Hover state surface for primary/default (#26a2fc) */
--color-primary-default-hover: #26a2fc;
/* Pressed state surface for primary/default (#3baafd) */
--color-primary-default-pressed: #3baafd;
/* Hover state surface for primary/muted (#43aefc33) */
--color-primary-muted-hover: #43aefc33;
/* Pressed state surface for primary/muted (#43aefc40) */
--color-primary-muted-pressed: #43aefc40;
/* For danger semantic elements: error, critical, destructive (#e88f97) */
/* Hover state surface for primary/default (#a8b2ff) */
--color-primary-default-hover: #a8b2ff;
/* Pressed state surface for primary/default (#c7ceff) */
--color-primary-default-pressed: #c7ceff;
/* Hover state surface for primary/muted (#8b99ff33) */
--color-primary-muted-hover: #8b99ff33;
/* Pressed state surface for primary/muted (#8b99ff40) */
--color-primary-muted-pressed: #8b99ff40;
/* For danger semantic elements: error, critical, destructive (#ff7584) */
--color-error-default: var(--brand-colors-red-red300);
/* Stronger color for danger semantic (#f1b9be) */
/* Stronger color for error semantic (#ffa1aa) */
--color-error-alternative: var(--brand-colors-red-red200);
/* Muted color for danger semantic (#e88f9726) */
--color-error-muted: #e88f9726;
/* For elements placed on top of error/default (#141618) */
/* Muted color for error semantic (#ff758426) */
--color-error-muted: #ff758426;
/* For elements placed on top of error/default (#121314) */
--color-error-inverse: var(--brand-colors-grey-grey900);
/* Hover state surface for error/default (#e47782) */
--color-error-default-hover: #e47782;
/* Pressed state surface for error/default (#e78891) */
--color-error-default-pressed: #e78891;
/* Hover state surface for error/muted (#e88f9733) */
--color-error-muted-hover: #e88f9733;
/* Pressed state surface for error/muted (#e88f9740) */
--color-error-muted-pressed: #e88f9740;
/* For warning semantic elements: caution, attention, precaution (#ffdf70) */
/* Hover state surface for error/default (#ff94a0) */
--color-error-default-hover: #ff94a0;
/* Pressed state surface for error/default (#ffb2bb) */
--color-error-default-pressed: #ffb2bb;
/* Hover state surface for error/muted (#ff758433) */
--color-error-muted-hover: #ff758433;
/* Pressed state surface for error/muted (#ff758440) */
--color-error-muted-pressed: #ff758440;
/* For warning semantic elements: caution, attention, precaution (#ffd957) */
--color-warning-default: var(--brand-colors-yellow-yellow100);
/* Muted color option for warning semantic (#ffdf7026) */
--color-warning-muted: #ffdf7026;
/* For elements placed on top of warning/default (#141618) */
/* Muted color option for warning semantic (#ffd95726) */
--color-warning-muted: #ffd95726;
/* For elements placed on top of warning/default (#121314) */
--color-warning-inverse: var(--brand-colors-grey-grey900);
/* Hover state surface for warning/default (#ffe485) */
--color-warning-default-hover: #ffe485;
/* Pressed state surface for warning/default (#ffe899) */
--color-warning-default-pressed: #ffe899;
/* Hover state surface for warning/muted (#ffdf7033) */
--color-warning-muted-hover: #ffdf7033;
/* Pressed state surface for warning/muted (#ffdf7040) */
--color-warning-muted-pressed: #ffdf7040;
/* For positive semantic elements: success, confirm, complete, safe (#28a745) */
/* Hover state surface for warning/default (#ffe794) */
--color-warning-default-hover: #ffe794;
/* Pressed state surface for warning/default (#ffeeb2) */
--color-warning-default-pressed: #ffeeb2;
/* Hover state surface for warning/muted (#ffd95733) */
--color-warning-muted-hover: #ffd95733;
/* Pressed state surface for warning/muted (#ffd95740) */
--color-warning-muted-pressed: #ffd95740;
/* For positive semantic elements: success, confirm, complete, safe (#4cb564) */
--color-success-default: var(--brand-colors-green-green300);
/* Muted color for positive semantic (#28a74526) */
--color-success-muted: #28a74526;
/* For elements placed on top of success/default (#141618) */
/* Muted color for positive semantic (#4cb56426) */
--color-success-muted: #4cb56426;
/* For elements placed on top of success/default (#121314) */
--color-success-inverse: var(--brand-colors-grey-grey900);
/* Hover state surface for success/default (#2cb94c) */
--color-success-default-hover: #2cb94c;
/* Pressed state surface for success/default (#30ca53) */
--color-success-default-pressed: #30ca53;
/* Hover state surface for success/muted (#28a74533) */
--color-success-muted-hover: #28a74533;
/* Pressed state surface for success/muted (#28a74540) */
--color-success-muted-pressed: #28a74540;
/* For soft alert semantic elements: info, reminder, hint (#43aefc) */
/* Hover state surface for success/default (#60bd76) */
--color-success-default-hover: #60bd76;
/* Pressed state surface for success/default (#76c688) */
--color-success-default-pressed: #76c688;
/* Hover state surface for success/muted (#4cb56433) */
--color-success-muted-hover: #4cb56433;
/* Pressed state surface for success/muted (#4cb56440) */
--color-success-muted-pressed: #4cb56440;
/* For informational semantic elements: info, reminder, hint (#8b99ff) */
--color-info-default: var(--brand-colors-blue-blue300);
/* Muted color for soft alert semantic (#43aefc26) */
--color-info-muted: #43aefc26;
/* For elements placed on top of info/default (#141618) */
/* Muted color for informational semantic (#8b99ff26) */
--color-info-muted: #8b99ff26;
/* For elements placed on top of info/default (#121314) */
--color-info-inverse: var(--brand-colors-grey-grey900);
/* For Flask primary accent color (#d27dff) */
--color-flask-default: var(--brand-colors-purple-purple300);
/* For elements placed on top of flask/default (#141618) */
/* For elements placed on top of flask/default (#121314) */
--color-flask-inverse: var(--brand-colors-grey-grey900);
/* For neutral drop shadow color (#00000066) */
/* For neutral drop shadow color (black-40%) */
--color-shadow-default: #00000066;
/* For primary drop shadow color (#43aefc33) */
--color-shadow-primary: #43aefc33;
/* For critical/danger drop shadow color (#ff758466) */
--color-shadow-error: #ff758466;
/* For primary drop shadow color (#8b99ff33) */
--color-shadow-primary: #8b99ff33;
/* For critical/danger drop shadow color (#ff758433) */
--color-shadow-error: #ff758433;
}
Loading
Loading