reflect href on buttons

Add curated orange to all palettes, closes #657 (#798 )
* Adjust `orange` in Default palette * Adjust `orange`, `red`, and `yellow` in Classic palette * Adjust `orange` in Anodized palette * Adjust `orange` in Bright palette * Adjust `orange` in Mild palette * Adjust `orange` in Natural palette * Adjust `orange` in Vogue palette * Adjust `orange` in Rudimentary palette * Adjust `orange` in Elegant palette
2026-01-19 15:34:15 +00:00 · 2025-03-20 14:36:13 -04:00 · 2025-03-18 16:08:31 -04:00 · 2025-03-18 13:04:24 -04:00 · 2025-03-14 09:29:04 -04:00 · 2025-03-13 17:07:03 -04:00
116 changed files with 3997 additions and 1301 deletions
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -1,3 +1,4 @@
+import * as path from 'node:path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
@@ -16,7 +17,10 @@ import { searchPlugin } from './_utils/search.js';

 import process from 'process';

-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
 const isDev = process.argv.includes('--develop');

@@ -24,6 +28,12 @@ const globalData = {
  package: packageData,
  isAlpha,
  layout: 'page.njk',
+
+  server: {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  },
 };

 const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
@@ -55,7 +65,12 @@ export default function (eleventyConfig) {

  // Shortcodes - {% shortCode arg1, arg2 %}
  eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+  });
+
+  // Turns `{% server_variable "foo" %} into `{{ server.foo | safe }}`
+  eleventyConfig.addShortcode('server', function (property) {
+    return `{{ server.${property} | safe }}`;
  });

  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
@@ -131,7 +146,8 @@ export default function (eleventyConfig) {
      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
      .map(component => {
        const name = component.tagName.split(/wa-/)[1];
-        return `./dist/components/${name}/${name}.js`;
+        const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+        return path.join(componentDirectory, 'components', name, `${name}.js`);
      });

    eleventyConfig.addPlugin(litPlugin, {
--- 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"]
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -50,6 +50,9 @@
            Search
            <kbd slot="suffix" class="only-desktop">/</kbd>
          </wa-button>
+
+          {# Login #}
+          {% server "loginOrAvatar" %}
        </div>
      </header>

@@ -76,14 +79,19 @@
        </aside>
      {% endif %}

+
      {# Main #}
      <main id="content">
        {# Expandable outline #}
+        {% if hasOutline %}
        <nav id="outline-expandable">
          <details class="outline-links">
            <summary>On this page</summary>
          </details>
        </nav>
+        {% endif %}
+
+        <div id="flashes">{% server "flashes" %}</div>

        {% block header %}
          {% include 'breadcrumbs.njk' %}
--- a/docs/_includes/head.njk
+++ b/docs/_includes/head.njk
@@ -47,3 +47,7 @@
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
 <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
 <link rel="stylesheet" href="/dist/styles/forms.css" />
+
+
+{# Used by Web Awesome App to inject other assets into the head. #}
+{% server "head" %}
--- a/docs/_layouts/page.njk
+++ b/docs/_layouts/page.njk
@@ -1,4 +1,9 @@
-{% set hasSidebar = true %}
-{% set hasOutline = false %}
+{% if hasSidebar == undefined  %}
+  {% set hasSidebar = true %}
+{% endif %}
+
+{% if hasOutline == undefined  %}
+  {% set hasOutline = false %}
+{% endif %}

 {% extends "../_includes/base.njk" %}
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -18,11 +18,15 @@
    tweaking: tweaking.chroma,
    'tweaking-chroma': tweaking.chroma,
    'tweaking-hue': tweaking.chroma,
-    'tweaked-chroma': tweaked.chroma,
-    'tweaked-hue': tweaked.hue,
-    'tweaked-any': tweaked.chroma || tweaked.hue
+    'tweaking-gray-chroma': tweaking.grayChroma,
+    'tweaked-chroma': tweaked?.chroma,
+    'tweaked-hue': tweaked?.hue,
+    'tweaked-any': tweaked
  }"
-  :style="{ '--chroma-scale': chromaScale }">
+  :style="{
+    '--chroma-scale': chromaScale,
+    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
+    }">

  {% include 'breadcrumbs.njk' %}

@@ -36,6 +40,9 @@
  <div class="block-info">
    <code class="class">.wa-palette-{{ paletteId }}</code>
    {% include '../_includes/status.njk' %}
+    {% if not isPro %}
+    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
+    {% endif %}
  </div>
  {% if description %}
  <p class="summary">
@@ -48,18 +55,20 @@

 {% set maxChroma = 0 %}

-<wa-callout size="small" class="tweaked-callout" variant="brand">
+<wa-callout size="small" class="tweaked-callout" variant="warning">
  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
   This palette has been tweaked.
-   <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="removeTweak(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
+   <div class="wa-cluster wa-gap-xs">
+    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
+   </div>

-  <wa-button @click="reset" appearance="outlined">
+  <wa-button @click="reset()" appearance="outlined" variant="danger">
    <span slot="prefix" class="icon-modifier">
      <wa-icon name="circle-xmark" variant="regular"></wa-icon>
    </span>
    Reset
  </wa-button>
-  <wa-button v-if="!saved" @click="save">
+  <wa-button v-if="!saved" @click="save" variant="success">
    <span slot="prefix" class="icon-modifier">
      <wa-icon name="sidebar" variant="regular"></wa-icon>
      <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
@@ -81,25 +90,67 @@
 {# Initialize to last hue before gray #}
 {%- set hueBefore = hues[hues|length - 2] -%}
 {% for hue in hues -%}
-{%- set coreColor = palettes[paletteId][hue][palettes[paletteId][hue].maxChromaTint] -%}
+{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
+{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
 {%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
-<tr data-hue="{{ hue }}" class="color-scale" :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
+{% if hue === 'gray' %}
+<tr data-hue="{{ hue }}" class="color-scale"
+    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
+{% else %}
+<tr data-hue="{{ hue }}" class="color-scale"
+    :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
+{% endif %}
  <th>
    {{ hue | capitalize }}
  </th>
-  <td class="core-column" style="--color: var(--wa-color-{{ hue }})">
-    {% if hue !== 'gray' %}
-    {%- set hueAfter = hues[loop.index0 + 1] -%}
-    {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
-    {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
-    {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
+  <td class="core-column"
+      style="--color: var(--wa-color-{{ hue }})"
+      :style="{
+        '--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
+        '--color-gray-undertone': colors[grayColor][{{coreTint}}],
+        '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
+      }">
    <wa-dropdown>
-    <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
-    </div>
-    <div class="popup">
+      <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch"
+      style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});"
+      >
+        {{ palettes[paletteId][hue].maxChromaTint }}
+        <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
+      </div>
+      <div class="popup">
+      {% if hue === 'gray' %}
+        <wa-radio-group class="core-color" orientation="horizontal" v-model="grayColor">
+          {% for h in hues -%}
+            {%- if h !== 'gray' -%}
+              <wa-radio-button id="gray-undertone-{{ h }}" value="{{ h }}" label="{{ h | capitalize }}" style="--color: var(--wa-color-{{ h }})"></wa-radio-button>
+              <wa-tooltip for="gray-undertone-{{ h }}" hoist>
+                {{ h | capitalize }}
+              </wa-tooltip>
+            {%- endif -%}
+          {%- endfor -%}
+          <div slot="label">
+            Gray undertone
+          </div>
+        </wa-radio-group>
+        <div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
+          <wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
+          value="0" min="0" :max="maxGrayChroma" step="0.01"
+            @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
+            <div slot="label">
+              Gray colorfulness
+              <wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+            </div>
+          </wa-slider>
+          <div class="label-min">Neutral</div>
+          <div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
+        </div>
+      {% else %}
+      {%- set hueAfter = hues[loop.index0 + 1] -%}
+      {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
+      {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
+      {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
+
      <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
        <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
          min="{{ minShift }}" max="{{ maxShift }}" step="1"
@@ -113,23 +164,23 @@
        <div class="label-min">More {{hueBefore}}</div>
        <div class="label-max">More {{hueAfter}}</div>
      </div>
+      {%- set hueBefore = hue -%}
+      {% endif %}
      <div class="wa-gap-s">
-        <code>--wa-color-{{ hue }}</code>
-        <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
-      </div>
-    </div>`
+          <code>--wa-color-{{ hue }}</code>
+          <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+        </div>
+      </div>`
    </wa-dropdown>
-    {%- set hueBefore = hue -%}
-    {% else %}
-    <div id="core-{{ hue }}-swatch" class="color swatch" data-tint="core" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-    </div>
-    {% endif %}
  </td>
  {% for tint in tints -%}
    {%- set color = palettes[paletteId][hue][tint] -%}
-    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
-      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
+        :style="{
+          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
+          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
+        }">
+      <div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
      </div>
    </td>
@@ -144,7 +195,8 @@
 <div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
 :class="{ tweaked: chromaScale !== 1 }"
 style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
-  <wa-slider name="chroma-scale" v-model="chromaScale" value="1" step="0.01"
+  <wa-slider name="chroma-scale" ref="chromaScaleSlider"
+    v-model="chromaScale" value="1" step="0.01"
    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
    @input="tweaking.chroma = true"
    @change="tweaking.chroma = false">
--- a/docs/assets/scripts/sidebar-tweaks.js
+++ b/docs/assets/scripts/sidebar-tweaks.js
@@ -13,7 +13,9 @@ sidebar.palettes = {
    sidebar.updateCurrent();
  },

-  saved: localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [],
+  updateSaved() {
+    this.saved = localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [];
+  },

  save(saved = this.saved) {
    this.saved = saved ?? [];
@@ -26,6 +28,9 @@ sidebar.palettes = {
  },
 };

+sidebar.palettes.updateSaved();
+addEventListener('storage', event => sidebar.palettes.updateSaved());
+
 sidebar.palette = {
  getUid() {
    let savedPalettes = sidebar.palettes.saved;
@@ -36,7 +41,7 @@ sidebar.palette = {
    }

    // Find first available number
-    for (let i = 1; i < savedPalettes.length + 1; i++) {
+    for (let i = 1; i <= savedPalettes.length + 1; i++) {
      if (!uids.has(i)) {
        return i;
      }
@@ -94,7 +99,7 @@ sidebar.palette = {
    sidebar.palettes.save(savedPalettes);

    if (sidebar.palette.equals(globalThis.paletteApp?.saved, palette)) {
-      paletteApp.saved = null;
+      paletteApp.postDelete();
    }
  },

@@ -184,18 +189,52 @@ sidebar.updateCurrent = function () {

  // We want to start from the longest prefix
  prefixes.reverse();
+  let candidates;
+  let matchingPrefix;

  for (let prefix of prefixes) {
-    let a = document.querySelector(`#sidebar a[href^="${prefix}"]`);
+    candidates = document.querySelectorAll(`#sidebar a[href^="${prefix}"]`);

-    if (a) {
-      for (let current of document.querySelectorAll('#sidebar a.current')) {
-        current.classList.remove('current');
-      }
-      a.classList.add('current');
+    if (candidates.length > 0) {
+      matchingPrefix = prefix;
      break;
    }
  }
+
+  if (!matchingPrefix) {
+    // Abort mission
+    return;
+  }
+
+  if (matchingPrefix === pathParts.at(-1)) {
+    // Full path matches, check search
+    if (location.search) {
+      candidates = [...candidates];
+
+      let searchParams = new URLSearchParams(location.search);
+
+      if (searchParams.has('uid')) {
+        // Only consider candidates with the same uid
+        candidates = candidates.filter(a => {
+          let params = new URLSearchParams(a.search);
+          return params.get('uid') === searchParams.get('uid');
+        });
+      } else {
+        // Sort candidates based on how many params they have in common, in descending order
+        candidates = candidates.sort((a, b) => {
+          return countSharedSearchParams(searchParams, b.search) - countSharedSearchParams(searchParams, a.search);
+        });
+      }
+    }
+  }
+
+  if (candidates.length > 0) {
+    for (let current of document.querySelectorAll('#sidebar a.current')) {
+      current.classList.remove('current');
+    }
+
+    candidates[0].classList.add('current');
+  }
 };

 sidebar.render = function () {
@@ -204,3 +243,12 @@ sidebar.render = function () {

 sidebar.render();
 window.addEventListener('turbo:render', () => sidebar.render());
+
+function countSharedSearchParams(searchParams, search) {
+  if (!search || search === '?') {
+    return 0;
+  }
+
+  let params = new URLSearchParams(search);
+  return [...searchParams.keys()].filter(k => params.get(k) === searchParams.get(k)).length;
+}
--- a/docs/assets/scripts/tweak.js
+++ b/docs/assets/scripts/tweak.js
@@ -1,6 +1,6 @@
 /**
 * Get import code for remixed themes and tweaked palettes.
 */
-export { theme as getThemeCode } from './tweak/code.js';
+export { getThemeCode } from './tweak/code.js';
 export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js';
 export { default as Permalink } from './tweak/permalink.js';
--- a/docs/assets/scripts/tweak/code.js
+++ b/docs/assets/scripts/tweak/code.js
@@ -25,18 +25,23 @@ export function cssLiteral(value, options = {}) {
  }
 }

-export function theme(base, params, options) {
+// Params in correct order
+export const themeParams = ['colors', 'palette', 'brand', 'typography'];
+
+export function getThemeCode(base, params, options) {
  let ret = [];

  if (base) {
    ret.push(urls.theme(base));
  }

-  ret.push(
-    ...Object.entries(params)
-      .filter(([aspect, id]) => Boolean(id))
-      .map(([aspect, id]) => urls[aspect](id)),
-  );
+  for (let aspect of themeParams) {
+    let value = params[aspect];
+
+    if (value) {
+      ret.push(urls[aspect](value));
+    }
+  }

  return ret.map(url => cssImport(url, options)).join('\n');
 }
--- a/docs/assets/scripts/tweak/data.js
+++ b/docs/assets/scripts/tweak/data.js
@@ -29,6 +29,45 @@ export const hueRanges = {
  pink: { min: 320, max: 365 }, // 45
 };

+export const moreHue = {
+  red: 'Redder',
+  orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/
+  yellow: 'Yellower',
+  green: 'Greener',
+  cyan: 'More cyan',
+  blue: 'Bluer',
+  indigo: 'More indigo',
+  pink: 'Pinker',
+};
+
+/**
+ * Max gray chroma (% of chroma of undertone) per hue
+ */
+export const maxGrayChroma = {
+  red: 0.2,
+  orange: 0.2,
+  yellow: 0.25,
+  green: 0.25,
+  cyan: 0.3,
+  blue: 0.35,
+  indigo: 0.35,
+  purple: 0.3,
+  pink: 0.25,
+};
+
+export const docsURLs = {
+  colors: '/docs/themes/',
+  palette: '/docs/palettes/',
+  typography: '/docs/themes/',
+};
+
+export const icons = {
+  colors: 'palette',
+  palette: 'swatchbook',
+  brand: 'droplet',
+  typography: 'font-case',
+};
+
 export const hues = Object.keys(hueRanges);

 export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
--- a/docs/assets/scripts/tweak/util.js
+++ b/docs/assets/scripts/tweak/util.js
@@ -0,0 +1,36 @@
+export function normalizeAngles(angles) {
+  // First, normalize
+  angles = angles.map(h => ((h % 360) + 360) % 360);
+
+  // Remove top and bottom 25% and find average
+  let averageHue =
+    angles
+      .toSorted((a, b) => a - b)
+      .slice(angles.length / 4, -angles.length / 4)
+      .reduce((a, b) => a + b, 0) / angles.length;
+
+  for (let i = 0; i < angles.length; i++) {
+    let h = angles[i];
+    let prevHue = angles[i - 1];
+    let delta = h - prevHue;
+
+    if (Math.abs(delta) > 180) {
+      let equivalent = [h + 360, h - 360];
+      // Offset hue to minimize difference in the direction that brings it closer to the average
+      let delta = h - averageHue;
+
+      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
+        angles[i] = equivalent[0];
+      } else {
+        angles[i] = equivalent[1];
+      }
+    }
+  }
+
+  return angles;
+}
+
+export function subtractAngles(θ1, θ2) {
+  let [a, b] = normalizeAngles([θ1, θ2]);
+  return a - b;
+}
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -19,13 +19,13 @@ icon: card

  <div slot="footer">
    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
+    <wa-rating label="Rating"></wa-rating>
  </div>
 </wa-card>

 <style>
  .card-overview {
-    max-width: 300px;
+    width: 300px;
  }

  .card-overview small {
--- a/docs/docs/experimental/clamped-colors.njk
+++ b/docs/docs/experimental/clamped-colors.njk
@@ -1,13 +1,10 @@
 ---
-title: Clamped brand tokens
+title: Clamped Color Tokens
 layout: block
 ---

-{% set tints = ['40-max', '50-max', '60-max', '40-min', '50-min', '60-min'] %}
-
-{% for hue in hues %}
-<link href="/dist/styles/brand/{{ hue }}.css" rel="stylesheet">
-{% endfor %}
+{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
+{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}

 <table class="colors">
  <thead>
@@ -20,18 +17,18 @@ layout: block
    </tr>
  </thead>
 {% for hue in hues -%}
-<tr class="wa-brand-{{ hue }}">
+<tr class="wa-color-{{ hue }}">
  <th>{{ hue | capitalize }}</th>
  <td class="core-column">
-    <div class="color swatch" style="background-color: var(--wa-color-brand); color: var(--wa-color-brand-on);">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
      {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></wa-copy-button>
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
    </div>
  </td>
  {% for tint in tints -%}
    <td>
-      <div class="color swatch" style="background-color: var(--wa-color-brand-{{ tint }})">
-        <wa-copy-button value="--wa-color-brand-{{ tint }}" copy-label="--wa-color-brand-{{ tint }}"></wa-copy-button>
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
      </div>
    </td>
  {%- endfor -%}
@@ -41,7 +38,7 @@ layout: block

 <style>
 .core-column .color.swatch::before {
-  counter-reset: key var(--wa-color-brand-key);
+  counter-reset: key var(--key);
  content: counter(key);
 }
-</style>
+</style>
--- a/docs/docs/native/input.md
+++ b/docs/docs/native/input.md
@@ -42,6 +42,14 @@ wa-code-demo::part(preview) {
 <wa-input label="WA Input (url)" type="url"></wa-input>
 ```

+## Pill shaped text fields
+
+Add the `wa-pill` class to an `<input>` to make it pill-shaped.
+
+```html {.example}
+<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
+```
+
 ## Color Picker

 Basic:
--- a/docs/docs/palettes/tweak.css
+++ b/docs/docs/palettes/tweak.css
@@ -25,9 +25,16 @@ wa-dropdown > .color.swatch {
    --track-color-inactive: transparent;
    --track-color-active: transparent;
    --thumb-color: var(--color-tweaked, var(--color));
+    --thumb-shadow: 0 0 0 var(--thumb-gap) var(--wa-color-surface-default),
+      var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
+        calc(var(--wa-shadow-offset-x-m) * -1 + var(--thumb-gap)) var(--wa-color-shadow);
+
+    &:active {
+      --thumb-size: 2em;
+    }

    &::part(base) {
-      background: linear-gradient(to right in oklch, var(--color-1), var(--color-2));
+      background: linear-gradient(to right in var(--color-interpolation-space, oklab), var(--color-1), var(--color-2));
    }
  }

@@ -63,13 +70,20 @@ wa-dropdown > .color.swatch {
 .hue-shift-slider {
  --color-1: oklch(from var(--color) l c calc(h + var(--min, 0)));
  --color-2: oklch(from var(--color) l c calc(h + var(--max, 0)));
+  --color-interpolation-space: oklch;
 }

 .chroma-scale-slider {
  --color: var(--wa-color-brand);
  --color-1: oklch(from var(--color) l calc(c * var(--min)) h);
  --color-2: oklch(from var(--color) l calc(c * var(--max)) h);
-  --color-tweaked: oklch(from var(--color) l calc(c * var(--chroma-scale)) h);
+}
+
+.gray-chroma-slider {
+  --color: var(--wa-color-gray);
+  --color-1: oklch(from var(--wa-color-gray) l 0 none);
+  --color-2: oklch(from var(--color-gray-undertone) l calc(c * var(--max)) h);
+  margin-top: var(--wa-space-m);
 }

 .popup {
@@ -91,13 +105,13 @@ wa-dropdown > .color.swatch {
  td:not([data-hue='gray'] *) {
    --tweak-c: calc(c * var(--chroma-scale, 1));
    --tweak-h: calc(h + var(--hue-shift, 0));
-    --color-tweaked: oklch(from var(--color) l var(--tweak-c) var(--tweak-h));
+
    --color-tweaked-no-chroma-scale: oklch(from var(--color) l c var(--tweak-h));
    --color-tweaked-no-hue-shift: oklch(from var(--color) l var(--tweak-c) h);

    &:is([data-tint='90'], [data-tint='95']) {
      /* Work around  https://bugs.webkit.org/show_bug.cgi?id=287637 */
-      --color-tweaked: lch(from var(--color) l var(--tweak-c) var(--tweak-h));
+
      --color-tweaked-no-chroma-scale: lch(from var(--color) l c var(--tweak-h));
      --color-tweaked-no-hue-shift: lch(from var(--color) l var(--tweak-c) h);

@@ -111,14 +125,18 @@ wa-dropdown > .color.swatch {

    &:is(.tweaking *) {
      --color-2-height: 70%;
+    }

-      &:is(.tweaking-chroma *) {
-        --color: var(--color-tweaked-no-chroma-scale);
-      }
+    &:is(.tweaking-chroma *) {
+      --color: var(--color-tweaked-no-chroma-scale);
+    }

-      &:is(.tweaking-hue *) {
-        --color: var(--color-tweaked-no-hue-shift);
-      }
+    &:is(.tweaking-hue *) {
+      --color: var(--color-tweaked-no-hue-shift);
+    }
+
+    &:is(.tweaking-gray-chroma *) {
+      --color: var(--color-tweaked-no-gray-chroma);
    }
  }

@@ -159,6 +177,29 @@ wa-dropdown > .color.swatch {
  }
 }

-[v-if='saved'] {
+/* Better UI before Vue initializes */
+[v-if='saved'],
+[v-if^='tweaked'] {
  display: none;
 }
+
+.core-color {
+  wa-radio-button::part(base) {
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    border-radius: var(--wa-border-radius-circle);
+    background: var(--color);
+    background-clip: border-box;
+  }
+
+  wa-radio-button:is([checked], :state(checked))::part(base) {
+    box-shadow:
+      inset 0 0 0 var(--indicator-width) var(--indicator-color),
+      inset 0 0 0 calc(var(--indicator-width) + 1.5px) var(--wa-color-surface-default);
+  }
+
+  &::part(form-control-input) {
+    gap: var(--wa-space-xs);
+  }
+}
--- a/docs/docs/palettes/tweak.js
+++ b/docs/docs/palettes/tweak.js
@@ -3,7 +3,8 @@ import Color from 'https://colorjs.io/dist/color.js';
 import { createApp, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
 import { cdnUrl, hueRanges, hues, Permalink, tints } from '../../assets/scripts/tweak.js';
 import { cssImport, cssLiteral, cssRule } from '../../assets/scripts/tweak/code.js';
-import { selectors, urls } from '../../assets/scripts/tweak/data.js';
+import { maxGrayChroma, moreHue, selectors, urls } from '../../assets/scripts/tweak/data.js';
+import { subtractAngles } from '../../assets/scripts/tweak/util.js';
 import Prism from '/assets/scripts/prism.js';

 await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
@@ -34,6 +35,8 @@ for (let palette in allPalettes) {
  }
 }

+const percentFormatter = value => value.toLocaleString(undefined, { style: 'percent' });
+
 let paletteAppSpec = {
  data() {
    let appRoot = document.querySelector('#palette-app');
@@ -49,12 +52,17 @@ let paletteAppSpec = {
      hueRanges,
      hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
      chromaScale: 1,
+      grayChroma: undefined,
+      grayColor: undefined,
      tweaking: {},
      saved: null,
    };
  },

  created() {
+    // Non-reactive variables to expose
+    Object.assign(this, { moreHue });
+
    // Read URL params and apply them. This facilitates permalinks.
    this.permalink.mapObject(this.hueShifts, {
      keyTo: key => key.replace(/-shift$/, ''),
@@ -63,30 +71,49 @@ let paletteAppSpec = {
      valueTo: value => (!value ? 0 : Number(value)),
    });

+    this.grayChroma = this.originalGrayChroma;
+    this.grayColor = this.originalGrayColor;
+
    if (location.search) {
      // Update from URL
      this.permalink.writeTo(this.hueShifts);

-      if (this.permalink.has('chroma-scale')) {
-        this.chromaScale = Number(this.permalink.get('chroma-scale') || 1);
+      for (let param of ['chroma-scale', 'gray-color', 'gray-chroma']) {
+        if (this.permalink.has(param)) {
+          let value = this.permalink.get(param);
+
+          if (!isNaN(value)) {
+            // Convert numeric values to numbers
+            value = Number(value);
+          }
+
+          let prop = camelCase(param);
+          this[prop] = value;
+        }
      }

      if (this.permalink.has('uid')) {
        this.uid = Number(this.permalink.get('uid'));
      }

-      let palette = { id: this.paletteId, uid: this.uid, search: location.search };
-      this.saved = sidebar.palette.getSaved(palette);
+      this.saved = sidebar.palette.getSaved(this.getPalette());
+    }
+  },
+
+  mounted() {
+    for (let ref in this.$refs) {
+      this.$refs[ref].tooltipFormatter = percentFormatter;
    }
  },

  computed: {
-    global() {
-      return globalThis;
-    },
-
    tweaks() {
-      return { hueShifts: this.hueShifts, chromaScale: this.chromaScale };
+      return {
+        hueShifts: this.hueShifts,
+        chromaScale: this.chromaScale,
+        grayColor: this.grayColor,
+        grayChroma: this.grayChroma,
+      };
    },

    isTweaked() {
@@ -96,7 +123,7 @@ let paletteAppSpec = {
    code() {
      let ret = {};
      for (let language of ['html', 'css']) {
-        let code = getPaletteCode(this.paletteId, this.tweaks, { language, cdnUrl });
+        let code = getPaletteCode(this.paletteId, this.colors, this.tweaked, { language, cdnUrl });
        ret[language] = {
          raw: code,
          highlighted: Prism.highlight(code, Prism.languages[language], language),
@@ -107,47 +134,46 @@ let paletteAppSpec = {
    },

    colors() {
-      let ret = {};
+      return applyTweaks.call(this, this.originalColors, this.tweaks, this.tweaked);
+    },

-      for (let hue in this.originalColors) {
-        let originalScale = this.originalColors[hue];
-        let scale = (ret[hue] = {});
-        let descriptors = Object.getOwnPropertyDescriptors(originalScale);
-        Object.defineProperties(scale, {
-          maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
-          maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
-        });
+    colorsMinusChromaScale() {
+      let tweaked = { ...this.tweaked, chromaScale: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
+    },

-        for (let tint of tints) {
-          let oklch = originalScale[tint].coords.slice();
+    colorsMinusHueShifts() {
+      let tweaked = { ...this.tweaked, hue: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
+    },

-          if (this.hueShifts[hue]) {
-            oklch[2] += this.hueShifts[hue];
-          }
-
-          if (this.chromaScale !== 1) {
-            oklch[1] *= this.chromaScale;
-          }
-
-          scale[tint] = new Color('oklch', oklch);
-        }
-      }
-
-      return ret;
+    colorsMinusGrayChroma() {
+      let tweaked = { ...this.tweaked, grayChroma: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
    },

    tweaked() {
-      return {
-        chroma: this.chromaScale !== 1,
-        hue: Object.values(this.hueShifts).some(Boolean),
+      let anyHueTweaked = Object.values(this.hueShifts).some(Boolean);
+      let hue = anyHueTweaked
+        ? Object.fromEntries(Object.entries(this.hueShifts).map(([hue, shift]) => [hue, shift !== 0]))
+        : false;
+
+      let ret = {
+        chromaScale: this.chromaScale !== 1,
+        hue,
+        grayChroma: this.grayChroma !== this.originalGrayChroma,
+        grayColor: this.grayColor !== this.originalGrayColor,
      };
+
+      let anyTweaked = Object.values(ret).some(Boolean);
+      return anyTweaked ? ret : false;
    },

    tweaksHumanReadable() {
      let ret = {};

      if (this.chromaScale !== 1) {
-        ret.chromaScale = 'more ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
+        ret.chromaScale = 'More ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
      }

      for (let hue in this.hueShifts) {
@@ -158,63 +184,99 @@ let paletteAppSpec = {
        }

        let relHue = shift < 0 ? arrayPrevious(hues, hue) : arrayNext(hues, hue);
-        let hueTweak =
-          {
-            red: 'redder',
-            orange: 'oranger',
-            indigo: 'more indigo',
-          }[relHue] ?? relHue + 'er';
+        let hueTweak = moreHue[relHue] ?? relHue + 'er';

-        ret[hue] = hueTweak + ' ' + hue + 's';
+        ret[hue] = capitalize(hueTweak + ' ' + hue + 's');
+      }
+
+      if (this.tweaked.grayChroma || this.tweaked.grayColor) {
+        if (this.tweaked.grayChroma === 0) {
+          ret.grayChroma = 'Achromatic grays';
+        } else {
+          if (this.tweaked.grayColor) {
+            ret.grayColor = capitalize(this.grayColor) + ' gray undertone';
+          }
+
+          if (this.tweaked.grayChroma) {
+            let more = this.tweaked.grayChroma > this.originalGrayChroma;
+            ret.grayChroma = `More ${more ? 'colorful' : 'neutral'} grays`;
+          }
+        }
      }

      return ret;
    },

    originalContrasts() {
+      return getContrasts(this.originalColors);
+    },
+
+    contrasts() {
+      return getContrasts(this.colors, this.originalContrasts);
+    },
+
+    originalCoreColors() {
      let ret = {};
-
      for (let hue in this.originalColors) {
-        ret[hue] = {};
+        let maxChromaTintRaw = this.originalColors[hue].maxChromaTintRaw;
+        ret[hue] = this.originalColors[hue][maxChromaTintRaw];
+      }
+      return ret;
+    },

-        for (let tintBg of tints) {
-          ret[hue][tintBg] = {};
-          let bgColor = this.originalColors[hue][tintBg];
-
-          if (!bgColor || !bgColor.contrast) {
-            continue;
-          }
-
-          for (let tintFg of tints) {
-            let contrast = bgColor.contrast(this.originalColors[hue][tintFg], 'WCAG21');
-            ret[hue][tintBg][tintFg] = contrast;
-          }
-        }
+    coreColors() {
+      let ret = {};
+      for (let hue in this.colors) {
+        let maxChromaTintRaw = this.colors[hue].maxChromaTintRaw;
+        ret[hue] = this.colors[hue][maxChromaTintRaw];
      }

      return ret;
    },

-    contrasts() {
-      let ret = {};
+    originalGrayColor() {
+      let grayHue = this.originalCoreColors.gray.get('h');
+      let minDistance = Infinity;
+      let closestHue = null;

-      for (let hue in this.colors) {
-        ret[hue] = {};
+      for (let name in this.originalCoreColors) {
+        if (name === 'gray') {
+          continue;
+        }

-        for (let tintBg in this.colors[hue]) {
-          ret[hue][tintBg] = {};
-          let bgColor = this.colors[hue][tintBg];
-
-          for (let tintFg in this.colors[hue]) {
-            let fgColor = this.colors[hue][tintFg];
-            let value = bgColor.contrast(fgColor, 'WCAG21');
-            let original = this.originalContrasts[hue][tintBg][tintFg];
-            ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
-          }
+        let hue = this.originalCoreColors[name].get('h');
+        let distance = Math.abs(subtractAngles(hue, grayHue));
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestHue = name;
        }
      }

-      return ret;
+      return closestHue ?? 'indigo';
+    },
+
+    originalGrayChroma() {
+      let coreTint = this.originalColors.gray.maxChromaTint;
+      let grayChroma = this.originalColors.gray[coreTint].get('c');
+      if (grayChroma === 0 || grayChroma === null) {
+        return 0;
+      }
+
+      let grayColorChroma = this.originalColors[this.originalGrayColor][coreTint].get('c');
+      return grayChroma / grayColorChroma;
+    },
+
+    /**
+     * We want to preserve the original grayChroma selection so that when the user switches to another undertone
+     * that supports higher chromas, their selection will be there.
+     * This property is the gray chroma % that is actually applied.
+     */
+    computedGrayChroma() {
+      return Math.min(this.grayChroma, this.maxGrayChroma);
+    },
+
+    maxGrayChroma() {
+      return maxGrayChroma[this.grayColor] ?? 0.3;
    },
  },

@@ -230,6 +292,14 @@ let paletteAppSpec = {
      this.permalink.set('chroma-scale', this.chromaScale, 1);
    },

+    grayColor() {
+      this.permalink.set('gray-color', this.grayColor, this.originalGrayColor);
+    },
+
+    grayChroma() {
+      this.permalink.set('gray-chroma', this.grayChroma, this.originalGrayChroma);
+    },
+
    tweaks: {
      deep: true,
      async handler(value, oldValue) {
@@ -246,6 +316,10 @@ let paletteAppSpec = {
  },

  methods: {
+    getPalette() {
+      return { id: this.paletteId, uid: this.uid, search: location.search };
+    },
+
    save({ silent } = {}) {
      let title = silent
        ? (this.saved?.title ?? this.paletteTitle)
@@ -258,13 +332,15 @@ let paletteAppSpec = {
      let uid = this.uid;

      if (!uid) {
+        // First time saving
        this.uid = uid = sidebar.palette.getUid();

        this.permalink.set('uid', uid);
        this.permalink.updateLocation();
      }

-      let palette = { title, id: this.paletteId, uid, search: location.search };
+      let palette = { ...this.getPalette(), uid, title };
+
      sidebar.palette.save(palette, this.saved);
      this.saved = palette;
    },
@@ -286,21 +362,38 @@ let paletteAppSpec = {

    deleteSaved() {
      sidebar.palette.delete(this.saved);
+    },
+
+    postDelete() {
      this.saved = null;
+      this.permalink.delete('uid');
+      this.uid = undefined;
+      this.permalink.updateLocation();
    },

-    reset() {
-      for (let hue in this.hueShifts) {
-        this.hueShifts[hue] = 0;
-      }
-      this.chromaScale = 1;
-    },
-
-    removeTweak(param) {
-      if (param === 'chromaScale') {
+    /**
+     * Remove a specific tweak or all tweaks
+     * @param {string} [param] - The tweak to remove. If not provided, all tweaks are removed.
+     */
+    reset(param) {
+      if (!param || param === 'chromaScale') {
        this.chromaScale = 1;
-      } else {
+      }
+
+      if (param in this.hueShifts) {
        this.hueShifts[param] = 0;
+      } else if (!param) {
+        for (let hue in this.hueShifts) {
+          this.hueShifts[hue] = 0;
+        }
+      }
+
+      if (!param || param === 'grayColor') {
+        this.grayColor = this.originalGrayColor;
+      }
+
+      if (!param || param === 'grayChroma') {
+        this.grayChroma = this.originalGrayChroma;
      }
    },
  },
@@ -336,16 +429,20 @@ let paletteAppSpec = {
 };

 function init() {
+  let paletteAppContainer = document.querySelector('#palette-app');
  globalThis.paletteApp?.unmount?.();
-  globalThis.paletteApp = createApp(paletteAppSpec).mount('#palette-app');
+
+  if (!paletteAppContainer) {
+    return;
+  }
+
+  globalThis.paletteApp = createApp(paletteAppSpec).mount(paletteAppContainer);
 }

 init();
 addEventListener('turbo:render', init);

-export function getPaletteCode(paletteId, tweaks, options) {
-  let palette = allPalettes[paletteId].colors;
-
+export function getPaletteCode(paletteId, colors, tweaked, options) {
  let imports = [];

  if (paletteId) {
@@ -353,37 +450,27 @@ export function getPaletteCode(paletteId, tweaks, options) {
  }

  let css = '';
+  let declarations = [];

-  if (tweaks) {
-    let { hueShifts, chromaScale = 1 } = tweaks;
-    let declarations = [];
-
-    if (hueShifts || chromaScale !== 1) {
-      for (let hue in hueShifts) {
-        let shift = hueShifts[hue];
-
-        if ((!shift && chromaScale === 1) || hue === 'orange') {
+  if (tweaked) {
+    for (let hue in colors) {
+      if (hue === 'orange') {
+        continue;
+      } else if (hue === 'gray') {
+        if (!tweaked.grayChroma && !tweaked.grayColor) {
          continue;
        }
-
-        let scale = palette[hue];
-
-        for (let tint of ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95']) {
-          let color = scale[tint];
-
-          if (Array.isArray(color)) {
-            color = new Color('oklch', coords);
-          } else {
-            color = color.clone();
-          }
-          color.set({ h: h => h + shift, c: c => c * chromaScale });
-          let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
-
-          declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
-        }
-
-        declarations.push('');
+      } else if (!tweaked.chromaScale && !tweaked.hue?.[hue]) {
+        continue;
      }
+
+      for (let tint of tints) {
+        let color = colors[hue][tint];
+        let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
+        declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
+      }
+
+      declarations.push('');
    }

    if (declarations.length > 0) {
@@ -409,3 +496,85 @@ function arrayPrevious(array, element) {
  let index = array.indexOf(element);
  return array[(index - 1 + array.length) % array.length];
 }
+
+function applyTweaks(originalColors, tweaks, tweaked) {
+  let ret = {};
+  let { hueShifts, chromaScale = 1, grayColor, grayChroma } = tweaks;
+
+  if (!tweaked) {
+    return originalColors;
+  }
+
+  if (tweaked.grayChroma) {
+    grayChroma = this.computedGrayChroma;
+  }
+
+  for (let hue in originalColors) {
+    let originalScale = originalColors[hue];
+    let scale = (ret[hue] = {});
+    let descriptors = Object.getOwnPropertyDescriptors(originalScale);
+    Object.defineProperties(scale, {
+      maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
+      maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
+    });
+
+    for (let tint of tints) {
+      let color = originalScale[tint].clone();
+
+      if (tweaked.hue && hueShifts[hue]) {
+        color.set({ h: h => h + hueShifts[hue] });
+      }
+
+      if (tweaked.chromaScale && chromaScale !== 1) {
+        color.set({ c: c => c * chromaScale });
+      }
+
+      if (hue === 'gray' && (tweaked.grayChroma || tweaked.grayColor)) {
+        let colorUndertone = originalColors[grayColor][tint].clone();
+        color = colorUndertone.set({ c: c => c * grayChroma });
+      }
+
+      scale[tint] = color;
+    }
+  }
+
+  return ret;
+}
+
+function camelCase(str) {
+  return (str + '').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+function capitalize(str) {
+  return str[0].toUpperCase() + str.slice(1);
+}
+
+function getContrasts(colors, originalContrasts) {
+  let ret = {};
+
+  for (let hue in colors) {
+    ret[hue] = {};
+
+    for (let tintBg of tints) {
+      ret[hue][tintBg] = {};
+      let bgColor = colors[hue][tintBg];
+
+      if (!bgColor || !bgColor.contrast) {
+        continue;
+      }
+
+      for (let tintFg of tints) {
+        let fgColor = colors[hue][tintFg];
+        let value = bgColor.contrast(fgColor, 'WCAG21');
+        if (originalContrasts) {
+          let original = originalContrasts[hue][tintBg][tintFg];
+          ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
+        } else {
+          ret[hue][tintBg][tintFg] = value;
+        }
+      }
+    }
+  }
+
+  return ret;
+}
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -14,11 +14,19 @@ During the alpha period, things might break! We take breaking changes very serio

 ## Next

+- Fixed `wa-pill` class for text fields
+- Fixed `pill` style for `<wa-input>` elements
+- Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
+
+## 3.0.0-alpha.11
+
 ### Color Palettes

+- Color palette tweaking UI. Tweak hue, grays, overall colorfulness, save or share the results.
 - Added a `pink` scale to all color palettes
- Fixed an incorrect CSS value in `<wa-select>`'s expand icon
 - Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
+- Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too).
+- Fixed a bug in `<wa-switch>` that caused tooltips to work incorrectly when toggling the switch

 ### Design Tokens

@@ -27,32 +35,54 @@ You can find them in the first column of each color palette.

 ### Themes

+- Improved UI for theme remixing:
+  - You can now override the brand color of any theme with any of the 9 hues supported.
+  - Rich previews
+  - Generated copyable code snippets.
+  - Permalinks
 - Updated Active, Glossy, Playful, and Premium themes so that `--wa-color-brand-fill-loud` uses the core color of the chosen brand color, regardless of tint.
- You can now override the brand color of any theme with any of the 9 hues supported.
- Improved UI for theme remixing, with previews and generated copyable code snippets.

 ### Components

- Various `<wa-radio>` improvements:
-  - Dropped the `base` part. It can now be styled by directly applying CSS to the element itself.
-  - Added `hint` attribute and corresponding slot.
- Various `<wa-select>` improvements:
-  - Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
-  - Fixed a bug that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
-  - Dropped the `base` part from `<wa-option>` for easier styling. CSS can now be applied directly to the element itself.
- Various `<wa-card>` improvements:
-  - Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
-  - Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
-  - Fixed a bug that prevented slots from showing automatically without `with-` attributes
- Fixed a bug in `<wa-select>` that prevented the description from being read by screen readers
+#### `<wa-radio>`

+- Dropped the `base` part. It can now be styled by directly applying CSS to the element itself.
+- Added `hint` attribute and corresponding slot.
+
+#### `<wa-select>`
+
+- Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
+- Fixed a bug that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
+- Fixed an incorrect CSS value in the expand icon
+- Fixed a bug that prevented the description from being read by screen readers
+
+####  `<wa-option>`
+
+- `label` attribute to override the generated label (useful for rich content)
+- `defaultLabel` property
+- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
+- Dropped `base` part for easier styling. CSS can now be applied directly to the element itself.
+
+####  `<wa-menu-item>`
+
+- `label` attribute to override the generated label (useful for rich content)
+- `defaultLabel` property
+- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
+
+#### `<wa-card>`
+- Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
+- Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
+- Fixed a bug that prevented slots from showing automatically without `with-` attributes
+
+#### `<wa-tab>`
+
+- Fixed a bug that caused `document.createElement('wa-tab')` to fail (which also meant it could not be used in VueJS and other frameworks)

 ### Docs

 - Added an orientation example to the native radio docs
 - Fixed a number of broken event listeners throughout the docs

-
 ## 3.0.0-alpha.10

 - 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
--- a/docs/docs/themes/demo.njk
+++ b/docs/docs/themes/demo.njk
@@ -10,15 +10,17 @@ override:tags: []
 eleventyComputed:
  forceTheme: "{{ theme.fileSlug }}"
 ---
-
+{% set isPro = theme.data.isPro %}
+{% set status = theme.data.status %}
+{% set since = theme.data.since %}
 <link rel="stylesheet" href="/docs/themes/showcase.css" />

 {% set content %}
 <header>
  {% include 'breadcrumbs.njk' %}
  <h1 class="title">{{ theme.data.title }}</h1>
-  <p id="mix_and_match" hidden class="wa-size-s"></p>
-  <p>{% include 'status.njk' %}</p>
+  <p id="mix_and_match" class="wa-size-s"></p>
+  <p id="theme-status">{% include 'status.njk' %}</p>
  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
 </header>
 {% include 'theme-showcase.njk' %}
@@ -34,30 +36,18 @@ eleventyComputed:
 </wa-image-comparer>

 <script type="module">
-import { urls as stylesheetURLs } from "/assets/scripts/tweak/data.js";
-import { theme as getThemeCode } from "/assets/scripts/tweak/code.js";
+import { urls as stylesheetURLs, docsURLs, icons } from "/assets/scripts/tweak/data.js";
+import { getThemeCode } from "/assets/scripts/tweak/code.js";

 function updateTheme() {
  let params = new URLSearchParams(window.location.search);
  params = Object.fromEntries(params.entries());

-  const docsURLs = {
-    colors: '/docs/themes/',
-    palette: '/docs/palettes/',
-    typography: '/docs/themes/'
-  };
-  const icons = {
-    colors: 'palette',
-    palette: 'swatchbook',
-    brand: 'droplet',
-    typography: 'font-case'
-  };
-
  for (let link of document.querySelectorAll('link.mix-and-match')) {
    link.remove();
  }

-  let msgs = [];
+  let tweaks = [];
  let code = getThemeCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
  document.head.insertAdjacentHTML('beforeend', code);

@@ -72,18 +62,29 @@ function updateTheme() {
      }

      let icon = icons[name];
-      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
+      tweaks.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
    }
  }

-  for (let p of mix_and_match) {
-    p.hidden = msgs.length === 0;
-    if (msgs.length) {
-      let icon =
-      p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
-        ${ msg }</wa-badge>`).join(' ');
+  let isRemixed = tweaks.length > 0;
+  document.documentElement.classList.toggle('is-remixed', isRemixed);
+
+  if (isRemixed) {
+    for (let p of document.querySelectorAll("#theme-status")) {
+        let proBadge = p.querySelector(".pro");
+        if (!proBadge) {
+          p.insertAdjacentHTML('beforeend', '<wa-badge class="pro">PRO</wa-badge>');
+        }
+    }
+
+    for (let p of mix_and_match) {
+      if (tweaks.length) {
+        p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + tweaks.map(msg => `<wa-badge appearance=outlined>
+          ${ msg }</wa-badge>`).join(' ');
+      }
    }
  }
+
 }
 updateTheme();
 </script>
--- a/docs/docs/themes/remix.js
+++ b/docs/docs/themes/remix.js
@@ -107,6 +107,10 @@ function setDefault(select, value) {
 }

 function render(changedAspect) {
+  if (!globalThis.demo) {
+    return;
+  }
+
  let url = new URL(demo.src);

  if (!changedAspect || changedAspect === 'colors') {
--- a/docs/docs/themes/showcase.css
+++ b/docs/docs/themes/showcase.css
@@ -12,6 +12,11 @@ body,
 #mix_and_match {
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-quiet);
+  margin-block-end: var(--wa-space-xs);
+
+  html:not(.is-remixed) {
+    display: none;
+  }

  wa-icon {
    vertical-align: -0.15em;
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,8 +4,6 @@ description: Build better with Web Awesome, the open source library of web compo
 layout: page
 ---

-
-
 <style>
  .title,
  .anchor-heading a,
@@ -387,4 +385,4 @@ layout: page
      &copy; Fonticons, Inc.
    </div>
  </footer>
-</div>
+</div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@shoelace-style/webawesome",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.11",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@shoelace-style/webawesome",
-      "version": "3.0.0-alpha.10",
+      "version": "3.0.0-alpha.11",
      "license": "MIT",
      "dependencies": {
        "@ctrl/tinycolor": "^4.1.0",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@shoelace-style/webawesome",
  "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.11",
  "homepage": "https://webawesome.com/",
  "author": "Web Awesome",
  "license": "MIT",
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -4,9 +4,11 @@ import { execSync } from 'child_process';
 import { deleteAsync } from 'del';
 import esbuild from 'esbuild';
 import { replace } from 'esbuild-plugin-replace';
+
 import { mkdir, readFile } from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
 import { globby } from 'globby';
+import nunjucks from 'nunjucks';
 import ora from 'ora';
 import { dirname, join, relative } from 'path';
 import process from 'process';
@@ -266,6 +268,13 @@ async function regenerateBundle() {
 * Generates the documentation site.
 */
 async function generateDocs() {
+  /**
+   * Used by the webawesome-app to skip doc generation since it will do its own.
+   */
+  if (process.env.SKIP_ELEVENTY === 'true') {
+    return;
+  }
+
  spinner.start('Writing the docs');

  const args = [];
@@ -336,6 +345,35 @@ if (isDeveloping) {
          '/dist/': './dist-cdn/',
        },
      },
+      middleware: [
+        function simulateWebawesomeApp(req, res, next) {
+          // Accumulator for strings so we can pass them through nunjucks a second time similar to how the webawesome-app
+          // will be running nunjucks twice.
+          const finalString = [];
+          const encoding = 'utf-8';
+
+          const _write = res.write;
+          res.write = function (chunk, encoding) {
+            finalString.push(chunk.toString());
+          };
+
+          const _end = res.end;
+          res.end = function (...args) {
+            const transformedStr = nunjucks.renderString(finalString.join(''), {
+              // Stub the server EJS shortcodes.
+              server: {
+                head: '',
+                loginOrAvatar: '',
+                flashes: '',
+              },
+            });
+            _write.call(res, transformedStr, encoding);
+            _end.call(res, ...args);
+          };
+
+          next();
+        },
+      ],
      callbacks: {
        ready: (_err, instance) => {
          // 404 errors
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -52,6 +52,7 @@ import styles from './button.css';
@customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
+  static rectProxy = 'button';

  static get validators() {
    return [...super.validators, MirrorValidator()];
@@ -108,7 +109,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
  @property({ reflect: true }) value: string | null = null;

  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-  @property() href = '';
+  @property({ reflect: true }) href = null;

  /** Tells the browser where to open the link. Only used when `href` is present. */
  @property() target: '_blank' | '_parent' | '_self' | '_top';
@@ -224,17 +225,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
    this.button.blur();
  }

-  getBoundingClientRect(): DOMRect {
-    let rect = super.getBoundingClientRect();
-    let buttonRect = this.button.getBoundingClientRect();
-
-    if (rect.width === 0 && buttonRect.width > 0) {
-      return buttonRect;
-    }
-
-    return rect;
-  }
-
  render() {
    const isLink = this.isLink();
    const tag = isLink ? literal`a` : literal`button`;
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -278,11 +278,11 @@
 }

 /*
-   * Color dropdown
-   */
+ * Color dropdown
+ */

 .color-dropdown {
-  display: flex;
+  display: contents;
 }

 .color-dropdown::part(panel) {
--- a/src/components/icon-button/icon-button.css
+++ b/src/components/icon-button/icon-button.css
@@ -1,5 +1,8 @@
 :host {
  --background-color-hover: var(--wa-color-neutral-fill-quiet);
+  --text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  --background-color-active: transparent;
+  --text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active));

  display: inline-block;
  color: var(--wa-color-text-quiet);
@@ -22,12 +25,13 @@

 :host(:not([disabled])) .icon-button:hover,
 :host(:not([disabled])) .icon-button:focus-visible {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  background-color: var(--background-color-hover);
+  color: var(--text-color-hover);
 }

 :host(:not([disabled])) .icon-button:active {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  background-color: var(--background-color-active);
+  color: var(--text-color-active);
 }

 .icon-button:focus {
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -17,7 +17,10 @@ import styles from './icon-button.css';
 * @event blur - Emitted when the icon button loses focus.
 * @event focus - Emitted when the icon button gains focus.
 *
- * @cssproperty --background-color-hover - The color of the button's background on hover.
+ * @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover.
+ * @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`.
+ * @cssproperty --text-color-hover - The color of the button's background on hover.
+ * @cssproperty --text-color-active - The color of the button's background on `:active`.
 *
 * @csspart base - The component's base wrapper.
 */
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -50,6 +50,7 @@ import styles from './radio-button.css';
@customElement('wa-radio-button')
 export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, buttonStyles, styles];
+  static rectProxy = 'input';

  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');

--- a/src/components/select/select.css
+++ b/src/components/select/select.css
@@ -208,13 +208,13 @@
  &::slotted(wa-divider) {
    --spacing: var(--wa-space-xs);
  }
-
-  &::slotted(small) {
-    display: block;
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-semibold);
-    color: var(--wa-color-text-quiet);
-    padding-block: var(--wa-space-xs);
-    padding-inline: var(--wa-space-xl);
-  }
+}
+
+slot:not([name])::slotted(small) {
+  display: block;
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-semibold);
+  color: var(--wa-color-text-quiet);
+  padding-block: var(--wa-space-xs);
+  padding-inline: var(--wa-space-xl);
 }
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -647,6 +647,7 @@ describe('<wa-select>', () => {
            );
            const el = form.querySelector<WaSelect>('wa-select')!;

+            expect(el.defaultValue).to.equal('option-1');
            expect(el.value).to.equal('');
            expect(new FormData(form).get('select')).equal('');

@@ -657,6 +658,7 @@ describe('<wa-select>', () => {

            await aTimeout(10);
            await el.updateComplete;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['option-1']);
            expect(el.value).to.equal('option-1');
            expect(new FormData(form).get('select')).equal('option-1');
          });
@@ -745,6 +747,8 @@ describe('<wa-select>', () => {
            );

            const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['bar', 'baz']);
+            expect(el.optionValues?.size).to.equal(2);
            expect(el.value).to.have.members(['bar', 'baz']);
            expect(el.value!.length).to.equal(2);
            expect(new FormData(form).getAll('select')).to.have.members(['bar', 'baz']);
@@ -760,6 +764,36 @@ describe('<wa-select>', () => {
            expect(new FormData(form).getAll('select')).to.have.members(['foo', 'bar', 'baz']);
          });
        });
+
+        describe('With setting the value via JS', () => {
+          it('Should preserve value even if not returned', async () => {
+            const form = await fixture<HTMLFormElement>(
+              html` <form>
+                <wa-select name="select">
+                  <wa-option value="bar">Bar</wa-option>
+                  <wa-option value="baz">Baz</wa-option>
+                </wa-select>
+              </form>`,
+            );
+
+            const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.value).to.equal('');
+
+            el.value = 'foo';
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('');
+
+            const option = document.createElement('wa-option');
+            option.value = 'foo';
+            option.innerText = 'Foo';
+            el.append(option);
+
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('foo');
+          });
+        });
      });
    });
  }
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -118,6 +118,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
  @state() displayLabel = '';
  @state() currentOption: WaOption;
  @state() selectedOptions: WaOption[] = [];
+  @state() optionValues: Set<string> | undefined;

  /** The name of the select, submitted as a name/value pair with form data. */
  @property() name = '';
@@ -158,7 +159,47 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
    return val;
  }

-  @property({ attribute: false }) value: string | string[] | null = null;
+  private _value: string[] | undefined;
+  @property({ attribute: false })
+  set value(val: string | string[]) {
+    let oldValue = this.value;
+
+    if (!Array.isArray(val)) {
+      val = val.split(' ');
+    }
+
+    if (!this._value || this._value.join(' ') !== val.join(' ')) {
+      this._value = val;
+      let newValue = this.value;
+
+      if (newValue != oldValue) {
+        this.requestUpdate('value', oldValue);
+      }
+    }
+  }
+  get value() {
+    let value = this._value ?? this.defaultValue;
+    value = Array.isArray(value) ? value : [value];
+    let optionsChanged = !this.optionValues;
+
+    if (optionsChanged) {
+      this.optionValues = new Set(
+        this.getAllOptions()
+          .filter(option => !option.disabled)
+          .map(option => option.value),
+      );
+    }
+
+    // Drop values not in the DOM
+    let ret: string | string[] = value.filter(v => this.optionValues!.has(v));
+    ret = this.multiple ? ret : (ret[0] ?? '');
+
+    if (optionsChanged) {
+      this.requestUpdate('value');
+    }
+
+    return ret;
+  }

  /** The select's size. */
  @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@@ -538,12 +579,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
    }

    const allOptions = this.getAllOptions();
-    const val = this.valueHasChanged ? this.value : this.defaultValue;
-    const value = Array.isArray(val) ? val : [val];
-    const values: string[] = [];
+    this.optionValues = undefined; // dirty the value so it gets recalculated

-    // Check for duplicate values in menu items
-    allOptions.forEach(option => values.push(option.value));
+    const value = this.value;

    // Select only the options that match the new value
    this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
@@ -565,6 +603,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {

  // Gets an array of all `<wa-option>` elements
  private getAllOptions() {
+    if (!this?.querySelectorAll) {
+      return [];
+    }
    return [...this.querySelectorAll<WaOption>('wa-option')];
  }

@@ -628,11 +669,24 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {

    // Update selected options cache
    this.selectedOptions = options.filter(el => el.selected);
+    let selectedValues = new Set(this.selectedOptions.map(el => el.value));
+
+    // Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading)
+    // Note that options NOT present in the DOM will be moved to the end after this
+    if (selectedValues.size > 0 || this._value) {
+      if (!this._value) {
+        // First time it's set
+        let value = this.defaultValue ?? [];
+        this._value = Array.isArray(value) ? value : [value];
+      }
+
+      // Filter out values that are in the DOM
+      this._value = this._value.filter(value => !this.optionValues?.has(value));
+      this._value.unshift(...selectedValues);
+    }

    // Update the value and display label
    if (this.multiple) {
-      this.value = this.selectedOptions.map(el => el.value);
-
      if (this.placeholder && this.value.length === 0) {
        // When no items are selected, keep the value empty so the placeholder shows
        this.displayLabel = '';
@@ -641,7 +695,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
      }
    } else {
      const selectedOption = this.selectedOptions[0];
-      this.value = selectedOption?.value ?? '';
      this.displayLabel = selectedOption?.label ?? '';
    }

--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -49,6 +49,7 @@ import styles from './switch.css';
 */
@customElement('wa-switch')
 export default class WaSwitch extends WebAwesomeFormAssociatedElement {
+  static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
  static shadowStyle = [formControlStyles, sizeStyles, styles];

  static get validators() {
--- a/src/components/tooltip/tooltip.css
+++ b/src/components/tooltip/tooltip.css
@@ -4,10 +4,16 @@
  --max-width: 30ch;
  --padding: var(--wa-space-2xs) var(--wa-space-xs);

+  /** These styles are added so we don't interfere in the DOM. */
  display: inline-block;
  position: absolute;

-  /** These styles are added so we dont interfere in the DOM. */
+  /** Defaults for inherited CSS properties */
+  color: var(--wa-tooltip-content-color);
+  font-size: var(--wa-tooltip-font-size);
+  line-height: var(--wa-tooltip-line-height);
+  text-align: start;
+  white-space: normal;
 }

 .tooltip {
@@ -41,12 +47,6 @@
  max-width: var(--max-width);
  border-radius: var(--border-radius);
  background-color: var(--background-color);
-  font: inherit;
-  color: var(--wa-tooltip-content-color);
-  font-size: var(--wa-tooltip-font-size);
-  line-height: var(--wa-tooltip-line-height);
-  text-align: start;
-  white-space: normal;
  padding: var(--padding);
  user-select: none;
  -webkit-user-select: none;
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -35,11 +35,8 @@ import styles from './tooltip.css';
 *
 * @cssproperty --background-color - The tooltip's background color.
 * @cssproperty --border-radius - The radius of the tooltip's corners.
- * @cssproperty --text-color - The color of the tooltip's content.
 * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
 * @cssproperty --padding - The padding within the tooltip.
- * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
- * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
 */
@customElement('wa-tooltip')
 export default class WaTooltip extends WebAwesomeElement {
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -204,6 +204,32 @@ export default class WebAwesomeElement extends LitElement {
    );
  }

+  getBoundingClientRect(): DOMRect {
+    let rect = super.getBoundingClientRect();
+
+    if (rect.width === 0 && rect.height === 0) {
+      let Self = this.constructor as typeof WebAwesomeElement;
+
+      if (Self.rectProxy) {
+        let element = this[Self.rectProxy as keyof this];
+        if (element instanceof Element) {
+          let childRect = element.getBoundingClientRect();
+          if (childRect.width > 0 || childRect.height > 0) {
+            return childRect;
+          }
+        }
+      }
+    }
+
+    return rect;
+  }
+
+  /**
+   * If getBoundingClientRect() returns an empty rect,
+   * should we check another element?
+   */
+  static rectProxy: undefined | string;
+
  static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
    if (options) {
      if (options.initial !== undefined && options.default === undefined) {
--- a/src/styles/brand/base.css
+++ b/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);
-}
--- a/src/styles/brand/blue.css
+++ b/src/styles/brand/blue.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-blue-10);
  --wa-color-brand-05: var(--wa-color-blue-05);
  --wa-color-brand: var(--wa-color-blue);
-  --wa-color-brand-key: var(--wa-color-blue-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-blue-max-50);
+  --wa-color-brand-min-50: var(--wa-color-blue-min-50);
+  --wa-color-brand-max-60: var(--wa-color-blue-max-60);
+  --wa-color-brand-min-60: var(--wa-color-blue-min-60);
+  --wa-color-brand-max-70: var(--wa-color-blue-max-70);
+  --wa-color-brand-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-brand-on: var(--wa-color-blue-on);
 }
--- a/src/styles/brand/cyan.css
+++ b/src/styles/brand/cyan.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-cyan-10);
  --wa-color-brand-05: var(--wa-color-cyan-05);
  --wa-color-brand: var(--wa-color-cyan);
-  --wa-color-brand-key: var(--wa-color-cyan-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-brand-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-brand-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-brand-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-brand-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-brand-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-brand-on: var(--wa-color-cyan-on);
 }
--- a/src/styles/brand/gray.css
+++ b/src/styles/brand/gray.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-gray-10);
  --wa-color-brand-05: var(--wa-color-gray-05);
  --wa-color-brand: var(--wa-color-gray);
-  --wa-color-brand-key: var(--wa-color-gray-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-gray-max-50);
+  --wa-color-brand-min-50: var(--wa-color-gray-min-50);
+  --wa-color-brand-max-60: var(--wa-color-gray-max-60);
+  --wa-color-brand-min-60: var(--wa-color-gray-min-60);
+  --wa-color-brand-max-70: var(--wa-color-gray-max-70);
+  --wa-color-brand-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-brand-on: var(--wa-color-gray-on);
 }
--- a/src/styles/brand/green.css
+++ b/src/styles/brand/green.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-green-10);
  --wa-color-brand-05: var(--wa-color-green-05);
  --wa-color-brand: var(--wa-color-green);
-  --wa-color-brand-key: var(--wa-color-green-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-green-max-50);
+  --wa-color-brand-min-50: var(--wa-color-green-min-50);
+  --wa-color-brand-max-60: var(--wa-color-green-max-60);
+  --wa-color-brand-min-60: var(--wa-color-green-min-60);
+  --wa-color-brand-max-70: var(--wa-color-green-max-70);
+  --wa-color-brand-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-brand-on: var(--wa-color-green-on);
 }
--- a/src/styles/brand/indigo.css
+++ b/src/styles/brand/indigo.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-indigo-10);
  --wa-color-brand-05: var(--wa-color-indigo-05);
  --wa-color-brand: var(--wa-color-indigo);
-  --wa-color-brand-key: var(--wa-color-indigo-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-brand-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-brand-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-brand-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-brand-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-brand-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-brand-on: var(--wa-color-indigo-on);
 }
--- a/src/styles/brand/orange.css
+++ b/src/styles/brand/orange.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-orange-10);
  --wa-color-brand-05: var(--wa-color-orange-05);
  --wa-color-brand: var(--wa-color-orange);
-  --wa-color-brand-key: var(--wa-color-orange-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-orange-max-50);
+  --wa-color-brand-min-50: var(--wa-color-orange-min-50);
+  --wa-color-brand-max-60: var(--wa-color-orange-max-60);
+  --wa-color-brand-min-60: var(--wa-color-orange-min-60);
+  --wa-color-brand-max-70: var(--wa-color-orange-max-70);
+  --wa-color-brand-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-brand-on: var(--wa-color-orange-on);
 }
--- a/src/styles/brand/pink.css
+++ b/src/styles/brand/pink.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-pink-10);
  --wa-color-brand-05: var(--wa-color-pink-05);
  --wa-color-brand: var(--wa-color-pink);
-  --wa-color-brand-key: var(--wa-color-pink-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-pink-max-50);
+  --wa-color-brand-min-50: var(--wa-color-pink-min-50);
+  --wa-color-brand-max-60: var(--wa-color-pink-max-60);
+  --wa-color-brand-min-60: var(--wa-color-pink-min-60);
+  --wa-color-brand-max-70: var(--wa-color-pink-max-70);
+  --wa-color-brand-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-brand-on: var(--wa-color-pink-on);
 }
--- a/src/styles/brand/purple.css
+++ b/src/styles/brand/purple.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-purple-10);
  --wa-color-brand-05: var(--wa-color-purple-05);
  --wa-color-brand: var(--wa-color-purple);
-  --wa-color-brand-key: var(--wa-color-purple-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-purple-max-50);
+  --wa-color-brand-min-50: var(--wa-color-purple-min-50);
+  --wa-color-brand-max-60: var(--wa-color-purple-max-60);
+  --wa-color-brand-min-60: var(--wa-color-purple-min-60);
+  --wa-color-brand-max-70: var(--wa-color-purple-max-70);
+  --wa-color-brand-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-brand-on: var(--wa-color-purple-on);
 }
--- a/src/styles/brand/red.css
+++ b/src/styles/brand/red.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-red-10);
  --wa-color-brand-05: var(--wa-color-red-05);
  --wa-color-brand: var(--wa-color-red);
-  --wa-color-brand-key: var(--wa-color-red-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-red-max-50);
+  --wa-color-brand-min-50: var(--wa-color-red-min-50);
+  --wa-color-brand-max-60: var(--wa-color-red-max-60);
+  --wa-color-brand-min-60: var(--wa-color-red-min-60);
+  --wa-color-brand-max-70: var(--wa-color-red-max-70);
+  --wa-color-brand-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-brand-on: var(--wa-color-red-on);
 }
--- a/src/styles/brand/yellow.css
+++ b/src/styles/brand/yellow.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
  --wa-color-brand-10: var(--wa-color-yellow-10);
  --wa-color-brand-05: var(--wa-color-yellow-05);
  --wa-color-brand: var(--wa-color-yellow);
-  --wa-color-brand-key: var(--wa-color-yellow-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-brand-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-brand-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-brand-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-brand-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-brand-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-brand-on: var(--wa-color-yellow-on);
 }
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,20 @@
  --wa-color-red: var(--wa-color-red-70);
  --wa-color-red-key: 70;

+  --wa-color-orange-95: #ffefe8 /* oklch(96.287% 0.01978 45.262) */;
+  --wa-color-orange-90: #ffe0d2 /* oklch(92.854% 0.03927 45.816) */;
+  --wa-color-orange-80: #fbbc9e /* oklch(84.557% 0.08373 46.569) */;
+  --wa-color-orange-70: #f3976f /* oklch(76.236% 0.12363 43.995) */;
+  --wa-color-orange-60: #d67e59 /* oklch(68.046% 0.12088 43.174) */;
+  --wa-color-orange-50: #ae6140 /* oklch(57.433% 0.11041 43.333) */;
+  --wa-color-orange-40: #89472c /* oklch(47.39% 0.09837 42.278) */;
+  --wa-color-orange-30: #6f351e /* oklch(40.084% 0.08944 41.51) */;
+  --wa-color-orange-20: #542513 /* oklch(32.696% 0.07578 40.822) */;
+  --wa-color-orange-10: #341408 /* oklch(23.762% 0.05577 40.619) */;
+  --wa-color-orange-05: #230b04 /* oklch(18.679% 0.04417 39.815) */;
+  --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) */;
--- a/src/styles/color/base.css
+++ b/src/styles/color/base.css
@@ -0,0 +1,338 @@
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+:where([class^='wa-brand-'], [class*=' wa-brand-']),
+:where(:root),
+:host {
+  /**
+   * Conditional tokens for use in color-mix()
+   * --wa-color-{hue}-lt-N ➡️ 100% if key < N, 0% otherwise
+   * --wa-color-{hue}-gte-N ➡️ 100% if key >= N, 0% otherwise
+   */
+
+  --wa-color-red-lt-50: calc(clamp(0, 50 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-50: calc(100% - var(--wa-color-red-lt-50));
+  --wa-color-red-lt-60: calc(clamp(0, 60 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-60: calc(100% - var(--wa-color-red-lt-60));
+  --wa-color-red-lt-70: calc(clamp(0, 70 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-70: calc(100% - var(--wa-color-red-lt-70));
+
+  --wa-color-orange-lt-50: calc(clamp(0, 50 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-50: calc(100% - var(--wa-color-orange-lt-50));
+  --wa-color-orange-lt-60: calc(clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-60: calc(100% - var(--wa-color-orange-lt-60));
+  --wa-color-orange-lt-70: calc(clamp(0, 70 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-70: calc(100% - var(--wa-color-orange-lt-70));
+
+  --wa-color-yellow-lt-50: calc(clamp(0, 50 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-50: calc(100% - var(--wa-color-yellow-lt-50));
+  --wa-color-yellow-lt-60: calc(clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-60: calc(100% - var(--wa-color-yellow-lt-60));
+  --wa-color-yellow-lt-70: calc(clamp(0, 70 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-70: calc(100% - var(--wa-color-yellow-lt-70));
+
+  --wa-color-green-lt-50: calc(clamp(0, 50 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-50: calc(100% - var(--wa-color-green-lt-50));
+  --wa-color-green-lt-60: calc(clamp(0, 60 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-60: calc(100% - var(--wa-color-green-lt-60));
+  --wa-color-green-lt-70: calc(clamp(0, 70 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-70: calc(100% - var(--wa-color-green-lt-70));
+
+  --wa-color-cyan-lt-50: calc(clamp(0, 50 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-50: calc(100% - var(--wa-color-cyan-lt-50));
+  --wa-color-cyan-lt-60: calc(clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-60: calc(100% - var(--wa-color-cyan-lt-60));
+  --wa-color-cyan-lt-70: calc(clamp(0, 70 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-70: calc(100% - var(--wa-color-cyan-lt-70));
+
+  --wa-color-blue-lt-50: calc(clamp(0, 50 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-50: calc(100% - var(--wa-color-blue-lt-50));
+  --wa-color-blue-lt-60: calc(clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-60: calc(100% - var(--wa-color-blue-lt-60));
+  --wa-color-blue-lt-70: calc(clamp(0, 70 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-70: calc(100% - var(--wa-color-blue-lt-70));
+
+  --wa-color-indigo-lt-50: calc(clamp(0, 50 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-50: calc(100% - var(--wa-color-indigo-lt-50));
+  --wa-color-indigo-lt-60: calc(clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-60: calc(100% - var(--wa-color-indigo-lt-60));
+  --wa-color-indigo-lt-70: calc(clamp(0, 70 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-70: calc(100% - var(--wa-color-indigo-lt-70));
+
+  --wa-color-purple-lt-50: calc(clamp(0, 50 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-50: calc(100% - var(--wa-color-purple-lt-50));
+  --wa-color-purple-lt-60: calc(clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-60: calc(100% - var(--wa-color-purple-lt-60));
+  --wa-color-purple-lt-70: calc(clamp(0, 70 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-70: calc(100% - var(--wa-color-purple-lt-70));
+
+  --wa-color-pink-lt-50: calc(clamp(0, 50 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-50: calc(100% - var(--wa-color-pink-lt-50));
+  --wa-color-pink-lt-60: calc(clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-60: calc(100% - var(--wa-color-pink-lt-60));
+  --wa-color-pink-lt-70: calc(clamp(0, 70 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-70: calc(100% - var(--wa-color-pink-lt-70));
+
+  --wa-color-gray-lt-50: calc(clamp(0, 50 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-50: calc(100% - var(--wa-color-gray-lt-50));
+  --wa-color-gray-lt-60: calc(clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-60: calc(100% - var(--wa-color-gray-lt-60));
+  --wa-color-gray-lt-70: calc(clamp(0, 70 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-70: calc(100% - var(--wa-color-gray-lt-70));
+
+  /*
+   * Convenience tokens for common tint cutoffs
+   * --wa-color-{hue}-N-max ➡️ var(--color-{hue}) if key <= N, var(--color-{hue}-N) otherwise
+   * --wa-color-{hue}-N-min ➡️ var(--color-{hue}) if key >= N, var(--color-{hue}-N) otherwise
+   */
+
+  --wa-color-red-max-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-50), var(--wa-color-red-50));
+  --wa-color-red-min-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-50), var(--wa-color-red-50));
+  --wa-color-red-max-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-60), var(--wa-color-red-60));
+  --wa-color-red-min-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-60), var(--wa-color-red-60));
+  --wa-color-red-max-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-70), var(--wa-color-red-70));
+  --wa-color-red-min-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-70), var(--wa-color-red-70));
+
+  --wa-color-orange-max-50: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-50),
+    var(--wa-color-orange-50)
+  );
+  --wa-color-orange-min-50: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-50),
+    var(--wa-color-orange-50)
+  );
+  --wa-color-orange-max-60: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-60),
+    var(--wa-color-orange-60)
+  );
+  --wa-color-orange-min-60: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-60),
+    var(--wa-color-orange-60)
+  );
+  --wa-color-orange-max-70: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-70),
+    var(--wa-color-orange-70)
+  );
+  --wa-color-orange-min-70: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-70),
+    var(--wa-color-orange-70)
+  );
+
+  --wa-color-yellow-max-50: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-50),
+    var(--wa-color-yellow-50)
+  );
+  --wa-color-yellow-min-50: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-50),
+    var(--wa-color-yellow-50)
+  );
+  --wa-color-yellow-max-60: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-60),
+    var(--wa-color-yellow-60)
+  );
+  --wa-color-yellow-min-60: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-60),
+    var(--wa-color-yellow-60)
+  );
+  --wa-color-yellow-max-70: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-70),
+    var(--wa-color-yellow-70)
+  );
+  --wa-color-yellow-min-70: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-70),
+    var(--wa-color-yellow-70)
+  );
+
+  --wa-color-green-max-50: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-50),
+    var(--wa-color-green-50)
+  );
+  --wa-color-green-min-50: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-50),
+    var(--wa-color-green-50)
+  );
+  --wa-color-green-max-60: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-60),
+    var(--wa-color-green-60)
+  );
+  --wa-color-green-min-60: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-60),
+    var(--wa-color-green-60)
+  );
+  --wa-color-green-max-70: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-70),
+    var(--wa-color-green-70)
+  );
+  --wa-color-green-min-70: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-70),
+    var(--wa-color-green-70)
+  );
+
+  --wa-color-cyan-max-50: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-50), var(--wa-color-cyan-50));
+  --wa-color-cyan-min-50: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-50),
+    var(--wa-color-cyan-50)
+  );
+  --wa-color-cyan-max-60: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-60), var(--wa-color-cyan-60));
+  --wa-color-cyan-min-60: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-60),
+    var(--wa-color-cyan-60)
+  );
+  --wa-color-cyan-max-70: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-70), var(--wa-color-cyan-70));
+  --wa-color-cyan-min-70: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-70),
+    var(--wa-color-cyan-70)
+  );
+
+  --wa-color-blue-max-50: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-50), var(--wa-color-blue-50));
+  --wa-color-blue-min-50: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-50),
+    var(--wa-color-blue-50)
+  );
+  --wa-color-blue-max-60: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-60), var(--wa-color-blue-60));
+  --wa-color-blue-min-60: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-60),
+    var(--wa-color-blue-60)
+  );
+  --wa-color-blue-max-70: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-70), var(--wa-color-blue-70));
+  --wa-color-blue-min-70: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-70),
+    var(--wa-color-blue-70)
+  );
+
+  --wa-color-indigo-max-50: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-50),
+    var(--wa-color-indigo-50)
+  );
+  --wa-color-indigo-min-50: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-50),
+    var(--wa-color-indigo-50)
+  );
+  --wa-color-indigo-max-60: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-60),
+    var(--wa-color-indigo-60)
+  );
+  --wa-color-indigo-min-60: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-60),
+    var(--wa-color-indigo-60)
+  );
+  --wa-color-indigo-max-70: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-70),
+    var(--wa-color-indigo-70)
+  );
+  --wa-color-indigo-min-70: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-70),
+    var(--wa-color-indigo-70)
+  );
+
+  --wa-color-purple-max-50: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-50),
+    var(--wa-color-purple-50)
+  );
+  --wa-color-purple-min-50: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-50),
+    var(--wa-color-purple-50)
+  );
+  --wa-color-purple-max-60: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-60),
+    var(--wa-color-purple-60)
+  );
+  --wa-color-purple-min-60: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-60),
+    var(--wa-color-purple-60)
+  );
+  --wa-color-purple-max-70: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-70),
+    var(--wa-color-purple-70)
+  );
+  --wa-color-purple-min-70: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-70),
+    var(--wa-color-purple-70)
+  );
+
+  --wa-color-pink-max-50: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-50), var(--wa-color-pink-50));
+  --wa-color-pink-min-50: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-50),
+    var(--wa-color-pink-50)
+  );
+  --wa-color-pink-max-60: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-60), var(--wa-color-pink-60));
+  --wa-color-pink-min-60: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-60),
+    var(--wa-color-pink-60)
+  );
+  --wa-color-pink-max-70: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-70), var(--wa-color-pink-70));
+  --wa-color-pink-min-70: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-70),
+    var(--wa-color-pink-70)
+  );
+
+  --wa-color-gray-max-50: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-50), var(--wa-color-gray-50));
+  --wa-color-gray-min-50: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-50),
+    var(--wa-color-gray-50)
+  );
+  --wa-color-gray-max-60: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-60), var(--wa-color-gray-60));
+  --wa-color-gray-min-60: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-60),
+    var(--wa-color-gray-60)
+  );
+  --wa-color-gray-max-70: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-70), var(--wa-color-gray-70));
+  --wa-color-gray-min-70: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-70),
+    var(--wa-color-gray-70)
+  );
+
+  /* Text color: white if key < 60, {hue}-10 otherwise */
+
+  --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
+  --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
+  --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
+  --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
+  --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
+  --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
+  --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
+  --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
+  --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
+  --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
+}
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,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: #e97331 /* oklch(68.357% 0.16507 46.504) */;
+  --wa-color-orange-50: #bf5712 /* oklch(57.834% 0.15197 47.326) */;
+  --wa-color-orange-40: oklch(47.62% 0.132 48.51);
+  --wa-color-orange-30: oklch(40.38% 0.11554 50);
+  --wa-color-orange-20: oklch(32.94% 0.09927 52);
+  --wa-color-orange-10: oklch(24.083% 0.07743 54);
+  --wa-color-orange-05: oklch(18.817% 0.06098 55);
+  --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) */;
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -1,34 +1,50 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-classic {
  --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
  --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
-  --wa-color-red-80: #ffb8b4 /* oklch(84.753% 0.08313 22.598) */;
-  --wa-color-red-70: #fd908e /* oklch(76.913% 0.13219 21.705) */;
-  --wa-color-red-60: #f46766 /* oklch(68.945% 0.17423 23.179) */;
-  --wa-color-red-50: #df2f2e /* oklch(58.922% 0.21141 26.911) */;
-  --wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
-  --wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
-  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
-  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
-  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
+  --wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
+  --wa-color-red-70: #fe8f8d /* oklch(76.859% 0.13466 21.762) */;
+  --wa-color-red-60: #f56667 /* oklch(68.982% 0.17631 22.472) */;
+  --wa-color-red-50: #e02c2b /* oklch(58.861% 0.21461 27.156) */;
+  --wa-color-red-40: #b5051a /* oklch(48.833% 0.19611 25.68) */;
+  --wa-color-red-30: #900015 /* oklch(41.172% 0.16676 24.609) */;
+  --wa-color-red-20: #6c000d /* oklch(33.479% 0.1356 24.617) */;
+  --wa-color-red-10: #450005 /* oklch(24.598% 0.09968 24.835) */;
+  --wa-color-red-05: #2f0002 /* oklch(19.218% 0.07801 25.517) */;
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;

+  --wa-color-orange-95: #fff0e4 /* oklch(96.374% 0.0228 61.238) */;
+  --wa-color-orange-90: #ffe0c8 /* oklch(92.611% 0.04689 59.917) */;
+  --wa-color-orange-80: #ffbb89 /* oklch(84.386% 0.10217 57.161) */;
+  --wa-color-orange-70: #ff9342 /* oklch(76.486% 0.15964 54.102) */;
+  --wa-color-orange-60: #f36d00 /* oklch(68.715% 0.18774 47.79) */;
+  --wa-color-orange-50: #c94e00 /* oklch(58.068% 0.17131 43.217) */;
+  --wa-color-orange-40: #9d3800 /* oklch(47.924% 0.14534 41.739) */;
+  --wa-color-orange-30: #7e2900 /* oklch(40.53% 0.1259 40.51) */;
+  --wa-color-orange-20: #5e1c00 /* oklch(32.874% 0.1027 40.228) */;
+  --wa-color-orange-10: #3b0f00 /* oklch(24.125% 0.07446 40.837) */;
+  --wa-color-orange-05: #280700 /* oklch(18.837% 0.05933 39.827) */;
+  --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) */;
+  --wa-color-yellow-80: #f5c24b /* oklch(83.879% 0.14445 85.083) */;
  --wa-color-yellow-70: #e9a010 /* oklch(75.825% 0.15689 75.537) */;
-  --wa-color-yellow-60: #de7c00 /* oklch(68.073% 0.15991 59.827) */;
-  --wa-color-yellow-50: #bc5908 /* oklch(57.654% 0.1491 50.241) */;
-  --wa-color-yellow-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
-  --wa-color-yellow-30: #763104 /* oklch(40.324% 0.1093 46.564) */;
-  --wa-color-yellow-20: #572301 /* oklch(32.677% 0.08796 47.926) */;
-  --wa-color-yellow-10: #371300 /* oklch(24.001% 0.06559 47.77) */;
-  --wa-color-yellow-05: #250a00 /* oklch(18.773% 0.0519 47.039) */;
-  --wa-color-yellow: var(--wa-color-yellow-60);
-  --wa-color-yellow-key: 60;
+  --wa-color-yellow-60: #d78000 /* oklch(67.839% 0.15287 64.455) */;
+  --wa-color-yellow-50: #b26000 /* oklch(57.324% 0.13672 58.338) */;
+  --wa-color-yellow-40: #8a4700 /* oklch(47.183% 0.11461 56.655) */;
+  --wa-color-yellow-30: #6e3700 /* oklch(40.03% 0.0976 56.323) */;
+  --wa-color-yellow-20: #522700 /* oklch(32.54% 0.07981 55.802) */;
+  --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+  --wa-color-yellow-05: #210d00 /* oklch(18.619% 0.04431 58.553) */;
+  --wa-color-yellow: var(--wa-color-yellow-70);
+  --wa-color-yellow-key: 70;

  --wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
  --wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;
--- a/src/styles/color/default.css
+++ b/src/styles/color/default.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,20 @@
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;

+  --wa-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
+  --wa-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
+  --wa-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
+  --wa-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
+  --wa-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
+  --wa-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
+  --wa-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
+  --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
+  --wa-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
+  --wa-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
+  --wa-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
  --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) */;
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,20 @@
  --wa-color-red: var(--wa-color-red-40);
  --wa-color-red-key: 40;

+  --wa-color-orange-95: #ffefe1 /* oklch(96.105% 0.02545 63.746) */;
+  --wa-color-orange-90: #fbe0cb /* oklch(92.334% 0.04096 60.142) */;
+  --wa-color-orange-80: #efc19f /* oklch(84.313% 0.06973 58.09) */;
+  --wa-color-orange-70: #e1a173 /* oklch(76.013% 0.09772 56.368) */;
+  --wa-color-orange-60: #d1824d /* oklch(67.937% 0.11938 53.195) */;
+  --wa-color-orange-50: #b65d22 /* oklch(57.543% 0.13444 49.914) */;
+  --wa-color-orange-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
+  --wa-color-orange-30: #773001 /* oklch(40.317% 0.11198 46.326) */;
+  --wa-color-orange-20: #592100 /* oklch(32.692% 0.09239 45.689) */;
+  --wa-color-orange-10: #381200 /* oklch(24.015% 0.06777 45.771) */;
+  --wa-color-orange-05: #260900 /* oklch(18.789% 0.05427 44.405) */;
+  --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) */;
--- a/src/styles/color/mild.css
+++ b/src/styles/color/mild.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,20 @@
  --wa-color-red: var(--wa-color-red-40);
  --wa-color-red-key: 40;

+  --wa-color-orange-95: #fff0e8 /* oklch(96.479% 0.01949 50.157) */;
+  --wa-color-orange-90: #ffdfc8 /* oklch(92.42% 0.04692 57.822) */;
+  --wa-color-orange-80: #ffbb84 /* oklch(84.3% 0.10585 59.641) */;
+  --wa-color-orange-70: #e79f64 /* oklch(76.075% 0.1143 59.207) */;
+  --wa-color-orange-60: #ca854c /* oklch(67.612% 0.11209 58.789) */;
+  --wa-color-orange-50: #a56732 /* oklch(57.133% 0.10488 58.75) */;
+  --wa-color-orange-40: #824c1a /* oklch(47.091% 0.09621 59.168) */;
+  --wa-color-orange-30: #6a3907 /* oklch(39.832% 0.09012 58.688) */;
+  --wa-color-orange-20: #512800 /* oklch(32.57% 0.07814 57.787) */;
+  --wa-color-orange-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+  --wa-color-orange-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
  --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) */;
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,20 @@
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;

+  --wa-color-orange-95: #f9f2ed /* oklch(96.52% 0.01008 58.217) */;
+  --wa-color-orange-90: #f4e3d6 /* oklch(92.595% 0.02556 59.903) */;
+  --wa-color-orange-80: #e6c3aa /* oklch(84.087% 0.05242 57.474) */;
+  --wa-color-orange-70: #d3a685 /* oklch(75.824% 0.06976 57.703) */;
+  --wa-color-orange-60: #bf8962 /* oklch(67.428% 0.08515 56.553) */;
+  --wa-color-orange-50: #a26839 /* oklch(57.025% 0.09733 58.071) */;
+  --wa-color-orange-40: #824b20 /* oklch(46.959% 0.09366 55.634) */;
+  --wa-color-orange-30: #683a17 /* oklch(39.855% 0.08077 54.814) */;
+  --wa-color-orange-20: #4d2a0e /* oklch(32.469% 0.06563 55.984) */;
+  --wa-color-orange-10: #301705 /* oklch(23.621% 0.04968 54.306) */;
+  --wa-color-orange-05: #1f0e03 /* oklch(18.572% 0.03671 56.067) */;
+  --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) */;
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,20 @@
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;

+  --wa-color-orange-95: #fff1e4 /* oklch(96.567% 0.02297 65.466) */;
+  --wa-color-orange-90: #ffdfc4 /* oklch(92.327% 0.0504 62.301) */;
+  --wa-color-orange-80: #ffbc80 /* oklch(84.418% 0.10871 62.363) */;
+  --wa-color-orange-70: #ff9427 /* oklch(76.467% 0.1689 59.353) */;
+  --wa-color-orange-60: #f16e00 /* oklch(68.563% 0.18516 48.551) */;
+  --wa-color-orange-50: #c75003 /* oklch(58.025% 0.16741 44.08) */;
+  --wa-color-orange-40: #9e3702 /* oklch(47.974% 0.14693 40.809) */;
+  --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
+  --wa-color-orange-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
+  --wa-color-orange-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
+  --wa-color-orange-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
  --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) */;
--- 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;
    }
  }
 }
--- a/src/styles/color/scripts/palettes.js
+++ b/src/styles/color/scripts/palettes.js
@@ -8,9 +8,11 @@ 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;
+  /^\s*--wa-color-(?<hue>[a-z]+)(?:-(?<level>[0-9]+|key))?:\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
 export const rawCSS = {};

 function parse(contents, file) {
@@ -24,8 +26,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 +56,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;
--- a/src/styles/color/scripts/postprocess.js
+++ b/src/styles/color/scripts/postprocess.js
@@ -0,0 +1,162 @@
+/**
+ * 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 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.6 };
+const selector = paletteId =>
+  [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
+    ',\n',
+  );
+
+// Used for formatting warnings
+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);
+
+const indent = '  ';
+
+const paletteIssues = { total: 0 };
+
+for (let paletteId in palettes) {
+  const palette = palettes[paletteId];
+
+  let paletteCSS = '';
+  let hueCSS = Object.fromEntries(hues.map(hue => [hue, '']));
+
+  for (let hue in palette) {
+    let scale = palette[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)})`,
+        { paletteId, hue: hue },
+      );
+    }
+
+    hueCSS[hue] += scaleCSS(hue, scale);
+  }
+
+  // Generate missing hues
+  for (let i = 0; i < hues.length; i++) {
+    let hue = hues[i];
+
+    if (hueCSS[hue]) {
+      continue;
+    }
+
+    // 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. Generating from ${prevHue} and ${nextHue}`, { paletteId, hue });
+
+    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;
+      }
+
+      let prevColor = palette[prevHue][tint];
+      let nextColor = palette[nextHue][tint];
+
+      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).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 - 1;
+console.info(
+  `🎨 Wrote ${Object.keys(palettes).length} palette files.` +
+    (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;
+}
+
+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');
+}
--- a/src/styles/color/scripts/tintless.js
+++ b/src/styles/color/scripts/tintless.js
@@ -1,80 +0,0 @@
-/**
- * Add tintless variables and OKLCH coords as comments to palette CSS files.
- * Run via node tintless.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 { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
-
-const selector = paletteId =>
-  [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
-    ',\n',
-  );
-
-// Used for formatting warnings
-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;
-
-for (let paletteId in palettes) {
-  const tokens = palettes[paletteId];
-
-  let css = '';
-  let prefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
-
-  for (let hue in tokens) {
-    let tints = tokens[hue];
-
-    let tintCSS = '';
-
-    for (let tint in tints) {
-      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];
-      tint = tint.padStart(2, '0');
-
-      tintCSS =
-        `--wa-color-${hue}-${tint}: ${color.toString({ format: 'hex' })} /* ${color.toString()} */;\n` + tintCSS;
-    }
-
-    if (tints.maxChromaTint != tints.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)})`,
-      );
-      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}-${tints.maxChromaTint});\n`;
-    tintCSS += `--wa-color-${hue}-key: ${tints.maxChromaTint};\n`;
-    css += tintCSS + '\n';
-  }
-
-  let indent = '  ';
-  css = `${selector(paletteId)} {\n${css.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
-
-  fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), css, 'utf8');
-}
-
-console.info(
-  `🎨 Wrote ${Object.keys(palettes).length} palette files.` +
-    (issueCount > 0 ? ` ${chalk.bold(issueCount)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` : ''),
-);
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,20 @@
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;

+  --wa-color-orange-95: #fff1de /* oklch(96.415% 0.02927 75.692) */;
+  --wa-color-orange-90: #fee0bc /* oklch(92.25% 0.05764 72.084) */;
+  --wa-color-orange-80: #fdbe7a /* oklch(84.485% 0.11179 67.463) */;
+  --wa-color-orange-70: #fb9641 /* oklch(76.472% 0.15504 57.097) */;
+  --wa-color-orange-60: #f56b11 /* oklch(68.77% 0.18951 45.673) */;
+  --wa-color-orange-50: #cf480e /* oklch(58.335% 0.18077 39.019) */;
+  --wa-color-orange-40: #a13308 /* oklch(48.025% 0.15268 37.837) */;
+  --wa-color-orange-30: #802604 /* oklch(40.538% 0.12998 37.701) */;
+  --wa-color-orange-20: #601a02 /* oklch(33.012% 0.10627 37.613) */;
+  --wa-color-orange-10: #3d0d01 /* oklch(24.269% 0.07841 37.157) */;
+  --wa-color-orange-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
  --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) */;
--- a/src/styles/danger/blue.css
+++ b/src/styles/danger/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-blue {
+  --wa-color-danger-95: var(--wa-color-blue-95);
+  --wa-color-danger-90: var(--wa-color-blue-90);
+  --wa-color-danger-80: var(--wa-color-blue-80);
+  --wa-color-danger-70: var(--wa-color-blue-70);
+  --wa-color-danger-60: var(--wa-color-blue-60);
+  --wa-color-danger-50: var(--wa-color-blue-50);
+  --wa-color-danger-40: var(--wa-color-blue-40);
+  --wa-color-danger-30: var(--wa-color-blue-30);
+  --wa-color-danger-20: var(--wa-color-blue-20);
+  --wa-color-danger-10: var(--wa-color-blue-10);
+  --wa-color-danger-05: var(--wa-color-blue-05);
+  --wa-color-danger: var(--wa-color-blue);
+
+  --wa-color-danger-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-blue-max-50);
+  --wa-color-danger-min-50: var(--wa-color-blue-min-50);
+  --wa-color-danger-max-60: var(--wa-color-blue-max-60);
+  --wa-color-danger-min-60: var(--wa-color-blue-min-60);
+  --wa-color-danger-max-70: var(--wa-color-blue-max-70);
+  --wa-color-danger-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-danger-on: var(--wa-color-blue-on);
+}
--- a/src/styles/danger/cyan.css
+++ b/src/styles/danger/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-cyan {
+  --wa-color-danger-95: var(--wa-color-cyan-95);
+  --wa-color-danger-90: var(--wa-color-cyan-90);
+  --wa-color-danger-80: var(--wa-color-cyan-80);
+  --wa-color-danger-70: var(--wa-color-cyan-70);
+  --wa-color-danger-60: var(--wa-color-cyan-60);
+  --wa-color-danger-50: var(--wa-color-cyan-50);
+  --wa-color-danger-40: var(--wa-color-cyan-40);
+  --wa-color-danger-30: var(--wa-color-cyan-30);
+  --wa-color-danger-20: var(--wa-color-cyan-20);
+  --wa-color-danger-10: var(--wa-color-cyan-10);
+  --wa-color-danger-05: var(--wa-color-cyan-05);
+  --wa-color-danger: var(--wa-color-cyan);
+
+  --wa-color-danger-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-danger-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-danger-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-danger-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-danger-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-danger-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-danger-on: var(--wa-color-cyan-on);
+}
--- a/src/styles/danger/gray.css
+++ b/src/styles/danger/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-gray {
+  --wa-color-danger-95: var(--wa-color-gray-95);
+  --wa-color-danger-90: var(--wa-color-gray-90);
+  --wa-color-danger-80: var(--wa-color-gray-80);
+  --wa-color-danger-70: var(--wa-color-gray-70);
+  --wa-color-danger-60: var(--wa-color-gray-60);
+  --wa-color-danger-50: var(--wa-color-gray-50);
+  --wa-color-danger-40: var(--wa-color-gray-40);
+  --wa-color-danger-30: var(--wa-color-gray-30);
+  --wa-color-danger-20: var(--wa-color-gray-20);
+  --wa-color-danger-10: var(--wa-color-gray-10);
+  --wa-color-danger-05: var(--wa-color-gray-05);
+  --wa-color-danger: var(--wa-color-gray);
+
+  --wa-color-danger-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-gray-max-50);
+  --wa-color-danger-min-50: var(--wa-color-gray-min-50);
+  --wa-color-danger-max-60: var(--wa-color-gray-max-60);
+  --wa-color-danger-min-60: var(--wa-color-gray-min-60);
+  --wa-color-danger-max-70: var(--wa-color-gray-max-70);
+  --wa-color-danger-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-danger-on: var(--wa-color-gray-on);
+}
--- a/src/styles/danger/green.css
+++ b/src/styles/danger/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-green {
+  --wa-color-danger-95: var(--wa-color-green-95);
+  --wa-color-danger-90: var(--wa-color-green-90);
+  --wa-color-danger-80: var(--wa-color-green-80);
+  --wa-color-danger-70: var(--wa-color-green-70);
+  --wa-color-danger-60: var(--wa-color-green-60);
+  --wa-color-danger-50: var(--wa-color-green-50);
+  --wa-color-danger-40: var(--wa-color-green-40);
+  --wa-color-danger-30: var(--wa-color-green-30);
+  --wa-color-danger-20: var(--wa-color-green-20);
+  --wa-color-danger-10: var(--wa-color-green-10);
+  --wa-color-danger-05: var(--wa-color-green-05);
+  --wa-color-danger: var(--wa-color-green);
+
+  --wa-color-danger-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-green-max-50);
+  --wa-color-danger-min-50: var(--wa-color-green-min-50);
+  --wa-color-danger-max-60: var(--wa-color-green-max-60);
+  --wa-color-danger-min-60: var(--wa-color-green-min-60);
+  --wa-color-danger-max-70: var(--wa-color-green-max-70);
+  --wa-color-danger-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-danger-on: var(--wa-color-green-on);
+}
--- a/src/styles/danger/indigo.css
+++ b/src/styles/danger/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-indigo {
+  --wa-color-danger-95: var(--wa-color-indigo-95);
+  --wa-color-danger-90: var(--wa-color-indigo-90);
+  --wa-color-danger-80: var(--wa-color-indigo-80);
+  --wa-color-danger-70: var(--wa-color-indigo-70);
+  --wa-color-danger-60: var(--wa-color-indigo-60);
+  --wa-color-danger-50: var(--wa-color-indigo-50);
+  --wa-color-danger-40: var(--wa-color-indigo-40);
+  --wa-color-danger-30: var(--wa-color-indigo-30);
+  --wa-color-danger-20: var(--wa-color-indigo-20);
+  --wa-color-danger-10: var(--wa-color-indigo-10);
+  --wa-color-danger-05: var(--wa-color-indigo-05);
+  --wa-color-danger: var(--wa-color-indigo);
+
+  --wa-color-danger-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-danger-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-danger-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-danger-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-danger-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-danger-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-danger-on: var(--wa-color-indigo-on);
+}
--- a/src/styles/danger/orange.css
+++ b/src/styles/danger/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-orange {
+  --wa-color-danger-95: var(--wa-color-orange-95);
+  --wa-color-danger-90: var(--wa-color-orange-90);
+  --wa-color-danger-80: var(--wa-color-orange-80);
+  --wa-color-danger-70: var(--wa-color-orange-70);
+  --wa-color-danger-60: var(--wa-color-orange-60);
+  --wa-color-danger-50: var(--wa-color-orange-50);
+  --wa-color-danger-40: var(--wa-color-orange-40);
+  --wa-color-danger-30: var(--wa-color-orange-30);
+  --wa-color-danger-20: var(--wa-color-orange-20);
+  --wa-color-danger-10: var(--wa-color-orange-10);
+  --wa-color-danger-05: var(--wa-color-orange-05);
+  --wa-color-danger: var(--wa-color-orange);
+
+  --wa-color-danger-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-orange-max-50);
+  --wa-color-danger-min-50: var(--wa-color-orange-min-50);
+  --wa-color-danger-max-60: var(--wa-color-orange-max-60);
+  --wa-color-danger-min-60: var(--wa-color-orange-min-60);
+  --wa-color-danger-max-70: var(--wa-color-orange-max-70);
+  --wa-color-danger-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-danger-on: var(--wa-color-orange-on);
+}
--- a/src/styles/danger/pink.css
+++ b/src/styles/danger/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-pink {
+  --wa-color-danger-95: var(--wa-color-pink-95);
+  --wa-color-danger-90: var(--wa-color-pink-90);
+  --wa-color-danger-80: var(--wa-color-pink-80);
+  --wa-color-danger-70: var(--wa-color-pink-70);
+  --wa-color-danger-60: var(--wa-color-pink-60);
+  --wa-color-danger-50: var(--wa-color-pink-50);
+  --wa-color-danger-40: var(--wa-color-pink-40);
+  --wa-color-danger-30: var(--wa-color-pink-30);
+  --wa-color-danger-20: var(--wa-color-pink-20);
+  --wa-color-danger-10: var(--wa-color-pink-10);
+  --wa-color-danger-05: var(--wa-color-pink-05);
+  --wa-color-danger: var(--wa-color-pink);
+
+  --wa-color-danger-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-pink-max-50);
+  --wa-color-danger-min-50: var(--wa-color-pink-min-50);
+  --wa-color-danger-max-60: var(--wa-color-pink-max-60);
+  --wa-color-danger-min-60: var(--wa-color-pink-min-60);
+  --wa-color-danger-max-70: var(--wa-color-pink-max-70);
+  --wa-color-danger-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-danger-on: var(--wa-color-pink-on);
+}
--- a/src/styles/danger/purple.css
+++ b/src/styles/danger/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-purple {
+  --wa-color-danger-95: var(--wa-color-purple-95);
+  --wa-color-danger-90: var(--wa-color-purple-90);
+  --wa-color-danger-80: var(--wa-color-purple-80);
+  --wa-color-danger-70: var(--wa-color-purple-70);
+  --wa-color-danger-60: var(--wa-color-purple-60);
+  --wa-color-danger-50: var(--wa-color-purple-50);
+  --wa-color-danger-40: var(--wa-color-purple-40);
+  --wa-color-danger-30: var(--wa-color-purple-30);
+  --wa-color-danger-20: var(--wa-color-purple-20);
+  --wa-color-danger-10: var(--wa-color-purple-10);
+  --wa-color-danger-05: var(--wa-color-purple-05);
+  --wa-color-danger: var(--wa-color-purple);
+
+  --wa-color-danger-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-purple-max-50);
+  --wa-color-danger-min-50: var(--wa-color-purple-min-50);
+  --wa-color-danger-max-60: var(--wa-color-purple-max-60);
+  --wa-color-danger-min-60: var(--wa-color-purple-min-60);
+  --wa-color-danger-max-70: var(--wa-color-purple-max-70);
+  --wa-color-danger-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-danger-on: var(--wa-color-purple-on);
+}
--- a/src/styles/danger/red.css
+++ b/src/styles/danger/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-red {
+  --wa-color-danger-95: var(--wa-color-red-95);
+  --wa-color-danger-90: var(--wa-color-red-90);
+  --wa-color-danger-80: var(--wa-color-red-80);
+  --wa-color-danger-70: var(--wa-color-red-70);
+  --wa-color-danger-60: var(--wa-color-red-60);
+  --wa-color-danger-50: var(--wa-color-red-50);
+  --wa-color-danger-40: var(--wa-color-red-40);
+  --wa-color-danger-30: var(--wa-color-red-30);
+  --wa-color-danger-20: var(--wa-color-red-20);
+  --wa-color-danger-10: var(--wa-color-red-10);
+  --wa-color-danger-05: var(--wa-color-red-05);
+  --wa-color-danger: var(--wa-color-red);
+
+  --wa-color-danger-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-red-max-50);
+  --wa-color-danger-min-50: var(--wa-color-red-min-50);
+  --wa-color-danger-max-60: var(--wa-color-red-max-60);
+  --wa-color-danger-min-60: var(--wa-color-red-min-60);
+  --wa-color-danger-max-70: var(--wa-color-red-max-70);
+  --wa-color-danger-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-danger-on: var(--wa-color-red-on);
+}
--- a/src/styles/danger/yellow.css
+++ b/src/styles/danger/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-yellow {
+  --wa-color-danger-95: var(--wa-color-yellow-95);
+  --wa-color-danger-90: var(--wa-color-yellow-90);
+  --wa-color-danger-80: var(--wa-color-yellow-80);
+  --wa-color-danger-70: var(--wa-color-yellow-70);
+  --wa-color-danger-60: var(--wa-color-yellow-60);
+  --wa-color-danger-50: var(--wa-color-yellow-50);
+  --wa-color-danger-40: var(--wa-color-yellow-40);
+  --wa-color-danger-30: var(--wa-color-yellow-30);
+  --wa-color-danger-20: var(--wa-color-yellow-20);
+  --wa-color-danger-10: var(--wa-color-yellow-10);
+  --wa-color-danger-05: var(--wa-color-yellow-05);
+  --wa-color-danger: var(--wa-color-yellow);
+
+  --wa-color-danger-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-danger-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-danger-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-danger-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-danger-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-danger-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-danger-on: var(--wa-color-yellow-on);
+}
--- a/src/styles/native/input.css
+++ b/src/styles/native/input.css
@@ -121,7 +121,8 @@ input:where(:not(
  font: inherit;
 }

-.wa-pill,
-:host([pill]) {
-  border-radius: var(--wa-border-radius-pill);
+input.wa-pill,
+textarea.wa-pill,
+:host([pill]) .wa-text-field {
+  border-radius: var(--wa-border-radius-pill) !important;
 }
--- a/src/styles/native/slider.css
+++ b/src/styles/native/slider.css
@@ -55,6 +55,8 @@ input[type='range'] {
      0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
    -webkit-appearance: none;
    margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
+    transition: var(--wa-transition-fast);
+    transition-property: width, height;
  }

  &:enabled {
--- a/src/styles/neutral/blue.css
+++ b/src/styles/neutral/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-blue {
+  --wa-color-neutral-95: var(--wa-color-blue-95);
+  --wa-color-neutral-90: var(--wa-color-blue-90);
+  --wa-color-neutral-80: var(--wa-color-blue-80);
+  --wa-color-neutral-70: var(--wa-color-blue-70);
+  --wa-color-neutral-60: var(--wa-color-blue-60);
+  --wa-color-neutral-50: var(--wa-color-blue-50);
+  --wa-color-neutral-40: var(--wa-color-blue-40);
+  --wa-color-neutral-30: var(--wa-color-blue-30);
+  --wa-color-neutral-20: var(--wa-color-blue-20);
+  --wa-color-neutral-10: var(--wa-color-blue-10);
+  --wa-color-neutral-05: var(--wa-color-blue-05);
+  --wa-color-neutral: var(--wa-color-blue);
+
+  --wa-color-neutral-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-blue-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-blue-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-blue-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-blue-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-blue-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-blue-on);
+}
--- a/src/styles/neutral/cyan.css
+++ b/src/styles/neutral/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-cyan {
+  --wa-color-neutral-95: var(--wa-color-cyan-95);
+  --wa-color-neutral-90: var(--wa-color-cyan-90);
+  --wa-color-neutral-80: var(--wa-color-cyan-80);
+  --wa-color-neutral-70: var(--wa-color-cyan-70);
+  --wa-color-neutral-60: var(--wa-color-cyan-60);
+  --wa-color-neutral-50: var(--wa-color-cyan-50);
+  --wa-color-neutral-40: var(--wa-color-cyan-40);
+  --wa-color-neutral-30: var(--wa-color-cyan-30);
+  --wa-color-neutral-20: var(--wa-color-cyan-20);
+  --wa-color-neutral-10: var(--wa-color-cyan-10);
+  --wa-color-neutral-05: var(--wa-color-cyan-05);
+  --wa-color-neutral: var(--wa-color-cyan);
+
+  --wa-color-neutral-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-cyan-on);
+}
--- a/src/styles/neutral/gray.css
+++ b/src/styles/neutral/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-gray {
+  --wa-color-neutral-95: var(--wa-color-gray-95);
+  --wa-color-neutral-90: var(--wa-color-gray-90);
+  --wa-color-neutral-80: var(--wa-color-gray-80);
+  --wa-color-neutral-70: var(--wa-color-gray-70);
+  --wa-color-neutral-60: var(--wa-color-gray-60);
+  --wa-color-neutral-50: var(--wa-color-gray-50);
+  --wa-color-neutral-40: var(--wa-color-gray-40);
+  --wa-color-neutral-30: var(--wa-color-gray-30);
+  --wa-color-neutral-20: var(--wa-color-gray-20);
+  --wa-color-neutral-10: var(--wa-color-gray-10);
+  --wa-color-neutral-05: var(--wa-color-gray-05);
+  --wa-color-neutral: var(--wa-color-gray);
+
+  --wa-color-neutral-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-gray-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-gray-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-gray-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-gray-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-gray-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-gray-on);
+}
--- a/src/styles/neutral/green.css
+++ b/src/styles/neutral/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-green {
+  --wa-color-neutral-95: var(--wa-color-green-95);
+  --wa-color-neutral-90: var(--wa-color-green-90);
+  --wa-color-neutral-80: var(--wa-color-green-80);
+  --wa-color-neutral-70: var(--wa-color-green-70);
+  --wa-color-neutral-60: var(--wa-color-green-60);
+  --wa-color-neutral-50: var(--wa-color-green-50);
+  --wa-color-neutral-40: var(--wa-color-green-40);
+  --wa-color-neutral-30: var(--wa-color-green-30);
+  --wa-color-neutral-20: var(--wa-color-green-20);
+  --wa-color-neutral-10: var(--wa-color-green-10);
+  --wa-color-neutral-05: var(--wa-color-green-05);
+  --wa-color-neutral: var(--wa-color-green);
+
+  --wa-color-neutral-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-green-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-green-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-green-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-green-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-green-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-green-on);
+}
--- a/src/styles/neutral/indigo.css
+++ b/src/styles/neutral/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-indigo {
+  --wa-color-neutral-95: var(--wa-color-indigo-95);
+  --wa-color-neutral-90: var(--wa-color-indigo-90);
+  --wa-color-neutral-80: var(--wa-color-indigo-80);
+  --wa-color-neutral-70: var(--wa-color-indigo-70);
+  --wa-color-neutral-60: var(--wa-color-indigo-60);
+  --wa-color-neutral-50: var(--wa-color-indigo-50);
+  --wa-color-neutral-40: var(--wa-color-indigo-40);
+  --wa-color-neutral-30: var(--wa-color-indigo-30);
+  --wa-color-neutral-20: var(--wa-color-indigo-20);
+  --wa-color-neutral-10: var(--wa-color-indigo-10);
+  --wa-color-neutral-05: var(--wa-color-indigo-05);
+  --wa-color-neutral: var(--wa-color-indigo);
+
+  --wa-color-neutral-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-indigo-on);
+}
--- a/src/styles/neutral/orange.css
+++ b/src/styles/neutral/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-orange {
+  --wa-color-neutral-95: var(--wa-color-orange-95);
+  --wa-color-neutral-90: var(--wa-color-orange-90);
+  --wa-color-neutral-80: var(--wa-color-orange-80);
+  --wa-color-neutral-70: var(--wa-color-orange-70);
+  --wa-color-neutral-60: var(--wa-color-orange-60);
+  --wa-color-neutral-50: var(--wa-color-orange-50);
+  --wa-color-neutral-40: var(--wa-color-orange-40);
+  --wa-color-neutral-30: var(--wa-color-orange-30);
+  --wa-color-neutral-20: var(--wa-color-orange-20);
+  --wa-color-neutral-10: var(--wa-color-orange-10);
+  --wa-color-neutral-05: var(--wa-color-orange-05);
+  --wa-color-neutral: var(--wa-color-orange);
+
+  --wa-color-neutral-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-orange-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-orange-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-orange-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-orange-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-orange-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-orange-on);
+}
--- a/src/styles/neutral/pink.css
+++ b/src/styles/neutral/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-pink {
+  --wa-color-neutral-95: var(--wa-color-pink-95);
+  --wa-color-neutral-90: var(--wa-color-pink-90);
+  --wa-color-neutral-80: var(--wa-color-pink-80);
+  --wa-color-neutral-70: var(--wa-color-pink-70);
+  --wa-color-neutral-60: var(--wa-color-pink-60);
+  --wa-color-neutral-50: var(--wa-color-pink-50);
+  --wa-color-neutral-40: var(--wa-color-pink-40);
+  --wa-color-neutral-30: var(--wa-color-pink-30);
+  --wa-color-neutral-20: var(--wa-color-pink-20);
+  --wa-color-neutral-10: var(--wa-color-pink-10);
+  --wa-color-neutral-05: var(--wa-color-pink-05);
+  --wa-color-neutral: var(--wa-color-pink);
+
+  --wa-color-neutral-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-pink-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-pink-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-pink-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-pink-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-pink-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-pink-on);
+}
--- a/src/styles/neutral/purple.css
+++ b/src/styles/neutral/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-purple {
+  --wa-color-neutral-95: var(--wa-color-purple-95);
+  --wa-color-neutral-90: var(--wa-color-purple-90);
+  --wa-color-neutral-80: var(--wa-color-purple-80);
+  --wa-color-neutral-70: var(--wa-color-purple-70);
+  --wa-color-neutral-60: var(--wa-color-purple-60);
+  --wa-color-neutral-50: var(--wa-color-purple-50);
+  --wa-color-neutral-40: var(--wa-color-purple-40);
+  --wa-color-neutral-30: var(--wa-color-purple-30);
+  --wa-color-neutral-20: var(--wa-color-purple-20);
+  --wa-color-neutral-10: var(--wa-color-purple-10);
+  --wa-color-neutral-05: var(--wa-color-purple-05);
+  --wa-color-neutral: var(--wa-color-purple);
+
+  --wa-color-neutral-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-purple-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-purple-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-purple-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-purple-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-purple-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-purple-on);
+}
--- a/src/styles/neutral/red.css
+++ b/src/styles/neutral/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-red {
+  --wa-color-neutral-95: var(--wa-color-red-95);
+  --wa-color-neutral-90: var(--wa-color-red-90);
+  --wa-color-neutral-80: var(--wa-color-red-80);
+  --wa-color-neutral-70: var(--wa-color-red-70);
+  --wa-color-neutral-60: var(--wa-color-red-60);
+  --wa-color-neutral-50: var(--wa-color-red-50);
+  --wa-color-neutral-40: var(--wa-color-red-40);
+  --wa-color-neutral-30: var(--wa-color-red-30);
+  --wa-color-neutral-20: var(--wa-color-red-20);
+  --wa-color-neutral-10: var(--wa-color-red-10);
+  --wa-color-neutral-05: var(--wa-color-red-05);
+  --wa-color-neutral: var(--wa-color-red);
+
+  --wa-color-neutral-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-red-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-red-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-red-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-red-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-red-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-red-on);
+}
--- a/src/styles/neutral/yellow.css
+++ b/src/styles/neutral/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-yellow {
+  --wa-color-neutral-95: var(--wa-color-yellow-95);
+  --wa-color-neutral-90: var(--wa-color-yellow-90);
+  --wa-color-neutral-80: var(--wa-color-yellow-80);
+  --wa-color-neutral-70: var(--wa-color-yellow-70);
+  --wa-color-neutral-60: var(--wa-color-yellow-60);
+  --wa-color-neutral-50: var(--wa-color-yellow-50);
+  --wa-color-neutral-40: var(--wa-color-yellow-40);
+  --wa-color-neutral-30: var(--wa-color-yellow-30);
+  --wa-color-neutral-20: var(--wa-color-yellow-20);
+  --wa-color-neutral-10: var(--wa-color-yellow-10);
+  --wa-color-neutral-05: var(--wa-color-yellow-05);
+  --wa-color-neutral: var(--wa-color-yellow);
+
+  --wa-color-neutral-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-yellow-on);
+}
--- a/src/styles/success/blue.css
+++ b/src/styles/success/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-blue {
+  --wa-color-success-95: var(--wa-color-blue-95);
+  --wa-color-success-90: var(--wa-color-blue-90);
+  --wa-color-success-80: var(--wa-color-blue-80);
+  --wa-color-success-70: var(--wa-color-blue-70);
+  --wa-color-success-60: var(--wa-color-blue-60);
+  --wa-color-success-50: var(--wa-color-blue-50);
+  --wa-color-success-40: var(--wa-color-blue-40);
+  --wa-color-success-30: var(--wa-color-blue-30);
+  --wa-color-success-20: var(--wa-color-blue-20);
+  --wa-color-success-10: var(--wa-color-blue-10);
+  --wa-color-success-05: var(--wa-color-blue-05);
+  --wa-color-success: var(--wa-color-blue);
+
+  --wa-color-success-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-blue-max-50);
+  --wa-color-success-min-50: var(--wa-color-blue-min-50);
+  --wa-color-success-max-60: var(--wa-color-blue-max-60);
+  --wa-color-success-min-60: var(--wa-color-blue-min-60);
+  --wa-color-success-max-70: var(--wa-color-blue-max-70);
+  --wa-color-success-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-success-on: var(--wa-color-blue-on);
+}
--- a/src/styles/success/cyan.css
+++ b/src/styles/success/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-cyan {
+  --wa-color-success-95: var(--wa-color-cyan-95);
+  --wa-color-success-90: var(--wa-color-cyan-90);
+  --wa-color-success-80: var(--wa-color-cyan-80);
+  --wa-color-success-70: var(--wa-color-cyan-70);
+  --wa-color-success-60: var(--wa-color-cyan-60);
+  --wa-color-success-50: var(--wa-color-cyan-50);
+  --wa-color-success-40: var(--wa-color-cyan-40);
+  --wa-color-success-30: var(--wa-color-cyan-30);
+  --wa-color-success-20: var(--wa-color-cyan-20);
+  --wa-color-success-10: var(--wa-color-cyan-10);
+  --wa-color-success-05: var(--wa-color-cyan-05);
+  --wa-color-success: var(--wa-color-cyan);
+
+  --wa-color-success-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-success-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-success-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-success-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-success-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-success-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-success-on: var(--wa-color-cyan-on);
+}
--- a/src/styles/success/gray.css
+++ b/src/styles/success/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-gray {
+  --wa-color-success-95: var(--wa-color-gray-95);
+  --wa-color-success-90: var(--wa-color-gray-90);
+  --wa-color-success-80: var(--wa-color-gray-80);
+  --wa-color-success-70: var(--wa-color-gray-70);
+  --wa-color-success-60: var(--wa-color-gray-60);
+  --wa-color-success-50: var(--wa-color-gray-50);
+  --wa-color-success-40: var(--wa-color-gray-40);
+  --wa-color-success-30: var(--wa-color-gray-30);
+  --wa-color-success-20: var(--wa-color-gray-20);
+  --wa-color-success-10: var(--wa-color-gray-10);
+  --wa-color-success-05: var(--wa-color-gray-05);
+  --wa-color-success: var(--wa-color-gray);
+
+  --wa-color-success-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-gray-max-50);
+  --wa-color-success-min-50: var(--wa-color-gray-min-50);
+  --wa-color-success-max-60: var(--wa-color-gray-max-60);
+  --wa-color-success-min-60: var(--wa-color-gray-min-60);
+  --wa-color-success-max-70: var(--wa-color-gray-max-70);
+  --wa-color-success-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-success-on: var(--wa-color-gray-on);
+}
--- a/src/styles/success/green.css
+++ b/src/styles/success/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-green {
+  --wa-color-success-95: var(--wa-color-green-95);
+  --wa-color-success-90: var(--wa-color-green-90);
+  --wa-color-success-80: var(--wa-color-green-80);
+  --wa-color-success-70: var(--wa-color-green-70);
+  --wa-color-success-60: var(--wa-color-green-60);
+  --wa-color-success-50: var(--wa-color-green-50);
+  --wa-color-success-40: var(--wa-color-green-40);
+  --wa-color-success-30: var(--wa-color-green-30);
+  --wa-color-success-20: var(--wa-color-green-20);
+  --wa-color-success-10: var(--wa-color-green-10);
+  --wa-color-success-05: var(--wa-color-green-05);
+  --wa-color-success: var(--wa-color-green);
+
+  --wa-color-success-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-green-max-50);
+  --wa-color-success-min-50: var(--wa-color-green-min-50);
+  --wa-color-success-max-60: var(--wa-color-green-max-60);
+  --wa-color-success-min-60: var(--wa-color-green-min-60);
+  --wa-color-success-max-70: var(--wa-color-green-max-70);
+  --wa-color-success-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-success-on: var(--wa-color-green-on);
+}
--- a/src/styles/success/indigo.css
+++ b/src/styles/success/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-indigo {
+  --wa-color-success-95: var(--wa-color-indigo-95);
+  --wa-color-success-90: var(--wa-color-indigo-90);
+  --wa-color-success-80: var(--wa-color-indigo-80);
+  --wa-color-success-70: var(--wa-color-indigo-70);
+  --wa-color-success-60: var(--wa-color-indigo-60);
+  --wa-color-success-50: var(--wa-color-indigo-50);
+  --wa-color-success-40: var(--wa-color-indigo-40);
+  --wa-color-success-30: var(--wa-color-indigo-30);
+  --wa-color-success-20: var(--wa-color-indigo-20);
+  --wa-color-success-10: var(--wa-color-indigo-10);
+  --wa-color-success-05: var(--wa-color-indigo-05);
+  --wa-color-success: var(--wa-color-indigo);
+
+  --wa-color-success-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-success-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-success-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-success-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-success-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-success-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-success-on: var(--wa-color-indigo-on);
+}
--- a/src/styles/success/orange.css
+++ b/src/styles/success/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-orange {
+  --wa-color-success-95: var(--wa-color-orange-95);
+  --wa-color-success-90: var(--wa-color-orange-90);
+  --wa-color-success-80: var(--wa-color-orange-80);
+  --wa-color-success-70: var(--wa-color-orange-70);
+  --wa-color-success-60: var(--wa-color-orange-60);
+  --wa-color-success-50: var(--wa-color-orange-50);
+  --wa-color-success-40: var(--wa-color-orange-40);
+  --wa-color-success-30: var(--wa-color-orange-30);
+  --wa-color-success-20: var(--wa-color-orange-20);
+  --wa-color-success-10: var(--wa-color-orange-10);
+  --wa-color-success-05: var(--wa-color-orange-05);
+  --wa-color-success: var(--wa-color-orange);
+
+  --wa-color-success-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-orange-max-50);
+  --wa-color-success-min-50: var(--wa-color-orange-min-50);
+  --wa-color-success-max-60: var(--wa-color-orange-max-60);
+  --wa-color-success-min-60: var(--wa-color-orange-min-60);
+  --wa-color-success-max-70: var(--wa-color-orange-max-70);
+  --wa-color-success-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-success-on: var(--wa-color-orange-on);
+}
--- a/src/styles/success/pink.css
+++ b/src/styles/success/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-pink {
+  --wa-color-success-95: var(--wa-color-pink-95);
+  --wa-color-success-90: var(--wa-color-pink-90);
+  --wa-color-success-80: var(--wa-color-pink-80);
+  --wa-color-success-70: var(--wa-color-pink-70);
+  --wa-color-success-60: var(--wa-color-pink-60);
+  --wa-color-success-50: var(--wa-color-pink-50);
+  --wa-color-success-40: var(--wa-color-pink-40);
+  --wa-color-success-30: var(--wa-color-pink-30);
+  --wa-color-success-20: var(--wa-color-pink-20);
+  --wa-color-success-10: var(--wa-color-pink-10);
+  --wa-color-success-05: var(--wa-color-pink-05);
+  --wa-color-success: var(--wa-color-pink);
+
+  --wa-color-success-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-pink-max-50);
+  --wa-color-success-min-50: var(--wa-color-pink-min-50);
+  --wa-color-success-max-60: var(--wa-color-pink-max-60);
+  --wa-color-success-min-60: var(--wa-color-pink-min-60);
+  --wa-color-success-max-70: var(--wa-color-pink-max-70);
+  --wa-color-success-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-success-on: var(--wa-color-pink-on);
+}
--- a/src/styles/success/purple.css
+++ b/src/styles/success/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-purple {
+  --wa-color-success-95: var(--wa-color-purple-95);
+  --wa-color-success-90: var(--wa-color-purple-90);
+  --wa-color-success-80: var(--wa-color-purple-80);
+  --wa-color-success-70: var(--wa-color-purple-70);
+  --wa-color-success-60: var(--wa-color-purple-60);
+  --wa-color-success-50: var(--wa-color-purple-50);
+  --wa-color-success-40: var(--wa-color-purple-40);
+  --wa-color-success-30: var(--wa-color-purple-30);
+  --wa-color-success-20: var(--wa-color-purple-20);
+  --wa-color-success-10: var(--wa-color-purple-10);
+  --wa-color-success-05: var(--wa-color-purple-05);
+  --wa-color-success: var(--wa-color-purple);
+
+  --wa-color-success-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-purple-max-50);
+  --wa-color-success-min-50: var(--wa-color-purple-min-50);
+  --wa-color-success-max-60: var(--wa-color-purple-max-60);
+  --wa-color-success-min-60: var(--wa-color-purple-min-60);
+  --wa-color-success-max-70: var(--wa-color-purple-max-70);
+  --wa-color-success-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-success-on: var(--wa-color-purple-on);
+}
--- a/src/styles/success/red.css
+++ b/src/styles/success/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-red {
+  --wa-color-success-95: var(--wa-color-red-95);
+  --wa-color-success-90: var(--wa-color-red-90);
+  --wa-color-success-80: var(--wa-color-red-80);
+  --wa-color-success-70: var(--wa-color-red-70);
+  --wa-color-success-60: var(--wa-color-red-60);
+  --wa-color-success-50: var(--wa-color-red-50);
+  --wa-color-success-40: var(--wa-color-red-40);
+  --wa-color-success-30: var(--wa-color-red-30);
+  --wa-color-success-20: var(--wa-color-red-20);
+  --wa-color-success-10: var(--wa-color-red-10);
+  --wa-color-success-05: var(--wa-color-red-05);
+  --wa-color-success: var(--wa-color-red);
+
+  --wa-color-success-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-red-max-50);
+  --wa-color-success-min-50: var(--wa-color-red-min-50);
+  --wa-color-success-max-60: var(--wa-color-red-max-60);
+  --wa-color-success-min-60: var(--wa-color-red-min-60);
+  --wa-color-success-max-70: var(--wa-color-red-max-70);
+  --wa-color-success-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-success-on: var(--wa-color-red-on);
+}
--- a/src/styles/success/yellow.css
+++ b/src/styles/success/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-yellow {
+  --wa-color-success-95: var(--wa-color-yellow-95);
+  --wa-color-success-90: var(--wa-color-yellow-90);
+  --wa-color-success-80: var(--wa-color-yellow-80);
+  --wa-color-success-70: var(--wa-color-yellow-70);
+  --wa-color-success-60: var(--wa-color-yellow-60);
+  --wa-color-success-50: var(--wa-color-yellow-50);
+  --wa-color-success-40: var(--wa-color-yellow-40);
+  --wa-color-success-30: var(--wa-color-yellow-30);
+  --wa-color-success-20: var(--wa-color-yellow-20);
+  --wa-color-success-10: var(--wa-color-yellow-10);
+  --wa-color-success-05: var(--wa-color-yellow-05);
+  --wa-color-success: var(--wa-color-yellow);
+
+  --wa-color-success-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-success-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-success-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-success-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-success-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-success-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-success-on: var(--wa-color-yellow-on);
+}
--- a/src/styles/themes/active/color.css
+++ b/src/styles/themes/active/color.css
@@ -1,6 +1,10 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
@import url('../../brand/green.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');

 :where(:root),
 :host,
@@ -13,7 +17,7 @@
  /**
   * Foundational Colors
   */
-  --wa-color-text-normal: var(--wa-color-gray-05);
+  --wa-color-text-normal: var(--wa-color-neutral-05);
  --wa-color-text-link: var(--wa-color-brand-40);

  --wa-color-focus: var(--wa-color-blue-60);
@@ -26,52 +30,52 @@
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
  --wa-color-brand-border-normal: var(--wa-color-brand-80);
  --wa-color-brand-border-loud: var(--wa-color-brand-70);
  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
  --wa-color-brand-on-normal: var(--wa-color-brand-30);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
+  --wa-color-brand-on-loud: black;

-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-70);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-70);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
  --wa-color-success-on-loud: black;

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-70);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
  --wa-color-warning-on-loud: black;

-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-70);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-70);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
  --wa-color-danger-on-loud: black;

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
  --wa-color-neutral-on-loud: black;
 }

@@ -90,51 +94,51 @@
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
  --wa-color-brand-border-normal: var(--wa-color-brand-30);
  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-70);
  --wa-color-brand-on-normal: var(--wa-color-brand-90);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
+  --wa-color-brand-on-loud: black;

-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-80);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-90);
  --wa-color-success-on-loud: black;

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-90);
  --wa-color-warning-on-loud: black;

-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-90);
  --wa-color-danger-on-loud: black;

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-90);
  --wa-color-neutral-on-loud: black;
 }
--- a/src/styles/themes/awesome/color.css
+++ b/src/styles/themes/awesome/color.css
@@ -1,6 +1,10 @@
@import url('../../color/bright.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');

 :where(:root),
 :host,
@@ -10,14 +14,14 @@
  /**
   * Foundational Colors
   */
-  --wa-color-text-normal: var(--wa-color-gray-20);
+  --wa-color-text-normal: var(--wa-color-neutral-20);

  /**
   * Semantic Colors
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70-min);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
  --wa-color-brand-border-quiet: var(--wa-color-brand-70);
  --wa-color-brand-border-normal: var(--wa-color-brand-50);
  --wa-color-brand-border-loud: var(--wa-color-brand-30);
@@ -25,44 +29,44 @@
  --wa-color-brand-on-normal: var(--wa-color-brand-40);
  --wa-color-brand-on-loud: var(--wa-color-text-normal);

-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-70);
-  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-border-loud: var(--wa-color-green-30);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-70);
+  --wa-color-success-border-normal: var(--wa-color-success-50);
+  --wa-color-success-border-loud: var(--wa-color-success-30);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-40);
  --wa-color-success-on-loud: var(--wa-color-text-normal);

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-30);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-border-normal: var(--wa-color-warning-50);
+  --wa-color-warning-border-loud: var(--wa-color-warning-30);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-40);
  --wa-color-warning-on-loud: var(--wa-color-text-normal);

-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-70);
-  --wa-color-danger-border-normal: var(--wa-color-red-50);
-  --wa-color-danger-border-loud: var(--wa-color-red-30);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-border-normal: var(--wa-color-danger-50);
+  --wa-color-danger-border-loud: var(--wa-color-danger-30);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-40);
  --wa-color-danger-on-loud: var(--wa-color-text-normal);

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-50);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-30);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-40);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-40);
  --wa-color-neutral-on-loud: var(--wa-color-text-normal);
 }

@@ -77,51 +81,51 @@
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
  --wa-color-brand-border-normal: var(--wa-color-brand-50);
  --wa-color-brand-border-loud: var(--wa-color-brand-80);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-70);
  --wa-color-brand-on-normal: var(--wa-color-brand-80);
  --wa-color-brand-on-loud: white;

-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-border-loud: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-50);
+  --wa-color-success-border-loud: var(--wa-color-success-80);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-80);
  --wa-color-success-on-loud: white;

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-05);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-50);
+  --wa-color-warning-border-loud: var(--wa-color-warning-80);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-warning-05);

-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-50);
-  --wa-color-danger-border-loud: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-50);
+  --wa-color-danger-border-loud: var(--wa-color-danger-80);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-80);
  --wa-color-danger-on-loud: white;

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-50);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
  --wa-color-neutral-on-loud: white;
 }
--- a/src/styles/themes/brutalist/color.css
+++ b/src/styles/themes/brutalist/color.css
@@ -1,6 +1,10 @@
@import url('../../color/default.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');

 :where(:root),
 :host,
@@ -10,9 +14,9 @@
  /**
   * Foundational Colors
   */
-  --wa-color-surface-border: var(--wa-color-gray-10);
+  --wa-color-surface-border: var(--wa-color-neutral-10);

-  --wa-color-text-link: var(--wa-color-gray-40);
+  --wa-color-text-link: var(--wa-color-neutral-40);

  --wa-color-shadow: rgb(0 0 0 / 0.2);

@@ -24,7 +28,7 @@
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-max-50);
  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
  --wa-color-brand-border-normal: var(--wa-color-brand-60);
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
@@ -32,44 +36,44 @@
  --wa-color-brand-on-normal: var(--wa-color-brand-40);
  --wa-color-brand-on-loud: white;

-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-60);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-max-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-80);
+  --wa-color-success-border-normal: var(--wa-color-success-60);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-40);
  --wa-color-success-on-loud: white;

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-60);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-max-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-border-normal: var(--wa-color-warning-60);
+  --wa-color-warning-border-loud: var(--wa-color-warning-40);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-40);
  --wa-color-warning-on-loud: white;

-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-80);
-  --wa-color-danger-border-normal: var(--wa-color-red-60);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-max-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-border-normal: var(--wa-color-danger-60);
+  --wa-color-danger-border-loud: var(--wa-color-danger-40);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-40);
  --wa-color-danger-on-loud: white;

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
  --wa-color-neutral-on-loud: white;
 }

@@ -82,12 +86,12 @@
  /**
   * Foundational Colors
   */
-  --wa-color-surface-raised: var(--wa-color-gray-05);
-  --wa-color-surface-default: var(--wa-color-gray-10);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
-  --wa-color-surface-border: var(--wa-color-gray-40);
+  --wa-color-surface-raised: var(--wa-color-neutral-05);
+  --wa-color-surface-default: var(--wa-color-neutral-10);
+  --wa-color-surface-lowered: var(--wa-color-neutral-05);
+  --wa-color-surface-border: var(--wa-color-neutral-40);

-  --wa-color-text-link: var(--wa-color-gray-70);
+  --wa-color-text-link: var(--wa-color-neutral-70);

  --wa-color-shadow: rgb(0 0 0 / 0.5);

@@ -96,51 +100,51 @@
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70-min);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
  --wa-color-brand-border-normal: var(--wa-color-brand-40);
  --wa-color-brand-border-loud: var(--wa-color-brand-80);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-70);
  --wa-color-brand-on-normal: var(--wa-color-brand-95);
  --wa-color-brand-on-loud: var(--wa-color-brand-10);

-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-green-80);
-  --wa-color-success-on-normal: var(--wa-color-green-95);
-  --wa-color-success-on-loud: var(--wa-color-green-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-80);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-95);
+  --wa-color-success-on-loud: var(--wa-color-success-10);

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-95);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-80);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-95);
+  --wa-color-warning-on-loud: var(--wa-color-warning-10);

-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-95);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-80);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-95);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-50);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-95);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-90);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-95);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
--- a/src/styles/themes/classic/color.css
+++ b/src/styles/themes/classic/color.css
@@ -1,6 +1,10 @@
@import url('../../color/classic.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');

 :where(:root),
 :host,
@@ -22,44 +26,44 @@
  --wa-color-brand-on-normal: var(--wa-color-brand-40);
  --wa-color-brand-on-loud: white;

-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-50);
+  --wa-color-success-on-normal: var(--wa-color-success-40);
  --wa-color-success-on-loud: white;

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-50);
+  --wa-color-warning-on-normal: var(--wa-color-warning-40);
  --wa-color-warning-on-loud: white;

-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-50);
+  --wa-color-danger-on-normal: var(--wa-color-danger-40);
  --wa-color-danger-on-loud: white;

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
  --wa-color-neutral-on-loud: white;
 }

@@ -69,7 +73,7 @@
  /**
   * Foundational Colors
   */
-  --wa-color-text-normal: var(--wa-color-gray-80);
+  --wa-color-text-normal: var(--wa-color-neutral-80);

  /**
   * Semantic Colors
@@ -82,45 +86,45 @@
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
  --wa-color-brand-on-normal: var(--wa-color-brand-80);
-  --wa-color-brand-on-loud: var(--wa-color-gray-10);
+  --wa-color-brand-on-loud: var(--wa-color-neutral-10);

-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
-  --wa-color-success-on-loud: var(--wa-color-gray-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-70);
+  --wa-color-success-on-normal: var(--wa-color-success-80);
+  --wa-color-success-on-loud: var(--wa-color-neutral-10);

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-gray-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-neutral-10);

-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-60);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: var(--wa-color-gray-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-60);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-80);
+  --wa-color-danger-on-loud: var(--wa-color-neutral-10);

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
 }
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -1,4 +1,8 @@
@import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');

 /**
 * Foundational Colors and Semantic Colors
@@ -20,25 +24,25 @@
   * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
  --wa-color-surface-raised: white;
  --wa-color-surface-default: white;
-  --wa-color-surface-lowered: var(--wa-color-gray-95);
-  --wa-color-surface-border: var(--wa-color-gray-90);
+  --wa-color-surface-lowered: var(--wa-color-neutral-95);
+  --wa-color-surface-border: var(--wa-color-neutral-90);

  /* Text colors are used for standard text elements.
   * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
-  --wa-color-text-normal: var(--wa-color-gray-10);
-  --wa-color-text-quiet: var(--wa-color-gray-40);
+  --wa-color-text-normal: var(--wa-color-neutral-10);
+  --wa-color-text-quiet: var(--wa-color-neutral-40);
  --wa-color-text-link: var(--wa-color-brand-40);

  /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
+  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 20%, transparent);

  /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
   * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
   * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
  --wa-color-shadow: color-mix(
    in oklab,
-    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
+    var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
    transparent
  );

@@ -61,7 +65,7 @@
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-max-50);
  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
  --wa-color-brand-border-normal: var(--wa-color-brand-80);
  --wa-color-brand-border-loud: var(--wa-color-brand-60);
@@ -69,44 +73,44 @@
  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-max-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
  --wa-color-success-on-loud: white;

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-max-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
  --wa-color-warning-on-loud: white;

-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-max-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
  --wa-color-danger-on-loud: white;

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
  --wa-color-neutral-on-loud: white;
 }

@@ -120,17 +124,17 @@
  /**
   * Foundational Colors
   */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
+  --wa-color-surface-raised: var(--wa-color-neutral-10);
+  --wa-color-surface-default: var(--wa-color-neutral-05);
  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
-  --wa-color-surface-border: var(--wa-color-gray-20);
+  --wa-color-surface-border: var(--wa-color-neutral-20);

-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
  --wa-color-text-link: var(--wa-color-brand-70);

  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

  /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
  --wa-color-shadow: color-mix(
@@ -149,51 +153,51 @@
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
  --wa-color-brand-border-normal: var(--wa-color-brand-30);
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-60);
  --wa-color-brand-on-normal: var(--wa-color-brand-70);
  --wa-color-brand-on-loud: white;

-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-60);
-  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-60);
+  --wa-color-success-on-normal: var(--wa-color-success-70);
  --wa-color-success-on-loud: white;

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-40);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-60);
+  --wa-color-warning-on-normal: var(--wa-color-warning-70);
  --wa-color-warning-on-loud: white;

-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-60);
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-40);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-60);
+  --wa-color-danger-on-normal: var(--wa-color-danger-70);
  --wa-color-danger-on-loud: white;

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
 }
--- a/src/styles/themes/glossy/color.css
+++ b/src/styles/themes/glossy/color.css
@@ -1,67 +1,7 @@
@import url('../../color/elegant.css');
@import url('../default/color.css');
@import url('../../brand/indigo.css');
-
-:where(:root),
-:host,
-.wa-theme-glossy,
-.wa-light,
-.wa-dark .wa-invert {
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-link: var(--wa-color-brand-40);
-
-  --wa-color-focus: var(--wa-color-brand-60);
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-link: var(--wa-color-brand-70);
-
-  --wa-color-focus: var(--wa-color-brand-60);
-
-  /**
-    * Semantic Colors
-    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-border-normal: var(--wa-color-brand-30);
-  --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
-  --wa-color-brand-on-normal: var(--wa-color-brand-70);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-}
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
--- a/src/styles/themes/matter/color.css
+++ b/src/styles/themes/matter/color.css
@@ -1,6 +1,10 @@
@import url('../../color/mild.css');
@import url('../default/color.css');
-@import url('../../brand/indigo.css');
+@import url('../../brand/purple.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');

 :where(:root),
 :host,
@@ -15,7 +19,7 @@
   */

  --wa-color-surface-raised: var(--wa-color-brand-95);
-  --wa-color-surface-lowered: var(--wa-color-gray-90);
+  --wa-color-surface-lowered: var(--wa-color-neutral-90);

  --wa-color-text-link: var(--wa-color-brand-40);

@@ -39,44 +43,44 @@
  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-40);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
  --wa-color-success-on-loud: white;

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-40);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
  --wa-color-warning-on-loud: white;

-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-40);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
  --wa-color-danger-on-loud: white;

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-20);
  --wa-color-neutral-on-loud: white;
 }

@@ -102,43 +106,43 @@
  --wa-color-brand-on-normal: var(--wa-color-brand-80);
  --wa-color-brand-on-loud: var(--wa-color-brand-10);

-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
-  --wa-color-success-on-loud: var(--wa-color-green-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-70);
+  --wa-color-success-on-normal: var(--wa-color-success-80);
+  --wa-color-success-on-loud: var(--wa-color-success-10);

-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-warning-10);

-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-80);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);

-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
konnorrogers	350ec2def1	reflect href on buttons	2025-03-20 14:36:13 -04:00
Lindsay M	07fe6d598e	Add curated `orange` to all palettes, closes #657 (#798 ) * Adjust `orange` in Default palette * Adjust `orange`, `red`, and `yellow` in Classic palette * Adjust `orange` in Anodized palette * Adjust `orange` in Bright palette * Adjust `orange` in Mild palette * Adjust `orange` in Natural palette * Adjust `orange` in Vogue palette * Adjust `orange` in Rudimentary palette * Adjust `orange` in Elegant palette	2025-03-18 16:08:31 -04:00
Konnor Rogers	79bafc513a	11ty for webawesome-app (#803 ) * working on integration * 11ty for webawesome + app * add flashes * additional changes * prettier * add note about nunjucks * prettier	2025-03-18 13:04:24 -04:00
Lea Verou	1d03f7bee0	[Icon-button] Make `--background-color-hover` work + remaining 3 interaction properties (#801 ) * [Icon-button] Make `--background-color-hover` work, fixes #800 * [Icon-button] Introduce `--text-color-hover`, `--background-color-active`, `--text-color-active` * Oops	2025-03-14 09:29:04 -04:00
Lindsay M	a9bf1bd838	Add `--wa-color-{role}-N` variables, closes #785 (#797 ) * Initial comment, based on #768 * Add `neutral` color variables * Add `success`, `warning`, and `danger` variables * Theme touch-ups * Remove unused clamped tokens * Re-add clamped tokens test page, refactor to be based on hue instead of `brand`	2025-03-13 17:07:03 -04:00
Lea Verou	c0ca739366	More robust dynamic value / options handling, fixes #789	2025-03-12 16:52:50 -04:00
Cory LaViska	a6745602d6	fix color picker light dismiss (#794 ) * fix color picker light dismiss * update changelog	2025-03-12 15:59:37 -04:00
Cory LaViska	da4f619d95	prevent card example from overflowing (#795 )	2025-03-12 14:44:39 -04:00
Cory LaViska	1283a696a5	fix switch + tooltip behavior (#793 )	2025-03-12 18:22:23 +00:00
Cory LaViska	d12b97b0b0	fix wa-pill and wa-input[pill] styles (#791 )	2025-03-12 16:19:50 +00:00
Lea Verou	e5c2884880	[Tooltip] Specify inherited CSS properties on host, fixes #773 (#774 ) * [Tooltip] Specify inherited CSS properties on host, fixes #773 * Remove unused `--show-delay` and `--hide-delay`	2025-03-10 15:08:27 -04:00
Lea Verou	1d600a77c4	Fix #566	2025-03-10 14:15:06 -04:00
lindsaym-fa	db3c568ba2	Add generated `orange` to Anodized palette	2025-03-05 22:27:11 -05:00
lindsaym-fa	4bb9805ba6	Add generated `orange` to Bright palette	2025-03-05 22:27:11 -05:00
lindsaym-fa	bd935fa8d5	Add generated `orange` to Classic palette	2025-03-05 22:27:11 -05:00
lindsaym-fa	c3e582b47b	Add generated `orange` to Natural palette	2025-03-05 22:27:11 -05:00
lindsaym-fa	4d094a4e19	Add generated `orange` to Rudimentary palette	2025-03-05 22:27:11 -05:00
lindsaym-fa	782c404bdf	Add generated `orange` to Default palette	2025-03-05 22:27:11 -05:00
lindsaym-fa	f1438981b2	Add generated `orange` to Elegant palette	2025-03-05 22:27:11 -05:00
lindsaym-fa	18b88c2f5c	Add generated `orange` to Mild palette	2025-03-05 22:27:11 -05:00
lindsaym-fa	a2d85f49a3	Add generated `orange` to Vogue palette	2025-03-05 22:27:11 -05:00
Lea Verou	be00026cd3	Update postprocess.js	2025-03-05 22:27:11 -05:00
Lea Verou	58ed88bc5a	Add orange to list of hues	2025-03-05 22:27:11 -05:00
Lea Verou	1d14e186f3	Generate missing hues from neighboring hues	2025-03-05 22:27:11 -05:00
Lea Verou	5f672aabc2	Refactor: variable rename for consistency	2025-03-05 22:27:11 -05:00
Lea Verou	db08e12a32	Pave the way for being able to have core colors that are not mapped to any tint	2025-03-05 22:27:11 -05:00
Lea Verou	e0fc639226	Only use hex when color is within sRGB	2025-03-05 22:27:11 -05:00
Lea Verou	e6c662b543	`tintless.js` -> `postprocess.js`	2025-03-05 22:27:11 -05:00
lindsaym-fa	d1de9a9a73	Fix incorrect sizing tokens in `size` utilities	2025-02-26 01:01:39 -05:00
lindsaym-fa	4931de8eb4	Fix text color for `filled` appearance	2025-02-26 01:01:39 -05:00
Lea Verou	71e7227763	Theme remixing fix: Order of params should not matter (#772 ) Also renamed the `theme` export to `getThemeCode` since it was being renamed everywhere it was imported.	2025-02-21 14:03:55 -05:00
Lea Verou	dd671e15aa	Changelog (#770 )	2025-02-21 13:14:19 -05:00
Cory LaViska	2daeea0349	3.0.0-alpha.11	2025-02-21 12:53:05 -05:00
Cory LaViska	3cb6625c1d	update changelog	2025-02-21 12:52:51 -05:00
Lea Verou	c4b5446d01	Fix boundingClientRect issue for elements whose host is `display: contents`	2025-02-21 12:02:20 -05:00
Lindsay M	41affca083	Allow color tweak tags to wrap (#769 )	2025-02-21 11:50:13 -05:00
Lea Verou	132dbfabcc	Gray tweaks prototype (#761 ) Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>	2025-02-20 12:10:43 -05:00