Skip to content

chore: brand evolution updates part 1 #428

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

Merged
georgewrmarshall merged 7 commits into from
Mar 12, 2025
Merged

chore: brand evolution updates part 1 #428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bc4b874
chore: brand evolution updates part 1
georgewrmarshall Feb 13, 2025
6386433
Updated lightTheme.json
Akatori-Design Mar 12, 2025
b9e6c27
Updated darkTheme.json
Akatori-Design Mar 12, 2025
ebc0d16
chore: updating light and dark theme css colors to match figma
georgewrmarshall Mar 12, 2025
cc1750e
chore: updating light and dark theme js colors to match figma
georgewrmarshall Mar 12, 2025
bfac7de
Merge branch 'main' into fix/brand-evolution-p1
georgewrmarshall Mar 12, 2025
f466af8
Aligning comments for tokens
brianacnguyen Mar 12, 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
125 changes: 63 additions & 62 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,25 +1,25 @@
/**
* @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;
Expand All @@ -33,62 +33,62 @@
--brand-colors-blue-blue050: #eaf6ff;
--brand-colors-blue-blue025: #eaf6ff;
/* 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;
}
170 changes: 85 additions & 85 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 (#222325) */
--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/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;
/* Hover state surface for background/default (#1a1b1c) */
--color-background-default-hover: #1a1b1c;
/* Pressed state surface for background/default (#222424) */
--color-background-default-pressed: #222424;
/* Hover state surface for background/alternative (#0d0d0e) */
--color-background-alternative-hover: #0d0d0e;
/* Pressed state surface for background/alternative (#161617) */
--color-background-alternative-pressed: #161617;
/* Hover state surface for background/muted (#2a2b2d) */
--color-background-muted-hover: #2a2b2d;
/* Pressed state surface for background/muted (#303234) */
--color-background-muted-pressed: #303234;
/* General purpose hover state tint (#dadce50a) */
--color-background-hover: #dadce50a;
/* General purpose pressed state tint (#dadce514) */
--color-background-pressed: #dadce514;
/* 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) */
--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) */
/* 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/default (#59b8fc) */
--color-primary-default-hover: #59b8fc;
/* Pressed state surface for primary/default (#82c9fd) */
--color-primary-default-pressed: #82c9fd;
/* 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) */
/* 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 (#ff8a96) */
--color-error-default-hover: #ff8a96;
/* 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 (#ffde6b) */
--color-warning-default-hover: #ffde6b;
/* Pressed state surface for warning/default (#ffe794) */
--color-warning-default-pressed: #ffe794;
/* 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 (#59ba6f) */
--color-success-default-hover: #59ba6f;
/* 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 read-only elements: info, reminder, hint (#43aefc) */
--color-info-default: var(--brand-colors-blue-blue300);
/* Muted color for soft alert semantic (#43aefc26) */
/* Muted color for informational semantic (#43aefc26) */
--color-info-muted: #43aefc26;
/* For elements placed on top of info/default (#141618) */
/* 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 critical/danger drop shadow color (#ff758433) */
--color-shadow-error: #ff758433;
}
Loading
Loading