Conversation
Update color values across src/tokens/universal.variables.json: revise many primitive color shades (red, orange, yellow, green, teal, blue, blurple, purple, pink, etc.), update dependent semantic tokens and referencedVariable mappings, and remove duplicated/old "primary-vibrant" and "orange-vibrant" vibrancy blocks. Syncs derived tokens (interactive, systemfeedback, button, brand mappings, etc.) with the new palette.
DescriptionThis PR updates the color token values across the Brave Leo design system. It involves two main types of changes: (1) updating primitive color values across multiple color scales (red, orange, yellow, green, teal, blue, blurple, purple, pink, private-window, tor-window) to more vibrant/saturated variants, and (2) removing the Possible Issues
ChangesChanges
sequenceDiagram
participant Designer as Design System Update
participant Primitives as Primitive Color Tokens
participant Scales as Scale Tokens (Light/Dark)
participant Schemes as Scheme Tokens
participant Semantic as Semantic Tokens (Feedback, Buttons, etc.)
Designer->>Primitives: Update color hex values (35-90 steps)
Designer->>Primitives: Remove primary-vibrant palette
Designer->>Primitives: Remove orange-vibrant palette
Primitives->>Scales: Propagate updated values via references
Scales-->>Scales: Remove primary-vibrant & orange-vibrant scales
Scales->>Schemes: Update scheme tokens (error, primary, etc.)
Schemes->>Semantic: Update systemfeedback, button, icon tokens
Semantic-->>Semantic: All downstream tokens reflect new colors
|
|
👋 Thanks for Submitting! This PR is available for preview at the link below. ✅ PR tip preview: https://1312.pr.nala.bravesoftware.com/ - ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28568 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 132719 bytes
+ ./tokens/css/variables.css: 125735 bytes
Variables Diff: variables-android.diff--- ./tokens/css/variables-android.old.css 2026-02-13 17:51:37.264335377 +0000
+++ ./tokens/css/variables-android.css 2026-02-13 17:51:02.344825360 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-browser.diff--- ./tokens/css/variables-browser.old.css 2026-02-13 17:51:37.520892423 +0000
+++ ./tokens/css/variables-browser.css 2026-02-13 17:51:02.328825397 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-ios.diff--- ./tokens/css/variables-ios.old.css 2026-02-13 17:51:37.788236891 +0000
+++ ./tokens/css/variables-ios.css 2026-02-13 17:51:02.361825321 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-marketing.diff--- ./tokens/css/variables-marketing.old.css 2026-02-13 17:51:38.067074419 +0000
+++ ./tokens/css/variables-marketing.css 2026-02-13 17:51:02.384825268 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-news.diff--- ./tokens/css/variables-news.old.css 2026-02-13 17:51:38.187088123 +0000
+++ ./tokens/css/variables-news.css 2026-02-13 17:51:02.436825148 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-newtab.diff--- ./tokens/css/variables-newtab.old.css 2026-02-13 17:51:38.422053423 +0000
+++ ./tokens/css/variables-newtab.css 2026-02-13 17:51:02.447825123 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-search.diff--- ./tokens/css/variables-search.old.css 2026-02-13 17:51:38.584965140 +0000
+++ ./tokens/css/variables-search.css 2026-02-13 17:51:02.410825208 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-web3.diff--- ./tokens/css/variables-web3.old.css 2026-02-13 17:51:38.818217414 +0000
+++ ./tokens/css/variables-web3.css 2026-02-13 17:51:02.451825114 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
@media (prefers-color-scheme: light) {
Variables Diff: variables.diff--- ./tokens/css/variables.old.css 2026-02-13 17:51:39.160967439 +0000
+++ ./tokens/css/variables.css 2026-02-13 17:51:02.207825676 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Fri Feb 13 2026 05:51:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Feb 13 2026 17:51:02 GMT+0000 (Coordinated Universal Time)
*/
:root {
@@ -12,14 +12,14 @@
--leo-color-primitive-blue-20: #152a47;
--leo-color-primitive-blue-25: #1a3355;
--leo-color-primitive-blue-30: #1f3e68;
- --leo-color-primitive-blue-35: #254979;
- --leo-color-primitive-blue-40: #2a548d;
+ --leo-color-primitive-blue-35: #0049b4;
+ --leo-color-primitive-blue-40: #0154cc;
--leo-color-primitive-blue-5: #0b1522;
- --leo-color-primitive-blue-50: #366eb8;
- --leo-color-primitive-blue-60: #4386e0;
- --leo-color-primitive-blue-70: #5ea3ff;
- --leo-color-primitive-blue-80: #a0c9ff;
- --leo-color-primitive-blue-90: #c8dfff;
+ --leo-color-primitive-blue-50: #066cff;
+ --leo-color-primitive-blue-60: #488cff;
+ --leo-color-primitive-blue-70: #78abff;
+ --leo-color-primitive-blue-80: #accafc;
+ --leo-color-primitive-blue-90: #d8e5fb;
--leo-color-primitive-blue-95: #e9f3ff;
--leo-color-primitive-blue-98: #f8fafd;
--leo-color-primitive-blue-99: #fbfcfd;
@@ -30,14 +30,14 @@
--leo-color-primitive-blurple-20: #212848;
--leo-color-primitive-blurple-25: #272f55;
--leo-color-primitive-blurple-30: #303a68;
- --leo-color-primitive-blurple-35: #39457a;
- --leo-color-primitive-blurple-40: #424f8e;
+ --leo-color-primitive-blurple-35: #3a2ecd;
+ --leo-color-primitive-blurple-40: #434fcf;
--leo-color-primitive-blurple-5: #101322;
- --leo-color-primitive-blurple-50: #5667b9;
- --leo-color-primitive-blurple-60: #697ee1;
- --leo-color-primitive-blurple-70: #849bff;
- --leo-color-primitive-blurple-80: #b2c3ff;
- --leo-color-primitive-blurple-90: #d5dcf6;
+ --leo-color-primitive-blurple-50: #5b67e8;
+ --leo-color-primitive-blurple-60: #7686ec;
+ --leo-color-primitive-blurple-70: #96a5f1;
+ --leo-color-primitive-blurple-80: #bcc6f3;
+ --leo-color-primitive-blurple-90: #dfe4f6;
--leo-color-primitive-blurple-95: #eef2ff;
--leo-color-primitive-blurple-98: #f9fafd;
--leo-color-primitive-blurple-99: #fbfbfd;
@@ -55,14 +55,14 @@
--leo-color-primitive-green-20: #0c311c;
--leo-color-primitive-green-25: #0f3a22;
--leo-color-primitive-green-30: #124728;
- --leo-color-primitive-green-35: #165330;
- --leo-color-primitive-green-40: #186137;
+ --leo-color-primitive-green-35: #176235;
+ --leo-color-primitive-green-40: #1c713d;
--leo-color-primitive-green-5: #06180e;
- --leo-color-primitive-green-50: #1f7e48;
- --leo-color-primitive-green-60: #279a58;
- --leo-color-primitive-green-70: #48b873;
- --leo-color-primitive-green-80: #96d5a9;
- --leo-color-primitive-green-90: #c3e6cd;
+ --leo-color-primitive-green-50: #268f4f;
+ --leo-color-primitive-green-60: #2fab5f;
+ --leo-color-primitive-green-70: #38c971;
+ --leo-color-primitive-green-80: #54ea8b;
+ --leo-color-primitive-green-90: #b0f9c3;
--leo-color-primitive-green-95: #e8f6ec;
--leo-color-primitive-green-98: #f4fdf6;
--leo-color-primitive-green-99: #f8fdf9;
@@ -119,35 +119,17 @@
--leo-color-primitive-orange-20: #452112;
--leo-color-primitive-orange-25: #522715;
--leo-color-primitive-orange-30: #64301a;
- --leo-color-primitive-orange-35: #76381f;
- --leo-color-primitive-orange-40: #884023;
+ --leo-color-primitive-orange-35: #8f2c00;
+ --leo-color-primitive-orange-40: #a33400;
--leo-color-primitive-orange-5: #211009;
- --leo-color-primitive-orange-50: #b2542e;
- --leo-color-primitive-orange-60: #d96738;
- --leo-color-primitive-orange-70: #f98354;
- --leo-color-primitive-orange-80: #ffb597;
+ --leo-color-primitive-orange-50: #cd4400;
+ --leo-color-primitive-orange-60: #f45202;
+ --leo-color-primitive-orange-70: #ff8258;
+ --leo-color-primitive-orange-80: #fcb69f;
--leo-color-primitive-orange-90: #f6d7ca;
--leo-color-primitive-orange-95: #ffefe8;
--leo-color-primitive-orange-98: #fdf9f8;
--leo-color-primitive-orange-99: #fefbfa;
- --leo-color-primitive-orange-vibrant-0: #000;
- --leo-color-primitive-orange-vibrant-10: #390c00;
- --leo-color-primitive-orange-vibrant-100: #fff;
- --leo-color-primitive-orange-vibrant-15: #4a1300;
- --leo-color-primitive-orange-vibrant-20: #5c1900;
- --leo-color-primitive-orange-vibrant-25: #6f2000;
- --leo-color-primitive-orange-vibrant-30: #822800;
- --leo-color-primitive-orange-vibrant-35: #962f00;
- --leo-color-primitive-orange-vibrant-40: #aa3600;
- --leo-color-primitive-orange-vibrant-5: #280801;
- --leo-color-primitive-orange-vibrant-50: #d44600;
- --leo-color-primitive-orange-vibrant-60: #f45202;
- --leo-color-primitive-orange-vibrant-70: #ff8b62;
- --leo-color-primitive-orange-vibrant-80: #ffb59c;
- --leo-color-primitive-orange-vibrant-90: #ffdbcf;
- --leo-color-primitive-orange-vibrant-95: #ffede8;
- --leo-color-primitive-orange-vibrant-98: #fff8f6;
- --leo-color-primitive-orange-vibrant-99: #fffbff;
--leo-color-primitive-pink-0: #000;
--leo-color-primitive-pink-10: #2b131b;
--leo-color-primitive-pink-100: #fff;
@@ -155,14 +137,14 @@
--leo-color-primitive-pink-20: #451e2c;
--leo-color-primitive-pink-25: #512334;
--leo-color-primitive-pink-30: #642b40;
- --leo-color-primitive-pink-35: #75334b;
- --leo-color-primitive-pink-40: #873a56;
+ --leo-color-primitive-pink-35: #970154;
+ --leo-color-primitive-pink-40: #ac0261;
--leo-color-primitive-pink-5: #210e15;
- --leo-color-primitive-pink-50: #b24d71;
- --leo-color-primitive-pink-60: #d85e8a;
- --leo-color-primitive-pink-70: #f97aa6;
- --leo-color-primitive-pink-80: #ffb1c9;
- --leo-color-primitive-pink-90: #ffd1df;
+ --leo-color-primitive-pink-50: #d8027b;
+ --leo-color-primitive-pink-60: #ff1593;
+ --leo-color-primitive-pink-70: #ff75ac;
+ --leo-color-primitive-pink-80: #fcafca;
+ --leo-color-primitive-pink-90: #fbdbe5;
--leo-color-primitive-pink-95: #ffeef3;
--leo-color-primitive-pink-98: #fdf9fa;
--leo-color-primitive-pink-99: #fefbfc;
@@ -173,35 +155,17 @@
--leo-color-primitive-primary-20: #212848;
--leo-color-primitive-primary-25: #272f55;
--leo-color-primitive-primary-30: #303a68;
- --leo-color-primitive-primary-35: #39457a;
+ --leo-color-primitive-primary-35: #3a2ecd;
--leo-color-primitive-primary-40: #434fcf;
--leo-color-primitive-primary-5: #101322;
--leo-color-primitive-primary-50: #5b67e8;
- --leo-color-primitive-primary-60: #697ee1;
- --leo-color-primitive-primary-70: #849bff;
- --leo-color-primitive-primary-80: #b2c3ff;
- --leo-color-primitive-primary-90: #d5dcf6;
+ --leo-color-primitive-primary-60: #7686ec;
+ --leo-color-primitive-primary-70: #96a5f1;
+ --leo-color-primitive-primary-80: #bcc6f3;
+ --leo-color-primitive-primary-90: #dfe4f6;
--leo-color-primitive-primary-95: #eef2ff;
--leo-color-primitive-primary-98: #f9fafd;
--leo-color-primitive-primary-99: #fbfbfd;
- --leo-color-primitive-primary-vibrant-0: #000;
- --leo-color-primitive-primary-vibrant-10: #110c50;
- --leo-color-primitive-primary-vibrant-100: #fff;
- --leo-color-primitive-primary-vibrant-15: #181266;
- --leo-color-primitive-primary-vibrant-20: #20197f;
- --leo-color-primitive-primary-vibrant-25: #271e93;
- --leo-color-primitive-primary-vibrant-30: #3126b1;
- --leo-color-primitive-primary-vibrant-35: #3a2ecd;
- --leo-color-primitive-primary-vibrant-40: #434fcf;
- --leo-color-primitive-primary-vibrant-5: #0b083d;
- --leo-color-primitive-primary-vibrant-50: #5b67e8;
- --leo-color-primitive-primary-vibrant-60: #7686ec;
- --leo-color-primitive-primary-vibrant-70: #96a5f1;
- --leo-color-primitive-primary-vibrant-80: #bcc6f3;
- --leo-color-primitive-primary-vibrant-90: #dfe4f6;
- --leo-color-primitive-primary-vibrant-95: #f0f2fa;
- --leo-color-primitive-primary-vibrant-98: #f9fafd;
- --leo-color-primitive-primary-vibrant-99: #fbfbfd;
--leo-color-primitive-private-window-0: #000;
--leo-color-primitive-private-window-10: #1f1629;
--leo-color-primitive-private-window-100: #fff;
@@ -209,14 +173,14 @@
--leo-color-primitive-private-window-20: #322443;
--leo-color-primitive-private-window-25: #3b2a4f;
--leo-color-primitive-private-window-30: #493461;
- --leo-color-primitive-private-window-35: #563d72;
- --leo-color-primitive-private-window-40: #634684;
+ --leo-color-primitive-private-window-35: #6116c0;
+ --leo-color-primitive-private-window-40: #6f1bdb;
--leo-color-primitive-private-window-5: #181120;
- --leo-color-primitive-private-window-50: #815bac;
- --leo-color-primitive-private-window-60: #9d6fd1;
- --leo-color-primitive-private-window-70: #bb8cf1;
- --leo-color-primitive-private-window-80: #d5bbf6;
- --leo-color-primitive-private-window-90: #e6d7fa;
+ --leo-color-primitive-private-window-50: #8747f7;
+ --leo-color-primitive-private-window-60: #9973f8;
+ --leo-color-primitive-private-window-70: #b098fa;
+ --leo-color-primitive-private-window-80: #cbc0f8;
+ --leo-color-primitive-private-window-90: #e5e1f9;
--leo-color-primitive-private-window-95: #f6f0fd;
--leo-color-primitive-private-window-98: #fbfafd;
--leo-color-primitive-private-window-99: #fcfbfe;
@@ -227,14 +191,14 @@
--leo-color-primitive-purple-20: #302444;
--leo-color-primitive-purple-25: #392b50;
--leo-color-primitive-purple-30: #463562;
- --leo-color-primitive-purple-35: #523e73;
- --leo-color-primitive-purple-40: #5f4786;
+ --leo-color-primitive-purple-35: #6116c0;
+ --leo-color-primitive-purple-40: #6f1bdb;
--leo-color-primitive-purple-5: #171120;
- --leo-color-primitive-purple-50: #7c5daf;
- --leo-color-primitive-purple-60: #9671d4;
- --leo-color-primitive-purple-70: #b48ef4;
- --leo-color-primitive-purple-80: #d0bbf8;
- --leo-color-primitive-purple-90: #e3d7fa;
+ --leo-color-primitive-purple-50: #8747f7;
+ --leo-color-primitive-purple-60: #9973f8;
+ --leo-color-primitive-purple-70: #b098fa;
+ --leo-color-primitive-purple-80: #cbc0f8;
+ --leo-color-primitive-purple-90: #e5e1f9;
--leo-color-primitive-purple-95: #f5f0fe;
--leo-color-primitive-purple-98: #fbfafd;
--leo-color-primitive-purple-99: #fcfbfe;
@@ -245,13 +209,13 @@
--leo-color-primitive-red-20: #471e1d;
--leo-color-primitive-red-25: #542422;
--leo-color-primitive-red-30: #682c29;
- --leo-color-primitive-red-35: #7a3431;
- --leo-color-primitive-red-40: #8c3b38;
+ --leo-color-primitive-red-35: #9e0009;
+ --leo-color-primitive-red-40: #b4020e;
--leo-color-primitive-red-5: #220f0e;
- --leo-color-primitive-red-50: #b74d49;
- --leo-color-primitive-red-60: #e05f59;
- --leo-color-primitive-red-70: #ff7b74;
- --leo-color-primitive-red-80: #ffb1aa;
+ --leo-color-primitive-red-50: #e20314;
+ --leo-color-primitive-red-60: #ff3c36;
+ --leo-color-primitive-red-70: #ff7f72;
+ --leo-color-primitive-red-80: #fcb4aa;
--leo-color-primitive-red-90: #fbddd8;
--leo-color-primitive-red-95: #ffedeb;
--leo-color-primitive-red-98: #fdf9f9;
@@ -281,14 +245,14 @@
--leo-color-primitive-teal-20: #003039;
--leo-color-primitive-teal-25: #003943;
--leo-color-primitive-teal-30: #004652;
- --leo-color-primitive-teal-35: #005261;
- --leo-color-primitive-teal-40: #005f70;
+ --leo-color-primitive-teal-35: #1b5c68;
+ --leo-color-primitive-teal-40: #206a77;
--leo-color-primitive-teal-5: #00171b;
- --leo-color-primitive-teal-50: #007b92;
- --leo-color-primitive-teal-60: #0096b1;
- --leo-color-primitive-teal-70: #00b5d1;
- --leo-color-primitive-teal-80: #77d4e4;
- --leo-color-primitive-teal-90: #b3e6ef;
+ --leo-color-primitive-teal-50: #2b8697;
+ --leo-color-primitive-teal-60: #35a0b4;
+ --leo-color-primitive-teal-70: #3fbdd4;
+ --leo-color-primitive-teal-80: #5fddf5;
+ --leo-color-primitive-teal-90: #c1eef8;
--leo-color-primitive-teal-95: #e2f6f9;
--leo-color-primitive-teal-98: #f5fcfd;
--leo-color-primitive-teal-99: #f9fcfd;
@@ -317,14 +281,14 @@
--leo-color-primitive-tor-window-20: #372240;
--leo-color-primitive-tor-window-25: #40294b;
--leo-color-primitive-tor-window-30: #4f325c;
- --leo-color-primitive-tor-window-35: #5d3b6d;
- --leo-color-primitive-tor-window-40: #6c437e;
+ --leo-color-primitive-tor-window-35: #6d3588;
+ --leo-color-primitive-tor-window-40: #7d3e9b;
--leo-color-primitive-tor-window-5: #1a101e;
- --leo-color-primitive-tor-window-50: #8d58a4;
- --leo-color-primitive-tor-window-60: #ab6cc8;
- --leo-color-primitive-tor-window-70: #c988e7;
- --leo-color-primitive-tor-window-80: #dfb8f1;
- --leo-color-primitive-tor-window-90: #ecd6f6;
+ --leo-color-primitive-tor-window-50: #9e50c3;
+ --leo-color-primitive-tor-window-60: #b46dd8;
+ --leo-color-primitive-tor-window-70: #d98cff;
+ --leo-color-primitive-tor-window-80: #d9bcea;
+ --leo-color-primitive-tor-window-90: #ecdff3;
--leo-color-primitive-tor-window-95: #f8eefd;
--leo-color-primitive-tor-window-98: #fbf9fc;
--leo-color-primitive-tor-window-99: #fcfbfd;
@@ -335,13 +299,13 @@
--leo-color-primitive-yellow-20: #372802;
--leo-color-primitive-yellow-25: #412f02;
--leo-color-primitive-yellow-30: #503a05;
- --leo-color-primitive-yellow-35: #5e4507;
- --leo-color-primitive-yellow-40: #6d4f01;
+ --leo-color-primitive-yellow-35: #655000;
+ --leo-color-primitive-yellow-40: #745c00;
--leo-color-primitive-yellow-5: #1a1302;
- --leo-color-primitive-yellow-50: #8e6702;
- --leo-color-primitive-yellow-60: #ad7e08;
- --leo-color-primitive-yellow-70: #cb9b35;
- --leo-color-primitive-yellow-80: #e2c384;
+ --leo-color-primitive-yellow-50: #937502;
+ --leo-color-primitive-yellow-60: #b08c00;
+ --leo-color-primitive-yellow-70: #cfa608;
+ --leo-color-primitive-yellow-80: #f3c305;
--leo-color-primitive-yellow-90: #fae29f;
--leo-color-primitive-yellow-95: #fcf2d4;
--leo-color-primitive-yellow-98: #fdfaf0;
@@ -925,14 +889,6 @@
--leo-color-orange-50: var(--leo-color-primitive-orange-40);
--leo-color-orange-60: var(--leo-color-primitive-orange-25);
--leo-color-orange-70: var(--leo-color-primitive-orange-10);
- --leo-color-orange-vibrant-10: var(--leo-color-primitive-orange-vibrant-95);
- --leo-color-orange-vibrant-20: var(--leo-color-primitive-orange-vibrant-90);
- --leo-color-orange-vibrant-30: var(--leo-color-primitive-orange-vibrant-60);
- --leo-color-orange-vibrant-40: var(--leo-color-primitive-orange-vibrant-50);
- --leo-color-orange-vibrant-5: var(--leo-color-primitive-orange-vibrant-98);
- --leo-color-orange-vibrant-50: var(--leo-color-primitive-orange-vibrant-40);
- --leo-color-orange-vibrant-60: var(--leo-color-primitive-orange-vibrant-25);
- --leo-color-orange-vibrant-70: var(--leo-color-primitive-orange-vibrant-10);
--leo-color-page-background: var(--leo-color-primitive-neutral-98);
--leo-color-pink-10: var(--leo-color-primitive-pink-95);
--leo-color-pink-20: var(--leo-color-primitive-pink-90);
@@ -950,14 +906,6 @@
--leo-color-primary-50: var(--leo-color-primitive-primary-40);
--leo-color-primary-60: var(--leo-color-primitive-primary-25);
--leo-color-primary-70: var(--leo-color-primitive-primary-10);
- --leo-color-primary-vibrant-10: var(--leo-color-primitive-primary-vibrant-95);
- --leo-color-primary-vibrant-20: var(--leo-color-primitive-primary-vibrant-90);
- --leo-color-primary-vibrant-30: var(--leo-color-primitive-primary-vibrant-60);
- --leo-color-primary-vibrant-40: var(--leo-color-primitive-primary-vibrant-50);
- --leo-color-primary-vibrant-5: var(--leo-color-primitive-primary-vibrant-98);
- --leo-color-primary-vibrant-50: var(--leo-color-primitive-primary-vibrant-40);
- --leo-color-primary-vibrant-60: var(--leo-color-primitive-primary-vibrant-25);
- --leo-color-primary-vibrant-70: var(--leo-color-primitive-primary-vibrant-10);
--leo-color-private-window-10: var(--leo-color-primitive-private-window-95);
--leo-color-private-window-20: var(--leo-color-primitive-private-window-90);
--leo-color-private-window-30: var(--leo-color-primitive-private-window-60);
@@ -1229,14 +1177,6 @@
--leo-color-orange-50: var(--leo-color-primitive-orange-60);
--leo-color-orange-60: var(--leo-color-primitive-orange-80);
--leo-color-orange-70: var(--leo-color-primitive-orange-95);
- --leo-color-orange-vibrant-10: var(--leo-color-primitive-orange-vibrant-15);
- --leo-color-orange-vibrant-20: var(--leo-color-primitive-orange-vibrant-25);
- --leo-color-orange-vibrant-30: var(--leo-color-primitive-orange-vibrant-40);
- --leo-color-orange-vibrant-40: var(--leo-color-primitive-orange-vibrant-50);
- --leo-color-orange-vibrant-5: var(--leo-color-primitive-orange-vibrant-5);
- --leo-color-orange-vibrant-50: var(--leo-color-primitive-orange-vibrant-60);
- --leo-color-orange-vibrant-60: var(--leo-color-primitive-orange-vibrant-80);
- --leo-color-orange-vibrant-70: var(--leo-color-primitive-orange-vibrant-95);
--leo-color-page-background: var(--leo-color-primitive-neutral-5);
--leo-color-pink-10: var(--leo-color-primitive-pink-15);
--leo-color-pink-20: var(--leo-color-primitive-pink-25);
@@ -1254,14 +1194,6 @@
--leo-color-primary-50: var(--leo-color-primitive-primary-60);
--leo-color-primary-60: var(--leo-color-primitive-primary-80);
--leo-color-primary-70: var(--leo-color-primitive-primary-95);
- --leo-color-primary-vibrant-10: var(--leo-color-primitive-primary-vibrant-15);
- --leo-color-primary-vibrant-20: var(--leo-color-primitive-primary-vibrant-25);
- --leo-color-primary-vibrant-30: var(--leo-color-primitive-primary-vibrant-40);
- --leo-color-primary-vibrant-40: var(--leo-color-primitive-primary-vibrant-50);
- --leo-color-primary-vibrant-5: var(--leo-color-primitive-primary-vibrant-5);
- --leo-color-primary-vibrant-50: var(--leo-color-primitive-primary-vibrant-60);
- --leo-color-primary-vibrant-60: var(--leo-color-primitive-primary-vibrant-80);
- --leo-color-primary-vibrant-70: var(--leo-color-primitive-primary-vibrant-95);
--leo-color-private-window-10: var(--leo-color-primitive-private-window-15);
--leo-color-private-window-20: var(--leo-color-primitive-private-window-25);
--leo-color-private-window-30: var(--leo-color-primitive-private-window-40);
@@ -1564,14 +1496,6 @@
--leo-color-orange-50: var(--leo-color-primitive-orange-40);
--leo-color-orange-60: var(--leo-color-primitive-orange-25);
--leo-color-orange-70: var(--leo-color-primitive-orange-10);
- --leo-color-orange-vibrant-10: var(--leo-color-primitive-orange-vibrant-95);
- --leo-color-orange-vibrant-20: var(--leo-color-primitive-orange-vibrant-90);
- --leo-color-orange-vibrant-30: var(--leo-color-primitive-orange-vibrant-60);
- --leo-color-orange-vibrant-40: var(--leo-color-primitive-orange-vibrant-50);
- --leo-color-orange-vibrant-5: var(--leo-color-primitive-orange-vibrant-98);
- --leo-color-orange-vibrant-50: var(--leo-color-primitive-orange-vibrant-40);
- --leo-color-orange-vibrant-60: var(--leo-color-primitive-orange-vibrant-25);
- --leo-color-orange-vibrant-70: var(--leo-color-primitive-orange-vibrant-10);
--leo-color-page-background: var(--leo-color-primitive-neutral-98);
--leo-color-pink-10: var(--leo-color-primitive-pink-95);
--leo-color-pink-20: var(--leo-color-primitive-pink-90);
@@ -1589,14 +1513,6 @@
--leo-color-primary-50: var(--leo-color-primitive-primary-40);
--leo-color-primary-60: var(--leo-color-primitive-primary-25);
--leo-color-primary-70: var(--leo-color-primitive-primary-10);
- --leo-color-primary-vibrant-10: var(--leo-color-primitive-primary-vibrant-95);
- --leo-color-primary-vibrant-20: var(--leo-color-primitive-primary-vibrant-90);
- --leo-color-primary-vibrant-30: var(--leo-color-primitive-primary-vibrant-60);
- --leo-color-primary-vibrant-40: var(--leo-color-primitive-primary-vibrant-50);
- --leo-color-primary-vibrant-5: var(--leo-color-primitive-primary-vibrant-98);
- --leo-color-primary-vibrant-50: var(--leo-color-primitive-primary-vibrant-40);
- --leo-color-primary-vibrant-60: var(--leo-color-primitive-primary-vibrant-25);
- --leo-color-primary-vibrant-70: var(--leo-color-primitive-primary-vibrant-10);
--leo-color-private-window-10: var(--leo-color-primitive-private-window-95);
--leo-color-private-window-20: var(--leo-color-primitive-private-window-90);
--leo-color-private-window-30: var(--leo-color-primitive-private-window-60);
@@ -1866,14 +1782,6 @@
--leo-color-orange-50: var(--leo-color-primitive-orange-60);
--leo-color-orange-60: var(--leo-color-primitive-orange-80);
--leo-color-orange-70: var(--leo-color-primitive-orange-95);
- --leo-color-orange-vibrant-10: var(--leo-color-primitive-orange-vibrant-15);
- --leo-color-orange-vibrant-20: var(--leo-color-primitive-orange-vibrant-25);
- --leo-color-orange-vibrant-30: var(--leo-color-primitive-orange-vibrant-40);
- --leo-color-orange-vibrant-40: var(--leo-color-primitive-orange-vibrant-50);
- --leo-color-orange-vibrant-5: var(--leo-color-primitive-orange-vibrant-5);
- --leo-color-orange-vibrant-50: var(--leo-color-primitive-orange-vibrant-60);
- --leo-color-orange-vibrant-60: var(--leo-color-primitive-orange-vibrant-80);
- --leo-color-orange-vibrant-70: var(--leo-color-primitive-orange-vibrant-95);
--leo-color-page-background: var(--leo-color-primitive-neutral-5);
--leo-color-pink-10: var(--leo-color-primitive-pink-15);
--leo-color-pink-20: var(--leo-color-primitive-pink-25);
@@ -1891,14 +1799,6 @@
--leo-color-primary-50: var(--leo-color-primitive-primary-60);
--leo-color-primary-60: var(--leo-color-primitive-primary-80);
--leo-color-primary-70: var(--leo-color-primitive-primary-95);
- --leo-color-primary-vibrant-10: var(--leo-color-primitive-primary-vibrant-15);
- --leo-color-primary-vibrant-20: var(--leo-color-primitive-primary-vibrant-25);
- --leo-color-primary-vibrant-30: var(--leo-color-primitive-primary-vibrant-40);
- --leo-color-primary-vibrant-40: var(--leo-color-primitive-primary-vibrant-50);
- --leo-color-primary-vibrant-5: var(--leo-color-primitive-primary-vibrant-5);
- --leo-color-primary-vibrant-50: var(--leo-color-primitive-primary-vibrant-60);
- --leo-color-primary-vibrant-60: var(--leo-color-primitive-primary-vibrant-80);
- --leo-color-primary-vibrant-70: var(--leo-color-primitive-primary-vibrant-95);
--leo-color-private-window-10: var(--leo-color-primitive-private-window-15);
--leo-color-private-window-20: var(--leo-color-primitive-private-window-25);
--leo-color-private-window-30: var(--leo-color-primitive-private-window-40);
|
Update color values across src/tokens/universal.variables.json: revise many primitive color shades (red, orange, yellow, green, teal, blue, blurple, purple, pink, etc.), update dependent semantic tokens and referencedVariable mappings, and remove duplicated/old "primary-vibrant" and "orange-vibrant" vibrancy blocks. Syncs derived tokens (interactive, systemfeedback, button, brand mappings, etc.) with the new palette.