From e6c662b543e13ef621d1d4129ecdf9cb4d539275 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 5 Mar 2025 13:38:01 -0500
Subject: [PATCH 01/25] `tintless.js` -> `postprocess.js`

---
 src/styles/color/scripts/{tintless.js => postprocess.js} | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
 rename src/styles/color/scripts/{tintless.js => postprocess.js} (93%)

diff --git a/src/styles/color/scripts/tintless.js b/src/styles/color/scripts/postprocess.js
similarity index 93%
rename from src/styles/color/scripts/tintless.js
rename to src/styles/color/scripts/postprocess.js
index 4277a2400..0e7df65cf 100644
--- a/src/styles/color/scripts/tintless.js
+++ b/src/styles/color/scripts/postprocess.js
@@ -1,12 +1,12 @@
 /**
- * Add tintless variables and OKLCH coords as comments to palette CSS files.
- * Run via node tintless.js
+ * Post-process palette CSS files to add core colors, oklch coordinates etc.
+ * Run via node postprocess.js
  * Warning: Will overwrite existing files. Check the diff before committing!
  */
 import chalk from 'chalk';
 import fs from 'fs';
 import path from 'path';
-import palettes, { rawPalettes } from './palettes-analyzed.js';
+import palettes from './palettes-analyzed.js';
 import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
 
 const selector = paletteId =>

From e0fc63922692317e25b76ca42af2c08175ba6156 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 5 Mar 2025 13:38:32 -0500
Subject: [PATCH 02/25] Only use hex when color is within sRGB

---
 src/styles/color/scripts/postprocess.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/color/scripts/postprocess.js b/src/styles/color/scripts/postprocess.js
index 0e7df65cf..d36661e58 100644
--- a/src/styles/color/scripts/postprocess.js
+++ b/src/styles/color/scripts/postprocess.js
@@ -41,9 +41,9 @@ for (let paletteId in palettes) {
 
       let color = tints[tint];
       tint = tint.padStart(2, '0');
+      let format = color.inGamut('srgb') ? 'hex' : undefined;
 
-      tintCSS =
-        `--wa-color-${hue}-${tint}: ${color.toString({ format: 'hex' })} /* ${color.toString()} */;\n` + tintCSS;
+      tintCSS = `--wa-color-${hue}-${tint}: ${color.toString({ format })} /* ${color.toString()} */;\n` + tintCSS;
     }
 
     if (tints.maxChromaTint != tints.maxChromaTintRaw) {

From db08e12a32cbeb1331b21a4701e3f1d6f35f161b Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 5 Mar 2025 13:42:23 -0500
Subject: [PATCH 03/25] Pave the way for being able to have core colors that
 are not mapped to any tint

---
 src/styles/color/scripts/palettes-analyzed.js | 31 ++++++++++++-------
 src/styles/color/scripts/palettes.js          | 24 +++++++++++---
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/styles/color/scripts/palettes-analyzed.js b/src/styles/color/scripts/palettes-analyzed.js
index 45430a753..d296b6457 100644
--- a/src/styles/color/scripts/palettes-analyzed.js
+++ b/src/styles/color/scripts/palettes-analyzed.js
@@ -24,15 +24,22 @@ for (let paletteId in palettes) {
   palettes[paletteId] = tokens;
 
   for (let hue in tokens) {
-    let tints = Object.assign({}, tokens[hue]);
-    tokens[hue] = tints;
+    let scale = Object.assign({}, tokens[hue]);
+    tokens[hue] = scale;
 
-    let maxChromaTint = DEFAULT_ACCENT;
-    let maxChroma = tints[DEFAULT_ACCENT].c || 0;
+    let maxChromaTint = DEFAULT_ACCENT; // TODO handle scale.core
+    let maxChroma = scale.core?.get('oklch.c') ?? (scale[DEFAULT_ACCENT].c || 0);
 
-    for (let tint in tints) {
-      let color = tints[tint].to('oklch');
-      tints[tint] = color;
+    for (let tint in scale) {
+      let color = scale[tint];
+
+      if (!color || color.constructor.name !== 'Color') {
+        // Not a color
+        continue;
+      }
+
+      color = color.to('oklch');
+      scale[tint] = color;
 
       if (tint === '05') {
         // The object has both '5' and '05' keys, but '05' is out of order
@@ -47,14 +54,14 @@ for (let paletteId in palettes) {
       }
     }
 
-    tints['05'] = tints['5'];
+    scale['05'] = scale['5'];
 
-    tints.maxChroma = tints.maxChromaRaw = maxChroma;
-    tints.maxChromaTint = tints.maxChromaTintRaw = maxChromaTint;
+    scale.maxChroma = scale.maxChromaRaw = maxChroma;
+    scale.maxChromaTint = scale.maxChromaTintRaw = maxChromaTint;
 
     if (maxChromaTint < MIN_ACCENT || maxChromaTint > MAX_ACCENT) {
-      tints.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT);
-      tints.maxChroma = tints[maxChromaTint].c;
+      scale.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT);
+      scale.maxChroma = scale[maxChromaTint].c;
     }
   }
 }
diff --git a/src/styles/color/scripts/palettes.js b/src/styles/color/scripts/palettes.js
index 1507b58d0..588807a1c 100644
--- a/src/styles/color/scripts/palettes.js
+++ b/src/styles/color/scripts/palettes.js
@@ -10,7 +10,7 @@ import { PALETTE_DIR } from './util.js';
 
 export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css'));
 export const declarationRegex =
-  /^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
+  /^\s*--wa-color-(?<hue>[a-z]+)(?:-(?<level>[0-9]+|key))?:\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
 export const rawCSS = {};
 
 function parse(contents, file) {
@@ -24,8 +24,24 @@ function parse(contents, file) {
   const ret = {};
 
   for (let match of matches) {
-    let { hue, level, color } = match.groups;
+    let { hue, level = '', color } = match.groups;
     ret[hue] ??= {};
+    let scale = ret[hue];
+
+    if (level === 'key') {
+      scale.maxChromaTint = color;
+      continue;
+    }
+
+    if (!level) {
+      if (color.startsWith('var(')) {
+        // Core color aliased to another color, ignore
+        continue;
+      } else {
+        // Custom core color
+        level = 'core';
+      }
+    }
 
     // Attempt to convert color to Color object, fall back to string if this fails
     // This will happen for e.g. colors defined via color-mix()
@@ -38,13 +54,13 @@ function parse(contents, file) {
     if (level.startsWith('0')) {
       // Leading zeroes throw off sorting, add both properties
       // NOTE: Ideally one of the two would be added as non-enumerable, but then we cannot access it via 11ty data
-      ret[hue][level] = color;
+      scale[level] = color;
 
       // Drop leading zeroes
       level = level.replace(/^0+/, '');
     }
 
-    ret[hue][level] = color;
+    scale[level] = color;
   }
 
   return ret;

From 5f672aabc20db61b2bad6cd7a88af8efb695a1d4 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 5 Mar 2025 13:46:31 -0500
Subject: [PATCH 04/25] Refactor: variable rename for consistency

---
 src/styles/color/scripts/postprocess.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/styles/color/scripts/postprocess.js b/src/styles/color/scripts/postprocess.js
index d36661e58..f803c7622 100644
--- a/src/styles/color/scripts/postprocess.js
+++ b/src/styles/color/scripts/postprocess.js
@@ -22,35 +22,35 @@ let issueCount = 0;
 let issuePaletteCount = 0;
 
 for (let paletteId in palettes) {
-  const tokens = palettes[paletteId];
+  const palette = palettes[paletteId];
 
   let css = '';
   let prefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
 
-  for (let hue in tokens) {
-    let tints = tokens[hue];
+  for (let hue in palette) {
+    let scale = palette[hue];
 
     let tintCSS = '';
 
-    for (let tint in tints) {
+    for (let tint in scale) {
       if (tint === '05' || !(tint > 0)) {
         // The object has both '5' and '05' keys, but '05' is out of order
         // Also ignore non-tints
         continue;
       }
 
-      let color = tints[tint];
+      let color = scale[tint];
       tint = tint.padStart(2, '0');
       let format = color.inGamut('srgb') ? 'hex' : undefined;
 
       tintCSS = `--wa-color-${hue}-${tint}: ${color.toString({ format })} /* ${color.toString()} */;\n` + tintCSS;
     }
 
-    if (tints.maxChromaTint != tints.maxChromaTintRaw) {
+    if (scale.maxChromaTint != scale.maxChromaTintRaw) {
       let huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
 
       console.warn(
-        `${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(tints.maxChromaTint)}, but peak chroma is in ${chalk.bold(tints.maxChromaTintRaw)} (${formatComparison(tints[tints.maxChromaTintRaw].c, tints[tints.maxChromaTint].c)})`,
+        `${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(scale.maxChromaTint)}, but peak chroma is in ${chalk.bold(scale.maxChromaTintRaw)} (${formatComparison(scale[scale.maxChromaTintRaw].c, scale[scale.maxChromaTint].c)})`,
       );
       issueCount++;
 
@@ -63,8 +63,8 @@ for (let paletteId in palettes) {
       }
     }
 
-    tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${tints.maxChromaTint});\n`;
-    tintCSS += `--wa-color-${hue}-key: ${tints.maxChromaTint};\n`;
+    tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});\n`;
+    tintCSS += `--wa-color-${hue}-key: ${scale.maxChromaTint};\n`;
     css += tintCSS + '\n';
   }
 

From 1d14e186f339d32eb7cdf3ee317e8e211498f81d Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 5 Mar 2025 14:16:33 -0500
Subject: [PATCH 05/25] Generate missing hues from neighboring hues

---
 src/styles/color/scripts/postprocess.js | 119 ++++++++++++++++++------
 1 file changed, 89 insertions(+), 30 deletions(-)

diff --git a/src/styles/color/scripts/postprocess.js b/src/styles/color/scripts/postprocess.js
index f803c7622..b42acaf8d 100644
--- a/src/styles/color/scripts/postprocess.js
+++ b/src/styles/color/scripts/postprocess.js
@@ -9,6 +9,12 @@ import path from 'path';
 import palettes from './palettes-analyzed.js';
 import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
 
+// TODO import from global data file instead of duplicating this data
+const hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
+const huesChromatic = hues.slice(0, -1);
+
+/** If a hue is missing, how should it be generated from the neighboring hues? */
+const mixPercentage = { orange: 0.7 };
 const selector = paletteId =>
   [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
     ',\n',
@@ -18,20 +24,19 @@ const selector = paletteId =>
 const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0);
 const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0);
 
-let issueCount = 0;
-let issuePaletteCount = 0;
+const indent = '  ';
+
+const paletteIssues = { total: 0 };
 
 for (let paletteId in palettes) {
   const palette = palettes[paletteId];
 
-  let css = '';
-  let prefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
+  let paletteCSS = '';
+  let hueCSS = Object.fromEntries(hues.map(hue => [hue, '']));
 
   for (let hue in palette) {
     let scale = palette[hue];
 
-    let tintCSS = '';
-
     for (let tint in scale) {
       if (tint === '05' || !(tint > 0)) {
         // The object has both '5' and '05' keys, but '05' is out of order
@@ -40,41 +45,95 @@ for (let paletteId in palettes) {
       }
 
       let color = scale[tint];
-      tint = tint.padStart(2, '0');
-      let format = color.inGamut('srgb') ? 'hex' : undefined;
-
-      tintCSS = `--wa-color-${hue}-${tint}: ${color.toString({ format })} /* ${color.toString()} */;\n` + tintCSS;
+      hueCSS[hue] = declareColor(color, hue, tint) + '\n' + hueCSS[hue];
     }
 
     if (scale.maxChromaTint != scale.maxChromaTintRaw) {
-      let huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
-
-      console.warn(
-        `${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(scale.maxChromaTint)}, but peak chroma is in ${chalk.bold(scale.maxChromaTintRaw)} (${formatComparison(scale[scale.maxChromaTintRaw].c, scale[scale.maxChromaTint].c)})`,
+      reportPaletteIssue(
+        `Clamping accent color to ${chalk.bold(scale.maxChromaTint)}, but peak chroma is in ${chalk.bold(scale.maxChromaTintRaw)} (${formatComparison(scale[scale.maxChromaTintRaw].c, scale[scale.maxChromaTint].c)})`,
+        { paletteId, hue: hue },
       );
-      issueCount++;
-
-      if (prefix.trim()) {
-        // First time encountering an issue with this palette
-        issuePaletteCount++;
-
-        // Don't print palette id multiple times
-        prefix = ' '.repeat(paletteIdMaxChars + 2);
-      }
     }
 
-    tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});\n`;
-    tintCSS += `--wa-color-${hue}-key: ${scale.maxChromaTint};\n`;
-    css += tintCSS + '\n';
+    hueCSS[hue] += `--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});\n`;
+    hueCSS[hue] += `--wa-color-${hue}-key: ${scale.maxChromaTint};\n`;
   }
 
-  let indent = '  ';
-  css = `${selector(paletteId)} {\n${css.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
+  // Generate missing hues
+  for (let i = 0; i < hues.length; i++) {
+    let hue = hues[i];
+    if (hueCSS[hue]) {
+      continue;
+    }
 
-  fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), css, 'utf8');
+    // Find previous and next hue to interpolate
+    // We assume gaps will always be at most 1 hue wide
+    let prevHue = huesChromatic[i - 1] ?? huesChromatic.at(-1);
+    let nextHue = huesChromatic[i + 1] ?? huesChromatic[0];
+
+    reportPaletteIssue(`Missing hue ${hue}. Generating from ${prevHue} and ${nextHue}`, { paletteId, hue });
+
+    for (let tint in palette[prevHue]) {
+      if (tint === '05' || !(tint > 0)) {
+        continue;
+      }
+
+      let prevColor = palette[prevHue][tint];
+      let nextColor = palette[nextHue][tint];
+
+      let color = prevColor.mix(nextColor, mixPercentage[hue] ?? 0.5, { space: 'oklch' });
+      hueCSS[hue] = declareColor(color, hue, tint) + '\n' + hueCSS[hue];
+    }
+  }
+
+  hueCSS = Object.values(hueCSS).join('\n');
+  // TODO apply Prettier instead of faking it
+  paletteCSS = `${selector(paletteId)} {\n${hueCSS.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
+
+  fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), paletteCSS, 'utf8');
 }
 
+let issuePaletteCount = Object.keys(paletteIssues).length;
 console.info(
   `🎨 Wrote ${Object.keys(palettes).length} palette files.` +
-    (issueCount > 0 ? ` ${chalk.bold(issueCount)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` : ''),
+    (paletteIssues.total > 0
+      ? ` ${chalk.bold(paletteIssues.total)} issues found across ${chalk.bold(issuePaletteCount)} palettes.`
+      : ''),
 );
+
+function reportPaletteIssue(issue, { paletteId, hue }) {
+  let palettePrefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
+
+  if (!paletteIssues[paletteId]) {
+    // First time encountering an issue with this palette
+    paletteIssues[paletteId] = { count: 0 };
+  } else {
+    // Don't print palette id multiple times
+    palettePrefix = ' '.repeat(paletteIdMaxChars + 2);
+  }
+
+  paletteIssues[paletteId].count++;
+  paletteIssues.total++;
+
+  let msg = palettePrefix;
+  let huePrefix = '';
+
+  if (hue) {
+    huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
+  }
+
+  console.warn(`${msg}${huePrefix}${issue}`);
+}
+
+function declareColor(color, hue, tint) {
+  tint = tint.padStart(2, '0');
+  let ret = `--wa-color-${hue}-${tint}: `;
+
+  if (color.inGamut('srgb')) {
+    ret += `${color.toString({ format: 'hex' })} /* ${color.toString()} */;`;
+  } else {
+    ret += `${color.toString()};`;
+  }
+
+  return ret;
+}

From 58ed88bc5a54d0afa77c90c628b5961834d1993f Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 5 Mar 2025 14:16:40 -0500
Subject: [PATCH 06/25] Add orange to list of hues

---
 docs/_data/hues.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_data/hues.json b/docs/_data/hues.json
index e4555ff72..2e68ebe4b 100644
--- a/docs/_data/hues.json
+++ b/docs/_data/hues.json
@@ -1 +1 @@
-["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]
+["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]

From be00026cd3901c5e1081ff1ad85cd496a71f6e3a Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 5 Mar 2025 14:18:15 -0500
Subject: [PATCH 07/25] Update postprocess.js

---
 src/styles/color/scripts/postprocess.js | 63 +++++++++++++++++--------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/styles/color/scripts/postprocess.js b/src/styles/color/scripts/postprocess.js
index b42acaf8d..053f26173 100644
--- a/src/styles/color/scripts/postprocess.js
+++ b/src/styles/color/scripts/postprocess.js
@@ -14,7 +14,7 @@ const hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'pur
 const huesChromatic = hues.slice(0, -1);
 
 /** If a hue is missing, how should it be generated from the neighboring hues? */
-const mixPercentage = { orange: 0.7 };
+const mixPercentage = { orange: 0.6 };
 const selector = paletteId =>
   [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
     ',\n',
@@ -37,17 +37,6 @@ for (let paletteId in palettes) {
   for (let hue in palette) {
     let scale = palette[hue];
 
-    for (let tint in scale) {
-      if (tint === '05' || !(tint > 0)) {
-        // The object has both '5' and '05' keys, but '05' is out of order
-        // Also ignore non-tints
-        continue;
-      }
-
-      let color = scale[tint];
-      hueCSS[hue] = declareColor(color, hue, tint) + '\n' + hueCSS[hue];
-    }
-
     if (scale.maxChromaTint != scale.maxChromaTintRaw) {
       reportPaletteIssue(
         `Clamping accent color to ${chalk.bold(scale.maxChromaTint)}, but peak chroma is in ${chalk.bold(scale.maxChromaTintRaw)} (${formatComparison(scale[scale.maxChromaTintRaw].c, scale[scale.maxChromaTint].c)})`,
@@ -55,13 +44,13 @@ for (let paletteId in palettes) {
       );
     }
 
-    hueCSS[hue] += `--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});\n`;
-    hueCSS[hue] += `--wa-color-${hue}-key: ${scale.maxChromaTint};\n`;
+    hueCSS[hue] += scaleCSS(hue, scale);
   }
 
   // Generate missing hues
   for (let i = 0; i < hues.length; i++) {
     let hue = hues[i];
+
     if (hueCSS[hue]) {
       continue;
     }
@@ -71,9 +60,18 @@ for (let paletteId in palettes) {
     let prevHue = huesChromatic[i - 1] ?? huesChromatic.at(-1);
     let nextHue = huesChromatic[i + 1] ?? huesChromatic[0];
 
-    reportPaletteIssue(`Missing hue ${hue}. Generating from ${prevHue} and ${nextHue}`, { paletteId, hue });
+    reportPaletteIssue(`Missing hue. Generating from ${prevHue} and ${nextHue}`, { paletteId, hue });
 
-    for (let tint in palette[prevHue]) {
+    let prevScale = palette[prevHue];
+    let nextScale = palette[nextHue];
+
+    let progress = mixPercentage[hue] ?? 0.5;
+    let scale = (palette[hue] = {});
+
+    scale.maxChromaTint = (1 - progress) * prevScale.maxChromaTint + progress * nextScale.maxChromaTint;
+    scale.maxChromaTint = Math.round(scale.maxChromaTint / 10) * 10;
+
+    for (let tint in prevScale) {
       if (tint === '05' || !(tint > 0)) {
         continue;
       }
@@ -81,19 +79,25 @@ for (let paletteId in palettes) {
       let prevColor = palette[prevHue][tint];
       let nextColor = palette[nextHue][tint];
 
-      let color = prevColor.mix(nextColor, mixPercentage[hue] ?? 0.5, { space: 'oklch' });
-      hueCSS[hue] = declareColor(color, hue, tint) + '\n' + hueCSS[hue];
+      let color = prevColor.mix(nextColor, progress, { space: 'oklch' });
+      scale[tint] = color;
     }
+
+    // Ensure core color has the max chroma
+    let coreColor = scale[scale.maxChromaTint];
+    coreColor.c = Math.max(...Object.values(scale).map(color => color.c || 0)) + 0.0002;
+
+    hueCSS[hue] += scaleCSS(hue, scale);
   }
 
-  hueCSS = Object.values(hueCSS).join('\n');
+  hueCSS = Object.values(hueCSS).filter(Boolean).join('\n\n');
   // TODO apply Prettier instead of faking it
   paletteCSS = `${selector(paletteId)} {\n${hueCSS.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
 
   fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), paletteCSS, 'utf8');
 }
 
-let issuePaletteCount = Object.keys(paletteIssues).length;
+let issuePaletteCount = Object.keys(paletteIssues).length - 1;
 console.info(
   `🎨 Wrote ${Object.keys(palettes).length} palette files.` +
     (paletteIssues.total > 0
@@ -137,3 +141,22 @@ function declareColor(color, hue, tint) {
 
   return ret;
 }
+
+function scaleCSS(hue, scale) {
+  let ret = [];
+  for (let tint in scale) {
+    if (tint === '05' || !(tint > 0)) {
+      // The object has both '5' and '05' keys, but '05' is out of order
+      // Also ignore non-tints
+      continue;
+    }
+
+    let color = scale[tint];
+    ret.push(declareColor(color, hue, tint));
+  }
+  ret.reverse();
+
+  ret.push(`--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});`);
+  ret.push(`--wa-color-${hue}-key: ${scale.maxChromaTint};`);
+  return ret.join('\n');
+}

From a2d85f49a36c50f13d7805fc01e33326dda208e3 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 15:56:35 -0500
Subject: [PATCH 08/25] Add generated `orange` to Vogue palette

---
 src/styles/color/vogue.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/vogue.css b/src/styles/color/vogue.css
index 304eb19f4..8b0500445 100644
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
+  --wa-color-orange-95: oklch(96.355% 0.05982 62.448);
+  --wa-color-orange-90: oklch(92.371% 0.10134 60.314);
+  --wa-color-orange-80: oklch(84.228% 0.13101 54.157);
+  --wa-color-orange-70: oklch(76.275% 0.16839 51.143);
+  --wa-color-orange-60: #e67530 /* oklch(68.22% 0.16179 47.997) */;
+  --wa-color-orange-50: oklch(58.011% 0.16819 44.953);
+  --wa-color-orange-40: #9b390d /* oklch(47.739% 0.14004 40.585) */;
+  --wa-color-orange-30: #7a2b17 /* oklch(40.323% 0.11475 35.602) */;
+  --wa-color-orange-20: #5c1e0f /* oklch(32.963% 0.09552 34.666) */;
+  --wa-color-orange-10: #3a0f06 /* oklch(24.042% 0.07066 34.715) */;
+  --wa-color-orange-05: #270803 /* oklch(18.867% 0.05444 34.696) */;
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
   --wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
   --wa-color-yellow-90: #fde761 /* oklch(92.138% 0.15325 99.997) */;
   --wa-color-yellow-80: #f5c308 /* oklch(83.774% 0.17019 89.81) */;

From 18b88c2f5c96d107f26b733a5ec20c535acd5959 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 15:58:02 -0500
Subject: [PATCH 09/25] Add generated `orange` to Mild palette

---
 src/styles/color/mild.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/mild.css b/src/styles/color/mild.css
index 90a957088..e8a6df088 100644
--- a/src/styles/color/mild.css
+++ b/src/styles/color/mild.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-40);
   --wa-color-red-key: 40;
 
+  --wa-color-orange-95: oklch(96.126% 0.05417 66.333);
+  --wa-color-orange-90: oklch(92.413% 0.07898 62.545);
+  --wa-color-orange-80: #f9bd86 /* oklch(84.088% 0.09891 63.847) */;
+  --wa-color-orange-70: #e2a05f /* oklch(75.707% 0.11352 64.057) */;
+  --wa-color-orange-60: #d18228 /* oklch(67.572% 0.13809 64.146) */;
+  --wa-color-orange-50: oklch(57.202% 0.13583 64.309);
+  --wa-color-orange-40: oklch(47.462% 0.13789 64.939);
+  --wa-color-orange-30: oklch(40.049% 0.12025 65.207);
+  --wa-color-orange-20: oklch(32.552% 0.09777 64.859);
+  --wa-color-orange-10: oklch(23.884% 0.07141 64.246);
+  --wa-color-orange-05: oklch(18.698% 0.05597 65.589);
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
   --wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
   --wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
   --wa-color-yellow-80: #e3c868 /* oklch(83.63% 0.12003 93.943) */;

From f1438981b27215d57fd43aeabe787b4755c3f11c Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 15:59:03 -0500
Subject: [PATCH 10/25] Add generated `orange` to Elegant palette

---
 src/styles/color/elegant.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/elegant.css b/src/styles/color/elegant.css
index 54121023f..5bda0b721 100644
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-40);
   --wa-color-red-key: 40;
 
+  --wa-color-orange-95: oklch(96.238% 0.02664 61.788);
+  --wa-color-orange-90: #fbe1cc /* oklch(92.512% 0.04019 60.45) */;
+  --wa-color-orange-80: #edc1a0 /* oklch(84.097% 0.06661 58.236) */;
+  --wa-color-orange-70: #dda178 /* oklch(75.734% 0.09064 55.123) */;
+  --wa-color-orange-60: #cd8351 /* oklch(67.646% 0.1134 53.172) */;
+  --wa-color-orange-50: #b65d22 /* oklch(57.437% 0.13446 49.881) */;
+  --wa-color-orange-40: oklch(47.576% 0.13426 46.452);
+  --wa-color-orange-30: oklch(40.382% 0.12087 47.003);
+  --wa-color-orange-20: oklch(32.846% 0.0965 46.227);
+  --wa-color-orange-10: oklch(24.06% 0.06873 45.849);
+  --wa-color-orange-05: #260900 /* oklch(18.727% 0.05359 44.791) */;
+  --wa-color-orange: var(--wa-color-orange-50);
+  --wa-color-orange-key: 50;
+
   --wa-color-yellow-95: #f7f4da /* oklch(96.266% 0.03422 101.63) */;
   --wa-color-yellow-90: #ede7c3 /* oklch(92.349% 0.04769 99.435) */;
   --wa-color-yellow-80: #d8ca96 /* oklch(83.793% 0.06999 94.829) */;

From 782c404bdf4b70f778b0391566b25249d89fab56 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 16:32:07 -0500
Subject: [PATCH 11/25] Add generated `orange` to Default palette

---
 src/styles/color/default.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/default.css b/src/styles/color/default.css
index 5cf3149a6..8485cc788 100644
--- a/src/styles/color/default.css
+++ b/src/styles/color/default.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
+  --wa-color-orange-95: oklch(96.494% 0.0335 57.914);
+  --wa-color-orange-90: oklch(92.556% 0.06963 56.631);
+  --wa-color-orange-80: oklch(84.494% 0.12276 53.381);
+  --wa-color-orange-70: oklch(76.375% 0.17194 46.091);
+  --wa-color-orange-60: #eb713f /* oklch(68.398% 0.16422 41.446) */;
+  --wa-color-orange-50: #cb4b1d /* oklch(58.153% 0.17174 38.404) */;
+  --wa-color-orange-40: #a2310c /* oklch(48.028% 0.15488 36.538) */;
+  --wa-color-orange-30: #7f2810 /* oklch(40.591% 0.12506 35.663) */;
+  --wa-color-orange-20: #5d1d0e /* oklch(32.908% 0.09683 34.387) */;
+  --wa-color-orange-10: #3a1005 /* oklch(24.088% 0.06954 35.613) */;
+  --wa-color-orange-05: #270803 /* oklch(18.801% 0.05509 34.149) */;
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
   --wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
   --wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
   --wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;

From 4d094a4e193b15b1c9e7c4d456225b78ee881c46 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 16:33:31 -0500
Subject: [PATCH 12/25] Add generated `orange` to Rudimentary palette

---
 src/styles/color/rudimentary.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/rudimentary.css b/src/styles/color/rudimentary.css
index f455b5bb2..283a4b3f5 100644
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
+  --wa-color-orange-95: oklch(96.488% 0.04965 58.92);
+  --wa-color-orange-90: oklch(92.244% 0.08759 57.789);
+  --wa-color-orange-80: oklch(84.32% 0.12702 56.232);
+  --wa-color-orange-70: oklch(76.31% 0.17967 50.95);
+  --wa-color-orange-60: #e87431 /* oklch(68.352% 0.16354 47.083) */;
+  --wa-color-orange-50: oklch(58.23% 0.17947 43.3);
+  --wa-color-orange-40: oklch(48.089% 0.16071 40.798);
+  --wa-color-orange-30: oklch(40.708% 0.13699 39.616);
+  --wa-color-orange-20: oklch(33.124% 0.1121 39.599);
+  --wa-color-orange-10: oklch(24.257% 0.08204 39.602);
+  --wa-color-orange-05: oklch(18.966% 0.06414 39.606);
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
   --wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */;
   --wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */;
   --wa-color-yellow-80: #f4c403 /* oklch(83.862% 0.17104 90.777) */;

From c3e582b47b4ed28f9dd3e9c5ed67750a2e3e0f87 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 16:34:06 -0500
Subject: [PATCH 13/25] Add generated `orange` to Natural palette

---
 src/styles/color/natural.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/natural.css b/src/styles/color/natural.css
index f0b23aecc..393fae84f 100644
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
+  --wa-color-orange-95: #f8f0ec /* oklch(96.084% 0.01043 54.557) */;
+  --wa-color-orange-90: #f2e3d8 /* oklch(92.485% 0.02211 56.694) */;
+  --wa-color-orange-80: #e4c4ad /* oklch(84.166% 0.04799 57.553) */;
+  --wa-color-orange-70: #d3a583 /* oklch(75.674% 0.07148 57.481) */;
+  --wa-color-orange-60: #bc8a65 /* oklch(67.319% 0.08062 57.054) */;
+  --wa-color-orange-50: #9e6940 /* oklch(56.757% 0.08845 56.746) */;
+  --wa-color-orange-40: #7e4d27 /* oklch(46.949% 0.08447 57.382) */;
+  --wa-color-orange-30: #673a17 /* oklch(39.774% 0.0793 55.768) */;
+  --wa-color-orange-20: #4f2906 /* oklch(32.45% 0.0725 57.629) */;
+  --wa-color-orange-10: #311702 /* oklch(23.759% 0.05361 57.126) */;
+  --wa-color-orange-05: #200d01 /* oklch(18.517% 0.04211 57.178) */;
+  --wa-color-orange: var(--wa-color-orange-50);
+  --wa-color-orange-key: 50;
+
   --wa-color-yellow-95: #f6f1ea /* oklch(96.009% 0.01076 76.598) */;
   --wa-color-yellow-90: #eee5d7 /* oklch(92.521% 0.02111 79.091) */;
   --wa-color-yellow-80: #dbc8a8 /* oklch(84.033% 0.04791 80.753) */;

From bd935fa8d51c0cc4c8b510f3d28575be01301c65 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 16:34:44 -0500
Subject: [PATCH 14/25] Add generated `orange` to Classic palette

---
 src/styles/color/classic.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/classic.css b/src/styles/color/classic.css
index 84ec49097..86fbd2b8d 100644
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
+  --wa-color-orange-95: oklch(96.245% 0.04153 59.224);
+  --wa-color-orange-90: oklch(92.468% 0.07656 58.647);
+  --wa-color-orange-80: oklch(84.375% 0.11283 54.179);
+  --wa-color-orange-70: #fb945a /* oklch(76.369% 0.14454 48.621) */;
+  --wa-color-orange-60: #f26b31 /* oklch(68.509% 0.18046 41.503) */;
+  --wa-color-orange-50: #cf4812 /* oklch(58.288% 0.18026 38.576) */;
+  --wa-color-orange-40: oklch(48.175% 0.16316 38.526);
+  --wa-color-orange-30: oklch(40.779% 0.13925 37.899);
+  --wa-color-orange-20: oklch(33.129% 0.11288 38.58);
+  --wa-color-orange-10: oklch(24.259% 0.0831 38.502);
+  --wa-color-orange-05: oklch(18.969% 0.06527 38.137);
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
   --wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
   --wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
   --wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;

From 4bb9805ba61b527081a9572bb71264b2e89f8cfb Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 16:36:57 -0500
Subject: [PATCH 15/25] Add generated `orange` to Bright palette

---
 src/styles/color/bright.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/bright.css b/src/styles/color/bright.css
index 2e4f5f9a6..4feaaacb1 100644
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-60);
   --wa-color-red-key: 60;
 
+  --wa-color-orange-95: oklch(96.406% 0.04001 53.476);
+  --wa-color-orange-90: oklch(92.395% 0.07984 53.06);
+  --wa-color-orange-80: oklch(84.389% 0.12224 47.981);
+  --wa-color-orange-70: oklch(76.55% 0.16521 42.512);
+  --wa-color-orange-60: #ea7237 /* oklch(68.444% 0.16501 44.349) */;
+  --wa-color-orange-50: #c0561a /* oklch(57.844% 0.15254 45.085) */;
+  --wa-color-orange-40: #963e05 /* oklch(47.639% 0.13153 45.898) */;
+  --wa-color-orange-30: oklch(40.376% 0.11554 45.517);
+  --wa-color-orange-20: oklch(32.94% 0.09927 45.913);
+  --wa-color-orange-10: oklch(24.083% 0.07743 46.027);
+  --wa-color-orange-05: oklch(18.817% 0.06098 48.455);
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
   --wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */;
   --wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */;
   --wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */;

From db3c568ba2c711af580ee6f376dc85a8dafc23fd Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 5 Mar 2025 16:37:20 -0500
Subject: [PATCH 16/25] Add generated `orange` to Anodized palette

---
 src/styles/color/anodized.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/color/anodized.css b/src/styles/color/anodized.css
index c0073ec2c..f10a6dcc4 100644
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-70);
   --wa-color-red-key: 70;
 
+  --wa-color-orange-95: oklch(96.462% 0.02077 52.138);
+  --wa-color-orange-90: oklch(92.556% 0.04363 51.242);
+  --wa-color-orange-80: #fdbb96 /* oklch(84.396% 0.09052 50.397) */;
+  --wa-color-orange-70: #eb9c74 /* oklch(76.151% 0.10953 47.299) */;
+  --wa-color-orange-60: #cf8162 /* oklch(67.86% 0.10698 42.148) */;
+  --wa-color-orange-50: #aa6248 /* oklch(57.281% 0.1014 40.415) */;
+  --wa-color-orange-40: #864834 /* oklch(47.233% 0.08958 39.166) */;
+  --wa-color-orange-30: #6b3727 /* oklch(39.974% 0.07776 38.975) */;
+  --wa-color-orange-20: #50271a /* oklch(32.519% 0.0649 38.022) */;
+  --wa-color-orange-10: #32160e /* oklch(23.873% 0.04713 38.423) */;
+  --wa-color-orange-05: #210c06 /* oklch(18.614% 0.03797 38.589) */;
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
   --wa-color-yellow-95: #faf3e1 /* oklch(96.479% 0.02487 89.211) */;
   --wa-color-yellow-90: #f4e5be /* oklch(92.412% 0.0535 89.488) */;
   --wa-color-yellow-80: #eac673 /* oklch(84.03% 0.1101 86.581) */;

From 1d600a77c4d5cf655561539456c0f2ffd3d3c825 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 10 Mar 2025 13:40:56 -0400
Subject: [PATCH 17/25] Fix #566

---
 src/components/select/select.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/select/select.css b/src/components/select/select.css
index 633c2bf01..88312e37f 100644
--- a/src/components/select/select.css
+++ b/src/components/select/select.css
@@ -208,13 +208,13 @@
   &::slotted(wa-divider) {
     --spacing: var(--wa-space-xs);
   }
-
-  &::slotted(small) {
-    display: block;
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-semibold);
-    color: var(--wa-color-text-quiet);
-    padding-block: var(--wa-space-xs);
-    padding-inline: var(--wa-space-xl);
-  }
+}
+
+slot:not([name])::slotted(small) {
+  display: block;
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-semibold);
+  color: var(--wa-color-text-quiet);
+  padding-block: var(--wa-space-xs);
+  padding-inline: var(--wa-space-xl);
 }

From e5c28848802100a5ce1875e80f5ac961f5593fbf Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 10 Mar 2025 15:08:27 -0400
Subject: [PATCH 18/25] [Tooltip] Specify inherited CSS properties on host,
 fixes #773 (#774)

* [Tooltip] Specify inherited CSS properties on host, fixes #773

* Remove unused `--show-delay` and `--hide-delay`
---
 src/components/tooltip/tooltip.css | 14 +++++++-------
 src/components/tooltip/tooltip.ts  |  3 ---
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/tooltip/tooltip.css b/src/components/tooltip/tooltip.css
index 80dd00621..144baf400 100644
--- a/src/components/tooltip/tooltip.css
+++ b/src/components/tooltip/tooltip.css
@@ -4,10 +4,16 @@
   --max-width: 30ch;
   --padding: var(--wa-space-2xs) var(--wa-space-xs);
 
+  /** These styles are added so we don't interfere in the DOM. */
   display: inline-block;
   position: absolute;
 
-  /** These styles are added so we dont interfere in the DOM. */
+  /** Defaults for inherited CSS properties */
+  color: var(--wa-tooltip-content-color);
+  font-size: var(--wa-tooltip-font-size);
+  line-height: var(--wa-tooltip-line-height);
+  text-align: start;
+  white-space: normal;
 }
 
 .tooltip {
@@ -41,12 +47,6 @@
   max-width: var(--max-width);
   border-radius: var(--border-radius);
   background-color: var(--background-color);
-  font: inherit;
-  color: var(--wa-tooltip-content-color);
-  font-size: var(--wa-tooltip-font-size);
-  line-height: var(--wa-tooltip-line-height);
-  text-align: start;
-  white-space: normal;
   padding: var(--padding);
   user-select: none;
   -webkit-user-select: none;
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 0389ef977..4f2b1cb63 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -35,11 +35,8 @@ import styles from './tooltip.css';
  *
  * @cssproperty --background-color - The tooltip's background color.
  * @cssproperty --border-radius - The radius of the tooltip's corners.
- * @cssproperty --text-color - The color of the tooltip's content.
  * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
  * @cssproperty --padding - The padding within the tooltip.
- * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
- * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
  */
 @customElement('wa-tooltip')
 export default class WaTooltip extends WebAwesomeElement {

From d12b97b0b0abffc748d8d8b458791081dc898f2f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 12:19:50 -0400
Subject: [PATCH 19/25] fix wa-pill and wa-input[pill] styles (#791)

---
 docs/docs/native/input.md        | 8 ++++++++
 docs/docs/resources/changelog.md | 5 +++++
 src/styles/native/input.css      | 7 ++++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/docs/native/input.md b/docs/docs/native/input.md
index c7c11f0dc..ef7c483e5 100644
--- a/docs/docs/native/input.md
+++ b/docs/docs/native/input.md
@@ -42,6 +42,14 @@ wa-code-demo::part(preview) {
 <wa-input label="WA Input (url)" type="url"></wa-input>
 ```
 
+## Pill shaped text fields
+
+Add the `wa-pill` class to an `<input>` to make it pill-shaped.
+
+```html {.example}
+<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
+```
+
 ## Color Picker
 
 Basic:
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 51bd55882..cbea1f20e 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,6 +12,11 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
+## Next
+
+- Fixed `wa-pill` class for text fields
+- Fixed `pill` style for `<wa-input>` elements
+
 ## 3.0.0-alpha.11
 
 ### Color Palettes
diff --git a/src/styles/native/input.css b/src/styles/native/input.css
index 246812a7a..7580e33d3 100644
--- a/src/styles/native/input.css
+++ b/src/styles/native/input.css
@@ -121,7 +121,8 @@ input:where(:not(
   font: inherit;
 }
 
-.wa-pill,
-:host([pill]) {
-  border-radius: var(--wa-border-radius-pill);
+input.wa-pill,
+textarea.wa-pill,
+:host([pill]) .wa-text-field {
+  border-radius: var(--wa-border-radius-pill) !important;
 }

From 1283a696a5380ff7c07592aa1aba245db23f4669 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 14:22:23 -0400
Subject: [PATCH 20/25] fix switch + tooltip behavior (#793)

---
 docs/docs/resources/changelog.md | 1 +
 src/components/switch/switch.ts  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index cbea1f20e..275fd9702 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -25,6 +25,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Added a `pink` scale to all color palettes
 - Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
 - Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too).
+- Fixed a bug in `<wa-switch>` that caused tooltips to work incorrectly when toggling the switch
 
 ### Design Tokens
 
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 74d5a7fb7..47a9bcdf4 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -49,6 +49,7 @@ import styles from './switch.css';
  */
 @customElement('wa-switch')
 export default class WaSwitch extends WebAwesomeFormAssociatedElement {
+  static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
   static shadowStyle = [formControlStyles, sizeStyles, styles];
 
   static get validators() {

From da4f619d9533a28feb8232b2172006da62e0a112 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 14:44:39 -0400
Subject: [PATCH 21/25] prevent card example from overflowing (#795)

---
 docs/docs/components/card.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index 222e5b8d5..d1cd32a64 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -19,13 +19,13 @@ icon: card
 
   <div slot="footer">
     <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
+    <wa-rating label="Rating"></wa-rating>
   </div>
 </wa-card>
 
 <style>
   .card-overview {
-    max-width: 300px;
+    width: 300px;
   }
 
   .card-overview small {

From a6745602d6a2585410139a3c7b2f0d7f59c02ece Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 15:59:37 -0400
Subject: [PATCH 22/25] fix color picker light dismiss (#794)

* fix color picker light dismiss

* update changelog
---
 docs/docs/resources/changelog.md             | 1 +
 src/components/color-picker/color-picker.css | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 275fd9702..0da89e80d 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -16,6 +16,7 @@ During the alpha period, things might break! We take breaking changes very serio
 
 - Fixed `wa-pill` class for text fields
 - Fixed `pill` style for `<wa-input>` elements
+- Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
 
 ## 3.0.0-alpha.11
 
diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css
index fa7e6ad18..2cf52a21f 100644
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -278,11 +278,11 @@
 }
 
 /*
-   * Color dropdown
-   */
+ * Color dropdown
+ */
 
 .color-dropdown {
-  display: flex;
+  display: contents;
 }
 
 .color-dropdown::part(panel) {

From c0ca739366e927871d0f64ba166e1075ae1254df Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 12 Mar 2025 15:14:26 -0400
Subject: [PATCH 23/25] More robust dynamic value / options handling, fixes
 #789

---
 src/components/select/select.test.ts | 34 +++++++++++++
 src/components/select/select.ts      | 71 ++++++++++++++++++++++++----
 2 files changed, 96 insertions(+), 9 deletions(-)

diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index 747cfe987..ca302c03a 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -647,6 +647,7 @@ describe('<wa-select>', () => {
             );
             const el = form.querySelector<WaSelect>('wa-select')!;
 
+            expect(el.defaultValue).to.equal('option-1');
             expect(el.value).to.equal('');
             expect(new FormData(form).get('select')).equal('');
 
@@ -657,6 +658,7 @@ describe('<wa-select>', () => {
 
             await aTimeout(10);
             await el.updateComplete;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['option-1']);
             expect(el.value).to.equal('option-1');
             expect(new FormData(form).get('select')).equal('option-1');
           });
@@ -745,6 +747,8 @@ describe('<wa-select>', () => {
             );
 
             const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['bar', 'baz']);
+            expect(el.optionValues?.size).to.equal(2);
             expect(el.value).to.have.members(['bar', 'baz']);
             expect(el.value!.length).to.equal(2);
             expect(new FormData(form).getAll('select')).to.have.members(['bar', 'baz']);
@@ -760,6 +764,36 @@ describe('<wa-select>', () => {
             expect(new FormData(form).getAll('select')).to.have.members(['foo', 'bar', 'baz']);
           });
         });
+
+        describe('With setting the value via JS', () => {
+          it('Should preserve value even if not returned', async () => {
+            const form = await fixture<HTMLFormElement>(
+              html` <form>
+                <wa-select name="select">
+                  <wa-option value="bar">Bar</wa-option>
+                  <wa-option value="baz">Baz</wa-option>
+                </wa-select>
+              </form>`,
+            );
+
+            const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.value).to.equal('');
+
+            el.value = 'foo';
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('');
+
+            const option = document.createElement('wa-option');
+            option.value = 'foo';
+            option.innerText = 'Foo';
+            el.append(option);
+
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('foo');
+          });
+        });
       });
     });
   }
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index e82c53d2c..d7ab3c3b6 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -118,6 +118,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   @state() displayLabel = '';
   @state() currentOption: WaOption;
   @state() selectedOptions: WaOption[] = [];
+  @state() optionValues: Set<string> | undefined;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -158,7 +159,47 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     return val;
   }
 
-  @property({ attribute: false }) value: string | string[] | null = null;
+  private _value: string[] | undefined;
+  @property({ attribute: false })
+  set value(val: string | string[]) {
+    let oldValue = this.value;
+
+    if (!Array.isArray(val)) {
+      val = val.split(' ');
+    }
+
+    if (!this._value || this._value.join(' ') !== val.join(' ')) {
+      this._value = val;
+      let newValue = this.value;
+
+      if (newValue != oldValue) {
+        this.requestUpdate('value', oldValue);
+      }
+    }
+  }
+  get value() {
+    let value = this._value ?? this.defaultValue;
+    value = Array.isArray(value) ? value : [value];
+    let optionsChanged = !this.optionValues;
+
+    if (optionsChanged) {
+      this.optionValues = new Set(
+        this.getAllOptions()
+          .filter(option => !option.disabled)
+          .map(option => option.value),
+      );
+    }
+
+    // Drop values not in the DOM
+    let ret: string | string[] = value.filter(v => this.optionValues!.has(v));
+    ret = this.multiple ? ret : (ret[0] ?? '');
+
+    if (optionsChanged) {
+      this.requestUpdate('value');
+    }
+
+    return ret;
+  }
 
   /** The select's size. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@@ -538,12 +579,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     }
 
     const allOptions = this.getAllOptions();
-    const val = this.valueHasChanged ? this.value : this.defaultValue;
-    const value = Array.isArray(val) ? val : [val];
-    const values: string[] = [];
+    this.optionValues = undefined; // dirty the value so it gets recalculated
 
-    // Check for duplicate values in menu items
-    allOptions.forEach(option => values.push(option.value));
+    const value = this.value;
 
     // Select only the options that match the new value
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
@@ -565,6 +603,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
   // Gets an array of all `<wa-option>` elements
   private getAllOptions() {
+    if (!this?.querySelectorAll) {
+      return [];
+    }
     return [...this.querySelectorAll<WaOption>('wa-option')];
   }
 
@@ -628,11 +669,24 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
     // Update selected options cache
     this.selectedOptions = options.filter(el => el.selected);
+    let selectedValues = new Set(this.selectedOptions.map(el => el.value));
+
+    // Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading)
+    // Note that options NOT present in the DOM will be moved to the end after this
+    if (selectedValues.size > 0 || this._value) {
+      if (!this._value) {
+        // First time it's set
+        let value = this.defaultValue ?? [];
+        this._value = Array.isArray(value) ? value : [value];
+      }
+
+      // Filter out values that are in the DOM
+      this._value = this._value.filter(value => !this.optionValues?.has(value));
+      this._value.unshift(...selectedValues);
+    }
 
     // Update the value and display label
     if (this.multiple) {
-      this.value = this.selectedOptions.map(el => el.value);
-
       if (this.placeholder && this.value.length === 0) {
         // When no items are selected, keep the value empty so the placeholder shows
         this.displayLabel = '';
@@ -641,7 +695,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
       }
     } else {
       const selectedOption = this.selectedOptions[0];
-      this.value = selectedOption?.value ?? '';
       this.displayLabel = selectedOption?.label ?? '';
     }
 

From a9bf1bd8384928da14f1df072ca36aed465adb2e Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 13 Mar 2025 17:07:03 -0400
Subject: [PATCH 24/25] Add `--wa-color-{role}-N` variables, closes #785 (#797)

* Initial comment, based on #768

* Add `neutral` color variables

* Add `success`, `warning`, and `danger` variables

* Theme touch-ups

* Remove unused clamped tokens

* Re-add clamped tokens test page, refactor to be based on hue instead of `brand`
---
 docs/docs/experimental/clamped-colors.njk |  23 +-
 src/styles/brand/base.css                 |  74 -----
 src/styles/brand/blue.css                 |  21 +-
 src/styles/brand/cyan.css                 |  21 +-
 src/styles/brand/gray.css                 |  21 +-
 src/styles/brand/green.css                |  21 +-
 src/styles/brand/indigo.css               |  21 +-
 src/styles/brand/orange.css               |  21 +-
 src/styles/brand/pink.css                 |  21 +-
 src/styles/brand/purple.css               |  21 +-
 src/styles/brand/red.css                  |  21 +-
 src/styles/brand/yellow.css               |  21 +-
 src/styles/color/anodized.css             |   2 +
 src/styles/color/base.css                 | 338 ++++++++++++++++++++++
 src/styles/color/bright.css               |   2 +
 src/styles/color/classic.css              |   2 +
 src/styles/color/default.css              |   2 +
 src/styles/color/elegant.css              |   2 +
 src/styles/color/mild.css                 |   2 +
 src/styles/color/natural.css              |   2 +
 src/styles/color/rudimentary.css          |   2 +
 src/styles/color/scripts/palettes.js      |   4 +-
 src/styles/color/vogue.css                |   2 +
 src/styles/danger/blue.css                |  36 +++
 src/styles/danger/cyan.css                |  36 +++
 src/styles/danger/gray.css                |  36 +++
 src/styles/danger/green.css               |  36 +++
 src/styles/danger/indigo.css              |  36 +++
 src/styles/danger/orange.css              |  36 +++
 src/styles/danger/pink.css                |  36 +++
 src/styles/danger/purple.css              |  36 +++
 src/styles/danger/red.css                 |  36 +++
 src/styles/danger/yellow.css              |  36 +++
 src/styles/neutral/blue.css               |  36 +++
 src/styles/neutral/cyan.css               |  36 +++
 src/styles/neutral/gray.css               |  36 +++
 src/styles/neutral/green.css              |  36 +++
 src/styles/neutral/indigo.css             |  36 +++
 src/styles/neutral/orange.css             |  36 +++
 src/styles/neutral/pink.css               |  36 +++
 src/styles/neutral/purple.css             |  36 +++
 src/styles/neutral/red.css                |  36 +++
 src/styles/neutral/yellow.css             |  36 +++
 src/styles/success/blue.css               |  36 +++
 src/styles/success/cyan.css               |  36 +++
 src/styles/success/gray.css               |  36 +++
 src/styles/success/green.css              |  36 +++
 src/styles/success/indigo.css             |  36 +++
 src/styles/success/orange.css             |  36 +++
 src/styles/success/pink.css               |  36 +++
 src/styles/success/purple.css             |  36 +++
 src/styles/success/red.css                |  36 +++
 src/styles/success/yellow.css             |  36 +++
 src/styles/themes/active/color.css        | 144 ++++-----
 src/styles/themes/awesome/color.css       | 142 ++++-----
 src/styles/themes/brutalist/color.css     | 160 +++++-----
 src/styles/themes/classic/color.css       | 144 ++++-----
 src/styles/themes/default/color.css       | 166 +++++------
 src/styles/themes/glossy/color.css        |  68 +----
 src/styles/themes/matter/color.css        | 144 ++++-----
 src/styles/themes/mellow/color.css        |  80 ++---
 src/styles/themes/playful/color.css       | 164 ++++++-----
 src/styles/themes/premium/color.css       | 174 ++++++-----
 src/styles/themes/tailspin/color.css      | 146 +++++-----
 src/styles/warning/blue.css               |  36 +++
 src/styles/warning/cyan.css               |  36 +++
 src/styles/warning/gray.css               |  36 +++
 src/styles/warning/green.css              |  36 +++
 src/styles/warning/indigo.css             |  36 +++
 src/styles/warning/orange.css             |  36 +++
 src/styles/warning/pink.css               |  36 +++
 src/styles/warning/purple.css             |  36 +++
 src/styles/warning/red.css                |  36 +++
 src/styles/warning/yellow.css             |  36 +++
 74 files changed, 2742 insertions(+), 897 deletions(-)
 delete mode 100644 src/styles/brand/base.css
 create mode 100644 src/styles/color/base.css
 create mode 100644 src/styles/danger/blue.css
 create mode 100644 src/styles/danger/cyan.css
 create mode 100644 src/styles/danger/gray.css
 create mode 100644 src/styles/danger/green.css
 create mode 100644 src/styles/danger/indigo.css
 create mode 100644 src/styles/danger/orange.css
 create mode 100644 src/styles/danger/pink.css
 create mode 100644 src/styles/danger/purple.css
 create mode 100644 src/styles/danger/red.css
 create mode 100644 src/styles/danger/yellow.css
 create mode 100644 src/styles/neutral/blue.css
 create mode 100644 src/styles/neutral/cyan.css
 create mode 100644 src/styles/neutral/gray.css
 create mode 100644 src/styles/neutral/green.css
 create mode 100644 src/styles/neutral/indigo.css
 create mode 100644 src/styles/neutral/orange.css
 create mode 100644 src/styles/neutral/pink.css
 create mode 100644 src/styles/neutral/purple.css
 create mode 100644 src/styles/neutral/red.css
 create mode 100644 src/styles/neutral/yellow.css
 create mode 100644 src/styles/success/blue.css
 create mode 100644 src/styles/success/cyan.css
 create mode 100644 src/styles/success/gray.css
 create mode 100644 src/styles/success/green.css
 create mode 100644 src/styles/success/indigo.css
 create mode 100644 src/styles/success/orange.css
 create mode 100644 src/styles/success/pink.css
 create mode 100644 src/styles/success/purple.css
 create mode 100644 src/styles/success/red.css
 create mode 100644 src/styles/success/yellow.css
 create mode 100644 src/styles/warning/blue.css
 create mode 100644 src/styles/warning/cyan.css
 create mode 100644 src/styles/warning/gray.css
 create mode 100644 src/styles/warning/green.css
 create mode 100644 src/styles/warning/indigo.css
 create mode 100644 src/styles/warning/orange.css
 create mode 100644 src/styles/warning/pink.css
 create mode 100644 src/styles/warning/purple.css
 create mode 100644 src/styles/warning/red.css
 create mode 100644 src/styles/warning/yellow.css

diff --git a/docs/docs/experimental/clamped-colors.njk b/docs/docs/experimental/clamped-colors.njk
index fac431d52..27797832d 100644
--- a/docs/docs/experimental/clamped-colors.njk
+++ b/docs/docs/experimental/clamped-colors.njk
@@ -1,13 +1,10 @@
 ---
-title: Clamped brand tokens
+title: Clamped Color Tokens
 layout: block
 ---
 
-{% set tints = ['40-max', '50-max', '60-max', '40-min', '50-min', '60-min'] %}
-
-{% for hue in hues %}
-<link href="/dist/styles/brand/{{ hue }}.css" rel="stylesheet">
-{% endfor %}
+{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
+{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
 
 <table class="colors">
   <thead>
@@ -20,18 +17,18 @@ layout: block
     </tr>
   </thead>
 {% for hue in hues -%}
-<tr class="wa-brand-{{ hue }}">
+<tr class="wa-color-{{ hue }}">
   <th>{{ hue | capitalize }}</th>
   <td class="core-column">
-    <div class="color swatch" style="background-color: var(--wa-color-brand); color: var(--wa-color-brand-on);">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
       {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></wa-copy-button>
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
     </div>
   </td>
   {% for tint in tints -%}
     <td>
-      <div class="color swatch" style="background-color: var(--wa-color-brand-{{ tint }})">
-        <wa-copy-button value="--wa-color-brand-{{ tint }}" copy-label="--wa-color-brand-{{ tint }}"></wa-copy-button>
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
       </div>
     </td>
   {%- endfor -%}
@@ -41,7 +38,7 @@ layout: block
 
 <style>
 .core-column .color.swatch::before {
-  counter-reset: key var(--wa-color-brand-key);
+  counter-reset: key var(--key);
   content: counter(key);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/styles/brand/base.css b/src/styles/brand/base.css
deleted file mode 100644
index 175dc8049..000000000
--- a/src/styles/brand/base.css
+++ /dev/null
@@ -1,74 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']),
-:where([class^='wa-brand-'], [class*=' wa-brand-']) {
-  /**
-   * Conditional tokens for use in color-mix()
-   * --wa-color-brand-if-lt-N ➡️ 100% if key < N, 0% otherwise
-   * --wa-color-brand-if-gte-N ➡️ 100% if key >= N, 0% otherwise
-   */
-  --wa-color-brand-if-lt-40: calc(clamp(0, 40 - var(--wa-color-brand-key), 1) * 100%);
-  --wa-color-brand-if-lt-50: calc(clamp(0, 50 - var(--wa-color-brand-key), 1) * 100%);
-  --wa-color-brand-if-lt-60: calc(clamp(0, 60 - var(--wa-color-brand-key), 1) * 100%);
-  --wa-color-brand-if-lt-70: calc(clamp(0, 70 - var(--wa-color-brand-key), 1) * 100%);
-  --wa-color-brand-if-lt-80: calc(clamp(0, 80 - var(--wa-color-brand-key), 1) * 100%);
-
-  --wa-color-brand-if-gte-40: calc(100% - var(--wa-color-brand-if-lt-40));
-  --wa-color-brand-if-gte-50: calc(100% - var(--wa-color-brand-if-lt-50));
-  --wa-color-brand-if-gte-60: calc(100% - var(--wa-color-brand-if-lt-60));
-  --wa-color-brand-if-gte-70: calc(100% - var(--wa-color-brand-if-lt-70));
-  --wa-color-brand-if-gte-80: calc(100% - var(--wa-color-brand-if-lt-80));
-
-  /*
-   * Convenience tokens for common tint cutoffs
-   * --wa-color-brand-N-max ➡️ var(--color-brand) if key <= N, var(--color-brand-N) otherwise
-   * --wa-color-brand-N-min ➡️ var(--color-brand) if key >= N, var(--color-brand-N) otherwise
-   */
-  --wa-color-brand-40-max: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-lt-40),
-    var(--wa-color-brand-40)
-  );
-  --wa-color-brand-40-min: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-gte-40),
-    var(--wa-color-brand-40)
-  );
-
-  --wa-color-brand-50-max: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-lt-50),
-    var(--wa-color-brand-50)
-  );
-  --wa-color-brand-50-min: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-gte-50),
-    var(--wa-color-brand-50)
-  );
-
-  --wa-color-brand-60-max: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-lt-60),
-    var(--wa-color-brand-60)
-  );
-  --wa-color-brand-60-min: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-gte-60),
-    var(--wa-color-brand-60)
-  );
-
-  --wa-color-brand-70-max: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-lt-70),
-    var(--wa-color-brand-70)
-  );
-  --wa-color-brand-70-min: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-gte-70),
-    var(--wa-color-brand-70)
-  );
-
-  /* Text color: white if key < 60, brand-10 otherwise */
-  --wa-color-brand-on: color-mix(in oklab, var(--wa-color-brand-10) var(--wa-color-brand-if-gte-60), white);
-}
diff --git a/src/styles/brand/blue.css b/src/styles/brand/blue.css
index 94ce3f332..a46c9e84c 100644
--- a/src/styles/brand/blue.css
+++ b/src/styles/brand/blue.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --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);
-  --wa-color-brand-key: var(--wa-color-blue-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-blue-max-50);
+  --wa-color-brand-min-50: var(--wa-color-blue-min-50);
+  --wa-color-brand-max-60: var(--wa-color-blue-max-60);
+  --wa-color-brand-min-60: var(--wa-color-blue-min-60);
+  --wa-color-brand-max-70: var(--wa-color-blue-max-70);
+  --wa-color-brand-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-brand-on: var(--wa-color-blue-on);
 }
diff --git a/src/styles/brand/cyan.css b/src/styles/brand/cyan.css
index afca52c2c..6e7ec4565 100644
--- a/src/styles/brand/cyan.css
+++ b/src/styles/brand/cyan.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-cyan-10);
   --wa-color-brand-05: var(--wa-color-cyan-05);
   --wa-color-brand: var(--wa-color-cyan);
-  --wa-color-brand-key: var(--wa-color-cyan-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-brand-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-brand-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-brand-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-brand-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-brand-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-brand-on: var(--wa-color-cyan-on);
 }
diff --git a/src/styles/brand/gray.css b/src/styles/brand/gray.css
index 59edc0b3b..991f48f65 100644
--- a/src/styles/brand/gray.css
+++ b/src/styles/brand/gray.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-gray-10);
   --wa-color-brand-05: var(--wa-color-gray-05);
   --wa-color-brand: var(--wa-color-gray);
-  --wa-color-brand-key: var(--wa-color-gray-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-gray-max-50);
+  --wa-color-brand-min-50: var(--wa-color-gray-min-50);
+  --wa-color-brand-max-60: var(--wa-color-gray-max-60);
+  --wa-color-brand-min-60: var(--wa-color-gray-min-60);
+  --wa-color-brand-max-70: var(--wa-color-gray-max-70);
+  --wa-color-brand-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-brand-on: var(--wa-color-gray-on);
 }
diff --git a/src/styles/brand/green.css b/src/styles/brand/green.css
index b0c392732..3a9768e06 100644
--- a/src/styles/brand/green.css
+++ b/src/styles/brand/green.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --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);
-  --wa-color-brand-key: var(--wa-color-green-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-green-max-50);
+  --wa-color-brand-min-50: var(--wa-color-green-min-50);
+  --wa-color-brand-max-60: var(--wa-color-green-max-60);
+  --wa-color-brand-min-60: var(--wa-color-green-min-60);
+  --wa-color-brand-max-70: var(--wa-color-green-max-70);
+  --wa-color-brand-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-brand-on: var(--wa-color-green-on);
 }
diff --git a/src/styles/brand/indigo.css b/src/styles/brand/indigo.css
index b4516bceb..4eb083a65 100644
--- a/src/styles/brand/indigo.css
+++ b/src/styles/brand/indigo.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --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);
-  --wa-color-brand-key: var(--wa-color-indigo-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-brand-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-brand-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-brand-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-brand-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-brand-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-brand-on: var(--wa-color-indigo-on);
 }
diff --git a/src/styles/brand/orange.css b/src/styles/brand/orange.css
index b067fd064..da5fb937a 100644
--- a/src/styles/brand/orange.css
+++ b/src/styles/brand/orange.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-orange-10);
   --wa-color-brand-05: var(--wa-color-orange-05);
   --wa-color-brand: var(--wa-color-orange);
-  --wa-color-brand-key: var(--wa-color-orange-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-orange-max-50);
+  --wa-color-brand-min-50: var(--wa-color-orange-min-50);
+  --wa-color-brand-max-60: var(--wa-color-orange-max-60);
+  --wa-color-brand-min-60: var(--wa-color-orange-min-60);
+  --wa-color-brand-max-70: var(--wa-color-orange-max-70);
+  --wa-color-brand-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-brand-on: var(--wa-color-orange-on);
 }
diff --git a/src/styles/brand/pink.css b/src/styles/brand/pink.css
index 5ffcd8387..81610ff6d 100644
--- a/src/styles/brand/pink.css
+++ b/src/styles/brand/pink.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-pink-10);
   --wa-color-brand-05: var(--wa-color-pink-05);
   --wa-color-brand: var(--wa-color-pink);
-  --wa-color-brand-key: var(--wa-color-pink-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-pink-max-50);
+  --wa-color-brand-min-50: var(--wa-color-pink-min-50);
+  --wa-color-brand-max-60: var(--wa-color-pink-max-60);
+  --wa-color-brand-min-60: var(--wa-color-pink-min-60);
+  --wa-color-brand-max-70: var(--wa-color-pink-max-70);
+  --wa-color-brand-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-brand-on: var(--wa-color-pink-on);
 }
diff --git a/src/styles/brand/purple.css b/src/styles/brand/purple.css
index 84b11d4e5..0fcbf19de 100644
--- a/src/styles/brand/purple.css
+++ b/src/styles/brand/purple.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-purple-10);
   --wa-color-brand-05: var(--wa-color-purple-05);
   --wa-color-brand: var(--wa-color-purple);
-  --wa-color-brand-key: var(--wa-color-purple-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-purple-max-50);
+  --wa-color-brand-min-50: var(--wa-color-purple-min-50);
+  --wa-color-brand-max-60: var(--wa-color-purple-max-60);
+  --wa-color-brand-min-60: var(--wa-color-purple-min-60);
+  --wa-color-brand-max-70: var(--wa-color-purple-max-70);
+  --wa-color-brand-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-brand-on: var(--wa-color-purple-on);
 }
diff --git a/src/styles/brand/red.css b/src/styles/brand/red.css
index 823c1e304..cee3d7e28 100644
--- a/src/styles/brand/red.css
+++ b/src/styles/brand/red.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-red-10);
   --wa-color-brand-05: var(--wa-color-red-05);
   --wa-color-brand: var(--wa-color-red);
-  --wa-color-brand-key: var(--wa-color-red-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-red-max-50);
+  --wa-color-brand-min-50: var(--wa-color-red-min-50);
+  --wa-color-brand-max-60: var(--wa-color-red-max-60);
+  --wa-color-brand-min-60: var(--wa-color-red-min-60);
+  --wa-color-brand-max-70: var(--wa-color-red-max-70);
+  --wa-color-brand-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-brand-on: var(--wa-color-red-on);
 }
diff --git a/src/styles/brand/yellow.css b/src/styles/brand/yellow.css
index abf5cea11..51d01e0f0 100644
--- a/src/styles/brand/yellow.css
+++ b/src/styles/brand/yellow.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-yellow-10);
   --wa-color-brand-05: var(--wa-color-yellow-05);
   --wa-color-brand: var(--wa-color-yellow);
-  --wa-color-brand-key: var(--wa-color-yellow-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-brand-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-brand-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-brand-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-brand-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-brand-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-brand-on: var(--wa-color-yellow-on);
 }
diff --git a/src/styles/color/anodized.css b/src/styles/color/anodized.css
index f10a6dcc4..fc1b06a94 100644
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/base.css b/src/styles/color/base.css
new file mode 100644
index 000000000..802ab0c9f
--- /dev/null
+++ b/src/styles/color/base.css
@@ -0,0 +1,338 @@
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+:where([class^='wa-brand-'], [class*=' wa-brand-']),
+:where(:root),
+:host {
+  /**
+   * Conditional tokens for use in color-mix()
+   * --wa-color-{hue}-lt-N ➡️ 100% if key < N, 0% otherwise
+   * --wa-color-{hue}-gte-N ➡️ 100% if key >= N, 0% otherwise
+   */
+
+  --wa-color-red-lt-50: calc(clamp(0, 50 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-50: calc(100% - var(--wa-color-red-lt-50));
+  --wa-color-red-lt-60: calc(clamp(0, 60 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-60: calc(100% - var(--wa-color-red-lt-60));
+  --wa-color-red-lt-70: calc(clamp(0, 70 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-70: calc(100% - var(--wa-color-red-lt-70));
+
+  --wa-color-orange-lt-50: calc(clamp(0, 50 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-50: calc(100% - var(--wa-color-orange-lt-50));
+  --wa-color-orange-lt-60: calc(clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-60: calc(100% - var(--wa-color-orange-lt-60));
+  --wa-color-orange-lt-70: calc(clamp(0, 70 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-70: calc(100% - var(--wa-color-orange-lt-70));
+
+  --wa-color-yellow-lt-50: calc(clamp(0, 50 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-50: calc(100% - var(--wa-color-yellow-lt-50));
+  --wa-color-yellow-lt-60: calc(clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-60: calc(100% - var(--wa-color-yellow-lt-60));
+  --wa-color-yellow-lt-70: calc(clamp(0, 70 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-70: calc(100% - var(--wa-color-yellow-lt-70));
+
+  --wa-color-green-lt-50: calc(clamp(0, 50 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-50: calc(100% - var(--wa-color-green-lt-50));
+  --wa-color-green-lt-60: calc(clamp(0, 60 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-60: calc(100% - var(--wa-color-green-lt-60));
+  --wa-color-green-lt-70: calc(clamp(0, 70 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-70: calc(100% - var(--wa-color-green-lt-70));
+
+  --wa-color-cyan-lt-50: calc(clamp(0, 50 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-50: calc(100% - var(--wa-color-cyan-lt-50));
+  --wa-color-cyan-lt-60: calc(clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-60: calc(100% - var(--wa-color-cyan-lt-60));
+  --wa-color-cyan-lt-70: calc(clamp(0, 70 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-70: calc(100% - var(--wa-color-cyan-lt-70));
+
+  --wa-color-blue-lt-50: calc(clamp(0, 50 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-50: calc(100% - var(--wa-color-blue-lt-50));
+  --wa-color-blue-lt-60: calc(clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-60: calc(100% - var(--wa-color-blue-lt-60));
+  --wa-color-blue-lt-70: calc(clamp(0, 70 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-70: calc(100% - var(--wa-color-blue-lt-70));
+
+  --wa-color-indigo-lt-50: calc(clamp(0, 50 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-50: calc(100% - var(--wa-color-indigo-lt-50));
+  --wa-color-indigo-lt-60: calc(clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-60: calc(100% - var(--wa-color-indigo-lt-60));
+  --wa-color-indigo-lt-70: calc(clamp(0, 70 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-70: calc(100% - var(--wa-color-indigo-lt-70));
+
+  --wa-color-purple-lt-50: calc(clamp(0, 50 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-50: calc(100% - var(--wa-color-purple-lt-50));
+  --wa-color-purple-lt-60: calc(clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-60: calc(100% - var(--wa-color-purple-lt-60));
+  --wa-color-purple-lt-70: calc(clamp(0, 70 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-70: calc(100% - var(--wa-color-purple-lt-70));
+
+  --wa-color-pink-lt-50: calc(clamp(0, 50 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-50: calc(100% - var(--wa-color-pink-lt-50));
+  --wa-color-pink-lt-60: calc(clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-60: calc(100% - var(--wa-color-pink-lt-60));
+  --wa-color-pink-lt-70: calc(clamp(0, 70 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-70: calc(100% - var(--wa-color-pink-lt-70));
+
+  --wa-color-gray-lt-50: calc(clamp(0, 50 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-50: calc(100% - var(--wa-color-gray-lt-50));
+  --wa-color-gray-lt-60: calc(clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-60: calc(100% - var(--wa-color-gray-lt-60));
+  --wa-color-gray-lt-70: calc(clamp(0, 70 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-70: calc(100% - var(--wa-color-gray-lt-70));
+
+  /*
+   * Convenience tokens for common tint cutoffs
+   * --wa-color-{hue}-N-max ➡️ var(--color-{hue}) if key <= N, var(--color-{hue}-N) otherwise
+   * --wa-color-{hue}-N-min ➡️ var(--color-{hue}) if key >= N, var(--color-{hue}-N) otherwise
+   */
+
+  --wa-color-red-max-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-50), var(--wa-color-red-50));
+  --wa-color-red-min-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-50), var(--wa-color-red-50));
+  --wa-color-red-max-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-60), var(--wa-color-red-60));
+  --wa-color-red-min-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-60), var(--wa-color-red-60));
+  --wa-color-red-max-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-70), var(--wa-color-red-70));
+  --wa-color-red-min-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-70), var(--wa-color-red-70));
+
+  --wa-color-orange-max-50: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-50),
+    var(--wa-color-orange-50)
+  );
+  --wa-color-orange-min-50: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-50),
+    var(--wa-color-orange-50)
+  );
+  --wa-color-orange-max-60: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-60),
+    var(--wa-color-orange-60)
+  );
+  --wa-color-orange-min-60: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-60),
+    var(--wa-color-orange-60)
+  );
+  --wa-color-orange-max-70: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-70),
+    var(--wa-color-orange-70)
+  );
+  --wa-color-orange-min-70: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-70),
+    var(--wa-color-orange-70)
+  );
+
+  --wa-color-yellow-max-50: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-50),
+    var(--wa-color-yellow-50)
+  );
+  --wa-color-yellow-min-50: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-50),
+    var(--wa-color-yellow-50)
+  );
+  --wa-color-yellow-max-60: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-60),
+    var(--wa-color-yellow-60)
+  );
+  --wa-color-yellow-min-60: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-60),
+    var(--wa-color-yellow-60)
+  );
+  --wa-color-yellow-max-70: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-70),
+    var(--wa-color-yellow-70)
+  );
+  --wa-color-yellow-min-70: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-70),
+    var(--wa-color-yellow-70)
+  );
+
+  --wa-color-green-max-50: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-50),
+    var(--wa-color-green-50)
+  );
+  --wa-color-green-min-50: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-50),
+    var(--wa-color-green-50)
+  );
+  --wa-color-green-max-60: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-60),
+    var(--wa-color-green-60)
+  );
+  --wa-color-green-min-60: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-60),
+    var(--wa-color-green-60)
+  );
+  --wa-color-green-max-70: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-70),
+    var(--wa-color-green-70)
+  );
+  --wa-color-green-min-70: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-70),
+    var(--wa-color-green-70)
+  );
+
+  --wa-color-cyan-max-50: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-50), var(--wa-color-cyan-50));
+  --wa-color-cyan-min-50: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-50),
+    var(--wa-color-cyan-50)
+  );
+  --wa-color-cyan-max-60: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-60), var(--wa-color-cyan-60));
+  --wa-color-cyan-min-60: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-60),
+    var(--wa-color-cyan-60)
+  );
+  --wa-color-cyan-max-70: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-70), var(--wa-color-cyan-70));
+  --wa-color-cyan-min-70: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-70),
+    var(--wa-color-cyan-70)
+  );
+
+  --wa-color-blue-max-50: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-50), var(--wa-color-blue-50));
+  --wa-color-blue-min-50: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-50),
+    var(--wa-color-blue-50)
+  );
+  --wa-color-blue-max-60: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-60), var(--wa-color-blue-60));
+  --wa-color-blue-min-60: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-60),
+    var(--wa-color-blue-60)
+  );
+  --wa-color-blue-max-70: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-70), var(--wa-color-blue-70));
+  --wa-color-blue-min-70: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-70),
+    var(--wa-color-blue-70)
+  );
+
+  --wa-color-indigo-max-50: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-50),
+    var(--wa-color-indigo-50)
+  );
+  --wa-color-indigo-min-50: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-50),
+    var(--wa-color-indigo-50)
+  );
+  --wa-color-indigo-max-60: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-60),
+    var(--wa-color-indigo-60)
+  );
+  --wa-color-indigo-min-60: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-60),
+    var(--wa-color-indigo-60)
+  );
+  --wa-color-indigo-max-70: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-70),
+    var(--wa-color-indigo-70)
+  );
+  --wa-color-indigo-min-70: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-70),
+    var(--wa-color-indigo-70)
+  );
+
+  --wa-color-purple-max-50: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-50),
+    var(--wa-color-purple-50)
+  );
+  --wa-color-purple-min-50: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-50),
+    var(--wa-color-purple-50)
+  );
+  --wa-color-purple-max-60: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-60),
+    var(--wa-color-purple-60)
+  );
+  --wa-color-purple-min-60: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-60),
+    var(--wa-color-purple-60)
+  );
+  --wa-color-purple-max-70: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-70),
+    var(--wa-color-purple-70)
+  );
+  --wa-color-purple-min-70: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-70),
+    var(--wa-color-purple-70)
+  );
+
+  --wa-color-pink-max-50: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-50), var(--wa-color-pink-50));
+  --wa-color-pink-min-50: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-50),
+    var(--wa-color-pink-50)
+  );
+  --wa-color-pink-max-60: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-60), var(--wa-color-pink-60));
+  --wa-color-pink-min-60: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-60),
+    var(--wa-color-pink-60)
+  );
+  --wa-color-pink-max-70: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-70), var(--wa-color-pink-70));
+  --wa-color-pink-min-70: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-70),
+    var(--wa-color-pink-70)
+  );
+
+  --wa-color-gray-max-50: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-50), var(--wa-color-gray-50));
+  --wa-color-gray-min-50: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-50),
+    var(--wa-color-gray-50)
+  );
+  --wa-color-gray-max-60: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-60), var(--wa-color-gray-60));
+  --wa-color-gray-min-60: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-60),
+    var(--wa-color-gray-60)
+  );
+  --wa-color-gray-max-70: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-70), var(--wa-color-gray-70));
+  --wa-color-gray-min-70: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-70),
+    var(--wa-color-gray-70)
+  );
+
+  /* Text color: white if key < 60, {hue}-10 otherwise */
+
+  --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
+  --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
+  --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
+  --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
+  --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
+  --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
+  --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
+  --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
+  --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
+  --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
+}
diff --git a/src/styles/color/bright.css b/src/styles/color/bright.css
index 4feaaacb1..912b77c40 100644
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/classic.css b/src/styles/color/classic.css
index 86fbd2b8d..8d1c822fc 100644
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/default.css b/src/styles/color/default.css
index 8485cc788..340f2d09a 100644
--- a/src/styles/color/default.css
+++ b/src/styles/color/default.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/elegant.css b/src/styles/color/elegant.css
index 5bda0b721..3e45327b5 100644
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/mild.css b/src/styles/color/mild.css
index e8a6df088..45f69f779 100644
--- a/src/styles/color/mild.css
+++ b/src/styles/color/mild.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/natural.css b/src/styles/color/natural.css
index 393fae84f..8c3200ee4 100644
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/rudimentary.css b/src/styles/color/rudimentary.css
index 283a4b3f5..b1d2f32f3 100644
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/scripts/palettes.js b/src/styles/color/scripts/palettes.js
index 588807a1c..68cb59302 100644
--- a/src/styles/color/scripts/palettes.js
+++ b/src/styles/color/scripts/palettes.js
@@ -8,7 +8,9 @@ import fs from 'fs';
 import path from 'path';
 import { PALETTE_DIR } from './util.js';
 
-export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css'));
+export const paletteFiles = fs
+  .readdirSync(PALETTE_DIR + '/')
+  .filter(file => file.endsWith('.css') && !file.endsWith('base.css'));
 export const declarationRegex =
   /^\s*--wa-color-(?<hue>[a-z]+)(?:-(?<level>[0-9]+|key))?:\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
 export const rawCSS = {};
diff --git a/src/styles/color/vogue.css b/src/styles/color/vogue.css
index 8b0500445..7277a877d 100644
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/danger/blue.css b/src/styles/danger/blue.css
new file mode 100644
index 000000000..352ca8806
--- /dev/null
+++ b/src/styles/danger/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-blue {
+  --wa-color-danger-95: var(--wa-color-blue-95);
+  --wa-color-danger-90: var(--wa-color-blue-90);
+  --wa-color-danger-80: var(--wa-color-blue-80);
+  --wa-color-danger-70: var(--wa-color-blue-70);
+  --wa-color-danger-60: var(--wa-color-blue-60);
+  --wa-color-danger-50: var(--wa-color-blue-50);
+  --wa-color-danger-40: var(--wa-color-blue-40);
+  --wa-color-danger-30: var(--wa-color-blue-30);
+  --wa-color-danger-20: var(--wa-color-blue-20);
+  --wa-color-danger-10: var(--wa-color-blue-10);
+  --wa-color-danger-05: var(--wa-color-blue-05);
+  --wa-color-danger: var(--wa-color-blue);
+
+  --wa-color-danger-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-blue-max-50);
+  --wa-color-danger-min-50: var(--wa-color-blue-min-50);
+  --wa-color-danger-max-60: var(--wa-color-blue-max-60);
+  --wa-color-danger-min-60: var(--wa-color-blue-min-60);
+  --wa-color-danger-max-70: var(--wa-color-blue-max-70);
+  --wa-color-danger-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-danger-on: var(--wa-color-blue-on);
+}
diff --git a/src/styles/danger/cyan.css b/src/styles/danger/cyan.css
new file mode 100644
index 000000000..bf1b3158b
--- /dev/null
+++ b/src/styles/danger/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-cyan {
+  --wa-color-danger-95: var(--wa-color-cyan-95);
+  --wa-color-danger-90: var(--wa-color-cyan-90);
+  --wa-color-danger-80: var(--wa-color-cyan-80);
+  --wa-color-danger-70: var(--wa-color-cyan-70);
+  --wa-color-danger-60: var(--wa-color-cyan-60);
+  --wa-color-danger-50: var(--wa-color-cyan-50);
+  --wa-color-danger-40: var(--wa-color-cyan-40);
+  --wa-color-danger-30: var(--wa-color-cyan-30);
+  --wa-color-danger-20: var(--wa-color-cyan-20);
+  --wa-color-danger-10: var(--wa-color-cyan-10);
+  --wa-color-danger-05: var(--wa-color-cyan-05);
+  --wa-color-danger: var(--wa-color-cyan);
+
+  --wa-color-danger-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-danger-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-danger-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-danger-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-danger-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-danger-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-danger-on: var(--wa-color-cyan-on);
+}
diff --git a/src/styles/danger/gray.css b/src/styles/danger/gray.css
new file mode 100644
index 000000000..5c436068b
--- /dev/null
+++ b/src/styles/danger/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-gray {
+  --wa-color-danger-95: var(--wa-color-gray-95);
+  --wa-color-danger-90: var(--wa-color-gray-90);
+  --wa-color-danger-80: var(--wa-color-gray-80);
+  --wa-color-danger-70: var(--wa-color-gray-70);
+  --wa-color-danger-60: var(--wa-color-gray-60);
+  --wa-color-danger-50: var(--wa-color-gray-50);
+  --wa-color-danger-40: var(--wa-color-gray-40);
+  --wa-color-danger-30: var(--wa-color-gray-30);
+  --wa-color-danger-20: var(--wa-color-gray-20);
+  --wa-color-danger-10: var(--wa-color-gray-10);
+  --wa-color-danger-05: var(--wa-color-gray-05);
+  --wa-color-danger: var(--wa-color-gray);
+
+  --wa-color-danger-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-gray-max-50);
+  --wa-color-danger-min-50: var(--wa-color-gray-min-50);
+  --wa-color-danger-max-60: var(--wa-color-gray-max-60);
+  --wa-color-danger-min-60: var(--wa-color-gray-min-60);
+  --wa-color-danger-max-70: var(--wa-color-gray-max-70);
+  --wa-color-danger-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-danger-on: var(--wa-color-gray-on);
+}
diff --git a/src/styles/danger/green.css b/src/styles/danger/green.css
new file mode 100644
index 000000000..c24b3d7d1
--- /dev/null
+++ b/src/styles/danger/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-green {
+  --wa-color-danger-95: var(--wa-color-green-95);
+  --wa-color-danger-90: var(--wa-color-green-90);
+  --wa-color-danger-80: var(--wa-color-green-80);
+  --wa-color-danger-70: var(--wa-color-green-70);
+  --wa-color-danger-60: var(--wa-color-green-60);
+  --wa-color-danger-50: var(--wa-color-green-50);
+  --wa-color-danger-40: var(--wa-color-green-40);
+  --wa-color-danger-30: var(--wa-color-green-30);
+  --wa-color-danger-20: var(--wa-color-green-20);
+  --wa-color-danger-10: var(--wa-color-green-10);
+  --wa-color-danger-05: var(--wa-color-green-05);
+  --wa-color-danger: var(--wa-color-green);
+
+  --wa-color-danger-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-green-max-50);
+  --wa-color-danger-min-50: var(--wa-color-green-min-50);
+  --wa-color-danger-max-60: var(--wa-color-green-max-60);
+  --wa-color-danger-min-60: var(--wa-color-green-min-60);
+  --wa-color-danger-max-70: var(--wa-color-green-max-70);
+  --wa-color-danger-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-danger-on: var(--wa-color-green-on);
+}
diff --git a/src/styles/danger/indigo.css b/src/styles/danger/indigo.css
new file mode 100644
index 000000000..a3c75da3d
--- /dev/null
+++ b/src/styles/danger/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-indigo {
+  --wa-color-danger-95: var(--wa-color-indigo-95);
+  --wa-color-danger-90: var(--wa-color-indigo-90);
+  --wa-color-danger-80: var(--wa-color-indigo-80);
+  --wa-color-danger-70: var(--wa-color-indigo-70);
+  --wa-color-danger-60: var(--wa-color-indigo-60);
+  --wa-color-danger-50: var(--wa-color-indigo-50);
+  --wa-color-danger-40: var(--wa-color-indigo-40);
+  --wa-color-danger-30: var(--wa-color-indigo-30);
+  --wa-color-danger-20: var(--wa-color-indigo-20);
+  --wa-color-danger-10: var(--wa-color-indigo-10);
+  --wa-color-danger-05: var(--wa-color-indigo-05);
+  --wa-color-danger: var(--wa-color-indigo);
+
+  --wa-color-danger-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-danger-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-danger-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-danger-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-danger-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-danger-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-danger-on: var(--wa-color-indigo-on);
+}
diff --git a/src/styles/danger/orange.css b/src/styles/danger/orange.css
new file mode 100644
index 000000000..fb11dd590
--- /dev/null
+++ b/src/styles/danger/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-orange {
+  --wa-color-danger-95: var(--wa-color-orange-95);
+  --wa-color-danger-90: var(--wa-color-orange-90);
+  --wa-color-danger-80: var(--wa-color-orange-80);
+  --wa-color-danger-70: var(--wa-color-orange-70);
+  --wa-color-danger-60: var(--wa-color-orange-60);
+  --wa-color-danger-50: var(--wa-color-orange-50);
+  --wa-color-danger-40: var(--wa-color-orange-40);
+  --wa-color-danger-30: var(--wa-color-orange-30);
+  --wa-color-danger-20: var(--wa-color-orange-20);
+  --wa-color-danger-10: var(--wa-color-orange-10);
+  --wa-color-danger-05: var(--wa-color-orange-05);
+  --wa-color-danger: var(--wa-color-orange);
+
+  --wa-color-danger-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-orange-max-50);
+  --wa-color-danger-min-50: var(--wa-color-orange-min-50);
+  --wa-color-danger-max-60: var(--wa-color-orange-max-60);
+  --wa-color-danger-min-60: var(--wa-color-orange-min-60);
+  --wa-color-danger-max-70: var(--wa-color-orange-max-70);
+  --wa-color-danger-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-danger-on: var(--wa-color-orange-on);
+}
diff --git a/src/styles/danger/pink.css b/src/styles/danger/pink.css
new file mode 100644
index 000000000..3e85eec73
--- /dev/null
+++ b/src/styles/danger/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-pink {
+  --wa-color-danger-95: var(--wa-color-pink-95);
+  --wa-color-danger-90: var(--wa-color-pink-90);
+  --wa-color-danger-80: var(--wa-color-pink-80);
+  --wa-color-danger-70: var(--wa-color-pink-70);
+  --wa-color-danger-60: var(--wa-color-pink-60);
+  --wa-color-danger-50: var(--wa-color-pink-50);
+  --wa-color-danger-40: var(--wa-color-pink-40);
+  --wa-color-danger-30: var(--wa-color-pink-30);
+  --wa-color-danger-20: var(--wa-color-pink-20);
+  --wa-color-danger-10: var(--wa-color-pink-10);
+  --wa-color-danger-05: var(--wa-color-pink-05);
+  --wa-color-danger: var(--wa-color-pink);
+
+  --wa-color-danger-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-pink-max-50);
+  --wa-color-danger-min-50: var(--wa-color-pink-min-50);
+  --wa-color-danger-max-60: var(--wa-color-pink-max-60);
+  --wa-color-danger-min-60: var(--wa-color-pink-min-60);
+  --wa-color-danger-max-70: var(--wa-color-pink-max-70);
+  --wa-color-danger-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-danger-on: var(--wa-color-pink-on);
+}
diff --git a/src/styles/danger/purple.css b/src/styles/danger/purple.css
new file mode 100644
index 000000000..478005e31
--- /dev/null
+++ b/src/styles/danger/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-purple {
+  --wa-color-danger-95: var(--wa-color-purple-95);
+  --wa-color-danger-90: var(--wa-color-purple-90);
+  --wa-color-danger-80: var(--wa-color-purple-80);
+  --wa-color-danger-70: var(--wa-color-purple-70);
+  --wa-color-danger-60: var(--wa-color-purple-60);
+  --wa-color-danger-50: var(--wa-color-purple-50);
+  --wa-color-danger-40: var(--wa-color-purple-40);
+  --wa-color-danger-30: var(--wa-color-purple-30);
+  --wa-color-danger-20: var(--wa-color-purple-20);
+  --wa-color-danger-10: var(--wa-color-purple-10);
+  --wa-color-danger-05: var(--wa-color-purple-05);
+  --wa-color-danger: var(--wa-color-purple);
+
+  --wa-color-danger-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-purple-max-50);
+  --wa-color-danger-min-50: var(--wa-color-purple-min-50);
+  --wa-color-danger-max-60: var(--wa-color-purple-max-60);
+  --wa-color-danger-min-60: var(--wa-color-purple-min-60);
+  --wa-color-danger-max-70: var(--wa-color-purple-max-70);
+  --wa-color-danger-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-danger-on: var(--wa-color-purple-on);
+}
diff --git a/src/styles/danger/red.css b/src/styles/danger/red.css
new file mode 100644
index 000000000..11457667e
--- /dev/null
+++ b/src/styles/danger/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-red {
+  --wa-color-danger-95: var(--wa-color-red-95);
+  --wa-color-danger-90: var(--wa-color-red-90);
+  --wa-color-danger-80: var(--wa-color-red-80);
+  --wa-color-danger-70: var(--wa-color-red-70);
+  --wa-color-danger-60: var(--wa-color-red-60);
+  --wa-color-danger-50: var(--wa-color-red-50);
+  --wa-color-danger-40: var(--wa-color-red-40);
+  --wa-color-danger-30: var(--wa-color-red-30);
+  --wa-color-danger-20: var(--wa-color-red-20);
+  --wa-color-danger-10: var(--wa-color-red-10);
+  --wa-color-danger-05: var(--wa-color-red-05);
+  --wa-color-danger: var(--wa-color-red);
+
+  --wa-color-danger-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-red-max-50);
+  --wa-color-danger-min-50: var(--wa-color-red-min-50);
+  --wa-color-danger-max-60: var(--wa-color-red-max-60);
+  --wa-color-danger-min-60: var(--wa-color-red-min-60);
+  --wa-color-danger-max-70: var(--wa-color-red-max-70);
+  --wa-color-danger-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-danger-on: var(--wa-color-red-on);
+}
diff --git a/src/styles/danger/yellow.css b/src/styles/danger/yellow.css
new file mode 100644
index 000000000..424e28687
--- /dev/null
+++ b/src/styles/danger/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-yellow {
+  --wa-color-danger-95: var(--wa-color-yellow-95);
+  --wa-color-danger-90: var(--wa-color-yellow-90);
+  --wa-color-danger-80: var(--wa-color-yellow-80);
+  --wa-color-danger-70: var(--wa-color-yellow-70);
+  --wa-color-danger-60: var(--wa-color-yellow-60);
+  --wa-color-danger-50: var(--wa-color-yellow-50);
+  --wa-color-danger-40: var(--wa-color-yellow-40);
+  --wa-color-danger-30: var(--wa-color-yellow-30);
+  --wa-color-danger-20: var(--wa-color-yellow-20);
+  --wa-color-danger-10: var(--wa-color-yellow-10);
+  --wa-color-danger-05: var(--wa-color-yellow-05);
+  --wa-color-danger: var(--wa-color-yellow);
+
+  --wa-color-danger-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-danger-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-danger-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-danger-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-danger-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-danger-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-danger-on: var(--wa-color-yellow-on);
+}
diff --git a/src/styles/neutral/blue.css b/src/styles/neutral/blue.css
new file mode 100644
index 000000000..bb31fcc06
--- /dev/null
+++ b/src/styles/neutral/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-blue {
+  --wa-color-neutral-95: var(--wa-color-blue-95);
+  --wa-color-neutral-90: var(--wa-color-blue-90);
+  --wa-color-neutral-80: var(--wa-color-blue-80);
+  --wa-color-neutral-70: var(--wa-color-blue-70);
+  --wa-color-neutral-60: var(--wa-color-blue-60);
+  --wa-color-neutral-50: var(--wa-color-blue-50);
+  --wa-color-neutral-40: var(--wa-color-blue-40);
+  --wa-color-neutral-30: var(--wa-color-blue-30);
+  --wa-color-neutral-20: var(--wa-color-blue-20);
+  --wa-color-neutral-10: var(--wa-color-blue-10);
+  --wa-color-neutral-05: var(--wa-color-blue-05);
+  --wa-color-neutral: var(--wa-color-blue);
+
+  --wa-color-neutral-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-blue-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-blue-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-blue-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-blue-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-blue-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-blue-on);
+}
diff --git a/src/styles/neutral/cyan.css b/src/styles/neutral/cyan.css
new file mode 100644
index 000000000..671ca0ce5
--- /dev/null
+++ b/src/styles/neutral/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-cyan {
+  --wa-color-neutral-95: var(--wa-color-cyan-95);
+  --wa-color-neutral-90: var(--wa-color-cyan-90);
+  --wa-color-neutral-80: var(--wa-color-cyan-80);
+  --wa-color-neutral-70: var(--wa-color-cyan-70);
+  --wa-color-neutral-60: var(--wa-color-cyan-60);
+  --wa-color-neutral-50: var(--wa-color-cyan-50);
+  --wa-color-neutral-40: var(--wa-color-cyan-40);
+  --wa-color-neutral-30: var(--wa-color-cyan-30);
+  --wa-color-neutral-20: var(--wa-color-cyan-20);
+  --wa-color-neutral-10: var(--wa-color-cyan-10);
+  --wa-color-neutral-05: var(--wa-color-cyan-05);
+  --wa-color-neutral: var(--wa-color-cyan);
+
+  --wa-color-neutral-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-cyan-on);
+}
diff --git a/src/styles/neutral/gray.css b/src/styles/neutral/gray.css
new file mode 100644
index 000000000..a606dd6b9
--- /dev/null
+++ b/src/styles/neutral/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-gray {
+  --wa-color-neutral-95: var(--wa-color-gray-95);
+  --wa-color-neutral-90: var(--wa-color-gray-90);
+  --wa-color-neutral-80: var(--wa-color-gray-80);
+  --wa-color-neutral-70: var(--wa-color-gray-70);
+  --wa-color-neutral-60: var(--wa-color-gray-60);
+  --wa-color-neutral-50: var(--wa-color-gray-50);
+  --wa-color-neutral-40: var(--wa-color-gray-40);
+  --wa-color-neutral-30: var(--wa-color-gray-30);
+  --wa-color-neutral-20: var(--wa-color-gray-20);
+  --wa-color-neutral-10: var(--wa-color-gray-10);
+  --wa-color-neutral-05: var(--wa-color-gray-05);
+  --wa-color-neutral: var(--wa-color-gray);
+
+  --wa-color-neutral-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-gray-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-gray-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-gray-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-gray-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-gray-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-gray-on);
+}
diff --git a/src/styles/neutral/green.css b/src/styles/neutral/green.css
new file mode 100644
index 000000000..91fa062bb
--- /dev/null
+++ b/src/styles/neutral/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-green {
+  --wa-color-neutral-95: var(--wa-color-green-95);
+  --wa-color-neutral-90: var(--wa-color-green-90);
+  --wa-color-neutral-80: var(--wa-color-green-80);
+  --wa-color-neutral-70: var(--wa-color-green-70);
+  --wa-color-neutral-60: var(--wa-color-green-60);
+  --wa-color-neutral-50: var(--wa-color-green-50);
+  --wa-color-neutral-40: var(--wa-color-green-40);
+  --wa-color-neutral-30: var(--wa-color-green-30);
+  --wa-color-neutral-20: var(--wa-color-green-20);
+  --wa-color-neutral-10: var(--wa-color-green-10);
+  --wa-color-neutral-05: var(--wa-color-green-05);
+  --wa-color-neutral: var(--wa-color-green);
+
+  --wa-color-neutral-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-green-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-green-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-green-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-green-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-green-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-green-on);
+}
diff --git a/src/styles/neutral/indigo.css b/src/styles/neutral/indigo.css
new file mode 100644
index 000000000..7f126353c
--- /dev/null
+++ b/src/styles/neutral/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-indigo {
+  --wa-color-neutral-95: var(--wa-color-indigo-95);
+  --wa-color-neutral-90: var(--wa-color-indigo-90);
+  --wa-color-neutral-80: var(--wa-color-indigo-80);
+  --wa-color-neutral-70: var(--wa-color-indigo-70);
+  --wa-color-neutral-60: var(--wa-color-indigo-60);
+  --wa-color-neutral-50: var(--wa-color-indigo-50);
+  --wa-color-neutral-40: var(--wa-color-indigo-40);
+  --wa-color-neutral-30: var(--wa-color-indigo-30);
+  --wa-color-neutral-20: var(--wa-color-indigo-20);
+  --wa-color-neutral-10: var(--wa-color-indigo-10);
+  --wa-color-neutral-05: var(--wa-color-indigo-05);
+  --wa-color-neutral: var(--wa-color-indigo);
+
+  --wa-color-neutral-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-indigo-on);
+}
diff --git a/src/styles/neutral/orange.css b/src/styles/neutral/orange.css
new file mode 100644
index 000000000..d025333e2
--- /dev/null
+++ b/src/styles/neutral/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-orange {
+  --wa-color-neutral-95: var(--wa-color-orange-95);
+  --wa-color-neutral-90: var(--wa-color-orange-90);
+  --wa-color-neutral-80: var(--wa-color-orange-80);
+  --wa-color-neutral-70: var(--wa-color-orange-70);
+  --wa-color-neutral-60: var(--wa-color-orange-60);
+  --wa-color-neutral-50: var(--wa-color-orange-50);
+  --wa-color-neutral-40: var(--wa-color-orange-40);
+  --wa-color-neutral-30: var(--wa-color-orange-30);
+  --wa-color-neutral-20: var(--wa-color-orange-20);
+  --wa-color-neutral-10: var(--wa-color-orange-10);
+  --wa-color-neutral-05: var(--wa-color-orange-05);
+  --wa-color-neutral: var(--wa-color-orange);
+
+  --wa-color-neutral-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-orange-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-orange-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-orange-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-orange-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-orange-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-orange-on);
+}
diff --git a/src/styles/neutral/pink.css b/src/styles/neutral/pink.css
new file mode 100644
index 000000000..c45d19dfe
--- /dev/null
+++ b/src/styles/neutral/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-pink {
+  --wa-color-neutral-95: var(--wa-color-pink-95);
+  --wa-color-neutral-90: var(--wa-color-pink-90);
+  --wa-color-neutral-80: var(--wa-color-pink-80);
+  --wa-color-neutral-70: var(--wa-color-pink-70);
+  --wa-color-neutral-60: var(--wa-color-pink-60);
+  --wa-color-neutral-50: var(--wa-color-pink-50);
+  --wa-color-neutral-40: var(--wa-color-pink-40);
+  --wa-color-neutral-30: var(--wa-color-pink-30);
+  --wa-color-neutral-20: var(--wa-color-pink-20);
+  --wa-color-neutral-10: var(--wa-color-pink-10);
+  --wa-color-neutral-05: var(--wa-color-pink-05);
+  --wa-color-neutral: var(--wa-color-pink);
+
+  --wa-color-neutral-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-pink-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-pink-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-pink-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-pink-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-pink-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-pink-on);
+}
diff --git a/src/styles/neutral/purple.css b/src/styles/neutral/purple.css
new file mode 100644
index 000000000..5dae2f390
--- /dev/null
+++ b/src/styles/neutral/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-purple {
+  --wa-color-neutral-95: var(--wa-color-purple-95);
+  --wa-color-neutral-90: var(--wa-color-purple-90);
+  --wa-color-neutral-80: var(--wa-color-purple-80);
+  --wa-color-neutral-70: var(--wa-color-purple-70);
+  --wa-color-neutral-60: var(--wa-color-purple-60);
+  --wa-color-neutral-50: var(--wa-color-purple-50);
+  --wa-color-neutral-40: var(--wa-color-purple-40);
+  --wa-color-neutral-30: var(--wa-color-purple-30);
+  --wa-color-neutral-20: var(--wa-color-purple-20);
+  --wa-color-neutral-10: var(--wa-color-purple-10);
+  --wa-color-neutral-05: var(--wa-color-purple-05);
+  --wa-color-neutral: var(--wa-color-purple);
+
+  --wa-color-neutral-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-purple-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-purple-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-purple-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-purple-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-purple-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-purple-on);
+}
diff --git a/src/styles/neutral/red.css b/src/styles/neutral/red.css
new file mode 100644
index 000000000..4c1c37f13
--- /dev/null
+++ b/src/styles/neutral/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-red {
+  --wa-color-neutral-95: var(--wa-color-red-95);
+  --wa-color-neutral-90: var(--wa-color-red-90);
+  --wa-color-neutral-80: var(--wa-color-red-80);
+  --wa-color-neutral-70: var(--wa-color-red-70);
+  --wa-color-neutral-60: var(--wa-color-red-60);
+  --wa-color-neutral-50: var(--wa-color-red-50);
+  --wa-color-neutral-40: var(--wa-color-red-40);
+  --wa-color-neutral-30: var(--wa-color-red-30);
+  --wa-color-neutral-20: var(--wa-color-red-20);
+  --wa-color-neutral-10: var(--wa-color-red-10);
+  --wa-color-neutral-05: var(--wa-color-red-05);
+  --wa-color-neutral: var(--wa-color-red);
+
+  --wa-color-neutral-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-red-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-red-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-red-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-red-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-red-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-red-on);
+}
diff --git a/src/styles/neutral/yellow.css b/src/styles/neutral/yellow.css
new file mode 100644
index 000000000..ed860a5bb
--- /dev/null
+++ b/src/styles/neutral/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-yellow {
+  --wa-color-neutral-95: var(--wa-color-yellow-95);
+  --wa-color-neutral-90: var(--wa-color-yellow-90);
+  --wa-color-neutral-80: var(--wa-color-yellow-80);
+  --wa-color-neutral-70: var(--wa-color-yellow-70);
+  --wa-color-neutral-60: var(--wa-color-yellow-60);
+  --wa-color-neutral-50: var(--wa-color-yellow-50);
+  --wa-color-neutral-40: var(--wa-color-yellow-40);
+  --wa-color-neutral-30: var(--wa-color-yellow-30);
+  --wa-color-neutral-20: var(--wa-color-yellow-20);
+  --wa-color-neutral-10: var(--wa-color-yellow-10);
+  --wa-color-neutral-05: var(--wa-color-yellow-05);
+  --wa-color-neutral: var(--wa-color-yellow);
+
+  --wa-color-neutral-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-yellow-on);
+}
diff --git a/src/styles/success/blue.css b/src/styles/success/blue.css
new file mode 100644
index 000000000..ea52bb405
--- /dev/null
+++ b/src/styles/success/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-blue {
+  --wa-color-success-95: var(--wa-color-blue-95);
+  --wa-color-success-90: var(--wa-color-blue-90);
+  --wa-color-success-80: var(--wa-color-blue-80);
+  --wa-color-success-70: var(--wa-color-blue-70);
+  --wa-color-success-60: var(--wa-color-blue-60);
+  --wa-color-success-50: var(--wa-color-blue-50);
+  --wa-color-success-40: var(--wa-color-blue-40);
+  --wa-color-success-30: var(--wa-color-blue-30);
+  --wa-color-success-20: var(--wa-color-blue-20);
+  --wa-color-success-10: var(--wa-color-blue-10);
+  --wa-color-success-05: var(--wa-color-blue-05);
+  --wa-color-success: var(--wa-color-blue);
+
+  --wa-color-success-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-blue-max-50);
+  --wa-color-success-min-50: var(--wa-color-blue-min-50);
+  --wa-color-success-max-60: var(--wa-color-blue-max-60);
+  --wa-color-success-min-60: var(--wa-color-blue-min-60);
+  --wa-color-success-max-70: var(--wa-color-blue-max-70);
+  --wa-color-success-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-success-on: var(--wa-color-blue-on);
+}
diff --git a/src/styles/success/cyan.css b/src/styles/success/cyan.css
new file mode 100644
index 000000000..f04c86bea
--- /dev/null
+++ b/src/styles/success/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-cyan {
+  --wa-color-success-95: var(--wa-color-cyan-95);
+  --wa-color-success-90: var(--wa-color-cyan-90);
+  --wa-color-success-80: var(--wa-color-cyan-80);
+  --wa-color-success-70: var(--wa-color-cyan-70);
+  --wa-color-success-60: var(--wa-color-cyan-60);
+  --wa-color-success-50: var(--wa-color-cyan-50);
+  --wa-color-success-40: var(--wa-color-cyan-40);
+  --wa-color-success-30: var(--wa-color-cyan-30);
+  --wa-color-success-20: var(--wa-color-cyan-20);
+  --wa-color-success-10: var(--wa-color-cyan-10);
+  --wa-color-success-05: var(--wa-color-cyan-05);
+  --wa-color-success: var(--wa-color-cyan);
+
+  --wa-color-success-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-success-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-success-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-success-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-success-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-success-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-success-on: var(--wa-color-cyan-on);
+}
diff --git a/src/styles/success/gray.css b/src/styles/success/gray.css
new file mode 100644
index 000000000..1ef3cd2bc
--- /dev/null
+++ b/src/styles/success/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-gray {
+  --wa-color-success-95: var(--wa-color-gray-95);
+  --wa-color-success-90: var(--wa-color-gray-90);
+  --wa-color-success-80: var(--wa-color-gray-80);
+  --wa-color-success-70: var(--wa-color-gray-70);
+  --wa-color-success-60: var(--wa-color-gray-60);
+  --wa-color-success-50: var(--wa-color-gray-50);
+  --wa-color-success-40: var(--wa-color-gray-40);
+  --wa-color-success-30: var(--wa-color-gray-30);
+  --wa-color-success-20: var(--wa-color-gray-20);
+  --wa-color-success-10: var(--wa-color-gray-10);
+  --wa-color-success-05: var(--wa-color-gray-05);
+  --wa-color-success: var(--wa-color-gray);
+
+  --wa-color-success-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-gray-max-50);
+  --wa-color-success-min-50: var(--wa-color-gray-min-50);
+  --wa-color-success-max-60: var(--wa-color-gray-max-60);
+  --wa-color-success-min-60: var(--wa-color-gray-min-60);
+  --wa-color-success-max-70: var(--wa-color-gray-max-70);
+  --wa-color-success-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-success-on: var(--wa-color-gray-on);
+}
diff --git a/src/styles/success/green.css b/src/styles/success/green.css
new file mode 100644
index 000000000..4088a7762
--- /dev/null
+++ b/src/styles/success/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-green {
+  --wa-color-success-95: var(--wa-color-green-95);
+  --wa-color-success-90: var(--wa-color-green-90);
+  --wa-color-success-80: var(--wa-color-green-80);
+  --wa-color-success-70: var(--wa-color-green-70);
+  --wa-color-success-60: var(--wa-color-green-60);
+  --wa-color-success-50: var(--wa-color-green-50);
+  --wa-color-success-40: var(--wa-color-green-40);
+  --wa-color-success-30: var(--wa-color-green-30);
+  --wa-color-success-20: var(--wa-color-green-20);
+  --wa-color-success-10: var(--wa-color-green-10);
+  --wa-color-success-05: var(--wa-color-green-05);
+  --wa-color-success: var(--wa-color-green);
+
+  --wa-color-success-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-green-max-50);
+  --wa-color-success-min-50: var(--wa-color-green-min-50);
+  --wa-color-success-max-60: var(--wa-color-green-max-60);
+  --wa-color-success-min-60: var(--wa-color-green-min-60);
+  --wa-color-success-max-70: var(--wa-color-green-max-70);
+  --wa-color-success-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-success-on: var(--wa-color-green-on);
+}
diff --git a/src/styles/success/indigo.css b/src/styles/success/indigo.css
new file mode 100644
index 000000000..b85471c29
--- /dev/null
+++ b/src/styles/success/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-indigo {
+  --wa-color-success-95: var(--wa-color-indigo-95);
+  --wa-color-success-90: var(--wa-color-indigo-90);
+  --wa-color-success-80: var(--wa-color-indigo-80);
+  --wa-color-success-70: var(--wa-color-indigo-70);
+  --wa-color-success-60: var(--wa-color-indigo-60);
+  --wa-color-success-50: var(--wa-color-indigo-50);
+  --wa-color-success-40: var(--wa-color-indigo-40);
+  --wa-color-success-30: var(--wa-color-indigo-30);
+  --wa-color-success-20: var(--wa-color-indigo-20);
+  --wa-color-success-10: var(--wa-color-indigo-10);
+  --wa-color-success-05: var(--wa-color-indigo-05);
+  --wa-color-success: var(--wa-color-indigo);
+
+  --wa-color-success-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-success-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-success-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-success-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-success-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-success-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-success-on: var(--wa-color-indigo-on);
+}
diff --git a/src/styles/success/orange.css b/src/styles/success/orange.css
new file mode 100644
index 000000000..6e534f047
--- /dev/null
+++ b/src/styles/success/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-orange {
+  --wa-color-success-95: var(--wa-color-orange-95);
+  --wa-color-success-90: var(--wa-color-orange-90);
+  --wa-color-success-80: var(--wa-color-orange-80);
+  --wa-color-success-70: var(--wa-color-orange-70);
+  --wa-color-success-60: var(--wa-color-orange-60);
+  --wa-color-success-50: var(--wa-color-orange-50);
+  --wa-color-success-40: var(--wa-color-orange-40);
+  --wa-color-success-30: var(--wa-color-orange-30);
+  --wa-color-success-20: var(--wa-color-orange-20);
+  --wa-color-success-10: var(--wa-color-orange-10);
+  --wa-color-success-05: var(--wa-color-orange-05);
+  --wa-color-success: var(--wa-color-orange);
+
+  --wa-color-success-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-orange-max-50);
+  --wa-color-success-min-50: var(--wa-color-orange-min-50);
+  --wa-color-success-max-60: var(--wa-color-orange-max-60);
+  --wa-color-success-min-60: var(--wa-color-orange-min-60);
+  --wa-color-success-max-70: var(--wa-color-orange-max-70);
+  --wa-color-success-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-success-on: var(--wa-color-orange-on);
+}
diff --git a/src/styles/success/pink.css b/src/styles/success/pink.css
new file mode 100644
index 000000000..5e6693d84
--- /dev/null
+++ b/src/styles/success/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-pink {
+  --wa-color-success-95: var(--wa-color-pink-95);
+  --wa-color-success-90: var(--wa-color-pink-90);
+  --wa-color-success-80: var(--wa-color-pink-80);
+  --wa-color-success-70: var(--wa-color-pink-70);
+  --wa-color-success-60: var(--wa-color-pink-60);
+  --wa-color-success-50: var(--wa-color-pink-50);
+  --wa-color-success-40: var(--wa-color-pink-40);
+  --wa-color-success-30: var(--wa-color-pink-30);
+  --wa-color-success-20: var(--wa-color-pink-20);
+  --wa-color-success-10: var(--wa-color-pink-10);
+  --wa-color-success-05: var(--wa-color-pink-05);
+  --wa-color-success: var(--wa-color-pink);
+
+  --wa-color-success-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-pink-max-50);
+  --wa-color-success-min-50: var(--wa-color-pink-min-50);
+  --wa-color-success-max-60: var(--wa-color-pink-max-60);
+  --wa-color-success-min-60: var(--wa-color-pink-min-60);
+  --wa-color-success-max-70: var(--wa-color-pink-max-70);
+  --wa-color-success-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-success-on: var(--wa-color-pink-on);
+}
diff --git a/src/styles/success/purple.css b/src/styles/success/purple.css
new file mode 100644
index 000000000..2a9dfa78f
--- /dev/null
+++ b/src/styles/success/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-purple {
+  --wa-color-success-95: var(--wa-color-purple-95);
+  --wa-color-success-90: var(--wa-color-purple-90);
+  --wa-color-success-80: var(--wa-color-purple-80);
+  --wa-color-success-70: var(--wa-color-purple-70);
+  --wa-color-success-60: var(--wa-color-purple-60);
+  --wa-color-success-50: var(--wa-color-purple-50);
+  --wa-color-success-40: var(--wa-color-purple-40);
+  --wa-color-success-30: var(--wa-color-purple-30);
+  --wa-color-success-20: var(--wa-color-purple-20);
+  --wa-color-success-10: var(--wa-color-purple-10);
+  --wa-color-success-05: var(--wa-color-purple-05);
+  --wa-color-success: var(--wa-color-purple);
+
+  --wa-color-success-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-purple-max-50);
+  --wa-color-success-min-50: var(--wa-color-purple-min-50);
+  --wa-color-success-max-60: var(--wa-color-purple-max-60);
+  --wa-color-success-min-60: var(--wa-color-purple-min-60);
+  --wa-color-success-max-70: var(--wa-color-purple-max-70);
+  --wa-color-success-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-success-on: var(--wa-color-purple-on);
+}
diff --git a/src/styles/success/red.css b/src/styles/success/red.css
new file mode 100644
index 000000000..a60880f2c
--- /dev/null
+++ b/src/styles/success/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-red {
+  --wa-color-success-95: var(--wa-color-red-95);
+  --wa-color-success-90: var(--wa-color-red-90);
+  --wa-color-success-80: var(--wa-color-red-80);
+  --wa-color-success-70: var(--wa-color-red-70);
+  --wa-color-success-60: var(--wa-color-red-60);
+  --wa-color-success-50: var(--wa-color-red-50);
+  --wa-color-success-40: var(--wa-color-red-40);
+  --wa-color-success-30: var(--wa-color-red-30);
+  --wa-color-success-20: var(--wa-color-red-20);
+  --wa-color-success-10: var(--wa-color-red-10);
+  --wa-color-success-05: var(--wa-color-red-05);
+  --wa-color-success: var(--wa-color-red);
+
+  --wa-color-success-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-red-max-50);
+  --wa-color-success-min-50: var(--wa-color-red-min-50);
+  --wa-color-success-max-60: var(--wa-color-red-max-60);
+  --wa-color-success-min-60: var(--wa-color-red-min-60);
+  --wa-color-success-max-70: var(--wa-color-red-max-70);
+  --wa-color-success-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-success-on: var(--wa-color-red-on);
+}
diff --git a/src/styles/success/yellow.css b/src/styles/success/yellow.css
new file mode 100644
index 000000000..287e9053d
--- /dev/null
+++ b/src/styles/success/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-yellow {
+  --wa-color-success-95: var(--wa-color-yellow-95);
+  --wa-color-success-90: var(--wa-color-yellow-90);
+  --wa-color-success-80: var(--wa-color-yellow-80);
+  --wa-color-success-70: var(--wa-color-yellow-70);
+  --wa-color-success-60: var(--wa-color-yellow-60);
+  --wa-color-success-50: var(--wa-color-yellow-50);
+  --wa-color-success-40: var(--wa-color-yellow-40);
+  --wa-color-success-30: var(--wa-color-yellow-30);
+  --wa-color-success-20: var(--wa-color-yellow-20);
+  --wa-color-success-10: var(--wa-color-yellow-10);
+  --wa-color-success-05: var(--wa-color-yellow-05);
+  --wa-color-success: var(--wa-color-yellow);
+
+  --wa-color-success-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-success-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-success-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-success-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-success-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-success-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-success-on: var(--wa-color-yellow-on);
+}
diff --git a/src/styles/themes/active/color.css b/src/styles/themes/active/color.css
index 20af3694f..e6b04d98e 100644
--- a/src/styles/themes/active/color.css
+++ b/src/styles/themes/active/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/rudimentary.css');
 @import url('../default/color.css');
 @import url('../../brand/green.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -13,7 +17,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-normal: var(--wa-color-gray-05);
+  --wa-color-text-normal: var(--wa-color-neutral-05);
   --wa-color-text-link: var(--wa-color-brand-40);
 
   --wa-color-focus: var(--wa-color-blue-60);
@@ -26,52 +30,52 @@
    */
   --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);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
   --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-on-loud: var(--wa-color-brand-on);
+  --wa-color-brand-on-loud: black;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-70);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-70);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: black;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-70);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: black;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-70);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-70);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: black;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: black;
 }
 
@@ -90,51 +94,51 @@
    */
   --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);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-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-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-90);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
+  --wa-color-brand-on-loud: black;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-80);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-90);
   --wa-color-success-on-loud: black;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-90);
   --wa-color-warning-on-loud: black;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-90);
   --wa-color-danger-on-loud: black;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-90);
   --wa-color-neutral-on-loud: black;
 }
diff --git a/src/styles/themes/awesome/color.css b/src/styles/themes/awesome/color.css
index ed55d2aea..f608d931a 100644
--- a/src/styles/themes/awesome/color.css
+++ b/src/styles/themes/awesome/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/bright.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -10,14 +14,14 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-normal: var(--wa-color-gray-20);
+  --wa-color-text-normal: var(--wa-color-neutral-20);
 
   /**
    * 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-min);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-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);
@@ -25,44 +29,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: var(--wa-color-text-normal);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-70);
-  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-border-loud: var(--wa-color-green-30);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-70);
+  --wa-color-success-border-normal: var(--wa-color-success-50);
+  --wa-color-success-border-loud: var(--wa-color-success-30);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-40);
   --wa-color-success-on-loud: var(--wa-color-text-normal);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-30);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-border-normal: var(--wa-color-warning-50);
+  --wa-color-warning-border-loud: var(--wa-color-warning-30);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-40);
   --wa-color-warning-on-loud: var(--wa-color-text-normal);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-70);
-  --wa-color-danger-border-normal: var(--wa-color-red-50);
-  --wa-color-danger-border-loud: var(--wa-color-red-30);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-border-normal: var(--wa-color-danger-50);
+  --wa-color-danger-border-loud: var(--wa-color-danger-30);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-40);
   --wa-color-danger-on-loud: var(--wa-color-text-normal);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-50);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-30);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-40);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-40);
   --wa-color-neutral-on-loud: var(--wa-color-text-normal);
 }
 
@@ -77,51 +81,51 @@
    */
   --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-max);
+  --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-quiet: var(--wa-color-brand-min-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-80);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-border-loud: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-50);
+  --wa-color-success-border-loud: var(--wa-color-success-80);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-80);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-05);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-50);
+  --wa-color-warning-border-loud: var(--wa-color-warning-80);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-warning-05);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-50);
-  --wa-color-danger-border-loud: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-50);
+  --wa-color-danger-border-loud: var(--wa-color-danger-80);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-80);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-50);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
   --wa-color-neutral-on-loud: white;
 }
diff --git a/src/styles/themes/brutalist/color.css b/src/styles/themes/brutalist/color.css
index 9089ee416..98013f2a5 100644
--- a/src/styles/themes/brutalist/color.css
+++ b/src/styles/themes/brutalist/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/default.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -10,9 +14,9 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-border: var(--wa-color-gray-10);
+  --wa-color-surface-border: var(--wa-color-neutral-10);
 
-  --wa-color-text-link: var(--wa-color-gray-40);
+  --wa-color-text-link: var(--wa-color-neutral-40);
 
   --wa-color-shadow: rgb(0 0 0 / 0.2);
 
@@ -24,7 +28,7 @@
    */
   --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-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-max-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);
@@ -32,44 +36,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-60);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-max-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-80);
+  --wa-color-success-border-normal: var(--wa-color-success-60);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-40);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-60);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-max-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-border-normal: var(--wa-color-warning-60);
+  --wa-color-warning-border-loud: var(--wa-color-warning-40);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-40);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-80);
-  --wa-color-danger-border-normal: var(--wa-color-red-60);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-max-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-border-normal: var(--wa-color-danger-60);
+  --wa-color-danger-border-loud: var(--wa-color-danger-40);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-40);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -82,12 +86,12 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-gray-05);
-  --wa-color-surface-default: var(--wa-color-gray-10);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
-  --wa-color-surface-border: var(--wa-color-gray-40);
+  --wa-color-surface-raised: var(--wa-color-neutral-05);
+  --wa-color-surface-default: var(--wa-color-neutral-10);
+  --wa-color-surface-lowered: var(--wa-color-neutral-05);
+  --wa-color-surface-border: var(--wa-color-neutral-40);
 
-  --wa-color-text-link: var(--wa-color-gray-70);
+  --wa-color-text-link: var(--wa-color-neutral-70);
 
   --wa-color-shadow: rgb(0 0 0 / 0.5);
 
@@ -96,51 +100,51 @@
    */
   --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-min);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-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-quiet: var(--wa-color-brand-min-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-95);
   --wa-color-brand-on-loud: var(--wa-color-brand-10);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-green-80);
-  --wa-color-success-on-normal: var(--wa-color-green-95);
-  --wa-color-success-on-loud: var(--wa-color-green-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-80);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-95);
+  --wa-color-success-on-loud: var(--wa-color-success-10);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-95);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-80);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-95);
+  --wa-color-warning-on-loud: var(--wa-color-warning-10);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-95);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-80);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-95);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-50);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-95);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-90);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-95);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
diff --git a/src/styles/themes/classic/color.css b/src/styles/themes/classic/color.css
index c2ded2237..a42a72998 100644
--- a/src/styles/themes/classic/color.css
+++ b/src/styles/themes/classic/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/classic.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -22,44 +26,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-50);
+  --wa-color-success-on-normal: var(--wa-color-success-40);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-50);
+  --wa-color-warning-on-normal: var(--wa-color-warning-40);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-50);
+  --wa-color-danger-on-normal: var(--wa-color-danger-40);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -69,7 +73,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-normal: var(--wa-color-gray-80);
+  --wa-color-text-normal: var(--wa-color-neutral-80);
 
   /**
    * Semantic Colors
@@ -82,45 +86,45 @@
   --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-on-loud: var(--wa-color-gray-10);
+  --wa-color-brand-on-loud: var(--wa-color-neutral-10);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
-  --wa-color-success-on-loud: var(--wa-color-gray-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-70);
+  --wa-color-success-on-normal: var(--wa-color-success-80);
+  --wa-color-success-on-loud: var(--wa-color-neutral-10);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-gray-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-neutral-10);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-60);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: var(--wa-color-gray-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-60);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-80);
+  --wa-color-danger-on-loud: var(--wa-color-neutral-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
 }
diff --git a/src/styles/themes/default/color.css b/src/styles/themes/default/color.css
index bf027e1a4..da6fd8339 100644
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -1,4 +1,8 @@
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 /**
  * Foundational Colors and Semantic Colors
@@ -20,25 +24,25 @@
    * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
   --wa-color-surface-raised: white;
   --wa-color-surface-default: white;
-  --wa-color-surface-lowered: var(--wa-color-gray-95);
-  --wa-color-surface-border: var(--wa-color-gray-90);
+  --wa-color-surface-lowered: var(--wa-color-neutral-95);
+  --wa-color-surface-border: var(--wa-color-neutral-90);
 
   /* Text colors are used for standard text elements.
    * 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-normal: var(--wa-color-neutral-10);
+  --wa-color-text-quiet: var(--wa-color-neutral-40);
   --wa-color-text-link: var(--wa-color-brand-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);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
+  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 20%, transparent);
 
   /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
    * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
    * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
+    var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
     transparent
   );
 
@@ -61,7 +65,7 @@
    */
   --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-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-max-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);
@@ -69,44 +73,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-max-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-max-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-max-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -120,17 +124,17 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
+  --wa-color-surface-raised: var(--wa-color-neutral-10);
+  --wa-color-surface-default: var(--wa-color-neutral-05);
   --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
-  --wa-color-surface-border: var(--wa-color-gray-20);
+  --wa-color-surface-border: var(--wa-color-neutral-20);
 
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
   --wa-color-text-link: var(--wa-color-brand-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);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
 
   /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
   --wa-color-shadow: color-mix(
@@ -149,51 +153,51 @@
    */
   --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-max);
+  --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-quiet: var(--wa-color-brand-min-60);
   --wa-color-brand-on-normal: var(--wa-color-brand-70);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-60);
-  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-60);
+  --wa-color-success-on-normal: var(--wa-color-success-70);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-40);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-60);
+  --wa-color-warning-on-normal: var(--wa-color-warning-70);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-60);
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-40);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-60);
+  --wa-color-danger-on-normal: var(--wa-color-danger-70);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
 }
diff --git a/src/styles/themes/glossy/color.css b/src/styles/themes/glossy/color.css
index b8bed8836..831354aee 100644
--- a/src/styles/themes/glossy/color.css
+++ b/src/styles/themes/glossy/color.css
@@ -1,67 +1,7 @@
 @import url('../../color/elegant.css');
 @import url('../default/color.css');
 @import url('../../brand/indigo.css');
-
-:where(:root),
-:host,
-.wa-theme-glossy,
-.wa-light,
-.wa-dark .wa-invert {
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-link: var(--wa-color-brand-40);
-
-  --wa-color-focus: var(--wa-color-brand-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);
-  --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-on-loud: var(--wa-color-brand-on);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-link: var(--wa-color-brand-70);
-
-  --wa-color-focus: var(--wa-color-brand-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);
-  --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-on-loud: var(--wa-color-brand-on);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-}
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
diff --git a/src/styles/themes/matter/color.css b/src/styles/themes/matter/color.css
index 62648dcbf..d3e891796 100644
--- a/src/styles/themes/matter/color.css
+++ b/src/styles/themes/matter/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/mild.css');
 @import url('../default/color.css');
-@import url('../../brand/indigo.css');
+@import url('../../brand/purple.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -15,7 +19,7 @@
    */
 
   --wa-color-surface-raised: var(--wa-color-brand-95);
-  --wa-color-surface-lowered: var(--wa-color-gray-90);
+  --wa-color-surface-lowered: var(--wa-color-neutral-90);
 
   --wa-color-text-link: var(--wa-color-brand-40);
 
@@ -39,44 +43,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-40);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-40);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-40);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-20);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -102,43 +106,43 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-80);
   --wa-color-brand-on-loud: var(--wa-color-brand-10);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
-  --wa-color-success-on-loud: var(--wa-color-green-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-70);
+  --wa-color-success-on-normal: var(--wa-color-success-80);
+  --wa-color-success-on-loud: var(--wa-color-success-10);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-warning-10);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-80);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
diff --git a/src/styles/themes/mellow/color.css b/src/styles/themes/mellow/color.css
index aeca9a958..c8d945415 100644
--- a/src/styles/themes/mellow/color.css
+++ b/src/styles/themes/mellow/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/natural.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -14,9 +18,9 @@
    * Foundational Colors
    */
   --wa-color-surface-raised: white;
-  --wa-color-surface-default: var(--wa-color-gray-95);
-  --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-surface-default: var(--wa-color-neutral-95);
+  --wa-color-surface-lowered: var(--wa-color-neutral-90);
+  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
 
   --wa-color-text-normal: var(--wa-color-brand-20);
   --wa-color-text-quiet: var(--wa-color-brand-40);
@@ -29,7 +33,7 @@
    */
   --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-max);
+  --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-70);
   --wa-color-brand-border-loud: var(--wa-color-brand-60);
@@ -37,44 +41,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-90);
-  --wa-color-success-fill-normal: var(--wa-color-green-80);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-70);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-90);
+  --wa-color-success-fill-normal: var(--wa-color-success-80);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-80);
+  --wa-color-success-border-normal: var(--wa-color-success-70);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-70);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-80);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-border-normal: var(--wa-color-warning-70);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-90);
-  --wa-color-danger-fill-normal: var(--wa-color-red-80);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-80);
-  --wa-color-danger-border-normal: var(--wa-color-red-70);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-80);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-border-normal: var(--wa-color-danger-70);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -84,7 +88,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
+  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-30), transparent);
 
   --wa-color-text-normal: var(--wa-color-brand-90);
   --wa-color-text-quiet: var(--wa-color-brand-70);
@@ -92,6 +96,6 @@
   /**
    * Semantic Colors
    */
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
   --wa-color-neutral-on-loud: white;
 }
diff --git a/src/styles/themes/playful/color.css b/src/styles/themes/playful/color.css
index 1c02e288b..731bab72d 100644
--- a/src/styles/themes/playful/color.css
+++ b/src/styles/themes/playful/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/rudimentary.css');
 @import url('../default/color.css');
 @import url('../../brand/purple.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -10,7 +14,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-border: var(--wa-color-gray-80);
+  --wa-color-surface-border: var(--wa-color-neutral-80);
 
   --wa-color-text-link: var(--wa-color-yellow-40);
 
@@ -29,45 +33,45 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-90);
-  --wa-color-success-fill-normal: var(--wa-color-green-80);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-70);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-30);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: white;
+  --wa-color-success-fill-quiet: var(--wa-color-success-90);
+  --wa-color-success-fill-normal: var(--wa-color-success-80);
+  --wa-color-success-fill-loud: var(--wa-color-success);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-70);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-30);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
+  --wa-color-success-on-loud: var(--wa-color-success-on);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-70);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: white;
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-80);
+  --wa-color-warning-fill-loud: var(--wa-color-warning);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-70);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
+  --wa-color-warning-on-loud: var(--wa-color-warning-on);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-90);
-  --wa-color-danger-fill-normal: var(--wa-color-red-80);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-70);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-30);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: white;
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-80);
+  --wa-color-danger-fill-loud: var(--wa-color-danger);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-70);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
+  --wa-color-danger-on-loud: var(--wa-color-danger-on);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-95);
 }
 
 .wa-dark,
@@ -76,13 +80,13 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-gray-20);
-  --wa-color-surface-default: var(--wa-color-gray-10);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
-  --wa-color-surface-border: var(--wa-color-gray-20);
+  --wa-color-surface-raised: var(--wa-color-neutral-20);
+  --wa-color-surface-default: var(--wa-color-neutral-10);
+  --wa-color-surface-lowered: var(--wa-color-neutral-05);
+  --wa-color-surface-border: var(--wa-color-neutral-20);
 
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
   --wa-color-text-link: var(--wa-color-yellow-80);
 
   --wa-color-focus: var(--wa-color-brand-60);
@@ -98,47 +102,47 @@
   --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-quiet: var(--wa-color-brand-min-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-90);
   --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-40);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
-  --wa-color-success-on-loud: white;
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-40);
+  --wa-color-success-fill-loud: var(--wa-color-success);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-90);
+  --wa-color-success-on-loud: var(--wa-color-success-on);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-on-loud: white;
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-40);
+  --wa-color-warning-fill-loud: var(--wa-color-warning);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-90);
+  --wa-color-warning-on-loud: var(--wa-color-warning-on);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-40);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
-  --wa-color-danger-on-loud: white;
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-40);
+  --wa-color-danger-fill-loud: var(--wa-color-danger);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-90);
+  --wa-color-danger-on-loud: var(--wa-color-danger-on);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
 }
diff --git a/src/styles/themes/premium/color.css b/src/styles/themes/premium/color.css
index 5f71e430b..d28d65046 100644
--- a/src/styles/themes/premium/color.css
+++ b/src/styles/themes/premium/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/anodized.css');
 @import url('../default/color.css');
 @import url('../../brand/cyan.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -10,11 +14,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-border: var(--wa-color-gray-80);
-
-  --wa-color-text-link: var(--wa-color-brand-40);
-
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-surface-border: var(--wa-color-neutral-80);
 
   --wa-color-mix-hover: white 10%;
   --wa-color-mix-active: var(--wa-color-surface-default) 5%;
@@ -24,7 +24,7 @@
    */
   --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);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
   --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);
@@ -32,45 +32,45 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-70);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: var(--wa-color-green-20);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-80);
+  --wa-color-success-border-normal: var(--wa-color-success-70);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
+  --wa-color-success-on-loud: var(--wa-color-success-20);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-70);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-border-normal: var(--wa-color-warning-70);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
+  --wa-color-warning-on-loud: var(--wa-color-warning-20);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-80);
-  --wa-color-danger-border-normal: var(--wa-color-red-70);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-border-normal: var(--wa-color-danger-70);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-30);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-95);
 }
 
 .wa-dark,
@@ -79,17 +79,15 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-gray-30);
-  --wa-color-surface-default: var(--wa-color-gray-20);
-  --wa-color-surface-lowered: var(--wa-color-gray-10);
-  --wa-color-surface-border: var(--wa-color-gray-30);
+  --wa-color-surface-raised: var(--wa-color-neutral-30);
+  --wa-color-surface-default: var(--wa-color-neutral-20);
+  --wa-color-surface-lowered: var(--wa-color-neutral-10);
+  --wa-color-surface-border: var(--wa-color-neutral-30);
 
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-80);
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-80);
   --wa-color-text-link: var(--wa-color-brand-80);
 
-  --wa-color-focus: var(--wa-color-brand-60);
-
   --wa-color-mix-hover: white 20%;
   --wa-color-mix-active: var(--wa-color-surface-default) 10%;
 
@@ -98,51 +96,51 @@
     */
   --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);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-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-70);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
   --wa-color-brand-on-normal: var(--wa-color-brand-90);
   --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-30);
-  --wa-color-success-fill-normal: var(--wa-color-green-40);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-70);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
-  --wa-color-success-on-loud: var(--wa-color-green-20);
+  --wa-color-success-fill-quiet: var(--wa-color-success-30);
+  --wa-color-success-fill-normal: var(--wa-color-success-40);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-70);
+  --wa-color-success-on-quiet: var(--wa-color-success-80);
+  --wa-color-success-on-normal: var(--wa-color-success-90);
+  --wa-color-success-on-loud: var(--wa-color-success-20);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-40);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-70);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-on-normal: var(--wa-color-warning-90);
+  --wa-color-warning-on-loud: var(--wa-color-warning-20);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-30);
-  --wa-color-danger-fill-normal: var(--wa-color-red-40);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-70);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-40);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-70);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-on-normal: var(--wa-color-danger-90);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
diff --git a/src/styles/themes/tailspin/color.css b/src/styles/themes/tailspin/color.css
index 5af80c5ed..a7a8890de 100644
--- a/src/styles/themes/tailspin/color.css
+++ b/src/styles/themes/tailspin/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/vogue.css');
 @import url('../default/color.css');
 @import url('../../brand/indigo.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -16,8 +20,8 @@
 
   --wa-color-focus: var(--wa-color-brand-50);
 
-  --wa-color-mix-hover: var(--wa-color-gray-80) 20%;
-  --wa-color-mix-active: var(--wa-color-gray-80) 10%;
+  --wa-color-mix-hover: var(--wa-color-neutral-80) 20%;
+  --wa-color-mix-active: var(--wa-color-neutral-80) 10%;
 
   /**
    * Semantic Colors
@@ -32,44 +36,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-80), transparent);
-  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70) 60%, transparent);
-  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-60) 70%, transparent);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-95) 85%, transparent);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-80), transparent);
+  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-70) 60%, transparent);
+  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-60) 70%, transparent);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-95) 85%, transparent);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
-  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70) 60%, transparent);
-  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-60) 70%, transparent);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-95) 85%, transparent);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-80), transparent);
+  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-70) 60%, transparent);
+  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-60) 70%, transparent);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-95) 85%, transparent);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-80), transparent);
-  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70) 60%, transparent);
-  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-60) 70%, transparent);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-95) 85%, transparent);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-80), transparent);
+  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-70) 60%, transparent);
+  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-60) 70%, transparent);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-95) 85%, transparent);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
-  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-80), transparent);
-  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-70) 60%, transparent);
-  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-60) 70%, transparent);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-95) 85%, transparent);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-10);
+  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
+  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-70) 60%, transparent);
+  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-60) 70%, transparent);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 
   /**
@@ -88,15 +92,15 @@
   --wa-color-surface-border: rgb(255 255 255 / 0.1);
 
   --wa-color-text-normal: white;
-  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
   --wa-color-text-link: var(--wa-color-brand-70);
 
   --wa-color-shadow: rgb(0 0 0 / 0.2);
 
   --wa-color-focus: var(--wa-color-brand-60);
 
-  --wa-color-mix-hover: var(--wa-color-gray-70) 20%;
-  --wa-color-mix-active: var(--wa-color-gray-70) 10%;
+  --wa-color-mix-hover: var(--wa-color-neutral-70) 20%;
+  --wa-color-mix-active: var(--wa-color-neutral-70) 10%;
 
   /**
    * Semantic Colors
@@ -107,47 +111,47 @@
   --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-on-quiet: var(--wa-color-brand-min-60);
+  --wa-color-brand-on-normal: var(--wa-color-brand-min-70);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-20), transparent);
-  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30) 60%, transparent);
-  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-40) 70%, transparent);
-  --wa-color-success-on-quiet: var(--wa-color-green-60);
-  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-10) 90%, transparent);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent);
+  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent);
+  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-60);
+  --wa-color-success-on-normal: var(--wa-color-success-min-70);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-10) 90%, transparent);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
-  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30) 60%, transparent);
-  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-40) 70%, transparent);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent);
+  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent);
+  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-60);
+  --wa-color-warning-on-normal: var(--wa-color-warning-min-70);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-10) 90%, transparent);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-20), transparent);
-  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30) 60%, transparent);
-  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-40) 70%, transparent);
-  --wa-color-danger-on-quiet: var(--wa-color-red-60);
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent);
+  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent);
+  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-60);
+  --wa-color-danger-on-normal: var(--wa-color-danger-min-70);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-10) 90%, transparent);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
   --wa-color-neutral-fill-loud: white;
-  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-20), transparent);
-  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-30) 60%, transparent);
-  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-40) 70%, transparent);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
+  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-20), transparent);
+  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-30) 60%, transparent);
+  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-40) 70%, transparent);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
diff --git a/src/styles/warning/blue.css b/src/styles/warning/blue.css
new file mode 100644
index 000000000..df03400ea
--- /dev/null
+++ b/src/styles/warning/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-blue {
+  --wa-color-warning-95: var(--wa-color-blue-95);
+  --wa-color-warning-90: var(--wa-color-blue-90);
+  --wa-color-warning-80: var(--wa-color-blue-80);
+  --wa-color-warning-70: var(--wa-color-blue-70);
+  --wa-color-warning-60: var(--wa-color-blue-60);
+  --wa-color-warning-50: var(--wa-color-blue-50);
+  --wa-color-warning-40: var(--wa-color-blue-40);
+  --wa-color-warning-30: var(--wa-color-blue-30);
+  --wa-color-warning-20: var(--wa-color-blue-20);
+  --wa-color-warning-10: var(--wa-color-blue-10);
+  --wa-color-warning-05: var(--wa-color-blue-05);
+  --wa-color-warning: var(--wa-color-blue);
+
+  --wa-color-warning-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-blue-max-50);
+  --wa-color-warning-min-50: var(--wa-color-blue-min-50);
+  --wa-color-warning-max-60: var(--wa-color-blue-max-60);
+  --wa-color-warning-min-60: var(--wa-color-blue-min-60);
+  --wa-color-warning-max-70: var(--wa-color-blue-max-70);
+  --wa-color-warning-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-warning-on: var(--wa-color-blue-on);
+}
diff --git a/src/styles/warning/cyan.css b/src/styles/warning/cyan.css
new file mode 100644
index 000000000..8c813de0f
--- /dev/null
+++ b/src/styles/warning/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-cyan {
+  --wa-color-warning-95: var(--wa-color-cyan-95);
+  --wa-color-warning-90: var(--wa-color-cyan-90);
+  --wa-color-warning-80: var(--wa-color-cyan-80);
+  --wa-color-warning-70: var(--wa-color-cyan-70);
+  --wa-color-warning-60: var(--wa-color-cyan-60);
+  --wa-color-warning-50: var(--wa-color-cyan-50);
+  --wa-color-warning-40: var(--wa-color-cyan-40);
+  --wa-color-warning-30: var(--wa-color-cyan-30);
+  --wa-color-warning-20: var(--wa-color-cyan-20);
+  --wa-color-warning-10: var(--wa-color-cyan-10);
+  --wa-color-warning-05: var(--wa-color-cyan-05);
+  --wa-color-warning: var(--wa-color-cyan);
+
+  --wa-color-warning-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-warning-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-warning-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-warning-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-warning-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-warning-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-warning-on: var(--wa-color-cyan-on);
+}
diff --git a/src/styles/warning/gray.css b/src/styles/warning/gray.css
new file mode 100644
index 000000000..82a1b99ee
--- /dev/null
+++ b/src/styles/warning/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-gray {
+  --wa-color-warning-95: var(--wa-color-gray-95);
+  --wa-color-warning-90: var(--wa-color-gray-90);
+  --wa-color-warning-80: var(--wa-color-gray-80);
+  --wa-color-warning-70: var(--wa-color-gray-70);
+  --wa-color-warning-60: var(--wa-color-gray-60);
+  --wa-color-warning-50: var(--wa-color-gray-50);
+  --wa-color-warning-40: var(--wa-color-gray-40);
+  --wa-color-warning-30: var(--wa-color-gray-30);
+  --wa-color-warning-20: var(--wa-color-gray-20);
+  --wa-color-warning-10: var(--wa-color-gray-10);
+  --wa-color-warning-05: var(--wa-color-gray-05);
+  --wa-color-warning: var(--wa-color-gray);
+
+  --wa-color-warning-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-gray-max-50);
+  --wa-color-warning-min-50: var(--wa-color-gray-min-50);
+  --wa-color-warning-max-60: var(--wa-color-gray-max-60);
+  --wa-color-warning-min-60: var(--wa-color-gray-min-60);
+  --wa-color-warning-max-70: var(--wa-color-gray-max-70);
+  --wa-color-warning-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-warning-on: var(--wa-color-gray-on);
+}
diff --git a/src/styles/warning/green.css b/src/styles/warning/green.css
new file mode 100644
index 000000000..7f5f6569d
--- /dev/null
+++ b/src/styles/warning/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-green {
+  --wa-color-warning-95: var(--wa-color-green-95);
+  --wa-color-warning-90: var(--wa-color-green-90);
+  --wa-color-warning-80: var(--wa-color-green-80);
+  --wa-color-warning-70: var(--wa-color-green-70);
+  --wa-color-warning-60: var(--wa-color-green-60);
+  --wa-color-warning-50: var(--wa-color-green-50);
+  --wa-color-warning-40: var(--wa-color-green-40);
+  --wa-color-warning-30: var(--wa-color-green-30);
+  --wa-color-warning-20: var(--wa-color-green-20);
+  --wa-color-warning-10: var(--wa-color-green-10);
+  --wa-color-warning-05: var(--wa-color-green-05);
+  --wa-color-warning: var(--wa-color-green);
+
+  --wa-color-warning-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-green-max-50);
+  --wa-color-warning-min-50: var(--wa-color-green-min-50);
+  --wa-color-warning-max-60: var(--wa-color-green-max-60);
+  --wa-color-warning-min-60: var(--wa-color-green-min-60);
+  --wa-color-warning-max-70: var(--wa-color-green-max-70);
+  --wa-color-warning-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-warning-on: var(--wa-color-green-on);
+}
diff --git a/src/styles/warning/indigo.css b/src/styles/warning/indigo.css
new file mode 100644
index 000000000..db10ebc8b
--- /dev/null
+++ b/src/styles/warning/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-indigo {
+  --wa-color-warning-95: var(--wa-color-indigo-95);
+  --wa-color-warning-90: var(--wa-color-indigo-90);
+  --wa-color-warning-80: var(--wa-color-indigo-80);
+  --wa-color-warning-70: var(--wa-color-indigo-70);
+  --wa-color-warning-60: var(--wa-color-indigo-60);
+  --wa-color-warning-50: var(--wa-color-indigo-50);
+  --wa-color-warning-40: var(--wa-color-indigo-40);
+  --wa-color-warning-30: var(--wa-color-indigo-30);
+  --wa-color-warning-20: var(--wa-color-indigo-20);
+  --wa-color-warning-10: var(--wa-color-indigo-10);
+  --wa-color-warning-05: var(--wa-color-indigo-05);
+  --wa-color-warning: var(--wa-color-indigo);
+
+  --wa-color-warning-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-warning-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-warning-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-warning-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-warning-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-warning-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-warning-on: var(--wa-color-indigo-on);
+}
diff --git a/src/styles/warning/orange.css b/src/styles/warning/orange.css
new file mode 100644
index 000000000..df46f463d
--- /dev/null
+++ b/src/styles/warning/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-orange {
+  --wa-color-warning-95: var(--wa-color-orange-95);
+  --wa-color-warning-90: var(--wa-color-orange-90);
+  --wa-color-warning-80: var(--wa-color-orange-80);
+  --wa-color-warning-70: var(--wa-color-orange-70);
+  --wa-color-warning-60: var(--wa-color-orange-60);
+  --wa-color-warning-50: var(--wa-color-orange-50);
+  --wa-color-warning-40: var(--wa-color-orange-40);
+  --wa-color-warning-30: var(--wa-color-orange-30);
+  --wa-color-warning-20: var(--wa-color-orange-20);
+  --wa-color-warning-10: var(--wa-color-orange-10);
+  --wa-color-warning-05: var(--wa-color-orange-05);
+  --wa-color-warning: var(--wa-color-orange);
+
+  --wa-color-warning-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-orange-max-50);
+  --wa-color-warning-min-50: var(--wa-color-orange-min-50);
+  --wa-color-warning-max-60: var(--wa-color-orange-max-60);
+  --wa-color-warning-min-60: var(--wa-color-orange-min-60);
+  --wa-color-warning-max-70: var(--wa-color-orange-max-70);
+  --wa-color-warning-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-warning-on: var(--wa-color-orange-on);
+}
diff --git a/src/styles/warning/pink.css b/src/styles/warning/pink.css
new file mode 100644
index 000000000..de06dd08c
--- /dev/null
+++ b/src/styles/warning/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-pink {
+  --wa-color-warning-95: var(--wa-color-pink-95);
+  --wa-color-warning-90: var(--wa-color-pink-90);
+  --wa-color-warning-80: var(--wa-color-pink-80);
+  --wa-color-warning-70: var(--wa-color-pink-70);
+  --wa-color-warning-60: var(--wa-color-pink-60);
+  --wa-color-warning-50: var(--wa-color-pink-50);
+  --wa-color-warning-40: var(--wa-color-pink-40);
+  --wa-color-warning-30: var(--wa-color-pink-30);
+  --wa-color-warning-20: var(--wa-color-pink-20);
+  --wa-color-warning-10: var(--wa-color-pink-10);
+  --wa-color-warning-05: var(--wa-color-pink-05);
+  --wa-color-warning: var(--wa-color-pink);
+
+  --wa-color-warning-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-pink-max-50);
+  --wa-color-warning-min-50: var(--wa-color-pink-min-50);
+  --wa-color-warning-max-60: var(--wa-color-pink-max-60);
+  --wa-color-warning-min-60: var(--wa-color-pink-min-60);
+  --wa-color-warning-max-70: var(--wa-color-pink-max-70);
+  --wa-color-warning-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-warning-on: var(--wa-color-pink-on);
+}
diff --git a/src/styles/warning/purple.css b/src/styles/warning/purple.css
new file mode 100644
index 000000000..e0cf12e68
--- /dev/null
+++ b/src/styles/warning/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-purple {
+  --wa-color-warning-95: var(--wa-color-purple-95);
+  --wa-color-warning-90: var(--wa-color-purple-90);
+  --wa-color-warning-80: var(--wa-color-purple-80);
+  --wa-color-warning-70: var(--wa-color-purple-70);
+  --wa-color-warning-60: var(--wa-color-purple-60);
+  --wa-color-warning-50: var(--wa-color-purple-50);
+  --wa-color-warning-40: var(--wa-color-purple-40);
+  --wa-color-warning-30: var(--wa-color-purple-30);
+  --wa-color-warning-20: var(--wa-color-purple-20);
+  --wa-color-warning-10: var(--wa-color-purple-10);
+  --wa-color-warning-05: var(--wa-color-purple-05);
+  --wa-color-warning: var(--wa-color-purple);
+
+  --wa-color-warning-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-purple-max-50);
+  --wa-color-warning-min-50: var(--wa-color-purple-min-50);
+  --wa-color-warning-max-60: var(--wa-color-purple-max-60);
+  --wa-color-warning-min-60: var(--wa-color-purple-min-60);
+  --wa-color-warning-max-70: var(--wa-color-purple-max-70);
+  --wa-color-warning-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-warning-on: var(--wa-color-purple-on);
+}
diff --git a/src/styles/warning/red.css b/src/styles/warning/red.css
new file mode 100644
index 000000000..1d9db95d3
--- /dev/null
+++ b/src/styles/warning/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-red {
+  --wa-color-warning-95: var(--wa-color-red-95);
+  --wa-color-warning-90: var(--wa-color-red-90);
+  --wa-color-warning-80: var(--wa-color-red-80);
+  --wa-color-warning-70: var(--wa-color-red-70);
+  --wa-color-warning-60: var(--wa-color-red-60);
+  --wa-color-warning-50: var(--wa-color-red-50);
+  --wa-color-warning-40: var(--wa-color-red-40);
+  --wa-color-warning-30: var(--wa-color-red-30);
+  --wa-color-warning-20: var(--wa-color-red-20);
+  --wa-color-warning-10: var(--wa-color-red-10);
+  --wa-color-warning-05: var(--wa-color-red-05);
+  --wa-color-warning: var(--wa-color-red);
+
+  --wa-color-warning-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-red-max-50);
+  --wa-color-warning-min-50: var(--wa-color-red-min-50);
+  --wa-color-warning-max-60: var(--wa-color-red-max-60);
+  --wa-color-warning-min-60: var(--wa-color-red-min-60);
+  --wa-color-warning-max-70: var(--wa-color-red-max-70);
+  --wa-color-warning-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-warning-on: var(--wa-color-red-on);
+}
diff --git a/src/styles/warning/yellow.css b/src/styles/warning/yellow.css
new file mode 100644
index 000000000..0a37be680
--- /dev/null
+++ b/src/styles/warning/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-yellow {
+  --wa-color-warning-95: var(--wa-color-yellow-95);
+  --wa-color-warning-90: var(--wa-color-yellow-90);
+  --wa-color-warning-80: var(--wa-color-yellow-80);
+  --wa-color-warning-70: var(--wa-color-yellow-70);
+  --wa-color-warning-60: var(--wa-color-yellow-60);
+  --wa-color-warning-50: var(--wa-color-yellow-50);
+  --wa-color-warning-40: var(--wa-color-yellow-40);
+  --wa-color-warning-30: var(--wa-color-yellow-30);
+  --wa-color-warning-20: var(--wa-color-yellow-20);
+  --wa-color-warning-10: var(--wa-color-yellow-10);
+  --wa-color-warning-05: var(--wa-color-yellow-05);
+  --wa-color-warning: var(--wa-color-yellow);
+
+  --wa-color-warning-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-warning-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-warning-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-warning-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-warning-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-warning-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-warning-on: var(--wa-color-yellow-on);
+}

From 1d03f7bee0d921548139396bb48c46d7c5a49666 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Fri, 14 Mar 2025 09:29:04 -0400
Subject: [PATCH 25/25] [Icon-button] Make `--background-color-hover` work +
 remaining 3 interaction properties (#801)

* [Icon-button] Make `--background-color-hover` work, fixes #800

* [Icon-button] Introduce `--text-color-hover`, `--background-color-active`, `--text-color-active`

* Oops
---
 src/components/icon-button/icon-button.css | 10 +++++++---
 src/components/icon-button/icon-button.ts  |  5 ++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css
index 38ef368f1..cf12fe75b 100644
--- a/src/components/icon-button/icon-button.css
+++ b/src/components/icon-button/icon-button.css
@@ -1,5 +1,8 @@
 :host {
   --background-color-hover: var(--wa-color-neutral-fill-quiet);
+  --text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  --background-color-active: transparent;
+  --text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
 
   display: inline-block;
   color: var(--wa-color-text-quiet);
@@ -22,12 +25,13 @@
 
 :host(:not([disabled])) .icon-button:hover,
 :host(:not([disabled])) .icon-button:focus-visible {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  background-color: var(--background-color-hover);
+  color: var(--text-color-hover);
 }
 
 :host(:not([disabled])) .icon-button:active {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  background-color: var(--background-color-active);
+  color: var(--text-color-active);
 }
 
 .icon-button:focus {
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index 0a7b62834..64ec7475e 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -17,7 +17,10 @@ import styles from './icon-button.css';
  * @event blur - Emitted when the icon button loses focus.
  * @event focus - Emitted when the icon button gains focus.
  *
- * @cssproperty --background-color-hover - The color of the button's background on hover.
+ * @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover.
+ * @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`.
+ * @cssproperty --text-color-hover - The color of the button's background on hover.
+ * @cssproperty --text-color-active - The color of the button's background on `:active`.
  *
  * @csspart base - The component's base wrapper.
  */