fix placeholder token

2026-01-19 07:29:14 +00:00 · 2025-02-03 11:55:37 -05:00
122 changed files with 1552 additions and 4418 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -13,4 +13,3 @@ package-lock.json
 tsconfig.json
 cdn
 _site
 docs/assets/scripts/prism-downloaded.js
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -94,7 +94,7 @@ export default function (eleventyConfig) {
  eleventyConfig.addPlugin(highlightCodePlugin());
  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin);
+  eleventyConfig.addPlugin(copyCodePlugin());
  // Various text replacements
  eleventyConfig.addPlugin(
--- a/docs/_data/hueRanges.js
+++ b/docs/_data/hueRanges.js
@@ -1 +0,0 @@
 export { hueRanges as default } from '../assets/scripts/tweak/data.js';
--- a/docs/_data/hues.json
+++ b/docs/_data/hues.json
@@ -1 +1 @@
-["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]
+["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
--- a/docs/_data/palettes.js
+++ b/docs/_data/palettes.js
@@ -1 +1 @@
-export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';
+export { default as default } from '../../src/styles/color/palettes.js';
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -5,18 +5,16 @@
    <meta name="theme-color" content="#f36944">
    <script type="module" src="/assets/scripts/code-examples.js"></script>
    <script type="module" src="/assets/scripts/copy-code.js"></script>
    <script type="module" src="/assets/scripts/scroll.js"></script>
    <script type="module" src="/assets/scripts/turbo.js"></script>
    <script type="module" src="/assets/scripts/search.js"></script>
    <script type="module" src="/assets/scripts/outline.js"></script>
    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
    <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
    {# Docs styles #}
    <link rel="stylesheet" href="/assets/styles/docs.css" />
    {% block head %}{% endblock %}
  </head>
  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
--- a/docs/_includes/contrast-table.njk
+++ b/docs/_includes/contrast-table.njk
@@ -1,4 +1,4 @@
-<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
+<table class="colors wa-palette-{{ paletteId }}">
  <thead>
    <tr>
      <th></th>
@@ -12,31 +12,19 @@
    </tr>
  </thead>
 {% for hue in hues -%}
-<tr data-hue="{{ hue }}">
+<tr>
  <th>{{ hue | capitalize }}</th>
  {% for tint_bg in tints -%}
    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
    {% for tint_fg in tints | reverse -%}
      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
      {% if (tint_fg - tint_bg) | abs == difference %}
-      {% set contrast_wcag = '' %}
+      <td>
-      {% if color_fg and color_bg -%}
+        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
-        {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+          {% set contrast_wcag = '' %}
-      {%- endif %}
+          {% if color_fg and color_bg %}
-      <td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
+            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
-      data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}" data-original-contrast="{{ contrast_wcag }}">
+          {% endif %}
        <div v-content:number="contrast.value"
        class="color swatch" :class="{
          'value-up': contrast.value - contrast.original > 0.0001,
          'value-down': contrast.original - contrast.value > 0.0001,
          'contrast-fail': contrast.value < {{ minContrast }}
        }"
        style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})"
        :style="{
          '--color': contrast.bgColor,
          color: contrast.fgColor,
        }"
        >
          {% if contrast_wcag %}
          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
          {% else %}
--- a/docs/_includes/import-stylesheet-code.md.njk
+++ b/docs/_includes/import-stylesheet-code.md.njk
@@ -1,4 +1,4 @@
-<wa-tab-group class="import-stylesheet-code">
+<wa-tab-group>
 <wa-tab panel="html">In HTML</wa-tab>
 <wa-tab panel="css">In CSS</wa-tab>
 <wa-tab-panel name="html">
--- a/docs/_includes/page-card.njk
+++ b/docs/_includes/page-card.njk
@@ -5,9 +5,6 @@
 		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
 		</div>
 		<span class="page-name">{{ page.data.title }}</span>
 		{% if pageSubtitle -%}
 		<div class="wa-caption-s">{{ pageSubtitle }}</div>
 		{%- endif %}
 	</wa-card>
 </a>
 {% endif %}
--- a/docs/_includes/svgs/palette.njk
+++ b/docs/_includes/svgs/palette.njk
@@ -1,14 +1,11 @@
-{% set paletteId = palette.fileSlug or page.fileSlug %}
+{% set paletteId = page.fileSlug %}
-{% set suffixes = ['-80', '', '-20'] %}
+{% set tints = [80, 60, 40, 20] %}
 {% set width = 20 %}
-{% set height = 12 %}
+{% set height = 13 %}
-{% set height_core = 20 %}
+{% set gap_x = 3 %}
-{% set gap_x = 4 %}
+{% set gap_y = 3 %}
 {% set gap_y = 4 %}
-{% set total_width = (width + gap_x) * hues|length %}
+<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
 {% set total_height = (height + gap_y) * suffixes|length + (height_core - height) %}
 <svg viewBox="0 0 {{ total_width }} {{ total_height }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
 <style>
 	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
 	.palette-icon {
@@ -18,14 +15,10 @@
 {% for hue in hues -%}
  {% set hueIndex = loop.index0 %}
-  {% set y = 0 %}
+  {% for tint in tints -%}
-  {% for suffix in suffixes -%}
+    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
-    {% set swatch_height = height if suffix else height_core %}
+	      width="{{ width }}" height="{{ height }}"
-
+	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ y }}"
 	      width="{{ width }}" height="{{ swatch_height }}"
 	      fill="var(--wa-color-{{ hue }}{{ suffix }})" rx="2" />
 	{% set y = y + swatch_height + gap_y %}
  {%- endfor %}
 {% endfor %}
 </svg>
--- a/docs/_includes/svgs/theme-color.njk
+++ b/docs/_includes/svgs/theme-color.njk
@@ -1,24 +0,0 @@
 {% set themeId = theme.fileSlug %}
 <div>
  <template shadowrootmode="open">
    <link rel="stylesheet" href="/dist/styles/utilities.css">
    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
    <div class="theme-color-icon wa-theme-{{ themeId }}">
      <div class="wa-brand wa-accent">A</div>
      <div class="wa-brand wa-outlined">A</div>
      <div class="wa-brand wa-filled">A</div>
      <div class="wa-brand wa-plain">A</div>
      {# <div class="wa-danger wa-outlined wa-filled"><wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon></div> #}
      <div class="wa-neutral wa-accent">A</div>
      <div class="wa-neutral wa-outlined">A</div>
      <div class="wa-neutral wa-filled">A</div>
      <div class="wa-neutral wa-plain">A</div>
      {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
    </div>
  </template>
 </div>
--- a/docs/_includes/svgs/theme-typography.njk
+++ b/docs/_includes/svgs/theme-typography.njk
@@ -1,16 +0,0 @@
 {% set themeId = theme.fileSlug %}
 <div>
  <template shadowrootmode="open">
    <link rel="stylesheet" href="/dist/styles/native/content.css">
    <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
    <div class="theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
      <h3>Title</h3>
      <p>Body text</p>
    </div>
  </template>
 </div>
--- a/docs/_includes/svgs/tokens/color.njk
+++ b/docs/_includes/svgs/tokens/color.njk
@@ -2,7 +2,7 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-purple-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
 </svg>
--- a/docs/_includes/theme-showcase.njk
+++ b/docs/_includes/theme-showcase.njk
@@ -23,7 +23,7 @@
        </div>
        <wa-divider></wa-divider>
        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
+          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
            <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
          </wa-avatar>
          <div class="wa-stack wa-gap-2xs">
--- a/docs/_includes/visual-tests/appearance.njk
+++ b/docs/_includes/visual-tests/appearance.njk
@@ -93,7 +93,7 @@
      </td>
    </tr>
    <tr>
-      <th><code>outlined</code></th>
+      <th class="test-failure"><code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" appearance="outlined">Brand</wa-badge>
@@ -495,7 +495,7 @@
      </td>
    </tr>
    <tr>
-      <th><code>outlined</code></th>
+      <th class="test-failure"><code>outlined</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" appearance="outlined">
@@ -696,7 +696,7 @@
      </td>
    </tr>
    <tr>
-      <th><code>outlined</code></th>
+      <th class="test-failure"><code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" appearance="outlined">Brand</wa-tag>
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -1,134 +1,30 @@
 {% set hasSidebar = true %}
 {% set hasOutline = true %}
 {# {% set forceTheme = page.fileSlug %} #}
 {% extends '../_layouts/block.njk' %}
 {% set paletteId = page.fileSlug %}
 {% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
 {% extends '../_includes/base.njk' %}
 {% block head %}
 <style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
 <link href="{{ page.url }}../tweak.css" rel="stylesheet">
 <script type="module" src="{{ page.url }}../tweak.js"></script>
 {% endblock %}
 {% block header %}
 <div id="palette-app" data-palette-id="{{ paletteId }}">
  <div
  :class="{
    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
  }"
  :style="{ '--chroma-scale': chromaScale }">
  {% include 'breadcrumbs.njk' %}
  <h1 v-if="saved" class="title">
    {% raw %}{{ saved.title }}{% endraw %}
    <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
    <wa-icon-button class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
  </h1>
  <h1 v-if="!saved" class="title">{{ title }}</h1>
  <div class="block-info">
    <code class="class">.wa-palette-{{ paletteId }}</code>
    {% include '../_includes/status.njk' %}
  </div>
  {% if description %}
  <p class="summary">
    {{ description | inlineMarkdown | safe }}
  </p>
  {% endif %}
 {% endblock %}
 {% block afterContent %}
 <style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
-{% set maxChroma = 0 %}
+{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
-<wa-callout size="small" class="tweaked-callout" variant="brand">
+<table class="colors wa-palette-{{ paletteId }}">
  <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>
  <wa-button @click="reset" appearance="outlined">
    <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">
    <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>
    </span>
    Save
  </wa-button>
 </wa-callout>
 <table class="colors main wa-palette-{{ paletteId }}">
  <thead>
    <tr>
      <th></th>
      <th class="core-column">Core tint</th>
      {% for tint in tints -%}
      <th>{{ tint }}</th>
      {%- endfor %}
    </tr>
  </thead>
 {# 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] -%}
+<tr>
-{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
+  <th>{{ hue | capitalize }}</th>
 <tr data-hue="{{ hue }}" class="color-scale" :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
  <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 -%}
    <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 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"
          @input="tweaking.hue = tweaking.{{hue}} = true"
          @change="tweaking.hue = tweaking.{{ hue }} = false">
          <div slot="label">
            Tweak {{ hue }} hue
            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
          </div>
        </wa-slider>
        <div class="label-min">More {{hueBefore}}</div>
        <div class="label-max">More {{hueAfter}}</div>
      </div>
      <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>`
    </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>
    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
      </div>
@@ -138,25 +34,6 @@
 {%- endfor %}
 </table>
 {% set chromaScaleBounds = [
 (0.08 / maxChroma) | number({maximumFractionDigits: 2}),
 (0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
 <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"
    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
    @input="tweaking.chroma = true"
    @change="tweaking.chroma = false">
    <div slot="label">
      Overall colorfulness
      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
    </div>
  </wa-slider>
  <div class="label-min">More muted</div>
  <div class="label-max">More vibrant</div>
 </div>
 <h2>Used By</h2>
 <section class="index-grid">
@@ -181,7 +58,6 @@ A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for larg
 {% endmarkdown %}
 {% set difference = 40 %}
 {% set minContrast = 3 %}
 {% include "contrast-table.njk" %}
 {% markdown %}
@@ -201,7 +77,6 @@ A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for no
 {% endmarkdown %}
 {% set difference = 50 %}
 {% set minContrast = 4.5 %}
 {% include "contrast-table.njk" %}
 {% markdown %}
@@ -220,7 +95,6 @@ A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all
 {% endmarkdown %}
 {% set difference = 60 %}
 {% set minContrast = 7 %}
 {% include "contrast-table.njk" %}
 {% markdown %}
@@ -233,34 +107,13 @@ This also goes for a difference of `65`:
 {% include "contrast-table.njk" %}
 {% markdown %}
-## How to use this palette { #usage }
+## How to use this palette
 If you are using a Web Awesome theme that uses this palette, it will already be included.
 To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
 {% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
-<wa-tab-group class="import-stylesheet-code">
+{% include 'import-stylesheet-code.md.njk' %}
 <wa-tab panel="html">In HTML</wa-tab>
 <wa-tab panel="css">In CSS</wa-tab>
 <wa-tab-panel name="html">
 Add the following code to the `<head>` of your page:
 ```html { v-content:html="code.html.highlighted" }
 <link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
 ```
 </wa-tab-panel>
 <wa-tab-panel name="css">
 Add the following code at the top of your CSS file:
 ```css { v-content:html="code.css.highlighted" }
@import url('{% cdnUrl stylesheet %}');
 ```
 </wa-tab-panel>
 </wa-tab-group>
 {% endmarkdown %}
 </div></div> {# end palette app #}
 {% endblock %}
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -4,143 +4,100 @@
 {% extends '../_includes/base.njk' %}
 {% block head %}
 <script>
 globalThis.wa_data ??= {};
 wa_data.baseTheme = "{{ page.fileSlug }}";
 wa_data.themes = {
  {% for theme in collections.theme -%}
  "{{ theme.fileSlug }}": {
    "title": "{{ theme.data.title }}",
    "palette": "{{ theme.data.palette }}",
    "brand": "{{ theme.data.brand }}"
  },
  {% endfor %}
 };
 wa_data.palettes = {
  {% for palette in collections.palette -%}
  "{{ palette.fileSlug }}": {
    "title": "{{ palette.data.title }}",
  },
  {% endfor %}
 };
 </script>
 <link href="{{ page.url }}../remix.css" rel="stylesheet">
 <script src="{{ page.url }}../remix.js" type="module"></script>
 {% endblock %}
 {% block header %}
 <iframe src='{{ page.url }}demo.html' id="demo"></iframe>
-<wa-details id="mix_and_match" class="wa-gap-m" >
+<p id="mix_and_match" class="wa-gap-m">
-  <h4 slot="summary" data-no-anchor data-no-outline id="remix">
+  <strong>
-    <wa-icon name="arrows-rotate"></wa-icon>
+    <wa-icon name="merge" slot="prefix"></wa-icon>
-    Remix this theme
+    Remix
-    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
+    <wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
-    <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
+  </strong>
-  </h4>
+  <wa-select name="colors" label="Colors from…" size="small">
  <wa-select name="colors" label="Colors from…" value="" clearable>
    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
    <wa-option value="">(Theme default)</wa-option>
    <wa-divider></wa-divider>
    {% for theme in collections.theme | sort %}
-      {% set currentTheme = theme.fileSlug == page.fileSlug %}
+      {% if theme.fileSlug !== page.fileSlug %}
-      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
-        <wa-card with-header>
+      {% endif %}
          <div slot="header">
          {% include "svgs/theme-color.njk" %}
          </div>
          <span class="page-name">
            {{ theme.data.title }}
            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
          </span>
        </wa-card>
      </wa-option>
    {% endfor %}
  </wa-select>
-  <wa-select name="palette" label="Palette" clearable>
+  <wa-select name="palette" label="Palette" size="small">
    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
-    {% set defaultPalette = palette %}
+    <wa-option value="">(Theme default)</wa-option>
-    {% for palette in collections.palette | sort %}
+    <wa-divider></wa-divider>
-      {% set currentPalette = palette.fileSlug == defaultPalette %}
+    {% for p in collections.palette | sort %}
-      <wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
+      {% if p.fileSlug !== palette %}
-        <wa-card with-header>
+      <wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
-          <div slot="header">
+      {% endif %}
          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" %}
          </div>
          <span class="page-name">
            {{ palette.data.title }}
            {% if palette.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
            {% if currentPalette %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
          </span>
        </wa-card>
      </wa-option>
    {% endfor %}
    {% set palette = defaultPalette %}
  </wa-select>
  <wa-select name="brand" label="Brand color" value="" clearable>
    <div class="selected-swatch" slot="prefix"></div>
    {% for hue in hues %}
      {% set currentBrand = hue == brand %}
      <wa-option label="{{ hue | capitalize }}" value="{{ hue if not currentBrand }}" {{ (hue if currentBrand) | attr('data-id') }} style="--color: var(--wa-color-{{ hue }})">
        {{ hue | capitalize }}
        {% if currentBrand %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
      </wa-option>
    {% endfor %}
  </wa-select>
-  <wa-select name="typography" label="Typography from…" clearable>
+  <wa-select name="typography" label="Typography from…" size="small">
    <wa-icon name="font-case" slot="prefix"></wa-icon>
    <wa-option value="">(Theme default)</wa-option>
    <wa-divider></wa-divider>
    {% for theme in collections.theme | sort %}
-      {% set currentTheme = theme.fileSlug == page.fileSlug %}
+      {% if theme.fileSlug !== page.fileSlug %}
-      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
-        <wa-card with-header>
+      {% endif %}
          <div slot="header">
          {% include "svgs/theme-typography.njk" %}
          </div>
          <span class="page-name">
            {{ theme.data.title }}
            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
          </span>
        </wa-card>
      </wa-option>
    {% endfor %}
  </wa-select>
 </wa-details>
-<h2>Color</h2>
+
 </p>
 <script>
  document.querySelector('#mix_and_match').addEventListener('change', function(event) {
    let selects = document.querySelectorAll('#mix_and_match wa-select');
    let url = new URL(demo.src);
    for (let select of selects) {
      url.searchParams.set(select.name, select.value);
    }
    demo.src = url;
  });
 </script>
 <h2>Default Color Palette</h2>
 {% set paletteURL = '/docs/palettes/' + palette + '/' %}
-
+{% set themePage = page %}
-
+{% set page = paletteURL | getCollectionItemFromUrl %}
 <div class="index-grid">
-  {% set themePage = page %}
+{% include 'page-card.njk' %}
  {% set page = paletteURL | getCollectionItemFromUrl %}
  {% set pageSubtitle = "Default color palette" %}
  {% include 'page-card.njk' %}
  {% set page = themePage %}
  <wa-card style="--header-background: var(--wa-color-{{ brand }})" class="wa-palette-{{ palette }}">
    <div slot="header"></div>
    <div class="page-name">{{ brand | capitalize }}</div>
    <div class="wa-caption-s">Default brand color</div>
  </wa-card>
 </div>
 {% set page = themePage %}
 {% endblock %}
 {% block afterContent %}
 <h2 id="usage">How to use this theme</h2>
 {% markdown %}
 ## How to use this theme
 You can import this theme from the Web Awesome CDN.
 {% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
 {% include 'import-stylesheet-code.md.njk' %}
 ### Remixing { #remixing }
 If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
 {% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
 {% include 'import-stylesheet-code.md.njk' %}
 To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
 {% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
 {% include 'import-stylesheet-code.md.njk' %}
 <wa-callout variant="warning">
  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
  Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
 </wa-callout>
 ## Dark mode
 To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
--- a/docs/_utils/anchor-headings.js
+++ b/docs/_utils/anchor-headings.js
@@ -37,8 +37,7 @@ export function anchorHeadingsPlugin(options = {}) {
      }
      // Look for headings
-      let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
+      container.querySelectorAll(options.headingSelector).forEach(heading => {
      container.querySelectorAll(selector).forEach(heading => {
        const hasAnchor = heading.querySelector('a');
        const existingId = heading.getAttribute('id');
        const clone = parse(heading.outerHTML);
--- a/docs/_utils/copy-code.js
+++ b/docs/_utils/copy-code.js
@@ -3,39 +3,30 @@ import { parse } from 'node-html-parser';
 /**
 * Eleventy plugin to add copy buttons to code blocks.
 */
-export function copyCodePlugin(eleventyConfig, options = {}) {
+export function copyCodePlugin(options = {}) {
  options = {
    container: 'body',
    ...options,
  };
-  let codeCount = 0;
+  return function (eleventyConfig) {
-  eleventyConfig.addTransform('copy-code', content => {
+    eleventyConfig.addTransform('copy-code', content => {
-    const doc = parse(content, { blockTextElements: { code: true } });
+      const doc = parse(content, { blockTextElements: { code: true } });
-    const container = doc.querySelector(options.container);
+      const container = doc.querySelector(options.container);
-    if (!container) {
+      if (!container) {
-      return content;
+        return content;
    }
    // Look for code blocks
    container.querySelectorAll('pre > code').forEach(code => {
      const pre = code.closest('pre');
      let preId = pre.getAttribute('id') || `code-block-${++codeCount}`;
      let codeId = code.getAttribute('id') || `${preId}-inner`;
      if (!code.getAttribute('id')) {
        code.setAttribute('id', codeId);
      }
      if (!pre.getAttribute('id')) {
        pre.setAttribute('id', preId);
      }
-      // Add a copy button
+      // Look for code blocks
-      pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
+      container.querySelectorAll('pre > code').forEach(code => {
-        <wa-copy-button from="${codeId}" class="copy-button" hoist></wa-copy-button>`;
+        const pre = code.closest('pre');
        // Add a copy button (we set the copy data at runtime to reduce page bloat)
        pre.innerHTML = `<wa-copy-button class="copy-button" hoist></wa-copy-button>` + pre.innerHTML;
      });
      return doc.toString();
    });
-
+  };
    return doc.toString();
  });
 }
--- a/docs/assets/scripts/copy-code.js
+++ b/docs/assets/scripts/copy-code.js
@@ -0,0 +1,15 @@
 function setCopyValue() {
  document.querySelectorAll('.copy-button').forEach(copyButton => {
    const pre = copyButton.closest('pre');
    const code = pre?.querySelector('code');
    if (code) {
      copyButton.value = code.textContent;
    }
  });
 }
 // Set data for all copy buttons when the page loads
 setCopyValue();
 document.addEventListener('turbo:load', setCopyValue);
--- a/docs/assets/scripts/prism-downloaded.js
+++ b/docs/assets/scripts/prism-downloaded.js
--- a/docs/assets/scripts/prism.js
+++ b/docs/assets/scripts/prism.js
@@ -1,8 +0,0 @@
 globalThis.Prism = globalThis.Prism || {};
 globalThis.Prism.manual = true;
 await import('./prism-downloaded.js');
 Prism.plugins.customClass.prefix('code-');
 export default Prism;
--- a/docs/assets/scripts/sidebar-tweaks.js
+++ b/docs/assets/scripts/sidebar-tweaks.js
@@ -1,206 +0,0 @@
 const sidebar = (globalThis.sidebar = {});
 sidebar.palettes = {
  render() {
    if (this.saved.length === 0) {
      return;
    }
    for (let palette of this.saved) {
      sidebar.palette.render(palette);
    }
    sidebar.updateCurrent();
  },
  saved: localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [],
  save(saved = this.saved) {
    this.saved = saved ?? [];
    if (saved.length > 0) {
      localStorage.savedPalettes = JSON.stringify(saved);
    } else {
      delete localStorage.savedPalettes;
    }
  },
 };
 sidebar.palette = {
  getUid() {
    let savedPalettes = sidebar.palettes.saved;
    let uids = new Set(savedPalettes.map(p => p.uid));
    if (savedPalettes.length === 0) {
      return 1;
    }
    // Find first available number
    for (let i = 1; i < savedPalettes.length + 1; i++) {
      if (!uids.has(i)) {
        return i;
      }
    }
  },
  equals(p1, p2) {
    if (!p1 || !p2) {
      return false;
    }
    return p1.id === p2.id && p1.uid === p2.uid;
  },
  delete(palette) {
    let savedPalettes = sidebar.palettes.saved;
    let count = savedPalettes.length;
    if (count === 0) {
      return;
    }
    // TODO improve UX of this
    if (!confirm(`Are you sure you want to delete palette “${palette.title}”?`)) {
      return;
    }
    savedPalettes = savedPalettes.filter(p => !sidebar.palette.equals(palette, p));
    if (savedPalettes.length === count) {
      // Nothing was removed
      return;
    }
    // Update UI
    let pathname = `/docs/palettes/${palette.id}/`;
    let url = pathname + palette.search;
    let uls = new Set();
    for (let a of document.querySelectorAll(`#sidebar a[href="${url}"]`)) {
      let li = a.closest('li');
      let ul = li.closest('ul');
      uls.add(ul);
      li.remove();
    }
    // Remove empty lists
    for (let ul of uls) {
      if (!ul.children.length) {
        ul.remove();
      }
    }
    sidebar.updateCurrent();
    sidebar.palettes.save(savedPalettes);
    if (sidebar.palette.equals(globalThis.paletteApp?.saved, palette)) {
      paletteApp.saved = null;
    }
  },
  getSaved(palette, savedPalettes = sidebar.palettes.saved) {
    return savedPalettes.find(p => sidebar.palette.equals(p, palette));
  },
  render(palette) {
    // Find existing <a>
    let { title, id, search, uid } = palette;
    for (let a of document.querySelectorAll(`#sidebar a[href^="/docs/palettes/${id}/"][data-uid="${uid}"]`)) {
      // Palette already in sidebar, just update it
      a.textContent = palette.title;
      a.href = `/docs/palettes/${id}/${search}`;
      return;
    }
    let pathname = `/docs/palettes/${id}/`;
    let url = pathname + search;
    let parentA = document.querySelector(`a[href="${pathname}"]`);
    let parentLi = parentA?.closest('li');
    let a;
    if (parentLi) {
      a = Object.assign(document.createElement('a'), { href: url, textContent: title });
      a.dataset.uid = uid;
      let badges = [...parentLi.querySelectorAll('wa-badge')].map(badge => badge.cloneNode(true));
      let ul = parentLi.querySelector('ul') ?? parentLi.appendChild(document.createElement('ul'));
      let li = document.createElement('li');
      let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
        name: 'trash',
        label: 'Delete',
        className: 'delete',
      });
      deleteButton.addEventListener('click', () => {
        let palette = { id, uid, title: a.textContent, search: a.search };
        sidebar.palette.delete(palette);
      });
      li.append(a, ' ', ...badges, deleteButton);
      ul.appendChild(li);
    }
  },
  save(palette, saved) {
    let savedPalettes = sidebar.palettes.saved;
    let existing = this.getSaved(saved ?? palette, savedPalettes);
    let oldValues;
    if (existing) {
      // Rename
      oldValues = { ...existing };
      Object.assign(existing, palette);
    } else {
      savedPalettes.push(palette);
    }
    this.render(palette, oldValues);
    sidebar.updateCurrent();
    sidebar.palettes.save(savedPalettes);
  },
 };
 sidebar.updateCurrent = function () {
  // Find the sidebar link with the longest shared prefix with the current URL
  let pathParts = location.pathname.split('/').filter(Boolean);
  let prefixes = [];
  if (pathParts.length === 1) {
    // If at /docs/ we just use that, otherwise we want at least two parts (/docs/xxx/)
    prefixes.push('/' + pathParts[0] + '/');
  } else {
    for (let i = 2; i <= pathParts.length; i++) {
      prefixes.push('/' + pathParts.slice(0, i).join('/') + '/');
    }
  }
  // Last prefix includes the search too (if any)
  if (location.search) {
    let params = new URLSearchParams(location.search);
    params.sort();
    prefixes.push(prefixes.at(-1) + location.search);
  }
  // We want to start from the longest prefix
  prefixes.reverse();
  for (let prefix of prefixes) {
    let a = document.querySelector(`#sidebar a[href^="${prefix}"]`);
    if (a) {
      for (let current of document.querySelectorAll('#sidebar a.current')) {
        current.classList.remove('current');
      }
      a.classList.add('current');
      break;
    }
  }
 };
 sidebar.render = function () {
  this.palettes.render();
 };
 sidebar.render();
 window.addEventListener('turbo:render', () => sidebar.render());
--- a/docs/assets/scripts/tweak.js
+++ b/docs/assets/scripts/tweak.js
@@ -1,6 +0,0 @@
 /**
 * Get import code for remixed themes and tweaked palettes.
 */
 export { theme as 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
@@ -1,49 +0,0 @@
 /**
 * Get import code for remixed themes and tweaked palettes.
 */
 import { urls } from './data.js';
 export function cssImport(url, options = {}) {
  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
  url = cdnUrl + url;
  if (language === 'css') {
    return `@import url('${url}');`;
  } else {
    attributes = attributes ? ` ${attributes}` : '';
    return `<link rel="stylesheet" href="${url}"${attributes} />`;
  }
 }
 export function cssLiteral(value, options = {}) {
  let { language = 'html' } = options;
  if (language === 'css') {
    return value;
  } else {
    return `<style>\n${value}\n</style>`;
  }
 }
 export function theme(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)),
  );
  return ret.map(url => cssImport(url, options)).join('\n');
 }
 export function cssRule(selector, declarations, { indent = '  ' } = {}) {
  selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
  declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
  declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
  return `${selector} {\n${declarations.trimEnd()}\n}`;
 }
--- a/docs/assets/scripts/tweak/data.js
+++ b/docs/assets/scripts/tweak/data.js
@@ -1,34 +0,0 @@
 /**
 * Data related to theme remixing and palette tweaking
 * Must work in both browser and Node.js
 */
 export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
 export const urls = {
  theme: id => `styles/themes/${id}.css`,
  colors: id => `styles/themes/${id}/color.css`,
  palette: id => `styles/color/${id}.css`,
  brand: id => `styles/brand/${id}.css`,
  typography: id => `styles/themes/${id}/typography.css`,
 };
 export const selectors = {
  palette: id =>
    [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
 };
 export const hueRanges = {
  red: { min: 5, max: 35 }, // 30
  orange: { min: 35, max: 60 }, // 25
  yellow: { min: 60, max: 112 }, // 45
  green: { min: 112, max: 170 }, // 55
  cyan: { min: 170, max: 220 }, // 50
  blue: { min: 220, max: 265 }, // 45
  indigo: { min: 265, max: 290 }, // 25
  purple: { min: 290, max: 320 }, // 30
  pink: { min: 320, max: 365 }, // 45
 };
 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/permalink.js
+++ b/docs/assets/scripts/tweak/permalink.js
@@ -1,81 +0,0 @@
 const IDENTITY = x => x;
 export default class Permalink extends URLSearchParams {
  /** Params changed since last URL I/O */
  changed = false;
  constructor(params) {
    super(location.search);
    this.params = params;
  }
  toJSON() {
    return Object.fromEntries(this.entries());
  }
  #mappings = new WeakMap();
  mapObject(obj, mapping = {}) {
    this.#mappings.set(obj, mapping);
  }
  readFrom(obj) {
    let mapping = this.#mappings.get(obj) ?? {};
    let { keyFrom = IDENTITY, valueFrom = IDENTITY } = mapping;
    for (let key in obj) {
      let value = obj[key];
      let mappedValue = valueFrom(value);
      let mappedKey = keyFrom(key);
      this.set(mappedKey, mappedValue);
    }
  }
  writeTo(obj) {
    let mapping = this.#mappings.get(obj) ?? {};
    let { keyTo = IDENTITY, valueTo = IDENTITY, canExtend = false } = mapping;
    for (let [key, value] of this) {
      let mappedKey = keyTo(key);
      let mappedValue = valueTo(value);
      if (canExtend || mappedKey in obj) {
        obj[mappedKey] = mappedValue;
      }
    }
  }
  set(key, value, defaultValue) {
    let oldValue = this.get(key);
    if (!value || value == defaultValue) {
      super.delete(key);
      if (oldValue) {
        this.changed = true;
      }
    } else {
      super.set(key, value);
      if (String(value) !== String(oldValue)) {
        this.changed = true;
      }
    }
    this.sort();
  }
  /**
   * Update page URL if it has changed since last time
   */
  updateLocation() {
    if (this.changed) {
      // If there’s already a search, replace it.
      // We don’t want to clog the user’s history while they iterate
      let search = this.toString();
      let historyAction = location.search && search ? 'replaceState' : 'pushState';
      history[historyAction](null, '', `?${search}`);
      this.changed = false;
    }
  }
 }
--- a/docs/assets/styles/copy-code.css
+++ b/docs/assets/styles/copy-code.css
@@ -27,19 +27,3 @@ wa-copy-button.copy-button {
    opacity: 1;
  }
 }
 .block-link-icon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(100% + var(--wa-space-s));
  transition: var(--wa-transition-slow);
  &:not(:hover, :focus) {
    opacity: 50%;
  }
  :not(:hover, :focus-within) > & {
    opacity: 0;
  }
 }
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -156,7 +156,7 @@ wa-page > header {
 }
 /* Pro badges */
-wa-badge.pro {
+wa-badge.pro::part(base) {
  background-color: var(--wa-brand-orange);
  border-color: var(--wa-brand-orange);
 }
@@ -188,29 +188,6 @@ wa-badge.pro {
      }
    }
  }
  wa-icon-button.delete {
    vertical-align: -0.2em;
    margin-inline-start: var(--wa-space-xs);
    &:not(li:hover > *, :focus) {
      opacity: 0;
    }
  }
 }
 wa-icon-button.delete {
  &:hover {
    color: var(--wa-color-danger-on-quiet);
  }
  &::part(base):hover {
    background: var(--wa-color-danger-fill-quiet);
  }
  &:not(:hover, :focus) {
    opacity: 0.5;
  }
 }
 #sidebar-close-button {
@@ -255,32 +232,16 @@ wa-page > main {
  margin-inline: auto;
 }
-h1.title {
+h1.title wa-badge {
-  wa-icon-button {
+  vertical-align: middle;
    font-size: var(--wa-font-size-l);
    color: var(--wa-color-text-quiet);
-    &:not(:hover, :focus) {
+  &::part(base) {
      opacity: 0.5;
    }
  }
  wa-badge {
    vertical-align: middle;
    font-size: 1.5rem;
  }
 }
 .block-info {
  display: flex;
  gap: var(--wa-space-xs);
  flex-wrap: wrap;
  align-items: center;
  margin-block-end: var(--wa-flow-spacing);
  code {
    line-height: var(--wa-line-height-condensed);
  }
 }
 /* Current link */
@@ -399,7 +360,7 @@ wa-page > main:has(> .index-grid) {
    }
    &::part(header) {
-      background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
+      background-color: var(--wa-color-neutral-fill-quiet);
      border-bottom: none;
      display: flex;
      align-items: center;
@@ -439,18 +400,9 @@ wa-page > main:has(> .index-grid) {
  &.color {
    border-color: transparent;
    transition: background var(--wa-transition-slow);
    background: linear-gradient(var(--color-2, transparent) 0% 100%) no-repeat border-box var(--color,);
    background-position: var(--color-2-position, bottom);
    background-size: var(--color-2-width, 100%) var(--color-2-height, 50%);
    &.contrast-fail {
      outline: 1px dashed var(--wa-color-red);
      outline-offset: calc(-1 * var(--wa-space-2xs));
    }
  }
-  > wa-copy-button {
+  wa-copy-button {
    position: absolute;
    top: 0;
    left: 0;
@@ -485,7 +437,6 @@ table.colors {
      padding-block: 0;
    }
  }
  tbody {
    tr {
      border: none;
@@ -505,59 +456,6 @@ table.colors {
      padding-block: var(--wa-space-s);
    }
  }
  .core-column {
    padding-inline-end: var(--wa-space-xl);
  }
 }
 .value-up,
 .value-down {
  position: relative;
  &::after {
    content: ' ' var(--icon);
    position: absolute;
    margin-inline-start: 3em;
    scale: 1 0.6;
    color: color-mix(in oklch, oklch(from var(--icon-color) none c h) 0%, oklch(from currentColor l none none));
    font-size: 90%;
  }
 }
 .value-down {
  --icon: '▼';
  --icon-color: var(--wa-color-danger-fill-quiet);
  &::after {
    margin-block-end: -0.2em;
  }
 }
 .value-up {
  --icon: '▲';
  --icon-color: var(--wa-color-success-fill-quiet);
 }
 .icon-modifier {
  position: relative;
  display: inline-flex;
  .modifier {
    position: absolute;
    bottom: -0.1em;
    right: -0.3em;
    font-size: 60%;
    &::part(svg) {
      stroke: var(--background-color, var(--wa-color-surface-default));
      stroke-width: 100px;
      paint-order: stroke;
      overflow: visible;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
 }
 /* Layout Examples */
@@ -640,4 +538,23 @@ table.colors {
    height: 65vh;
    max-height: 21lh;
  }
  #mix_and_match {
    strong {
      display: flex;
      align-items: center;
      gap: var(--wa-space-2xs);
      margin-top: 1.2em;
    }
    wa-select::part(label) {
      margin-block-end: 0;
    }
    wa-select[value='']::part(display-input),
    wa-option[value=''] {
      font-style: italic;
      color: var(--wa-color-text-quiet);
    }
  }
 }
--- a/docs/assets/styles/theme-icons.css
+++ b/docs/assets/styles/theme-icons.css
@@ -1,34 +0,0 @@
 .theme-color-icon {
  display: grid;
  gap: var(--wa-space-xs);
  grid-template-columns: repeat(4, auto);
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--wa-border-radius-m);
    background-color: var(--background-color);
    border: var(--wa-border-width-s) var(--wa-border-style) var(--border-color);
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    color: var(--text-color);
    font-weight: var(--wa-font-weight-semibold);
    &.plain {
      font-weight: var(--wa-font-weight-bold);
    }
  }
 }
 .theme-typography-icon {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs);
  h3,
  p {
    margin-block: 0;
    padding: 0;
  }
 }
--- a/docs/docs/components/copy-button.md
+++ b/docs/docs/components/copy-button.md
@@ -9,10 +9,6 @@ icon: copy-button
 <wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
 ```
 :::info
 Copy buttons use the browser's [`clipboard.writeText()`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS) in most browsers.
 :::
 ## Examples
 ### Custom Labels
--- a/docs/docs/components/page/demo-page.css
+++ b/docs/docs/components/page/demo-page.css
@@ -52,8 +52,8 @@ wa-page {
  }
  &[slot^='navigation'] {
-    background: var(--wa-color-purple-80);
+    background: var(--wa-color-violet-80);
-    color: var(--wa-color-purple-20);
+    color: var(--wa-color-violet-20);
  }
  strong {
--- a/docs/docs/components/radio.md
+++ b/docs/docs/components/radio.md
@@ -74,15 +74,3 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
  <wa-radio value="3">Large 3</wa-radio>
 </wa-radio-group>
 ```
 ### Hint
 Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
 ```html {.example}
 <wa-radio-group label="Select an option" name="a" value="1">
  <wa-radio value="1" hint="What should the user know about radio 1?">Option 1</wa-radio>
  <wa-radio value="2" hint="What should the user know about radio 2?">Option 2</wa-radio>
  <wa-radio value="3" hint="What should the user know about radio 3?">Option 3</wa-radio>
 </wa-radio-group>
 ```
--- a/docs/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -130,15 +130,6 @@ Note that multi-select options may wrap, causing the control to expand verticall
 Use the `value` attribute to set the initial selection.
 ```html {.example}
 <wa-select value="option-1">
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
  <wa-option value="option-4">Option 4</wa-option>
 </wa-select>
 ```
 When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
 ```html {.example}
@@ -303,7 +294,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
    return `
      <wa-tag removable>
        <wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
-        ${option.label}
+        ${option.getTextLabel()}
      </wa-tag>
    `;
  };
--- a/docs/docs/customizing.md
+++ b/docs/docs/customizing.md
@@ -16,21 +16,21 @@ To use a theme, simply add a link to the theme's stylesheet to the `<head>` of y
 <link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
 ```
-You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
+You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to violet in light mode:
 ```css
 :where(:root),
 :host,
 .wa-light,
 .wa-dark .wa-invert {
-  --wa-color-brand-fill-quiet: var(--wa-color-purple-95);
+  --wa-color-brand-fill-quiet: var(--wa-color-violet-95);
-  --wa-color-brand-fill-normal: var(--wa-color-purple-90);
+  --wa-color-brand-fill-normal: var(--wa-color-violet-90);
-  --wa-color-brand-fill-loud: var(--wa-color-purple-50);
+  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
-  --wa-color-brand-border-quiet: var(--wa-color-purple-90);
+  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
-  --wa-color-brand-border-normal: var(--wa-color-purple-80);
+  --wa-color-brand-border-normal: var(--wa-color-violet-80);
-  --wa-color-brand-border-loud: var(--wa-color-purple-60);
+  --wa-color-brand-border-loud: var(--wa-color-violet-60);
-  --wa-color-brand-on-quiet: var(--wa-color-purple-40);
+  --wa-color-brand-on-quiet: var(--wa-color-violet-40);
-  --wa-color-brand-on-normal: var(--wa-color-purple-30);
+  --wa-color-brand-on-normal: var(--wa-color-violet-30);
  --wa-color-brand-on-loud: white;
 }
 ```
@@ -99,8 +99,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
 <style>
  .gradient-button::part(base) {
-    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
+    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-violet-50), var(--wa-color-red-50));
-    border: solid 1px var(--wa-color-purple-50);
+    border: solid 1px var(--wa-color-violet-50);
    transition: transform 100ms, box-shadow 100ms;
  }
--- a/docs/docs/experimental/clamped-colors.njk
+++ b/docs/docs/experimental/clamped-colors.njk
@@ -1,47 +0,0 @@
 ---
 title: Clamped brand tokens
 layout: block
 ---
 {% set tints = ['40-max', '50-max', '60-max', '40-min', '50-min', '60-min'] %}
 {% for hue in hues %}
 <link href="/dist/styles/brand/{{ hue }}.css" rel="stylesheet">
 {% endfor %}
 <table class="colors">
  <thead>
    <tr>
      <th></th>
      <th class="core-column">Core tint</th>
      {% for tint in tints -%}
      <th>{{ tint }}</th>
      {%- endfor %}
    </tr>
  </thead>
 {% for hue in hues -%}
 <tr class="wa-brand-{{ hue }}">
  <th>{{ hue | capitalize }}</th>
  <td class="core-column">
    <div class="color swatch" style="background-color: var(--wa-color-brand); color: var(--wa-color-brand-on);">
      {{ palettes[paletteId][hue].maxChromaTint }}
      <wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></wa-copy-button>
    </div>
  </td>
  {% for tint in tints -%}
    <td>
      <div class="color swatch" style="background-color: var(--wa-color-brand-{{ tint }})">
        <wa-copy-button value="--wa-color-brand-{{ tint }}" copy-label="--wa-color-brand-{{ tint }}"></wa-copy-button>
      </div>
    </td>
  {%- endfor -%}
 </tr>
 {%- endfor %}
 </table>
 <style>
 .core-column .color.swatch::before {
  counter-reset: key var(--wa-color-brand-key);
  content: counter(key);
 }
 </style>
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -576,10 +576,10 @@ hasOutline: false
      <wa-radio value="yellow"><span style="background-color:var(--wa-color-yellow-60);"></span></wa-radio>
      <wa-radio value="lime"><span style="background-color:var(--wa-color-lime-60);"></span></wa-radio>
      <wa-radio value="green"><span style="background-color:var(--wa-color-green-60);"></span></wa-radio>
-      <wa-radio value="cyan"><span style="background-color:var(--wa-color-cyan-60);"></span></wa-radio>
+      <wa-radio value="teal"><span style="background-color:var(--wa-color-teal-60);"></span></wa-radio>
      <wa-radio value="blue"><span style="background-color:var(--wa-color-blue-60);"></span></wa-radio>
      <wa-radio value="indigo"><span style="background-color:var(--wa-color-indigo-60);"></span></wa-radio>
-      <wa-radio value="purple"><span style="background-color:var(--wa-color-purple-60);"></span></wa-radio>
+      <wa-radio value="violet"><span style="background-color:var(--wa-color-violet-60);"></span></wa-radio>
      <wa-radio value="gray"><span style="background-color:var(--wa-color-gray-60);"></span></wa-radio>
    </wa-radio-group>
  </wa-details>
--- a/docs/docs/palettes/data.json.njk
+++ b/docs/docs/palettes/data.json.njk
@@ -1,27 +0,0 @@
 ---
 layout: null
 permalink: "/docs/palettes/data.json"
 eleventyExcludeFromCollections: true
 ---
 {
 {% for palette in collections.palettes %}
  {% set paletteId = palette.fileSlug -%}
  {% set colors = palettes[paletteId] -%}
  "{{ paletteId }}": {
    "title": "{{ palette.data.title }}",
    "colors": {
      {% for hue, tints in colors -%}
        "{{ hue }}": {
          {% for tint, value in tints -%}
            {% if tint != "05" -%}
              {% set value = value.coords or value -%}
              {% set key = "05" if tint == "5" else tint -%}
              "{{ key }}": {{ value | dump | safe }}{{ ', ' if not loop.last }}
            {%- endif %}
          {% endfor -%}
        }{{ ', ' if not loop.last }}
      {% endfor %} {# end of hue #}
    }
  }{{ ', ' if not loop.last }} {# end of palette #}
 {% endfor %}
 }
--- a/docs/docs/palettes/default.md
+++ b/docs/docs/palettes/default.md
@@ -1,5 +1,4 @@
 ---
 title: Default
 description: This is the palette used in the default theme.
 order: 0
 ---
--- a/docs/docs/palettes/palettes.json
+++ b/docs/docs/palettes/palettes.json
@@ -1,10 +1,8 @@
 {
  "layout": "palette.njk",
  "tags": ["palettes", "palette"],
  "wide": true,
  "eleventyComputed": {
    "snippet": ".wa-palette-{{ page.fileSlug }}",
-    "icon": "palette",
+    "icon": "palette"
    "file": "styles/color/{{ page.fileSlug }}.css"
  }
 }
--- a/docs/docs/palettes/tweak.css
+++ b/docs/docs/palettes/tweak.css
@@ -1,164 +0,0 @@
 :root {
  --fa-sliders-simple: '\f1de';
 }
 .core-column {
  position: relative;
  > wa-dropdown {
    min-width: 100%;
  }
 }
 wa-dropdown > .color.swatch {
  cursor: pointer;
 }
 .decorated-slider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  margin-block-end: var(--wa-space-xl);
  wa-slider {
    grid-column: 1 / -1;
    --track-height: 1em;
    --track-color-inactive: transparent;
    --track-color-active: transparent;
    --thumb-color: var(--color-tweaked, var(--color));
    &::part(base) {
      background: linear-gradient(to right in oklch, var(--color-1), var(--color-2));
    }
  }
  [slot='label'] {
    min-height: 1.1lh;
  }
  .clear-button {
    vertical-align: middle;
    font-size: var(--wa-font-size-xs);
    &:not(.tweaked *) {
      display: none;
    }
  }
  .label-min,
  .label-max {
    font-size: var(--wa-font-size-xs);
  }
  .label-min {
    grid-column: 1;
    margin-inline-start: 0.15em;
  }
  .label-max {
    grid-column: 3;
    margin-inline-end: 0.1em;
  }
 }
 .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)));
 }
 .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);
 }
 .popup {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  padding: var(--wa-space-xl);
  border-radius: var(--wa-border-radius-m);
  code {
    white-space: nowrap;
  }
 }
 .color-scale {
  th {
    white-space: nowrap;
  }
  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);
      /* outline: 1px dashed red; */
    }
  }
  .color.swatch {
    --color-2: var(--color-tweaked);
    --color-2-height: 100%;
    &:is(.tweaking *) {
      --color-2-height: 70%;
      &:is(.tweaking-chroma *) {
        --color: var(--color-tweaked-no-chroma-scale);
      }
      &:is(.tweaking-hue *) {
        --color: var(--color-tweaked-no-hue-shift);
      }
    }
  }
  .tweak-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--wa-space-s);
    opacity: var(--tweak-icon-opacity, 0%);
  }
  .core-column:hover {
    --tweak-icon-opacity: 40%;
  }
  &.tweaked .core-column {
    --tweak-icon-opacity: 80%;
  }
 }
 .tweaked-callout {
  padding: var(--wa-space-xs);
  padding-inline-start: var(--wa-space-m);
  align-items: center;
  &:not(.tweaked-any *) {
    visibility: hidden;
  }
  &::part(message) {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
  }
  wa-button:first-of-type {
    margin-inline-start: auto;
  }
 }
 [v-if='saved'] {
  display: none;
 }
--- a/docs/docs/palettes/tweak.js
+++ b/docs/docs/palettes/tweak.js
@@ -1,411 +0,0 @@
 // TODO move these to local imports
 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 Prism from '/assets/scripts/prism.js';
 await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
 // // Detect https://bugs.webkit.org/show_bug.cgi?id=287637
 // const SAFARI_OKLCH_BUG = (() => {
 //   let dummy = document.createElement('div');
 //   document.body.appendChild(dummy);
 //   dummy.style.color = 'oklch(from #d5e0e6 l c h)';
 //   let computedColor = getComputedStyle(dummy).color;
 //   dummy.remove();
 //   return computedColor.endsWith(' 0)');
 // })();
 let allPalettes = await fetch('/docs/palettes/data.json').then(r => r.json());
 globalThis.allPalettes = allPalettes;
 for (let palette in allPalettes) {
  for (let hue in allPalettes[palette].colors) {
    let scale = allPalettes[palette].colors[hue];
    for (let tint of tints) {
      let color = scale[tint];
      if (Array.isArray(color)) {
        scale[tint] = new Color('oklch', color);
      }
    }
  }
 }
 let paletteAppSpec = {
  data() {
    let appRoot = document.querySelector('#palette-app');
    let paletteId = appRoot.dataset.paletteId;
    let palette = allPalettes[paletteId];
    return {
      uid: undefined,
      paletteId,
      paletteTitle: palette.title,
      originalColors: palette.colors,
      permalink: new Permalink(),
      hueRanges,
      hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
      chromaScale: 1,
      tweaking: {},
      saved: null,
    };
  },
  created() {
    // Read URL params and apply them. This facilitates permalinks.
    this.permalink.mapObject(this.hueShifts, {
      keyTo: key => key.replace(/-shift$/, ''),
      keyFrom: key => key + '-shift',
      valueFrom: value => (!value ? '' : Number(value)),
      valueTo: value => (!value ? 0 : Number(value)),
    });
    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);
      }
      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);
    }
  },
  computed: {
    global() {
      return globalThis;
    },
    tweaks() {
      return { hueShifts: this.hueShifts, chromaScale: this.chromaScale };
    },
    isTweaked() {
      return Object.values(this.hueShifts).some(Boolean);
    },
    code() {
      let ret = {};
      for (let language of ['html', 'css']) {
        let code = getPaletteCode(this.paletteId, this.tweaks, { language, cdnUrl });
        ret[language] = {
          raw: code,
          highlighted: Prism.highlight(code, Prism.languages[language], language),
        };
      }
      return ret;
    },
    colors() {
      let ret = {};
      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 },
        });
        for (let tint of tints) {
          let oklch = originalScale[tint].coords.slice();
          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;
    },
    tweaked() {
      return {
        chroma: this.chromaScale !== 1,
        hue: Object.values(this.hueShifts).some(Boolean),
      };
    },
    tweaksHumanReadable() {
      let ret = {};
      if (this.chromaScale !== 1) {
        ret.chromaScale = 'more ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
      }
      for (let hue in this.hueShifts) {
        let shift = this.hueShifts[hue];
        if (!shift) {
          continue;
        }
        let relHue = shift < 0 ? arrayPrevious(hues, hue) : arrayNext(hues, hue);
        let hueTweak =
          {
            red: 'redder',
            orange: 'oranger',
            indigo: 'more indigo',
          }[relHue] ?? relHue + 'er';
        ret[hue] = hueTweak + ' ' + hue + 's';
      }
      return ret;
    },
    originalContrasts() {
      let ret = {};
      for (let hue in this.originalColors) {
        ret[hue] = {};
        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;
          }
        }
      }
      return ret;
    },
    contrasts() {
      let ret = {};
      for (let hue in this.colors) {
        ret[hue] = {};
        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 };
          }
        }
      }
      return ret;
    },
  },
  watch: {
    hueShifts: {
      deep: true,
      handler() {
        this.permalink.readFrom(this.hueShifts);
      },
    },
    chromaScale() {
      this.permalink.set('chroma-scale', this.chromaScale, 1);
    },
    tweaks: {
      deep: true,
      async handler(value, oldValue) {
        await nextTick(); // must run after individual watchers
        // Update page URL
        this.permalink.updateLocation();
        if (this.saved) {
          this.save({ silent: true });
        }
      },
    },
  },
  methods: {
    save({ silent } = {}) {
      let title = silent
        ? (this.saved?.title ?? this.paletteTitle)
        : prompt('Palette title:', `${this.paletteTitle} (tweaked)`);
      if (!title) {
        return;
      }
      let uid = this.uid;
      if (!uid) {
        this.uid = uid = sidebar.palette.getUid();
        this.permalink.set('uid', uid);
        this.permalink.updateLocation();
      }
      let palette = { title, id: this.paletteId, uid, search: location.search };
      sidebar.palette.save(palette, this.saved);
      this.saved = palette;
    },
    rename() {
      if (!this.saved) {
        return;
      }
      let newTitle = prompt('New title:', this.saved.title);
      if (!newTitle) {
        return;
      }
      this.saved.title = newTitle;
      sidebar.palette.save(this.saved);
    },
    deleteSaved() {
      sidebar.palette.delete(this.saved);
      this.saved = null;
    },
    reset() {
      for (let hue in this.hueShifts) {
        this.hueShifts[hue] = 0;
      }
      this.chromaScale = 1;
    },
    removeTweak(param) {
      if (param === 'chromaScale') {
        this.chromaScale = 1;
      } else {
        this.hueShifts[param] = 0;
      }
    },
  },
  directives: {
    // Like v-text, but doesn't complain if the element has content,
    // making it possible to use in a PE fashion, with the contents being the fallback
    content(el, { value, arg }) {
      if (!el.dataset.fallback) {
        // Store the original content as a fallback the first time
        el.dataset.fallback = el.textContent;
      }
      if (value === '') {
        value = el.dataset.fallback;
      } else {
        if (arg === 'number') {
          value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
        }
      }
      if (arg === 'html') {
        el.innerHTML = value;
      } else {
        el.textContent = value;
      }
    },
  },
  compilerOptions: {
    isCustomElement: tag => tag.startsWith('wa-'),
  },
 };
 function init() {
  globalThis.paletteApp?.unmount?.();
  globalThis.paletteApp = createApp(paletteAppSpec).mount('#palette-app');
 }
 init();
 addEventListener('turbo:render', init);
 export function getPaletteCode(paletteId, tweaks, options) {
  let palette = allPalettes[paletteId].colors;
  let imports = [];
  if (paletteId) {
    imports.push(urls.palette(paletteId));
  }
  let css = '';
  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') {
          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('');
      }
    }
    if (declarations.length > 0) {
      css += cssRule(selectors.palette(paletteId), declarations);
    }
  }
  let ret = imports.map(url => cssImport(url, options)).join('\n');
  if (css) {
    ret += `\n\n${cssLiteral(css, options)}`;
  }
  return ret;
 }
 function arrayNext(array, element) {
  let index = array.indexOf(element);
  return array[(index + 1) % array.length];
 }
 function arrayPrevious(array, element) {
  let index = array.indexOf(element);
  return array[(index - 1 + array.length) % array.length];
 }
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -1,7 +1,7 @@
 ---
 title: Changelog
 description: Changes to each version of the project are documented here.
-layout: page-outline
+layout: page
 ---
 Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <wa-badge variant="brand" pill>Stable</wa-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
@@ -14,44 +14,11 @@ During the alpha period, things might break! We take breaking changes very serio
 ## Next
 ### Color Palettes
 - 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
 ### Design Tokens
 - Added `--wa-color-[hue]` tokens with the "core" color of each scale, regardless of which tint it lives on.
 You can find them in the first column of each color palette.
 ### Themes
 - 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
 ### Docs
 - Added an orientation example to the native radio docs
 - 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 number of broken event listeners throughout the docs
-
+- Fixed a bug in `<wa-card>` that prevented slots from showing automatically without `with-` attributes
 - Fixed a bug in `<wa-select>` that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
 ## 3.0.0-alpha.10
--- a/docs/docs/themes/active.md
+++ b/docs/docs/themes/active.md
@@ -4,5 +4,4 @@ description: Energetic and tactile, always in motion.
 isPro: true
 tags: pro
 palette: rudimentary
 brand: green
 ---
--- a/docs/docs/themes/awesome.md
+++ b/docs/docs/themes/awesome.md
@@ -3,5 +3,4 @@ title: Awesome
 description: Punchy and vibrant, the rockstar of themes.
 order: 0.2
 palette: bright
 brand: blue
 ---
--- a/docs/docs/themes/brutalist.md
+++ b/docs/docs/themes/brutalist.md
@@ -4,5 +4,4 @@ description: Sharp, square, and unapologetically bold.
 isPro: true
 tags: pro
 palette: default
 brand: blue
 ---
--- a/docs/docs/themes/default.md
+++ b/docs/docs/themes/default.md
@@ -3,5 +3,4 @@ title: Default
 description: Your trusty companion, like a perfectly broken-in pair of jeans.
 order: 0
 palette: default
 brand: blue
 ---
--- a/docs/docs/themes/demo.njk
+++ b/docs/docs/themes/demo.njk
@@ -11,6 +11,7 @@ eleventyComputed:
  forceTheme: "{{ theme.fileSlug }}"
 ---
 <link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
 <link rel="stylesheet" href="/docs/themes/showcase.css" />
 {% set content %}
@@ -33,46 +34,35 @@ eleventyComputed:
 </div>
 </wa-image-comparer>
-<script type="module">
+<script>
 import { urls as stylesheetURLs } from "/assets/scripts/tweak/data.js";
 import { theme as getThemeCode } from "/assets/scripts/tweak/code.js";
 function updateTheme() {
  let params = new URLSearchParams(window.location.search);
-  params = Object.fromEntries(params.entries());
+  let script = document.currentScript;
-
+  const stylesheetURLs = {
-  const docsURLs = {
+    colors: id => `/dist/styles/themes/${ id }/color.css`,
-    colors: '/docs/themes/',
+    palette: id => `/dist/styles/color/${ id }.css`,
-    palette: '/docs/palettes/',
+    typography: id => `/dist/styles/themes/${ id }/typography.css`
    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 code = getThemeCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
  document.head.insertAdjacentHTML('beforeend', code);
  for (let name in stylesheetURLs) {
-    let override = params[name];
+    if (params.get(name)) {
-    if (override) {
+      let url = stylesheetURLs[name](params.get(name));
-      let docsURL = docsURLs[name] ? docsURLs[name] + override + '/' : '';
+      script.insertAdjacentHTML('afterend', `<link rel="stylesheet" href="${ url }" class="mix-and-match" />`);
-      let title = override.replace(/^[a-z]/g, c => c.toUpperCase());
+      let docsURL = (name === 'palette' ? '/docs/palettes/' : '/docs/themes/') + params.get(name) + '/';
-
+      let title = params.get(name).replace(/^[a-z]/g, c => c.toUpperCase());
      if (docsURL) {
        title = `<a href="${ docsURL }">${ title }</a>`;
      }
      let icon = icons[name];
-      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
+      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> <a href="${ docsURL }">${ title }</a>`);
    }
  }
@@ -80,7 +70,7 @@ function updateTheme() {
    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>
+      p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
        ${ msg }</wa-badge>`).join(' ');
    }
  }
--- a/docs/docs/themes/glossy.md
+++ b/docs/docs/themes/glossy.md
@@ -4,5 +4,4 @@ description: Bustling with plenty of luster and shine.
 isPro: true
 tags: pro
 palette: elegant
 brand: indigo
 ---
--- a/docs/docs/themes/matter.md
+++ b/docs/docs/themes/matter.md
@@ -4,7 +4,6 @@ description: Digital design inspired by the real world.
 isPro: true
 tags: pro
 palette: mild
 brand: indigo
 ---
 Set the page theme to "{{ title }}" from the top right to preview the following examples.
--- a/docs/docs/themes/playful.md
+++ b/docs/docs/themes/playful.md
@@ -4,5 +4,4 @@ description: Cheerful and engaging, like a playground on screen.
 isPro: true
 tags: pro
 palette: rudimentary
 brand: purple
 ---
--- a/docs/docs/themes/premium.md
+++ b/docs/docs/themes/premium.md
@@ -4,5 +4,4 @@ description: The ultimate in sophistication and style.
 isPro: true
 tags: pro
 palette: anodized
 brand: cyan
 ---
--- a/docs/docs/themes/remix.css
+++ b/docs/docs/themes/remix.css
@@ -1,127 +0,0 @@
 #mix_and_match {
  margin-block-end: var(--wa-space-2xl);
  &::part(content) {
    display: flex;
    gap: var(--wa-space-xl);
    padding-block-start: var(--wa-space-m);
  }
  > [slot='summary'] {
    margin: 0;
    wa-icon:first-of-type {
      vertical-align: -0.15em;
      color: var(--wa-color-text-quiet);
    }
    wa-icon#what-is-remixing {
      vertical-align: -0.1em;
      font-size: var(--wa-font-size-s);
      color: var(--wa-color-text-quiet);
    }
  }
  wa-select {
    &::part(label) {
      margin-block-end: 0;
    }
  }
  wa-select:has(> wa-option > wa-card) {
    &::part(listbox) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      width: min(90vw, 800px);
    }
    &:state(blank)::part(display-input) {
      font-style: italic;
      color: var(--wa-color-text-quiet);
    }
  }
  wa-option:has(> wa-card) {
    position: relative;
    padding: var(--wa-space-smaller);
    &::part(checked-icon) {
      position: absolute;
      inset-block-start: calc(var(--wa-space-smaller) - 0.5em);
      inset-inline-end: calc(var(--wa-space-smaller) - 0.5em);
      width: 1em;
      height: 1em;
      line-height: 1em;
      padding: 0.4em;
      border-radius: var(--wa-border-radius-circle);
      text-align: center;
      background: var(--wa-color-brand-fill-loud);
      color: var(--wa-color-brand-on-loud);
      font-size: var(--wa-font-size-xs);
    }
    wa-card {
      --spacing: var(--wa-space-smaller);
      &::part(body) {
        background: var(--wa-color-neutral-fill-quiet);
        padding-block: var(--wa-space-s);
      }
    }
    &:state(current),
    &:state(hover),
    &:state(selected),
    &:hover {
      background: transparent;
    }
    &:hover {
      wa-card {
        border-color: var(--wa-color-brand-border-loud);
        box-shadow: 0 0 0 var(--wa-border-width-m) var(--wa-color-brand-border-normal);
      }
    }
    &[aria-selected='true'] {
      wa-card {
        --border-color: var(--wa-color-brand-border-loud);
        box-shadow: 0 0 0 var(--wa-border-width-m) var(--wa-color-brand-border-loud);
        &::part(body) {
          background: var(--wa-color-brand-fill-quiet);
        }
      }
    }
  }
  .selected-swatch,
  wa-select[name='brand'] wa-option::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    aspect-ratio: 1;
    flex: none;
    border-radius: var(--wa-border-radius-m);
    background: var(--color);
    border: 1px solid var(--wa-color-surface-default);
  }
  wa-select[name='brand'] wa-option {
    white-space: nowrap;
    &::before {
      width: 1em;
      margin-inline: var(--wa-space-xs);
    }
    &::part(checked-icon) {
      order: 2;
    }
  }
 }
 #test_select wa-option:state(selected) {
  outline: 2px solid red;
  background: yellow;
 }
--- a/docs/docs/themes/remix.js
+++ b/docs/docs/themes/remix.js
@@ -1,150 +0,0 @@
 import Prism from '/assets/scripts/prism.js';
 import { cdnUrl, getThemeCode, Permalink } from '/assets/scripts/tweak.js';
 await Promise.all(['wa-select', 'wa-option', 'wa-details'].map(tag => customElements.whenDefined(tag)));
 const domChange = document.startViewTransition ? document.startViewTransition.bind(document) : fn => fn();
 let selects, data, codeSnippets;
 let computed = {
  get isRemixed() {
    return Object.values(data.params).filter(Boolean).length > 0;
  },
  get palette() {
    return data.params.palette || data.defaultParams.palette;
  },
  get brand() {
    return data.params.brand || data.defaultParams.brand;
  },
 };
 function selectsChanged(event) {
  data.params[event.target.name] = event.target.value;
  render(event.target.name);
 }
 function init() {
  selects = Object.fromEntries(
    [...document.querySelectorAll('#mix_and_match wa-select')].map(select => [select.getAttribute('name'), select]),
  );
  codeSnippets = document.querySelector('#usage ~ wa-tab-group.import-stylesheet-code:first-of-type');
  codeSnippets = {
    html: codeSnippets.querySelector('code.language-html'),
    css: codeSnippets.querySelector('code.language-css'),
  };
  data = {
    baseTheme: wa_data.baseTheme,
    themes: wa_data.themes,
    palettes: wa_data.palettes,
    defaultParams: {
      colors: '',
      get palette() {
        let colors = data.params.colors || data.baseTheme;
        return data.themes[colors].palette;
      },
      get brand() {
        let colors = data.params.colors || data.baseTheme;
        return data.themes[colors].brand;
      },
      typography: '',
    },
    params: { colors: '', palette: '', brand: '', typography: '' },
    urlParams: new Permalink(),
  };
  data.urlParams.mapObject(data.params);
  data.urlParams.writeTo(data.params);
  if (computed.isRemixed) {
    // Start with the remixing UI open if the theme has been remixed
    mix_and_match.setAttribute('open', '');
    mix_and_match.open = true;
  }
  for (let name in selects) {
    selects[name].addEventListener('change', selectsChanged);
  }
  Promise.all(Object.values(selects).map(select => select.updateComplete)).then(() => render());
  return { selects, codeSnippets, data, computed, render };
 }
 globalThis.remixApp = init();
 // Async load CSS for other themes *before* current theme stylesheet
 let themeStylesheet = document.querySelector('#theme-stylesheet');
 for (const theme in data.themes) {
  themeStylesheet.insertAdjacentHTML(
    'beforebegin',
    `<link rel="preload" as="style" href="/dist/styles/themes/${theme}/color.css" onload="this.rel = 'stylesheet'" />
    <link rel="preload" as="style" href="/dist/styles/themes/${theme}/typography.css" onload="this.rel = 'stylesheet'" />`,
  );
 }
 for (const palette in data.palettes) {
  themeStylesheet.insertAdjacentHTML(
    'beforebegin',
    `<link rel="preload" as="style" href="/dist/styles/color/${palette}.css" onload="this.rel = 'stylesheet'" />`,
  );
 }
 function setDefault(select, value) {
  let oldDefaultOption = select.querySelector(`wa-option[value=""]:not([data-id="${value}"])`);
  let newDefaultOption = select.querySelector(`wa-option[value="${value}"]`);
  if (oldDefaultOption) {
    oldDefaultOption.value = oldDefaultOption.dataset.id;
  }
  if (newDefaultOption) {
    newDefaultOption.dataset.id ??= newDefaultOption.value;
    newDefaultOption.value = '';
  }
 }
 function render(changedAspect) {
  let url = new URL(demo.src);
  if (!changedAspect || changedAspect === 'colors') {
    // Update the default palette when the theme colors change to the default palette of that theme
    setDefault(selects.palette, data.defaultParams.palette);
    setDefault(selects.brand, data.defaultParams.brand);
  }
  let brand = data.params.brand || data.defaultParams.brand;
  selects.brand.style.setProperty('--color', `var(--wa-color-${brand})`);
  selects.brand.className = `wa-palette-${computed.palette}`;
  for (let aspect in data.params) {
    let value = data.params[aspect];
    selects[aspect].value = value;
  }
  data.urlParams.readFrom(data.params);
  // Update demo URL
  domChange(() => {
    url.search = data.urlParams;
    demo.src = url;
    return new Promise(resolve => (demo.onload = resolve));
  });
  // Update page URL
  data.urlParams.updateLocation();
  // Update code snippets
  for (let language in codeSnippets) {
    let codeSnippet = codeSnippets[language];
    let code = getThemeCode(data.baseTheme, data.params, { language, cdnUrl });
    codeSnippet.textContent = code;
    Prism.highlightElement(codeSnippet);
  }
 }
 addEventListener('turbo:render', event => {
  remixApp = init();
 });
--- a/docs/docs/themes/showcase.css
+++ b/docs/docs/themes/showcase.css
@@ -14,18 +14,7 @@ body,
  color: var(--wa-color-text-quiet);
  wa-icon {
-    vertical-align: -0.15em;
+    vertical-align: middle;
  }
  > strong {
    margin-inline-end: var(--wa-space-2xs);
  }
  wa-badge {
    > a {
      text-decoration: none;
      color: inherit;
    }
  }
 }
--- a/docs/docs/themes/tailspin.md
+++ b/docs/docs/themes/tailspin.md
@@ -4,5 +4,4 @@ description: Like a bird in flight, guiding you from there to here.
 isPro: true
 tags: pro
 palette: vogue
 brand: indigo
 ---
--- a/docs/docs/themes/themes.json
+++ b/docs/docs/themes/themes.json
@@ -1,9 +1,5 @@
 {
  "layout": "theme.njk",
  "wide": true,
-  "tags": ["themes", "theme"],
+  "tags": ["themes", "theme"]
  "brand": "blue",
  "eleventyComputed": {
    "file": "styles/themes/{{ page.fileSlug }}.css"
  }
 }
--- a/docs/docs/tokens/color.md
+++ b/docs/docs/tokens/color.md
@@ -66,7 +66,7 @@ You can use these numbers to ensure accessible color contrast per [WCAG 2.1 succ
 Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
-{% for hue in hues -%}
+{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
 <div class="color-name">{{ hue | capitalize }}</div>
 <ul class="color-group">
  {% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -12,7 +12,6 @@ import { dirname, join, relative } from 'path';
 import process from 'process';
 import copy from 'recursive-copy';
 import { fileURLToPath } from 'url';
 import { preprocessStylesheet } from './preprocess-css.js';
 import { cdnDir, distDir, docsDir, rootDir, runScript, siteDir } from './utils.js';
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -37,7 +36,6 @@ async function buildAll() {
    await generateManifest();
    await generateReactWrappers();
    await generateTypes();
    await preprocessStyles();
    await generateStyles();
    // copy everything to unbundled before we generate bundles.
@@ -107,23 +105,6 @@ function generateReactWrappers() {
  return Promise.resolve();
 }
 /**
 * Generate preprocessed CSS
 */
 async function preprocessStyles() {
  const preprocessedCSSFiles = await globby(join(rootDir, 'src/styles/**/*.css.njk'));
  if (preprocessedCSSFiles.length > 0) {
    spinner.start('Preprocessing stylesheets');
    for (let filePath of preprocessedCSSFiles) {
      await preprocessStylesheet(filePath);
    }
    spinner.succeed();
  }
 }
 /**
 * Copies theme stylesheets to the dist.
 */
@@ -390,7 +371,6 @@ if (isDeveloping) {
    try {
      const isTestFile = filename.includes('.test.ts');
      const isCssStylesheet = filename.includes('.css');
      const isPreprocessedStylesheet = filename.endsWith('.css.njk');
      const isComponent =
        filename.includes('components/') && filename.includes('.ts') && !isCssStylesheet && !isTestFile;
@@ -401,10 +381,6 @@ if (isDeveloping) {
      await regenerateBundle();
      if (isPreprocessedStylesheet || filename.endsWith('src/styles/data.js')) {
        await preprocessStyles();
      }
      // Copy stylesheets when CSS files change
      if (isCssStylesheet) {
        await generateStyles();
--- a/scripts/preprocess-css.js
+++ b/scripts/preprocess-css.js
@@ -1,61 +0,0 @@
 import { readFile, writeFile } from 'fs/promises';
 import nunjucks from 'nunjucks';
 import * as prettier from 'prettier';
 import prettierConfig from '../prettier.config.js';
 import * as globalData from '../src/styles/data.js';
 const prelude = inputFilename => `/* DO NOT EDIT THIS FILE. It is generated from "${inputFilename}" */`;
 let env = nunjucks.configure({ autoescape: false });
 let filenameVariables = Object.keys(globalData)
  .filter(key => key.endsWith('s'))
  .map(key => key.slice(0, -1));
 let filenameVariablesRegex = RegExp(`\\{\\{\\s*(${filenameVariables.join('|')})\\s*\\}\\}`, 'g');
 export async function preprocessStylesheet(inputPath) {
  const content = await readFile(inputPath, 'utf-8');
  let outputPath = inputPath.replace(/\.njk$/, '');
  let filename = outputPath.split('/').pop();
  if (filenameVariablesRegex.test(filename)) {
    // NOTE only supports a single variable right now
    filenameVariablesRegex.lastIndex = 0;
    let ret = [];
    for (let match of filename.matchAll(filenameVariablesRegex)) {
      let variable = match[1];
      let values = globalData[variable + 's'];
      for (let value of values) {
        let data = { [variable]: value };
        let css = await renderCSS(content, { data, inputPath, outputPath });
        // Now use Nunjucks *again*, to render the actual filename
        let localOutputFilePath = env.renderString(outputPath, data);
        ret.push(writeFile(localOutputFilePath, css, 'utf-8'));
      }
    }
    return Promise.all(ret);
  } else {
    let css = await renderCSS(content, { inputPath, outputPath });
    return writeFile(outputPath, css, 'utf-8');
  }
  // TODO add generated files to .gitignore?
 }
 export async function renderCSS(content, { data, inputPath, outputPath } = {}) {
  let inputFilename = inputPath.split('/').pop();
  data = data ? { ...globalData, ...data } : globalData;
  let css = env.renderString(content, data);
  if (prelude) {
    css = prelude(inputFilename) + '\n' + css;
  }
  css = await prettier.format(css, { ...prettierConfig, filepath: outputPath });
  return css;
 }
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -5,7 +5,6 @@
  --spacing: var(--wa-space);
  --border-width: var(--wa-panel-border-width);
  --border-color: var(--wa-color-surface-border);
  --border-radius: var(--wa-panel-border-radius);
  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
@@ -13,7 +12,7 @@
  display: flex;
  flex-direction: column;
  background-color: var(--wa-color-surface-default);
-  border-color: var(--border-color);
+  border-color: var(--wa-color-surface-border);
  border-radius: var(--border-radius);
  border-style: var(--wa-panel-border-style);
  box-shadow: var(--wa-shadow-s);
@@ -21,20 +20,12 @@
  color: var(--wa-color-text-normal);
 }
 /* Take care of top and bottom radii */
 .image,
-:host(:not([with-image])) .header,
+:host(:not([with-image])) .header {
 :host(:not([with-image], [with-header])) .body {
  border-start-start-radius: var(--inner-border-radius);
  border-start-end-radius: var(--inner-border-radius);
 }
 :host(:not([with-footer])) .body,
 .footer {
  border-end-start-radius: var(--inner-border-radius);
  border-end-end-radius: var(--inner-border-radius);
 }
 .image {
  display: flex;
@@ -48,9 +39,7 @@
 .header {
  display: block;
-  border-block-end-style: inherit;
+  border-bottom: inherit;
  border-block-end-color: var(--border-color);
  border-block-end-width: var(--border-width);
  padding: calc(var(--spacing) / 2) var(--spacing);
 }
@@ -61,9 +50,9 @@
 .footer {
  display: block;
-  border-block-start-style: inherit;
+  border-top: inherit;
-  border-block-start-color: var(--border-color);
+  border-end-start-radius: var(--inner-border-radius);
-  border-block-start-width: var(--border-width);
+  border-end-end-radius: var(--inner-border-radius);
  padding: var(--spacing);
 }
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -21,10 +21,9 @@ import styles from './card.css';
 * @csspart body - The container that wraps the card's main content.
 * @csspart footer - The container that wraps the card's footer.
 *
- * @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
+ * @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
- * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders, including inner borders. Expects a single value.
+ * @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
- * @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
+ * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value. Defaults to `var(--wa-space)`.
 * @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
 */
@customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -127,7 +127,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
  @property({ type: Boolean, reflect: true }) required = false;
  /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
-  @property() hint = '';
+  @property({ attribute: 'hint' }) hint = '';
  private handleClick() {
    this.hasInteracted = true;
--- a/src/components/details/details.css
+++ b/src/components/details/details.css
@@ -55,6 +55,12 @@ details {
  padding-block-start: var(--spacing);
 }
 .show {
 }
 .hide {
 }
@keyframes show {
  from {
  }
--- a/src/components/menu-item/menu-item.test.ts
+++ b/src/components/menu-item/menu-item.test.ts
@@ -60,16 +60,9 @@ describe('<wa-menu-item>', () => {
        });
      });
-      it('defaultLabel should return a text label', async () => {
+      it('should return a text label when calling getTextLabel()', async () => {
        const el = await fixture<WaMenuItem>(html` <wa-menu-item>Test</wa-menu-item> `);
-        expect(el.defaultLabel).to.equal('Test');
+        expect(el.getTextLabel()).to.equal('Test');
        expect(el.label).to.equal('Test');
      });
      it('label attribute should override default label', async () => {
        const el = await fixture<WaMenuItem>(html` <wa-menu-item label="Manual label">Text content</wa-menu-item> `);
        expect(el.defaultLabel).to.equal('Text content');
        expect(el.label).to.equal('Manual label');
      });
      it('should emit the slotchange event when the label changes', async () => {
@@ -114,7 +107,7 @@ describe('<wa-menu-item>', () => {
        expect(submenuSlot.hidden).to.be.true;
      });
-      it('should render a wa-popup if the slot="submenu" attribute is present', async () => {
+      it('should render an wa-popup if the slot="submenu" attribute is present', async () => {
        const menu = await fixture<WaMenuItem>(html`
          <wa-menu>
            <wa-menu-item id="test">
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -1,8 +1,9 @@
 import type { PropertyValues } from 'lit';
 import { html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import getText from '../../internal/get-text.js';
+import { getTextContent } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -42,6 +43,7 @@ import { SubmenuController } from './submenu-controller.js';
 export default class WaMenuItem extends WebAwesomeElement {
  static shadowStyle = styles;
  private cachedTextLabel: string;
  private readonly localize = new LocalizeController(this);
  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
@@ -62,36 +64,6 @@ export default class WaMenuItem extends WebAwesomeElement {
  /** Draws the menu item in a disabled state, preventing selection. */
  @property({ type: Boolean, reflect: true }) disabled = false;
  _label: string = '';
  /**
   * The option’s plain text label.
   * Usually automatically generated, but can be useful to provide manually for cases involving complex content.
   */
  @property()
  set label(value) {
    const oldValue = this._label;
    this._label = value || '';
    if (this._label !== oldValue) {
      this.requestUpdate('label', oldValue);
    }
  }
  get label(): string {
    if (this._label) {
      return this._label;
    }
    if (!this.defaultLabel) {
      this.updateDefaultLabel();
    }
    return this.defaultLabel;
  }
  /** The default label, generated from the element contents. Will be equal to `label` in most cases. */
  @state() defaultLabel = '';
  /**
   * Used for SSR purposes. If true, will render a ">" caret icon for showing that it has a submenu, but will be non-interactive.
   */
@@ -103,7 +75,6 @@ export default class WaMenuItem extends WebAwesomeElement {
    super.connectedCallback();
    this.addEventListener('click', this.handleHostClick);
    this.addEventListener('mouseover', this.handleMouseOver);
    this.updateDefaultLabel();
  }
  disconnectedCallback() {
@@ -122,10 +93,17 @@ export default class WaMenuItem extends WebAwesomeElement {
  }
  private handleDefaultSlotChange() {
-    let labelChanged = this.updateDefaultLabel();
+    const textLabel = this.getTextLabel();
    // Ignore the first time the label is set
    if (typeof this.cachedTextLabel === 'undefined') {
      this.cachedTextLabel = textLabel;
      return;
    }
    // When the label changes, emit a slotchange event so parent controls see it
-    if (labelChanged) {
+    if (textLabel !== this.cachedTextLabel) {
      this.cachedTextLabel = textLabel;
      /** @internal - prevent the CEM from recording this event */
      this.dispatchEvent(new Event('slotchange', { bubbles: true, composed: false, cancelable: false }));
    }
@@ -144,48 +122,41 @@ export default class WaMenuItem extends WebAwesomeElement {
    event.stopPropagation();
  };
-  updated(changedProperties: PropertyValues<this>) {
+  @watch('checked')
-    if (changedProperties.has('checked')) {
+  handleCheckedChange() {
-      // For proper accessibility, users have to use type="checkbox" to use the checked attribute
+    // For proper accessibility, users have to use type="checkbox" to use the checked attribute
-      if (this.checked && this.type !== 'checkbox') {
+    if (this.checked && this.type !== 'checkbox') {
-        this.checked = false;
+      this.checked = false;
-        return;
+      return;
      }
      // Only checkbox types can receive the aria-checked attribute
      if (this.type === 'checkbox') {
        this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
      } else {
        this.removeAttribute('aria-checked');
      }
    }
-    if (changedProperties.has('disabled')) {
+    // Only checkbox types can receive the aria-checked attribute
-      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    if (this.type === 'checkbox') {
-    }
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-
+    } else {
-    if (changedProperties.has('type')) {
+      this.removeAttribute('aria-checked');
      if (this.type === 'checkbox') {
        this.setAttribute('role', 'menuitemcheckbox');
        this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
      } else {
        this.setAttribute('role', 'menuitem');
        this.removeAttribute('aria-checked');
      }
    }
  }
-  private updateDefaultLabel() {
+  @watch('disabled')
-    let oldValue = this.defaultLabel;
+  handleDisabledChange() {
-    this.defaultLabel = getText(this).trim();
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-    let changed = this.defaultLabel !== oldValue;
+  }
-    if (!this._label && changed) {
+  @watch('type')
-      // Uses default label, and it has changed
+  handleTypeChange() {
-      this.requestUpdate('label', oldValue);
+    if (this.type === 'checkbox') {
      this.setAttribute('role', 'menuitemcheckbox');
      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
    } else {
      this.setAttribute('role', 'menuitem');
      this.removeAttribute('aria-checked');
    }
  }
-    return changed;
+  /** Returns a text label based on the contents of the menu item's default slot. */
  getTextLabel() {
    return getTextContent(this.defaultSlot);
  }
  isSubmenu() {
--- a/src/components/option/option.css
+++ b/src/components/option/option.css
@@ -8,7 +8,13 @@
  color: var(--wa-color-text-normal);
  -webkit-user-select: none;
  user-select: none;
 }
 :host(:focus) {
  outline: none;
 }
 .option {
  position: relative;
  display: flex;
  align-items: center;
@@ -19,23 +25,19 @@
  cursor: pointer;
 }
-:host(:focus) {
+:host(:not([disabled])) .option--hover:not(.option--current) {
  outline: none;
 }
 :host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
  background-color: var(--background-color-hover);
  color: var(--text-color-hover);
 }
-:host(:state(current)),
+.option--current,
-:host([disabled]:state(current)) {
+:host([disabled]) .option--current {
  background-color: var(--background-color-current);
  color: var(--text-color-current);
  opacity: 1;
 }
-:host([disabled]) {
+:host([disabled]) .option {
  outline: none;
  opacity: 0.5;
  cursor: not-allowed;
@@ -46,7 +48,7 @@
  display: inline-block;
 }
-.check {
+.option .check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
@@ -56,7 +58,7 @@
  width: var(--wa-space-xl);
 }
-:host(:state(selected)) .check {
+.option--selected .check {
  visibility: visible;
 }
@@ -76,7 +78,7 @@
 }
@media (forced-colors: active) {
-  :host(:hover:not([aria-disabled='true'])) {
+  :host(:hover:not([aria-disabled='true'])) .option {
    outline: dashed 1px SelectedItem;
    outline-offset: -1px;
  }
--- a/src/components/option/option.test.ts
+++ b/src/components/option/option.test.ts
@@ -23,7 +23,6 @@ describe('<wa-option>', () => {
        expect(el.value).to.equal('');
        expect(el.disabled).to.be.false;
        expect(el.label).to.equal('Test');
        expect(el.getAttribute('aria-disabled')).to.equal('false');
      });
@@ -45,16 +44,9 @@ describe('<wa-option>', () => {
        expect(el.value).to.equal('10');
      });
-      it('defaultLabel should escape HTML', async () => {
+      it('should escape HTML when calling getTextLabel()', async () => {
        const el = await fixture<WaOption>(html` <wa-option><strong>Option</strong></wa-option> `);
-        expect(el.defaultLabel).to.equal('Option');
+        expect(el.getTextLabel()).to.equal('Option');
        expect(el.label).to.equal('Option');
      });
      it('label attribute should override default label', async () => {
        const el = await fixture<WaOption>(html` <wa-option label="Manual label">Text content</wa-option> `);
        expect(el.defaultLabel).to.equal('Text content');
        expect(el.label).to.equal('Manual label');
      });
    });
  }
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import getText from '../../internal/get-text.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -25,13 +25,10 @@ import styles from './option.css';
 * @cssproperty --text-color-hover - The label color on hover.
 *
 * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
 * @csspart base - The component's base wrapper.
 * @csspart label - The option's label.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 *
 * @cssstate current - The user has keyed into the option, but hasn't selected it yet (shows a highlight)
 * @cssstate selected - The option is selected and has aria-selected="true"
 * @cssstate hover - Like `:hover` but works while dragging in Safari
 */
@customElement('wa-option')
 export default class WaOption extends WebAwesomeElement {
@@ -43,10 +40,9 @@ export default class WaOption extends WebAwesomeElement {
  @query('.label') defaultSlot: HTMLSlotElement;
-  // Set via the parent select
+  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-  @state() current = false;
+  @state() selected = false; // the option is selected and has aria-selected="true"
-
+  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
  @state() selected = false;
  /**
   * The option's value. When selected, the containing form control will receive this value. The value must be unique
@@ -58,56 +54,13 @@ export default class WaOption extends WebAwesomeElement {
  /** Draws the option in a disabled state, preventing selection. */
  @property({ type: Boolean, reflect: true }) disabled = false;
  _label: string = '';
  /**
   * The option’s plain text label.
   * Usually automatically generated, but can be useful to provide manually for cases involving complex content.
   */
  @property()
  set label(value) {
    const oldValue = this._label;
    this._label = value || '';
    if (this._label !== oldValue) {
      this.requestUpdate('label', oldValue);
    }
  }
  get label(): string {
    if (this._label) {
      return this._label;
    }
    if (!this.defaultLabel) {
      this.updateDefaultLabel();
    }
    return this.defaultLabel;
  }
  /** The default label, generated from the element contents. Will be equal to `label` in most cases. */
  @state() defaultLabel = '';
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('role', 'option');
    this.setAttribute('aria-selected', 'false');
    this.addEventListener('mouseenter', this.handleHover);
    this.addEventListener('mouseleave', this.handleHover);
    this.updateDefaultLabel();
  }
  disconnectedCallback(): void {
    super.disconnectedCallback();
    this.removeEventListener('mouseenter', this.handleHover);
    this.removeEventListener('mouseleave', this.handleHover);
  }
  private handleDefaultSlotChange() {
    this.updateDefaultLabel();
    if (this.isInitialized) {
      // When the label changes, tell the controller to update
      customElements.whenDefined('wa-select').then(() => {
@@ -121,75 +74,84 @@ export default class WaOption extends WebAwesomeElement {
    }
  }
-  private handleHover = (event: Event) => {
+  private handleMouseEnter() {
-    // We need this because Safari doesn't honor :hover styles while dragging
+    this.hasHover = true;
-    // Testcase: https://codepen.io/leaverou/pen/VYZOOjy
+  }
    if (event.type === 'mouseenter') {
      this.toggleCustomState('hover', true);
    } else if (event.type === 'mouseleave') {
      this.toggleCustomState('hover', false);
    }
  };
-  updated(changedProperties: PropertyValues<this>) {
+  private handleMouseLeave() {
-    super.updated(changedProperties);
+    this.hasHover = false;
  }
-    if (changedProperties.has('disabled')) {
+  @watch('disabled')
-      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  handleDisabledChange() {
    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
  }
  @watch('selected')
  handleSelectedChange() {
    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
  }
  @watch('value')
  handleValueChange() {
    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
    // instead of requiring them to cast the value to a string.
    if (typeof this.value !== 'string') {
      this.value = String(this.value);
    }
-    if (changedProperties.has('selected')) {
+    if (this.value.includes(' ')) {
-      this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+      // eslint-disable-next-line no-console
-      this.toggleCustomState('selected', this.selected);
+      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
-    }
+      this.value = this.value.replace(/ /g, '_');
    if (changedProperties.has('value')) {
      // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
      // instead of requiring them to cast the value to a string.
      if (typeof this.value !== 'string') {
        this.value = String(this.value);
      }
      if (this.value.includes(' ')) {
        // eslint-disable-next-line no-console
        console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
        this.value = this.value.replace(/ /g, '_');
      }
      this.handleDefaultSlotChange();
    }
    if (changedProperties.has('current')) {
      this.toggleCustomState('current', this.current);
    }
  }
-  private updateDefaultLabel() {
+  /** Returns a plain text label based on the option's content. */
-    let oldValue = this.defaultLabel;
+  getTextLabel() {
-    this.defaultLabel = getText(this).trim();
+    const nodes = this.childNodes;
-    let changed = this.defaultLabel !== oldValue;
+    let label = '';
-    if (!this._label && changed) {
+    [...nodes].forEach(node => {
-      // Uses default label, and it has changed
+      if (node.nodeType === Node.ELEMENT_NODE) {
-      this.requestUpdate('label', oldValue);
+        if (!(node as HTMLElement).hasAttribute('slot')) {
-    }
+          label += (node as HTMLElement).textContent;
        }
      }
-    return changed;
+      if (node.nodeType === Node.TEXT_NODE) {
        label += node.textContent;
      }
    });
    return label.trim();
  }
  render() {
    return html`
-      <wa-icon
+      <div
-        part="checked-icon"
+        part="base"
-        class="check"
+        class=${classMap({
-        name="check"
+          option: true,
-        library="system"
+          'option--current': this.current,
-        variant="solid"
+          'option--selected': this.selected,
-        aria-hidden="true"
+          'option--hover': this.hasHover,
-      ></wa-icon>
+        })}
-      <slot part="prefix" name="prefix" class="prefix"></slot>
+        @mouseenter=${this.handleMouseEnter}
-      <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        @mouseleave=${this.handleMouseLeave}
-      <slot part="suffix" name="suffix" class="suffix"></slot>
+      >
        <wa-icon
          part="checked-icon"
          class="check"
          name="check"
          library="system"
          variant="solid"
          aria-hidden="true"
        ></wa-icon>
        <slot part="prefix" name="prefix" class="prefix"></slot>
        <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
        <slot part="suffix" name="suffix" class="suffix"></slot>
      </div>
    `;
  }
 }
--- a/src/components/page/page.css
+++ b/src/components/page/page.css
@@ -9,7 +9,7 @@
  --banner-height: 0px;
  --header-height: 0px;
  --subheader-height: 0px;
-  --scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 0.5em);
+  --scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
 }
 slot[name]:not([name='skip-to-content'], [name='navigation-toggle'])::slotted(*) {
--- a/src/components/radio/radio.css
+++ b/src/components/radio/radio.css
@@ -1,15 +1,15 @@
 :host {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: top;
  vertical-align: middle;
  cursor: pointer;
 }
 :host(:focus-visible) {
  outline: none;
 }
 .radio {
  display: flex;
  align-items: top;
  font: inherit;
  vertical-align: middle;
  cursor: pointer;
 }
 .checked-icon {
  display: flex;
  fill: currentColor;
@@ -19,11 +19,6 @@
 }
 /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-:host(:not(:state(checked))) svg circle {
+.radio:not(.radio--checked) svg circle {
  opacity: 0;
 }
 [part~='hint'] {
  grid-column: 2;
  margin-block-start: var(--wa-space-3xs);
 }
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,11 +1,9 @@
 import type { PropertyValues } from 'lit';
 import { html, isServer } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { HasSlotController } from '../../internal/slot.js';
+import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/radio.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import '../icon/icon.js';
 import styles from './radio.css';
@@ -19,15 +17,14 @@ import styles from './radio.css';
 * @dependency wa-icon
 *
 * @slot - The radio's label.
 * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
 *
 * @event blur - Emitted when the control loses focus.
 * @event focus - Emitted when the control gains focus.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The circular container that wraps the radio's checked state.
 * @csspart checked-icon - The checked icon.
 * @csspart label - The container that wraps the radio's label.
 * @csspart hint - The hint's wrapper.
 *
 * @cssproperty --background-color - The radio's background color.
 * @cssproperty --background-color-checked - The radio's background color when checked.
@@ -45,7 +42,7 @@ import styles from './radio.css';
 */
@customElement('wa-radio')
 export default class WaRadio extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [formControlStyles, sizeStyles, nativeStyles, styles];
+  static shadowStyle = [sizeStyles, nativeStyles, styles];
  @state() checked = false;
@@ -66,11 +63,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
  /** Disables the radio. */
  @property({ type: Boolean }) disabled = false;
  /** The radio's hint. If you need to display HTML, use the `hint` slot instead. */
  @property() hint = '';
  private readonly hasSlotController = new HasSlotController(this, 'hint');
  constructor() {
    super();
    if (!isServer) {
@@ -89,19 +81,11 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
  }
-  updated(changedProperties: PropertyValues<this>) {
+  @watch('checked')
-    super.updated(changedProperties);
+  handleCheckedChange() {
-
+    this.toggleCustomState('checked', this.checked);
-    if (changedProperties.has('checked')) {
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-      this.toggleCustomState('checked', this.checked);
+    this.tabIndex = this.checked ? 0 : -1;
      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
      this.tabIndex = this.checked ? 0 : -1;
    }
    if (changedProperties.has('disabled')) {
      this.toggleCustomState('disabled', this.disabled);
      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
    }
  }
  /**
@@ -111,6 +95,12 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
    // We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself.
  }
  @watch('disabled', { waitUntilFirstUpdate: true })
  handleDisabledChange() {
    this.toggleCustomState('disabled', this.disabled);
    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
  }
  private handleClick = () => {
    if (!this.disabled) {
      this.checked = true;
@@ -118,30 +108,26 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
  };
  render() {
    const hasHintSlot = isServer ? true : this.hasSlotController.test('hint');
    const hasHint = this.hint ? true : !!hasHintSlot;
    return html`
-      <span part="control" class="control">
+      <span
-        ${this.checked
+        part="base"
-          ? html`
+        class=${classMap({
-              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
+          radio: true,
-                <circle cx="8" cy="8" r="8" />
+          'radio--checked': this.checked,
-              </svg>
+        })}
            `
          : ''}
      </span>
      <slot part="label" class="label"></slot>
      <slot
        name="hint"
        aria-hidden=${hasHint ? 'false' : 'true'}
        class="${classMap({ 'has-slotted': hasHint })}"
        id="hint"
        part="hint"
        >${this.hint}</slot
      >
        <span part="control" class="control">
          ${this.checked
            ? html`
                <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
                  <circle cx="8" cy="8" r="8" />
                </svg>
              `
            : ''}
        </span>
        <slot part="label" class="label"></slot>
      </span>
    `;
  }
 }
--- a/src/components/select/select.css
+++ b/src/components/select/select.css
@@ -177,7 +177,7 @@
  align-items: center;
  color: var(--wa-color-neutral-on-quiet);
  transition: rotate var(--wa-transition-slow) ease;
-  rotate: 0deg;
+  rotate: 0;
  margin-inline-start: var(--wa-space-s);
  .open & {
@@ -194,7 +194,7 @@
  background: var(--wa-color-surface-raised);
  border-color: var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
-  border-style: var(--wa-border-style);
+  border-style: var(--border-style);
  border-width: var(--border-width);
  padding-block: var(--wa-space-xs);
  padding-inline: 0;
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -252,7 +252,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
          removable
          @wa-remove=${(event: WaRemoveEvent) => this.handleTagRemove(event, option)}
        >
-          ${option.label}
+          ${option.getTextLabel()}
        </wa-tag>
      `;
    };
@@ -437,7 +437,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
      }
      for (const option of allOptions) {
-        const label = option.label.toLowerCase();
+        const label = option.getTextLabel().toLowerCase();
        if (label.startsWith(this.typeToSelectString)) {
          this.setCurrentOption(option);
@@ -642,7 +642,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
    } else {
      const selectedOption = this.selectedOptions[0];
      this.value = selectedOption?.value ?? '';
-      this.displayLabel = selectedOption?.label ?? '';
+      this.displayLabel = selectedOption?.getTextLabel?.() ?? '';
    }
    // Update validity
@@ -927,7 +927,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
        </div>
        <slot
          id="hint"
          name="hint"
          part="hint"
          class=${classMap({
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -24,6 +24,7 @@ let id = 0;
@customElement('wa-tab')
 export default class WaTab extends WebAwesomeElement {
  static shadowStyle = styles;
  public slot = 'nav'; // Auto-slot into nav slot
  private readonly attrId = ++id;
  private readonly componentId = `wa-tab-${this.attrId}`;
@@ -46,9 +47,6 @@ export default class WaTab extends WebAwesomeElement {
  @property({ type: Number, reflect: true }) tabIndex = 0;
  connectedCallback() {
    // Auto-slot into nav slot
    this.slot ||= 'nav';
    super.connectedCallback();
    this.setAttribute('role', 'tab');
  }
--- a/src/internal/get-text.ts
+++ b/src/internal/get-text.ts
@@ -1,46 +0,0 @@
 /**
 * Like textContent, but better:
 * - Uses assignedNodes to get text content from slots (and falls back to content if nothing is slotted)
 * - Ignores script and style elements
 * @param root - One or more nodes to get text content from.
 * @param depth - By default, will just return element.textContent for any child elements instead of calling the function recursively.
 *                Set to a positive integer to recurse that many levels. Generally a tradeoff between performance and accuracy.
 * @returns
 */
 export default function getText(root: Node | Iterable<Node>, depth = 0): string {
  if (!root || !globalThis.Node) {
    return '';
  }
  if (typeof (root as any)[Symbol.iterator] === 'function') {
    let nodes = Array.isArray(root) ? root : [...(root as Iterable<Node>)];
    return nodes.map(node => getText(node, --depth)).join('');
  }
  let node = root as Node;
  if (node.nodeType === Node.TEXT_NODE) {
    return node.textContent ?? '';
  }
  if (node.nodeType === Node.ELEMENT_NODE) {
    let element = node as HTMLElement;
    if (element.hasAttribute('slot') || element.matches('style, script')) {
      return '';
    }
    if (element instanceof HTMLSlotElement) {
      let assignedNodes = element.assignedNodes({ flatten: true });
      if (assignedNodes.length > 0) {
        // If no assigned nodes, we still want the slot contents
        return getText(assignedNodes, --depth);
      }
    }
    return depth > -1 ? getText(element, --depth) : (element.textContent ?? '');
  }
  return node.hasChildNodes() ? getText(node.childNodes, --depth) : '';
 }
--- a/src/internal/slot.ts
+++ b/src/internal/slot.ts
@@ -12,11 +12,11 @@ export class HasSlotController implements ReactiveController {
  private hasDefaultSlot() {
    return [...this.host.childNodes].some(node => {
-      if (node.nodeType === Node.TEXT_NODE && node.textContent!.trim() !== '') {
+      if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {
        return true;
      }
-      if (node.nodeType === Node.ELEMENT_NODE) {
+      if (node.nodeType === node.ELEMENT_NODE) {
        const el = node as HTMLElement;
        const tagName = el.tagName.toLowerCase();
@@ -90,3 +90,23 @@ export function getInnerHTML(nodes: Iterable<Node>, callback?: (node: Node) => s
  return html;
 }
 /**
 * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
 * string. This is useful because we can't use slot.textContent as an alternative.
 */
 export function getTextContent(slot: HTMLSlotElement | undefined | null): string {
  if (!slot) {
    return '';
  }
  const nodes = slot.assignedNodes({ flatten: true });
  let text = '';
  [...nodes].forEach(node => {
    if (node.nodeType === Node.TEXT_NODE) {
      text += node.textContent;
    }
  });
  return text;
 }
--- a/src/styles/brand/base.css
+++ b/src/styles/brand/base.css
@@ -1,80 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "base.css.njk" */
 :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-gte-40: calc(100% - var(--wa-color-brand-if-lt-40));
  --wa-color-brand-if-lt-50: calc(clamp(0, 50 - var(--wa-color-brand-key), 1) * 100%);
  --wa-color-brand-if-gte-50: calc(100% - var(--wa-color-brand-if-lt-50));
  --wa-color-brand-if-lt-60: calc(clamp(0, 60 - var(--wa-color-brand-key), 1) * 100%);
  --wa-color-brand-if-gte-60: calc(100% - var(--wa-color-brand-if-lt-60));
  --wa-color-brand-if-lt-70: calc(clamp(0, 70 - var(--wa-color-brand-key), 1) * 100%);
  --wa-color-brand-if-gte-70: calc(100% - var(--wa-color-brand-if-lt-70));
  --wa-color-brand-if-lt-80: calc(clamp(0, 80 - var(--wa-color-brand-key), 1) * 100%);
  --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/base.css.njk
+++ b/src/styles/brand/base.css.njk
@@ -1,36 +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
   */
  {% for tint in ['40', '50', '60', '70', '80'] %}
  --wa-color-brand-if-lt-{{ tint }}: calc(clamp(0, {{ tint }} - var(--wa-color-brand-key), 1) * 100%);
  --wa-color-brand-if-gte-{{ tint }}: calc(100% - var(--wa-color-brand-if-lt-{{ tint }}));
  {% endfor %}
  /*
   * 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
   */
  {% for tint in ['40', '50', '60', '70'] %}
  --wa-color-brand-{{ tint }}-max: color-mix(
    in oklab,
    var(--wa-color-brand) var(--wa-color-brand-if-lt-{{ tint }}),
    var(--wa-color-brand-{{ tint }})
  );
  --wa-color-brand-{{ tint }}-min: color-mix(
    in oklab,
    var(--wa-color-brand) var(--wa-color-brand-if-gte-{{ tint }}),
    var(--wa-color-brand-{{ tint }})
  );
  {% endfor %}
  /* 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,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-blue {
  --wa-color-brand-95: var(--wa-color-blue-95);
  --wa-color-brand-90: var(--wa-color-blue-90);
  --wa-color-brand-80: var(--wa-color-blue-80);
  --wa-color-brand-70: var(--wa-color-blue-70);
  --wa-color-brand-60: var(--wa-color-blue-60);
  --wa-color-brand-50: var(--wa-color-blue-50);
  --wa-color-brand-40: var(--wa-color-blue-40);
  --wa-color-brand-30: var(--wa-color-blue-30);
  --wa-color-brand-20: var(--wa-color-blue-20);
  --wa-color-brand-10: var(--wa-color-blue-10);
  --wa-color-brand-05: var(--wa-color-blue-05);
  --wa-color-brand: var(--wa-color-blue);
  --wa-color-brand-key: var(--wa-color-blue-key);
 }
--- a/src/styles/brand/cyan.css
+++ b/src/styles/brand/cyan.css
@@ -1,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-cyan {
  --wa-color-brand-95: var(--wa-color-cyan-95);
  --wa-color-brand-90: var(--wa-color-cyan-90);
  --wa-color-brand-80: var(--wa-color-cyan-80);
  --wa-color-brand-70: var(--wa-color-cyan-70);
  --wa-color-brand-60: var(--wa-color-cyan-60);
  --wa-color-brand-50: var(--wa-color-cyan-50);
  --wa-color-brand-40: var(--wa-color-cyan-40);
  --wa-color-brand-30: var(--wa-color-cyan-30);
  --wa-color-brand-20: var(--wa-color-cyan-20);
  --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);
 }
--- a/src/styles/brand/gray.css
+++ b/src/styles/brand/gray.css
@@ -1,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-gray {
  --wa-color-brand-95: var(--wa-color-gray-95);
  --wa-color-brand-90: var(--wa-color-gray-90);
  --wa-color-brand-80: var(--wa-color-gray-80);
  --wa-color-brand-70: var(--wa-color-gray-70);
  --wa-color-brand-60: var(--wa-color-gray-60);
  --wa-color-brand-50: var(--wa-color-gray-50);
  --wa-color-brand-40: var(--wa-color-gray-40);
  --wa-color-brand-30: var(--wa-color-gray-30);
  --wa-color-brand-20: var(--wa-color-gray-20);
  --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);
 }
--- a/src/styles/brand/green.css
+++ b/src/styles/brand/green.css
@@ -1,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-green {
  --wa-color-brand-95: var(--wa-color-green-95);
  --wa-color-brand-90: var(--wa-color-green-90);
  --wa-color-brand-80: var(--wa-color-green-80);
  --wa-color-brand-70: var(--wa-color-green-70);
  --wa-color-brand-60: var(--wa-color-green-60);
  --wa-color-brand-50: var(--wa-color-green-50);
  --wa-color-brand-40: var(--wa-color-green-40);
  --wa-color-brand-30: var(--wa-color-green-30);
  --wa-color-brand-20: var(--wa-color-green-20);
  --wa-color-brand-10: var(--wa-color-green-10);
  --wa-color-brand-05: var(--wa-color-green-05);
  --wa-color-brand: var(--wa-color-green);
  --wa-color-brand-key: var(--wa-color-green-key);
 }
--- a/src/styles/brand/indigo.css
+++ b/src/styles/brand/indigo.css
@@ -1,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-indigo {
  --wa-color-brand-95: var(--wa-color-indigo-95);
  --wa-color-brand-90: var(--wa-color-indigo-90);
  --wa-color-brand-80: var(--wa-color-indigo-80);
  --wa-color-brand-70: var(--wa-color-indigo-70);
  --wa-color-brand-60: var(--wa-color-indigo-60);
  --wa-color-brand-50: var(--wa-color-indigo-50);
  --wa-color-brand-40: var(--wa-color-indigo-40);
  --wa-color-brand-30: var(--wa-color-indigo-30);
  --wa-color-brand-20: var(--wa-color-indigo-20);
  --wa-color-brand-10: var(--wa-color-indigo-10);
  --wa-color-brand-05: var(--wa-color-indigo-05);
  --wa-color-brand: var(--wa-color-indigo);
  --wa-color-brand-key: var(--wa-color-indigo-key);
 }
--- a/src/styles/brand/orange.css
+++ b/src/styles/brand/orange.css
@@ -1,21 +0,0 @@
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-orange {
  --wa-color-brand-95: var(--wa-color-orange-95);
  --wa-color-brand-90: var(--wa-color-orange-90);
  --wa-color-brand-80: var(--wa-color-orange-80);
  --wa-color-brand-70: var(--wa-color-orange-70);
  --wa-color-brand-60: var(--wa-color-orange-60);
  --wa-color-brand-50: var(--wa-color-orange-50);
  --wa-color-brand-40: var(--wa-color-orange-40);
  --wa-color-brand-30: var(--wa-color-orange-30);
  --wa-color-brand-20: var(--wa-color-orange-20);
  --wa-color-brand-10: var(--wa-color-orange-10);
  --wa-color-brand-05: var(--wa-color-orange-05);
  --wa-color-brand: var(--wa-color-orange);
  --wa-color-brand-key: var(--wa-color-orange-key);
 }
--- a/src/styles/brand/pink.css
+++ b/src/styles/brand/pink.css
@@ -1,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-pink {
  --wa-color-brand-95: var(--wa-color-pink-95);
  --wa-color-brand-90: var(--wa-color-pink-90);
  --wa-color-brand-80: var(--wa-color-pink-80);
  --wa-color-brand-70: var(--wa-color-pink-70);
  --wa-color-brand-60: var(--wa-color-pink-60);
  --wa-color-brand-50: var(--wa-color-pink-50);
  --wa-color-brand-40: var(--wa-color-pink-40);
  --wa-color-brand-30: var(--wa-color-pink-30);
  --wa-color-brand-20: var(--wa-color-pink-20);
  --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);
 }
--- a/src/styles/brand/purple.css
+++ b/src/styles/brand/purple.css
@@ -1,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-purple {
  --wa-color-brand-95: var(--wa-color-purple-95);
  --wa-color-brand-90: var(--wa-color-purple-90);
  --wa-color-brand-80: var(--wa-color-purple-80);
  --wa-color-brand-70: var(--wa-color-purple-70);
  --wa-color-brand-60: var(--wa-color-purple-60);
  --wa-color-brand-50: var(--wa-color-purple-50);
  --wa-color-brand-40: var(--wa-color-purple-40);
  --wa-color-brand-30: var(--wa-color-purple-30);
  --wa-color-brand-20: var(--wa-color-purple-20);
  --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);
 }
--- a/src/styles/brand/red.css
+++ b/src/styles/brand/red.css
@@ -1,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-red {
  --wa-color-brand-95: var(--wa-color-red-95);
  --wa-color-brand-90: var(--wa-color-red-90);
  --wa-color-brand-80: var(--wa-color-red-80);
  --wa-color-brand-70: var(--wa-color-red-70);
  --wa-color-brand-60: var(--wa-color-red-60);
  --wa-color-brand-50: var(--wa-color-red-50);
  --wa-color-brand-40: var(--wa-color-red-40);
  --wa-color-brand-30: var(--wa-color-red-30);
  --wa-color-brand-20: var(--wa-color-red-20);
  --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);
 }
--- a/src/styles/brand/yellow.css
+++ b/src/styles/brand/yellow.css
@@ -1,22 +0,0 @@
 /* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-yellow {
  --wa-color-brand-95: var(--wa-color-yellow-95);
  --wa-color-brand-90: var(--wa-color-yellow-90);
  --wa-color-brand-80: var(--wa-color-yellow-80);
  --wa-color-brand-70: var(--wa-color-yellow-70);
  --wa-color-brand-60: var(--wa-color-yellow-60);
  --wa-color-brand-50: var(--wa-color-yellow-50);
  --wa-color-brand-40: var(--wa-color-yellow-40);
  --wa-color-brand-30: var(--wa-color-yellow-30);
  --wa-color-brand-20: var(--wa-color-yellow-20);
  --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);
 }
--- a/src/styles/brand/{{
+++ b/src/styles/brand/{{
@@ -1,13 +0,0 @@
@import url('base.css');
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 :where([class^='wa-palette-'], [class*=' wa-palette-']),
 .wa-brand-{{ hue }} {
  {%- for tint in tints | reverse %}
  --wa-color-brand-{{ tint }}: var(--wa-color-{{ hue }}-{{ tint }});
  {%- endfor %}
  --wa-color-brand: var(--wa-color-{{ hue }});
  --wa-color-brand-key: var(--wa-color-{{ hue }}-key);
 }
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -2,129 +2,107 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-anodized {
-  --wa-color-red-95: #ffefee /* oklch(96.448% 0.01742 21.806) */;
+  --wa-color-red-95: #fbeeeb /* oklch(95.851% 0.01469 33.071) */;
-  --wa-color-red-90: #fededd /* oklch(92.674% 0.03556 19.95) */;
+  --wa-color-red-90: #f8e0d9 /* oklch(92.431% 0.02823 36.865) */;
-  --wa-color-red-80: #fabab8 /* oklch(84.695% 0.0745 20.791) */;
+  --wa-color-red-80: #efbdb1 /* oklch(83.972% 0.06035 33.801) */;
-  --wa-color-red-70: #f19695 /* oklch(76.595% 0.11008 20.609) */;
+  --wa-color-red-70: #e39f8d /* oklch(76.38% 0.08577 35.424) */;
-  --wa-color-red-60: #d47c7e /* oklch(68.199% 0.10963 18.885) */;
+  --wa-color-red-60: #d1806b /* oklch(68.083% 0.10573 35.329) */;
-  --wa-color-red-50: #af5e5a /* oklch(57.551% 0.10599 23.859) */;
+  --wa-color-red-50: #b35e49 /* oklch(57.764% 0.11532 34.927) */;
-  --wa-color-red-40: #89453f /* oklch(47.393% 0.09388 26.419) */;
+  --wa-color-red-40: #8e4330 /* oklch(47.527% 0.10671 35.325) */;
-  --wa-color-red-30: #6d352f /* oklch(40.077% 0.08085 27.557) */;
+  --wa-color-red-30: #733223 /* oklch(40.293% 0.09564 34.326) */;
-  --wa-color-red-20: #522521 /* oklch(32.622% 0.06818 26.677) */;
+  --wa-color-red-20: #562317 /* oklch(32.748% 0.07905 34.548) */;
-  --wa-color-red-10: #331512 /* oklch(23.979% 0.04918 27.221) */;
+  --wa-color-red-10: #36130a /* oklch(23.979% 0.05887 35.518) */;
-  --wa-color-red-05: #220b09 /* oklch(18.625% 0.04007 26.766) */;
+  --wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
-  --wa-color-red: var(--wa-color-red-70);
+  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 70;
-  --wa-color-yellow-95: #faf3e1 /* oklch(96.479% 0.02487 89.211) */;
+  --wa-color-yellow-95: #fff2b8 /* oklch(95.764% 0.07527 96.955) */;
-  --wa-color-yellow-90: #f4e5be /* oklch(92.412% 0.0535 89.488) */;
+  --wa-color-yellow-90: #ffe578 /* oklch(92.163% 0.13215 96.194) */;
-  --wa-color-yellow-80: #eac673 /* oklch(84.03% 0.1101 86.581) */;
+  --wa-color-yellow-80: #eac46c /* oklch(83.54% 0.11551 86.482) */;
-  --wa-color-yellow-70: #d4a85b /* oklch(75.609% 0.10842 79.92) */;
+  --wa-color-yellow-70: #d5a766 /* oklch(75.67% 0.0989 74.916) */;
-  --wa-color-yellow-60: #bf8b4a /* oklch(67.445% 0.10375 70.58) */;
+  --wa-color-yellow-60: #bd8a5e /* oklch(67.327% 0.08618 61.351) */;
-  --wa-color-yellow-50: #a06938 /* oklch(56.952% 0.09579 60.65) */;
+  --wa-color-yellow-50: #9d6a4f /* oklch(57.149% 0.0766 48.607) */;
-  --wa-color-yellow-40: #7f4d29 /* oklch(47.038% 0.08433 54.746) */;
+  --wa-color-yellow-40: #794f3c /* oklch(46.965% 0.06418 45.076) */;
-  --wa-color-yellow-30: #663b1e /* oklch(39.848% 0.07399 52.93) */;
+  --wa-color-yellow-30: #603d2f /* oklch(39.723% 0.05466 42.556) */;
-  --wa-color-yellow-20: #4c2a14 /* oklch(32.393% 0.0609 51.89) */;
+  --wa-color-yellow-20: #482b21 /* oklch(32.256% 0.04681 39.773) */;
-  --wa-color-yellow-10: #2f1809 /* oklch(23.743% 0.04463 52.113) */;
+  --wa-color-yellow-10: #2c1912 /* oklch(23.678% 0.03339 40.974) */;
-  --wa-color-yellow-05: #1f0e04 /* oklch(18.6% 0.03542 53.04) */;
+  --wa-color-yellow-05: #1d0e0a /* oklch(18.423% 0.02718 35.681) */;
-  --wa-color-yellow: var(--wa-color-yellow-80);
+  --wa-color-yellow: var(--wa-color-yellow-90);
  --wa-color-yellow-key: 80;
-  --wa-color-green-95: #ebf6e0 /* oklch(95.901% 0.03126 128.83) */;
+  --wa-color-green-95: #dcf8ea /* oklch(95.5% 0.03463 164.16) */;
-  --wa-color-green-90: #d3efbe /* oklch(91.922% 0.0713 131.97) */;
+  --wa-color-green-90: #bcf1d8 /* oklch(91.473% 0.06399 164.58) */;
-  --wa-color-green-80: #96db86 /* oklch(82.501% 0.13433 139.79) */;
+  --wa-color-green-80: #6dddad /* oklch(81.852% 0.12484 163.42) */;
-  --wa-color-green-70: #68c17c /* oklch(73.758% 0.13164 149.51) */;
+  --wa-color-green-70: #33c685 /* oklch(73.519% 0.15428 158.98) */;
-  --wa-color-green-60: #4aa672 /* oklch(65.518% 0.11814 156.17) */;
+  --wa-color-green-60: #0a6 /* oklch(64.917% 0.15588 156.54) */;
-  --wa-color-green-50: #2e845d /* oklch(55.093% 0.10286 160.26) */;
+  --wa-color-green-50: #008754 /* oklch(54.923% 0.12782 158.29) */;
-  --wa-color-green-40: #1b6548 /* oklch(45.377% 0.0863 162.75) */;
+  --wa-color-green-40: #006646 /* oklch(45.146% 0.09722 163.25) */;
-  --wa-color-green-30: #104f38 /* oklch(38.219% 0.07374 163.76) */;
+  --wa-color-green-30: #00503b /* oklch(38.299% 0.07764 167.91) */;
-  --wa-color-green-20: #083a29 /* oklch(31.135% 0.05985 165.09) */;
+  --wa-color-green-20: #003a2d /* oklch(31.045% 0.06006 172.22) */;
-  --wa-color-green-10: #032317 /* oklch(22.865% 0.0446 164.36) */;
+  --wa-color-green-10: #00231b /* oklch(22.853% 0.04344 174.1) */;
-  --wa-color-green-05: #01160d /* oklch(17.827% 0.03566 164.38) */;
+  --wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
-  --wa-color-green: var(--wa-color-green-80);
+  --wa-color-green: var(--wa-color-green-60);
  --wa-color-green-key: 80;
-  --wa-color-cyan-95: #cafbfd /* oklch(95.491% 0.04984 199.43) */;
+  --wa-color-teal-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
-  --wa-color-cyan-90: #97f5f8 /* oklch(91.286% 0.08952 198.32) */;
+  --wa-color-teal-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
-  --wa-color-cyan-80: #3fdee7 /* oklch(82.5% 0.12703 200.7) */;
+  --wa-color-teal-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
-  --wa-color-cyan-70: #00c0d4 /* oklch(73.886% 0.127 207.98) */;
+  --wa-color-teal-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
-  --wa-color-cyan-60: #00a3bf /* oklch(65.895% 0.11686 215.74) */;
+  --wa-color-teal-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
-  --wa-color-cyan-50: #007fa2 /* oklch(55.537% 0.10592 225.72) */;
+  --wa-color-teal-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
-  --wa-color-cyan-40: #006082 /* oklch(45.89% 0.09291 231.37) */;
+  --wa-color-teal-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
-  --wa-color-cyan-30: #014a6b /* oklch(38.746% 0.08372 236.7) */;
+  --wa-color-teal-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
-  --wa-color-cyan-20: #003652 /* oklch(31.672% 0.07138 239.03) */;
+  --wa-color-teal-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
-  --wa-color-cyan-10: #002034 /* oklch(23.245% 0.05366 240.46) */;
+  --wa-color-teal-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
-  --wa-color-cyan-05: #001422 /* oklch(18.196% 0.041 239.02) */;
+  --wa-color-teal-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
-  --wa-color-cyan: var(--wa-color-cyan-80);
+  --wa-color-teal: var(--wa-color-teal-80);
  --wa-color-cyan-key: 80;
-  --wa-color-blue-95: #e5f6ff /* oklch(96.324% 0.02167 230.54) */;
+  --wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
-  --wa-color-blue-90: #c7ebff /* oklch(92.061% 0.04647 232.28) */;
+  --wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
-  --wa-color-blue-80: #8ed2f9 /* oklch(83.243% 0.08774 234.44) */;
+  --wa-color-blue-80: #abcaff /* oklch(83.49% 0.082 261.03) */;
-  --wa-color-blue-70: #5db7f3 /* oklch(74.844% 0.12234 240.33) */;
+  --wa-color-blue-70: #83b0fe /* oklch(75.655% 0.12308 260.97) */;
-  --wa-color-blue-60: #309aee /* oklch(66.707% 0.15592 247.36) */;
+  --wa-color-blue-60: #5593fe /* oklch(67.328% 0.1713 260.55) */;
-  --wa-color-blue-50: #0774df /* oklch(56.704% 0.18422 255.07) */;
+  --wa-color-blue-50: #3d74d2 /* oklch(57.024% 0.15628 260.38) */;
-  --wa-color-blue-40: #0152c1 /* oklch(47.066% 0.187 259.59) */;
+  --wa-color-blue-40: #2e589f /* oklch(46.829% 0.12443 260.23) */;
-  --wa-color-blue-30: #003ea2 /* oklch(40.154% 0.17138 260.8) */;
+  --wa-color-blue-30: #24457c /* oklch(39.571% 0.10098 260.03) */;
-  --wa-color-blue-20: #002b7f /* oklch(32.816% 0.14852 261.7) */;
+  --wa-color-blue-20: #1b325b /* oklch(32.168% 0.07881 261.06) */;
-  --wa-color-blue-10: #001853 /* oklch(24.067% 0.11176 262.05) */;
+  --wa-color-blue-10: #101d35 /* oklch(23.292% 0.05008 261.75) */;
-  --wa-color-blue-05: #000e39 /* oklch(18.796% 0.0868 261.98) */;
+  --wa-color-blue-05: #0a1222 /* oklch(18.375% 0.0352 263.19) */;
-  --wa-color-blue: var(--wa-color-blue-40);
+  --wa-color-blue: var(--wa-color-blue-60);
  --wa-color-blue-key: 40;
-  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
+  --wa-color-indigo-95: #f5efff /* oklch(96.142% 0.02215 302.94) */;
-  --wa-color-indigo-90: #e1e4fe /* oklch(92.448% 0.03538 280.45) */;
+  --wa-color-indigo-90: #ede0ff /* oklch(92.64% 0.04374 304.51) */;
-  --wa-color-indigo-80: #bfc6fe /* oklch(84.035% 0.07865 279.01) */;
+  --wa-color-indigo-80: #d7bdff /* oklch(84.265% 0.09443 302.44) */;
-  --wa-color-indigo-70: #9fa8fc /* oklch(75.744% 0.12084 278.41) */;
+  --wa-color-indigo-70: #bf9efe /* oklch(76.541% 0.13786 298.94) */;
-  --wa-color-indigo-60: #828bf6 /* oklch(67.774% 0.15666 277.72) */;
+  --wa-color-indigo-60: #a280fa /* oklch(68.571% 0.17519 294.14) */;
-  --wa-color-indigo-50: #6166e8 /* oklch(57.738% 0.19274 276.85) */;
+  --wa-color-indigo-50: #7f5bec /* oklch(58.581% 0.20817 289.86) */;
-  --wa-color-indigo-40: #4743d0 /* oklch(48.143% 0.20939 276.34) */;
+  --wa-color-indigo-40: #603dc8 /* oklch(48.557% 0.20262 287.93) */;
-  --wa-color-indigo-30: #372db3 /* oklch(41.009% 0.20044 276.19) */;
+  --wa-color-indigo-30: #4c2ba5 /* oklch(41.119% 0.18229 287.94) */;
-  --wa-color-indigo-20: #291b90 /* oklch(33.874% 0.17803 276.48) */;
+  --wa-color-indigo-20: #381d7f /* oklch(33.629% 0.15279 287.75) */;
-  --wa-color-indigo-10: #170a61 /* oklch(24.844% 0.13871 276.05) */;
+  --wa-color-indigo-10: #210e53 /* oklch(24.589% 0.11518 287.13) */;
-  --wa-color-indigo-05: #0e0445 /* oklch(19.553% 0.11104 276.58) */;
+  --wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
-  --wa-color-indigo: var(--wa-color-indigo-40);
+  --wa-color-indigo: var(--wa-color-indigo-50);
  --wa-color-indigo-key: 40;
-  --wa-color-purple-95: #fbefff /* oklch(96.613% 0.02465 317.72) */;
+  --wa-color-violet-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
-  --wa-color-purple-90: #f7ddff /* oklch(92.895% 0.0531 318.2) */;
+  --wa-color-violet-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
-  --wa-color-purple-80: #edb7ff /* oklch(85.165% 0.11316 317.53) */;
+  --wa-color-violet-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
-  --wa-color-purple-70: #dc91fe /* oklch(77.161% 0.16803 314.62) */;
+  --wa-color-violet-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
-  --wa-color-purple-60: #c670f2 /* oklch(69.273% 0.19845 312.9) */;
+  --wa-color-violet-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
-  --wa-color-purple-50: #a34bda /* oklch(58.947% 0.21432 309.63) */;
+  --wa-color-violet-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
-  --wa-color-purple-40: #802fb6 /* oklch(48.965% 0.20261 307.82) */;
+  --wa-color-violet-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
-  --wa-color-purple-30: #661f96 /* oklch(41.488% 0.1815 307.02) */;
+  --wa-color-violet-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
-  --wa-color-purple-20: #4c1372 /* oklch(33.753% 0.1509 306.93) */;
+  --wa-color-violet-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
-  --wa-color-purple-10: #30074a /* oklch(24.849% 0.1139 307.37) */;
+  --wa-color-violet-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
-  --wa-color-purple-05: #200333 /* oklch(19.47% 0.0902 307.77) */;
+  --wa-color-violet-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-violet: var(--wa-color-violet-50);
  --wa-color-purple-key: 50;
-  --wa-color-pink-95: #ffedf6 /* oklch(96.291% 0.02268 345.75) */;
+  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
-  --wa-color-pink-90: #feddee /* oklch(92.966% 0.04248 345.5) */;
+  --wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
-  --wa-color-pink-80: #feb2e3 /* oklch(84.978% 0.10743 340.7) */;
+  --wa-color-gray-80: #c2c9d0 /* oklch(83.255% 0.01246 247.98) */;
-  --wa-color-pink-70: #f688de /* oklch(77.315% 0.16826 335.79) */;
+  --wa-color-gray-70: #a6b0ba /* oklch(75.244% 0.01824 248.07) */;
-  --wa-color-pink-60: #e560d6 /* oklch(69.598% 0.21242 332.2) */;
+  --wa-color-gray-60: #8897a3 /* oklch(66.841% 0.02477 242.06) */;
-  --wa-color-pink-50: #c234bf /* oklch(59.18% 0.23062 328.94) */;
+  --wa-color-gray-50: #657888 /* oklch(56.309% 0.0335 243.8) */;
-  --wa-color-pink-40: #9b189b /* oklch(49.224% 0.21096 328.21) */;
+  --wa-color-gray-40: #435c6f /* oklch(46.235% 0.04323 241.6) */;
-  --wa-color-pink-30: #7c097e /* oklch(41.626% 0.18577 327.45) */;
+  --wa-color-gray-30: #2d485d /* oklch(38.946% 0.04864 242.89) */;
-  --wa-color-pink-20: #5e0160 /* oklch(34.016% 0.15613 327.29) */;
+  --wa-color-gray-20: #18354a /* oklch(31.701% 0.05142 242.24) */;
-  --wa-color-pink-10: #3c003c /* oklch(24.992% 0.11486 328.36) */;
+  --wa-color-gray-10: #012034 /* oklch(23.295% 0.05299 241.23) */;
-  --wa-color-pink-05: #280029 /* oklch(19.507% 0.09014 327.31) */;
+  --wa-color-gray-05: #001421 /* oklch(18.122% 0.03959 237.04) */;
  --wa-color-pink: var(--wa-color-pink-50);
  --wa-color-pink-key: 50;
  --wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
  --wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
  --wa-color-gray-80: #cacaca /* oklch(83.901% 0 none) */;
  --wa-color-gray-70: #aeafaf /* oklch(75.321% 0.00114 197.13) */;
  --wa-color-gray-60: #959595 /* oklch(66.984% 0 none) */;
  --wa-color-gray-50: #757575 /* oklch(56.241% 0 none) */;
  --wa-color-gray-40: #595959 /* oklch(46.4% 0 none) */;
  --wa-color-gray-30: #454444 /* oklch(38.762% 0.00135 17.215) */;
  --wa-color-gray-20: #323232 /* oklch(31.714% 0 none) */;
  --wa-color-gray-10: #1d1d1d /* oklch(23.075% 0 none) */;
  --wa-color-gray-05: #121212 /* oklch(18.22% 0 none) */;
  --wa-color-gray: var(--wa-color-gray-40);
  --wa-color-gray-key: 40;
 }
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -5,126 +5,104 @@
  --wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
  --wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
  --wa-color-red-80: #ffb7b7 /* oklch(84.652% 0.084 18.964) */;
-  --wa-color-red-70: #ff8e90 /* oklch(76.896% 0.13677 19.629) */;
+  --wa-color-red-70: #ff8e8e /* oklch(76.851% 0.13692 20.73) */;
-  --wa-color-red-60: #f76563 /* oklch(69.077% 0.18003 23.786) */;
+  --wa-color-red-60: #fd5f5f /* oklch(69.182% 0.19322 23.628) */;
-  --wa-color-red-50: #d04442 /* oklch(58.513% 0.17687 25.152) */;
+  --wa-color-red-50: #de3131 /* oklch(58.924% 0.20878 26.488) */;
-  --wa-color-red-40: #a52c2b /* oklch(48.271% 0.15774 25.737) */;
+  --wa-color-red-40: #b40917 /* oklch(48.728% 0.19437 26.549) */;
-  --wa-color-red-30: #861d1c /* oklch(40.905% 0.1406 26.45) */;
+  --wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
-  --wa-color-red-20: #680d0e /* oklch(33.449% 0.1237 26.777) */;
+  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
-  --wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
+  --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-05: #300000 /* oklch(19.415% 0.07967 29.234) */;
-  --wa-color-red: var(--wa-color-red-60);
+  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 60;
-  --wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */;
+  --wa-color-yellow-95: #fef3c1 /* oklch(96.062% 0.06532 97.08) */;
-  --wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */;
+  --wa-color-yellow-90: #fee682 /* oklch(92.403% 0.1233 96.206) */;
-  --wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */;
+  --wa-color-yellow-80: #fbc217 /* oklch(84.22% 0.16883 86.577) */;
-  --wa-color-yellow-70: #f29c00 /* oklch(76.127% 0.16443 70.48) */;
+  --wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
-  --wa-color-yellow-60: #d08402 /* oklch(67.671% 0.14665 69.482) */;
+  --wa-color-yellow-60: #e67700 /* oklch(68.349% 0.1693 54.965) */;
-  --wa-color-yellow-50: #a56804 /* oklch(57.027% 0.1228 69.447) */;
+  --wa-color-yellow-50: #b75d00 /* oklch(57.535% 0.1429 54.739) */;
-  --wa-color-yellow-40: #7d4f04 /* oklch(46.866% 0.09949 70.54) */;
+  --wa-color-yellow-40: #8c4600 /* oklch(47.31% 0.11712 55.012) */;
-  --wa-color-yellow-30: #643d03 /* oklch(39.73% 0.08492 68.821) */;
+  --wa-color-yellow-30: #6f3600 /* oklch(40.006% 0.09924 54.843) */;
-  --wa-color-yellow-20: #4a2c01 /* oklch(32.318% 0.06941 69.3) */;
+  --wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
-  --wa-color-yellow-10: #2d1901 /* oklch(23.512% 0.04963 68.776) */;
+  --wa-color-yellow-10: #341500 /* oklch(23.823% 0.06026 53.274) */;
-  --wa-color-yellow-05: #1d0f00 /* oklch(18.392% 0.03939 71.947) */;
+  --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
-  --wa-color-yellow: var(--wa-color-yellow-80);
+  --wa-color-yellow: var(--wa-color-yellow-60);
  --wa-color-yellow-key: 80;
-  --wa-color-green-95: #dbfaf0 /* oklch(96.006% 0.03481 174.15) */;
+  --wa-color-green-95: #e0fae4 /* oklch(96.026% 0.03986 149.82) */;
-  --wa-color-green-90: #b1f3de /* oklch(91.419% 0.0722 172.95) */;
+  --wa-color-green-90: #baf4c2 /* oklch(91.456% 0.0897 148.52) */;
-  --wa-color-green-80: #3fe2b2 /* oklch(81.853% 0.14907 168.5) */;
+  --wa-color-green-80: #73e085 /* oklch(81.974% 0.16188 147.55) */;
-  --wa-color-green-70: #29c596 /* oklch(73.487% 0.14194 166.89) */;
+  --wa-color-green-70: #46c65c /* oklch(73.25% 0.18463 146.42) */;
-  --wa-color-green-60: #19a87d /* oklch(65.107% 0.13007 166.01) */;
+  --wa-color-green-60: #33aa49 /* oklch(65.121% 0.17208 146.32) */;
-  --wa-color-green-50: #0a8560 /* oklch(54.742% 0.11293 164.94) */;
+  --wa-color-green-50: #2a863c /* oklch(54.872% 0.13954 146.82) */;
-  --wa-color-green-40: #036648 /* oklch(45.239% 0.09474 164.51) */;
+  --wa-color-green-40: #20662e /* oklch(45.254% 0.11199 147.1) */;
-  --wa-color-green-30: #015038 /* oklch(38.229% 0.08003 164.89) */;
+  --wa-color-green-30: #194f24 /* oklch(38.029% 0.09087 147.43) */;
-  --wa-color-green-20: #003a28 /* oklch(30.885% 0.06454 165.46) */;
+  --wa-color-green-20: #123a1a /* oklch(31.086% 0.07165 147.58) */;
-  --wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
+  --wa-color-green-10: #0b2210 /* oklch(22.733% 0.04522 148.82) */;
-  --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
+  --wa-color-green-05: #07150a /* oklch(17.871% 0.03021 149.94) */;
-  --wa-color-green: var(--wa-color-green-80);
+  --wa-color-green: var(--wa-color-green-70);
  --wa-color-green-key: 80;
-  --wa-color-cyan-95: #dbf9fc /* oklch(96.146% 0.03142 203.97) */;
+  --wa-color-teal-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
-  --wa-color-cyan-90: #a6f2fa /* oklch(91.438% 0.07533 204.25) */;
+  --wa-color-teal-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
-  --wa-color-cyan-80: #51dcee /* oklch(82.7% 0.11986 207.31) */;
+  --wa-color-teal-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
-  --wa-color-cyan-70: #2fbfd5 /* oklch(74.137% 0.11878 210.5) */;
+  --wa-color-teal-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
-  --wa-color-cyan-60: #1fa3b9 /* oklch(65.917% 0.10909 212.4) */;
+  --wa-color-teal-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
-  --wa-color-cyan-50: #118095 /* oklch(55.343% 0.09433 215.17) */;
+  --wa-color-teal-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
-  --wa-color-cyan-40: #056273 /* oklch(45.726% 0.0795 215.29) */;
+  --wa-color-teal-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
-  --wa-color-cyan-30: #014c5a /* oklch(38.37% 0.06757 215.53) */;
+  --wa-color-teal-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
-  --wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
+  --wa-color-teal-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
-  --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
+  --wa-color-teal-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
-  --wa-color-cyan-05: #00151a /* oklch(17.995% 0.03161 213.85) */;
+  --wa-color-teal-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
-  --wa-color-cyan: var(--wa-color-cyan-80);
+  --wa-color-teal: var(--wa-color-teal-70);
  --wa-color-cyan-key: 80;
  --wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
  --wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
-  --wa-color-blue-80: #93d0ff /* oklch(83.315% 0.09108 242.3) */;
+  --wa-color-blue-80: #94d0fe /* oklch(83.329% 0.08941 242.12) */;
-  --wa-color-blue-70: #5bb5fe /* oklch(74.85% 0.13654 245.56) */;
+  --wa-color-blue-70: #60b5f9 /* oklch(74.8% 0.1287 244.9) */;
-  --wa-color-blue-60: #4a99e4 /* oklch(66.699% 0.13625 249.55) */;
+  --wa-color-blue-60: #3299f0 /* oklch(66.644% 0.15866 248.64) */;
-  --wa-color-blue-50: #3178c0 /* oklch(56.346% 0.13216 251.63) */;
+  --wa-color-blue-50: #1a77cc /* oklch(56.301% 0.15449 251.61) */;
-  --wa-color-blue-40: #235a96 /* oklch(46.273% 0.11344 253.15) */;
+  --wa-color-blue-40: #165a9b /* oklch(46.242% 0.12393 251.89) */;
-  --wa-color-blue-30: #194777 /* oklch(39.272% 0.09544 252.36) */;
+  --wa-color-blue-30: #11477a /* oklch(39.241% 0.10211 251.38) */;
-  --wa-color-blue-20: #103359 /* oklch(31.787% 0.07886 253.15) */;
+  --wa-color-blue-20: #0d3459 /* oklch(31.95% 0.07871 250.89) */;
-  --wa-color-blue-10: #061e38 /* oklch(23.254% 0.05851 252.8) */;
+  --wa-color-blue-10: #071f35 /* oklch(23.365% 0.05197 249.19) */;
-  --wa-color-blue-05: #031225 /* oklch(18.051% 0.04534 253.25) */;
+  --wa-color-blue-05: #051321 /* oklch(18.208% 0.03553 248.92) */;
-  --wa-color-blue: var(--wa-color-blue-70);
+  --wa-color-blue: var(--wa-color-blue-60);
  --wa-color-blue-key: 70;
  --wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
  --wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
  --wa-color-indigo-80: #bac8ff /* oklch(84.108% 0.07867 273.5) */;
-  --wa-color-indigo-70: #95abff /* oklch(75.79% 0.12361 271.99) */;
+  --wa-color-indigo-70: #96abff /* oklch(75.857% 0.12332 272.47) */;
-  --wa-color-indigo-60: #728dff /* oklch(67.658% 0.17035 271.19) */;
+  --wa-color-indigo-60: #738efc /* oklch(67.734% 0.16478 271.06) */;
-  --wa-color-indigo-50: #516ed8 /* oklch(57.136% 0.16529 269.13) */;
+  --wa-color-indigo-50: #486af1 /* oklch(57.714% 0.20605 268.43) */;
-  --wa-color-indigo-40: #3851b3 /* oklch(47.273% 0.15818 268.81) */;
+  --wa-color-indigo-40: #354dc3 /* oklch(47.651% 0.18567 269.2) */;
-  --wa-color-indigo-30: #2a3f8f /* oklch(39.968% 0.13476 268.52) */;
+  --wa-color-indigo-30: #293c98 /* oklch(40.065% 0.15173 269.37) */;
-  --wa-color-indigo-20: #1e2d6c /* oklch(32.512% 0.11114 269.2) */;
+  --wa-color-indigo-20: #1e2c70 /* oklch(32.649% 0.11852 269.77) */;
-  --wa-color-indigo-10: #101a45 /* oklch(23.864% 0.08185 269.36) */;
+  --wa-color-indigo-10: #121a43 /* oklch(23.813% 0.07786 271) */;
-  --wa-color-indigo-05: #080f2f /* oklch(18.545% 0.06467 269.54) */;
+  --wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
-  --wa-color-indigo: var(--wa-color-indigo-60);
+  --wa-color-indigo: var(--wa-color-indigo-50);
  --wa-color-indigo-key: 60;
-  --wa-color-purple-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
+  --wa-color-violet-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
-  --wa-color-purple-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
+  --wa-color-violet-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
-  --wa-color-purple-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
+  --wa-color-violet-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
-  --wa-color-purple-70: #b8a0fe /* oklch(76.293% 0.13384 294.76) */;
+  --wa-color-violet-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
-  --wa-color-purple-60: #9e83f2 /* oklch(68.278% 0.16015 292.86) */;
+  --wa-color-violet-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
-  --wa-color-purple-50: #7b65cb /* oklch(57.62% 0.15206 290.77) */;
+  --wa-color-violet-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
-  --wa-color-purple-40: #5c4ba7 /* oklch(47.824% 0.14213 288.32) */;
+  --wa-color-violet-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
-  --wa-color-purple-30: #493590 /* oklch(40.487% 0.14337 288.41) */;
+  --wa-color-violet-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
-  --wa-color-purple-20: #371f7a /* oklch(33.309% 0.1443 287.97) */;
+  --wa-color-violet-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
-  --wa-color-purple-10: #250161 /* oklch(25.284% 0.14353 287.73) */;
+  --wa-color-violet-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
-  --wa-color-purple-05: #150047 /* oklch(19.858% 0.11707 283.68) */;
+  --wa-color-violet-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
-  --wa-color-purple: var(--wa-color-purple-60);
+  --wa-color-violet: var(--wa-color-violet-50);
  --wa-color-purple-key: 60;
-  --wa-color-pink-95: #f8effc /* oklch(96.287% 0.01965 315.67) */;
+  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
-  --wa-color-pink-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
+  --wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
-  --wa-color-pink-80: #edb8fa /* oklch(85.148% 0.10592 319.58) */;
+  --wa-color-gray-80: #c7cad4 /* oklch(83.966% 0.01424 272.66) */;
-  --wa-color-pink-70: #e38ef8 /* oklch(77.16% 0.16992 319.48) */;
+  --wa-color-gray-70: #a9afbe /* oklch(75.397% 0.0225 268.37) */;
-  --wa-color-pink-60: #c576db /* oklch(68.843% 0.16426 318.62) */;
+  --wa-color-gray-60: #8d95a8 /* oklch(66.968% 0.02959 267.4) */;
  --wa-color-pink-50: #a258b5 /* oklch(58.347% 0.15642 319.13) */;
  --wa-color-pink-40: #823b94 /* oklch(48.331% 0.15299 319.08) */;
  --wa-color-pink-30: #6d247e /* oklch(41.177% 0.1547 319.42) */;
  --wa-color-pink-20: #580a68 /* oklch(34.103% 0.15338 319.6) */;
  --wa-color-pink-10: #370047 /* oklch(24.984% 0.12212 316.48) */;
  --wa-color-pink-05: #240033 /* oklch(19.65% 0.09758 313.47) */;
  --wa-color-pink: var(--wa-color-pink-70);
  --wa-color-pink-key: 70;
  --wa-color-gray-95: #f1f2f5 /* oklch(96.124% 0.00414 271.37) */;
  --wa-color-gray-90: #e4e6eb /* oklch(92.484% 0.00709 268.54) */;
  --wa-color-gray-80: #c5cad5 /* oklch(83.843% 0.01625 266.26) */;
  --wa-color-gray-70: #a8afbf /* oklch(75.353% 0.02424 266.85) */;
  --wa-color-gray-60: #8c95aa /* oklch(66.963% 0.0328 267.07) */;
  --wa-color-gray-50: #6a7591 /* oklch(56.369% 0.04546 268.14) */;
-  --wa-color-gray-40: #4a597a /* oklch(46.526% 0.05715 265.38) */;
+  --wa-color-gray-40: #4b5977 /* oklch(46.454% 0.05212 265.05) */;
-  --wa-color-gray-30: #384565 /* oklch(39.365% 0.05713 266.86) */;
+  --wa-color-gray-30: #344566 /* oklch(39.129% 0.06051 263) */;
-  --wa-color-gray-20: #26314f /* oklch(31.829% 0.05593 267.86) */;
+  --wa-color-gray-20: #1a3356 /* oklch(32.021% 0.07012 257.11) */;
-  --wa-color-gray-10: #131c38 /* oklch(23.46% 0.0555 268.48) */;
+  --wa-color-gray-10: #0e1e35 /* oklch(23.442% 0.04969 257.55) */;
-  --wa-color-gray-05: #0a1127 /* oklch(18.485% 0.04617 268.36) */;
+  --wa-color-gray-05: #081220 /* oklch(18.072% 0.03272 256.72) */;
  --wa-color-gray: var(--wa-color-gray-40);
  --wa-color-gray-key: 40;
 }
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -2,117 +2,96 @@
 :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-95: #feeeee /* oklch(96.175% 0.01736 17.459) */;
-  --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
+  --wa-color-red-90: #fedede /* oklch(92.701% 0.03551 17.81) */;
-  --wa-color-red-80: #ffb8b4 /* oklch(84.753% 0.08313 22.598) */;
+  --wa-color-red-80: #fdb8b8 /* oklch(84.646% 0.08038 18.878) */;
-  --wa-color-red-70: #fd908e /* oklch(76.913% 0.13219 21.705) */;
+  --wa-color-red-70: #fa9292 /* oklch(76.951% 0.12587 20.376) */;
-  --wa-color-red-60: #f46766 /* oklch(68.945% 0.17423 23.179) */;
+  --wa-color-red-60: #ee6c6c /* oklch(68.861% 0.16125 22.227) */;
-  --wa-color-red-50: #df2f2e /* oklch(58.922% 0.21141 26.911) */;
+  --wa-color-red-50: #d43c3c /* oklch(58.269% 0.18916 25.263) */;
-  --wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
+  --wa-color-red-40: #ac1e1e /* oklch(48.229% 0.17712 27.066) */;
-  --wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
+  --wa-color-red-30: #640f0f /* oklch(32.787% 0.11797 26.73) */;
-  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
+  --wa-color-red-20: #631111 /* oklch(32.78% 0.11503 26.34) */;
-  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
+  --wa-color-red-10: #3b0d0d /* oklch(24.059% 0.07249 24.391) */;
-  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
+  --wa-color-red-05: #260606 /* oklch(18.371% 0.05502 24.325) */;
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;
-  --wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
+  --wa-color-yellow-95: #fef2c4 /* oklch(95.928% 0.0607 95.131) */;
-  --wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
+  --wa-color-yellow-90: #fde494 /* oklch(92.185% 0.10303 92.708) */;
-  --wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;
+  --wa-color-yellow-80: #fbc129 /* oklch(84.088% 0.16334 85.185) */;
-  --wa-color-yellow-70: #e9a010 /* oklch(75.825% 0.15689 75.537) */;
+  --wa-color-yellow-70: #f29c0b /* oklch(76.145% 0.1631 70.065) */;
-  --wa-color-yellow-60: #de7c00 /* oklch(68.073% 0.15991 59.827) */;
+  --wa-color-yellow-60: #db7e13 /* oklch(68.058% 0.15388 60.67) */;
-  --wa-color-yellow-50: #bc5908 /* oklch(57.654% 0.1491 50.241) */;
+  --wa-color-yellow-50: #af6005 /* oklch(56.918% 0.13324 58.984) */;
-  --wa-color-yellow-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
+  --wa-color-yellow-40: #904207 /* oklch(47.288% 0.12241 49.414) */;
-  --wa-color-yellow-30: #763104 /* oklch(40.324% 0.1093 46.564) */;
+  --wa-color-yellow-30: #713406 /* oklch(40.01% 0.10093 50.35) */;
-  --wa-color-yellow-20: #572301 /* oklch(32.677% 0.08796 47.926) */;
+  --wa-color-yellow-20: #532408 /* oklch(32.223% 0.07974 47.215) */;
-  --wa-color-yellow-10: #371300 /* oklch(24.001% 0.06559 47.77) */;
+  --wa-color-yellow-10: #321606 /* oklch(23.771% 0.05225 48.671) */;
-  --wa-color-yellow-05: #250a00 /* oklch(18.773% 0.0519 47.039) */;
+  --wa-color-yellow-05: #1f0c01 /* oklch(18.046% 0.04102 55.818) */;
-  --wa-color-yellow: var(--wa-color-yellow-60);
+  --wa-color-yellow: var(--wa-color-yellow-80);
  --wa-color-yellow-key: 60;
-  --wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
+  --wa-color-green-95: #e9f5ed /* oklch(95.897% 0.01651 156.91) */;
-  --wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;
+  --wa-color-green-90: #cfedd9 /* oklch(91.883% 0.04142 156.31) */;
-  --wa-color-green-80: #6ae095 /* oklch(81.924% 0.15151 153.52) */;
+  --wa-color-green-80: #a2d5b4 /* oklch(82.826% 0.07031 156.17) */;
-  --wa-color-green-70: #44c670 /* oklch(73.506% 0.16742 151) */;
+  --wa-color-green-70: #6cc08a /* oklch(73.992% 0.11416 154.35) */;
-  --wa-color-green-60: #21ab52 /* oklch(65.151% 0.17062 149.59) */;
+  --wa-color-green-60: #38a961 /* oklch(65.365% 0.14702 151.78) */;
-  --wa-color-green-50: #0d873f /* oklch(54.644% 0.14593 150.18) */;
+  --wa-color-green-50: #178640 /* oklch(54.51% 0.14175 149.98) */;
-  --wa-color-green-40: #166635 /* oklch(45.105% 0.10874 151.56) */;
+  --wa-color-green-40: #006823 /* oklch(45.073% 0.13335 147.17) */;
-  --wa-color-green-30: #115029 /* oklch(38.182% 0.09049 151.63) */;
+  --wa-color-green-30: #0d5026 /* oklch(38.028% 0.09504 150.7) */;
-  --wa-color-green-20: #0a3a1c /* oklch(30.854% 0.07315 151.48) */;
+  --wa-color-green-20: #0c391d /* oklch(30.614% 0.06954 152.08) */;
-  --wa-color-green-10: #04230f /* oklch(22.692% 0.05324 151.92) */;
+  --wa-color-green-10: #082213 /* oklch(22.658% 0.04352 155.31) */;
-  --wa-color-green-05: #021608 /* oklch(17.756% 0.04076 152.68) */;
+  --wa-color-green-05: #02140a /* oklch(17.084% 0.03423 159.06) */;
  --wa-color-green: var(--wa-color-green-60);
  --wa-color-green-key: 60;
-  --wa-color-cyan-95: #d8fafc /* oklch(96.149% 0.03524 200.93) */;
+  --wa-color-teal-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
-  --wa-color-cyan-90: #a3f2f7 /* oklch(91.187% 0.07744 200.93) */;
+  --wa-color-teal-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
-  --wa-color-cyan-80: #67dbe2 /* oklch(82.721% 0.1051 200.68) */;
+  --wa-color-teal-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
-  --wa-color-cyan-70: #29c0ca /* oklch(73.859% 0.11825 201.93) */;
+  --wa-color-teal-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
-  --wa-color-cyan-60: #0ca4ae /* oklch(65.523% 0.10997 202.61) */;
+  --wa-color-teal-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
-  --wa-color-cyan-50: #0c828c /* oklch(55.424% 0.09237 204.53) */;
+  --wa-color-teal-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
-  --wa-color-cyan-40: #0a626b /* oklch(45.428% 0.07504 206.17) */;
+  --wa-color-teal-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
-  --wa-color-cyan-30: #084d55 /* oklch(38.542% 0.06312 207.36) */;
+  --wa-color-teal-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
-  --wa-color-cyan-20: #06383f /* oklch(31.335% 0.05062 209.3) */;
+  --wa-color-teal-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
-  --wa-color-cyan-10: #002127 /* oklch(22.739% 0.03961 211.94) */;
+  --wa-color-teal-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
-  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
+  --wa-color-teal-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
-  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-teal: var(--wa-color-teal-70);
  --wa-color-cyan-key: 70;
-  --wa-color-blue-95: #e2f6ff /* oklch(96.112% 0.0243 226.47) */;
+  --wa-color-blue-95: #e5f4fe /* oklch(95.896% 0.02085 236.75) */;
-  --wa-color-blue-90: #c0ecff /* oklch(91.822% 0.0523 226) */;
+  --wa-color-blue-90: #c8ebfd /* oklch(92.061% 0.04406 230.21) */;
-  --wa-color-blue-80: #7fd4fc /* oklch(83.068% 0.09979 229.91) */;
+  --wa-color-blue-80: #80d4fc /* oklch(83.114% 0.09915 230.17) */;
-  --wa-color-blue-70: #48b9f4 /* oklch(74.644% 0.13162 235.42) */;
+  --wa-color-blue-70: #37bbf5 /* oklch(74.731% 0.13762 232.44) */;
-  --wa-color-blue-60: #1f9de2 /* oklch(66.419% 0.14398 240.02) */;
+  --wa-color-blue-60: #0d9ee0 /* oklch(66.354% 0.14388 237.59) */;
-  --wa-color-blue-50: #007bbc /* oklch(55.956% 0.1346 242.72) */;
+  --wa-color-blue-50: #027ab9 /* oklch(55.557% 0.13184 242.23) */;
-  --wa-color-blue-40: #005d93 /* oklch(46.121% 0.11438 244.28) */;
+  --wa-color-blue-40: #015d8d /* oklch(45.762% 0.10698 241.38) */;
-  --wa-color-blue-30: #004975 /* oklch(39.093% 0.09705 244.33) */;
+  --wa-color-blue-30: #024970 /* oklch(38.805% 0.0903 241.59) */;
-  --wa-color-blue-20: #003558 /* oklch(31.8% 0.08026 245.13) */;
+  --wa-color-blue-20: #04354f /* oklch(31.306% 0.06703 238.73) */;
-  --wa-color-blue-10: #001f36 /* oklch(23.093% 0.05763 244.59) */;
+  --wa-color-blue-10: #05202f /* oklch(23.154% 0.04349 236.83) */;
-  --wa-color-blue-05: #001325 /* oklch(18.113% 0.04675 246.17) */;
+  --wa-color-blue-05: #04121b /* oklch(17.393% 0.0282 236.81) */;
  --wa-color-blue: var(--wa-color-blue-60);
  --wa-color-blue-key: 60;
-  --wa-color-indigo-95: #eff2ff /* oklch(96.265% 0.01769 275.64) */;
+  --wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
-  --wa-color-indigo-90: #e0e5ff /* oklch(92.602% 0.03569 277.03) */;
+  --wa-color-indigo-90: #dee5fd /* oklch(92.388% 0.03348 272.78) */;
-  --wa-color-indigo-80: #bec7ff /* oklch(84.198% 0.07895 277.45) */;
+  --wa-color-indigo-80: #bec8f2 /* oklch(83.901% 0.05981 274.54) */;
-  --wa-color-indigo-70: #9da9fc /* oklch(75.797% 0.11994 276.85) */;
+  --wa-color-indigo-70: #9dabf0 /* oklch(75.639% 0.10065 274.93) */;
-  --wa-color-indigo-60: #808bf8 /* oklch(67.752% 0.15983 276.9) */;
+  --wa-color-indigo-60: #818cf7 /* oklch(67.953% 0.15693 276.94) */;
-  --wa-color-indigo-50: #6163f0 /* oklch(57.814% 0.20686 277.14) */;
+  --wa-color-indigo-50: #6063eb /* oklch(57.366% 0.20061 277.06) */;
-  --wa-color-indigo-40: #4a41d4 /* oklch(48.413% 0.21583 277.35) */;
+  --wa-color-indigo-40: #4941d3 /* oklch(48.251% 0.21482 277.09) */;
-  --wa-color-indigo-30: #3b369d /* oklch(40.562% 0.16149 278.54) */;
+  --wa-color-indigo-30: #3930ad /* oklch(40.969% 0.18954 277.17) */;
-  --wa-color-indigo-20: #2b2872 /* oklch(32.937% 0.12339 278.99) */;
+  --wa-color-indigo-20: #29247a /* oklch(32.82% 0.14032 277.91) */;
-  --wa-color-indigo-10: #191748 /* oklch(24.174% 0.08853 279.28) */;
+  --wa-color-indigo-10: #191843 /* oklch(23.918% 0.07895 279.64) */;
-  --wa-color-indigo-05: #0e0d31 /* oklch(18.772% 0.06933 278.6) */;
+  --wa-color-indigo-05: #0f0e26 /* oklch(18.064% 0.04799 282.35) */;
  --wa-color-indigo: var(--wa-color-indigo-40);
  --wa-color-indigo-key: 40;
-  --wa-color-purple-95: #f6f0ff /* oklch(96.412% 0.02086 304.04) */;
+  --wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
-  --wa-color-purple-90: #eee0ff /* oklch(92.72% 0.04406 305.89) */;
+  --wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
-  --wa-color-purple-80: #dcbdff /* oklch(84.694% 0.09583 305.85) */;
+  --wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
-  --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
+  --wa-color-violet-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
-  --wa-color-purple-60: #b874ff /* oklch(69.085% 0.2024 304.19) */;
+  --wa-color-violet-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
-  --wa-color-purple-50: #9f46ee /* oklch(59.304% 0.23941 304.1) */;
+  --wa-color-violet-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
-  --wa-color-purple-40: #7e2ac2 /* oklch(49.181% 0.21892 304.24) */;
+  --wa-color-violet-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
-  --wa-color-purple-30: #632198 /* oklch(41.448% 0.18071 304.64) */;
+  --wa-color-violet-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
-  --wa-color-purple-20: #4a1574 /* oklch(33.839% 0.15043 304.56) */;
+  --wa-color-violet-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
-  --wa-color-purple-10: #2e094b /* oklch(24.855% 0.11212 304.52) */;
+  --wa-color-violet-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
-  --wa-color-purple-05: #1e0433 /* oklch(19.319% 0.0877 304.85) */;
+  --wa-color-violet-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-violet: var(--wa-color-violet-50);
  --wa-color-purple-key: 50;
  --wa-color-pink-95: #fdeff7 /* oklch(96.539% 0.01831 342.02) */;
  --wa-color-pink-90: #fcdcee /* oklch(92.607% 0.04228 343.07) */;
  --wa-color-pink-80: #fab6db /* oklch(84.992% 0.09131 345.4) */;
  --wa-color-pink-70: #f78cc4 /* oklch(77.072% 0.14455 348.37) */;
  --wa-color-pink-60: #f160a9 /* oklch(69.418% 0.19234 351.99) */;
  --wa-color-pink-50: #db2878 /* oklch(59.255% 0.21755 0.28257) */;
  --wa-color-pink-40: #ab1854 /* oklch(48.723% 0.18199 3.8244) */;
  --wa-color-pink-30: #851844 /* oklch(41.188% 0.14622 2.4184) */;
  --wa-color-pink-20: #640e30 /* oklch(33.442% 0.12022 3.3857) */;
  --wa-color-pink-10: #43001a /* oklch(24.613% 0.09885 5.3211) */;
  --wa-color-pink-05: #2f000b /* oklch(19.457% 0.07776 12.211) */;
  --wa-color-pink: var(--wa-color-pink-50);
  --wa-color-pink-key: 50;
  --wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
  --wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
@@ -126,5 +105,4 @@
  --wa-color-gray-10: #1d1d20 /* oklch(23.201% 0.00571 285.95) */;
  --wa-color-gray-05: #101113 /* oklch(17.739% 0.00442 264.46) */;
  --wa-color-gray: var(--wa-color-gray-40);
  --wa-color-gray-key: 40;
 }
--- a/src/styles/color/default.css
+++ b/src/styles/color/default.css
@@ -2,117 +2,96 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-default {
-  --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
+  --wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
-  --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
+  --wa-color-red-90: #ffdddc /* oklch(92.547% 0.03785 19.865) */;
-  --wa-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
+  --wa-color-red-80: #ffb7b6 /* oklch(84.626% 0.08407 19.872) */;
-  --wa-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
+  --wa-color-red-70: #fc9090 /* oklch(76.834% 0.13083 20.537) */;
-  --wa-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
+  --wa-color-red-60: #f2676c /* oklch(68.768% 0.17146 20.596) */;
-  --wa-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
+  --wa-color-red-50: #de2d44 /* oklch(58.887% 0.20998 20.414) */;
-  --wa-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
+  --wa-color-red-40: #b11036 /* oklch(48.766% 0.18763 17.443) */;
-  --wa-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
+  --wa-color-red-30: #861a2f /* oklch(40.968% 0.14194 15.902) */;
-  --wa-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
+  --wa-color-red-20: #641122 /* oklch(33.29% 0.11505 15.196) */;
-  --wa-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
+  --wa-color-red-10: #400712 /* oklch(24.506% 0.08542 15.881) */;
-  --wa-color-red-05: #2a040b /* oklch(19.016% 0.06394 13.71) */;
+  --wa-color-red-05: #2a030a /* oklch(18.798% 0.06593 14.104) */;
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;
-  --wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
+  --wa-color-yellow-95: #fdf3ba /* oklch(95.838% 0.07362 99.275) */;
-  --wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
+  --wa-color-yellow-90: #fee590 /* oklch(92.407% 0.10827 93.577) */;
-  --wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
+  --wa-color-yellow-80: #fcc041 /* oklch(84.136% 0.1524 82.087) */;
-  --wa-color-yellow-70: #ef9d00 /* oklch(75.949% 0.16251 72.13) */;
+  --wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
-  --wa-color-yellow-60: #da7e00 /* oklch(67.883% 0.15587 62.246) */;
+  --wa-color-yellow-60: #e07b00 /* oklch(68.175% 0.16203 58.675) */;
-  --wa-color-yellow-50: #b45f04 /* oklch(57.449% 0.13836 56.585) */;
+  --wa-color-yellow-50: #bb5a00 /* oklch(57.639% 0.14858 51.823) */;
-  --wa-color-yellow-40: #8c4602 /* oklch(47.319% 0.11666 54.663) */;
+  --wa-color-yellow-40: #924200 /* oklch(47.573% 0.12584 49.96) */;
-  --wa-color-yellow-30: #6f3601 /* oklch(40.012% 0.09892 54.555) */;
+  --wa-color-yellow-30: #743200 /* oklch(40.128% 0.10738 49.167) */;
-  --wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
+  --wa-color-yellow-20: #572300 /* oklch(32.668% 0.08836 48.446) */;
-  --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+  --wa-color-yellow-10: #361300 /* oklch(23.81% 0.06438 48.467) */;
-  --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
+  --wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
-  --wa-color-yellow: var(--wa-color-yellow-80);
+  --wa-color-yellow: var(--wa-color-yellow-70);
  --wa-color-yellow-key: 80;
-  --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
+  --wa-color-green-95: #e2f9e2 /* oklch(95.91% 0.03884 145.26) */;
  --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
-  --wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
+  --wa-color-green-80: #92da97 /* oklch(82.37% 0.11765 146.06) */;
  --wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
  --wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
-  --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
+  --wa-color-green-50: #008825 /* oklch(54.493% 0.16976 145.33) */;
-  --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
+  --wa-color-green-40: #006800 /* oklch(44.821% 0.15252 142.5) */;
-  --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
+  --wa-color-green-30: #005300 /* oklch(38.319% 0.13039 142.5) */;
-  --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
+  --wa-color-green-20: #003c00 /* oklch(30.861% 0.10501 142.5) */;
-  --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
+  --wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
-  --wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
+  --wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
  --wa-color-green: var(--wa-color-green-60);
  --wa-color-green-key: 60;
-  --wa-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
+  --wa-color-teal-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
-  --wa-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
+  --wa-color-teal-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
-  --wa-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
+  --wa-color-teal-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
-  --wa-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
+  --wa-color-teal-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
-  --wa-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
+  --wa-color-teal-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
-  --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
+  --wa-color-teal-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
-  --wa-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
+  --wa-color-teal-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
-  --wa-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
+  --wa-color-teal-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
-  --wa-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
+  --wa-color-teal-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
-  --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
+  --wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
-  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
+  --wa-color-teal-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
-  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-teal: var(--wa-color-teal-70);
  --wa-color-cyan-key: 70;
-  --wa-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
+  --wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
-  --wa-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
+  --wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
-  --wa-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
+  --wa-color-blue-80: #a6ccff /* oklch(83.582% 0.08269 255.9) */;
-  --wa-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
+  --wa-color-blue-70: #77b1ff /* oklch(75.268% 0.12855 256.14) */;
-  --wa-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
+  --wa-color-blue-60: #4895fd /* oklch(67.184% 0.17212 256.8) */;
-  --wa-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
+  --wa-color-blue-50: #0070ef /* oklch(56.997% 0.20953 257.84) */;
-  --wa-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
+  --wa-color-blue-40: #0055b8 /* oklch(46.934% 0.17173 257.73) */;
-  --wa-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
+  --wa-color-blue-30: #004390 /* oklch(39.638% 0.1408 257.02) */;
-  --wa-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
+  --wa-color-blue-20: #00306c /* oklch(32.102% 0.11523 257.27) */;
-  --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
+  --wa-color-blue-10: #001c45 /* oklch(23.545% 0.08493 257.39) */;
-  --wa-color-blue-05: #000f35 /* oklch(18.565% 0.07904 260.75) */;
+  --wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
  --wa-color-blue: var(--wa-color-blue-50);
  --wa-color-blue-key: 50;
-  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
+  --wa-color-indigo-95: #f0f2fe /* oklch(96.311% 0.01617 278.51) */;
-  --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
+  --wa-color-indigo-90: #e2e4fc /* oklch(92.459% 0.03255 281.95) */;
-  --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
+  --wa-color-indigo-80: #c2c6f8 /* oklch(84.027% 0.06987 281.2) */;
-  --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
+  --wa-color-indigo-70: #a5a9f2 /* oklch(75.915% 0.10451 281.18) */;
-  --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
+  --wa-color-indigo-60: #8a8beb /* oklch(67.735% 0.14003 281.54) */;
-  --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
+  --wa-color-indigo-50: #6b65e2 /* oklch(57.839% 0.18419 281.11) */;
-  --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
+  --wa-color-indigo-40: #5246c1 /* oklch(48.113% 0.18471 281.3) */;
-  --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
+  --wa-color-indigo-30: #412eaa /* oklch(41.007% 0.18636 281.32) */;
-  --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
+  --wa-color-indigo-20: #321393 /* oklch(34.125% 0.1858 281.27) */;
-  --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
+  --wa-color-indigo-10: #1c006a /* oklch(25.437% 0.15565 278.46) */;
-  --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
+  --wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
-  --wa-color-indigo: var(--wa-color-indigo-50);
+  --wa-color-indigo: var(--wa-color-indigo-40);
  --wa-color-indigo-key: 50;
-  --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
+  --wa-color-violet-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
-  --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
+  --wa-color-violet-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
-  --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
+  --wa-color-violet-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
-  --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
+  --wa-color-violet-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
-  --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
+  --wa-color-violet-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
-  --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
+  --wa-color-violet-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
-  --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
+  --wa-color-violet-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
-  --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
+  --wa-color-violet-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
-  --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
+  --wa-color-violet-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
-  --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
+  --wa-color-violet-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
-  --wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
+  --wa-color-violet-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-violet: var(--wa-color-violet-50);
  --wa-color-purple-key: 50;
  --wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
  --wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
  --wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
  --wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
  --wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
  --wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
  --wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
  --wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
  --wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
  --wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
  --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
  --wa-color-pink: var(--wa-color-pink-50);
  --wa-color-pink-key: 50;
  --wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
  --wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
@@ -126,5 +105,4 @@
  --wa-color-gray-10: #1b1d26 /* oklch(23.277% 0.01762 275.14) */;
  --wa-color-gray-05: #101219 /* oklch(18.342% 0.01472 272.42) */;
  --wa-color-gray: var(--wa-color-gray-40);
  --wa-color-gray-key: 40;
 }
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -2,129 +2,107 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-elegant {
-  --wa-color-red-95: #feeeef /* oklch(96.203% 0.01739 13.095) */;
+  --wa-color-red-95: #fdeeef /* oklch(96.122% 0.01629 12.781) */;
-  --wa-color-red-90: #fbdfe1 /* oklch(92.712% 0.03103 12.802) */;
+  --wa-color-red-90: #fcdfe0 /* oklch(92.771% 0.0321 15.37) */;
-  --wa-color-red-80: #f2bcc0 /* oklch(84.468% 0.06249 13.512) */;
+  --wa-color-red-80: #f8b9bc /* oklch(84.416% 0.07319 15.56) */;
-  --wa-color-red-70: #e79aa1 /* oklch(76.427% 0.09275 13.523) */;
+  --wa-color-red-70: #f0969c /* oklch(76.649% 0.10862 15.608) */;
-  --wa-color-red-60: #db7781 /* oklch(68.361% 0.12461 14.576) */;
+  --wa-color-red-60: #e3727d /* oklch(68.562% 0.1405 15.424) */;
-  --wa-color-red-50: #c64b5d /* oklch(58.247% 0.15692 14.667) */;
+  --wa-color-red-50: #cc465a /* oklch(58.534% 0.16911 15.341) */;
  --wa-color-red-40: #ac1d3d /* oklch(48.628% 0.17601 15.401) */;
-  --wa-color-red-30: #8f002b /* oklch(41.286% 0.16513 15.826) */;
+  --wa-color-red-30: #8f012c /* oklch(41.346% 0.16471 15.45) */;
-  --wa-color-red-20: #6b001f /* oklch(33.545% 0.13412 15.162) */;
+  --wa-color-red-20: #6b001c /* oklch(33.484% 0.13403 16.992) */;
-  --wa-color-red-10: #430212 /* oklch(24.607% 0.09481 14.336) */;
+  --wa-color-red-10: #44000d /* oklch(24.5% 0.09818 18.249) */;
-  --wa-color-red-05: #2d0109 /* oklch(19.102% 0.07343 14.851) */;
+  --wa-color-red-05: #2e0006 /* oklch(19.077% 0.07648 18.657) */;
  --wa-color-red: var(--wa-color-red-40);
  --wa-color-red-key: 40;
-  --wa-color-yellow-95: #f7f4da /* oklch(96.266% 0.03422 101.63) */;
+  --wa-color-yellow-95: #f5f2e5 /* oklch(95.994% 0.01748 96.105) */;
-  --wa-color-yellow-90: #ede7c3 /* oklch(92.349% 0.04769 99.435) */;
+  --wa-color-yellow-90: #ece6cc /* oklch(92.281% 0.03499 96.315) */;
-  --wa-color-yellow-80: #d8ca96 /* oklch(83.793% 0.06999 94.829) */;
+  --wa-color-yellow-80: #dac992 /* oklch(83.686% 0.07427 92.946) */;
-  --wa-color-yellow-70: #c5ac6b /* oklch(75.167% 0.08892 89.16) */;
+  --wa-color-yellow-70: #c9ac5c /* oklch(75.33% 0.10529 89.848) */;
-  --wa-color-yellow-60: #b39043 /* oklch(67.06% 0.10423 84.751) */;
+  --wa-color-yellow-60: #b98f27 /* oklch(67.248% 0.12518 85.119) */;
  --wa-color-yellow-50: #9b6d09 /* oklch(56.774% 0.11557 78.692) */;
-  --wa-color-yellow-40: #7c4f00 /* oklch(46.714% 0.10011 71.858) */;
+  --wa-color-yellow-40: #785007 /* oklch(46.422% 0.09514 74.644) */;
-  --wa-color-yellow-30: #623e00 /* oklch(39.642% 0.08465 72.511) */;
+  --wa-color-yellow-30: #613e06 /* oklch(39.54% 0.08123 71.804) */;
-  --wa-color-yellow-20: #482d04 /* oklch(32.274% 0.06572 71.644) */;
+  --wa-color-yellow-20: #492c05 /* oklch(32.206% 0.06602 68.329) */;
-  --wa-color-yellow-10: #2c1a02 /* oklch(23.612% 0.04739 71.633) */;
+  --wa-color-yellow-10: #2b1a02 /* oklch(23.457% 0.04659 73.352) */;
-  --wa-color-yellow-05: #1d0f01 /* oklch(18.42% 0.03735 69.287) */;
+  --wa-color-yellow-05: #191008 /* oklch(18.243% 0.02161 62.915) */;
-  --wa-color-yellow: var(--wa-color-yellow-50);
+  --wa-color-yellow: var(--wa-color-yellow-60);
  --wa-color-yellow-key: 50;
-  --wa-color-green-95: #eaf6ef /* oklch(96.224% 0.01568 160.63) */;
+  --wa-color-green-95: #ecf4f1 /* oklch(96.029% 0.00935 171.8) */;
-  --wa-color-green-90: #d6ebe0 /* oklch(92.147% 0.02666 163.16) */;
+  --wa-color-green-90: #dae9e3 /* oklch(92.11% 0.01786 170.06) */;
-  --wa-color-green-80: #b0d2c0 /* oklch(83.388% 0.04396 162.23) */;
+  --wa-color-green-80: #b0d1c4 /* oklch(83.284% 0.03952 169.54) */;
-  --wa-color-green-70: #89b9a0 /* oklch(74.448% 0.06245 161.7) */;
+  --wa-color-green-70: #88b9a6 /* oklch(74.553% 0.05874 168.82) */;
-  --wa-color-green-60: #66a184 /* oklch(65.998% 0.07584 162.02) */;
+  --wa-color-green-60: #5fa288 /* oklch(65.987% 0.07948 167.12) */;
-  --wa-color-green-50: #378361 /* oklch(55.235% 0.09296 161.66) */;
+  --wa-color-green-50: #2d8462 /* oklch(55.19% 0.09885 163.66) */;
-  --wa-color-green-40: #036645 /* oklch(45.159% 0.0975 162.35) */;
+  --wa-color-green-40: #00663e /* oklch(44.949% 0.10492 158.13) */;
-  --wa-color-green-30: #005035 /* oklch(38.128% 0.08321 162.33) */;
+  --wa-color-green-30: #005031 /* oklch(38.025% 0.08722 159.15) */;
-  --wa-color-green-20: #003a27 /* oklch(30.855% 0.06552 164.26) */;
+  --wa-color-green-20: #003b24 /* oklch(31.092% 0.0701 160.21) */;
-  --wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
+  --wa-color-green-10: #002316 /* oklch(22.679% 0.04824 164.14) */;
-  --wa-color-green-05: #00160e /* oklch(17.779% 0.03599 168.03) */;
+  --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
  --wa-color-green: var(--wa-color-green-40);
  --wa-color-green-key: 40;
-  --wa-color-cyan-95: #ecf3f6 /* oklch(95.973% 0.00849 225.08) */;
+  --wa-color-teal-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
-  --wa-color-cyan-90: #dae8ee /* oklch(92.227% 0.01706 225.2) */;
+  --wa-color-teal-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
-  --wa-color-cyan-80: #aecfdc /* oklch(83.456% 0.0396 223.66) */;
+  --wa-color-teal-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
-  --wa-color-cyan-70: #82b7c9 /* oklch(74.873% 0.06114 221.03) */;
+  --wa-color-teal-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
-  --wa-color-cyan-60: #549fb5 /* oklch(66.279% 0.08114 219.25) */;
+  --wa-color-teal-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
-  --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
+  --wa-color-teal-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
-  --wa-color-cyan-40: #006274 /* oklch(45.709% 0.0812 216.04) */;
+  --wa-color-teal-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
-  --wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
+  --wa-color-teal-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
-  --wa-color-cyan-20: #023841 /* oklch(31.326% 0.05351 212.43) */;
+  --wa-color-teal-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
-  --wa-color-cyan-10: #012126 /* oklch(22.736% 0.03817 209.61) */;
+  --wa-color-teal-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
-  --wa-color-cyan-05: #011519 /* oklch(18.019% 0.02954 211.13) */;
+  --wa-color-teal-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
-  --wa-color-cyan: var(--wa-color-cyan-50);
+  --wa-color-teal: var(--wa-color-teal-50);
  --wa-color-cyan-key: 50;
-  --wa-color-blue-95: #ebf4fb /* oklch(96.242% 0.01344 240.95) */;
+  --wa-color-blue-95: #ebf3fa /* oklch(96.015% 0.01271 244.25) */;
  --wa-color-blue-90: #d8e8f5 /* oklch(92.295% 0.02463 242.35) */;
-  --wa-color-blue-80: #b0cee8 /* oklch(83.785% 0.0487 244.56) */;
+  --wa-color-blue-80: #accee9 /* oklch(83.556% 0.05253 242.25) */;
-  --wa-color-blue-70: #88b3dc /* oklch(75.074% 0.0753 247.65) */;
+  --wa-color-blue-70: #81b5dd /* oklch(75.142% 0.07972 242.18) */;
-  --wa-color-blue-60: #6299ce /* oklch(66.642% 0.09844 248.63) */;
+  --wa-color-blue-60: #559bd2 /* oklch(66.672% 0.10847 244.18) */;
-  --wa-color-blue-50: #3578bc /* oklch(56.244% 0.12562 251.34) */;
+  --wa-color-blue-50: #1c7ac3 /* oklch(56.462% 0.13979 247.89) */;
-  --wa-color-blue-40: #0159a5 /* oklch(46.385% 0.14173 252.83) */;
+  --wa-color-blue-40: #005aa0 /* oklch(46.253% 0.13415 250.9) */;
-  --wa-color-blue-30: #00438d /* oklch(39.39% 0.13669 256.43) */;
+  --wa-color-blue-30: #00477e /* oklch(39.201% 0.11116 250.07) */;
-  --wa-color-blue-20: #00306d /* oklch(32.191% 0.11667 257.51) */;
+  --wa-color-blue-20: #00345d /* oklch(31.892% 0.08838 249.18) */;
-  --wa-color-blue-10: #001d43 /* oklch(23.62% 0.08036 255.9) */;
+  --wa-color-blue-10: #001f37 /* oklch(23.169% 0.0591 245.63) */;
-  --wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
+  --wa-color-blue-05: #001221 /* oklch(17.475% 0.04178 242.4) */;
-  --wa-color-blue: var(--wa-color-blue-40);
+  --wa-color-blue: var(--wa-color-blue-50);
  --wa-color-blue-key: 40;
-  --wa-color-indigo-95: #f2f3fb /* oklch(96.568% 0.01071 280.48) */;
+  --wa-color-indigo-95: #f1f1fa /* oklch(96.073% 0.01199 286.17) */;
-  --wa-color-indigo-90: #e1e4f7 /* oklch(92.225% 0.02593 278.72) */;
+  --wa-color-indigo-90: #e4e4f6 /* oklch(92.422% 0.02428 285.92) */;
-  --wa-color-indigo-80: #c2c8f0 /* oklch(84.125% 0.05619 278.41) */;
+  --wa-color-indigo-80: #c6c7eb /* oklch(84.051% 0.05002 284.01) */;
-  --wa-color-indigo-70: #a2abe9 /* oklch(75.691% 0.08969 277.64) */;
+  --wa-color-indigo-70: #a9aae1 /* oklch(75.682% 0.07863 283.54) */;
-  --wa-color-indigo-60: #838fe0 /* oklch(67.424% 0.12044 276.26) */;
+  --wa-color-indigo-60: #8d8ed7 /* oklch(67.514% 0.10716 282.54) */;
-  --wa-color-indigo-50: #616cd2 /* oklch(57.327% 0.15517 275.74) */;
+  --wa-color-indigo-50: #696ccb /* oklch(57.448% 0.14365 279.49) */;
-  --wa-color-indigo-40: #444bbe /* oklch(47.719% 0.17747 274.78) */;
+  --wa-color-indigo-40: #4649bf /* oklch(47.579% 0.1808 275.97) */;
-  --wa-color-indigo-30: #3235a6 /* oklch(40.598% 0.17674 274.08) */;
+  --wa-color-indigo-30: #36389c /* oklch(40.459% 0.15877 275.79) */;
-  --wa-color-indigo-20: #222581 /* oklch(33.204% 0.15044 273.22) */;
+  --wa-color-indigo-20: #272972 /* oklch(32.817% 0.12297 276.06) */;
-  --wa-color-indigo-10: #121650 /* oklch(24.243% 0.10418 272.65) */;
+  --wa-color-indigo-10: #171844 /* oklch(23.835% 0.08107 277.33) */;
-  --wa-color-indigo-05: #090c39 /* oklch(19.042% 0.08527 272.11) */;
+  --wa-color-indigo-05: #0d0e27 /* oklch(17.951% 0.0503 278.32) */;
  --wa-color-indigo: var(--wa-color-indigo-40);
  --wa-color-indigo-key: 40;
-  --wa-color-purple-95: #f6f2f8 /* oklch(96.593% 0.00898 314.78) */;
+  --wa-color-violet-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
-  --wa-color-purple-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
+  --wa-color-violet-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
-  --wa-color-purple-80: #dac1e8 /* oklch(84.417% 0.05975 313.48) */;
+  --wa-color-violet-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
-  --wa-color-purple-70: #c4a1e0 /* oklch(76.209% 0.09582 309.5) */;
+  --wa-color-violet-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
-  --wa-color-purple-60: #ad82d8 /* oklch(68.129% 0.13065 306.24) */;
+  --wa-color-violet-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
-  --wa-color-purple-50: #8e5dcc /* oklch(58.178% 0.16754 301.8) */;
+  --wa-color-violet-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
-  --wa-color-purple-40: #7039ba /* oklch(48.506% 0.19176 298.45) */;
+  --wa-color-violet-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
-  --wa-color-purple-30: #5925a1 /* oklch(41.419% 0.1844 296.38) */;
+  --wa-color-violet-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
-  --wa-color-purple-20: #3f1d77 /* oklch(33.628% 0.14302 294.7) */;
+  --wa-color-violet-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
-  --wa-color-purple-10: #241443 /* oklch(24.289% 0.08468 295) */;
+  --wa-color-violet-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
-  --wa-color-purple-05: #160b2e /* oklch(18.938% 0.06685 293.46) */;
+  --wa-color-violet-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
-  --wa-color-purple: var(--wa-color-purple-40);
+  --wa-color-violet: var(--wa-color-violet-40);
  --wa-color-purple-key: 40;
  --wa-color-pink-95: #faf0f7 /* oklch(96.491% 0.0141 336.14) */;
  --wa-color-pink-90: #f4e0ed /* oklch(92.653% 0.0277 338.6) */;
  --wa-color-pink-80: #e7bedb /* oklch(84.585% 0.06022 336.84) */;
  --wa-color-pink-70: #d89cca /* oklch(76.426% 0.09327 335.1) */;
  --wa-color-pink-60: #c87bba /* oklch(68.507% 0.12525 333.74) */;
  --wa-color-pink-50: #b051a6 /* oklch(58.396% 0.16195 331.59) */;
  --wa-color-pink-40: #972592 /* oklch(48.91% 0.19103 329.96) */;
  --wa-color-pink-30: #7f007d /* oklch(41.721% 0.19096 329.18) */;
  --wa-color-pink-20: #5d095a /* oklch(33.889% 0.1448 329.91) */;
  --wa-color-pink-10: #3a0338 /* oklch(24.635% 0.10621 329.91) */;
  --wa-color-pink-05: #280126 /* oklch(19.445% 0.08514 330.49) */;
  --wa-color-pink: var(--wa-color-pink-40);
  --wa-color-pink-key: 40;
  --wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
-  --wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
+  --wa-color-gray-90: #e6e5e8 /* oklch(92.354% 0.00415 301.42) */;
-  --wa-color-gray-80: #c9c9d0 /* oklch(83.798% 0.00965 286.19) */;
+  --wa-color-gray-80: #cbc8ce /* oklch(83.695% 0.00885 308.34) */;
-  --wa-color-gray-70: #adaeb9 /* oklch(75.343% 0.01566 281.86) */;
+  --wa-color-gray-70: #b1adb6 /* oklch(75.367% 0.01345 305.97) */;
-  --wa-color-gray-60: #9294a2 /* oklch(66.945% 0.02068 279.35) */;
+  --wa-color-gray-60: #98939f /* oklch(67.134% 0.01834 304.67) */;
-  --wa-color-gray-50: #727486 /* oklch(56.356% 0.02776 280.45) */;
+  --wa-color-gray-50: #7a7382 /* oklch(56.69% 0.0242 306.59) */;
-  --wa-color-gray-40: #55586b /* oklch(46.492% 0.03098 278.07) */;
+  --wa-color-gray-40: #5d5568 /* oklch(46.422% 0.03185 304.29) */;
-  --wa-color-gray-30: #424456 /* oklch(39.204% 0.03051 279.92) */;
+  --wa-color-gray-30: #494352 /* oklch(39.46% 0.02608 303.4) */;
-  --wa-color-gray-20: #30323f /* oklch(32.064% 0.02327 278.14) */;
+  --wa-color-gray-20: #35313c /* oklch(32.176% 0.01998 301.84) */;
-  --wa-color-gray-10: #1c1d25 /* oklch(23.329% 0.01544 279.52) */;
+  --wa-color-gray-10: #1f1c23 /* oklch(23.288% 0.01397 304.73) */;
-  --wa-color-gray-05: #111217 /* oklch(18.343% 0.01033 276.41) */;
+  --wa-color-gray-05: #131115 /* oklch(18.185% 0.00865 307.93) */;
  --wa-color-gray: var(--wa-color-gray-40);
  --wa-color-gray-key: 40;
 }
--- a/src/styles/color/mild.css
+++ b/src/styles/color/mild.css
@@ -14,7 +14,6 @@
  --wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
  --wa-color-red-05: #2f0001 /* oklch(19.191% 0.07829 27.331) */;
  --wa-color-red: var(--wa-color-red-40);
  --wa-color-red-key: 40;
  --wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
  --wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
@@ -28,91 +27,71 @@
  --wa-color-yellow-10: #251d00 /* oklch(23.339% 0.04787 94.382) */;
  --wa-color-yellow-05: #171200 /* oklch(18.295% 0.03771 96.891) */;
  --wa-color-yellow: var(--wa-color-yellow-80);
  --wa-color-yellow-key: 80;
-  --wa-color-green-95: #dffbda /* oklch(95.911% 0.05253 140.9) */;
+  --wa-color-green-95: #e1f9e1 /* oklch(95.814% 0.04053 145.25) */;
-  --wa-color-green-90: #c1f2be /* oklch(91.363% 0.08611 143.36) */;
+  --wa-color-green-90: #bff2c0 /* oklch(91.282% 0.08527 145.33) */;
-  --wa-color-green-80: #a1d7a0 /* oklch(82.74% 0.09423 144.22) */;
+  --wa-color-green-80: #9fd7a1 /* oklch(82.641% 0.09444 145.54) */;
-  --wa-color-green-70: #87bb87 /* oklch(74.177% 0.09187 144.58) */;
+  --wa-color-green-70: #86bc88 /* oklch(74.373% 0.09308 145.46) */;
-  --wa-color-green-60: #6ea16f /* oklch(65.944% 0.09116 144.91) */;
+  --wa-color-green-60: #6ca170 /* oklch(65.848% 0.09138 146.27) */;
-  --wa-color-green-50: #4f8051 /* oklch(55.201% 0.08939 145.16) */;
+  --wa-color-green-50: #4e8153 /* oklch(55.447% 0.08949 146.53) */;
-  --wa-color-green-40: #336437 /* oklch(45.626% 0.08945 145.65) */;
+  --wa-color-green-40: #336339 /* oklch(45.387% 0.08557 146.75) */;
-  --wa-color-green-30: #1f5026 /* oklch(38.6% 0.08722 146.45) */;
+  --wa-color-green-30: #224e29 /* oklch(38.199% 0.07889 147.22) */;
-  --wa-color-green-20: #073b14 /* oklch(30.947% 0.0845 147.2) */;
+  --wa-color-green-20: #123a1b /* oklch(31.105% 0.0705 148.25) */;
-  --wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
+  --wa-color-green-10: #01230a /* oklch(22.432% 0.06139 149.06) */;
-  --wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
+  --wa-color-green-05: #001701 /* oklch(17.759% 0.05792 143.81) */;
  --wa-color-green: var(--wa-color-green-80);
  --wa-color-green-key: 80;
-  --wa-color-cyan-95: #ccfaff /* oklch(95.468% 0.04738 204.53) */;
+  --wa-color-teal-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
-  --wa-color-cyan-90: #b4efff /* oklch(91.73% 0.06334 216.28) */;
+  --wa-color-teal-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
-  --wa-color-cyan-80: #8ed4e9 /* oklch(83.085% 0.07588 218.68) */;
+  --wa-color-teal-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
-  --wa-color-cyan-70: #6bbad0 /* oklch(74.634% 0.08383 217.83) */;
+  --wa-color-teal-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
-  --wa-color-cyan-60: #4ca0b6 /* oklch(66.234% 0.08708 217.43) */;
+  --wa-color-teal-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
-  --wa-color-cyan-50: #238094 /* oklch(55.617% 0.08818 215.68) */;
+  --wa-color-teal-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
-  --wa-color-cyan-40: #006274 /* oklch(45.709% 0.0812 216.04) */;
+  --wa-color-teal-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
-  --wa-color-cyan-30: #004c5c /* oklch(38.451% 0.06912 218.07) */;
+  --wa-color-teal-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
-  --wa-color-cyan-20: #003845 /* oklch(31.48% 0.05692 218.99) */;
+  --wa-color-teal-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
-  --wa-color-cyan-10: #00212a /* oklch(22.908% 0.04161 219.65) */;
+  --wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
-  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
+  --wa-color-teal-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
-  --wa-color-cyan: var(--wa-color-cyan-50);
+  --wa-color-teal: var(--wa-color-teal-40);
  --wa-color-cyan-key: 50;
-  --wa-color-blue-95: #edf3ff /* oklch(96.312% 0.01733 264.49) */;
+  --wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
-  --wa-color-blue-90: #d8e7ff /* oklch(92.413% 0.03649 259.81) */;
+  --wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
-  --wa-color-blue-80: #a9cdfd /* oklch(83.898% 0.07789 255.74) */;
+  --wa-color-blue-80: #b5cced /* oklch(83.888% 0.05268 257.37) */;
-  --wa-color-blue-70: #88b2e4 /* oklch(75.191% 0.08558 253.21) */;
+  --wa-color-blue-70: #95b1d7 /* oklch(75.273% 0.06312 256.12) */;
-  --wa-color-blue-60: #6d98ca /* oklch(66.832% 0.08839 252.8) */;
+  --wa-color-blue-60: #7697c1 /* oklch(66.758% 0.07287 254.73) */;
-  --wa-color-blue-50: #4c78a8 /* oklch(56.163% 0.0895 251.64) */;
+  --wa-color-blue-50: #5078a5 /* oklch(56.23% 0.08347 252.2) */;
-  --wa-color-blue-40: #2e5b89 /* oklch(46.149% 0.09035 250.84) */;
+  --wa-color-blue-40: #305b88 /* oklch(46.183% 0.08806 251.23) */;
-  --wa-color-blue-30: #1c4772 /* oklch(39.053% 0.08729 251.07) */;
+  --wa-color-blue-30: #1b4771 /* oklch(38.952% 0.0863 250.15) */;
-  --wa-color-blue-20: #02345b /* oklch(31.798% 0.08493 248.65) */;
+  --wa-color-blue-20: #0a3458 /* oklch(31.794% 0.07822 249.27) */;
-  --wa-color-blue-10: #001f3a /* oklch(23.402% 0.0636 248.4) */;
+  --wa-color-blue-10: #011f39 /* oklch(23.373% 0.0615 248.28) */;
  --wa-color-blue-05: #001327 /* oklch(18.28% 0.04995 248.62) */;
  --wa-color-blue: var(--wa-color-blue-40);
  --wa-color-blue-key: 40;
-  --wa-color-indigo-95: #f1f1ff /* oklch(96.222% 0.01867 286.04) */;
+  --wa-color-indigo-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
-  --wa-color-indigo-90: #e2e4ff /* oklch(92.556% 0.03662 282.29) */;
+  --wa-color-indigo-90: #ede1ff /* oklch(92.831% 0.04213 303.7) */;
-  --wa-color-indigo-80: #bec7ff /* oklch(84.198% 0.07895 277.45) */;
+  --wa-color-indigo-80: #d3c0ff /* oklch(84.487% 0.08877 298.31) */;
-  --wa-color-indigo-70: #a1abe9 /* oklch(75.618% 0.0899 276.95) */;
+  --wa-color-indigo-70: #baa1f9 /* oklch(76.409% 0.12586 296.37) */;
-  --wa-color-indigo-60: #8791d0 /* oklch(67.33% 0.09401 276.64) */;
+  --wa-color-indigo-60: #9f86e0 /* oklch(67.937% 0.13169 295.47) */;
-  --wa-color-indigo-50: #6871af /* oklch(56.77% 0.09626 276.58) */;
+  --wa-color-indigo-50: #7f67bd /* oklch(57.508% 0.13016 294.83) */;
-  --wa-color-indigo-40: #4c5491 /* oklch(46.823% 0.09882 276.24) */;
+  --wa-color-indigo-40: #624a9e /* oklch(47.598% 0.13133 294.01) */;
-  --wa-color-indigo-30: #39417a /* oklch(39.802% 0.09591 275.16) */;
+  --wa-color-indigo-30: #4e3589 /* oklch(40.435% 0.13395 293.19) */;
-  --wa-color-indigo-20: #262e62 /* oklch(32.442% 0.09163 273.61) */;
+  --wa-color-indigo-20: #3a2074 /* oklch(33.206% 0.1353 291.46) */;
-  --wa-color-indigo-10: #151a3e /* oklch(23.597% 0.06843 274) */;
+  --wa-color-indigo-10: #24045f /* oklch(25.226% 0.1388 287.21) */;
-  --wa-color-indigo-05: #0c102a /* oklch(18.638% 0.05262 273.62) */;
+  --wa-color-indigo-05: #180044 /* oklch(19.806% 0.11332 288.23) */;
  --wa-color-indigo: var(--wa-color-indigo-40);
  --wa-color-indigo-key: 40;
-  --wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
+  --wa-color-violet-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
-  --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
+  --wa-color-violet-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
-  --wa-color-purple-80: #d4bfff /* oklch(84.383% 0.09054 299.5) */;
+  --wa-color-violet-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
-  --wa-color-purple-70: #b9a4e9 /* oklch(76.164% 0.09954 297.97) */;
+  --wa-color-violet-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
-  --wa-color-purple-60: #9f89d0 /* oklch(67.711% 0.10516 297.78) */;
+  --wa-color-violet-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
-  --wa-color-purple-50: #7f69b0 /* oklch(57.166% 0.10893 297.1) */;
+  --wa-color-violet-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
-  --wa-color-purple-40: #624c92 /* oklch(47.204% 0.11139 296.38) */;
+  --wa-color-violet-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
-  --wa-color-purple-30: #4e3a77 /* oklch(40.061% 0.10079 296.72) */;
+  --wa-color-violet-30: #5d366c /* oklch(40.395% 0.09808 316) */;
-  --wa-color-purple-20: #3a2761 /* oklch(32.781% 0.09892 295.54) */;
+  --wa-color-violet-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
-  --wa-color-purple-10: #23163e /* oklch(24.121% 0.07355 295.33) */;
+  --wa-color-violet-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
-  --wa-color-purple-05: #160c2b /* oklch(18.861% 0.06023 294.83) */;
+  --wa-color-violet-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
-  --wa-color-purple: var(--wa-color-purple-40);
+  --wa-color-violet: var(--wa-color-violet-40);
  --wa-color-purple-key: 40;
  --wa-color-pink-95: #ffeff4 /* oklch(96.614% 0.01843 356.42) */;
  --wa-color-pink-90: #fbdfe9 /* oklch(92.937% 0.03338 354.15) */;
  --wa-color-pink-80: #f3bbcd /* oklch(84.75% 0.06824 357.54) */;
  --wa-color-pink-70: #e699b2 /* oklch(76.622% 0.09694 358.59) */;
  --wa-color-pink-60: #cf7c98 /* oklch(68.3% 0.10798 358.68) */;
  --wa-color-pink-50: #aa5e78 /* oklch(57.699% 0.1031 358.97) */;
  --wa-color-pink-40: #89425b /* oklch(47.676% 0.10071 359.33) */;
  --wa-color-pink-30: #712f47 /* oklch(40.407% 0.09701 359.54) */;
  --wa-color-pink-20: #571f34 /* oklch(33.048% 0.08607 359.54) */;
  --wa-color-pink-10: #380f1f /* oklch(24.284% 0.06769 359.25) */;
  --wa-color-pink-05: #260713 /* oklch(18.997% 0.0547 359.42) */;
  --wa-color-pink: var(--wa-color-pink-60);
  --wa-color-pink-key: 60;
  --wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
  --wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
@@ -126,5 +105,4 @@
  --wa-color-gray-10: #1f1d22 /* oklch(23.51% 0.0099 303.74) */;
  --wa-color-gray-05: #121214 /* oklch(18.309% 0.00404 285.99) */;
  --wa-color-gray: var(--wa-color-gray-40);
  --wa-color-gray-key: 40;
 }
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -3,32 +3,30 @@
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-natural {
  --wa-color-red-95: #f9f0ee /* oklch(96.159% 0.0101 32.516) */;
-  --wa-color-red-90: #f5e1dc /* oklch(92.449% 0.0231 34.298) */;
+  --wa-color-red-90: #f5e2dd /* oklch(92.669% 0.02202 35.121) */;
-  --wa-color-red-80: #e9c1b7 /* oklch(84.299% 0.04808 34.353) */;
+  --wa-color-red-80: #e8bfb5 /* oklch(83.775% 0.0493 33.987) */;
-  --wa-color-red-70: #daa193 /* oklch(75.915% 0.07123 34.238) */;
+  --wa-color-red-70: #dba294 /* oklch(76.229% 0.07115 34.235) */;
-  --wa-color-red-60: #c48576 /* oklch(67.655% 0.08143 33.955) */;
+  --wa-color-red-60: #c98373 /* oklch(67.81% 0.09043 33.504) */;
-  --wa-color-red-50: #a86252 /* oklch(57.121% 0.09478 33.75) */;
+  --wa-color-red-50: #ae6150 /* oklch(57.709% 0.10386 33.445) */;
-  --wa-color-red-40: #864839 /* oklch(47.352% 0.08833 34.595) */;
+  --wa-color-red-40: #8c4434 /* oklch(47.455% 0.10187 33.787) */;
-  --wa-color-red-30: #6f3428 /* oklch(40.073% 0.08669 32.867) */;
+  --wa-color-red-30: #713225 /* oklch(40.002% 0.09248 33.14) */;
  --wa-color-red-20: #562318 /* oklch(32.765% 0.07872 33.646) */;
  --wa-color-red-10: #36130b /* oklch(23.996% 0.05851 34.254) */;
  --wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;
-  --wa-color-yellow-95: #f6f1ea /* oklch(96.009% 0.01076 76.598) */;
+  --wa-color-yellow-95: #f5f0e8 /* oklch(95.682% 0.01193 79.784) */;
-  --wa-color-yellow-90: #eee5d7 /* oklch(92.521% 0.02111 79.091) */;
+  --wa-color-yellow-90: #ede4d5 /* oklch(92.192% 0.0223 80.684) */;
-  --wa-color-yellow-80: #dbc8a8 /* oklch(84.033% 0.04791 80.753) */;
+  --wa-color-yellow-80: #dac6a4 /* oklch(83.455% 0.05079 80.939) */;
  --wa-color-yellow-70: #c7ab7b /* oklch(75.433% 0.07174 80.723) */;
-  --wa-color-yellow-60: #af905b /* oklch(66.983% 0.07981 80.152) */;
+  --wa-color-yellow-60: #b29054 /* oklch(67.181% 0.08832 80.564) */;
-  --wa-color-yellow-50: #8f703a /* oklch(56.392% 0.08172 79.742) */;
+  --wa-color-yellow-50: #94702b /* oklch(56.778% 0.09671 80.65) */;
-  --wa-color-yellow-40: #71541d /* oklch(46.546% 0.08061 80.169) */;
+  --wa-color-yellow-40: #735310 /* oklch(46.47% 0.08924 80.445) */;
-  --wa-color-yellow-30: #5b4111 /* oklch(39.475% 0.07191 78.67) */;
+  --wa-color-yellow-30: #5c4003 /* oklch(39.286% 0.07968 79.822) */;
  --wa-color-yellow-20: #442f00 /* oklch(32.136% 0.06628 81.612) */;
  --wa-color-yellow-10: #2a1b00 /* oklch(23.521% 0.04872 79.998) */;
  --wa-color-yellow-05: #1b1000 /* oklch(18.327% 0.03796 79.944) */;
  --wa-color-yellow: var(--wa-color-yellow-50);
  --wa-color-yellow-key: 50;
  --wa-color-green-95: #edf2ee /* oklch(95.624% 0.00749 151.89) */;
  --wa-color-green-90: #dde8df /* oklch(92.017% 0.01681 151.09) */;
@@ -42,35 +40,32 @@
  --wa-color-green-10: #0c2212 /* oklch(22.839% 0.04191 150.74) */;
  --wa-color-green-05: #051509 /* oklch(17.675% 0.03381 151.11) */;
  --wa-color-green: var(--wa-color-green-50);
  --wa-color-green-key: 50;
-  --wa-color-cyan-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
+  --wa-color-teal-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
-  --wa-color-cyan-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
+  --wa-color-teal-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
-  --wa-color-cyan-80: #b8cdd1 /* oklch(83.375% 0.02342 210.4) */;
+  --wa-color-teal-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
-  --wa-color-cyan-70: #96b4ba /* oklch(74.946% 0.03385 211.12) */;
+  --wa-color-teal-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
-  --wa-color-cyan-60: #759ba2 /* oklch(66.386% 0.0429 210.11) */;
+  --wa-color-teal-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
-  --wa-color-cyan-50: #4a7d86 /* oklch(55.736% 0.05643 209.98) */;
+  --wa-color-teal-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
-  --wa-color-cyan-40: #2f6067 /* oklch(45.783% 0.05405 207.62) */;
+  --wa-color-teal-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
-  --wa-color-cyan-30: #1e4c52 /* oklch(38.743% 0.05069 206.89) */;
+  --wa-color-teal-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
-  --wa-color-cyan-20: #0c383e /* oklch(31.452% 0.04725 208.21) */;
+  --wa-color-teal-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
-  --wa-color-cyan-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
+  --wa-color-teal-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
-  --wa-color-cyan-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
+  --wa-color-teal-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
-  --wa-color-cyan: var(--wa-color-cyan-50);
+  --wa-color-teal: var(--wa-color-teal-40);
  --wa-color-cyan-key: 50;
-  --wa-color-blue-95: #f0f2f6 /* oklch(96.077% 0.00576 264.53) */;
+  --wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
-  --wa-color-blue-90: #e0e5ef /* oklch(92.101% 0.0146 264.5) */;
+  --wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
-  --wa-color-blue-80: #c0cbde /* oklch(83.957% 0.02915 261.47) */;
+  --wa-color-blue-80: #bdc9dc /* oklch(83.261% 0.0297 259.59) */;
  --wa-color-blue-70: #9fb0ca /* oklch(75.271% 0.04205 258.8) */;
  --wa-color-blue-60: #8196b8 /* oklch(66.901% 0.05611 259.98) */;
-  --wa-color-blue-50: #5c76a0 /* oklch(56.262% 0.07235 259.79) */;
+  --wa-color-blue-50: #5f779e /* oklch(56.593% 0.06705 259.94) */;
-  --wa-color-blue-40: #425981 /* oklch(46.327% 0.07137 261.08) */;
+  --wa-color-blue-40: #415981 /* oklch(46.262% 0.07185 260.29) */;
  --wa-color-blue-30: #2f466a /* oklch(39.269% 0.06791 259.08) */;
  --wa-color-blue-20: #203351 /* oklch(32.043% 0.05935 259.22) */;
  --wa-color-blue-10: #101e34 /* oklch(23.495% 0.04695 259.11) */;
-  --wa-color-blue-05: #081224 /* oklch(18.37% 0.04003 261.12) */;
+  --wa-color-blue-05: #081223 /* oklch(18.293% 0.03819 260.22) */;
-  --wa-color-blue: var(--wa-color-blue-50);
+  --wa-color-blue: var(--wa-color-blue-40);
  --wa-color-blue-key: 50;
  --wa-color-indigo-95: #f2f2f7 /* oklch(96.257% 0.00665 286.27) */;
  --wa-color-indigo-90: #e6e5f1 /* oklch(92.619% 0.01616 289.92) */;
@@ -84,35 +79,19 @@
  --wa-color-indigo-10: #1e1a32 /* oklch(23.531% 0.04547 290.1) */;
  --wa-color-indigo-05: #121021 /* oklch(18.511% 0.03422 287.97) */;
  --wa-color-indigo: var(--wa-color-indigo-50);
  --wa-color-indigo-key: 50;
-  --wa-color-purple-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
+  --wa-color-violet-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
-  --wa-color-purple-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
+  --wa-color-violet-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
-  --wa-color-purple-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
+  --wa-color-violet-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
-  --wa-color-purple-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
+  --wa-color-violet-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
-  --wa-color-purple-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
+  --wa-color-violet-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
-  --wa-color-purple-50: #866a99 /* oklch(56.923% 0.07763 311.15) */;
+  --wa-color-violet-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
-  --wa-color-purple-40: #694f7a /* oklch(47.198% 0.07429 311.36) */;
+  --wa-color-violet-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
-  --wa-color-purple-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
+  --wa-color-violet-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
-  --wa-color-purple-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
+  --wa-color-violet-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
-  --wa-color-purple-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
+  --wa-color-violet-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
-  --wa-color-purple-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
+  --wa-color-violet-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-violet: var(--wa-color-violet-40);
  --wa-color-purple-key: 50;
  --wa-color-pink-95: #f8f0f3 /* oklch(96.22% 0.00943 352.36) */;
  --wa-color-pink-90: #f0e2e7 /* oklch(92.534% 0.0166 353.65) */;
  --wa-color-pink-80: #dec3ce /* oklch(84.312% 0.03375 351.3) */;
  --wa-color-pink-70: #cba4b4 /* oklch(75.858% 0.05043 351.83) */;
  --wa-color-pink-60: #b9879c /* oklch(67.84% 0.06707 352.09) */;
  --wa-color-pink-50: #a0637d /* oklch(57.443% 0.08557 353.01) */;
  --wa-color-pink-40: #7f4860 /* oklch(47.455% 0.08107 352.99) */;
  --wa-color-pink-30: #67364c /* oklch(40.225% 0.07544 352.68) */;
  --wa-color-pink-20: #4f2538 /* oklch(32.865% 0.06781 352.99) */;
  --wa-color-pink-10: #311422 /* oklch(23.991% 0.05118 351.37) */;
  --wa-color-pink-05: #200b15 /* oklch(18.69% 0.03937 351.69) */;
  --wa-color-pink: var(--wa-color-pink-50);
  --wa-color-pink-key: 50;
  --wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
  --wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;
@@ -126,5 +105,4 @@
  --wa-color-gray-10: #1f1d1a /* oklch(23.185% 0.00644 78.196) */;
  --wa-color-gray-05: #131210 /* oklch(18.257% 0.00432 84.592) */;
  --wa-color-gray: var(--wa-color-gray-50);
  --wa-color-gray-key: 50;
 }
--- a/src/styles/color/scripts/palettes.js
+++ b/src/styles/color/scripts/palettes.js
@@ -6,9 +6,11 @@
 import Color from 'colorjs.io';
 import fs from 'fs';
 import path from 'path';
-import { PALETTE_DIR } from './util.js';
+import { fileURLToPath } from 'url';
-export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css'));
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 export const paletteFiles = fs.readdirSync(__dirname).filter(file => file.endsWith('.css'));
 export const declarationRegex =
  /^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
 export const rawCSS = {};
@@ -53,7 +55,7 @@ function parse(contents, file) {
 const palettes = {};
 for (let file of paletteFiles) {
-  let css = fs.readFileSync(path.join(PALETTE_DIR, file), 'utf8');
+  let css = fs.readFileSync(path.join(__dirname, file), 'utf8');
  rawCSS[file] = css;
  let tokens = parse(css, file);
  let paletteId = file.replace(/\.css$/, '');
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -2,117 +2,96 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-rudimentary {
-  --wa-color-red-95: #fff0f0 /* oklch(96.694% 0.01624 17.438) */;
+  --wa-color-red-95: #fee /* oklch(96.257% 0.01846 17.478) */;
  --wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
-  --wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
+  --wa-color-red-80: #ffb6b8 /* oklch(84.502% 0.08518 17.203) */;
-  --wa-color-red-70: #fe8f8a /* oklch(76.793% 0.13503 23.416) */;
+  --wa-color-red-70: #fb9191 /* oklch(76.892% 0.12835 20.456) */;
-  --wa-color-red-60: #f6665e /* oklch(68.97% 0.17859 26.005) */;
+  --wa-color-red-60: #f16b5e /* oklch(68.899% 0.16784 27.833) */;
-  --wa-color-red-50: #e32720 /* oklch(58.995% 0.22134 28.631) */;
+  --wa-color-red-50: #da3c06 /* oklch(58.891% 0.20155 35.469) */;
-  --wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
+  --wa-color-red-40: #a62c00 /* oklch(48.117% 0.16441 36.104) */;
-  --wa-color-red-30: #910101 /* oklch(41.281% 0.16874 29.146) */;
+  --wa-color-red-30: #812500 /* oklch(40.578% 0.1326 38.082) */;
-  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
+  --wa-color-red-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
-  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
+  --wa-color-red-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
-  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
+  --wa-color-red-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
  --wa-color-red: var(--wa-color-red-50);
  --wa-color-red-key: 50;
-  --wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */;
+  --wa-color-yellow-95: #fff497 /* oklch(95.586% 0.11473 102.45) */;
-  --wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */;
+  --wa-color-yellow-90: #ffe571 /* oklch(92.08% 0.13847 96.881) */;
-  --wa-color-yellow-80: #f4c403 /* oklch(83.862% 0.17104 90.777) */;
+  --wa-color-yellow-80: #ffbd31 /* oklch(83.787% 0.16061 80.808) */;
-  --wa-color-yellow-70: #e6a200 /* oklch(75.828% 0.1578 78.483) */;
+  --wa-color-yellow-70: #f09d27 /* oklch(76.177% 0.15513 69.241) */;
-  --wa-color-yellow-60: #d28300 /* oklch(67.735% 0.14848 68.161) */;
+  --wa-color-yellow-60: #d67f31 /* oklch(67.745% 0.13973 58.256) */;
-  --wa-color-yellow-50: #b36000 /* oklch(57.465% 0.13759 57.969) */;
+  --wa-color-yellow-50: #b1612d /* oklch(57.606% 0.12242 50.859) */;
-  --wa-color-yellow-40: #8f4400 /* oklch(47.43% 0.12139 52.363) */;
+  --wa-color-yellow-40: #8b4527 /* oklch(47.274% 0.1046 42.804) */;
-  --wa-color-yellow-30: #733301 /* oklch(40.135% 0.10525 50.086) */;
+  --wa-color-yellow-30: #703422 /* oklch(40.129% 0.09009 37.442) */;
-  --wa-color-yellow-20: #562400 /* oklch(32.667% 0.08641 49.965) */;
+  --wa-color-yellow-20: #53251c /* oklch(32.68% 0.071 32.488) */;
-  --wa-color-yellow-10: #361400 /* oklch(23.998% 0.06347 49.971) */;
+  --wa-color-yellow-10: #311613 /* oklch(23.859% 0.04441 27.497) */;
-  --wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
+  --wa-color-yellow-05: #1f0d0b /* oklch(18.561% 0.0315 27.209) */;
  --wa-color-yellow: var(--wa-color-yellow-80);
  --wa-color-yellow-key: 80;
-  --wa-color-green-95: #d3fece /* oklch(95.448% 0.0775 142.18) */;
+  --wa-color-green-95: #dafadc /* oklch(95.411% 0.05194 146.87) */;
-  --wa-color-green-90: #a3fb9e /* oklch(91.005% 0.15051 143.02) */;
+  --wa-color-green-90: #b9f4bc /* oklch(91.261% 0.09639 146.02) */;
-  --wa-color-green-80: #55e557 /* oklch(81.532% 0.22113 143.41) */;
+  --wa-color-green-80: #64e177 /* oklch(81.419% 0.18348 146.66) */;
-  --wa-color-green-70: #35c83d /* oklch(73.012% 0.21608 143.61) */;
+  --wa-color-green-70: #2ec859 /* oklch(73.18% 0.19719 147.79) */;
-  --wa-color-green-60: #21ac2c /* oklch(64.997% 0.20039 143.64) */;
+  --wa-color-green-60: #00ac4a /* oklch(64.995% 0.18331 149.02) */;
-  --wa-color-green-50: #0f881d /* oklch(54.57% 0.17259 143.76) */;
+  --wa-color-green-50: #008840 /* oklch(54.827% 0.14802 150.85) */;
-  --wa-color-green-40: #016810 /* oklch(44.912% 0.14592 143.81) */;
+  --wa-color-green-40: #006734 /* oklch(45.037% 0.11628 152.87) */;
-  --wa-color-green-30: #005207 /* oklch(38.047% 0.12561 143.42) */;
+  --wa-color-green-30: #005128 /* oklch(38.134% 0.09801 153.08) */;
-  --wa-color-green-20: #003c03 /* oklch(30.89% 0.10259 143.24) */;
+  --wa-color-green-20: #003b1c /* oklch(30.9% 0.07883 153.44) */;
-  --wa-color-green-10: #002401 /* oklch(22.574% 0.07524 143.13) */;
+  --wa-color-green-10: #00230e /* oklch(22.462% 0.05754 153.24) */;
-  --wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
+  --wa-color-green-05: #001607 /* oklch(17.557% 0.04482 153.41) */;
-  --wa-color-green: var(--wa-color-green-80);
+  --wa-color-green: var(--wa-color-green-70);
  --wa-color-green-key: 80;
-  --wa-color-cyan-95: #bffdfd /* oklch(95.254% 0.06191 196.16) */;
+  --wa-color-teal-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
-  --wa-color-cyan-90: #87f8f6 /* oklch(91.191% 0.10384 193.98) */;
+  --wa-color-teal-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
-  --wa-color-cyan-80: #11e0e1 /* oklch(82.2% 0.13867 195.37) */;
+  --wa-color-teal-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
-  --wa-color-cyan-70: #00c1cc /* oklch(73.822% 0.12561 202.07) */;
+  --wa-color-teal-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
-  --wa-color-cyan-60: #00a4b6 /* oklch(65.766% 0.11321 208.52) */;
+  --wa-color-teal-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
-  --wa-color-cyan-50: #008098 /* oklch(55.318% 0.09882 217.04) */;
+  --wa-color-teal-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
-  --wa-color-cyan-40: #016177 /* oklch(45.597% 0.08301 220.49) */;
+  --wa-color-teal-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
-  --wa-color-cyan-30: #014c5f /* oklch(38.623% 0.07093 221.97) */;
+  --wa-color-teal-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
-  --wa-color-cyan-20: #003746 /* oklch(31.239% 0.05795 222.52) */;
+  --wa-color-teal-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
-  --wa-color-cyan-10: #00212c /* oklch(23.027% 0.04335 224.27) */;
+  --wa-color-teal-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
-  --wa-color-cyan-05: #00141c /* oklch(17.778% 0.0335 224.39) */;
+  --wa-color-teal-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
-  --wa-color-cyan: var(--wa-color-cyan-80);
+  --wa-color-teal: var(--wa-color-teal-70);
  --wa-color-cyan-key: 80;
-  --wa-color-blue-95: #e5f6fe /* oklch(96.294% 0.02094 227.52) */;
+  --wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
-  --wa-color-blue-90: #c5ebff /* oklch(91.932% 0.04809 230.9) */;
+  --wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
-  --wa-color-blue-80: #8bd2ff /* oklch(83.326% 0.09527 237.31) */;
+  --wa-color-blue-80: #87d1ff /* oklch(82.911% 0.09817 236.93) */;
-  --wa-color-blue-70: #55b6ff /* oklch(74.905% 0.13947 244.06) */;
+  --wa-color-blue-70: #4cb8ff /* oklch(75.061% 0.14167 241.25) */;
-  --wa-color-blue-60: #2a97ff /* oklch(66.922% 0.18057 251.94) */;
+  --wa-color-blue-60: #09f /* oklch(66.905% 0.18368 248.81) */;
-  --wa-color-blue-50: #146bff /* oklch(57.485% 0.23344 261.04) */;
+  --wa-color-blue-50: #0072ed /* oklch(57.257% 0.20469 257.18) */;
-  --wa-color-blue-40: #0e48de /* oklch(48.043% 0.23341 263.63) */;
+  --wa-color-blue-40: #0053be /* oklch(47.006% 0.18201 258.98) */;
-  --wa-color-blue-30: #0038b0 /* oklch(40.387% 0.19651 262.63) */;
+  --wa-color-blue-30: #00409b /* oklch(39.927% 0.15956 259.61) */;
-  --wa-color-blue-20: #002887 /* oklch(33.083% 0.16285 262.76) */;
+  --wa-color-blue-20: #002e76 /* oklch(32.56% 0.13217 259.91) */;
-  --wa-color-blue-10: #001658 /* oklch(24.241% 0.12149 262.95) */;
+  --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
-  --wa-color-blue-05: #000c3c /* oklch(18.73% 0.09414 262.97) */;
+  --wa-color-blue-05: #000f36 /* oklch(18.68% 0.08063 260.98) */;
  --wa-color-blue: var(--wa-color-blue-50);
  --wa-color-blue-key: 50;
-  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
+  --wa-color-indigo-95: #f1efff /* oklch(95.834% 0.02142 291.74) */;
-  --wa-color-indigo-90: #e1e4ff /* oklch(92.481% 0.03674 280.62) */;
+  --wa-color-indigo-90: #e7e3ff /* oklch(92.744% 0.03793 292.2) */;
-  --wa-color-indigo-80: #c0c6ff /* oklch(84.148% 0.07987 279.84) */;
+  --wa-color-indigo-80: #cbc1ff /* oklch(84.027% 0.08632 291.82) */;
-  --wa-color-indigo-70: #a2a7ff /* oklch(75.911% 0.12582 280.46) */;
+  --wa-color-indigo-70: #b3a3ff /* oklch(76.472% 0.13034 290.97) */;
-  --wa-color-indigo-60: #8a87ff /* oklch(68.133% 0.17285 281.91) */;
+  --wa-color-indigo-60: #9b81ff /* oklch(68.426% 0.17995 290.32) */;
-  --wa-color-indigo-50: #6f5aff /* oklch(58.566% 0.23371 282.19) */;
+  --wa-color-indigo-50: #7f56f9 /* oklch(58.841% 0.22979 288.88) */;
-  --wa-color-indigo-40: #5823f7 /* oklch(49.739% 0.27634 280.94) */;
+  --wa-color-indigo-40: #6427e7 /* oklch(49.439% 0.25627 286.93) */;
-  --wa-color-indigo-30: #4600d4 /* oklch(42.607% 0.25731 280.24) */;
+  --wa-color-indigo-30: #5102ca /* oklch(42.528% 0.24562 286.08) */;
-  --wa-color-indigo-20: #3200a1 /* oklch(34.632% 0.20991 279.75) */;
+  --wa-color-indigo-20: #3a009b /* oklch(34.649% 0.20256 284.92) */;
-  --wa-color-indigo-10: #1d0069 /* oklch(25.391% 0.1543 279.39) */;
+  --wa-color-indigo-10: #220064 /* oklch(25.227% 0.14791 284.49) */;
-  --wa-color-indigo-05: #120049 /* oklch(19.822% 0.11998 279.93) */;
+  --wa-color-indigo-05: #160046 /* oklch(19.835% 0.11578 285.15) */;
  --wa-color-indigo: var(--wa-color-indigo-40);
  --wa-color-indigo-key: 40;
-  --wa-color-purple-95: #f9f0ff /* oklch(96.646% 0.02199 312.19) */;
+  --wa-color-violet-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
-  --wa-color-purple-90: #f2dfff /* oklch(92.855% 0.04724 311.73) */;
+  --wa-color-violet-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
-  --wa-color-purple-80: #e5b9fe /* oklch(84.736% 0.10475 313.02) */;
+  --wa-color-violet-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
-  --wa-color-purple-70: #d794fc /* oklch(77.031% 0.15876 312.74) */;
+  --wa-color-violet-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
-  --wa-color-purple-60: #c86df6 /* oklch(69.308% 0.20786 312.9) */;
+  --wa-color-violet-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
-  --wa-color-purple-50: #b334e8 /* oklch(59.685% 0.25757 313.29) */;
+  --wa-color-violet-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
-  --wa-color-purple-40: #9200c2 /* oklch(49.816% 0.24738 313.46) */;
+  --wa-color-violet-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
-  --wa-color-purple-30: #720a97 /* oklch(41.936% 0.20122 313.63) */;
+  --wa-color-violet-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
-  --wa-color-purple-20: #550373 /* oklch(34.13% 0.16667 313.17) */;
+  --wa-color-violet-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
-  --wa-color-purple-10: #350149 /* oklch(24.929% 0.12192 313.39) */;
+  --wa-color-violet-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
-  --wa-color-purple-05: #240033 /* oklch(19.65% 0.09758 313.47) */;
+  --wa-color-violet-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-violet: var(--wa-color-violet-50);
  --wa-color-purple-key: 50;
  --wa-color-pink-95: #ffeffa /* oklch(96.786% 0.02239 336.83) */;
  --wa-color-pink-90: #ffdcf6 /* oklch(93.109% 0.05123 335.07) */;
  --wa-color-pink-80: #ffb2ec /* oklch(85.389% 0.11534 335.86) */;
  --wa-color-pink-70: #fd84de /* oklch(77.594% 0.18006 337.78) */;
  --wa-color-pink-60: #f058cd /* oklch(69.814% 0.2238 338) */;
  --wa-color-pink-50: #d31db1 /* oklch(59.681% 0.24785 337.93) */;
  --wa-color-pink-40: #a6008a /* oklch(49.234% 0.21583 338.04) */;
  --wa-color-pink-30: #84006d /* oklch(41.627% 0.18237 338.17) */;
  --wa-color-pink-20: #630051 /* oklch(33.902% 0.14844 338.29) */;
  --wa-color-pink-10: #3f0032 /* oklch(24.899% 0.1087 338.93) */;
  --wa-color-pink-05: #2a0021 /* oklch(19.332% 0.08461 338.38) */;
  --wa-color-pink: var(--wa-color-pink-50);
  --wa-color-pink-key: 50;
  --wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
  --wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
@@ -126,5 +105,4 @@
  --wa-color-gray-10: #1d1d1d /* oklch(23.075% 0 none) */;
  --wa-color-gray-05: #131313 /* oklch(18.674% 0 none) */;
  --wa-color-gray: var(--wa-color-gray-60);
  --wa-color-gray-key: 60;
 }
--- a/src/styles/color/scripts/palettes-analyzed.js
+++ b/src/styles/color/scripts/palettes-analyzed.js
@@ -1,63 +0,0 @@
 /**
 * Analyze palettes and export the results.
 * ✅ Convert colors to OKLCH
 * ✅ Find accent tint (real and clamped)
 * More later.
 */
 import rawPalettes from './palettes.js';
 import { clamp } from './util.js';
 // Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance)
 const DEFAULT_ACCENT = 60;
 // Min and max allowed tints
 const MIN_ACCENT = 40;
 const MAX_ACCENT = 90;
 // Chroma tolerance: Chroma will need to differ more than this to gravitate away from defaultAccent
 const CHROMA_TOLERANCE = 0.000001;
 const palettes = Object.assign({}, rawPalettes);
 for (let paletteId in palettes) {
  const tokens = Object.assign({}, palettes[paletteId]);
  palettes[paletteId] = tokens;
  for (let hue in tokens) {
    let tints = Object.assign({}, tokens[hue]);
    tokens[hue] = tints;
    let maxChromaTint = DEFAULT_ACCENT;
    let maxChroma = tints[DEFAULT_ACCENT].c || 0;
    for (let tint in tints) {
      let color = tints[tint].to('oklch');
      tints[tint] = color;
      if (tint === '05') {
        // The object has both '5' and '05' keys, but '05' is out of order
        continue;
      }
      tint = tint.padStart(2, '0');
      if (color.c > maxChroma + CHROMA_TOLERANCE) {
        maxChroma = color.c;
        maxChromaTint = tint;
      }
    }
    tints['05'] = tints['5'];
    tints.maxChroma = tints.maxChromaRaw = maxChroma;
    tints.maxChromaTint = tints.maxChromaTintRaw = maxChromaTint;
    if (maxChromaTint < MIN_ACCENT || maxChromaTint > MAX_ACCENT) {
      tints.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT);
      tints.maxChroma = tints[maxChromaTint].c;
    }
  }
 }
 export default palettes;
 export { rawPalettes };
--- a/Show More
+++ b/Show More
		`@@ -1 +0,0 @@`
			`export { hueRanges as default } from '../assets/scripts/tweak/data.js';`
`@@ -1 +1 @@`
	`["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]`	`["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]`
`@@ -1 +1 @@`
	`export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';`	`export { default as default } from '../../src/styles/color/palettes.js';`