fix placeholder token

src/styles/brand/blue.css

@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-blue-95);
-  --wa-color-brand-90: var(--wa-color-blue-90);
-  --wa-color-brand-80: var(--wa-color-blue-80);
-  --wa-color-brand-70: var(--wa-color-blue-70);
-  --wa-color-brand-60: var(--wa-color-blue-60);
-  --wa-color-brand-50: var(--wa-color-blue-50);
-  --wa-color-brand-40: var(--wa-color-blue-40);
-  --wa-color-brand-30: var(--wa-color-blue-30);
-  --wa-color-brand-20: var(--wa-color-blue-20);
-  --wa-color-brand-10: var(--wa-color-blue-10);
-  --wa-color-brand-05: var(--wa-color-blue-05);
-  --wa-color-brand: var(--wa-color-blue);
-}

src/styles/brand/green.css

@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-green-95);
-  --wa-color-brand-90: var(--wa-color-green-90);
-  --wa-color-brand-80: var(--wa-color-green-80);
-  --wa-color-brand-70: var(--wa-color-green-70);
-  --wa-color-brand-60: var(--wa-color-green-60);
-  --wa-color-brand-50: var(--wa-color-green-50);
-  --wa-color-brand-40: var(--wa-color-green-40);
-  --wa-color-brand-30: var(--wa-color-green-30);
-  --wa-color-brand-20: var(--wa-color-green-20);
-  --wa-color-brand-10: var(--wa-color-green-10);
-  --wa-color-brand-05: var(--wa-color-green-05);
-  --wa-color-brand: var(--wa-color-green);
-}

src/styles/brand/indigo.css

@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-indigo-95);
-  --wa-color-brand-90: var(--wa-color-indigo-90);
-  --wa-color-brand-80: var(--wa-color-indigo-80);
-  --wa-color-brand-70: var(--wa-color-indigo-70);
-  --wa-color-brand-60: var(--wa-color-indigo-60);
-  --wa-color-brand-50: var(--wa-color-indigo-50);
-  --wa-color-brand-40: var(--wa-color-indigo-40);
-  --wa-color-brand-30: var(--wa-color-indigo-30);
-  --wa-color-brand-20: var(--wa-color-indigo-20);
-  --wa-color-brand-10: var(--wa-color-indigo-10);
-  --wa-color-brand-05: var(--wa-color-indigo-05);
-  --wa-color-brand: var(--wa-color-indigo);
-}

src/styles/brand/teal.css

@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-teal-95);
-  --wa-color-brand-90: var(--wa-color-teal-90);
-  --wa-color-brand-80: var(--wa-color-teal-80);
-  --wa-color-brand-70: var(--wa-color-teal-70);
-  --wa-color-brand-60: var(--wa-color-teal-60);
-  --wa-color-brand-50: var(--wa-color-teal-50);
-  --wa-color-brand-40: var(--wa-color-teal-40);
-  --wa-color-brand-30: var(--wa-color-teal-30);
-  --wa-color-brand-20: var(--wa-color-teal-20);
-  --wa-color-brand-10: var(--wa-color-teal-10);
-  --wa-color-brand-05: var(--wa-color-teal-05);
-  --wa-color-brand: var(--wa-color-teal);
-}

src/styles/brand/violet.css

@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-violet-95);
-  --wa-color-brand-90: var(--wa-color-violet-90);
-  --wa-color-brand-80: var(--wa-color-violet-80);
-  --wa-color-brand-70: var(--wa-color-violet-70);
-  --wa-color-brand-60: var(--wa-color-violet-60);
-  --wa-color-brand-50: var(--wa-color-violet-50);
-  --wa-color-brand-40: var(--wa-color-violet-40);
-  --wa-color-brand-30: var(--wa-color-violet-30);
-  --wa-color-brand-20: var(--wa-color-violet-20);
-  --wa-color-brand-10: var(--wa-color-violet-10);
-  --wa-color-brand-05: var(--wa-color-violet-05);
-  --wa-color-brand: var(--wa-color-violet);
-}

src/styles/themes/active/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/rudimentary.css');
 @import url('../default/color.css');
-@import url('../../brand/green.css');
 
 :where(:root),
 :host,
@@ -14,7 +13,7 @@
    * Foundational Colors
    */
   --wa-color-text-normal: var(--wa-color-gray-05);
-  --wa-color-text-link: var(--wa-color-brand-40);
+  --wa-color-text-link: var(--wa-color-green-40);
 
   --wa-color-focus: var(--wa-color-blue-60);
 
@@ -24,14 +23,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-70);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-green-95);
+  --wa-color-brand-fill-normal: var(--wa-color-green-90);
+  --wa-color-brand-fill-loud: var(--wa-color-green-80);
+  --wa-color-brand-border-quiet: var(--wa-color-green-90);
+  --wa-color-brand-border-normal: var(--wa-color-green-80);
+  --wa-color-brand-border-loud: var(--wa-color-green-70);
+  --wa-color-brand-on-quiet: var(--wa-color-green-40);
+  --wa-color-brand-on-normal: var(--wa-color-green-30);
   --wa-color-brand-on-loud: black;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -83,19 +82,19 @@
    */
   --wa-color-surface-lowered: black;
 
-  --wa-color-text-link: var(--wa-color-brand-70);
+  --wa-color-text-link: var(--wa-color-green-70);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-border-normal: var(--wa-color-brand-30);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
-  --wa-color-brand-on-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
+  --wa-color-brand-fill-normal: var(--wa-color-green-20);
+  --wa-color-brand-fill-loud: var(--wa-color-green-80);
+  --wa-color-brand-border-quiet: var(--wa-color-green-20);
+  --wa-color-brand-border-normal: var(--wa-color-green-30);
+  --wa-color-brand-border-loud: var(--wa-color-green-60);
+  --wa-color-brand-on-quiet: var(--wa-color-green-80);
+  --wa-color-brand-on-normal: var(--wa-color-green-90);
   --wa-color-brand-on-loud: black;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-10);

src/styles/themes/awesome/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/bright.css');
 @import url('../default/color.css');
-@import url('../../brand/blue.css');
 
 :where(:root),
 :host,
@@ -15,14 +14,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-70);
-  --wa-color-brand-border-normal: var(--wa-color-brand-50);
-  --wa-color-brand-border-loud: var(--wa-color-brand-30);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-70);
+  --wa-color-brand-border-normal: var(--wa-color-blue-50);
+  --wa-color-brand-border-loud: var(--wa-color-blue-30);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-40);
   --wa-color-brand-on-loud: var(--wa-color-text-normal);
 
   --wa-color-success-fill-quiet: var(--wa-color-teal-95);
@@ -75,14 +74,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
-  --wa-color-brand-border-normal: var(--wa-color-brand-50);
-  --wa-color-brand-border-loud: var(--wa-color-brand-80);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
-  --wa-color-brand-on-normal: var(--wa-color-brand-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
+  --wa-color-brand-border-normal: var(--wa-color-blue-50);
+  --wa-color-brand-border-loud: var(--wa-color-blue-80);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-70);
+  --wa-color-brand-on-normal: var(--wa-color-blue-80);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-teal-10);

src/styles/themes/brutalist/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/default.css');
 @import url('../default/color.css');
-@import url('../../brand/blue.css');
 
 :where(:root),
 :host,
@@ -22,14 +21,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
-  --wa-color-brand-border-normal: var(--wa-color-brand-60);
-  --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-80);
+  --wa-color-brand-border-normal: var(--wa-color-blue-60);
+  --wa-color-brand-border-loud: var(--wa-color-blue-40);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-40);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -94,15 +93,15 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
-  --wa-color-brand-border-normal: var(--wa-color-brand-40);
-  --wa-color-brand-border-loud: var(--wa-color-brand-80);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
-  --wa-color-brand-on-normal: var(--wa-color-brand-95);
-  --wa-color-brand-on-loud: var(--wa-color-brand-10);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-20);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-30);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
+  --wa-color-brand-border-normal: var(--wa-color-blue-40);
+  --wa-color-brand-border-loud: var(--wa-color-blue-80);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-80);
+  --wa-color-brand-on-normal: var(--wa-color-blue-95);
+  --wa-color-brand-on-loud: var(--wa-color-blue-10);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);
   --wa-color-success-fill-normal: var(--wa-color-green-30);

src/styles/themes/classic/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/classic.css');
 @import url('../default/color.css');
-@import url('../../brand/blue.css');
 
 :where(:root),
 :host,
@@ -12,14 +11,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-50);
-  --wa-color-brand-on-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
+  --wa-color-brand-border-normal: var(--wa-color-blue-80);
+  --wa-color-brand-border-loud: var(--wa-color-blue-60);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-50);
+  --wa-color-brand-on-normal: var(--wa-color-blue-40);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -74,14 +73,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
-  --wa-color-brand-border-normal: var(--wa-color-brand-40);
-  --wa-color-brand-border-loud: var(--wa-color-brand-50);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
-  --wa-color-brand-on-normal: var(--wa-color-brand-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-20);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-30);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
+  --wa-color-brand-border-normal: var(--wa-color-blue-40);
+  --wa-color-brand-border-loud: var(--wa-color-blue-50);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-70);
+  --wa-color-brand-on-normal: var(--wa-color-blue-80);
   --wa-color-brand-on-loud: var(--wa-color-gray-10);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);

src/styles/themes/default/color.css

@@ -1,5 +1,3 @@
-@import url('../../brand/blue.css');
-
 /**
  * Foundational Colors and Semantic Colors
  */
@@ -27,7 +25,7 @@
    * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
   --wa-color-text-normal: var(--wa-color-gray-10);
   --wa-color-text-quiet: var(--wa-color-gray-40);
-  --wa-color-text-link: var(--wa-color-brand-40);
+  --wa-color-text-link: var(--wa-color-blue-40);
 
   /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
   --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
@@ -44,7 +42,7 @@
 
   /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
    * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-blue-60);
 
   /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
   --wa-color-mix-hover: black 10%;
@@ -59,14 +57,14 @@
    *  *  On for content displayed on a fill with the corresponding attention
    * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
+  --wa-color-brand-border-normal: var(--wa-color-blue-80);
+  --wa-color-brand-border-loud: var(--wa-color-blue-60);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -127,7 +125,7 @@
 
   --wa-color-text-normal: var(--wa-color-gray-95);
   --wa-color-text-quiet: var(--wa-color-gray-60);
-  --wa-color-text-link: var(--wa-color-brand-70);
+  --wa-color-text-link: var(--wa-color-blue-70);
 
   --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
   --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
@@ -139,7 +137,7 @@
     transparent
   );
 
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-blue-60);
 
   --wa-color-mix-hover: black 8%;
   --wa-color-mix-active: black 16%;
@@ -147,14 +145,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-border-normal: var(--wa-color-brand-30);
-  --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
-  --wa-color-brand-on-normal: var(--wa-color-brand-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-20);
+  --wa-color-brand-border-normal: var(--wa-color-blue-30);
+  --wa-color-brand-border-loud: var(--wa-color-blue-40);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-60);
+  --wa-color-brand-on-normal: var(--wa-color-blue-70);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-10);

src/styles/themes/glossy/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/elegant.css');
 @import url('../default/color.css');
-@import url('../../brand/indigo.css');
 
 :where(:root),
 :host,
@@ -10,21 +9,21 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-link: var(--wa-color-brand-40);
+  --wa-color-text-link: var(--wa-color-indigo-40);
 
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-indigo-60);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-loud: var(--wa-color-green-40);
@@ -42,21 +41,21 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-link: var(--wa-color-brand-70);
+  --wa-color-text-link: var(--wa-color-indigo-70);
 
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-indigo-60);
 
   /**
     * Semantic Colors
     */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-border-normal: var(--wa-color-brand-30);
-  --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
-  --wa-color-brand-on-normal: var(--wa-color-brand-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-loud: var(--wa-color-green-40);

src/styles/themes/matter/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/mild.css');
 @import url('../default/color.css');
-@import url('../../brand/indigo.css');
 
 :where(:root),
 :host,
@@ -14,14 +13,14 @@
    * Foundational Colors
    */
 
-  --wa-color-surface-raised: var(--wa-color-brand-95);
+  --wa-color-surface-raised: var(--wa-color-indigo-95);
   --wa-color-surface-lowered: var(--wa-color-gray-90);
 
-  --wa-color-text-link: var(--wa-color-brand-40);
+  --wa-color-text-link: var(--wa-color-indigo-40);
 
   --wa-color-shadow: rgb(0 0 0 / 0.3);
 
-  --wa-color-focus: var(--wa-color-brand-40);
+  --wa-color-focus: var(--wa-color-indigo-40);
 
   --wa-color-mix-hover: white 5%;
   --wa-color-mix-active: white 10%;
@@ -29,14 +28,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-50);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-50);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -86,21 +85,21 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-link: var(--wa-color-brand-70);
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-text-link: var(--wa-color-indigo-70);
+  --wa-color-focus: var(--wa-color-indigo-60);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-border-normal: var(--wa-color-brand-30);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
-  --wa-color-brand-on-normal: var(--wa-color-brand-80);
-  --wa-color-brand-on-loud: var(--wa-color-brand-10);
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-20);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-70);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-70);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-80);
+  --wa-color-brand-on-loud: var(--wa-color-indigo-10);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);
   --wa-color-success-fill-normal: var(--wa-color-green-30);

src/styles/themes/mellow/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/natural.css');
 @import url('../default/color.css');
-@import url('../../brand/blue.css');
 
 :where(:root),
 :host,
@@ -18,23 +17,23 @@
   --wa-color-surface-lowered: var(--wa-color-gray-90);
   --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-80), transparent);
 
-  --wa-color-text-normal: var(--wa-color-brand-20);
-  --wa-color-text-quiet: var(--wa-color-brand-40);
-  --wa-color-text-link: var(--wa-color-brand-40);
+  --wa-color-text-normal: var(--wa-color-blue-20);
+  --wa-color-text-quiet: var(--wa-color-blue-40);
+  --wa-color-text-link: var(--wa-color-blue-40);
 
-  --wa-color-focus: var(--wa-color-brand-50);
+  --wa-color-focus: var(--wa-color-blue-50);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-80);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
-  --wa-color-brand-border-normal: var(--wa-color-brand-70);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-90);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-80);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-40);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-80);
+  --wa-color-brand-border-normal: var(--wa-color-blue-70);
+  --wa-color-brand-border-loud: var(--wa-color-blue-60);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-90);
@@ -86,8 +85,8 @@
    */
   --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
 
-  --wa-color-text-normal: var(--wa-color-brand-90);
-  --wa-color-text-quiet: var(--wa-color-brand-70);
+  --wa-color-text-normal: var(--wa-color-blue-90);
+  --wa-color-text-quiet: var(--wa-color-blue-70);
 
   /**
    * Semantic Colors

src/styles/themes/playful/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/rudimentary.css');
 @import url('../default/color.css');
-@import url('../../brand/violet.css');
 
 :where(:root),
 :host,
@@ -14,19 +13,19 @@
 
   --wa-color-text-link: var(--wa-color-yellow-40);
 
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-violet-60);
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-80);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-70);
-  --wa-color-brand-border-loud: var(--wa-color-brand-50);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-30);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-violet-90);
+  --wa-color-brand-fill-normal: var(--wa-color-violet-80);
+  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
+  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
+  --wa-color-brand-border-normal: var(--wa-color-violet-70);
+  --wa-color-brand-border-loud: var(--wa-color-violet-50);
+  --wa-color-brand-on-quiet: var(--wa-color-violet-30);
+  --wa-color-brand-on-normal: var(--wa-color-violet-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-90);
@@ -85,21 +84,21 @@
   --wa-color-text-quiet: var(--wa-color-gray-60);
   --wa-color-text-link: var(--wa-color-yellow-80);
 
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-violet-60);
 
   --wa-color-mix-hover: white 10%;
 
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-40);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
-  --wa-color-brand-border-normal: var(--wa-color-brand-40);
-  --wa-color-brand-border-loud: var(--wa-color-brand-50);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
-  --wa-color-brand-on-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-quiet: var(--wa-color-violet-20);
+  --wa-color-brand-fill-normal: var(--wa-color-violet-40);
+  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
+  --wa-color-brand-border-quiet: var(--wa-color-violet-30);
+  --wa-color-brand-border-normal: var(--wa-color-violet-40);
+  --wa-color-brand-border-loud: var(--wa-color-violet-50);
+  --wa-color-brand-on-quiet: var(--wa-color-violet-70);
+  --wa-color-brand-on-normal: var(--wa-color-violet-90);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);

src/styles/themes/premium/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/anodized.css');
 @import url('../default/color.css');
-@import url('../../brand/teal.css');
 
 :where(:root),
 :host,
@@ -12,9 +11,9 @@
    */
   --wa-color-surface-border: var(--wa-color-gray-80);
 
-  --wa-color-text-link: var(--wa-color-brand-40);
+  --wa-color-text-link: var(--wa-color-teal-40);
 
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-teal-60);
 
   --wa-color-mix-hover: white 10%;
   --wa-color-mix-active: var(--wa-color-surface-default) 5%;
@@ -22,15 +21,15 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
-  --wa-color-brand-border-normal: var(--wa-color-brand-70);
-  --wa-color-brand-border-loud: var(--wa-color-brand-50);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
-  --wa-color-brand-on-loud: var(--wa-color-brand-20);
+  --wa-color-brand-fill-quiet: var(--wa-color-teal-95);
+  --wa-color-brand-fill-normal: var(--wa-color-teal-90);
+  --wa-color-brand-fill-loud: var(--wa-color-teal-80);
+  --wa-color-brand-border-quiet: var(--wa-color-teal-80);
+  --wa-color-brand-border-normal: var(--wa-color-teal-70);
+  --wa-color-brand-border-loud: var(--wa-color-teal-50);
+  --wa-color-brand-on-quiet: var(--wa-color-teal-40);
+  --wa-color-brand-on-normal: var(--wa-color-teal-30);
+  --wa-color-brand-on-loud: var(--wa-color-teal-20);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
   --wa-color-success-fill-normal: var(--wa-color-green-90);
@@ -86,9 +85,9 @@
 
   --wa-color-text-normal: var(--wa-color-gray-95);
   --wa-color-text-quiet: var(--wa-color-gray-80);
-  --wa-color-text-link: var(--wa-color-brand-80);
+  --wa-color-text-link: var(--wa-color-teal-80);
 
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-teal-60);
 
   --wa-color-mix-hover: white 20%;
   --wa-color-mix-active: var(--wa-color-surface-default) 10%;
@@ -96,15 +95,15 @@
   /**
     * Semantic Colors
     */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-30);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-40);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
-  --wa-color-brand-border-normal: var(--wa-color-brand-40);
-  --wa-color-brand-border-loud: var(--wa-color-brand-70);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
-  --wa-color-brand-on-normal: var(--wa-color-brand-90);
-  --wa-color-brand-on-loud: var(--wa-color-brand-20);
+  --wa-color-brand-fill-quiet: var(--wa-color-teal-30);
+  --wa-color-brand-fill-normal: var(--wa-color-teal-40);
+  --wa-color-brand-fill-loud: var(--wa-color-teal-80);
+  --wa-color-brand-border-quiet: var(--wa-color-teal-30);
+  --wa-color-brand-border-normal: var(--wa-color-teal-40);
+  --wa-color-brand-border-loud: var(--wa-color-teal-70);
+  --wa-color-brand-on-quiet: var(--wa-color-teal-70);
+  --wa-color-brand-on-normal: var(--wa-color-teal-90);
+  --wa-color-brand-on-loud: var(--wa-color-teal-20);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-30);
   --wa-color-success-fill-normal: var(--wa-color-green-40);

src/styles/themes/tailspin/color.css

@@ -1,6 +1,5 @@
 @import url('../../color/vogue.css');
 @import url('../default/color.css');
-@import url('../../brand/indigo.css');
 
 :where(:root),
 :host,
@@ -10,11 +9,11 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-link: var(--wa-color-brand-40);
+  --wa-color-text-link: var(--wa-color-indigo-40);
 
   --wa-color-shadow: rgb(0 0 0 / 0.05);
 
-  --wa-color-focus: var(--wa-color-brand-50);
+  --wa-color-focus: var(--wa-color-indigo-50);
 
   --wa-color-mix-hover: var(--wa-color-gray-80) 20%;
   --wa-color-mix-active: var(--wa-color-gray-80) 10%;
@@ -22,14 +21,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
-  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
-  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
-  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-95) 85%, transparent);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-80), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-70) 60%, transparent);
+  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-60) 70%, transparent);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
@@ -89,11 +88,11 @@
 
   --wa-color-text-normal: white;
   --wa-color-text-quiet: var(--wa-color-gray-60);
-  --wa-color-text-link: var(--wa-color-brand-70);
+  --wa-color-text-link: var(--wa-color-indigo-70);
 
   --wa-color-shadow: rgb(0 0 0 / 0.2);
 
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-indigo-60);
 
   --wa-color-mix-hover: var(--wa-color-gray-70) 20%;
   --wa-color-mix-active: var(--wa-color-gray-70) 10%;
@@ -101,14 +100,14 @@
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
-  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
-  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
-  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
-  --wa-color-brand-on-normal: var(--wa-color-brand-70);
+  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-10) 90%, transparent);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-50);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-20), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-30), transparent);
+  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-40), transparent);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
   --wa-color-brand-on-loud: white;
 
   --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);