PHANTOM
🇮🇳 IN
Skip to content

Update universal color palette tokens#1312

Open
aguscruiz wants to merge 2 commits intomainfrom
updated-palette
Open

Update universal color palette tokens#1312
aguscruiz wants to merge 2 commits intomainfrom
updated-palette

Conversation

@aguscruiz
Copy link
Collaborator

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.

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.
@github-actions
Copy link
Contributor

[puLL-Merge] - brave/leo@1312

Description

This 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 primary-vibrant and orange-vibrant color palettes entirely (both primitives and their derived scale/scheme references). The updated colors generally shift toward higher saturation and purer hues, suggesting a design refresh to make the color palette more vivid. The primary-fixed brand token reference is also updated to match the new blurple.40 value.

Possible Issues

  1. Breaking change for consumers: Any downstream consumers referencing primary-vibrant or orange-vibrant tokens (e.g., $primitive.primary-vibrant.*, $primitive.orange-vibrant.*, or their scale equivalents) will break. This includes any platform-specific code (iOS, Android, web) that uses these tokens.

  2. Contrast ratio / accessibility concerns: Many colors have shifted significantly — for example, red.40 changed from #8c3b38 to #b4020e, and error backgrounds reference this value. The new more saturated colors (especially used for error-background, success-background, system feedback text/icons) should be verified against WCAG contrast requirements for both light and dark themes. Colors like the new yellow.80 (#f3c305 vs old #e2c384) used as warning-vibrant may have different contrast characteristics against light backgrounds.

  3. Duplicate values for purple and private-window: The private-window palette now has identical values to the purple palette (e.g., both 35: #6116c0, 40: #6f1bdb, 50: #8747f7, etc.). This may be intentional to simplify the system, but it removes visual differentiation between purple-themed and private-window-themed UI elements.

  4. Color consistency across duplicated sections: The primitive colors appear to be defined twice in the file (likely for light and dark theme primitives). The changes are applied consistently to both sections, but this duplication is fragile and error-prone.

Changes

Changes

  • src/tokens/universal.variables.json:
    • Primitive color updates (steps 35–80/90): Updated hex values across red, orange, yellow, green, teal, blue, blurple, purple, pink, private-window, and tor-window palettes. Colors are generally more saturated/vibrant.
    • Removed primary-vibrant palette: Deleted the entire primary-vibrant primitive (0–100 scale) and its corresponding light/dark theme scale mappings.
    • Removed orange-vibrant palette: Deleted the entire orange-vibrant primitive (0–100 scale) and its corresponding light/dark theme scale mappings.
    • Updated primary-fixed brand token: Changed from #424f8e to #434fcf to match new blurple.40.
    • Updated all derived semantic tokens: Light and dark theme schemes, system feedback colors, button colors, icon colors, and scale mappings all updated to reflect the new primitive values while maintaining the same referenced variable paths.
    • Blue.70 updated: In dark theme context, changed from #5ea3ff to #78abff.
    • Blurple.90 updated: Changed from #d5dcf6 to #dfe4f6 in both primitive and theme contexts.
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
Loading

@github-actions
Copy link
Contributor

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1312.pr.nala.bravesoftware.com/
✅ Commit preview: https://1312.pr.nala.bravesoftware.com/commit-80e11f6bd6d4a5a47b929bd5edf2fdac792ceafa/

- ./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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant