Don't break in SSR

<wa-isolate> as a wrapper for DSD
Theme remixing: Dynamic code snippets (#729 )
2026-01-13 12:39:14 +00:00 · 2025-02-10 10:20:50 -05:00 · 2025-02-10 10:17:23 -05:00 · 2025-02-07 23:03:34 -05:00 · 2025-02-07 17:59:18 -05:00 · 2025-02-07 11:35:12 -05:00
86 changed files with 1833 additions and 848 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -13,3 +13,4 @@ package-lock.json
 tsconfig.json
 cdn
 _site
+docs/assets/scripts/prism.js
--- a/docs/_data/hues.json
+++ b/docs/_data/hues.json
@@ -1 +1 @@
-["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
+["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "gray"]
--- a/docs/_data/palettes.js
+++ b/docs/_data/palettes.js
@@ -1 +1 @@
-export { default as default } from '../../src/styles/color/palettes.js';
+export { default as default } from '../../src/styles/color/palettes-analyzed.js';
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -15,6 +15,8 @@

    {# 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/import-stylesheet-code.md.njk
+++ b/docs/_includes/import-stylesheet-code.md.njk
@@ -1,4 +1,4 @@
-<wa-tab-group>
+<wa-tab-group class="import-stylesheet-code">
 <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,6 +5,9 @@
 		{% 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,4 +1,4 @@
-{% set paletteId = page.fileSlug %}
+{% set paletteId = palette.fileSlug or page.fileSlug %}
 {% set tints = [80, 60, 40, 20] %}
 {% set width = 20 %}
 {% set height = 13 %}
--- a/docs/_includes/svgs/theme-color.njk
+++ b/docs/_includes/svgs/theme-color.njk
@@ -0,0 +1,24 @@
+{% set themeId = theme.fileSlug %}
+
+<wa-isolate>
+  <template>
+    <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>
+</wa-isolate>
--- a/docs/_includes/svgs/theme-typography.njk
+++ b/docs/_includes/svgs/theme-typography.njk
@@ -0,0 +1,16 @@
+{% set themeId = theme.fileSlug %}
+
+<wa-isolate>
+  <template>
+    <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>
+</wa-isolate>
--- 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-violet-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="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-teal-60); --text-color: var(--wa-color-teal-95);">
+          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-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 class="test-failure"><code>outlined</code></th>
+      <th><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 class="test-failure"><code>outlined</code></th>
+      <th><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 class="test-failure"><code>outlined</code></th>
+      <th><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
@@ -15,6 +15,7 @@
  <thead>
    <tr>
      <th></th>
+      <th class="core-column">Core tint</th>
      {% for tint in tints -%}
      <th>{{ tint }}</th>
      {%- endfor %}
@@ -23,6 +24,12 @@
 {% for hue in hues -%}
 <tr>
  <th>{{ hue | capitalize }}</th>
+  <td class="core-column">
+    <div 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-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+    </div>
+  </td>
  {% for tint in tints -%}
    <td>
      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -4,100 +4,143 @@

 {% 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>

-<p id="mix_and_match" class="wa-gap-m">
-  <strong>
-    <wa-icon name="merge" slot="prefix"></wa-icon>
-    Remix
-    <wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
-  </strong>
-  <wa-select name="colors" label="Colors from…" size="small">
+<wa-details id="mix_and_match" class="wa-gap-m" >
+  <h4 slot="summary" data-no-anchor data-no-outline id="remix">
+    <wa-icon name="arrows-rotate"></wa-icon>
+    Remix this theme
+    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
+    <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>
+  </h4>
+
+  <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 %}
-      {% if theme.fileSlug !== page.fileSlug %}
-      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
-      {% endif %}
+      {% set currentTheme = theme.fileSlug == page.fileSlug %}
+      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
+        <wa-card with-header>
+          <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" size="small">
+  <wa-select name="palette" label="Palette" clearable>
    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
-    <wa-option value="">(Theme default)</wa-option>
-    <wa-divider></wa-divider>
-    {% for p in collections.palette | sort %}
-      {% if p.fileSlug !== palette %}
-      <wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
-      {% endif %}
+    {% set defaultPalette = palette %}
+    {% for palette in collections.palette | sort %}
+      {% set currentPalette = palette.fileSlug == defaultPalette %}
+      <wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
+        <wa-card with-header>
+          <div slot="header">
+          {% 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…" size="small">
+  <wa-select name="typography" label="Typography from…" clearable>
    <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 %}
-      {% if theme.fileSlug !== page.fileSlug %}
-      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
-      {% endif %}
+      {% set currentTheme = theme.fileSlug == page.fileSlug %}
+      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
+        <wa-card with-header>
+          <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>

-
-</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>
+<h2>Color</h2>
 {% set paletteURL = '/docs/palettes/' + palette + '/' %}
-{% set themePage = page %}
-{% set page = paletteURL | getCollectionItemFromUrl %}
-<div class="index-grid">
-{% include 'page-card.njk' %}
-</div>
-{% set page = themePage %}

+
+<div class="index-grid">
+  {% set themePage = page %}
+  {% 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>
 {% endblock %}

 {% block afterContent %}
-{% markdown %}
-## How to use this theme

+<h2 id="usage">How to use this theme</h2>
+
+{% markdown %}
 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,7 +37,8 @@ export function anchorHeadingsPlugin(options = {}) {
      }

      // Look for headings
-      container.querySelectorAll(options.headingSelector).forEach(heading => {
+      let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
+      container.querySelectorAll(selector).forEach(heading => {
        const hasAnchor = heading.querySelector('a');
        const existingId = heading.getAttribute('id');
        const clone = parse(heading.outerHTML);
--- a/docs/assets/scripts/prism.js
+++ b/docs/assets/scripts/prism.js
--- a/docs/assets/scripts/remix.js
+++ b/docs/assets/scripts/remix.js
@@ -0,0 +1,37 @@
+/**
+ * Get import code for remixed themes.
+ */
+export const urls = {
+  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`,
+};
+
+function getImport(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 getCode(base, params, options) {
+  let ret = [];
+
+  if (base) {
+    ret.push(`styles/themes/${base}.css`);
+  }
+
+  ret.push(
+    ...Object.entries(params)
+      .filter(([aspect, id]) => Boolean(id))
+      .map(([aspect, id]) => urls[aspect](id)),
+  );
+
+  return ret.map(url => getImport(url, options)).join('\n');
+}
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -360,7 +360,7 @@ wa-page > main:has(> .index-grid) {
    }

    &::part(header) {
-      background-color: var(--wa-color-neutral-fill-quiet);
+      background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
      border-bottom: none;
      display: flex;
      align-items: center;
@@ -437,6 +437,7 @@ table.colors {
      padding-block: 0;
    }
  }
+
  tbody {
    tr {
      border: none;
@@ -456,6 +457,10 @@ table.colors {
      padding-block: var(--wa-space-s);
    }
  }
+
+  .core-column {
+    padding-inline-end: var(--wa-space-xl);
+  }
 }

 /* Layout Examples */
@@ -538,23 +543,4 @@ 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
@@ -0,0 +1,34 @@
+.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,6 +9,10 @@ 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-violet-80);
-    color: var(--wa-color-violet-20);
+    background: var(--wa-color-purple-80);
+    color: var(--wa-color-purple-20);
  }

  strong {
--- a/docs/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -130,6 +130,15 @@ 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}
@@ -294,7 +303,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.getTextLabel()}
+        ${option.label}
      </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 violet 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 purple in light mode:

 ```css
 :where(:root),
 :host,
 .wa-light,
 .wa-dark .wa-invert {
-  --wa-color-brand-fill-quiet: var(--wa-color-violet-95);
-  --wa-color-brand-fill-normal: var(--wa-color-violet-90);
-  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
-  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
-  --wa-color-brand-border-normal: var(--wa-color-violet-80);
-  --wa-color-brand-border-loud: var(--wa-color-violet-60);
-  --wa-color-brand-on-quiet: var(--wa-color-violet-40);
-  --wa-color-brand-on-normal: var(--wa-color-violet-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-purple-95);
+  --wa-color-brand-fill-normal: var(--wa-color-purple-90);
+  --wa-color-brand-fill-loud: var(--wa-color-purple-50);
+  --wa-color-brand-border-quiet: var(--wa-color-purple-90);
+  --wa-color-brand-border-normal: var(--wa-color-purple-80);
+  --wa-color-brand-border-loud: var(--wa-color-purple-60);
+  --wa-color-brand-on-quiet: var(--wa-color-purple-40);
+  --wa-color-brand-on-normal: var(--wa-color-purple-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-violet-50), var(--wa-color-red-50));
-    border: solid 1px var(--wa-color-violet-50);
+    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
+    border: solid 1px var(--wa-color-purple-50);
    transition: transform 100ms, box-shadow 100ms;
  }

--- 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="teal"><span style="background-color:var(--wa-color-teal-60);"></span></wa-radio>
+      <wa-radio value="cyan"><span style="background-color:var(--wa-color-cyan-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="violet"><span style="background-color:var(--wa-color-violet-60);"></span></wa-radio>
+      <wa-radio value="purple"><span style="background-color:var(--wa-color-purple-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/palettes.json
+++ b/docs/docs/palettes/palettes.json
@@ -3,6 +3,7 @@
  "tags": ["palettes", "palette"],
  "eleventyComputed": {
    "snippet": ".wa-palette-{{ page.fileSlug }}",
-    "icon": "palette"
+    "icon": "palette",
+    "file": "styles/color/{{ page.fileSlug }}.css"
  }
 }
--- a/docs/docs/themes/active.md
+++ b/docs/docs/themes/active.md
@@ -4,4 +4,5 @@ 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,4 +3,5 @@ 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,4 +4,5 @@ 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,4 +3,5 @@ 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,7 +11,6 @@ eleventyComputed:
  forceTheme: "{{ theme.fileSlug }}"
 ---

-<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
 <link rel="stylesheet" href="/docs/themes/showcase.css" />

 {% set content %}
@@ -34,35 +33,45 @@ eleventyComputed:
 </div>
 </wa-image-comparer>

-<script>
+<script type="module">
+import { getCode, urls as stylesheetURLs } from "/assets/scripts/remix.js";
+
 function updateTheme() {
  let params = new URLSearchParams(window.location.search);
-  let script = document.currentScript;
-  const stylesheetURLs = {
-    colors: id => `/dist/styles/themes/${ id }/color.css`,
-    palette: id => `/dist/styles/color/${ id }.css`,
-    typography: id => `/dist/styles/themes/${ id }/typography.css`
+  params = Object.fromEntries(params.entries());
+
+  const docsURLs = {
+    colors: '/docs/themes/',
+    palette: '/docs/palettes/',
+    typography: '/docs/themes/'
  };
  const icons = {
    colors: 'palette',
    palette: 'swatchbook',
+    brand: 'droplet',
    typography: 'font-case'
-  }
+  };

  for (let link of document.querySelectorAll('link.mix-and-match')) {
    link.remove();
  }

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

  for (let name in stylesheetURLs) {
-    if (params.get(name)) {
-      let url = stylesheetURLs[name](params.get(name));
-      script.insertAdjacentHTML('afterend', `<link rel="stylesheet" href="${ url }" class="mix-and-match" />`);
-      let docsURL = (name === 'palette' ? '/docs/palettes/' : '/docs/themes/') + params.get(name) + '/';
-      let title = params.get(name).replace(/^[a-z]/g, c => c.toUpperCase());
+    let override = params[name];
+    if (override) {
+      let docsURL = docsURLs[name] ? docsURLs[name] + override + '/' : '';
+      let title = override.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> <a href="${ docsURL }">${ title }</a>`);
+      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
    }
  }

@@ -70,7 +79,7 @@ function updateTheme() {
    p.hidden = msgs.length === 0;
    if (msgs.length) {
      let icon =
-      p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
+      p.innerHTML = `<strong><wa-icon name="arrows-rotate"></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,4 +4,5 @@ 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,6 +4,7 @@ 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,4 +4,5 @@ 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,4 +4,5 @@ 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
@@ -0,0 +1,127 @@
+#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
@@ -0,0 +1,171 @@
+import { getCode } from '/assets/scripts/remix.js';
+
+await Promise.all(['wa-select', 'wa-option', 'wa-details'].map(tag => customElements.whenDefined(tag)));
+globalThis.Prism = globalThis.Prism || {};
+globalThis.Prism.manual = true;
+await import('/assets/scripts/prism.js');
+Prism.plugins.customClass.prefix('code-');
+
+const cdnUrl = document.documentElement.dataset.cdnUrl;
+
+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 URLSearchParams(location.search),
+  };
+
+  // Read URL params and apply them. This facilitates permalinks.
+  if (location.search) {
+    for (let aspect in data.params) {
+      if (data.urlParams.has(aspect)) {
+        data.params[aspect] = data.urlParams.get(aspect);
+      }
+    }
+  }
+
+  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];
+
+    if (value) {
+      data.urlParams.set(aspect, value);
+    } else {
+      data.urlParams.delete(aspect);
+    }
+
+    selects[aspect].value = value;
+  }
+
+  // Update demo URL
+  domChange(() => {
+    url.search = data.urlParams;
+    demo.src = url;
+    return new Promise(resolve => (demo.onload = resolve));
+  });
+
+  // Update page URL. If there’s already a search, replace it.
+  // We don’t want to clog the user’s history while they iterate
+  let historyAction = location.search ? 'replaceState' : 'pushState';
+  history[historyAction](null, '', `?${data.urlParams}`);
+
+  // Update code snippets
+  for (let language in codeSnippets) {
+    let codeSnippet = codeSnippets[language];
+    let copyButton = codeSnippet.previousElementSibling;
+    let code = getCode(data.baseTheme, data.params, { language, cdnUrl });
+    codeSnippet.textContent = code;
+    copyButton.value = code;
+    Prism.highlightElement(codeSnippet);
+  }
+}
+
+addEventListener('turbo:render', event => {
+  remixApp = init();
+});
--- a/docs/docs/themes/showcase.css
+++ b/docs/docs/themes/showcase.css
@@ -14,7 +14,18 @@ body,
  color: var(--wa-color-text-quiet);

  wa-icon {
-    vertical-align: middle;
+    vertical-align: -0.15em;
+  }
+
+  > 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,4 +4,5 @@ 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,5 +1,9 @@
 {
  "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 ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
+{% for hue in hues -%}
 <div class="color-name">{{ hue | capitalize }}</div>
 <ul class="color-group">
  {% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -5,6 +5,7 @@

  --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));
@@ -12,7 +13,7 @@
  display: flex;
  flex-direction: column;
  background-color: var(--wa-color-surface-default);
-  border-color: var(--wa-color-surface-border);
+  border-color: var(--border-color);
  border-radius: var(--border-radius);
  border-style: var(--wa-panel-border-style);
  box-shadow: var(--wa-shadow-s);
@@ -20,12 +21,20 @@
  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;

@@ -39,7 +48,9 @@

 .header {
  display: block;
-  border-bottom: inherit;
+  border-block-end-style: inherit;
+  border-block-end-color: var(--border-color);
+  border-block-end-width: var(--border-width);
  padding: calc(var(--spacing) / 2) var(--spacing);
 }

@@ -50,9 +61,9 @@

 .footer {
  display: block;
-  border-top: inherit;
-  border-end-start-radius: var(--inner-border-radius);
-  border-end-end-radius: var(--inner-border-radius);
+  border-block-start-style: inherit;
+  border-block-start-color: var(--border-color);
+  border-block-start-width: var(--border-width);
  padding: var(--spacing);
 }

--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -21,9 +21,10 @@ 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 - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
- * @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
- * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value. Defaults to `var(--wa-space)`.
+ * @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
+ * @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=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
+ * @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/code-demo/code-demo.ts
+++ b/src/components/code-demo/code-demo.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import recursiveQSA from '../../internal/recursive-qsa.js';
 import { HasSlotController, getInnerHTML } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import '../icon/icon.js';
@@ -325,25 +326,6 @@ function absolutizeURLs(root: Element | DocumentFragment, base = location.href)
  }
 }

-/**
- * Get elements that match a selector within an element’s shadow tree
- * and any parent shadow trees, all the way up to the light DOM
- * @param selector
- * @param node - The node to start the search from
- */
-function recursiveQSA(selector: string, node: Node) {
-  const ret: Element[] = [];
-
-  for (let root = node; root.nodeType !== Node.DOCUMENT_NODE; ) {
-    root = root.getRootNode();
-    const elements = (root as ShadowRoot | Document).querySelectorAll(selector);
-
-    ret.push(...elements);
-  }
-
-  return ret;
-}
-
 function dedent(code: string) {
  // Remove blank lines at the start and end
  code = code.replace(/^\s*\n|\n\s*$/g, '');
--- a/src/components/isolate/isolate.ts
+++ b/src/components/isolate/isolate.ts
@@ -0,0 +1,48 @@
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import recursiveQSA from '../../internal/recursive-qsa.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+
+/**
+ * @summary Render a piece of code in shadow DOM. An alternative to DSD that plays nicely with DOM operations like cloning etc.
+ * @documentation https://backers.webawesome.com/docs/components/isolate
+ * @status experimental
+ * @since 3.0
+ *
+ */
+@customElement('wa-isolate')
+export default class WaIsolate extends WebAwesomeElement {
+  /** Includes resources and other elements from the surrounding page */
+  @property({ reflect: true }) include?: string;
+
+  render() {
+    return unsafeHTML(this.getShadowHTML());
+  }
+
+  // TODO memoize this and only update if:
+  // - this.include changes
+  // - elements have been added/removed that match the selector
+  // - Element contents have changed
+  private getShadowHTML(): string {
+    let html = '';
+
+    if (this.ownerDocument) {
+      if (this.include) {
+        let includedElements = recursiveQSA(this.include, this);
+        html += includedElements.map(el => el.outerHTML).join('\n');
+      }
+
+      // Get template elements from the light DOM
+      const templates = Array.from(this.querySelectorAll(':scope > template'));
+      html += templates.map(template => template.innerHTML).join('\n');
+    }
+
+    return html;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wa-isolate': WaIsolate;
+  }
+}
--- a/src/components/menu-item/menu-item.test.ts
+++ b/src/components/menu-item/menu-item.test.ts
@@ -60,9 +60,16 @@ describe('<wa-menu-item>', () => {
        });
      });

-      it('should return a text label when calling getTextLabel()', async () => {
+      it('defaultLabel should return a text label', async () => {
        const el = await fixture<WaMenuItem>(html` <wa-menu-item>Test</wa-menu-item> `);
-        expect(el.getTextLabel()).to.equal('Test');
+        expect(el.defaultLabel).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 () => {
@@ -107,7 +114,7 @@ describe('<wa-menu-item>', () => {
        expect(submenuSlot.hidden).to.be.true;
      });

-      it('should render an wa-popup if the slot="submenu" attribute is present', async () => {
+      it('should render a 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,9 +1,8 @@
 import type { PropertyValues } from 'lit';
 import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getTextContent } from '../../internal/slot.js';
-import { watch } from '../../internal/watch.js';
+import getText from '../../internal/get-text.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -43,7 +42,6 @@ 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;
@@ -64,6 +62,36 @@ 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.
   */
@@ -75,6 +103,7 @@ export default class WaMenuItem extends WebAwesomeElement {
    super.connectedCallback();
    this.addEventListener('click', this.handleHostClick);
    this.addEventListener('mouseover', this.handleMouseOver);
+    this.updateDefaultLabel();
  }

  disconnectedCallback() {
@@ -93,17 +122,10 @@ export default class WaMenuItem extends WebAwesomeElement {
  }

  private handleDefaultSlotChange() {
-    const textLabel = this.getTextLabel();
-
-    // Ignore the first time the label is set
-    if (typeof this.cachedTextLabel === 'undefined') {
-      this.cachedTextLabel = textLabel;
-      return;
-    }
+    let labelChanged = this.updateDefaultLabel();

    // When the label changes, emit a slotchange event so parent controls see it
-    if (textLabel !== this.cachedTextLabel) {
-      this.cachedTextLabel = textLabel;
+    if (labelChanged) {
      /** @internal - prevent the CEM from recording this event */
      this.dispatchEvent(new Event('slotchange', { bubbles: true, composed: false, cancelable: false }));
    }
@@ -122,41 +144,48 @@ export default class WaMenuItem extends WebAwesomeElement {
    event.stopPropagation();
  };

-  @watch('checked')
-  handleCheckedChange() {
-    // For proper accessibility, users have to use type="checkbox" to use the checked attribute
-    if (this.checked && this.type !== 'checkbox') {
-      this.checked = false;
-      return;
+  updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('checked')) {
+      // For proper accessibility, users have to use type="checkbox" to use the checked attribute
+      if (this.checked && this.type !== 'checkbox') {
+        this.checked = false;
+        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');
+      }
    }

-    // 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')) {
+      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    }
+
+    if (changedProperties.has('type')) {
+      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');
+      }
    }
  }

-  @watch('disabled')
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-  }
+  private updateDefaultLabel() {
+    let oldValue = this.defaultLabel;
+    this.defaultLabel = getText(this).trim();
+    let changed = this.defaultLabel !== oldValue;

-  @watch('type')
-  handleTypeChange() {
-    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');
+    if (!this._label && changed) {
+      // Uses default label, and it has changed
+      this.requestUpdate('label', oldValue);
    }
-  }

-  /** Returns a text label based on the contents of the menu item's default slot. */
-  getTextLabel() {
-    return getTextContent(this.defaultSlot);
+    return changed;
  }

  isSubmenu() {
--- a/src/components/option/option.css
+++ b/src/components/option/option.css
@@ -8,13 +8,7 @@
  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;
@@ -25,19 +19,23 @@
  cursor: pointer;
 }

-:host(:not([disabled])) .option--hover:not(.option--current) {
+:host(:focus) {
+  outline: none;
+}
+
+:host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
  background-color: var(--background-color-hover);
  color: var(--text-color-hover);
 }

-.option--current,
-:host([disabled]) .option--current {
+:host(:state(current)),
+:host([disabled]:state(current)) {
  background-color: var(--background-color-current);
  color: var(--text-color-current);
  opacity: 1;
 }

-:host([disabled]) .option {
+:host([disabled]) {
  outline: none;
  opacity: 0.5;
  cursor: not-allowed;
@@ -48,7 +46,7 @@
  display: inline-block;
 }

-.option .check {
+.check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
@@ -58,7 +56,7 @@
  width: var(--wa-space-xl);
 }

-.option--selected .check {
+:host(:state(selected)) .check {
  visibility: visible;
 }

@@ -78,7 +76,7 @@
 }

@media (forced-colors: active) {
-  :host(:hover:not([aria-disabled='true'])) .option {
+  :host(:hover:not([aria-disabled='true'])) {
    outline: dashed 1px SelectedItem;
    outline-offset: -1px;
  }
--- a/src/components/option/option.test.ts
+++ b/src/components/option/option.test.ts
@@ -23,6 +23,7 @@ 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');
      });

@@ -44,9 +45,16 @@ describe('<wa-option>', () => {
        expect(el.value).to.equal('10');
      });

-      it('should escape HTML when calling getTextLabel()', async () => {
+      it('defaultLabel should escape HTML', async () => {
        const el = await fixture<WaOption>(html` <wa-option><strong>Option</strong></wa-option> `);
-        expect(el.getTextLabel()).to.equal('Option');
+        expect(el.defaultLabel).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 { classMap } from 'lit/directives/class-map.js';
-import { watch } from '../../internal/watch.js';
+import getText from '../../internal/get-text.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -25,10 +25,13 @@ 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 {
@@ -40,9 +43,10 @@ export default class WaOption extends WebAwesomeElement {

  @query('.label') defaultSlot: HTMLSlotElement;

-  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-  @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
+  // Set via the parent select
+  @state() current = false;
+
+  @state() selected = false;

  /**
   * The option's value. When selected, the containing form control will receive this value. The value must be unique
@@ -54,13 +58,56 @@ 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(() => {
@@ -74,84 +121,75 @@ export default class WaOption extends WebAwesomeElement {
    }
  }

-  private handleMouseEnter() {
-    this.hasHover = true;
-  }
+  private handleHover = (event: Event) => {
+    // We need this because Safari doesn't honor :hover styles while dragging
+    // Testcase: https://codepen.io/leaverou/pen/VYZOOjy
+    if (event.type === 'mouseenter') {
+      this.toggleCustomState('hover', true);
+    } else if (event.type === 'mouseleave') {
+      this.toggleCustomState('hover', false);
+    }
+  };

-  private handleMouseLeave() {
-    this.hasHover = false;
-  }
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);

-  @watch('disabled')
-  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('disabled')) {
+      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
    }

-    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, '_');
+    if (changedProperties.has('selected')) {
+      this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+      this.toggleCustomState('selected', this.selected);
+    }
+
+    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);
    }
  }

-  /** Returns a plain text label based on the option's content. */
-  getTextLabel() {
-    const nodes = this.childNodes;
-    let label = '';
+  private updateDefaultLabel() {
+    let oldValue = this.defaultLabel;
+    this.defaultLabel = getText(this).trim();
+    let changed = this.defaultLabel !== oldValue;

-    [...nodes].forEach(node => {
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        if (!(node as HTMLElement).hasAttribute('slot')) {
-          label += (node as HTMLElement).textContent;
-        }
-      }
+    if (!this._label && changed) {
+      // Uses default label, and it has changed
+      this.requestUpdate('label', oldValue);
+    }

-      if (node.nodeType === Node.TEXT_NODE) {
-        label += node.textContent;
-      }
-    });
-
-    return label.trim();
+    return changed;
  }

  render() {
    return html`
-      <div
-        part="base"
-        class=${classMap({
-          option: true,
-          'option--current': this.current,
-          'option--selected': this.selected,
-          'option--hover': this.hasHover,
-        })}
-        @mouseenter=${this.handleMouseEnter}
-        @mouseleave=${this.handleMouseLeave}
-      >
-        <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>
+      <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>
    `;
  }
 }
--- 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.getTextLabel()}
+          ${option.label}
        </wa-tag>
      `;
    };
@@ -437,7 +437,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
      }

      for (const option of allOptions) {
-        const label = option.getTextLabel().toLowerCase();
+        const label = option.label.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?.getTextLabel?.() ?? '';
+      this.displayLabel = selectedOption?.label ?? '';
    }

    // Update validity
--- a/src/internal/get-text.ts
+++ b/src/internal/get-text.ts
@@ -0,0 +1,46 @@
+/**
+ * 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/recursive-qsa.ts
+++ b/src/internal/recursive-qsa.ts
@@ -0,0 +1,18 @@
+/**
+ * Get elements that match a selector within an element’s shadow tree
+ * and any parent shadow trees, all the way up to the light DOM
+ * @param selector
+ * @param node - The node to start the search from
+ */
+export default function recursiveQSA(selector: string, node: Node) {
+  const ret: Element[] = [];
+
+  for (let root = node; root.nodeType !== Node.DOCUMENT_NODE; ) {
+    root = root.getRootNode();
+    const elements = (root as ShadowRoot | Document).querySelectorAll(selector);
+
+    ret.push(...elements);
+  }
+
+  return ret;
+}
--- 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,23 +90,3 @@ 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/blue.css
+++ b/src/styles/brand/blue.css
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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
@@ -0,0 +1,18 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --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/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -14,6 +14,7 @@
  --wa-color-red-10: #36130a /* oklch(23.979% 0.05887 35.518) */;
  --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: #fff2b8 /* oklch(95.764% 0.07527 96.955) */;
  --wa-color-yellow-90: #ffe578 /* oklch(92.163% 0.13215 96.194) */;
@@ -27,6 +28,7 @@
  --wa-color-yellow-10: #2c1912 /* oklch(23.678% 0.03339 40.974) */;
  --wa-color-yellow-05: #1d0e0a /* oklch(18.423% 0.02718 35.681) */;
  --wa-color-yellow: var(--wa-color-yellow-90);
+  --wa-color-yellow-key: 90;

  --wa-color-green-95: #dcf8ea /* oklch(95.5% 0.03463 164.16) */;
  --wa-color-green-90: #bcf1d8 /* oklch(91.473% 0.06399 164.58) */;
@@ -40,19 +42,21 @@
  --wa-color-green-10: #00231b /* oklch(22.853% 0.04344 174.1) */;
  --wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
  --wa-color-green: var(--wa-color-green-60);
+  --wa-color-green-key: 60;

-  --wa-color-teal-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
-  --wa-color-teal-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
-  --wa-color-teal-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
-  --wa-color-teal-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
-  --wa-color-teal-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
-  --wa-color-teal-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
-  --wa-color-teal-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
-  --wa-color-teal-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
-  --wa-color-teal-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
-  --wa-color-teal-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
-  --wa-color-teal-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
-  --wa-color-teal: var(--wa-color-teal-80);
+  --wa-color-cyan-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
+  --wa-color-cyan-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
+  --wa-color-cyan-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
+  --wa-color-cyan-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
+  --wa-color-cyan-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
+  --wa-color-cyan-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
+  --wa-color-cyan-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
+  --wa-color-cyan-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
+  --wa-color-cyan-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
+  --wa-color-cyan-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
+  --wa-color-cyan-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
+  --wa-color-cyan: var(--wa-color-cyan-80);
+  --wa-color-cyan-key: 80;

  --wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
  --wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
@@ -66,6 +70,7 @@
  --wa-color-blue-10: #101d35 /* oklch(23.292% 0.05008 261.75) */;
  --wa-color-blue-05: #0a1222 /* oklch(18.375% 0.0352 263.19) */;
  --wa-color-blue: var(--wa-color-blue-60);
+  --wa-color-blue-key: 60;

  --wa-color-indigo-95: #f5efff /* oklch(96.142% 0.02215 302.94) */;
  --wa-color-indigo-90: #ede0ff /* oklch(92.64% 0.04374 304.51) */;
@@ -79,19 +84,21 @@
  --wa-color-indigo-10: #210e53 /* oklch(24.589% 0.11518 287.13) */;
  --wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
  --wa-color-indigo: var(--wa-color-indigo-50);
+  --wa-color-indigo-key: 50;

-  --wa-color-violet-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
-  --wa-color-violet-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
-  --wa-color-violet-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
-  --wa-color-violet-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
-  --wa-color-violet-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
-  --wa-color-violet-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
-  --wa-color-violet-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
-  --wa-color-violet-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
-  --wa-color-violet-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
-  --wa-color-violet-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
-  --wa-color-violet-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
+  --wa-color-purple-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
+  --wa-color-purple-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
+  --wa-color-purple-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
+  --wa-color-purple-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
+  --wa-color-purple-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
+  --wa-color-purple-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
+  --wa-color-purple-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
+  --wa-color-purple-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
+  --wa-color-purple-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
+  --wa-color-purple-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
+  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-purple-key: 50;

  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
  --wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
@@ -105,4 +112,5 @@
  --wa-color-gray-10: #012034 /* oklch(23.295% 0.05299 241.23) */;
  --wa-color-gray-05: #001421 /* oklch(18.122% 0.03959 237.04) */;
  --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
@@ -14,6 +14,7 @@
  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
  --wa-color-red-05: #300000 /* oklch(19.415% 0.07967 29.234) */;
  --wa-color-red: var(--wa-color-red-50);
+  --wa-color-red-key: 50;

  --wa-color-yellow-95: #fef3c1 /* oklch(96.062% 0.06532 97.08) */;
  --wa-color-yellow-90: #fee682 /* oklch(92.403% 0.1233 96.206) */;
@@ -27,32 +28,35 @@
  --wa-color-yellow-10: #341500 /* oklch(23.823% 0.06026 53.274) */;
  --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
  --wa-color-yellow: var(--wa-color-yellow-60);
+  --wa-color-yellow-key: 60;

-  --wa-color-green-95: #e0fae4 /* oklch(96.026% 0.03986 149.82) */;
-  --wa-color-green-90: #baf4c2 /* oklch(91.456% 0.0897 148.52) */;
-  --wa-color-green-80: #73e085 /* oklch(81.974% 0.16188 147.55) */;
-  --wa-color-green-70: #46c65c /* oklch(73.25% 0.18463 146.42) */;
-  --wa-color-green-60: #33aa49 /* oklch(65.121% 0.17208 146.32) */;
-  --wa-color-green-50: #2a863c /* oklch(54.872% 0.13954 146.82) */;
-  --wa-color-green-40: #20662e /* oklch(45.254% 0.11199 147.1) */;
-  --wa-color-green-30: #194f24 /* oklch(38.029% 0.09087 147.43) */;
-  --wa-color-green-20: #123a1a /* oklch(31.086% 0.07165 147.58) */;
-  --wa-color-green-10: #0b2210 /* oklch(22.733% 0.04522 148.82) */;
-  --wa-color-green-05: #07150a /* oklch(17.871% 0.03021 149.94) */;
+  --wa-color-green-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
+  --wa-color-green-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
+  --wa-color-green-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
+  --wa-color-green-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
+  --wa-color-green-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
+  --wa-color-green-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
+  --wa-color-green-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
+  --wa-color-green-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
+  --wa-color-green-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
+  --wa-color-green-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
+  --wa-color-green-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
  --wa-color-green: var(--wa-color-green-70);
+  --wa-color-green-key: 70;

-  --wa-color-teal-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
-  --wa-color-teal-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
-  --wa-color-teal-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
-  --wa-color-teal-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
-  --wa-color-teal-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
-  --wa-color-teal-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
-  --wa-color-teal-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
-  --wa-color-teal-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
-  --wa-color-teal-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
-  --wa-color-teal-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
-  --wa-color-teal-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
-  --wa-color-teal: var(--wa-color-teal-70);
+  --wa-color-cyan-95: #dcf9fc /* oklch(96.213% 0.03042 204.23) */;
+  --wa-color-cyan-90: #aff0f6 /* oklch(91.368% 0.06543 203.24) */;
+  --wa-color-cyan-80: #69dae9 /* oklch(82.807% 0.10458 206.97) */;
+  --wa-color-cyan-70: #2bbfd4 /* oklch(74.03% 0.11967 209.65) */;
+  --wa-color-cyan-60: #12a3b8 /* oklch(65.721% 0.1115 211.17) */;
+  --wa-color-cyan-50: #0c8195 /* oklch(55.546% 0.09532 213.91) */;
+  --wa-color-cyan-40: #096272 /* oklch(45.73% 0.07805 214.43) */;
+  --wa-color-cyan-30: #074c59 /* oklch(38.429% 0.06506 214.82) */;
+  --wa-color-cyan-20: #063842 /* oklch(31.484% 0.05211 215.06) */;
+  --wa-color-cyan-10: #032127 /* oklch(22.892% 0.03684 213.41) */;
+  --wa-color-cyan-05: #021518 /* oklch(18.045% 0.02758 207.97) */;
+  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-cyan-key: 70;

  --wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
  --wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
@@ -66,6 +70,7 @@
  --wa-color-blue-10: #071f35 /* oklch(23.365% 0.05197 249.19) */;
  --wa-color-blue-05: #051321 /* oklch(18.208% 0.03553 248.92) */;
  --wa-color-blue: var(--wa-color-blue-60);
+  --wa-color-blue-key: 60;

  --wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
  --wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
@@ -79,19 +84,21 @@
  --wa-color-indigo-10: #121a43 /* oklch(23.813% 0.07786 271) */;
  --wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
  --wa-color-indigo: var(--wa-color-indigo-50);
+  --wa-color-indigo-key: 50;

-  --wa-color-violet-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
-  --wa-color-violet-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
-  --wa-color-violet-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
-  --wa-color-violet-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
-  --wa-color-violet-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
-  --wa-color-violet-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
-  --wa-color-violet-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
-  --wa-color-violet-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
-  --wa-color-violet-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
-  --wa-color-violet-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
-  --wa-color-violet-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
+  --wa-color-purple-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
+  --wa-color-purple-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
+  --wa-color-purple-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
+  --wa-color-purple-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
+  --wa-color-purple-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
+  --wa-color-purple-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
+  --wa-color-purple-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
+  --wa-color-purple-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
+  --wa-color-purple-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
+  --wa-color-purple-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
+  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-purple-key: 50;

  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
  --wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
@@ -105,4 +112,5 @@
  --wa-color-gray-10: #0e1e35 /* oklch(23.442% 0.04969 257.55) */;
  --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,96 +2,103 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-classic {
-  --wa-color-red-95: #feeeee /* oklch(96.175% 0.01736 17.459) */;
-  --wa-color-red-90: #fedede /* oklch(92.701% 0.03551 17.81) */;
-  --wa-color-red-80: #fdb8b8 /* oklch(84.646% 0.08038 18.878) */;
-  --wa-color-red-70: #fa9292 /* oklch(76.951% 0.12587 20.376) */;
-  --wa-color-red-60: #ee6c6c /* oklch(68.861% 0.16125 22.227) */;
-  --wa-color-red-50: #d43c3c /* oklch(58.269% 0.18916 25.263) */;
-  --wa-color-red-40: #ac1e1e /* oklch(48.229% 0.17712 27.066) */;
-  --wa-color-red-30: #640f0f /* oklch(32.787% 0.11797 26.73) */;
-  --wa-color-red-20: #631111 /* oklch(32.78% 0.11503 26.34) */;
-  --wa-color-red-10: #3b0d0d /* oklch(24.059% 0.07249 24.391) */;
-  --wa-color-red-05: #260606 /* oklch(18.371% 0.05502 24.325) */;
+  --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
+  --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
+  --wa-color-red-80: #ffb8b4 /* oklch(84.753% 0.08313 22.598) */;
+  --wa-color-red-70: #fd908e /* oklch(76.913% 0.13219 21.705) */;
+  --wa-color-red-60: #f46766 /* oklch(68.945% 0.17423 23.179) */;
+  --wa-color-red-50: #df2f2e /* oklch(58.922% 0.21141 26.911) */;
+  --wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
+  --wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
+  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
+  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
+  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
  --wa-color-red: var(--wa-color-red-50);
+  --wa-color-red-key: 50;

-  --wa-color-yellow-95: #fef2c4 /* oklch(95.928% 0.0607 95.131) */;
-  --wa-color-yellow-90: #fde494 /* oklch(92.185% 0.10303 92.708) */;
-  --wa-color-yellow-80: #fbc129 /* oklch(84.088% 0.16334 85.185) */;
-  --wa-color-yellow-70: #f29c0b /* oklch(76.145% 0.1631 70.065) */;
-  --wa-color-yellow-60: #db7e13 /* oklch(68.058% 0.15388 60.67) */;
-  --wa-color-yellow-50: #af6005 /* oklch(56.918% 0.13324 58.984) */;
-  --wa-color-yellow-40: #904207 /* oklch(47.288% 0.12241 49.414) */;
-  --wa-color-yellow-30: #713406 /* oklch(40.01% 0.10093 50.35) */;
-  --wa-color-yellow-20: #532408 /* oklch(32.223% 0.07974 47.215) */;
-  --wa-color-yellow-10: #321606 /* oklch(23.771% 0.05225 48.671) */;
-  --wa-color-yellow-05: #1f0c01 /* oklch(18.046% 0.04102 55.818) */;
-  --wa-color-yellow: var(--wa-color-yellow-80);
+  --wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
+  --wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
+  --wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;
+  --wa-color-yellow-70: #e9a010 /* oklch(75.825% 0.15689 75.537) */;
+  --wa-color-yellow-60: #de7c00 /* oklch(68.073% 0.15991 59.827) */;
+  --wa-color-yellow-50: #bc5908 /* oklch(57.654% 0.1491 50.241) */;
+  --wa-color-yellow-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
+  --wa-color-yellow-30: #763104 /* oklch(40.324% 0.1093 46.564) */;
+  --wa-color-yellow-20: #572301 /* oklch(32.677% 0.08796 47.926) */;
+  --wa-color-yellow-10: #371300 /* oklch(24.001% 0.06559 47.77) */;
+  --wa-color-yellow-05: #250a00 /* oklch(18.773% 0.0519 47.039) */;
+  --wa-color-yellow: var(--wa-color-yellow-60);
+  --wa-color-yellow-key: 60;

-  --wa-color-green-95: #e9f5ed /* oklch(95.897% 0.01651 156.91) */;
-  --wa-color-green-90: #cfedd9 /* oklch(91.883% 0.04142 156.31) */;
-  --wa-color-green-80: #a2d5b4 /* oklch(82.826% 0.07031 156.17) */;
-  --wa-color-green-70: #6cc08a /* oklch(73.992% 0.11416 154.35) */;
-  --wa-color-green-60: #38a961 /* oklch(65.365% 0.14702 151.78) */;
-  --wa-color-green-50: #178640 /* oklch(54.51% 0.14175 149.98) */;
-  --wa-color-green-40: #006823 /* oklch(45.073% 0.13335 147.17) */;
-  --wa-color-green-30: #0d5026 /* oklch(38.028% 0.09504 150.7) */;
-  --wa-color-green-20: #0c391d /* oklch(30.614% 0.06954 152.08) */;
-  --wa-color-green-10: #082213 /* oklch(22.658% 0.04352 155.31) */;
-  --wa-color-green-05: #02140a /* oklch(17.084% 0.03423 159.06) */;
+  --wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
+  --wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;
+  --wa-color-green-80: #6ae095 /* oklch(81.924% 0.15151 153.52) */;
+  --wa-color-green-70: #44c670 /* oklch(73.506% 0.16742 151) */;
+  --wa-color-green-60: #21ab52 /* oklch(65.151% 0.17062 149.59) */;
+  --wa-color-green-50: #0d873f /* oklch(54.644% 0.14593 150.18) */;
+  --wa-color-green-40: #166635 /* oklch(45.105% 0.10874 151.56) */;
+  --wa-color-green-30: #115029 /* oklch(38.182% 0.09049 151.63) */;
+  --wa-color-green-20: #0a3a1c /* oklch(30.854% 0.07315 151.48) */;
+  --wa-color-green-10: #04230f /* oklch(22.692% 0.05324 151.92) */;
+  --wa-color-green-05: #021608 /* oklch(17.756% 0.04076 152.68) */;
  --wa-color-green: var(--wa-color-green-60);
+  --wa-color-green-key: 60;

-  --wa-color-teal-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
-  --wa-color-teal-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
-  --wa-color-teal-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
-  --wa-color-teal-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
-  --wa-color-teal-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
-  --wa-color-teal-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
-  --wa-color-teal-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
-  --wa-color-teal-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
-  --wa-color-teal-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
-  --wa-color-teal-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
-  --wa-color-teal-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
-  --wa-color-teal: var(--wa-color-teal-70);
+  --wa-color-cyan-95: #d8fafc /* oklch(96.149% 0.03524 200.93) */;
+  --wa-color-cyan-90: #a3f2f7 /* oklch(91.187% 0.07744 200.93) */;
+  --wa-color-cyan-80: #67dbe2 /* oklch(82.721% 0.1051 200.68) */;
+  --wa-color-cyan-70: #29c0ca /* oklch(73.859% 0.11825 201.93) */;
+  --wa-color-cyan-60: #0ca4ae /* oklch(65.523% 0.10997 202.61) */;
+  --wa-color-cyan-50: #0c828c /* oklch(55.424% 0.09237 204.53) */;
+  --wa-color-cyan-40: #0a626b /* oklch(45.428% 0.07504 206.17) */;
+  --wa-color-cyan-30: #084d55 /* oklch(38.542% 0.06312 207.36) */;
+  --wa-color-cyan-20: #06383f /* oklch(31.335% 0.05062 209.3) */;
+  --wa-color-cyan-10: #002127 /* oklch(22.739% 0.03961 211.94) */;
+  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
+  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-cyan-key: 70;

-  --wa-color-blue-95: #e5f4fe /* oklch(95.896% 0.02085 236.75) */;
-  --wa-color-blue-90: #c8ebfd /* oklch(92.061% 0.04406 230.21) */;
-  --wa-color-blue-80: #80d4fc /* oklch(83.114% 0.09915 230.17) */;
-  --wa-color-blue-70: #37bbf5 /* oklch(74.731% 0.13762 232.44) */;
-  --wa-color-blue-60: #0d9ee0 /* oklch(66.354% 0.14388 237.59) */;
-  --wa-color-blue-50: #027ab9 /* oklch(55.557% 0.13184 242.23) */;
-  --wa-color-blue-40: #015d8d /* oklch(45.762% 0.10698 241.38) */;
-  --wa-color-blue-30: #024970 /* oklch(38.805% 0.0903 241.59) */;
-  --wa-color-blue-20: #04354f /* oklch(31.306% 0.06703 238.73) */;
-  --wa-color-blue-10: #05202f /* oklch(23.154% 0.04349 236.83) */;
-  --wa-color-blue-05: #04121b /* oklch(17.393% 0.0282 236.81) */;
+  --wa-color-blue-95: #e2f6ff /* oklch(96.112% 0.0243 226.47) */;
+  --wa-color-blue-90: #c0ecff /* oklch(91.822% 0.0523 226) */;
+  --wa-color-blue-80: #7fd4fc /* oklch(83.068% 0.09979 229.91) */;
+  --wa-color-blue-70: #48b9f4 /* oklch(74.644% 0.13162 235.42) */;
+  --wa-color-blue-60: #1f9de2 /* oklch(66.419% 0.14398 240.02) */;
+  --wa-color-blue-50: #007bbc /* oklch(55.956% 0.1346 242.72) */;
+  --wa-color-blue-40: #005d93 /* oklch(46.121% 0.11438 244.28) */;
+  --wa-color-blue-30: #004975 /* oklch(39.093% 0.09705 244.33) */;
+  --wa-color-blue-20: #003558 /* oklch(31.8% 0.08026 245.13) */;
+  --wa-color-blue-10: #001f36 /* oklch(23.093% 0.05763 244.59) */;
+  --wa-color-blue-05: #001325 /* oklch(18.113% 0.04675 246.17) */;
  --wa-color-blue: var(--wa-color-blue-60);
+  --wa-color-blue-key: 60;

-  --wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
-  --wa-color-indigo-90: #dee5fd /* oklch(92.388% 0.03348 272.78) */;
-  --wa-color-indigo-80: #bec8f2 /* oklch(83.901% 0.05981 274.54) */;
-  --wa-color-indigo-70: #9dabf0 /* oklch(75.639% 0.10065 274.93) */;
-  --wa-color-indigo-60: #818cf7 /* oklch(67.953% 0.15693 276.94) */;
-  --wa-color-indigo-50: #6063eb /* oklch(57.366% 0.20061 277.06) */;
-  --wa-color-indigo-40: #4941d3 /* oklch(48.251% 0.21482 277.09) */;
-  --wa-color-indigo-30: #3930ad /* oklch(40.969% 0.18954 277.17) */;
-  --wa-color-indigo-20: #29247a /* oklch(32.82% 0.14032 277.91) */;
-  --wa-color-indigo-10: #191843 /* oklch(23.918% 0.07895 279.64) */;
-  --wa-color-indigo-05: #0f0e26 /* oklch(18.064% 0.04799 282.35) */;
+  --wa-color-indigo-95: #eff2ff /* oklch(96.265% 0.01769 275.64) */;
+  --wa-color-indigo-90: #e0e5ff /* oklch(92.602% 0.03569 277.03) */;
+  --wa-color-indigo-80: #bec7ff /* oklch(84.198% 0.07895 277.45) */;
+  --wa-color-indigo-70: #9da9fc /* oklch(75.797% 0.11994 276.85) */;
+  --wa-color-indigo-60: #808bf8 /* oklch(67.752% 0.15983 276.9) */;
+  --wa-color-indigo-50: #6163f0 /* oklch(57.814% 0.20686 277.14) */;
+  --wa-color-indigo-40: #4a41d4 /* oklch(48.413% 0.21583 277.35) */;
+  --wa-color-indigo-30: #3b369d /* oklch(40.562% 0.16149 278.54) */;
+  --wa-color-indigo-20: #2b2872 /* oklch(32.937% 0.12339 278.99) */;
+  --wa-color-indigo-10: #191748 /* oklch(24.174% 0.08853 279.28) */;
+  --wa-color-indigo-05: #0e0d31 /* oklch(18.772% 0.06933 278.6) */;
  --wa-color-indigo: var(--wa-color-indigo-40);
+  --wa-color-indigo-key: 40;

-  --wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
-  --wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
-  --wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
-  --wa-color-violet-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
-  --wa-color-violet-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
-  --wa-color-violet-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
-  --wa-color-violet-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
-  --wa-color-violet-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
-  --wa-color-violet-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
-  --wa-color-violet-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
-  --wa-color-violet-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #f6f0ff /* oklch(96.412% 0.02086 304.04) */;
+  --wa-color-purple-90: #eee0ff /* oklch(92.72% 0.04406 305.89) */;
+  --wa-color-purple-80: #dcbdff /* oklch(84.694% 0.09583 305.85) */;
+  --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
+  --wa-color-purple-60: #b874ff /* oklch(69.085% 0.2024 304.19) */;
+  --wa-color-purple-50: #9f46ee /* oklch(59.304% 0.23941 304.1) */;
+  --wa-color-purple-40: #7e2ac2 /* oklch(49.181% 0.21892 304.24) */;
+  --wa-color-purple-30: #632198 /* oklch(41.448% 0.18071 304.64) */;
+  --wa-color-purple-20: #4a1574 /* oklch(33.839% 0.15043 304.56) */;
+  --wa-color-purple-10: #2e094b /* oklch(24.855% 0.11212 304.52) */;
+  --wa-color-purple-05: #1e0433 /* oklch(19.319% 0.0877 304.85) */;
+  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-purple-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) */;
@@ -105,4 +112,5 @@
  --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
@@ -14,6 +14,7 @@
  --wa-color-red-10: #400712 /* oklch(24.506% 0.08542 15.881) */;
  --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: #fdf3ba /* oklch(95.838% 0.07362 99.275) */;
  --wa-color-yellow-90: #fee590 /* oklch(92.407% 0.10827 93.577) */;
@@ -27,6 +28,7 @@
  --wa-color-yellow-10: #361300 /* oklch(23.81% 0.06438 48.467) */;
  --wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
  --wa-color-yellow: var(--wa-color-yellow-70);
+  --wa-color-yellow-key: 70;

  --wa-color-green-95: #e2f9e2 /* oklch(95.91% 0.03884 145.26) */;
  --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
@@ -40,19 +42,21 @@
  --wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
  --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-teal-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
-  --wa-color-teal-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
-  --wa-color-teal-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
-  --wa-color-teal-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
-  --wa-color-teal-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
-  --wa-color-teal-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
-  --wa-color-teal-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
-  --wa-color-teal-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
-  --wa-color-teal-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
-  --wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
-  --wa-color-teal-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
-  --wa-color-teal: var(--wa-color-teal-70);
+  --wa-color-cyan-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
+  --wa-color-cyan-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
+  --wa-color-cyan-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
+  --wa-color-cyan-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
+  --wa-color-cyan-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
+  --wa-color-cyan-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
+  --wa-color-cyan-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
+  --wa-color-cyan-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
+  --wa-color-cyan-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
+  --wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
+  --wa-color-cyan-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
+  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-cyan-key: 70;

  --wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
  --wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
@@ -66,6 +70,7 @@
  --wa-color-blue-10: #001c45 /* oklch(23.545% 0.08493 257.39) */;
  --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: #f0f2fe /* oklch(96.311% 0.01617 278.51) */;
  --wa-color-indigo-90: #e2e4fc /* oklch(92.459% 0.03255 281.95) */;
@@ -79,19 +84,21 @@
  --wa-color-indigo-10: #1c006a /* oklch(25.437% 0.15565 278.46) */;
  --wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
  --wa-color-indigo: var(--wa-color-indigo-40);
+  --wa-color-indigo-key: 40;

-  --wa-color-violet-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
-  --wa-color-violet-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
-  --wa-color-violet-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
-  --wa-color-violet-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
-  --wa-color-violet-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
-  --wa-color-violet-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
-  --wa-color-violet-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
-  --wa-color-violet-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
-  --wa-color-violet-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
-  --wa-color-violet-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
-  --wa-color-violet-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
+  --wa-color-purple-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
+  --wa-color-purple-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
+  --wa-color-purple-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
+  --wa-color-purple-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
+  --wa-color-purple-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
+  --wa-color-purple-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
+  --wa-color-purple-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
+  --wa-color-purple-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
+  --wa-color-purple-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
+  --wa-color-purple-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
+  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-purple-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) */;
@@ -105,4 +112,5 @@
  --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
@@ -14,6 +14,7 @@
  --wa-color-red-10: #44000d /* oklch(24.5% 0.09818 18.249) */;
  --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: #f5f2e5 /* oklch(95.994% 0.01748 96.105) */;
  --wa-color-yellow-90: #ece6cc /* oklch(92.281% 0.03499 96.315) */;
@@ -27,6 +28,7 @@
  --wa-color-yellow-10: #2b1a02 /* oklch(23.457% 0.04659 73.352) */;
  --wa-color-yellow-05: #191008 /* oklch(18.243% 0.02161 62.915) */;
  --wa-color-yellow: var(--wa-color-yellow-60);
+  --wa-color-yellow-key: 60;

  --wa-color-green-95: #ecf4f1 /* oklch(96.029% 0.00935 171.8) */;
  --wa-color-green-90: #dae9e3 /* oklch(92.11% 0.01786 170.06) */;
@@ -40,19 +42,21 @@
  --wa-color-green-10: #002316 /* oklch(22.679% 0.04824 164.14) */;
  --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-teal-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
-  --wa-color-teal-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
-  --wa-color-teal-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
-  --wa-color-teal-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
-  --wa-color-teal-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
-  --wa-color-teal-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
-  --wa-color-teal-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
-  --wa-color-teal-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
-  --wa-color-teal-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
-  --wa-color-teal-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
-  --wa-color-teal-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
-  --wa-color-teal: var(--wa-color-teal-50);
+  --wa-color-cyan-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
+  --wa-color-cyan-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
+  --wa-color-cyan-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
+  --wa-color-cyan-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
+  --wa-color-cyan-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
+  --wa-color-cyan-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
+  --wa-color-cyan-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
+  --wa-color-cyan-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
+  --wa-color-cyan-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
+  --wa-color-cyan-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
+  --wa-color-cyan-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
+  --wa-color-cyan: var(--wa-color-cyan-50);
+  --wa-color-cyan-key: 50;

  --wa-color-blue-95: #ebf3fa /* oklch(96.015% 0.01271 244.25) */;
  --wa-color-blue-90: #d8e8f5 /* oklch(92.295% 0.02463 242.35) */;
@@ -66,6 +70,7 @@
  --wa-color-blue-10: #001f37 /* oklch(23.169% 0.0591 245.63) */;
  --wa-color-blue-05: #001221 /* oklch(17.475% 0.04178 242.4) */;
  --wa-color-blue: var(--wa-color-blue-50);
+  --wa-color-blue-key: 50;

  --wa-color-indigo-95: #f1f1fa /* oklch(96.073% 0.01199 286.17) */;
  --wa-color-indigo-90: #e4e4f6 /* oklch(92.422% 0.02428 285.92) */;
@@ -79,19 +84,21 @@
  --wa-color-indigo-10: #171844 /* oklch(23.835% 0.08107 277.33) */;
  --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-violet-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
-  --wa-color-violet-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
-  --wa-color-violet-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
-  --wa-color-violet-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
-  --wa-color-violet-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
-  --wa-color-violet-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
-  --wa-color-violet-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
-  --wa-color-violet-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
-  --wa-color-violet-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
-  --wa-color-violet-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
-  --wa-color-violet-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
-  --wa-color-violet: var(--wa-color-violet-40);
+  --wa-color-purple-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
+  --wa-color-purple-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
+  --wa-color-purple-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
+  --wa-color-purple-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
+  --wa-color-purple-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
+  --wa-color-purple-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
+  --wa-color-purple-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
+  --wa-color-purple-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
+  --wa-color-purple-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
+  --wa-color-purple-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
+  --wa-color-purple-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
+  --wa-color-purple: var(--wa-color-purple-40);
+  --wa-color-purple-key: 40;

  --wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
  --wa-color-gray-90: #e6e5e8 /* oklch(92.354% 0.00415 301.42) */;
@@ -105,4 +112,5 @@
  --wa-color-gray-10: #1f1c23 /* oklch(23.288% 0.01397 304.73) */;
  --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,6 +14,7 @@
  --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) */;
@@ -27,6 +28,7 @@
  --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: #e1f9e1 /* oklch(95.814% 0.04053 145.25) */;
  --wa-color-green-90: #bff2c0 /* oklch(91.282% 0.08527 145.33) */;
@@ -40,19 +42,21 @@
  --wa-color-green-10: #01230a /* oklch(22.432% 0.06139 149.06) */;
  --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-teal-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
-  --wa-color-teal-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
-  --wa-color-teal-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
-  --wa-color-teal-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
-  --wa-color-teal-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
-  --wa-color-teal-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
-  --wa-color-teal-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
-  --wa-color-teal-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
-  --wa-color-teal-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
-  --wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
-  --wa-color-teal-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
-  --wa-color-teal: var(--wa-color-teal-40);
+  --wa-color-cyan-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
+  --wa-color-cyan-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
+  --wa-color-cyan-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
+  --wa-color-cyan-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
+  --wa-color-cyan-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
+  --wa-color-cyan-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
+  --wa-color-cyan-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
+  --wa-color-cyan-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
+  --wa-color-cyan-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
+  --wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
+  --wa-color-cyan-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
+  --wa-color-cyan: var(--wa-color-cyan-40);
+  --wa-color-cyan-key: 40;

  --wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
  --wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
@@ -66,6 +70,7 @@
  --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: #f7efff /* oklch(96.298% 0.02281 308.2) */;
  --wa-color-indigo-90: #ede1ff /* oklch(92.831% 0.04213 303.7) */;
@@ -79,19 +84,21 @@
  --wa-color-indigo-10: #24045f /* oklch(25.226% 0.1388 287.21) */;
  --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-violet-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
-  --wa-color-violet-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
-  --wa-color-violet-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
-  --wa-color-violet-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
-  --wa-color-violet-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
-  --wa-color-violet-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
-  --wa-color-violet-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
-  --wa-color-violet-30: #5d366c /* oklch(40.395% 0.09808 316) */;
-  --wa-color-violet-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
-  --wa-color-violet-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
-  --wa-color-violet-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
-  --wa-color-violet: var(--wa-color-violet-40);
+  --wa-color-purple-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
+  --wa-color-purple-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
+  --wa-color-purple-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
+  --wa-color-purple-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
+  --wa-color-purple-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
+  --wa-color-purple-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
+  --wa-color-purple-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
+  --wa-color-purple-30: #5d366c /* oklch(40.395% 0.09808 316) */;
+  --wa-color-purple-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
+  --wa-color-purple-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
+  --wa-color-purple-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
+  --wa-color-purple: var(--wa-color-purple-40);
+  --wa-color-purple-key: 40;

  --wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
  --wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
@@ -105,4 +112,5 @@
  --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
@@ -14,6 +14,7 @@
  --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: #f5f0e8 /* oklch(95.682% 0.01193 79.784) */;
  --wa-color-yellow-90: #ede4d5 /* oklch(92.192% 0.0223 80.684) */;
@@ -27,6 +28,7 @@
  --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) */;
@@ -40,19 +42,21 @@
  --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-teal-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
-  --wa-color-teal-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
-  --wa-color-teal-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
-  --wa-color-teal-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
-  --wa-color-teal-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
-  --wa-color-teal-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
-  --wa-color-teal-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
-  --wa-color-teal-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
-  --wa-color-teal-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
-  --wa-color-teal-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
-  --wa-color-teal-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
-  --wa-color-teal: var(--wa-color-teal-40);
+  --wa-color-cyan-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
+  --wa-color-cyan-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
+  --wa-color-cyan-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
+  --wa-color-cyan-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
+  --wa-color-cyan-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
+  --wa-color-cyan-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
+  --wa-color-cyan-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
+  --wa-color-cyan-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
+  --wa-color-cyan-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
+  --wa-color-cyan-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
+  --wa-color-cyan-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
+  --wa-color-cyan: var(--wa-color-cyan-40);
+  --wa-color-cyan-key: 40;

  --wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
  --wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
@@ -66,6 +70,7 @@
  --wa-color-blue-10: #101e34 /* oklch(23.495% 0.04695 259.11) */;
  --wa-color-blue-05: #081223 /* oklch(18.293% 0.03819 260.22) */;
  --wa-color-blue: var(--wa-color-blue-40);
+  --wa-color-blue-key: 40;

  --wa-color-indigo-95: #f2f2f7 /* oklch(96.257% 0.00665 286.27) */;
  --wa-color-indigo-90: #e6e5f1 /* oklch(92.619% 0.01616 289.92) */;
@@ -79,19 +84,21 @@
  --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-violet-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
-  --wa-color-violet-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
-  --wa-color-violet-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
-  --wa-color-violet-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
-  --wa-color-violet-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
-  --wa-color-violet-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
-  --wa-color-violet-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
-  --wa-color-violet-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
-  --wa-color-violet-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
-  --wa-color-violet-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
-  --wa-color-violet-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
-  --wa-color-violet: var(--wa-color-violet-40);
+  --wa-color-purple-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
+  --wa-color-purple-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
+  --wa-color-purple-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
+  --wa-color-purple-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
+  --wa-color-purple-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
+  --wa-color-purple-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
+  --wa-color-purple-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
+  --wa-color-purple-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
+  --wa-color-purple-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
+  --wa-color-purple-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
+  --wa-color-purple-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
+  --wa-color-purple: var(--wa-color-purple-40);
+  --wa-color-purple-key: 40;

  --wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
  --wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;
@@ -105,4 +112,5 @@
  --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/palettes-analyzed.js
+++ b/src/styles/color/palettes-analyzed.js
@@ -0,0 +1,66 @@
+/**
+ * Analyze palettes and export the results.
+ * ✅ Convert colors to OKLCH
+ * ✅ Find accent tint (real and clamped)
+ * More later.
+ */
+import rawPalettes from './palettes.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;
+    }
+  }
+}
+
+function clamp(min, value, max) {
+  return Math.min(Math.max(min, value), max);
+}
+
+export default palettes;
+export { rawPalettes };
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -14,6 +14,7 @@
  --wa-color-red-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
  --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: #fff497 /* oklch(95.586% 0.11473 102.45) */;
  --wa-color-yellow-90: #ffe571 /* oklch(92.08% 0.13847 96.881) */;
@@ -27,6 +28,7 @@
  --wa-color-yellow-10: #311613 /* oklch(23.859% 0.04441 27.497) */;
  --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: #dafadc /* oklch(95.411% 0.05194 146.87) */;
  --wa-color-green-90: #b9f4bc /* oklch(91.261% 0.09639 146.02) */;
@@ -40,19 +42,21 @@
  --wa-color-green-10: #00230e /* oklch(22.462% 0.05754 153.24) */;
  --wa-color-green-05: #001607 /* oklch(17.557% 0.04482 153.41) */;
  --wa-color-green: var(--wa-color-green-70);
+  --wa-color-green-key: 70;

-  --wa-color-teal-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
-  --wa-color-teal-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
-  --wa-color-teal-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
-  --wa-color-teal-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
-  --wa-color-teal-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
-  --wa-color-teal-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
-  --wa-color-teal-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
-  --wa-color-teal-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
-  --wa-color-teal-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
-  --wa-color-teal-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
-  --wa-color-teal-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
-  --wa-color-teal: var(--wa-color-teal-70);
+  --wa-color-cyan-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
+  --wa-color-cyan-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
+  --wa-color-cyan-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
+  --wa-color-cyan-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
+  --wa-color-cyan-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
+  --wa-color-cyan-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
+  --wa-color-cyan-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
+  --wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
+  --wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
+  --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
+  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
+  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-cyan-key: 70;

  --wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
  --wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
@@ -66,6 +70,7 @@
  --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
  --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: #f1efff /* oklch(95.834% 0.02142 291.74) */;
  --wa-color-indigo-90: #e7e3ff /* oklch(92.744% 0.03793 292.2) */;
@@ -79,19 +84,21 @@
  --wa-color-indigo-10: #220064 /* oklch(25.227% 0.14791 284.49) */;
  --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-violet-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
-  --wa-color-violet-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
-  --wa-color-violet-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
-  --wa-color-violet-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
-  --wa-color-violet-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
-  --wa-color-violet-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
-  --wa-color-violet-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
-  --wa-color-violet-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
-  --wa-color-violet-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
-  --wa-color-violet-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
-  --wa-color-violet-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
+  --wa-color-purple-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
+  --wa-color-purple-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
+  --wa-color-purple-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
+  --wa-color-purple-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
+  --wa-color-purple-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
+  --wa-color-purple-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
+  --wa-color-purple-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
+  --wa-color-purple-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
+  --wa-color-purple-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
+  --wa-color-purple-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
+  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-purple-key: 50;

  --wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
  --wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
@@ -105,4 +112,5 @@
  --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/tintless.js
+++ b/src/styles/color/tintless.js
@@ -7,7 +7,7 @@ import chalk from 'chalk';
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import palettes from './palettes.js';
+import palettes, { rawPalettes } from './palettes-analyzed.js';

 const __dirname = fileURLToPath(new URL('.', import.meta.url));

@@ -19,9 +19,6 @@ const selector = paletteId =>
 // Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance)
 const defaultAccent = 60;

-// Chroma tolerance: Chroma will need to differ more than this to gravitate away from defaultAccent
-const chromaTolerance = 0.000001;
-
 // Min and max allowed tints
 const minAccentTint = 40;
 const maxAccentTint = 90;
@@ -42,40 +39,29 @@ for (let paletteId in palettes) {
  for (let hue in tokens) {
    let tints = tokens[hue];

-    let maxChromaTint = defaultAccent;
-    let maxChroma = tints[defaultAccent].get('oklch.c');
-
    let tintCSS = '';

    for (let tint in tints) {
-      if (tint === '05') {
+      if (tint === '05' || !(tint > 0)) {
        // The object has both '5' and '05' keys, but '05' is out of order
+        // Also ignore non-tints
        continue;
      }

      let color = tints[tint];
-      let lchColor = color.to('oklch');
      tint = tint.padStart(2, '0');

-      if (lchColor.c > maxChroma + chromaTolerance) {
-        maxChroma = lchColor.c;
-        maxChromaTint = tint;
-      }
-
-      let lchComment = `/* ${lchColor.toString()} */`;
-
-      tintCSS = `--wa-color-${hue}-${tint}: ${color} ${lchComment};\n` + tintCSS;
+      tintCSS =
+        `--wa-color-${hue}-${tint}: ${color.toString({ format: 'hex' })} /* ${color.toString()} */;\n` + tintCSS;
    }

-    if (maxChromaTint < minAccentTint || maxChromaTint > maxAccentTint) {
-      let fakeMaxChromaTint = clamp(minAccentTint, maxChromaTint, maxAccentTint);
+    if (tints.maxChromaTint != tints.maxChromaTintRaw) {
      let huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));

      console.warn(
-        `${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(fakeMaxChromaTint)}, but peak chroma is in ${chalk.bold(maxChromaTint)} (${formatComparison(tints[maxChromaTint].get('oklch.c'), tints[fakeMaxChromaTint].get('oklch.c'))})`,
+        `${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(tints.maxChromaTint)}, but peak chroma is in ${chalk.bold(tints.maxChromaTintRaw)} (${formatComparison(tints[tints.maxChromaTintRaw].c, tints[tints.maxChromaTint].c)})`,
      );
      issueCount++;
-      maxChromaTint = fakeMaxChromaTint;

      if (prefix.trim()) {
        // First time encountering an issue with this palette
@@ -86,7 +72,8 @@ for (let paletteId in palettes) {
      }
    }

-    tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${maxChromaTint});\n`;
+    tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${tints.maxChromaTint});\n`;
+    tintCSS += `--wa-color-${hue}-key: ${tints.maxChromaTint};\n`;
    css += tintCSS + '\n';
  }

@@ -101,10 +88,6 @@ console.info(
    (issueCount > 0 ? ` ${chalk.bold(issueCount)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` : ''),
 );

-function clamp(min, value, max) {
-  return Math.min(Math.max(min, value), max);
-}
-
 /**
 * Format a comparison by rounding numbers to the lowest number of significant digits that still shows a difference.
 * @param {number} a
@@ -133,13 +116,10 @@ function hueToChalk(hue) {
    ret = chalk[hue];
  }
  switch (hue) {
-    case 'teal':
-      ret = chalk.cyan;
-      break;
    case 'indigo':
      ret = chalk.hex('#8a8beb');
      break;
-    case 'violet':
+    case 'purple':
      ret = chalk.hex('#a94dc6');
      break;
  }
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -14,6 +14,7 @@
  --wa-color-red-10: #400809 /* oklch(24.44% 0.08486 25.315) */;
  --wa-color-red-05: #2b0404 /* oklch(19.055% 0.06569 26.078) */;
  --wa-color-red: var(--wa-color-red-50);
+  --wa-color-red-key: 50;

  --wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
  --wa-color-yellow-90: #ffe759 /* oklch(92.242% 0.15928 99.624) */;
@@ -27,6 +28,7 @@
  --wa-color-yellow-10: #311704 /* oklch(23.775% 0.05173 54.627) */;
  --wa-color-yellow-05: #1f0e02 /* oklch(18.545% 0.03815 59.032) */;
  --wa-color-yellow: var(--wa-color-yellow-80);
+  --wa-color-yellow-key: 80;

  --wa-color-green-95: #d6fbe3 /* oklch(95.529% 0.04989 156.89) */;
  --wa-color-green-90: #acf5c6 /* oklch(90.962% 0.09709 155.72) */;
@@ -40,19 +42,21 @@
  --wa-color-green-10: #032311 /* oklch(22.69% 0.05156 154.92) */;
  --wa-color-green-05: #02160a /* oklch(17.815% 0.03799 156.47) */;
  --wa-color-green: var(--wa-color-green-70);
+  --wa-color-green-key: 70;

-  --wa-color-teal-95: #d1fbf2 /* oklch(95.61% 0.04472 180.87) */;
-  --wa-color-teal-90: #9bf6e4 /* oklch(91.092% 0.09113 180.19) */;
-  --wa-color-teal-80: #43e0ca /* oklch(82.113% 0.13179 181.48) */;
-  --wa-color-teal-70: #1ac4b0 /* oklch(73.775% 0.12864 181.89) */;
-  --wa-color-teal-60: #0ea798 /* oklch(65.521% 0.11439 183.58) */;
-  --wa-color-teal-50: #0e837a /* oklch(55.027% 0.0937 186.25) */;
-  --wa-color-teal-40: #11635e /* oklch(45.289% 0.07357 188.54) */;
-  --wa-color-teal-30: #134d49 /* oklch(38.278% 0.05833 188.33) */;
-  --wa-color-teal-20: #073938 /* oklch(31.345% 0.04977 192.86) */;
-  --wa-color-teal-10: #022222 /* oklch(22.914% 0.03701 194.88) */;
-  --wa-color-teal-05: #011515 /* oklch(17.806% 0.02865 194.89) */;
-  --wa-color-teal: var(--wa-color-teal-80);
+  --wa-color-cyan-95: #d1fbf2 /* oklch(95.61% 0.04472 180.87) */;
+  --wa-color-cyan-90: #9bf6e4 /* oklch(91.092% 0.09113 180.19) */;
+  --wa-color-cyan-80: #43e0ca /* oklch(82.113% 0.13179 181.48) */;
+  --wa-color-cyan-70: #1ac4b0 /* oklch(73.775% 0.12864 181.89) */;
+  --wa-color-cyan-60: #0ea798 /* oklch(65.521% 0.11439 183.58) */;
+  --wa-color-cyan-50: #0e837a /* oklch(55.027% 0.0937 186.25) */;
+  --wa-color-cyan-40: #11635e /* oklch(45.289% 0.07357 188.54) */;
+  --wa-color-cyan-30: #134d49 /* oklch(38.278% 0.05833 188.33) */;
+  --wa-color-cyan-20: #073938 /* oklch(31.345% 0.04977 192.86) */;
+  --wa-color-cyan-10: #022222 /* oklch(22.914% 0.03701 194.88) */;
+  --wa-color-cyan-05: #011515 /* oklch(17.806% 0.02865 194.89) */;
+  --wa-color-cyan: var(--wa-color-cyan-80);
+  --wa-color-cyan-key: 80;

  --wa-color-blue-95: #ebf3ff /* oklch(96.164% 0.01825 258.35) */;
  --wa-color-blue-90: #d6e7fe /* oklch(92.238% 0.03631 255.96) */;
@@ -66,6 +70,7 @@
  --wa-color-blue-10: #101b41 /* oklch(23.741% 0.07371 268.19) */;
  --wa-color-blue-05: #09102c /* oklch(18.584% 0.05736 269.49) */;
  --wa-color-blue: var(--wa-color-blue-40);
+  --wa-color-blue-key: 40;

  --wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
  --wa-color-indigo-90: #dde5ff /* oklch(92.379% 0.03641 272.07) */;
@@ -79,19 +84,21 @@
  --wa-color-indigo-10: #1b1842 /* oklch(24.014% 0.0769 282.14) */;
  --wa-color-indigo-05: #100f29 /* oklch(18.672% 0.05145 281.93) */;
  --wa-color-indigo: var(--wa-color-indigo-40);
+  --wa-color-indigo-key: 40;

-  --wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
-  --wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
-  --wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
-  --wa-color-violet-70: #cb99fd /* oklch(76.728% 0.14746 306.23) */;
-  --wa-color-violet-60: #b875fb /* oklch(68.999% 0.19637 304.88) */;
-  --wa-color-violet-50: #9e44f3 /* oklch(59.348% 0.24636 302.91) */;
-  --wa-color-violet-40: #7e22cd /* oklch(49.465% 0.23596 302.16) */;
-  --wa-color-violet-30: #63209a /* oklch(41.52% 0.18376 304.12) */;
-  --wa-color-violet-20: #4b1079 /* oklch(33.995% 0.16043 303.8) */;
-  --wa-color-violet-10: #2f0451 /* oklch(25.081% 0.12442 302.96) */;
-  --wa-color-violet-05: #1e0238 /* oklch(19.51% 0.09712 301.8) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
+  --wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
+  --wa-color-purple-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
+  --wa-color-purple-70: #cb99fd /* oklch(76.728% 0.14746 306.23) */;
+  --wa-color-purple-60: #b875fb /* oklch(68.999% 0.19637 304.88) */;
+  --wa-color-purple-50: #9e44f3 /* oklch(59.348% 0.24636 302.91) */;
+  --wa-color-purple-40: #7e22cd /* oklch(49.465% 0.23596 302.16) */;
+  --wa-color-purple-30: #63209a /* oklch(41.52% 0.18376 304.12) */;
+  --wa-color-purple-20: #4b1079 /* oklch(33.995% 0.16043 303.8) */;
+  --wa-color-purple-10: #2f0451 /* oklch(25.081% 0.12442 302.96) */;
+  --wa-color-purple-05: #1e0238 /* oklch(19.51% 0.09712 301.8) */;
+  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-purple-key: 50;

  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
  --wa-color-gray-90: #e3e5e9 /* oklch(92.152% 0.00582 264.53) */;
@@ -105,4 +112,5 @@
  --wa-color-gray-10: #161e2d /* oklch(23.484% 0.03142 262.56) */;
  --wa-color-gray-05: #0c1220 /* oklch(18.396% 0.03036 265.82) */;
  --wa-color-gray: var(--wa-color-gray-40);
+  --wa-color-gray-key: 40;
 }
--- a/src/styles/themes/active/color.css
+++ b/src/styles/themes/active/color.css
@@ -1,5 +1,6 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
+@import url('../../brand/green.css');

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

  --wa-color-focus: var(--wa-color-blue-60);

@@ -23,14 +24,14 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-green-95);
-  --wa-color-brand-fill-normal: var(--wa-color-green-90);
-  --wa-color-brand-fill-loud: var(--wa-color-green-80);
-  --wa-color-brand-border-quiet: var(--wa-color-green-90);
-  --wa-color-brand-border-normal: var(--wa-color-green-80);
-  --wa-color-brand-border-loud: var(--wa-color-green-70);
-  --wa-color-brand-on-quiet: var(--wa-color-green-40);
-  --wa-color-brand-on-normal: var(--wa-color-green-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: black;

  --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -82,19 +83,19 @@
   */
  --wa-color-surface-lowered: black;

-  --wa-color-text-link: var(--wa-color-green-70);
+  --wa-color-text-link: var(--wa-color-brand-70);

  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
-  --wa-color-brand-fill-normal: var(--wa-color-green-20);
-  --wa-color-brand-fill-loud: var(--wa-color-green-80);
-  --wa-color-brand-border-quiet: var(--wa-color-green-20);
-  --wa-color-brand-border-normal: var(--wa-color-green-30);
-  --wa-color-brand-border-loud: var(--wa-color-green-60);
-  --wa-color-brand-on-quiet: var(--wa-color-green-80);
-  --wa-color-brand-on-normal: var(--wa-color-green-90);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-border-normal: var(--wa-color-brand-30);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-on-normal: var(--wa-color-brand-90);
  --wa-color-brand-on-loud: black;

  --wa-color-success-fill-quiet: var(--wa-color-green-10);
--- a/src/styles/themes/awesome/color.css
+++ b/src/styles/themes/awesome/color.css
@@ -1,5 +1,6 @@
@import url('../../color/bright.css');
@import url('../default/color.css');
+@import url('../../brand/blue.css');

 :where(:root),
 :host,
@@ -14,24 +15,24 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-70);
-  --wa-color-brand-border-normal: var(--wa-color-blue-50);
-  --wa-color-brand-border-loud: var(--wa-color-blue-30);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-border-normal: var(--wa-color-brand-50);
+  --wa-color-brand-border-loud: var(--wa-color-brand-30);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-40);
  --wa-color-brand-on-loud: var(--wa-color-text-normal);

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

  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
@@ -74,24 +75,24 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
-  --wa-color-brand-border-normal: var(--wa-color-blue-50);
-  --wa-color-brand-border-loud: var(--wa-color-blue-80);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-70);
-  --wa-color-brand-on-normal: var(--wa-color-blue-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-50);
+  --wa-color-brand-border-loud: var(--wa-color-brand-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-80);
  --wa-color-brand-on-loud: white;

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

  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--- a/src/styles/themes/brutalist/color.css
+++ b/src/styles/themes/brutalist/color.css
@@ -1,5 +1,6 @@
@import url('../../color/default.css');
@import url('../default/color.css');
+@import url('../../brand/blue.css');

 :where(:root),
 :host,
@@ -21,14 +22,14 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-80);
-  --wa-color-brand-border-normal: var(--wa-color-blue-60);
-  --wa-color-brand-border-loud: var(--wa-color-blue-40);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-border-normal: var(--wa-color-brand-60);
+  --wa-color-brand-border-loud: var(--wa-color-brand-40);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-40);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -93,15 +94,15 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-20);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-30);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
-  --wa-color-brand-border-normal: var(--wa-color-blue-40);
-  --wa-color-brand-border-loud: var(--wa-color-blue-80);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-80);
-  --wa-color-brand-on-normal: var(--wa-color-blue-95);
-  --wa-color-brand-on-loud: var(--wa-color-blue-10);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-40);
+  --wa-color-brand-border-loud: var(--wa-color-brand-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-on-normal: var(--wa-color-brand-95);
+  --wa-color-brand-on-loud: var(--wa-color-brand-10);

  --wa-color-success-fill-quiet: var(--wa-color-green-20);
  --wa-color-success-fill-normal: var(--wa-color-green-30);
--- a/src/styles/themes/classic/color.css
+++ b/src/styles/themes/classic/color.css
@@ -1,5 +1,6 @@
@import url('../../color/classic.css');
@import url('../default/color.css');
+@import url('../../brand/blue.css');

 :where(:root),
 :host,
@@ -11,14 +12,14 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
-  --wa-color-brand-border-normal: var(--wa-color-blue-80);
-  --wa-color-brand-border-loud: var(--wa-color-blue-60);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-50);
-  --wa-color-brand-on-normal: var(--wa-color-blue-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-50);
+  --wa-color-brand-on-normal: var(--wa-color-brand-40);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -73,14 +74,14 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-20);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-30);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
-  --wa-color-brand-border-normal: var(--wa-color-blue-40);
-  --wa-color-brand-border-loud: var(--wa-color-blue-50);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-70);
-  --wa-color-brand-on-normal: var(--wa-color-blue-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-40);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-80);
  --wa-color-brand-on-loud: var(--wa-color-gray-10);

  --wa-color-success-fill-quiet: var(--wa-color-green-20);
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -1,3 +1,5 @@
+@import url('../../brand/blue.css');
+
 /**
 * Foundational Colors and Semantic Colors
 */
@@ -25,7 +27,7 @@
   * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
  --wa-color-text-normal: var(--wa-color-gray-10);
  --wa-color-text-quiet: var(--wa-color-gray-40);
-  --wa-color-text-link: var(--wa-color-blue-40);
+  --wa-color-text-link: var(--wa-color-brand-40);

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

  /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
   * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
-  --wa-color-focus: var(--wa-color-blue-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
  --wa-color-mix-hover: black 10%;
@@ -57,14 +59,14 @@
   *  *  On for content displayed on a fill with the corresponding attention
   * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
-  --wa-color-brand-border-normal: var(--wa-color-blue-80);
-  --wa-color-brand-border-loud: var(--wa-color-blue-60);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -125,7 +127,7 @@

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

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

-  --wa-color-focus: var(--wa-color-blue-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  --wa-color-mix-hover: black 8%;
  --wa-color-mix-active: black 16%;
@@ -145,14 +147,14 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-20);
-  --wa-color-brand-border-normal: var(--wa-color-blue-30);
-  --wa-color-brand-border-loud: var(--wa-color-blue-40);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-60);
-  --wa-color-brand-on-normal: var(--wa-color-blue-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-border-normal: var(--wa-color-brand-30);
+  --wa-color-brand-border-loud: var(--wa-color-brand-40);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
+  --wa-color-brand-on-normal: var(--wa-color-brand-70);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-green-10);
--- a/src/styles/themes/glossy/color.css
+++ b/src/styles/themes/glossy/color.css
@@ -1,5 +1,6 @@
@import url('../../color/elegant.css');
@import url('../default/color.css');
+@import url('../../brand/indigo.css');

 :where(:root),
 :host,
@@ -9,21 +10,21 @@
  /**
   * Foundational Colors
   */
-  --wa-color-text-link: var(--wa-color-indigo-40);
+  --wa-color-text-link: var(--wa-color-brand-40);

-  --wa-color-focus: var(--wa-color-indigo-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-loud: var(--wa-color-green-40);
@@ -41,21 +42,21 @@
  /**
   * Foundational Colors
   */
-  --wa-color-text-link: var(--wa-color-indigo-70);
+  --wa-color-text-link: var(--wa-color-brand-70);

-  --wa-color-focus: var(--wa-color-indigo-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-border-normal: var(--wa-color-brand-30);
+  --wa-color-brand-border-loud: var(--wa-color-brand-40);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
+  --wa-color-brand-on-normal: var(--wa-color-brand-70);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-loud: var(--wa-color-green-40);
--- a/src/styles/themes/matter/color.css
+++ b/src/styles/themes/matter/color.css
@@ -1,5 +1,6 @@
@import url('../../color/mild.css');
@import url('../default/color.css');
+@import url('../../brand/indigo.css');

 :where(:root),
 :host,
@@ -13,14 +14,14 @@
   * Foundational Colors
   */

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

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

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

-  --wa-color-focus: var(--wa-color-indigo-40);
+  --wa-color-focus: var(--wa-color-brand-40);

  --wa-color-mix-hover: white 5%;
  --wa-color-mix-active: white 10%;
@@ -28,14 +29,14 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-50);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-80);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -85,21 +86,21 @@
  /**
   * Foundational Colors
   */
-  --wa-color-text-link: var(--wa-color-indigo-70);
-  --wa-color-focus: var(--wa-color-indigo-60);
+  --wa-color-text-link: var(--wa-color-brand-70);
+  --wa-color-focus: var(--wa-color-brand-60);

  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-20);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-30);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-70);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-70);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-80);
-  --wa-color-brand-on-loud: var(--wa-color-indigo-10);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-border-normal: var(--wa-color-brand-30);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-80);
+  --wa-color-brand-on-loud: var(--wa-color-brand-10);

  --wa-color-success-fill-quiet: var(--wa-color-green-20);
  --wa-color-success-fill-normal: var(--wa-color-green-30);
--- a/src/styles/themes/mellow/color.css
+++ b/src/styles/themes/mellow/color.css
@@ -1,5 +1,6 @@
@import url('../../color/natural.css');
@import url('../default/color.css');
+@import url('../../brand/blue.css');

 :where(:root),
 :host,
@@ -17,23 +18,23 @@
  --wa-color-surface-lowered: var(--wa-color-gray-90);
  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-80), transparent);

-  --wa-color-text-normal: var(--wa-color-blue-20);
-  --wa-color-text-quiet: var(--wa-color-blue-40);
-  --wa-color-text-link: var(--wa-color-blue-40);
+  --wa-color-text-normal: var(--wa-color-brand-20);
+  --wa-color-text-quiet: var(--wa-color-brand-40);
+  --wa-color-text-link: var(--wa-color-brand-40);

-  --wa-color-focus: var(--wa-color-blue-50);
+  --wa-color-focus: var(--wa-color-brand-50);

  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-90);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-80);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-40);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-80);
-  --wa-color-brand-border-normal: var(--wa-color-blue-70);
-  --wa-color-brand-border-loud: var(--wa-color-blue-60);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-80);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-border-normal: var(--wa-color-brand-70);
+  --wa-color-brand-border-loud: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-green-90);
@@ -85,8 +86,8 @@
   */
  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);

-  --wa-color-text-normal: var(--wa-color-blue-90);
-  --wa-color-text-quiet: var(--wa-color-blue-70);
+  --wa-color-text-normal: var(--wa-color-brand-90);
+  --wa-color-text-quiet: var(--wa-color-brand-70);

  /**
   * Semantic Colors
--- a/src/styles/themes/playful/color.css
+++ b/src/styles/themes/playful/color.css
@@ -1,5 +1,6 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
+@import url('../../brand/purple.css');

 :where(:root),
 :host,
@@ -13,19 +14,19 @@

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

-  --wa-color-focus: var(--wa-color-violet-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-violet-90);
-  --wa-color-brand-fill-normal: var(--wa-color-violet-80);
-  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
-  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
-  --wa-color-brand-border-normal: var(--wa-color-violet-70);
-  --wa-color-brand-border-loud: var(--wa-color-violet-50);
-  --wa-color-brand-on-quiet: var(--wa-color-violet-30);
-  --wa-color-brand-on-normal: var(--wa-color-violet-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-80);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+  --wa-color-brand-border-normal: var(--wa-color-brand-70);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-green-90);
@@ -84,21 +85,21 @@
  --wa-color-text-quiet: var(--wa-color-gray-60);
  --wa-color-text-link: var(--wa-color-yellow-80);

-  --wa-color-focus: var(--wa-color-violet-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  --wa-color-mix-hover: white 10%;

  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-violet-20);
-  --wa-color-brand-fill-normal: var(--wa-color-violet-40);
-  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
-  --wa-color-brand-border-quiet: var(--wa-color-violet-30);
-  --wa-color-brand-border-normal: var(--wa-color-violet-40);
-  --wa-color-brand-border-loud: var(--wa-color-violet-50);
-  --wa-color-brand-on-quiet: var(--wa-color-violet-70);
-  --wa-color-brand-on-normal: var(--wa-color-violet-90);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-40);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-90);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-green-20);
--- a/src/styles/themes/premium/color.css
+++ b/src/styles/themes/premium/color.css
@@ -1,5 +1,6 @@
@import url('../../color/anodized.css');
@import url('../default/color.css');
+@import url('../../brand/cyan.css');

 :where(:root),
 :host,
@@ -11,9 +12,9 @@
   */
  --wa-color-surface-border: var(--wa-color-gray-80);

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

-  --wa-color-focus: var(--wa-color-teal-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  --wa-color-mix-hover: white 10%;
  --wa-color-mix-active: var(--wa-color-surface-default) 5%;
@@ -21,15 +22,15 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: var(--wa-color-teal-95);
-  --wa-color-brand-fill-normal: var(--wa-color-teal-90);
-  --wa-color-brand-fill-loud: var(--wa-color-teal-80);
-  --wa-color-brand-border-quiet: var(--wa-color-teal-80);
-  --wa-color-brand-border-normal: var(--wa-color-teal-70);
-  --wa-color-brand-border-loud: var(--wa-color-teal-50);
-  --wa-color-brand-on-quiet: var(--wa-color-teal-40);
-  --wa-color-brand-on-normal: var(--wa-color-teal-30);
-  --wa-color-brand-on-loud: var(--wa-color-teal-20);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-border-normal: var(--wa-color-brand-70);
+  --wa-color-brand-border-loud: var(--wa-color-brand-50);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-on-loud: var(--wa-color-brand-20);

  --wa-color-success-fill-quiet: var(--wa-color-green-95);
  --wa-color-success-fill-normal: var(--wa-color-green-90);
@@ -85,9 +86,9 @@

  --wa-color-text-normal: var(--wa-color-gray-95);
  --wa-color-text-quiet: var(--wa-color-gray-80);
-  --wa-color-text-link: var(--wa-color-teal-80);
+  --wa-color-text-link: var(--wa-color-brand-80);

-  --wa-color-focus: var(--wa-color-teal-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  --wa-color-mix-hover: white 20%;
  --wa-color-mix-active: var(--wa-color-surface-default) 10%;
@@ -95,15 +96,15 @@
  /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-teal-30);
-  --wa-color-brand-fill-normal: var(--wa-color-teal-40);
-  --wa-color-brand-fill-loud: var(--wa-color-teal-80);
-  --wa-color-brand-border-quiet: var(--wa-color-teal-30);
-  --wa-color-brand-border-normal: var(--wa-color-teal-40);
-  --wa-color-brand-border-loud: var(--wa-color-teal-70);
-  --wa-color-brand-on-quiet: var(--wa-color-teal-70);
-  --wa-color-brand-on-normal: var(--wa-color-teal-90);
-  --wa-color-brand-on-loud: var(--wa-color-teal-20);
+  --wa-color-brand-fill-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-80);
+  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
+  --wa-color-brand-border-normal: var(--wa-color-brand-40);
+  --wa-color-brand-border-loud: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-normal: var(--wa-color-brand-90);
+  --wa-color-brand-on-loud: var(--wa-color-brand-20);

  --wa-color-success-fill-quiet: var(--wa-color-green-30);
  --wa-color-success-fill-normal: var(--wa-color-green-40);
--- a/src/styles/themes/tailspin/color.css
+++ b/src/styles/themes/tailspin/color.css
@@ -1,5 +1,6 @@
@import url('../../color/vogue.css');
@import url('../default/color.css');
+@import url('../../brand/indigo.css');

 :where(:root),
 :host,
@@ -9,11 +10,11 @@
  /**
   * Foundational Colors
   */
-  --wa-color-text-link: var(--wa-color-indigo-40);
+  --wa-color-text-link: var(--wa-color-brand-40);

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

-  --wa-color-focus: var(--wa-color-indigo-50);
+  --wa-color-focus: var(--wa-color-brand-50);

  --wa-color-mix-hover: var(--wa-color-gray-80) 20%;
  --wa-color-mix-active: var(--wa-color-gray-80) 10%;
@@ -21,14 +22,14 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-95) 85%, transparent);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-80), transparent);
-  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-70) 60%, transparent);
-  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-60) 70%, transparent);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
+  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
@@ -88,11 +89,11 @@

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

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

-  --wa-color-focus: var(--wa-color-indigo-60);
+  --wa-color-focus: var(--wa-color-brand-60);

  --wa-color-mix-hover: var(--wa-color-gray-70) 20%;
  --wa-color-mix-active: var(--wa-color-gray-70) 10%;
@@ -100,14 +101,14 @@
  /**
   * Semantic Colors
   */
-  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-10) 90%, transparent);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-50);
-  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-20), transparent);
-  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-30), transparent);
-  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-40), transparent);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
+  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
+  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
+  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
+  --wa-color-brand-on-normal: var(--wa-color-brand-70);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);
--- a/src/styles/utilities/appearance.css
+++ b/src/styles/utilities/appearance.css
@@ -1,9 +1,11 @@
 /* 0 specificity. Safari doesn't like :where(:host()) so we need a separate rule. */
-.wa-filled,
-.wa-plain,
-.wa-accent,
+:where(.wa-filled, .wa-plain, .wa-accent, .wa-outlined),
 :host {
  --border-color: transparent;
+  --outlined-border-color: initial;
+  --outlined-border-color-hover: initial;
+  --outlined-text-color: initial;
+  --outlined-text-color-hover: initial;
 }

 .wa-outlined,
Author	SHA1	Message	Date
Lea Verou	82faf7da36	Don't break in SSR	2025-02-10 10:20:50 -05:00
Lea Verou	fd0fad361f	`<wa-isolate>` as a wrapper for DSD	2025-02-10 10:17:23 -05:00
Lea Verou	ffda52a7cf	Theme remixing: Dynamic code snippets (#729 )	2025-02-07 23:03:34 -05:00
Lea Verou	9be7919c60	Implement brand stylesheets for missing hues	2025-02-07 17:59:18 -05:00
Lea Verou	c30f3c4b09	Improve theme remixing UI (#724 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design> Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>	2025-02-07 11:35:12 -05:00
Lea Verou	7e8f13b5cb	Add accent color tint as separate variable (#725 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-02-06 18:30:43 -05:00
Lindsay M	97ab986425	Revise `classic` palette, closes #707 (#716 ) * Change ✨ everything ✨ * No changes to `gray`	2025-02-06 17:58:33 -05:00
Lea Verou	f1fa7f713e	Add `label` attribute to option & menu-item (#704 ) * Add `label` attribute and `defaultLabel` getter to option and menu-item, drop `getTextLabel()` - Add `label` attribute to option and menu-item, closes #698 - [Option] Add `defaultLabel` cached property to both - [Option] Remove `getTextLabel()` method from both (people can just set `el.label`) - Refactor: Merge utils to get text content into one more powerful utility function - Fixed typo in `slot.ts` . Add `label` attribute to menu, remove `getTextLabel` * Update filename	2025-02-06 10:58:09 -05:00
lindsaym-fa	3394a95057	Remove visual test failure markers	2025-02-06 10:57:33 -05:00
Lea Verou	eed9ddb9b3	Fix #622	2025-02-06 10:57:33 -05:00
Lea Verou	daf5e7734d	Support opting out of anchor headings with `data-no-anchor`	2025-02-06 10:56:56 -05:00
Lea Verou	63133d0e33	Card fixes	2025-02-06 10:25:02 -05:00
Lea Verou	b2d74145b8	Remove stray `console.log()`	2025-02-05 11:35:55 -05:00
Lea Verou	17eeccbc5d	Better infrastructure for core colors, show core colors in docs, closes #668	2025-02-05 11:24:13 -05:00
Lea Verou	68f645e776	[Option] Drop `base` part, rel #207	2025-02-05 09:29:50 -05:00
Cory LaViska	b3e4c59197	add secure context notice (#683 )	2025-02-04 16:27:35 +00:00
Lindsay M	6080a85035	Replace `teal` with `cyan`, fixes #659 (#671 ) Co-authored-by: Lea Verou <lea@verou.me>	2025-02-03 19:01:23 -05:00
lindsaym-fa	f7e088c8df	Rename `violet` to `purple`, fixes #656	2025-02-03 18:47:03 -05:00
Lea Verou	80e1c05b37	Add `--wa-color-brand-*` tokens, fixes #655 (#662 )	2025-02-03 15:39:59 -05:00