Skip to content

Commit bc4b874

Browse files
georgewrmarshallgeorgewrmarshall
committed
chore: brand evolution updates part 1
1 parent 611b2a9 commit bc4b874

File tree

11 files changed

+677
-671
lines changed

11 files changed

+677
-671
lines changed

‎packages/design-tokens/src/css/brand-colors.css‎

Lines changed: 63 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
/**
2-
* @deprecated these brand colors have been deprecated in favor of the new brand colors
32
* Brand Colors
43
* Do not use "--brand-colors" in your code
54
* Instead use the "--color-" variables to ensure
65
* theme compatible styles
76
*/
7+
88
:root {
99
/* Grey */
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;
10+
--brand-colors-grey-grey100: #dadce5;
11+
--brand-colors-grey-grey200: #b7bbc8;
12+
--brand-colors-grey-grey300: #9ca1af;
13+
--brand-colors-grey-grey400: #858b9a;
14+
--brand-colors-grey-grey500: #686e7d;
15+
--brand-colors-grey-grey600: #4b505c;
16+
--brand-colors-grey-grey700: #31333a;
17+
--brand-colors-grey-grey800: #222325;
18+
--brand-colors-grey-grey900: #121314;
1919
--brand-colors-grey-grey1000: #000000;
20-
--brand-colors-grey-grey050: #f2f4f6;
20+
--brand-colors-grey-grey050: #f3f5f9;
2121
--brand-colors-grey-grey000: #ffffff;
22-
--brand-colors-grey-grey025: #fafbfc;
22+
--brand-colors-grey-grey025: #f7f9fc;
2323
/* Blue */
2424
--brand-colors-blue-blue100: #a7d9fe;
2525
--brand-colors-blue-blue200: #75c4fd;
@@ -33,62 +33,62 @@
3333
--brand-colors-blue-blue050: #eaf6ff;
3434
--brand-colors-blue-blue025: #eaf6ff;
3535
/* Green */
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;
36+
--brand-colors-green-green100: #c1e6c9;
37+
--brand-colors-green-green200: #80cb91;
38+
--brand-colors-green-green300: #4cb564;
39+
--brand-colors-green-green400: #279f41;
40+
--brand-colors-green-green500: #1c7e33;
41+
--brand-colors-green-green600: #145d25;
42+
--brand-colors-green-green700: #0d3b18;
43+
--brand-colors-green-green800: #092912;
44+
--brand-colors-green-green900: #051709;
45+
--brand-colors-green-green050: #ebf7ee;
46+
--brand-colors-green-green025: #f1faf4;
4747
/* Red */
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;
48+
--brand-colors-red-red100: #ffd2d5;
49+
--brand-colors-red-red200: #ffa1aa;
50+
--brand-colors-red-red300: #ff7584;
51+
--brand-colors-red-red400: #f74d5e;
52+
--brand-colors-red-red500: #ca3542;
53+
--brand-colors-red-red600: #952731;
54+
--brand-colors-red-red700: #611a20;
55+
--brand-colors-red-red800: #431216;
56+
--brand-colors-red-red900: #3b0f13;
57+
--brand-colors-red-red050: #fff2f3;
58+
--brand-colors-red-red025: #fff6f7;
5959
/* Yellow */
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;
60+
--brand-colors-yellow-yellow100: #ffd957;
61+
--brand-colors-yellow-yellow200: #f0b034;
62+
--brand-colors-yellow-yellow300: #e18f01;
63+
--brand-colors-yellow-yellow400: #c37b02;
64+
--brand-colors-yellow-yellow500: #9a6300;
65+
--brand-colors-yellow-yellow600: #714802;
66+
--brand-colors-yellow-yellow700: #482d01;
67+
--brand-colors-yellow-yellow800: #321f00;
68+
--brand-colors-yellow-yellow900: #1c1100;
69+
--brand-colors-yellow-yellow050: #fff5d5;
70+
--brand-colors-yellow-yellow025: #fff9e6;
7171
/* Orange */
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;
72+
--brand-colors-orange-orange100: #ffd4c1;
73+
--brand-colors-orange-orange200: #ffa47c;
74+
--brand-colors-orange-orange300: #ff7940;
75+
--brand-colors-orange-orange400: #f35714;
76+
--brand-colors-orange-orange500: #c3420d;
77+
--brand-colors-orange-orange600: #932d06;
78+
--brand-colors-orange-orange700: #631800;
79+
--brand-colors-orange-orange800: #451100;
80+
--brand-colors-orange-orange900: #280a00;
81+
--brand-colors-orange-orange050: #fff0ea;
82+
--brand-colors-orange-orange025: #fff8f5;
8383
/* Purple */
8484
--brand-colors-purple-purple100: #efd2ff;
85-
--brand-colors-purple-purple200: #cfb5f0;
85+
--brand-colors-purple-purple200: #dfa4ff;
8686
--brand-colors-purple-purple300: #d27dff;
8787
--brand-colors-purple-purple400: #b864f5;
88-
--brand-colors-purple-purple500: #8b45b6;
88+
--brand-colors-purple-purple500: #8f44e4;
8989
--brand-colors-purple-purple600: #6c2ab2;
90-
--brand-colors-purple-purple700: #4c1178;
91-
--brand-colors-purple-purple800: #32054d;
90+
--brand-colors-purple-purple700: #6c2ab2;
91+
--brand-colors-purple-purple800: #380658;
9292
--brand-colors-purple-purple900: #280a00;
9393
--brand-colors-purple-purple050: #fbf2ff;
9494
--brand-colors-purple-purple025: #fcf6ff;
@@ -100,11 +100,12 @@
100100
--brand-colors-lime-lime500: #457a39;
101101
--brand-colors-lime-lime600: #275b35;
102102
--brand-colors-lime-lime700: #093a31;
103-
--brand-colors-lime-lime800: #022321;
103+
--brand-colors-lime-lime800: #012826;
104104
--brand-colors-lime-lime900: #011515;
105105
--brand-colors-lime-lime025: #effed9;
106106
--brand-colors-lime-lime050: #e3febd;
107-
/* White and Black */
107+
/* White */
108108
--brand-colors-white: #ffffff;
109+
/* Black */
109110
--brand-colors-black: #000000;
110111
}

‎packages/design-tokens/src/css/dark-theme-colors.css‎

Lines changed: 77 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
/**
22
* Dark Theme Colors
3-
*/
3+
*/
44
[data-theme='dark'],
55
.dark {
6-
/* For default neutral surface (#141618) */
6+
/* For default neutral surface (#121314) */
77
--color-background-default: var(--brand-colors-grey-grey900);
88
/* For sunken neutral surface below background/default (#000000) */
99
--color-background-alternative: var(--brand-colors-grey-grey1000);
10-
/* For raised neutral surface above background/default (#24272a) */
10+
/* For raised neutral surface above background/default (#222325s) */
1111
--color-background-muted: var(--brand-colors-grey-grey800);
12-
/* Hover state surface for background/default (#1e2124) */
13-
--color-background-default-hover: #1e2124;
14-
/* Pressed state surface for background/default (#272b2f) */
15-
--color-background-default-pressed: #272b2f;
16-
/* Hover state surface for background/alternative (#0a0a0a) */
17-
--color-background-alternative-hover: #0a0a0a;
18-
/* Pressed state surface for background/alternative (#141414) */
19-
--color-background-alternative-pressed: #141414;
12+
/* Hover state surface for background/default (#313235) */
13+
--color-background-default-hover: #313235;
14+
/* Pressed state surface for background/default (#3f4145) */
15+
--color-background-default-pressed: #3f4145;
16+
/* Hover state surface for background/alternative (#1f2123) */
17+
--color-background-alternative-hover: #1f2123;
18+
/* Pressed state surface for background/alternative (#2e3033) */
19+
--color-background-alternative-pressed: #2e3033;
2020
/* Hover state surface for background/muted (#2d3034) */
2121
--color-background-muted-hover: #2d3034;
2222
/* Pressed state surface for background/muted (#363b3f) */
2323
--color-background-muted-pressed: #363b3f;
24-
/* General purpose hover state tint (#ffffff0a) */
25-
--color-background-hover: #ffffff0a;
26-
/* General purpose pressed state tint (#ffffff14) */
27-
--color-background-pressed: #ffffff14;
24+
/* General purpose hover state tint (#ffffff0f) */
25+
--color-background-hover: #ffffff0f;
26+
/* General purpose pressed state tint (#ffffff1f) */
27+
--color-background-pressed: #ffffff1f;
2828
/* Default color for text (#ffffff) */
2929
--color-text-default: var(--brand-colors-grey-grey000);
30-
/* Softer color for text (#9fa6ae) */
31-
--color-text-alternative: var(--brand-colors-grey-grey300);
32-
/* Muted color for text (Not accessible) (#6a737d) */
33-
--color-text-muted: var(--brand-colors-grey-grey500);
34-
/* Default color for icons, following text/default (#ffffff) */
30+
/* Softer color for text (#adb6fe) */
31+
--color-text-alternative: var(--brand-colors-grey-grey200);
32+
/* Muted color for text (Not accessible) (#9ca1af) */
33+
--color-text-muted: var(--brand-colors-grey-grey400);
34+
/* Default color for icons (#ffffff) */
3535
--color-icon-default: var(--brand-colors-grey-grey000);
36-
/* Softer color for icons, following text/alternative (#9fa6ae) */
37-
--color-icon-alternative: var(--brand-colors-grey-grey300);
38-
/* Muted color for icons (Not accessible), following text/muted (#6a737d) */
39-
--color-icon-muted: var(--brand-colors-grey-grey500);
40-
/* Default color for borders (#6a737d) */
41-
--color-border-default: var(--brand-colors-grey-grey500);
42-
/* Muted color for borders (#848c9629) */
43-
--color-border-muted: #848c9629;
44-
/* Default color for overlays(scrim) (#00000099) */
45-
--color-overlay-default: #00000099;
46-
/* Dimmer color for overlays(scrim) (#000000cc) */
36+
/* Softer color for icons (#adb6fe) */
37+
--color-icon-alternative: var(--brand-colors-grey-grey200);
38+
/* Muted color for icons (Not accessible) (#9ca1af) */
39+
--color-icon-muted: var(--brand-colors-grey-grey400);
40+
/* Default color for borders (#9ca1af) */
41+
--color-border-default: var(--brand-colors-grey-grey400);
42+
/* Muted color for borders (#858b9a33) */
43+
--color-border-muted: #858b9a33;
44+
/* Default color for overlays (scrim) (black-40%) */
45+
--color-overlay-default: #00000066;
46+
/* Dimmer color for overlays (scrim) (black-80%) */
4747
--color-overlay-alternative: #000000cc;
4848
/* For elements placed on top of overlay/alternative (#ffffff) */
4949
--color-overlay-inverse: var(--brand-colors-grey-grey000);
5050
/* For primary semantic elements: interactive, active, selected (#43aefc) */
5151
--color-primary-default: var(--brand-colors-blue-blue300);
52-
/* Stronger color for primary semantic elements (#75c4fd) */
52+
/* Stronger color for primary semantic elements (#adb6fe) */
5353
--color-primary-alternative: var(--brand-colors-blue-blue200);
5454
/* Muted color for primary semantic elements (#43aefc26) */
5555
--color-primary-muted: #43aefc26;
56-
/* For elements placed on top of primary/default (#141618) */
56+
/* For elements placed on top of primary/default (#121314) */
5757
--color-primary-inverse: var(--brand-colors-grey-grey900);
5858
/* Hover state surface for primary/default (#26a2fc) */
5959
--color-primary-default-hover: #26a2fc;
@@ -63,64 +63,64 @@
6363
--color-primary-muted-hover: #43aefc33;
6464
/* Pressed state surface for primary/muted (#43aefc40) */
6565
--color-primary-muted-pressed: #43aefc40;
66-
/* For danger semantic elements: error, critical, destructive (#e88f97) */
66+
/* For danger semantic elements: error, critical, destructive (#ff7584) */
6767
--color-error-default: var(--brand-colors-red-red300);
68-
/* Stronger color for danger semantic (#f1b9be) */
68+
/* Stronger color for error semantic (#ffa1aa) */
6969
--color-error-alternative: var(--brand-colors-red-red200);
70-
/* Muted color for danger semantic (#e88f9726) */
71-
--color-error-muted: #e88f9726;
72-
/* For elements placed on top of error/default (#141618) */
70+
/* Muted color for error semantic (#ff758426) */
71+
--color-error-muted: #ff758426;
72+
/* For elements placed on top of error/default (#121314) */
7373
--color-error-inverse: var(--brand-colors-grey-grey900);
74-
/* Hover state surface for error/default (#e47782) */
75-
--color-error-default-hover: #e47782;
76-
/* Pressed state surface for error/default (#e78891) */
77-
--color-error-default-pressed: #e78891;
78-
/* Hover state surface for error/muted (#e88f9733) */
79-
--color-error-muted-hover: #e88f9733;
80-
/* Pressed state surface for error/muted (#e88f9740) */
81-
--color-error-muted-pressed: #e88f9740;
82-
/* For warning semantic elements: caution, attention, precaution (#ffdf70) */
74+
/* Hover state surface for error/default (#ff94a0) */
75+
--color-error-default-hover: #ff94a0;
76+
/* Pressed state surface for error/default (#ffb2bb) */
77+
--color-error-default-pressed: #ffb2bb;
78+
/* Hover state surface for error/muted (#ff758433) */
79+
--color-error-muted-hover: #ff758433;
80+
/* Pressed state surface for error/muted (#ff758440) */
81+
--color-error-muted-pressed: #ff758440;
82+
/* For warning semantic elements: caution, attention, precaution (#ffd957) */
8383
--color-warning-default: var(--brand-colors-yellow-yellow100);
84-
/* Muted color option for warning semantic (#ffdf7026) */
85-
--color-warning-muted: #ffdf7026;
86-
/* For elements placed on top of warning/default (#141618) */
84+
/* Muted color option for warning semantic (#ffd95726) */
85+
--color-warning-muted: #ffd95726;
86+
/* For elements placed on top of warning/default (#121314) */
8787
--color-warning-inverse: var(--brand-colors-grey-grey900);
88-
/* Hover state surface for warning/default (#ffe485) */
89-
--color-warning-default-hover: #ffe485;
90-
/* Pressed state surface for warning/default (#ffe899) */
91-
--color-warning-default-pressed: #ffe899;
92-
/* Hover state surface for warning/muted (#ffdf7033) */
93-
--color-warning-muted-hover: #ffdf7033;
94-
/* Pressed state surface for warning/muted (#ffdf7040) */
95-
--color-warning-muted-pressed: #ffdf7040;
96-
/* For positive semantic elements: success, confirm, complete, safe (#28a745) */
88+
/* Hover state surface for warning/default (#ffe794) */
89+
--color-warning-default-hover: #ffe794;
90+
/* Pressed state surface for warning/default (#ffeeb2) */
91+
--color-warning-default-pressed: #ffeeb2;
92+
/* Hover state surface for warning/muted (#ffd95733) */
93+
--color-warning-muted-hover: #ffd95733;
94+
/* Pressed state surface for warning/muted (#ffd95740) */
95+
--color-warning-muted-pressed: #ffd95740;
96+
/* For positive semantic elements: success, confirm, complete, safe (#4cb564) */
9797
--color-success-default: var(--brand-colors-green-green300);
98-
/* Muted color for positive semantic (#28a74526) */
99-
--color-success-muted: #28a74526;
100-
/* For elements placed on top of success/default (#141618) */
98+
/* Muted color for positive semantic (#4cb56426) */
99+
--color-success-muted: #4cb56426;
100+
/* For elements placed on top of success/default (#121314) */
101101
--color-success-inverse: var(--brand-colors-grey-grey900);
102-
/* Hover state surface for success/default (#2cb94c) */
103-
--color-success-default-hover: #2cb94c;
104-
/* Pressed state surface for success/default (#30ca53) */
105-
--color-success-default-pressed: #30ca53;
106-
/* Hover state surface for success/muted (#28a74533) */
107-
--color-success-muted-hover: #28a74533;
108-
/* Pressed state surface for success/muted (#28a74540) */
109-
--color-success-muted-pressed: #28a74540;
110-
/* For soft alert semantic elements: info, reminder, hint (#43aefc) */
102+
/* Hover state surface for success/default (#60bd76) */
103+
--color-success-default-hover: #60bd76;
104+
/* Pressed state surface for success/default (#76c688) */
105+
--color-success-default-pressed: #76c688;
106+
/* Hover state surface for success/muted (#4cb56433) */
107+
--color-success-muted-hover: #4cb56433;
108+
/* Pressed state surface for success/muted (#4cb56440) */
109+
--color-success-muted-pressed: #4cb56440;
110+
/* For informational semantic elements: info, reminder, hint (#43aefc) */
111111
--color-info-default: var(--brand-colors-blue-blue300);
112-
/* Muted color for soft alert semantic (#43aefc26) */
112+
/* Muted color for informational semantic (#43aefc26) */
113113
--color-info-muted: #43aefc26;
114-
/* For elements placed on top of info/default (#141618) */
114+
/* For elements placed on top of info/default (#121314) */
115115
--color-info-inverse: var(--brand-colors-grey-grey900);
116116
/* For Flask primary accent color (#d27dff) */
117117
--color-flask-default: var(--brand-colors-purple-purple300);
118-
/* For elements placed on top of flask/default (#141618) */
118+
/* For elements placed on top of flask/default (#121314) */
119119
--color-flask-inverse: var(--brand-colors-grey-grey900);
120-
/* For neutral drop shadow color (#00000066) */
120+
/* For neutral drop shadow color (black-40%) */
121121
--color-shadow-default: #00000066;
122122
/* For primary drop shadow color (#43aefc33) */
123123
--color-shadow-primary: #43aefc33;
124-
/* For critical/danger drop shadow color (#ff758466) */
125-
--color-shadow-error: #ff758466;
124+
/* For critical/danger drop shadow color (#ff758433) */
125+
--color-shadow-error: #ff758433;
126126
}

0 commit comments

Comments
 (0)