Skip to content

Commit 283ae41

Browse files
georgewrmarshallbrianacnguyenAkatori-Design
authored
feat: Updating blue to brand evolution blurple (#474)
## Description This PR updates the design tokens to align with the brand evolution "blurple" colors and fixes some casing inconsistencies introduced in #428. The changes primarily affect the blue color palette across our design system, ensuring consistency between Figma values and our implementation. Key updates include: 1. Updating the blue color scale in brand colors from the current palette to the new "blurple" palette 2. Adjusting primary, info, and shadow colors in both light and dark themes to use the new blue values 3. Fixing casing consistency in color values to ensure they match Figma exactly ## Related issues Fixes: #475 ## Manual testing steps 1. Pull the branch and build storybook `yarn storybook` 2. Verify that all blue colors have been updated to the new "blurple" palette 3. Check that primary colors in both light and dark themes reflect the new values 4. Confirm that all color hex values match their comments exactly (casing) 5. Run tests using `yarn workspace @metamask/design-tokens jest src/js` to verify changes ## Screenshots/Recordings ### Before Blue color values (old): - Blue500: `#0376c9` - Blue300: `#43aefc` - Primary default (light): `#0376c9` - Primary default (dark): `#43aefc` https://github.com/user-attachments/assets/c847b5c1-0777-49b6-a1d5-3ad65e5f6259 ### After Blue color values (new): - Blue500: `#4459ff` - Blue300: `#8b99ff` - Primary default (light): `#4459ff` - Primary default (dark): `#8b99ff` https://github.com/user-attachments/assets/e40b5971-5eae-4382-a54b-12125ea2f24f ## Pre-merge author checklist - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR ## Pre-merge reviewer checklist - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed) - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots --------- Co-authored-by: Brian August Nguyen <brianacnguyen@gmail.com> Co-authored-by: Hiro M <55973039+Akatori-Design@users.noreply.github.com>
1 parent e364cad commit 283ae41

File tree

10 files changed

+158
-159
lines changed

10 files changed

+158
-159
lines changed

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@
2121
--brand-colors-grey-grey000: #ffffff;
2222
--brand-colors-grey-grey025: #f7f9fc;
2323
/* Blue */
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;
24+
--brand-colors-blue-blue100: #d6dbff;
25+
--brand-colors-blue-blue200: #adb6fe;
26+
--brand-colors-blue-blue300: #8b99ff;
27+
--brand-colors-blue-blue400: #6f7eff;
28+
--brand-colors-blue-blue500: #4459ff;
29+
--brand-colors-blue-blue600: #2c3dc5;
30+
--brand-colors-blue-blue700: #1c277f;
31+
--brand-colors-blue-blue800: #131b59;
32+
--brand-colors-blue-blue900: #0b0f32;
33+
--brand-colors-blue-blue050: #f4f5ff;
34+
--brand-colors-blue-blue025: #f8f9ff;
3535
/* Green */
3636
--brand-colors-green-green100: #c1e6c9;
3737
--brand-colors-green-green200: #80cb91;

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -47,22 +47,22 @@
4747
--color-overlay-alternative: #000000cc;
4848
/* For elements placed on top of overlay/alternative (#ffffff) */
4949
--color-overlay-inverse: var(--brand-colors-grey-grey000);
50-
/* For primary semantic elements: interactive, active, selected (#43aefc) */
50+
/* For primary semantic elements: interactive, active, selected (#8b99ff) */
5151
--color-primary-default: var(--brand-colors-blue-blue300);
5252
/* Stronger color for primary semantic elements (#adb6fe) */
5353
--color-primary-alternative: var(--brand-colors-blue-blue200);
54-
/* Muted color for primary semantic elements (#43aefc26) */
55-
--color-primary-muted: #43aefc26;
54+
/* Muted color for primary semantic elements (#8b99ff26) */
55+
--color-primary-muted: #8b99ff26;
5656
/* For elements placed on top of primary/default (#121314) */
5757
--color-primary-inverse: var(--brand-colors-grey-grey900);
58-
/* Hover state surface for primary/default (#59b8fc) */
59-
--color-primary-default-hover: #59b8fc;
60-
/* Pressed state surface for primary/default (#82c9fd) */
61-
--color-primary-default-pressed: #82c9fd;
62-
/* Hover state surface for primary/muted (#43aefc33) */
63-
--color-primary-muted-hover: #43aefc33;
64-
/* Pressed state surface for primary/muted (#43aefc40) */
65-
--color-primary-muted-pressed: #43aefc40;
58+
/* Hover state surface for primary/default (#9eaaff) */
59+
--color-primary-default-hover: #9eaaff;
60+
/* Pressed state surface for primary/default (#c7ceff) */
61+
--color-primary-default-pressed: #c7ceff;
62+
/* Hover state surface for primary/muted (#8b99ff33) */
63+
--color-primary-muted-hover: #8b99ff33;
64+
/* Pressed state surface for primary/muted (#8b99ff40) */
65+
--color-primary-muted-pressed: #8b99ff40;
6666
/* For danger semantic elements: error, critical, destructive (#ff7584) */
6767
--color-error-default: var(--brand-colors-red-red300);
6868
/* Stronger color for error semantic (#ffa1aa) */
@@ -107,10 +107,10 @@
107107
--color-success-muted-hover: #4cb56433;
108108
/* Pressed state surface for success/muted (#4cb56440) */
109109
--color-success-muted-pressed: #4cb56440;
110-
/* For informational read-only elements: info, reminder, hint (#43aefc) */
110+
/* For informational read-only elements: info, reminder, hint (#8b99ff) */
111111
--color-info-default: var(--brand-colors-blue-blue300);
112-
/* Muted color for informational semantic (#43aefc26) */
113-
--color-info-muted: #43aefc26;
112+
/* Muted color for informational semantic (#8b99ff26) */
113+
--color-info-muted: #8b99ff26;
114114
/* 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) */
@@ -119,8 +119,8 @@
119119
--color-flask-inverse: var(--brand-colors-grey-grey900);
120120
/* For neutral drop shadow color (black-40%) */
121121
--color-shadow-default: #00000066;
122-
/* For primary drop shadow color (#43aefc33) */
123-
--color-shadow-primary: #43aefc33;
122+
/* For primary drop shadow color (#8b99ff33) */
123+
--color-shadow-primary: #8b99ff33;
124124
/* For critical/danger drop shadow color (#ff758433) */
125125
--color-shadow-error: #ff758433;
126126
}

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
--color-background-alternative-hover: #f6f6f7;
1919
/* Pressed state surface for background/alternative (#ebecef) */
2020
--color-background-alternative-pressed: #ebecef;
21-
/* Hover state surface for background/muted (#f6f6f7) */
22-
--color-background-muted-hover: #f6f6f7;
21+
/* Hover state surface for background/muted (#e7ebee) */
22+
--color-background-muted-hover: #e7ebee;
2323
/* Pressed state surface for background/muted (#ebecef) */
2424
--color-background-muted-pressed: #ebecef;
2525
/* General purpose hover state tint (#858b9a14) */
@@ -48,22 +48,22 @@
4848
--color-overlay-alternative: #000000cc;
4949
/* For elements placed on top of overlay/alternative (#ffffff) */
5050
--color-overlay-inverse: var(--brand-colors-grey-grey000);
51-
/* For primary semantic elements: interactive, active, selected (#0376c9) */
51+
/* For primary semantic elements: interactive, active, selected (#4459ff) */
5252
--color-primary-default: var(--brand-colors-blue-blue500);
53-
/* Stronger color for primary semantic elements (#0260a4) */
53+
/* Stronger color for primary semantic elements (#2c3dc5) */
5454
--color-primary-alternative: var(--brand-colors-blue-blue600);
55-
/* Muted color for primary semantic backgrounds (#0376c91a) */
56-
--color-primary-muted: #0376c91a;
55+
/* Muted color for primary semantic elements (#4459ff1a) */
56+
--color-primary-muted: #4459ff1a;
5757
/* For elements placed on top of primary/default (#ffffff) */
5858
--color-primary-inverse: var(--brand-colors-grey-grey000);
59-
/* Hover state surface for primary/default (#036ab5) */
60-
--color-primary-default-hover: #036ab5;
61-
/* Pressed state surface for primary/default (#02538d) */
62-
--color-primary-default-pressed: #02538d;
63-
/* Hover state surface for primary/muted (#0376c926) */
64-
--color-primary-muted-hover: #0376c926;
65-
/* Pressed state surface for primary/muted (#0376c933) */
66-
--color-primary-muted-pressed: #0376c933;
59+
/* Hover state surface for primary/default (#384df5) */
60+
--color-primary-default-hover: #384df5;
61+
/* Pressed state surface for primary/default (#2b3eda) */
62+
--color-primary-default-pressed: #2b3eda;
63+
/* Hover state surface for primary/muted (#4459ff26) */
64+
--color-primary-muted-hover: #4459ff26;
65+
/* Pressed state surface for primary/muted (#4459ff33) */
66+
--color-primary-muted-pressed: #4459ff33;
6767
/* For danger semantic elements: error, critical, destructive (#ca3542) */
6868
--color-error-default: var(--brand-colors-red-red500);
6969
/* Stronger color for error semantic (#952731) */
@@ -108,10 +108,10 @@
108108
--color-success-muted-hover: #1c7e3326;
109109
/* Pressed state surface for success/muted (#1c7e3333) */
110110
--color-success-muted-pressed: #1c7e3333;
111-
/* For informational read-only elements: info, reminder, hint (#0376c9) */
111+
/* For informational read-only elements: info, reminder, hint (#4459ff) */
112112
--color-info-default: var(--brand-colors-blue-blue500);
113-
/* Muted color for informational semantic (#0376c91a) */
114-
--color-info-muted: #0376c91a;
113+
/* Muted color for informational semantic (#4459ff1a) */
114+
--color-info-muted: #4459ff1a;
115115
/* For elements placed on top of info/default (#ffffff) */
116116
--color-info-inverse: var(--brand-colors-grey-grey000);
117117
/* For Flask primary accent color (#8f44e4) */
@@ -121,7 +121,7 @@
121121
/* For neutral drop shadow color (black-10% | black-40%) */
122122
--color-shadow-default: #0000001a;
123123
/* For primary drop shadow color (blue500-20% | blue300-20%) */
124-
--color-shadow-primary: #0376c933;
124+
--color-shadow-primary: #4459ff33;
125125
/* For critical/danger drop shadow color (red50-20% | red300-20%) */
126126
--color-shadow-error: #ca354266;
127127
}

‎packages/design-tokens/src/figma/brandColors.json‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -81,69 +81,69 @@
8181
},
8282
"blue": {
8383
"100": {
84-
"value": "#a7d9fe",
84+
"value": "#d6dbff",
8585
"type": "color",
86-
"parent": "Brand Colors/v1 - current",
86+
"parent": "Brand Colors/v2- brand evo (preview)",
8787
"description": ""
8888
},
8989
"200": {
90-
"value": "#75c4fd",
90+
"value": "#adb6fe",
9191
"type": "color",
92-
"parent": "Brand Colors/v1 - current",
92+
"parent": "Brand Colors/v2- brand evo (preview)",
9393
"description": ""
9494
},
9595
"300": {
96-
"value": "#43aefc",
96+
"value": "#8b99ff",
9797
"type": "color",
98-
"parent": "Brand Colors/v1 - current",
98+
"parent": "Brand Colors/v2- brand evo (preview)",
9999
"description": ""
100100
},
101101
"400": {
102-
"value": "#1098fc",
102+
"value": "#6f7eff",
103103
"type": "color",
104-
"parent": "Brand Colors/v1 - current",
104+
"parent": "Brand Colors/v2- brand evo (preview)",
105105
"description": ""
106106
},
107107
"500": {
108-
"value": "#0376c9",
108+
"value": "#4459ff",
109109
"type": "color",
110-
"parent": "Brand Colors/v1 - current",
110+
"parent": "Brand Colors/v2- brand evo (preview)",
111111
"description": ""
112112
},
113113
"600": {
114-
"value": "#0260a4",
114+
"value": "#2c3dc5",
115115
"type": "color",
116-
"parent": "Brand Colors/v1 - current",
116+
"parent": "Brand Colors/v2- brand evo (preview)",
117117
"description": ""
118118
},
119119
"700": {
120-
"value": "#024272",
120+
"value": "#1c277f",
121121
"type": "color",
122-
"parent": "Brand Colors/v1 - current",
122+
"parent": "Brand Colors/v2- brand evo (preview)",
123123
"description": ""
124124
},
125125
"800": {
126-
"value": "#01253f",
126+
"value": "#131b59",
127127
"type": "color",
128-
"parent": "Brand Colors/v1 - current",
128+
"parent": "Brand Colors/v2- brand evo (preview)",
129129
"description": ""
130130
},
131131
"900": {
132-
"value": "#00080d",
132+
"value": "#0b0f32",
133133
"type": "color",
134-
"parent": "Brand Colors/v1 - current",
134+
"parent": "Brand Colors/v2- brand evo (preview)",
135135
"description": ""
136136
},
137137
"050": {
138-
"value": "#eaf6ff",
138+
"value": "#f4f5ff",
139139
"type": "color",
140-
"parent": "Brand Colors/v1 - current",
140+
"parent": "Brand Colors/v2- brand evo (preview)",
141141
"description": ""
142142
},
143143
"025": {
144-
"value": "#eaf6ff",
144+
"value": "#f8f9ff",
145145
"type": "color",
146-
"parent": "Brand Colors/v1 - current",
146+
"parent": "Brand Colors/v2- brand evo (preview)",
147147
"description": ""
148148
}
149149
},

‎packages/design-tokens/src/figma/darkTheme.json‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"description": "For raised neutral surface above background/default."
2020
},
2121
"default-hover": {
22-
"value": "#1A1B1C",
22+
"value": "#1a1b1c",
2323
"type": "color",
2424
"parent": "Theme Colors/Dark mode",
2525
"description": "Hover state surface for background/default."
@@ -31,7 +31,7 @@
3131
"description": "Pressed state surface for background/default."
3232
},
3333
"alternative-hover": {
34-
"value": "#0D0D0E",
34+
"value": "#0d0d0e",
3535
"type": "color",
3636
"parent": "Theme Colors/Dark mode",
3737
"description": "Hover state surface for background/alternative."
@@ -43,7 +43,7 @@
4343
"description": "Pressed state surface for background/alternative."
4444
},
4545
"muted-hover": {
46-
"value": "#2A2B2D",
46+
"value": "#2a2b2d",
4747
"type": "color",
4848
"parent": "Theme Colors/Dark mode",
4949
"description": "Hover state surface for background/muted."
@@ -55,13 +55,13 @@
5555
"description": "Pressed state surface for background/muted."
5656
},
5757
"hover": {
58-
"value": "#DADCE50A",
58+
"value": "#dadce50a",
5959
"type": "color",
6060
"parent": "Theme Colors/Dark mode",
6161
"description": "General purpose hover state tint."
6262
},
6363
"pressed": {
64-
"value": "#DADCE514",
64+
"value": "#dadce514",
6565
"type": "color",
6666
"parent": "Theme Colors/Dark mode",
6767
"description": "General purpose pressed state tint."
@@ -155,7 +155,7 @@
155155
"description": "Stronger color for primary semantic elements."
156156
},
157157
"muted": {
158-
"value": "#43aefc26",
158+
"value": "#8b99ff26",
159159
"type": "color",
160160
"parent": "Theme Colors/Dark mode",
161161
"description": "Muted color for primary semantic elements."
@@ -167,25 +167,25 @@
167167
"description": "For elements placed on top of primary/default fill."
168168
},
169169
"default-hover": {
170-
"value": "#59B8FC",
170+
"value": "#9EAAFF",
171171
"type": "color",
172172
"parent": "Theme Colors/Dark mode",
173173
"description": "Hover state surface for primary/default."
174174
},
175175
"default-pressed": {
176-
"value": "#82C9FD",
176+
"value": "#c7ceff",
177177
"type": "color",
178178
"parent": "Theme Colors/Dark mode",
179179
"description": "Pressed state surface for primary/default."
180180
},
181181
"muted-hover": {
182-
"value": "#43aefc33",
182+
"value": "#8b99ff33",
183183
"type": "color",
184184
"parent": "Theme Colors/Dark mode",
185185
"description": "Hover state surface for primary/muted."
186186
},
187187
"muted-pressed": {
188-
"value": "#43aefc40",
188+
"value": "#8b99ff40",
189189
"type": "color",
190190
"parent": "Theme Colors/Dark mode",
191191
"description": "Pressed state surface for primary/muted."
@@ -217,13 +217,13 @@
217217
"description": "For elements placed on top of error/default fill."
218218
},
219219
"default-hover": {
220-
"value": "#FF8A96",
220+
"value": "#ff8a96",
221221
"type": "color",
222222
"parent": "Theme Colors/Dark mode",
223223
"description": "Hover state surface for error/default."
224224
},
225225
"default-pressed": {
226-
"value": "#FFB2BB",
226+
"value": "#ffb2bb",
227227
"type": "color",
228228
"parent": "Theme Colors/Dark mode",
229229
"description": "Pressed state surface for error/default."
@@ -261,13 +261,13 @@
261261
"description": "For elements placed on top of warning/default fill."
262262
},
263263
"default-hover": {
264-
"value": "#FFDE6B",
264+
"value": "#ffde6b",
265265
"type": "color",
266266
"parent": "Theme Colors/Dark mode",
267267
"description": "Hover state surface for warning/default."
268268
},
269269
"default-pressed": {
270-
"value": "#FFE794",
270+
"value": "#ffe794",
271271
"type": "color",
272272
"parent": "Theme Colors/Dark mode",
273273
"description": "Pressed state surface for warning/default."
@@ -305,13 +305,13 @@
305305
"description": "For elements placed on top of success/default fill."
306306
},
307307
"default-hover": {
308-
"value": "#59BA6F",
308+
"value": "#59ba6f",
309309
"type": "color",
310310
"parent": "Theme Colors/Dark mode",
311311
"description": "Hover state surface for success/default."
312312
},
313313
"default-pressed": {
314-
"value": "#76C688",
314+
"value": "#76c688",
315315
"type": "color",
316316
"parent": "Theme Colors/Dark mode",
317317
"description": "Pressed state surface for success/default."
@@ -337,7 +337,7 @@
337337
"description": "For information read-only elements: info, reminder, hint..."
338338
},
339339
"muted": {
340-
"value": "#43aefc26",
340+
"value": "#8b99ff26",
341341
"type": "color",
342342
"parent": "Theme Colors/Dark mode",
343343
"description": "Muted color for informational semantic."
@@ -371,7 +371,7 @@
371371
"description": "For neutral drop shadow color."
372372
},
373373
"primary": {
374-
"value": "#43aefc33",
374+
"value": "#8b99ff33",
375375
"type": "color",
376376
"parent": "Theme Colors/Dark mode",
377377
"description": "For primary drop shadow color."

0 commit comments

Comments
 (0)