Delete clamped-colors.njk

No longer necessary

docs/docs/experimental/clamped-colors.njk

@@ -1,47 +0,0 @@
----
-title: Clamped brand 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 %}
-
-<table class="colors">
-  <thead>
-    <tr>
-      <th></th>
-      <th class="core-column">Core tint</th>
-      {% for tint in tints -%}
-      <th>{{ tint }}</th>
-      {%- endfor %}
-    </tr>
-  </thead>
-{% for hue in hues -%}
-<tr class="wa-brand-{{ 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);">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></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>
-    </td>
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>
-
-<style>
-.core-column .color.swatch::before {
-  counter-reset: key var(--wa-color-brand-key);
-  content: counter(key);
-}
-</style>

docs/docs/tokens/color.md

@@ -1,6 +1,7 @@
 ---
 title: Color
 description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
+wide: true
 ---
 
 <style>
@@ -43,6 +44,18 @@ description: Ensure consistent use of color and readable contrast with Web Aweso
     color: var(--wa-color-brand-on-loud);
     text-align: center;
   }
+  .colors.bounded,
+  .core-column {
+    .color.swatch {
+      --key: var(--core-key);
+      --lt-60: calc(clamp(0, 60 - var(--key), 1) * 100%);
+
+      &::before {
+        counter-reset: key var(--key);
+        content: counter(key);
+      }
+    }
+  }
 </style>
 
 Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
@@ -64,21 +77,125 @@ You can use these numbers to ensure accessible color contrast per [WCAG 2.1 succ
 - A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
 - A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
 
-Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
+Each Web Awesome palette defines eight literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
+Additionally, the "core" (most vibrant) color of each scale is mapped to `--wa-color-{hue}`.
 
+{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
+
+<table class="colors">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="core-column">Core tint</th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
 {% for hue in hues -%}
-<div class="color-name">{{ hue | capitalize }}</div>
-<ul class="color-group">
-  {% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
-    <li class="color-preview">
+<tr style="--core-key: var(--wa-color-{{ hue }}-key)">
+  <th>{{ hue | capitalize }}</th>
+  <td class="core-column" style="--color: var(--wa-color-{{ hue }})">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on);">
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+    </div>
+  </td>
+  {% for tint in tints -%}
+    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
       <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>
-      <small>{{ tint }}</small>
-    </li>
-  {%- endfor %}
-</ul>
+    </td>
+  {%- endfor -%}
+</tr>
 {%- endfor %}
+</table>
+
+## Bounded Core Colors
+
+In addition to the literal color scales above and their core colors,
+we also define variables for "bounded" core colors, which resolve to the core color of the hue's scale,
+but clamped to a specific tint.
+
+This is useful for using core colors while ensuring a minimum contrast ratio with other colors in your theme.
+
+### Upper Bound Core Colors
+
+These variables resolve to the core color as long as it is equal or below the specified tint,
+and to the specified tint otherwise.
+
+{% set tints_clamped = ['40', '50', '60', '70'] %}
+
+<table class="colors bounded">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="core-column">Core tint</th>
+      {% for tint in tints_clamped -%}
+      <th>max-{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr style="--core-key: var(--wa-color-{{ hue }}-key)">
+  <th>{{ hue | capitalize }}</th>
+  <td class="core-column">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on);">
+      {{ palettes[paletteId][hue].maxChromaTint -}}
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+    </div>
+  </td>
+  {% for tint in tints_clamped -%}
+    <td>
+      <div class="color swatch" style="
+        --key: min(var(--core-key), {{ tint }});
+        color: color-mix(in oklab, var(--wa-color-{{ hue }}-10), white var(--lt-60));
+        background-color: var(--wa-color-{{ hue }}-max-{{ tint }});">
+        <wa-copy-button value="--wa-color-{{ hue }}-max-{{ tint }}" copy-label="--wa-color-{{ hue }}-max-{{ tint }}"></wa-copy-button>
+      </div>
+    </td>
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
+
+### Lower Bound Core Colors
+
+These variables resolve to the core color as long as it is at least at the specified tint,
+and to the specified tint otherwise.
+
+<table class="colors bounded">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="core-column">Core tint</th>
+      {% for tint in tints_clamped -%}
+      <th>min-{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr style="--core-key: var(--wa-color-{{ hue }}-key)">
+  <th>{{ hue | capitalize }}</th>
+  <td class="core-column">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on);">
+      {{ palettes[paletteId][hue].maxChromaTint -}}
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+    </div>
+  </td>
+  {% for tint in tints_clamped -%}
+    <td>
+      <div class="color swatch" style="
+        --key: max(var(--core-key), {{ tint }});
+        color: color-mix(in oklab, var(--wa-color-{{ hue }}-10), white var(--lt-60));
+        background-color: var(--wa-color-{{ hue }}-min-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-min-{{ tint }}" copy-label="--wa-color-{{ hue }}-min-{{ tint }}"></wa-copy-button>
+      </div>
+    </td>
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
 
 ## Foundational Colors
 

scripts/build.js

@@ -12,6 +12,7 @@ import { dirname, join, relative } from 'path';
 import process from 'process';
 import copy from 'recursive-copy';
 import { fileURLToPath } from 'url';
+import { preprocessStylesheet } from './preprocess-css.js';
 import { cdnDir, distDir, docsDir, rootDir, runScript, siteDir } from './utils.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -36,6 +37,7 @@ async function buildAll() {
     await generateManifest();
     await generateReactWrappers();
     await generateTypes();
+    await preprocessStyles();
     await generateStyles();
 
     // copy everything to unbundled before we generate bundles.
@@ -105,6 +107,23 @@ function generateReactWrappers() {
   return Promise.resolve();
 }
 
+/**
+ * Generate preprocessed CSS
+ */
+async function preprocessStyles() {
+  const preprocessedCSSFiles = await globby(join(rootDir, 'src/styles/**/*.css.njk'));
+
+  if (preprocessedCSSFiles.length > 0) {
+    spinner.start('Preprocessing stylesheets');
+
+    for (let filePath of preprocessedCSSFiles) {
+      await preprocessStylesheet(filePath);
+    }
+
+    spinner.succeed();
+  }
+}
+
 /**
  * Copies theme stylesheets to the dist.
  */
@@ -323,6 +342,7 @@ if (isDeveloping) {
   bs.init(
     {
       startPath: '/',
+      open: false,
       port,
       logLevel: 'silent',
       logPrefix: '[webawesome]',
@@ -371,6 +391,7 @@ if (isDeveloping) {
     try {
       const isTestFile = filename.includes('.test.ts');
       const isCssStylesheet = filename.includes('.css');
+      const isPreprocessedStylesheet = filename.endsWith('.css.njk');
       const isComponent =
         filename.includes('components/') && filename.includes('.ts') && !isCssStylesheet && !isTestFile;
 
@@ -381,6 +402,10 @@ if (isDeveloping) {
 
       await regenerateBundle();
 
+      if (isPreprocessedStylesheet || filename.endsWith('src/styles/data.js')) {
+        await preprocessStyles();
+      }
+
       // Copy stylesheets when CSS files change
       if (isCssStylesheet) {
         await generateStyles();

scripts/preprocess-css.js

@@ -0,0 +1,61 @@
+import { readFile, writeFile } from 'fs/promises';
+import nunjucks from 'nunjucks';
+import * as prettier from 'prettier';
+import prettierConfig from '../prettier.config.js';
+import * as globalData from '../src/styles/data.js';
+
+const prelude = inputFilename => `/* DO NOT EDIT THIS FILE. It is generated from "${inputFilename}" */`;
+
+let env = nunjucks.configure({ autoescape: false });
+let filenameVariables = Object.keys(globalData)
+  .filter(key => key.endsWith('s'))
+  .map(key => key.slice(0, -1));
+let filenameVariablesRegex = RegExp(`\\{\\{\\s*(${filenameVariables.join('|')})\\s*\\}\\}`, 'g');
+
+export async function preprocessStylesheet(inputPath) {
+  const content = await readFile(inputPath, 'utf-8');
+  let outputPath = inputPath.replace(/\.njk$/, '');
+  let filename = outputPath.split('/').pop();
+
+  if (filenameVariablesRegex.test(filename)) {
+    // NOTE only supports a single variable right now
+    filenameVariablesRegex.lastIndex = 0;
+    let ret = [];
+
+    for (let match of filename.matchAll(filenameVariablesRegex)) {
+      let variable = match[1];
+      let values = globalData[variable + 's'];
+
+      for (let value of values) {
+        let data = { [variable]: value };
+        let css = await renderCSS(content, { data, inputPath, outputPath });
+
+        // Now use Nunjucks *again*, to render the actual filename
+        let localOutputFilePath = env.renderString(outputPath, data);
+
+        ret.push(writeFile(localOutputFilePath, css, 'utf-8'));
+      }
+    }
+
+    return Promise.all(ret);
+  } else {
+    let css = await renderCSS(content, { inputPath, outputPath });
+    return writeFile(outputPath, css, 'utf-8');
+  }
+
+  // TODO add generated files to .gitignore?
+}
+
+export async function renderCSS(content, { data, inputPath, outputPath } = {}) {
+  let inputFilename = inputPath.split('/').pop();
+  data = data ? { ...globalData, ...data } : globalData;
+  let css = env.renderString(content, data);
+
+  if (prelude) {
+    css = prelude(inputFilename) + '\n' + css;
+  }
+
+  css = await prettier.format(css, { ...prettierConfig, filepath: outputPath });
+
+  return css;
+}

src/styles/brand/base.css

@@ -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);
-}

src/styles/brand/blue.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-blue-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-blue-gte-40);
+
+  --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-lt-80: var(--wa-color-blue-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-blue-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-blue-max-40);
+  --wa-color-brand-min-40: var(--wa-color-blue-min-40);
+  --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);
 }

src/styles/brand/cyan.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-cyan-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-cyan-gte-40);
+
+  --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-lt-80: var(--wa-color-cyan-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-cyan-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-cyan-max-40);
+  --wa-color-brand-min-40: var(--wa-color-cyan-min-40);
+  --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);
 }

src/styles/brand/gray.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-gray-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-gray-gte-40);
+
+  --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-lt-80: var(--wa-color-gray-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-gray-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-gray-max-40);
+  --wa-color-brand-min-40: var(--wa-color-gray-min-40);
+  --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);
 }

src/styles/brand/green.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-green-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-green-gte-40);
+
+  --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-lt-80: var(--wa-color-green-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-green-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-green-max-40);
+  --wa-color-brand-min-40: var(--wa-color-green-min-40);
+  --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);
 }

src/styles/brand/indigo.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-indigo-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-indigo-gte-40);
+
+  --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-lt-80: var(--wa-color-indigo-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-indigo-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-indigo-max-40);
+  --wa-color-brand-min-40: var(--wa-color-indigo-min-40);
+  --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);
 }

src/styles/brand/orange.css

@@ -1,21 +0,0 @@
-@import url('base.css');
-
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']),
-.wa-brand-orange {
-  --wa-color-brand-95: var(--wa-color-orange-95);
-  --wa-color-brand-90: var(--wa-color-orange-90);
-  --wa-color-brand-80: var(--wa-color-orange-80);
-  --wa-color-brand-70: var(--wa-color-orange-70);
-  --wa-color-brand-60: var(--wa-color-orange-60);
-  --wa-color-brand-50: var(--wa-color-orange-50);
-  --wa-color-brand-40: var(--wa-color-orange-40);
-  --wa-color-brand-30: var(--wa-color-orange-30);
-  --wa-color-brand-20: var(--wa-color-orange-20);
-  --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);
-}

src/styles/brand/pink.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-pink-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-pink-gte-40);
+
+  --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-lt-80: var(--wa-color-pink-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-pink-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-pink-max-40);
+  --wa-color-brand-min-40: var(--wa-color-pink-min-40);
+  --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);
 }

src/styles/brand/purple.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-purple-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-purple-gte-40);
+
+  --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-lt-80: var(--wa-color-purple-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-purple-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-purple-max-40);
+  --wa-color-brand-min-40: var(--wa-color-purple-min-40);
+  --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);
 }

src/styles/brand/red.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-red-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-red-gte-40);
+
+  --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-lt-80: var(--wa-color-red-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-red-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-red-max-40);
+  --wa-color-brand-min-40: var(--wa-color-red-min-40);
+  --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);
 }

src/styles/brand/yellow.css

@@ -1,5 +1,4 @@
-@import url('base.css');
-
+/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -18,4 +17,30 @@
   --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-40: var(--wa-color-yellow-lt-40);
+  --wa-color-brand-gte-40: var(--wa-color-yellow-gte-40);
+
+  --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-lt-80: var(--wa-color-yellow-lt-80);
+  --wa-color-brand-gte-80: var(--wa-color-yellow-gte-80);
+
+  --wa-color-brand-max-40: var(--wa-color-yellow-max-40);
+  --wa-color-brand-min-40: var(--wa-color-yellow-min-40);
+  --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);
 }

src/styles/brand/{{ hue }}.css.njk

@@ -0,0 +1,22 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-{{ hue }} {
+  {%- for tint in tints | reverse %}
+  --wa-color-brand-{{ tint }}: var(--wa-color-{{ hue }}-{{ tint }});
+  {%- endfor %}
+  --wa-color-brand: var(--wa-color-{{ hue }});
+  --wa-color-brand-key: var(--wa-color-{{ hue }}-key);
+
+  {% for tint in ['40', '50', '60', '70', '80'] %}
+  --wa-color-brand-lt-{{ tint }}: var(--wa-color-{{ hue }}-lt-{{ tint }});
+  --wa-color-brand-gte-{{ tint }}: var(--wa-color-{{ hue }}-gte-{{ tint }});
+  {% endfor %}
+  {% for tint in ['40', '50', '60', '70'] %}
+  --wa-color-brand-max-{{ tint }}: var(--wa-color-{{ hue }}-max-{{ tint }});
+  --wa-color-brand-min-{{ tint }}: var(--wa-color-{{ hue }}-min-{{ tint }});
+  {%- endfor %}
+
+  --wa-color-brand-on: var(--wa-color-{{ hue }}-on);
+}

src/styles/color/anodized.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

src/styles/color/base.css

@@ -0,0 +1,403 @@
+/* DO NOT EDIT THIS FILE. It is generated from "base.css.njk" */
+
+: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-40: calc(clamp(0, 40 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-40: calc(100% - var(--wa-color-red-lt-40));
+  --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-red-lt-80: calc(clamp(0, 80 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-80: calc(100% - var(--wa-color-red-lt-80));
+
+  --wa-color-yellow-lt-40: calc(clamp(0, 40 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-40: calc(100% - var(--wa-color-yellow-lt-40));
+  --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-yellow-lt-80: calc(clamp(0, 80 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-80: calc(100% - var(--wa-color-yellow-lt-80));
+
+  --wa-color-green-lt-40: calc(clamp(0, 40 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-40: calc(100% - var(--wa-color-green-lt-40));
+  --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-green-lt-80: calc(clamp(0, 80 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-80: calc(100% - var(--wa-color-green-lt-80));
+
+  --wa-color-cyan-lt-40: calc(clamp(0, 40 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-40: calc(100% - var(--wa-color-cyan-lt-40));
+  --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-cyan-lt-80: calc(clamp(0, 80 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-80: calc(100% - var(--wa-color-cyan-lt-80));
+
+  --wa-color-blue-lt-40: calc(clamp(0, 40 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-40: calc(100% - var(--wa-color-blue-lt-40));
+  --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-blue-lt-80: calc(clamp(0, 80 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-80: calc(100% - var(--wa-color-blue-lt-80));
+
+  --wa-color-indigo-lt-40: calc(clamp(0, 40 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-40: calc(100% - var(--wa-color-indigo-lt-40));
+  --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-indigo-lt-80: calc(clamp(0, 80 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-80: calc(100% - var(--wa-color-indigo-lt-80));
+
+  --wa-color-purple-lt-40: calc(clamp(0, 40 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-40: calc(100% - var(--wa-color-purple-lt-40));
+  --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-purple-lt-80: calc(clamp(0, 80 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-80: calc(100% - var(--wa-color-purple-lt-80));
+
+  --wa-color-pink-lt-40: calc(clamp(0, 40 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-40: calc(100% - var(--wa-color-pink-lt-40));
+  --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-pink-lt-80: calc(clamp(0, 80 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-80: calc(100% - var(--wa-color-pink-lt-80));
+
+  --wa-color-gray-lt-40: calc(clamp(0, 40 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-40: calc(100% - var(--wa-color-gray-lt-40));
+  --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));
+  --wa-color-gray-lt-80: calc(clamp(0, 80 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-80: calc(100% - var(--wa-color-gray-lt-80));
+
+  /*
+   * 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-40: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-40), var(--wa-color-red-40));
+  --wa-color-red-min-40: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-40), var(--wa-color-red-40));
+  --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-yellow-max-40: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-40),
+    var(--wa-color-yellow-40)
+  );
+  --wa-color-yellow-min-40: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-40),
+    var(--wa-color-yellow-40)
+  );
+  --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-40: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-40),
+    var(--wa-color-green-40)
+  );
+  --wa-color-green-min-40: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-40),
+    var(--wa-color-green-40)
+  );
+  --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-40: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-40), var(--wa-color-cyan-40));
+  --wa-color-cyan-min-40: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-40),
+    var(--wa-color-cyan-40)
+  );
+  --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-40: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-40), var(--wa-color-blue-40));
+  --wa-color-blue-min-40: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-40),
+    var(--wa-color-blue-40)
+  );
+  --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-40: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-40),
+    var(--wa-color-indigo-40)
+  );
+  --wa-color-indigo-min-40: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-40),
+    var(--wa-color-indigo-40)
+  );
+  --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-40: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-40),
+    var(--wa-color-purple-40)
+  );
+  --wa-color-purple-min-40: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-40),
+    var(--wa-color-purple-40)
+  );
+  --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-40: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-40), var(--wa-color-pink-40));
+  --wa-color-pink-min-40: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-40),
+    var(--wa-color-pink-40)
+  );
+  --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-40: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-40), var(--wa-color-gray-40));
+  --wa-color-gray-min-40: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-40),
+    var(--wa-color-gray-40)
+  );
+  --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-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);
+}

src/styles/color/base.css.njk

@@ -0,0 +1,34 @@
+{% for class in ['theme', 'palette', 'brand'] %}
+:where([class^='wa-{{ class }}-'], [class*=' wa-{{ class }}-']),
+{%- endfor %}
+: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
+   */
+  {% for hue in hues %}
+  {% for tint in ['40', '50', '60', '70', '80'] %}
+  --wa-color-{{ hue }}-lt-{{ tint }}: calc(clamp(0, {{ tint }} - var(--wa-color-{{ hue }}-key), 1) * 100%);
+  --wa-color-{{ hue }}-gte-{{ tint }}: calc(100% - var(--wa-color-{{ hue }}-lt-{{ tint }}));
+  {%- endfor %}
+  {% endfor %}
+
+  /*
+   * 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
+   */
+  {% for hue in hues %}
+  {% for tint in ['40', '50', '60', '70'] %}
+  --wa-color-{{ hue }}-max-{{ tint }}: color-mix(in oklab, var(--wa-color-{{ hue }}) var(--wa-color-{{ hue }}-lt-{{ tint }}), var(--wa-color-{{ hue }}-{{ tint }}));
+  --wa-color-{{ hue }}-min-{{ tint }}: color-mix(in oklab, var(--wa-color-{{ hue }}) var(--wa-color-{{ hue }}-gte-{{ tint }}), var(--wa-color-{{ hue }}-{{ tint }}));
+  {%- endfor %}
+  {%- endfor %}
+
+  /* Text color: white if key < 60, {hue}-10 otherwise */
+  {% for hue in hues %}
+  --wa-color-{{ hue }}-on: color-mix(in oklab, var(--wa-color-{{ hue }}-10) var(--wa-color-{{ hue }}-gte-60), white);
+  {%- endfor %}
+}

src/styles/color/bright.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

src/styles/color/classic.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

src/styles/color/default.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

src/styles/color/elegant.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

src/styles/color/mild.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

src/styles/color/natural.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

src/styles/color/rudimentary.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

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]+):\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
 export const rawCSS = {};

src/styles/color/scripts/tintless.js

@@ -6,7 +6,7 @@
 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 =>

src/styles/color/vogue.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),

src/styles/data.js

@@ -0,0 +1,9 @@
+/**
+ * Any data relating to the design system.
+ */
+export const hues = ['red', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
+export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
+export const variants = ['neutral', 'brand', 'success', 'warning', 'danger'];
+export const roles = ['fill', 'border', 'on'];
+export const attention_levels = ['loud', 'normal', 'quiet'];
+export const semantic_color_types = roles.map(layer => attention_levels.map(priority => layer + '-' + priority)).flat();

src/styles/themes/awesome/color.css

@@ -17,7 +17,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-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);
@@ -77,7 +77,7 @@
    */
   --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-max-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);

src/styles/themes/brutalist/color.css

@@ -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-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);
@@ -96,7 +96,7 @@
    */
   --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);

src/styles/themes/default/color.css

@@ -1,3 +1,4 @@
+@import url('scales.css');
 @import url('../../brand/blue.css');
 
 /**
@@ -20,25 +21,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 +62,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,14 +70,14 @@
   --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-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);
@@ -89,24 +90,24 @@
   --wa-color-warning-on-normal: var(--wa-color-yellow-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-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 +121,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,7 +150,7 @@
    */
   --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-max-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);
@@ -157,14 +158,14 @@
   --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-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);
@@ -177,23 +178,23 @@
   --wa-color-warning-on-normal: var(--wa-color-yellow-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-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);
 }

src/styles/themes/default/scales.css

@@ -0,0 +1,92 @@
+/* DO NOT EDIT THIS FILE. It is generated from "scales.css.njk" */
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']) {
+  --wa-color-success-05: var(--wa-color-green-05);
+  --wa-color-success-10: var(--wa-color-green-10);
+  --wa-color-success-20: var(--wa-color-green-20);
+  --wa-color-success-30: var(--wa-color-green-30);
+  --wa-color-success-40: var(--wa-color-green-40);
+  --wa-color-success-50: var(--wa-color-green-50);
+  --wa-color-success-60: var(--wa-color-green-60);
+  --wa-color-success-70: var(--wa-color-green-70);
+  --wa-color-success-80: var(--wa-color-green-80);
+  --wa-color-success-90: var(--wa-color-green-90);
+  --wa-color-success-95: var(--wa-color-green-95);
+  --wa-color-success: var(--wa-color-green);
+
+  --wa-color-success-max-40: var(--wa-color-max-green-40);
+  --wa-color-success-min-40: var(--wa-color-min-green-40);
+  --wa-color-success-max-50: var(--wa-color-max-green-50);
+  --wa-color-success-min-50: var(--wa-color-min-green-50);
+  --wa-color-success-max-60: var(--wa-color-max-green-60);
+  --wa-color-success-min-60: var(--wa-color-min-green-60);
+  --wa-color-success-max-70: var(--wa-color-max-green-70);
+  --wa-color-success-min-70: var(--wa-color-min-green-70);
+
+  --wa-color-warning-05: var(--wa-color-yellow-05);
+  --wa-color-warning-10: var(--wa-color-yellow-10);
+  --wa-color-warning-20: var(--wa-color-yellow-20);
+  --wa-color-warning-30: var(--wa-color-yellow-30);
+  --wa-color-warning-40: var(--wa-color-yellow-40);
+  --wa-color-warning-50: var(--wa-color-yellow-50);
+  --wa-color-warning-60: var(--wa-color-yellow-60);
+  --wa-color-warning-70: var(--wa-color-yellow-70);
+  --wa-color-warning-80: var(--wa-color-yellow-80);
+  --wa-color-warning-90: var(--wa-color-yellow-90);
+  --wa-color-warning-95: var(--wa-color-yellow-95);
+  --wa-color-warning: var(--wa-color-yellow);
+
+  --wa-color-warning-max-40: var(--wa-color-max-yellow-40);
+  --wa-color-warning-min-40: var(--wa-color-min-yellow-40);
+  --wa-color-warning-max-50: var(--wa-color-max-yellow-50);
+  --wa-color-warning-min-50: var(--wa-color-min-yellow-50);
+  --wa-color-warning-max-60: var(--wa-color-max-yellow-60);
+  --wa-color-warning-min-60: var(--wa-color-min-yellow-60);
+  --wa-color-warning-max-70: var(--wa-color-max-yellow-70);
+  --wa-color-warning-min-70: var(--wa-color-min-yellow-70);
+
+  --wa-color-danger-05: var(--wa-color-red-05);
+  --wa-color-danger-10: var(--wa-color-red-10);
+  --wa-color-danger-20: var(--wa-color-red-20);
+  --wa-color-danger-30: var(--wa-color-red-30);
+  --wa-color-danger-40: var(--wa-color-red-40);
+  --wa-color-danger-50: var(--wa-color-red-50);
+  --wa-color-danger-60: var(--wa-color-red-60);
+  --wa-color-danger-70: var(--wa-color-red-70);
+  --wa-color-danger-80: var(--wa-color-red-80);
+  --wa-color-danger-90: var(--wa-color-red-90);
+  --wa-color-danger-95: var(--wa-color-red-95);
+  --wa-color-danger: var(--wa-color-red);
+
+  --wa-color-danger-max-40: var(--wa-color-max-red-40);
+  --wa-color-danger-min-40: var(--wa-color-min-red-40);
+  --wa-color-danger-max-50: var(--wa-color-max-red-50);
+  --wa-color-danger-min-50: var(--wa-color-min-red-50);
+  --wa-color-danger-max-60: var(--wa-color-max-red-60);
+  --wa-color-danger-min-60: var(--wa-color-min-red-60);
+  --wa-color-danger-max-70: var(--wa-color-max-red-70);
+  --wa-color-danger-min-70: var(--wa-color-min-red-70);
+
+  --wa-color-neutral-05: var(--wa-color-gray-05);
+  --wa-color-neutral-10: var(--wa-color-gray-10);
+  --wa-color-neutral-20: var(--wa-color-gray-20);
+  --wa-color-neutral-30: var(--wa-color-gray-30);
+  --wa-color-neutral-40: var(--wa-color-gray-40);
+  --wa-color-neutral-50: var(--wa-color-gray-50);
+  --wa-color-neutral-60: var(--wa-color-gray-60);
+  --wa-color-neutral-70: var(--wa-color-gray-70);
+  --wa-color-neutral-80: var(--wa-color-gray-80);
+  --wa-color-neutral-90: var(--wa-color-gray-90);
+  --wa-color-neutral-95: var(--wa-color-gray-95);
+  --wa-color-neutral: var(--wa-color-gray);
+
+  --wa-color-neutral-max-40: var(--wa-color-max-gray-40);
+  --wa-color-neutral-min-40: var(--wa-color-min-gray-40);
+  --wa-color-neutral-max-50: var(--wa-color-max-gray-50);
+  --wa-color-neutral-min-50: var(--wa-color-min-gray-50);
+  --wa-color-neutral-max-60: var(--wa-color-max-gray-60);
+  --wa-color-neutral-min-60: var(--wa-color-min-gray-60);
+  --wa-color-neutral-max-70: var(--wa-color-max-gray-70);
+  --wa-color-neutral-min-70: var(--wa-color-min-gray-70);
+}

src/styles/themes/default/scales.css.njk

@@ -0,0 +1,15 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']) {
+  {% for variant, hue in { success: 'green', warning: 'yellow', danger: 'red', neutral: 'gray' } -%}
+  {%- for tint in tints %}
+  --wa-color-{{ variant }}-{{ tint }}: var(--wa-color-{{ hue }}-{{ tint }});
+  {%- endfor %}
+  --wa-color-{{ variant }}: var(--wa-color-{{ hue }});
+
+  {% for tint in ['40', '50', '60', '70'] %}
+  --wa-color-{{ variant }}-max-{{ tint }}: var(--wa-color-max-{{ hue }}-{{ tint }});
+  --wa-color-{{ variant }}-min-{{ tint }}: var(--wa-color-min-{{ hue }}-{{ tint }});
+  {%- endfor %}
+  {% endfor -%}
+}

src/styles/themes/mellow/color.css

@@ -29,7 +29,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-max-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);

src/styles/utilities/variants.css

@@ -1,7 +1,4 @@
-/**
- * Do not edit this file directly. It is generated via variants.css.js
- */
-
+/* DO NOT EDIT THIS FILE. It is generated from "variants.css.njk" */
 /**
  * Register color properties so that the space toggle hack can work.
  */
@@ -64,7 +61,6 @@
  * Element defaults.
    We want these to resolve to inherit when inside a variant, and only be applied when not inside an explicit variant.
  */
-
 :host(wa-button),
 .wa-button,
 button,

src/styles/utilities/variants.css.js

@@ -1,68 +0,0 @@
-/**
- * Generate variants.css
- * To use: node variants.css.js > variants.css
- */
-const variants = ['neutral', 'brand', 'success', 'warning', 'danger'];
-const roles = ['fill', 'border', 'on'];
-const noise = ['loud', 'normal', 'quiet'];
-const defaults = {
-  neutral: [
-    [':host(wa-button)', '.wa-button', 'button', "input[type='button']", "input[type='submit']"],
-    [':host(wa-tag)', '.wa-tag'],
-  ],
-  brand: [
-    [':host(wa-callout)', '.wa-callout'],
-    [':host(wa-badge)', '.wa-badge'],
-  ],
-};
-const types = roles.map(layer => noise.map(priority => layer + '-' + priority)).flat();
-
-let ret = comment('Do not edit this file directly. It is generated via variants.css.js').trimStart();
-
-ret += comment('Register color properties so that the space toggle hack can work.');
-
-for (let type of types) {
-  ret += cssRule(`@property --wa-color-${type}`, [
-    `syntax: '<color>';`,
-    'inherits: true;',
-    'initial-value: transparent;',
-  ]);
-}
-
-ret += comment(`Element defaults.
-   We want these to resolve to inherit when inside a variant, and only be applied when not inside an explicit variant.`);
-
-for (let variant in defaults) {
-  let selector = defaults[variant];
-  let declarations = types.map(type => `--wa-color-${type}: var(--wa-no-variant, var(--wa-color-${variant}-${type}));`);
-
-  ret += cssRule(selector, declarations);
-}
-
-ret += comment('Variants');
-
-for (let variant of variants) {
-  let selector = [`.wa-${variant}`, `:host([variant='${variant}'])`];
-
-  if (variant === 'neutral') {
-    selector.unshift(':root');
-  }
-
-  let declarations = types.map(type => `--wa-color-${type}: var(--wa-color-${variant}-${type});`);
-  ret += cssRule(selector, declarations);
-}
-
-ret += cssRule([variants.map(variant => `.wa-${variant}`), ':host([variant])'], '--wa-no-variant: /* space toggle */;');
-
-console.log(ret.trimEnd());
-
-function cssRule(selector, declarations) {
-  selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
-  declarations = Array.isArray(declarations) ? declarations.flat().join('\n') : declarations;
-  declarations = declarations.replace(/^/gm, '  ');
-  return `\n${selector} {\n${declarations}\n}\n`;
-}
-
-function comment(text) {
-  return ['\n/**', ` * ${text}`, ' */\n'].join('\n');
-}

src/styles/utilities/variants.css.njk

@@ -0,0 +1,48 @@
+/**
+ * Register color properties so that the space toggle hack can work.
+ */
+{% for type in semantic_color_types %}
+@property --wa-color-{{ type }} {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+{% endfor %}
+
+/**
+ * Element defaults.
+   We want these to resolve to inherit when inside a variant, and only be applied when not inside an explicit variant.
+ */
+:host(wa-button), .wa-button, button, input[type='button'], input[type='submit'],
+:host(wa-tag), .wa-tag {
+  {%- for type in semantic_color_types %}
+  --wa-color-{{ type }}: var(--wa-no-variant, var(--wa-color-neutral-{{ type }}));
+  {%- endfor %}
+}
+
+:host(wa-callout), .wa-callout,
+:host(wa-badge), .wa-badge {
+  {%- for type in semantic_color_types %}
+  --wa-color-{{ type }}: var(--wa-no-variant, var(--wa-color-brand-{{ type }}));
+  {%- endfor %}
+}
+
+/**
+ * Variants
+ */
+{% for variant in variants %}
+{{ ':root,' if variant === 'neutral' }}
+.wa-{{ variant }},
+:host([variant='{{ variant }}']) {
+  {%- for type in semantic_color_types %}
+  --wa-color-{{ type }}: var(--wa-color-{{ variant }}-{{ type }});
+  {%- endfor %}
+}
+{%- endfor %}
+
+{% for variant in variants %}
+.wa-{{ variant }},
+{%- endfor %}
+:host([variant]) {
+  --wa-no-variant: /* space toggle */;
+}