From 4931de8eb4ed6661a33c5842906d360656e7446b Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Tue, 25 Feb 2025 09:47:28 -0500
Subject: [PATCH 01/18] Fix text color for `filled` appearance

---
 src/styles/utilities/appearance.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css
index afe0440d6..332107173 100644
--- a/src/styles/utilities/appearance.css
+++ b/src/styles/utilities/appearance.css
@@ -45,7 +45,8 @@
 
   --outlined-border-color: var(--wa-color-border-normal);
 
-  --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+  --text-color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+  --text-color-hover: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
 }
 
 .wa-plain,

From d1de9a9a73e1c0d7097e4ad7e87d9c1cd0342d25 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Tue, 25 Feb 2025 09:48:50 -0500
Subject: [PATCH 02/18] Fix incorrect sizing tokens in `size` utilities

---
 src/styles/utilities/size.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styles/utilities/size.css b/src/styles/utilities/size.css
index 410cb3d98..a591d1191 100644
--- a/src/styles/utilities/size.css
+++ b/src/styles/utilities/size.css
@@ -9,10 +9,10 @@
 
 :host {
   /* Components are meant to override these */
-  --size-xs: var(--wa-space-xs);
-  --size-s: var(--wa-space-s);
-  --size-m: var(--wa-space-m);
-  --size-l: var(--wa-space-l);
+  --size-xs: var(--wa-font-size-xs);
+  --size-s: var(--wa-font-size-s);
+  --size-m: var(--wa-font-size-m);
+  --size-l: var(--wa-font-size-l);
 
   --space-xs: var(--wa-space-xs);
   --space-s: var(--wa-space-s);

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 03/18] `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 04/18] 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 05/18] 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 06/18] 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 07/18] 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 08/18] 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 09/18] 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 10/18] 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 11/18] 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 12/18] 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 13/18] 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 14/18] 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 15/18] 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 16/18] 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 17/18] 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 18/18] 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) */;