Support inheritance and initial values

Do not reflect default values
- Add `default` descriptor - Do not reflect attributes when equal to their default value - Patch getter return value to return default value when empty - Use it in button `appearance`
2026-01-19 07:29:14 +00:00 · 2025-01-21 15:26:45 -05:00 · 2025-01-21 15:16:11 -05:00 · 2025-01-21 12:54:38 -05:00 · 2025-01-21 12:52:41 -05:00 · 2025-01-21 12:36:54 -05:00
119 changed files with 3891 additions and 2582 deletions
--- a/docs/_data/hues.json
+++ b/docs/_data/hues.json
@@ -0,0 +1 @@
+["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
--- a/docs/_data/palettes.js
+++ b/docs/_data/palettes.js
@@ -0,0 +1 @@
+export { default as default } from '../../src/styles/color/palettes.js';
--- a/docs/_includes/contrast-table.njk
+++ b/docs/_includes/contrast-table.njk
@@ -0,0 +1,40 @@
+<table class="colors wa-palette-{{ paletteId }}">
+  <thead>
+    <tr>
+      <th></th>
+      {% for tint_bg in tints -%}
+        {% for tint_fg in tints | reverse -%}
+          {% if (tint_fg - tint_bg) | abs == difference %}
+          <th>{{ tint_fg }} on {{ tint_bg }}</th>
+          {% endif %}
+        {%- endfor -%}
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr>
+  <th>{{ hue | capitalize }}</th>
+  {% for tint_bg in tints -%}
+    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
+    {% for tint_fg in tints | reverse -%}
+      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
+      {% if (tint_fg - tint_bg) | abs == difference %}
+      <td>
+        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
+          {% set contrast_wcag = '' %}
+          {% if color_fg and color_bg %}
+            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+          {% endif %}
+          {% if contrast_wcag %}
+          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
+          {% else %}
+          {{ tint_fg }} on {{ tint_bg }}
+          {% endif %}
+        </div>
+      </td>
+      {% endif %}
+    {%- endfor -%}
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
--- a/docs/_includes/import-stylesheet-code.md.njk
+++ b/docs/_includes/import-stylesheet-code.md.njk
@@ -0,0 +1,18 @@
+<wa-tab-group>
+<wa-tab panel="html">In HTML</wa-tab>
+<wa-tab panel="css">In CSS</wa-tab>
+<wa-tab-panel name="html">
+
+Simply add the following code to the `<head>` of your page:
+```html
+<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
+```
+</wa-tab-panel>
+<wa-tab-panel name="css">
+
+Simply add the following code at the top of your CSS file:
+```css
+@import url('{% cdnUrl stylesheet %}');
+```
+</wa-tab-panel>
+</wa-tab-group>
--- a/docs/_includes/palette.njk
+++ b/docs/_includes/palette.njk
@@ -1,41 +0,0 @@
-<div class="color-palette">
-  <template shadowrootmode="open">
-    <link href="/assets/styles/docs.css" rel="stylesheet" />
-    <link id="theme" href="/dist/styles/themes/{{ themeId }}.css" rel="stylesheet" />
-    <link id="palette" href="/dist/styles/color/{{ palette }}.css" rel="stylesheet" />
-    <ul class="color-group">
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div>
-      </li>
-    </ul>
-    <ul class="color-group">
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div>
-      </li>
-      <li class="color-preview">
-        <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div>
-      </li>
-    </ul>
-  </template>
-</div>
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -25,6 +25,7 @@
  'utilities': 'Style Utilities',
  'layout': 'Layout',
  'patterns': 'Patterns',
+  'palettes': 'Color Palettes',
  'tokens': 'Design Tokens'
 } %}
  {% include 'sidebar-group.njk' %}
--- a/docs/_includes/svgs/palette.njk
+++ b/docs/_includes/svgs/palette.njk
@@ -0,0 +1,24 @@
+{% set paletteId = page.fileSlug %}
+{% set tints = [80, 60, 40, 20] %}
+{% set width = 20 %}
+{% set height = 13 %}
+{% set gap_x = 3 %}
+{% set gap_y = 3 %}
+
+<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
+<style>
+	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
+	.palette-icon {
+		height: 8ch;
+	}
+</style>
+
+{% for hue in hues -%}
+  {% set hueIndex = loop.index0 %}
+  {% for tint in tints -%}
+    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
+	      width="{{ width }}" height="{{ height }}"
+	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
+  {%- endfor %}
+{% endfor %}
+</svg>
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -0,0 +1,119 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{# {% set forceTheme = page.fileSlug %} #}
+
+{% extends '../_layouts/block.njk' %}
+
+{% set paletteId = page.fileSlug %}
+
+{% block afterContent %}
+<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
+
+{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
+
+<table class="colors wa-palette-{{ paletteId }}">
+  <thead>
+    <tr>
+      <th></th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr>
+  <th>{{ hue | capitalize }}</th>
+  {% for tint in tints -%}
+    <td>
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+      </div>
+    </td>
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
+
+<h2>Used By</h2>
+
+<section class="index-grid">
+{% for page in collections.theme %}
+  {%- if page.data.palette == paletteId -%}
+    {% include "page-card.njk" %}
+  {%- endif -%}
+{% endfor %}
+</section>
+
+{% markdown %}
+## Color Contrast
+
+Web Awesome color scales are designed to guarantee certain contrast ratios,
+both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
+as well as the emergent APCA specification _(planned)_,
+so you can ensure that text is both legible to all users, and legally conformant.
+
+### Level 1
+
+A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
+{% endmarkdown %}
+
+{% set difference = 40 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `45`:
+
+{% endmarkdown %}
+
+{% set difference = 45 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+### Level 2
+
+A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
+{% endmarkdown %}
+
+{% set difference = 50 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `55`:
+
+{% endmarkdown %}
+
+{% set difference = 55 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+### Level 3
+
+A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
+{% endmarkdown %}
+
+{% set difference = 60 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `65`:
+
+{% endmarkdown %}
+
+{% set difference = 65 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+## How to use this palette
+
+If you are using a Web Awesome theme that uses this palette, it will already be included.
+To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
+
+{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+{% endmarkdown %}
+{% endblock %}
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -4,25 +4,72 @@

 {% extends '../_includes/base.njk' %}

-{% set themeId = page.fileSlug %}
-{% set palette = defaultPalette %}
-{% set palettes = ['default', 'classic', 'rudimentary', 'bright', 'anodized', 'elegant', 'vogue'] %}
-
 {% block header %}
+<iframe src='{{ page.url }}demo.html' id="demo"></iframe>

-<iframe id="theme-demo" src='{{ page.url }}demo.html'></iframe>
-
-<p>
-  <wa-select label="Color palette:" value="{{ defaultPalette }}" id="palette-picker">
-  {% for p in palettes -%}
-    <wa-option value="{{ p }}">{{ p | capitalize }}</wa-option>
-  {%- endfor %}
+<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-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 %}
+    {% endfor %}
  </wa-select>
-  <script type="module" src="/docs/themes/palette-picker.js"></script>
-</p>
-{% include 'palette.njk' %}

-<br>
+  <wa-select name="palette" label="Palette" size="small">
+    <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 %}
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="typography" label="Typography from…" size="small">
+    <wa-icon name="font-case" slot="prefix"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for theme in collections.theme | sort %}
+      {% if theme.fileSlug !== page.fileSlug %}
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+
+</p>
+<script>
+  document.querySelector('#mix_and_match').addEventListener('wa-change', function(event) {
+    let selects = document.querySelectorAll('#mix_and_match wa-select');
+    let url = new URL(demo.src);
+
+    for (let select of selects) {
+      url.searchParams.set(select.name, select.value);
+    }
+
+    demo.src = url;
+  });
+</script>
+
+<h2>Default Color Palette</h2>
+{% set paletteURL = '/docs/palettes/' + palette + '/' %}
+{% set themePage = page %}
+{% set page = paletteURL | getCollectionItemFromUrl %}
+<div class="index-grid">
+{% include 'page-card.njk' %}
+</div>
+{% set page = themePage %}
+
 {% endblock %}

 {% block afterContent %}
@@ -31,24 +78,25 @@

 You can import this theme from the Web Awesome CDN.

-<wa-tab-group>
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
+{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
+{% include 'import-stylesheet-code.md.njk' %}

-Simply add the following code to the `<head>` of your page:
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
+### Remixing { #remixing }

-Simply add the following code at the top of your CSS file:
-```css
-@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
+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

--- a/docs/_utils/filters.js
+++ b/docs/_utils/filters.js
@@ -105,6 +105,23 @@ export function deepValue(obj, key) {
  return key.reduce((subObj, property) => subObj?.[property], obj);
 }

+export function number(value, options) {
+  if (typeof value !== 'number' && isNaN(value)) {
+    return value;
+  }
+
+  let lang = options?.lang ?? 'en';
+  if (options?.lang) {
+    delete options.lang;
+  }
+
+  if (!options || Object.keys(options).length === 0) {
+    options = { maximumSignificantDigits: 3 };
+  }
+
+  return Number(value).toLocaleString(lang, options);
+}
+
 export function isNumeric(value) {
  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
 }
--- a/docs/assets/scripts/preset-theme-picker.js
+++ b/docs/assets/scripts/preset-theme-picker.js
@@ -47,22 +47,6 @@ const presetTheme = new ThemeAspect({
  },
 });

-/**
- * Without this, there's a flash of the incorrect preset theme.
- */
-function updateSelectionBeforeTurboLoad(e) {
-  const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-  if (newElement) {
-    presetTheme.syncUI(newElement);
-  }
-}
-
-['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-  document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
-});
-
 window.addEventListener('turbo:render', e => {
  presetTheme.applyChange({ behavior: 'instant' });
 });
-
-window.presetTheme = presetTheme;
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -34,6 +34,15 @@ export class ThemeAspect {
        this.set(picker.value);
      }
    });
+
+    ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
+      document.addEventListener(eventName, e => {
+        const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
+        if (newElement) {
+          this.syncUI(newElement);
+        }
+      });
+    });
  }

  get() {
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -333,6 +333,7 @@ wa-page > main:has(> .index-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
  gap: var(--wa-space-2xl);
+  margin-block-end: var(--wa-space-3xl);

  a {
    border-radius: var(--wa-border-radius-l);
@@ -383,16 +384,23 @@ wa-page > main:has(> .index-grid) {
 /* Swatches */
 .swatch {
  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  background-color: transparent;
-  /* border-color: var(--wa-color-neutral-border-normal); */
-  border-color: transparent;
+  border-color: var(--wa-color-neutral-border-normal);
  border-style: var(--wa-border-style);
  border-width: var(--wa-border-width-s);
  border-radius: var(--wa-border-radius-m);
  box-sizing: border-box;
-  line-height: 2.5;
-  height: 2.5em;
-  padding-inline: var(--wa-space-xs);
+  min-height: 2.5em;
+  padding: var(--wa-space-xs);
+  font-weight: var(--wa-font-weight-semibold);
+  line-height: var(--wa-line-height-condensed);
+
+  &.color {
+    border-color: transparent;
+  }

  wa-copy-button {
    position: absolute;
@@ -422,34 +430,33 @@ wa-page > main:has(> .index-grid) {
  }
 }

-.color-name {
-  font-weight: var(--wa-font-weight-semibold);
-  margin-block-end: var(--wa-space-2xs);
-}
-
-.color-group {
-  align-items: start;
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 0.25em;
-
-  &:where(ul) {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+table.colors {
+  thead {
+    th {
+      text-align: center;
+      padding-block: 0;
+    }
  }
+  tbody {
+    tr {
+      border: none;
+      &:hover {
+        background: transparent;
+      }
+    }

-  + * {
-    margin-block-start: var(--wa-space-xl);
-  }
+    th {
+      width: 0;
+      vertical-align: middle;
+      text-align: right;
+    }

-  + & {
-    margin-block-start: var(--wa-space-2xs);
+    td {
+      padding-inline: var(--wa-space-3xs);
+      padding-block: var(--wa-space-s);
+    }
  }
 }
-.color-preview {
-  flex: 1 1 auto;
-}

 /* Layout Examples */
 .layout-example-boundary {
@@ -529,4 +536,23 @@ wa-page > main:has(> .index-grid) {
    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/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -420,5 +420,7 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
  //
  // TODO - remove once we switch to the Popover API
  //
-  document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
+  customElements.whenDefined('wa-select').then(() => {
+    document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
+  });
 </script>
--- a/docs/docs/experimental/inherit.md
+++ b/docs/docs/experimental/inherit.md
@@ -0,0 +1,69 @@
+---
+title: Inheritance & Default value tests
+---
+
+Button variant should default to `neutral`:
+
+```html {.example}
+<wa-button>Neutral</wa-button>
+<wa-button variant="neutral">Neutral</wa-button>
+<wa-button variant="brand">Brand</wa-button>
+```
+
+Callout variant should default to `brand`.
+Buttons within an element with a variant should inherit that variant unless they have a variant of their own.
+
+```html {.example}
+<wa-callout>
+	Brand
+	<wa-button>Brand</wa-button>
+	<wa-button variant="neutral">Neutral</wa-button>
+	<wa-button variant="brand">Brand</wa-button>
+	<button>Brand</button>
+	<button class="wa-neutral">Neutral</button>
+	<button class="wa-brand">Brand</button>
+</wa-callout>
+<wa-callout variant="neutral">
+	Neutral
+	<wa-button>Neutral</wa-button>
+	<wa-button variant="neutral">Neutral</wa-button>
+	<wa-button variant="brand">Brand</wa-button>
+	<button>Neutral</button>
+	<button class="wa-neutral">Neutral</button>
+	<button class="wa-brand">Brand</button>
+</wa-callout>
+```
+
+Nested callouts:
+
+
+```html {.example}
+<wa-callout>
+	Brand
+	<wa-callout>Brand</wa-callout>
+</wa-callout>
+<wa-callout variant="neutral">
+	Neutral
+	<wa-callout>Neutral</wa-callout>
+</wa-callout>
+```
+
+
+```html {.example}
+<wa-callout>
+	Brand
+	<wa-button>Brand</wa-button>
+	<wa-button variant="neutral">Neutral</wa-button>
+	<button>Brand</button>
+	<button class="wa-neutral">Neutral</button>
+	<br>
+	<br>
+	<wa-callout variant="neutral">
+		Neutral
+		<wa-button>Neutral</wa-button>
+		<wa-button variant="brand">Brand</wa-button>
+		<button>Neutral</button>
+		<button class="wa-brand">Brand</button>
+	</wa-callout>
+</wa-callout>
+```
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -506,7 +506,7 @@ hasOutline: false
      <wa-option data-alpha="remove" value="playful">Playful</wa-option>
      <wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
      <wa-option data-alpha="remove" value="tailspin">Tailspin</wa-option>
-      <wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
+      <wa-option data-alpha="remove" value="glossy">Glossy</wa-option>
      <wa-option data-alpha="remove" value="active">Active</wa-option>
      <wa-option value="classic">Classic</wa-option>
    </wa-select>
@@ -886,7 +886,7 @@ hasOutline: false
      case 'active':
        colorPalette = 'rudimentary';
        break;
-      case 'glassy':
+      case 'glossy':
        colorPalette = 'elegant';
        break;
      case 'premium':
@@ -1049,7 +1049,7 @@ hasOutline: false
      case 'brutalist':
      case 'classic':
      case 'awesome':
-      case 'glassy':
+      case 'glossy':
      case 'active':
        assetFolder = themeSelect.value;
        break;
@@ -1259,7 +1259,7 @@ hasOutline: false
      case 'tailspin':
        presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
        break;
-      case 'glassy':
+      case 'glossy':
        presetLogoIcons = ['raindrops', 'citrus-slice', 'lighthouse', 'kiwi-bird'];
        break;
      case 'active':
--- a/docs/docs/native/callout.md
+++ b/docs/docs/native/callout.md
@@ -4,6 +4,7 @@ description: Callouts are used to display important messages inline.
 component: callout
 icon: callout
 snippets: '.wa-callout'
+noAlpha: true
 ---

 ```html {.example}
--- a/docs/docs/native/select.md
+++ b/docs/docs/native/select.md
@@ -33,3 +33,39 @@ Use the [appearance utilities](/docs/utilities/appearance/) to change the select
  </select>
 </label>
 ```
+
+### Grouping options
+
+In [modern browsers](https://caniuse.com/mdn-html_elements_select_hr_in_select), you can use the `<hr>` element as a divider:
+
+```html {.example}
+<select>
+  <small>Section 1</small>
+  <option value="option-1">Option 1</option>
+  <option value="option-2">Option 2</option>
+  <option value="option-3">Option 3</option>
+  <hr />
+  <small>Section 2</small>
+  <option value="option-4">Option 4</option>
+  <option value="option-5">Option 5</option>
+  <option value="option-6">Option 6</option>
+</select>
+```
+
+To provide labels, you can use the `<optgroup>` element (with or without dividers):
+
+```html {.example}
+<select>
+  <optgroup label="Section 1">
+  <option value="option-1">Option 1</option>
+  <option value="option-2">Option 2</option>
+  <option value="option-3">Option 3</option>
+  </optgroup>
+  <optgroup label="Section 2">
+  <option value="option-4">Option 4</option>
+  <option value="option-5">Option 5</option>
+  <hr />
+  <option value="option-6">Option 6</option>
+  </optgroup>
+</select>
+```
--- a/docs/docs/palettes/anodized.md
+++ b/docs/docs/palettes/anodized.md
@@ -0,0 +1,5 @@
+---
+title: Anodized
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/bright.md
+++ b/docs/docs/palettes/bright.md
@@ -0,0 +1,3 @@
+---
+title: Bright
+---
--- a/docs/docs/palettes/classic.md
+++ b/docs/docs/palettes/classic.md
@@ -0,0 +1,4 @@
+---
+title: Classic
+description: The original Shoelace color palette.
+---
--- a/docs/docs/palettes/default.md
+++ b/docs/docs/palettes/default.md
@@ -0,0 +1,4 @@
+---
+title: Default
+description: This is the palette used in the default theme.
+---
--- a/docs/docs/palettes/elegant.md
+++ b/docs/docs/palettes/elegant.md
@@ -0,0 +1,5 @@
+---
+title: Elegant
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/index.njk
+++ b/docs/docs/palettes/index.njk
@@ -0,0 +1,10 @@
+---
+title: Color Palettes
+description: Palettes define [literal colors](/docs/tokens/colors) that are used in the design system.
+layout: overview
+override:tags: []
+forTag: palette
+categories:
+  other: Free
+  pro: Pro
+---
--- a/docs/docs/palettes/mild.md
+++ b/docs/docs/palettes/mild.md
@@ -0,0 +1,5 @@
+---
+title: Mild
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/natural.md
+++ b/docs/docs/palettes/natural.md
@@ -0,0 +1,5 @@
+---
+title: Natural
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/palettes.json
+++ b/docs/docs/palettes/palettes.json
@@ -0,0 +1,8 @@
+{
+  "layout": "palette.njk",
+  "tags": ["palettes", "palette"],
+  "eleventyComputed": {
+    "snippet": ".wa-palette-{{ page.fileSlug }}",
+    "icon": "palette"
+  }
+}
--- a/docs/docs/palettes/rudimentary.md
+++ b/docs/docs/palettes/rudimentary.md
@@ -0,0 +1,5 @@
+---
+title: Rudimentary
+isPro: true
+tags: pro
+---
--- a/docs/docs/palettes/vogue.md
+++ b/docs/docs/palettes/vogue.md
@@ -0,0 +1,5 @@
+---
+title: Vogue
+isPro: true
+tags: pro
+---
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,12 +12,24 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::

+## Next
+
+- Added `.wa-callout` utility class
+- Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
+- Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions

 ## 3.0.0-alpha.9

- Added `.wa-callout` utility class
 - Added new themes:
+  - Glossy
+  - Matter
  - Premium
+  - Playful
+- Added docs on themes and palettes
+- Separated colors and typography out from themes so they can be used independently
+- Added test suite to ensure all color palettes provide the color contrast they are supposed to
+- Added `.wa-invert` utility class to invert the current color scheme
+- Added `:state(blank)` to `<wa-input>`, `<wa-textarea>`, and `<wa-select>` to style form inputs differently when empty.

 ## 3.0.0-alpha.8

--- a/docs/docs/themes/active.md
+++ b/docs/docs/themes/active.md
@@ -3,5 +3,5 @@ title: Active
 description: Energetic and tactile, always in motion.
 isPro: true
 tags: pro
-defaultPalette: rudimentary
+palette: rudimentary
 ---
--- a/docs/docs/themes/awesome.md
+++ b/docs/docs/themes/awesome.md
@@ -2,5 +2,5 @@
 title: Awesome
 description: Punchy and vibrant, the rockstar of themes.
 order: 0.2
-defaultPalette: bright
+palette: bright
 ---
--- a/docs/docs/themes/brutalist.md
+++ b/docs/docs/themes/brutalist.md
@@ -3,5 +3,5 @@ title: Brutalist
 description: Sharp, square, and unapologetically bold.
 isPro: true
 tags: pro
-defaultPalette: default
+palette: default
 ---
--- a/docs/docs/themes/classic.md
+++ b/docs/docs/themes/classic.md
@@ -2,5 +2,5 @@
 title: Classic
 description: Timeless elegance that never goes out of style.
 order: 0.1
-defaultPalette: classic
+palette: classic
 ---
--- a/docs/docs/themes/default.md
+++ b/docs/docs/themes/default.md
@@ -2,5 +2,5 @@
 title: Default
 description: Your trusty companion, like a perfectly broken-in pair of jeans.
 order: 0
-defaultPalette: default
+palette: default
 ---
--- a/docs/docs/themes/demo.njk
+++ b/docs/docs/themes/demo.njk
@@ -10,20 +10,15 @@ override:tags: []
 eleventyComputed:
  forceTheme: "{{ theme.fileSlug }}"
 ---
-<script>
-  document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
-</script>
-<script type=module>
-  document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
-</script>

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

 {% set content %}
 <header>
  {% include 'breadcrumbs.njk' %}
  <h1 class="title">{{ theme.data.title }}</h1>
+  <p id="mix_and_match" hidden class="wa-size-s"></p>
  <p>{% include 'status.njk' %}</p>
  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
 </header>
@@ -38,3 +33,47 @@ eleventyComputed:
  {{ content | safe }}
 </div>
 </wa-image-comparer>
+
+<script>
+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`
+  };
+  const icons = {
+    colors: 'palette',
+    palette: 'swatchbook',
+    typography: 'font-case'
+  }
+
+  for (let link of document.querySelectorAll('link.mix-and-match')) {
+    link.remove();
+  }
+
+  let msgs = [];
+
+  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 icon = icons[name];
+      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> <a href="${ docsURL }">${ title }</a>`);
+    }
+  }
+
+  for (let p of mix_and_match) {
+    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>
+        ${ msg }</wa-badge>`).join(' ');
+    }
+  }
+}
+updateTheme();
+</script>
--- a/docs/docs/themes/glassy.md
+++ b/docs/docs/themes/glassy.md
@@ -1,8 +0,0 @@
---
-title: Glassy
-description: Smooth, sleek, and reflective.
-isPro: true
-tags: pro
-noAlpha: true
-defaultPalette: elegant
---
--- a/docs/docs/themes/glossy.md
+++ b/docs/docs/themes/glossy.md
@@ -0,0 +1,7 @@
+---
+title: Glossy
+description: Bustling with plenty of luster and shine.
+isPro: true
+tags: pro
+palette: elegant
+---
--- a/docs/docs/themes/matter.md
+++ b/docs/docs/themes/matter.md
@@ -0,0 +1,85 @@
+---
+title: Matter
+description: Digital design inspired by the real world.
+isPro: true
+tags: pro
+palette: mild
+---
+
+Set the page theme to "{{ title }}" from the top right to preview the following examples.
+
+## Floating Labels
+
+This theme implements "floating labels" for `wa-input`, `wa-textarea`, `wa-select`,
+which makes labels look like placeholders when the input is empty, does not have an actual placeholder, and is not focused.
+
+```html {.example}
+<wa-input label="What is your name?"></wa-input>
+<br>
+<wa-input label="What is your name?" appearance="filled"></wa-input>
+```
+
+## Ripple Effect
+
+This theme implements a ripple effect for buttons, including native buttons.
+Click on the following buttons to observe it:
+
+```html {.example}
+<wa-button variant="brand">Button</wa-button>
+<button class="wa-brand">Button</button>
+```
+
+
+
+### Customization
+
+You can use several properties to customize the ripple effect.
+
+These properties can be set on any ancestor, including the root element:
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `--wa-ripple-start-radius` | `<length>` | `0.1em` | The starting radius of the ripple effect. |
+| `--wa-ripple-start-opacity` | `<number>` | `0.1` | The starting opacity of the ripple effect. |
+| `--wa-ripple-duration` | `<time>` | `calc(2 * var(--wa-transition-slow))` | The duration of the ripple effect transition. |
+
+Any of these can be used to disable the ripple effect:
+
+```css
+--wa-ripple-start-radius: 0em;
+```
+```css
+--wa-ripple-start-opacity: 0;
+```
+```css
+--wa-ripple-duration: 0s;
+```
+
+These properties would only work on the button itself:
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `--wa-ripple-center-x` | `<percentage>` | `50%` | The x-coordinate of the ripple center point as a percentage of the button width. |
+| `--wa-ripple-center-y` | `<percentage>` | `50%` | The y-coordinate of the ripple center point as a percentage of the button height. |
+
+### Ripple Center Point
+
+By default the ripple effect starts from the center of the button.
+If you want it to start from the position the button was clicked, you can use this JS snippet:
+
+```js
+document.addEventListener("mousedown", evt => {
+	let target = evt.target;
+
+	if (!target.matches?.('wa-button, button, .wa-button')) {
+		return;
+	}
+
+	let rect = target.getBoundingClientRect();
+	let x = (evt.clientX - rect.left) / rect.width;
+	let y = (evt.clientY - rect.top) / rect.height;
+
+	target.style.setProperty("--mouse-local-x", x);
+	target.style.setProperty("--mouse-local-y", y);
+});
+```
--- a/docs/docs/themes/mellow.md
+++ b/docs/docs/themes/mellow.md
@@ -3,5 +3,5 @@ title: Mellow
 description: Soft and soothing, like a lazy Sunday morning.
 isPro: true
 tags: pro
-defaultPalette: natural
+palette: natural
 ---
--- a/docs/docs/themes/palette-picker.js
+++ b/docs/docs/themes/palette-picker.js
@@ -1,18 +0,0 @@
-let palettePicker = document.getElementById('palette-picker');
-let paletteDisplay = palettePicker.parentNode.nextElementSibling;
-let themeDemo = document.getElementById('theme-demo');
-
-palettePicker.addEventListener('wa-change', function () {
-  let palette = palettePicker.value;
-  let paletteStylesheet = paletteDisplay.shadowRoot.getElementById('palette');
-  paletteStylesheet.href = paletteStylesheet.href.replace(/[a-z-]+.css/, palette + '.css');
-  let demoPaletteStylesheet = themeDemo.contentDocument.getElementById('palette');
-  let paletteUrl = `/dist/styles/color/${palette}.css`;
-
-  if (demoPaletteStylesheet) {
-    demoPaletteStylesheet.href = paletteUrl;
-  } else {
-    let themeStylesheet = themeDemo.contentDocument.getElementById('theme');
-    themeStylesheet.insertAdjacentHTML('afterend', `<link id="palette" rel="stylesheet" href="${paletteUrl}">`);
-  }
-});
--- a/docs/docs/themes/playful.md
+++ b/docs/docs/themes/playful.md
@@ -1,8 +1,7 @@
 ---
 title: Playful
-description: Fun, colorful, and full of personality.
+description: Cheerful and engaging, like a playground on screen.
 isPro: true
 tags: pro
-noAlpha: true
-defaultPalette: rudimentary
+palette: rudimentary
 ---
--- a/docs/docs/themes/premium.md
+++ b/docs/docs/themes/premium.md
@@ -3,5 +3,5 @@ title: Premium
 description: The ultimate in sophistication and style.
 isPro: true
 tags: pro
-defaultPalette: anodized
+palette: anodized
 ---
--- a/docs/docs/themes/showcase.css
+++ b/docs/docs/themes/showcase.css
@@ -9,7 +9,17 @@ body,
  overflow: hidden;
 }

+#mix_and_match {
+  font-weight: var(--wa-font-weight-semibold);
+  color: var(--wa-color-text-quiet);
+
+  wa-icon {
+    vertical-align: middle;
+  }
+}
+
 .theme-showcase {
+  isolation: isolate;
  background-color: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-xl);
--- a/docs/docs/themes/tailspin.md
+++ b/docs/docs/themes/tailspin.md
@@ -3,5 +3,5 @@ title: Tailspin
 description: Like a bird in flight, guiding you from there to here.
 isPro: true
 tags: pro
-defaultPalette: vogue
+palette: vogue
 ---
--- a/docs/docs/tokens/color.md
+++ b/docs/docs/tokens/color.md
@@ -6,6 +6,30 @@ description: Ensure consistent use of color and readable contrast with Web Aweso
 <style>
  td { vertical-align: middle; }

+  .color-name {
+    font-weight: var(--wa-font-weight-semibold);
+    margin-block-end: var(--wa-space-2xs);
+  }
+  ul.color-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .color-group {
+    align-items: start;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.25em;
+  }
+  .color-group + * {
+    margin-block-start: var(--wa-space-xl);
+  }
+  .color-preview {
+    flex: 1 1 auto;
+  }
+  .swatch {
+    border-color: transparent;
+  }
  .color-mix-example {
    background-image:
      linear-gradient(to right,
@@ -25,29 +49,31 @@ Web Awesome's color system is made up of CSS custom properties to help with cons

 Color is organized by three main categories:

- [Literal colors](/#literal-colors) that give familiar names to your starting color palette
+- [Literal colors](/#literal-colors) that give familiar names to your starting [color palette](/docs/palettes/)
 - [Foundational colors](/#foundational-colors) that lay the groundwork for your theme
 - [Semantic colors](/#semantic-colors) that draw attention and convey meaning


 ## Literal Colors

-Literal colors are the lowest level color properties in your theme. Each color is identified by a name, like red or gray, and a number that roughly corresponds to the color's perceived lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
+Literal colors are defined by your theme's [color palette](/docs/palettes/) and are the lowest level color tokens in your theme. Each token is identified by a name, like red or gray, and a number based on the color's lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.

-Lightness values on this scale have a strong correlation to [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance), which is used to calculate color contrast. To meet [WCAG 2.1 success criteria for minimum or enhanced contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum), even across hues, calculate the difference between the lightness values of any two colors:
+You can use these numbers to ensure accessible color contrast per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum):

 - A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
 - A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
 - A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)

-Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
+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"] -%}
 <div class="color-name">{{ hue | capitalize }}</div>
 <ul class="color-group">
  {% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
    <li class="color-preview">
-      <div class="swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})"></div>
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+      </div>
      <small>{{ tint }}</small>
    </li>
  {%- endfor %}
@@ -163,23 +189,3 @@ Finally, each color is named according to how much attention it draws. Here, we
    {%- endfor %}
    {%- endfor %}
 </table>
-
-<script type="module">
-  const computedStyle = getComputedStyle(document.body)
-  document.querySelectorAll(".swatch").forEach((swatch) => {
-    let varName = swatch.getAttribute("value")
-
-    if (!varName) {
-      const bgColor = swatch.style.backgroundColor
-      varName = bgColor.replace(/^var\((--.*)\)$/, "$1")
-    }
-
-    const copyButton = Object.assign(document.createElement("wa-copy-button"), {
-      value: varName,
-      copyLabel: varName,
-      errorLabel: "Whoops, your browser doesn't support this!",
-    })
-
-    swatch.appendChild(copyButton)
-  })
-</script>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@shoelace-style/webawesome",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@shoelace-style/webawesome",
-      "version": "3.0.0-alpha.8",
+      "version": "3.0.0-alpha.9",
      "license": "MIT",
      "dependencies": {
        "@ctrl/tinycolor": "^4.1.0",
@@ -34,6 +34,7 @@
        "chalk": "^5.3.0",
        "change-case": "^4.1.2",
        "chokidar": "^3.5.3",
+        "colorjs.io": "^0.6.0-alpha.1",
        "command-line-args": "^5.2.1",
        "comment-parser": "^1.4.1",
        "cspell": "^6.18.1",
@@ -5078,6 +5079,17 @@
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
      "dev": true
    },
+    "node_modules/colorjs.io": {
+      "version": "0.6.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.6.0-alpha.1.tgz",
+      "integrity": "sha512-c/h/8uAmPydQcriRdX8UTAFHj6SpSHFHBA8LvMikvYWAVApPTwg/pyOXNsGmaCBd6L/EeDlRHSNhTtnIFp/qsg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/color"
+      }
+    },
    "node_modules/command-line-args": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@shoelace-style/webawesome",
  "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
  "homepage": "https://webawesome.com/",
  "author": "Web Awesome",
  "license": "MIT",
@@ -54,6 +54,7 @@
    "create": "plop --plopfile scripts/plop/plopfile.js",
    "test": "web-test-runner --group default",
    "test:component": "web-test-runner -- --watch --group",
+    "test:contrast": "cd src/styles/color && node contrast.test.js",
    "test:watch": "web-test-runner --watch --group default",
    "prettier": "prettier --check --log-level=warn .",
    "prettier:fix": "prettier --write --log-level=warn .",
@@ -91,6 +92,7 @@
    "chalk": "^5.3.0",
    "change-case": "^4.1.2",
    "chokidar": "^3.5.3",
+    "colorjs.io": "^0.6.0-alpha.1",
    "command-line-args": "^5.2.1",
    "comment-parser": "^1.4.1",
    "cspell": "^6.18.1",
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -126,7 +126,11 @@ async function generateStyles() {
        file.includes('themes/default') ||
        file.includes('themes/awesome') ||
        file.includes('themes/active') ||
+        file.includes('themes/glossy') ||
+        file.includes('themes/matter') ||
        file.includes('themes/mellow') ||
+        file.includes('themes/playful') ||
+        file.includes('themes/premium') ||
        file.includes('themes/tailspin') ||
        file.includes('themes/brutalist')
      ) {
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -69,10 +69,12 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
  @property() title = ''; // make reactive to pass through

  /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
+  @property({ reflect: true, initial: 'neutral' })
+  variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'inherit' = 'inherit';

  /** The button's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
+  @property({ reflect: true, default: 'accent' })
+  appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';

  /** The button's size. */
  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
--- a/src/components/callout/callout.ts
+++ b/src/components/callout/callout.ts
@@ -28,7 +28,13 @@ export default class WaCallout extends WebAwesomeElement {
  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];

  /** The callout's theme variant. */
-  @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
+  @property({ reflect: true, initial: 'brand' }) variant:
+    | 'brand'
+    | 'success'
+    | 'neutral'
+    | 'warning'
+    | 'danger'
+    | 'inherit' = 'inherit';

  /** The callout's visual appearance. */
  @property({ reflect: true }) appearance:
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -1,29 +1,35 @@
 :host {
  --spacing: var(--wa-space-xl);
+  --border-width: var(--wa-panel-border-width);
+  --border-radius: var(--wa-panel-border-radius);
+
+  --inner-border-radius: calc(var(--border-radius) - var(--border-width));

  display: flex;
  flex-direction: column;
  background-color: var(--wa-color-surface-default);
  border-color: var(--wa-color-surface-border);
-  border-radius: var(--wa-panel-border-radius);
+  border-radius: var(--border-radius);
  border-style: var(--wa-panel-border-style);
-  border-width: var(--wa-panel-border-width);
  box-shadow: var(--wa-shadow-s);
+  border-width: var(--border-width);
  color: var(--wa-color-text-normal);
 }

+.image,
+:host(:not([with-image])) .header {
+  border-start-start-radius: var(--inner-border-radius);
+  border-start-end-radius: var(--inner-border-radius);
+}
+
 .image {
  display: flex;
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  margin: calc(-1 * var(--border-width));
-  overflow: hidden;

  &::slotted(img) {
    display: block;
    width: 100%;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-start-start-radius: inherit !important;
+    border-start-end-radius: inherit !important;
  }
 }

@@ -33,11 +39,6 @@
  padding: calc(var(--spacing) / 2) var(--spacing);
 }

-:host(:not([with-image])) .header {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
 .body {
  display: block;
  padding: var(--spacing);
@@ -46,8 +47,8 @@
 .footer {
  display: block;
  border-top: inherit;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
+  border-end-start-radius: var(--inner-border-radius);
+  border-end-end-radius: var(--inner-border-radius);
  padding: var(--spacing);
 }

--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -19,6 +19,8 @@ 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.
 */
@customElement('wa-card')
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -233,47 +233,40 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
    // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733
    //
    return html`
-      <div
-        class=${classMap({
-          'form-control--has-hint': hasHint,
-          'form-control': true,
-        })}
+      <label part="base">
+        <span part="control">
+          <input
+            class="input"
+            type="checkbox"
+            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+            name=${this.name}
+            value=${ifDefined(this._value)}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            aria-checked=${this.checked ? 'true' : 'false'}
+            aria-describedby="hint"
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+          />
+
+          <wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
+        </span>
+
+        <slot part="label"></slot>
+      </label>
+
+      <slot
+        name="hint"
+        aria-hidden=${hasHint ? 'false' : 'true'}
+        class="${classMap({ 'has-slotted': hasHint })}"
+        id="hint"
+        part="hint"
+        >${this.hint}</slot
      >
-        <label part="base">
-          <span class="control">
-            <input
-              class="input"
-              type="checkbox"
-              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
-              name=${this.name}
-              value=${ifDefined(this._value)}
-              .indeterminate=${live(this.indeterminate)}
-              .checked=${live(this.checked)}
-              .disabled=${this.disabled}
-              .required=${this.required}
-              aria-checked=${this.checked ? 'true' : 'false'}
-              aria-describedby="hint"
-              @click=${this.handleClick}
-              @input=${this.handleInput}
-              @blur=${this.handleBlur}
-              @focus=${this.handleFocus}
-            />
-
-            <wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
-          </span>
-
-          <slot part="label"></slot>
-        </label>
-
-        <slot
-          name="hint"
-          aria-hidden=${hasHint ? 'false' : 'true'}
-          class="${classMap({ 'has-slotted': hasHint })}"
-          id="hint"
-          part="hint"
-          >${this.hint}</slot
-        >
-      </div>
    `;
  }
 }
--- a/src/components/image-comparer/image-comparer.css
+++ b/src/components/image-comparer/image-comparer.css
@@ -17,16 +17,13 @@
 .before,
 .after {
  display: block;
-  pointer-events: none;
-}

-.before::slotted(img),
-.after::slotted(img),
-.before::slotted(svg),
-.after::slotted(svg) {
-  display: block;
-  max-width: 100% !important;
-  height: auto;
+  &::slotted(img),
+  &::slotted(svg) {
+    display: block;
+    max-width: 100% !important;
+    height: auto;
+  }
 }

 .after {
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -1,4 +1,4 @@
-import { html, isServer } from 'lit';
+import { html, isServer, type PropertyValues } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -57,6 +57,8 @@ import styles from './input.css';
 * @cssproperty --border-color - The color of the input's borders.
 * @cssproperty --border-width - The width of the input's borders. Expects a single value.
 * @cssproperty --box-shadow - The shadow effects around the edges of the input.
+ *
+ * @cssstate blank - The input is empty.
 */
@customElement('wa-input')
 export default class WaInput extends WebAwesomeFormAssociatedElement {
@@ -308,6 +310,14 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
    this.passwordVisible = !this.passwordVisible;
  }

+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('value')) {
+      this.toggleCustomState('blank', !this.value);
+    }
+  }
+
  @watch('step', { waitUntilFirstUpdate: true })
  handleStepChange() {
    // If step changes, the value may become invalid so we need to recheck after the update. We set the new step
@@ -465,15 +475,15 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
                @click=${this.handlePasswordToggle}
                tabindex="-1"
              >
-                ${this.passwordVisible
+                ${!this.passwordVisible
                  ? html`
                      <slot name="show-password-icon">
-                        <wa-icon name="eye-slash" library="system" variant="regular"></wa-icon>
+                        <wa-icon name="eye" library="system" variant="regular"></wa-icon>
                      </slot>
                    `
                  : html`
                      <slot name="hide-password-icon">
-                        <wa-icon name="eye" library="system" variant="regular"></wa-icon>
+                        <wa-icon name="eye-slash" library="system" variant="regular"></wa-icon>
                      </slot>
                    `}
              </button>
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,4 +1,4 @@
-import type { TemplateResult } from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
 import { html, isServer } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -83,6 +83,8 @@ import styles from './select.css';
 * @cssproperty --border-color - The border color of the select's combobox.
 * @cssproperty --border-width - The width of the select's borders, including the listbox.
 * @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
+ *
+ * @cssstate blank - The select is empty.
 */
@customElement('wa-select')
 export default class WaSelect extends WebAwesomeFormAssociatedElement {
@@ -674,6 +676,14 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
    });
  }

+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('value')) {
+      this.toggleCustomState('blank', !this.value);
+    }
+  }
+
  @watch('disabled', { waitUntilFirstUpdate: true })
  handleDisabledChange() {
    // Close the listbox when the control is disabled
@@ -799,7 +809,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
      >
        <label
          id="label"
-          part="form-control-label"
+          part="form-control-label label"
          class="label"
          aria-hidden=${hasLabel ? 'false' : 'true'}
          @click=${this.handleLabelClick}
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -90,17 +90,22 @@ export default class WaTabGroup extends WebAwesomeElement {
        setTimeout(() => this.setAriaLabels());
      }

+      // Only process mutations for elements that are children of this tab group
+      const relevantMutations = mutations.filter(m => {
+        const target = m.target as HTMLElement;
+        return target.closest('wa-tab-group') === this;
+      });
+
      // Sync tabs when disabled states change
-      if (mutations.some(m => m.attributeName === 'disabled')) {
+      if (relevantMutations.some(m => m.attributeName === 'disabled')) {
        this.syncTabsAndPanels();
-        // sync tabs when active state on tab changes
-      } else if (mutations.some(m => m.attributeName === 'active')) {
-        const tabs = mutations
+      } else if (relevantMutations.some(m => m.attributeName === 'active')) {
+        const tabs = relevantMutations
          .filter(m => m.attributeName === 'active' && (m.target as HTMLElement).tagName.toLowerCase() === 'wa-tab')
          .map(m => m.target as WaTab);
        const newActiveTab = tabs.find(tab => tab.active);

-        if (newActiveTab) {
+        if (newActiveTab && newActiveTab.closest('wa-tab-group') === this) {
          this.setActiveTab(newActiveTab);
        }
      }
@@ -164,7 +169,7 @@ export default class WaTabGroup extends WebAwesomeElement {
    const tab = target.closest('wa-tab');
    const tabGroup = tab?.closest('wa-tab-group');

-    // Ensure the target tab is in this tab group
+    // Ensure the target tab is in this specific tab group instance
    if (tabGroup !== this) {
      return;
    }
@@ -179,7 +184,7 @@ export default class WaTabGroup extends WebAwesomeElement {
    const tab = target.closest('wa-tab');
    const tabGroup = tab?.closest('wa-tab-group');

-    // Ensure the target tab is in this tab group
+    // Ensure the target tab is in this specific tab group instance
    if (tabGroup !== this) {
      return;
    }
@@ -297,6 +302,11 @@ export default class WaTabGroup extends WebAwesomeElement {
      ...options,
    };

+    // Ensure the tab belongs to this tab group before activating
+    if (tab.closest('wa-tab-group') !== this) {
+      return;
+    }
+
    if (tab !== this.activeTab && !tab.disabled) {
      const previousTab = this.activeTab;
      this.active = tab.panel;
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -43,6 +43,8 @@ import styles from './textarea.css';
 * @cssproperty --border-color - The color of the textarea's borders.
 * @cssproperty --border-width - The width of the textarea's borders.
 * @cssproperty --box-shadow - The shadow effects around the edges of the textarea.
+ *
+ * @cssstate blank - The textarea is empty.
 */
@customElement('wa-textarea')
 export default class WaTextarea extends WebAwesomeFormAssociatedElement {
@@ -275,7 +277,12 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
    if (changedProperties.has('resize')) {
      this.setTextareaDimensions();
    }
+
    super.updated(changedProperties);
+
+    if (changedProperties.has('value')) {
+      this.toggleCustomState('blank', !this.value);
+    }
  }

  /** Sets focus on the textarea. */
--- a/src/components/tree-item/tree-item.css
+++ b/src/components/tree-item/tree-item.css
@@ -30,14 +30,16 @@ slot:not([name])::slotted(wa-icon) {
 }

 .checkbox {
+  line-height: var(--wa-form-control-value-line-height);
  pointer-events: none;
 }

 .expand-button,
 .checkbox,
 .label {
-  font: inherit;
+  font-family: inherit;
  font-size: var(--wa-font-size-m);
+  font-weight: inherit;
 }

 .checkbox::part(base) {
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -1,8 +1,19 @@
-import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit';
-import { LitElement, isServer, unsafeCSS } from 'lit';
+import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
+import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import componentStyles from '../styles/shadow/component.css';

+// Augment Lit's module
+declare module 'lit' {
+  interface PropertyDeclaration {
+    /**
+     * Specifies the property’s default value
+     */
+    default?: any;
+    initial?: any;
+  }
+}
+
 export default class WebAwesomeElement extends LitElement {
  constructor() {
    super();
@@ -14,6 +25,13 @@ export default class WebAwesomeElement extends LitElement {
      /* eslint-disable-next-line */
      console.error('Element internals are not supported in your browser. Consider using a polyfill');
    }
+
+    let Self = this.constructor as typeof WebAwesomeElement;
+    for (let [property, spec] of Self.elementProperties) {
+      if (spec.default === 'inherit' && spec.initial !== undefined && typeof property === 'string') {
+        this.toggleCustomState(`initial-${property}-${spec.initial}`);
+      }
+    }
  }

  // Make localization attributes reactive
@@ -148,4 +166,72 @@ export default class WebAwesomeElement extends LitElement {
  hasCustomState(state: string): boolean {
    return this.hasStatesSupport() ? this.internals.states.has(state) : false;
  }
+
+  static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
+    if (options) {
+      if (options.initial !== undefined && options.default === undefined) {
+        // Set "inherit" value as default if no default is specified but the initial value is
+        // This saves us having to tediously specify default: "inherit", initial: "foo" for every property
+        options.default = 'inherit';
+      }
+
+      if (options.default !== undefined && options.converter === undefined) {
+        // Wrap the default converter to remove the attribute if the value is the default
+        // This effectively prevents the component sprouting attributes that have not been specified
+        let converter = {
+          ...defaultConverter,
+          toAttribute(value: string, type: unknown): unknown {
+            if (value === options!.default) {
+              return null;
+            }
+            return defaultConverter.toAttribute!(value, type);
+          },
+        };
+        options = { ...options, converter };
+      }
+    }
+
+    super.createProperty(name, options);
+
+    // Wrap the default accessor with logic to return the default value if the value is null
+    if (options) {
+      if (options.default !== undefined) {
+        const descriptor = Object.getOwnPropertyDescriptor(this.prototype, name as string);
+
+        if (descriptor?.get) {
+          const getter = descriptor.get;
+
+          Object.defineProperty(this.prototype, name, {
+            ...descriptor,
+            get() {
+              return getter.call(this) ?? options.default;
+            },
+          });
+        }
+
+        if (options.default === 'inherit') {
+          // Add getter for "computed" value (taking ancestors into account)
+          let capitalizedName = name.toString().replace(/^\w/, c => c.toUpperCase());
+          Object.defineProperty(this.prototype, `computed${capitalizedName}`, {
+            get() {
+              let value;
+              let element = this;
+
+              do {
+                value = element[name as string];
+                element = element.parentElement;
+              } while (value === 'inherit' && element.parentElement);
+
+              if (value === 'inherit') {
+                // If we've reached this point and we still have `inherit`, we just ran out of parents
+                return options.initial;
+              }
+
+              return value;
+            },
+          });
+        }
+      }
+    }
+  }
 }
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-anodized {
  --wa-color-red-95: #fbeeeb;
  --wa-color-red-90: #f8e0d9;
  --wa-color-red-80: #efbdb1;
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-bright {
  --wa-color-red-95: #ffefef;
  --wa-color-red-90: #ffdddd;
  --wa-color-red-80: #ffb7b7;
@@ -36,17 +38,17 @@
  --wa-color-green-10: #0b2210;
  --wa-color-green-05: #07150a;

-  --wa-color-teal-95: #cafae6;
-  --wa-color-teal-90: #aaf3d7;
-  --wa-color-teal-80: #46e2b7;
-  --wa-color-teal-70: #00cba0;
-  --wa-color-teal-60: #00b28f;
-  --wa-color-teal-50: #008f76;
-  --wa-color-teal-40: #00705e;
-  --wa-color-teal-30: #005c4d;
-  --wa-color-teal-20: #00483d;
-  --wa-color-teal-10: #00312b;
-  --wa-color-teal-05: #001613;
+  --wa-color-teal-95: #d8fbf0;
+  --wa-color-teal-90: #a4f5dd;
+  --wa-color-teal-80: #51e1b5;
+  --wa-color-teal-70: #1cc693;
+  --wa-color-teal-60: #0da97a;
+  --wa-color-teal-50: #088660;
+  --wa-color-teal-40: #066549;
+  --wa-color-teal-30: #054f39;
+  --wa-color-teal-20: #043a2a;
+  --wa-color-teal-10: #022319;
+  --wa-color-teal-05: #01160f;

  --wa-color-blue-95: #e7f5ff;
  --wa-color-blue-90: #ceeaff;
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-classic {
  --wa-color-red-95: #feeeee;
  --wa-color-red-90: #fedede;
  --wa-color-red-80: #fdb8b8;
@@ -30,7 +32,7 @@
  --wa-color-green-70: #6cc08a;
  --wa-color-green-60: #38a961;
  --wa-color-green-50: #178640;
-  --wa-color-green-40: #3d6208;
+  --wa-color-green-40: #006823;
  --wa-color-green-30: #0d5026;
  --wa-color-green-20: #0c391d;
  --wa-color-green-10: #082213;
--- a/src/styles/color/contrast.test.js
+++ b/src/styles/color/contrast.test.js
@@ -0,0 +1,71 @@
+// Get a list of all CSS files in repo
+import chalk from 'chalk';
+import Color from 'colorjs.io';
+import palettes from './palettes.js';
+
+let targetContrasts = {
+  40: 3,
+  50: 4.5,
+  60: 7,
+};
+
+let result = { pass: 0, fail: 0, invalid: 0 };
+
+for (let paletteId in palettes) {
+  const tokens = palettes[paletteId];
+  let prefix = chalk.dim(`[${paletteId}]`);
+
+  for (let hue in tokens) {
+    let tints = tokens[hue];
+
+    for (let tint = 10; tint <= 50; tint += 10) {
+      let color = tints[tint];
+
+      if (!(color instanceof Color)) {
+        result.invalid++;
+        continue;
+      }
+
+      for (let difference in targetContrasts) {
+        let targetContrast = targetContrasts[difference];
+        let tint2 = tint + Number(difference);
+        if (tint2 > 90) {
+          continue;
+        }
+
+        let color2 = tints[tint2];
+
+        if (!(color2 instanceof Color)) {
+          result.invalid++;
+          continue;
+        }
+
+        let contrast = color.contrast(color2, 'WCAG21');
+        let pass = contrast >= targetContrast;
+        if (pass) {
+          result.pass++;
+        } else {
+          result.fail++;
+          console.log(
+            chalk.red(
+              `${prefix} WCAG 2.1 contrast between ${hue}-${tint} and ${hue}-${tint2} is ${contrast.toLocaleString('en')} < ${targetContrast}`,
+            ),
+          );
+        }
+      }
+    }
+  }
+}
+
+let testCount = result.pass + result.fail;
+console.info(
+  `Ran ${testCount} tests: ${chalk.green(`${chalk.bold(result.pass)} passed`)}` +
+    (result.fail ? `, ${chalk.red(`${chalk.bold(result.fail)} failed`)}` : '') +
+    (result.invalid ? `, ${chalk.red(`${chalk.bold(result.invalid)} invalid colors`)}` : ''),
+);
+
+if (testCount === result.pass) {
+  process.exit(0);
+} else {
+  process.exit(1);
+}
--- a/src/styles/color/default.css
+++ b/src/styles/color/default.css
@@ -7,7 +7,9 @@
 * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
 */
 :where(:root),
-:host {
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-default {
  --wa-color-red-95: #ffefef;
  --wa-color-red-90: #ffdddc;
  --wa-color-red-80: #ffb7b6;
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-elegant {
  --wa-color-red-95: #fdeeef;
  --wa-color-red-90: #fcdfe0;
  --wa-color-red-80: #f8b9bc;
--- a/src/styles/color/mild.css
+++ b/src/styles/color/mild.css
@@ -0,0 +1,100 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-mild {
+  --wa-color-red-95: #ffeeec;
+  --wa-color-red-90: #ffddda;
+  --wa-color-red-80: #f9bbb3;
+  --wa-color-red-70: #f0978d;
+  --wa-color-red-60: #e47468;
+  --wa-color-red-50: #cf443b;
+  --wa-color-red-40: #b40c12;
+  --wa-color-red-30: #910000;
+  --wa-color-red-20: #6d0000;
+  --wa-color-red-10: #450002;
+  --wa-color-red-05: #2f0001;
+
+  --wa-color-yellow-95: #fff4b3;
+  --wa-color-yellow-90: #fee58c;
+  --wa-color-yellow-80: #e3c868;
+  --wa-color-yellow-70: #c6ad4f;
+  --wa-color-yellow-60: #ab933a;
+  --wa-color-yellow-50: #897421;
+  --wa-color-yellow-40: #695808;
+  --wa-color-yellow-30: #534400;
+  --wa-color-yellow-20: #3d3100;
+  --wa-color-yellow-10: #251d00;
+  --wa-color-yellow-05: #171200;
+
+  --wa-color-green-95: #e1f9e1;
+  --wa-color-green-90: #bff2c0;
+  --wa-color-green-80: #9fd7a1;
+  --wa-color-green-70: #86bc88;
+  --wa-color-green-60: #6ca170;
+  --wa-color-green-50: #4e8153;
+  --wa-color-green-40: #336339;
+  --wa-color-green-30: #224e29;
+  --wa-color-green-20: #123a1b;
+  --wa-color-green-10: #01230a;
+  --wa-color-green-05: #001701;
+
+  --wa-color-teal-95: #edf3f3;
+  --wa-color-teal-90: #dbe8e7;
+  --wa-color-teal-80: #b4cfcc;
+  --wa-color-teal-70: #8db7b3;
+  --wa-color-teal-60: #679f9b;
+  --wa-color-teal-50: #36817c;
+  --wa-color-teal-40: #006461;
+  --wa-color-teal-30: #004e4b;
+  --wa-color-teal-20: #003937;
+  --wa-color-teal-10: #002220;
+  --wa-color-teal-05: #001514;
+
+  --wa-color-blue-95: #eaf5ff;
+  --wa-color-blue-90: #d5e7ff;
+  --wa-color-blue-80: #b5cced;
+  --wa-color-blue-70: #95b1d7;
+  --wa-color-blue-60: #7697c1;
+  --wa-color-blue-50: #5078a5;
+  --wa-color-blue-40: #305b88;
+  --wa-color-blue-30: #1b4771;
+  --wa-color-blue-20: #0a3458;
+  --wa-color-blue-10: #011f39;
+  --wa-color-blue-05: #001327;
+
+  --wa-color-indigo-95: #f7efff;
+  --wa-color-indigo-90: #ede1ff;
+  --wa-color-indigo-80: #d3c0ff;
+  --wa-color-indigo-70: #baa1f9;
+  --wa-color-indigo-60: #9f86e0;
+  --wa-color-indigo-50: #7f67bd;
+  --wa-color-indigo-40: #624a9e;
+  --wa-color-indigo-30: #4e3589;
+  --wa-color-indigo-20: #3a2074;
+  --wa-color-indigo-10: #24045f;
+  --wa-color-indigo-05: #180044;
+
+  --wa-color-violet-95: #ffedff;
+  --wa-color-violet-90: #fbdbff;
+  --wa-color-violet-80: #e2bde9;
+  --wa-color-violet-70: #c8a2d1;
+  --wa-color-violet-60: #af87b9;
+  --wa-color-violet-50: #8f679b;
+  --wa-color-violet-40: #714a7f;
+  --wa-color-violet-30: #5d366c;
+  --wa-color-violet-20: #492258;
+  --wa-color-violet-10: #310c40;
+  --wa-color-violet-05: #22042d;
+
+  --wa-color-gray-95: #f4f3f4;
+  --wa-color-gray-90: #e7e5e8;
+  --wa-color-gray-80: #ccc8cd;
+  --wa-color-gray-70: #b2adb2;
+  --wa-color-gray-60: #979498;
+  --wa-color-gray-50: #777478;
+  --wa-color-gray-40: #5b585d;
+  --wa-color-gray-30: #464547;
+  --wa-color-gray-20: #333235;
+  --wa-color-gray-10: #1f1d22;
+  --wa-color-gray-05: #121214;
+}
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-natural {
  --wa-color-red-95: #f9f0ee;
  --wa-color-red-90: #f5e2dd;
  --wa-color-red-80: #e8bfb5;
--- a/src/styles/color/palettes.js
+++ b/src/styles/color/palettes.js
@@ -0,0 +1,63 @@
+/**
+ * Export data on all color tokens from all palettes
+ */
+
+// Get a list of all CSS files in repo
+import Color from 'colorjs.io';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export const paletteFiles = fs.readdirSync(__dirname).filter(file => file.endsWith('.css'));
+export const declarationRegex = /^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>[^;]+)\s*;$/gm;
+
+function parse(contents, file) {
+  // Regex for each declaration
+  const matches = [...contents.matchAll(declarationRegex)];
+
+  if (matches.length === 0) {
+    throw new Error('Cound not extract colors');
+  }
+
+  const ret = {};
+
+  for (let match of matches) {
+    let { hue, level, color } = match.groups;
+    ret[hue] ??= {};
+
+    // Attempt to convert color to Color object, fall back to string if this fails
+    // This will happen for e.g. colors defined via color-mix()
+    try {
+      color = new Color(color);
+    } catch (e) {
+      console.warn(`[${file}] Unparseable color ${hue}-${level}: ${color}`);
+    }
+
+    if (level.startsWith('0')) {
+      // Leading zeroes throw off sorting, add both properties
+      // NOTE: Ideally one of the two would be added as non-enumerable, but then we cannot access it via 11ty data
+      ret[hue][level] = color;
+
+      // Drop leading zeroes
+      level = level.replace(/^0+/, '');
+    }
+
+    ret[hue][level] = color;
+  }
+
+  return ret;
+}
+
+const palettes = {};
+
+for (let file of paletteFiles) {
+  let css = fs.readFileSync(path.join(__dirname, file), 'utf8');
+  let tokens = parse(css, file);
+  let paletteId = file.replace(/\.css$/, '');
+
+  palettes[paletteId] = tokens;
+}
+
+export default palettes;
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-rudimentary {
  --wa-color-red-95: #ffeeee;
  --wa-color-red-90: #ffdddd;
  --wa-color-red-80: #ffb6b8;
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-vogue {
  --wa-color-red-95: #feeeee;
  --wa-color-red-90: #fedddd;
  --wa-color-red-80: #fdb8b8;
--- a/src/styles/native/checkbox.css
+++ b/src/styles/native/checkbox.css
@@ -41,7 +41,7 @@ input[type='checkbox']:where(:not(:host *)) {
 }

 input[type='checkbox']:where(:not(:host *)),
-:host .control {
+:host [part~='control'] {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
@@ -75,7 +75,7 @@ input[type='checkbox']:where(:not(:host *)) + label,

 /* Checked */
 input[type='checkbox']:is(:checked, :indeterminate):where(:not(:host *)),
-[part~='base'] .control:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
+[part~='base'] [part~="control"]:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
  color: var(--checked-icon-color);
  border-color: var(--border-color-checked);
  background-color: var(--background-color-checked);
@@ -83,7 +83,7 @@ input[type='checkbox']:is(:checked, :indeterminate):where(:not(:host *)),

 /* Focus */
 input[type='checkbox']:focus-visible:where(:not(:host *)),
-[part~='base'] .control:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
+[part~='base'] [part~="control"]:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
 }
--- a/src/styles/native/slider.css
+++ b/src/styles/native/slider.css
@@ -96,7 +96,7 @@ input[type='range'] {
    border-radius: 50%;
    background-color: var(--thumb-color);
    box-shadow:
-      var(--thumb-shadow),
+      var(--thumb-shadow, 0 0 transparent),
      0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
    transition-property: background-color, border-color, box-shadow, color;
    transition-duration: var(--wa-transition-normal);
--- a/src/styles/shadow/form-control.css
+++ b/src/styles/shadow/form-control.css
@@ -21,7 +21,7 @@
  font-size: var(--wa-size-smaller, 85%);
  line-height: var(--wa-form-control-label-line-height);

-  &:not(.has-slotted, .form-control--has-hint *) {
+  &:not(.has-slotted) {
    display: none;
  }
 }
--- a/src/styles/themes/active.css
+++ b/src/styles/themes/active.css
@@ -1,94 +1,19 @@
-@import url('../color/rudimentary.css');
-@import url('default/color.css');
+@import url('active/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('active/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('active/overrides.css');

 :where(:root),
 :host,
 .wa-theme-active,
+.wa-dark,
 .wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-normal: var(--wa-color-gray-05);
-  --wa-color-text-link: var(--wa-color-green-40);
-
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  --wa-color-mix-hover: white 10%;
-  --wa-color-mix-active: black 5%;
-
-  /**
-   * 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-on-loud: black;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-70);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: black;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: black;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-70);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: black;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: black;
-
-  /**
-   * Typography
-   */
-  --wa-font-family-body: 'Inter', sans-serif;
-
-  --wa-font-weight-semibold: 550;
-  --wa-font-weight-bold: 650;
-
+.wa-invert {
  /**
   * Rounding
   */
@@ -99,147 +24,3 @@
   */
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  color-scheme: dark;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: black;
-  --wa-color-surface-border: var(--wa-color-gray-20);
-
-  --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-green-70);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
-
-  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
-
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-   * 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-on-loud: black;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-80);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
-  --wa-color-success-on-loud: black;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-on-loud: black;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
-  --wa-color-danger-on-loud: black;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-on-loud: black;
-}
-
-/**
- * Component Styles
- */
-:where(:root),
-:host,
-.wa-theme-active {
-  --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
-    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
-  --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
-    inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
-    inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
-
-  :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
-      [appearance='plain'],
-      .wa-plain
-    ) {
-    box-shadow: var(--wa-theme-active-shadow-pop-out);
-
-    &:not([disabled], [loading]):active {
-      box-shadow: var(--wa-theme-active-shadow-punch-in);
-    }
-  }
-
-  wa-card {
-    box-shadow: var(--wa-theme-active-shadow-pop-out);
-  }
-
-  input:not([type='button'], [type='reset'], [type='submit'], :checked),
-  select,
-  textarea,
-  :is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
-  wa-input,
-  wa-select,
-  wa-textarea {
-    &:not([appearance='filled']):not([disabled]) {
-      --box-shadow: inset var(--wa-shadow-s);
-    }
-  }
-
-  input[type='radio'],
-  wa-radio {
-    --background-color-checked: var(--wa-form-control-activated-color);
-    --checked-icon-color: var(--wa-color-brand-on-loud);
-    --checked-icon-scale: 0.4;
-  }
-
-  input[type='range'],
-  wa-slider,
-  wa-switch {
-    --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
-  }
-
-  wa-progress-bar {
-    box-shadow: inset var(--wa-shadow-s);
-
-    &::part(indicator) {
-      box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
-    }
-  }
-}
--- a/src/styles/themes/active/color.css
+++ b/src/styles/themes/active/color.css
@@ -0,0 +1,139 @@
+@import url('../../color/rudimentary.css');
+@import url('../default/color.css');
+
+:where(:root),
+:host,
+.wa-theme-active,
+.wa-light,
+.wa-dark .wa-invert {
+  color-scheme: light;
+  color: var(--wa-color-text-normal);
+
+  /**
+   * Foundational Colors
+   */
+  --wa-color-text-normal: var(--wa-color-gray-05);
+  --wa-color-text-link: var(--wa-color-green-40);
+
+  --wa-color-focus: var(--wa-color-blue-60);
+
+  --wa-color-mix-hover: white 10%;
+  --wa-color-mix-active: black 5%;
+
+  /**
+   * 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-on-loud: black;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-border-loud: var(--wa-color-green-70);
+  --wa-color-success-on-quiet: var(--wa-color-green-40);
+  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: black;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-70);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: black;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-loud: var(--wa-color-red-70);
+  --wa-color-danger-on-quiet: var(--wa-color-red-40);
+  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: black;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-on-loud: black;
+}
+
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  /**
+   * Foundational Colors
+   */
+  --wa-color-surface-lowered: black;
+
+  --wa-color-text-link: var(--wa-color-green-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-on-loud: black;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-border-loud: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-80);
+  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-on-loud: black;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-on-loud: black;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-border-loud: var(--wa-color-red-60);
+  --wa-color-danger-on-quiet: var(--wa-color-red-80);
+  --wa-color-danger-on-normal: var(--wa-color-red-90);
+  --wa-color-danger-on-loud: black;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-on-loud: black;
+}
--- a/src/styles/themes/active/overrides.css
+++ b/src/styles/themes/active/overrides.css
@@ -0,0 +1,58 @@
+:where(:root),
+:host,
+.wa-theme-active {
+  --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
+    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
+  --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
+    inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
+    inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
+
+  :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
+      [appearance='plain'],
+      .wa-plain
+    ) {
+    box-shadow: var(--wa-theme-active-shadow-pop-out);
+
+    &:not([disabled], [loading]):active {
+      box-shadow: var(--wa-theme-active-shadow-punch-in);
+    }
+  }
+
+  wa-card {
+    box-shadow: var(--wa-theme-active-shadow-pop-out);
+  }
+
+  input:not([type='button'], [type='reset'], [type='submit'], :checked),
+  select,
+  textarea,
+  :is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
+  wa-input,
+  wa-select,
+  wa-textarea {
+    &:not([appearance='filled']):not([disabled]) {
+      --box-shadow: inset var(--wa-shadow-s);
+    }
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--wa-form-control-activated-color);
+    --checked-icon-color: var(--wa-color-brand-on-loud);
+    --checked-icon-scale: 0.4;
+  }
+
+  input[type='range'],
+  wa-slider,
+  wa-switch {
+    --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
+  }
+
+  wa-progress-bar {
+    box-shadow: inset var(--wa-shadow-s);
+
+    &::part(indicator) {
+      box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
+    }
+  }
+}
--- a/src/styles/themes/active/typography.css
+++ b/src/styles/themes/active/typography.css
@@ -0,0 +1,11 @@
+@import url('../default/typography.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+:where(:root),
+:host,
+.wa-theme-active {
+  --wa-font-family-body: 'Inter', sans-serif;
+
+  --wa-font-weight-semibold: 550;
+  --wa-font-weight-bold: 650;
+}
--- a/src/styles/themes/awesome.css
+++ b/src/styles/themes/awesome.css
@@ -1,97 +1,19 @@
-@import url('../color/bright.css');
-@import url('default/color.css');
+@import url('awesome/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('awesome/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
+@import url('awesome/overrides.css');

 :where(:root),
 :host,
 .wa-theme-awesome,
+.wa-dark,
 .wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-normal: var(--wa-color-gray-20);
-
-  /**
-   * 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-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-on-loud: var(--wa-color-text-normal);
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-30);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-loud: var(--wa-color-text-normal);
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-70);
-  --wa-color-danger-border-normal: var(--wa-color-red-50);
-  --wa-color-danger-border-loud: var(--wa-color-red-30);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-loud: var(--wa-color-text-normal);
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-50);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-30);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-on-loud: var(--wa-color-text-normal);
-
-  /**
-   * Typography
-   */
-  --wa-font-family-body: Quicksand, sans-serif;
-  --wa-font-family-heading: var(--wa-font-family-body);
-  --wa-font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  --wa-font-family-longform: ui-serif, serif;
-
-  --wa-font-weight-light: 400;
-  --wa-font-weight-normal: 500;
-  --wa-font-weight-semibold: 600;
-  --wa-font-weight-bold: 700;
-
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-heading: var(--wa-font-weight-bold);
-  --wa-font-weight-action: var(--wa-font-weight-bold);
-
+.wa-invert {
  /**
   * Spacing
   */
@@ -122,242 +44,11 @@
  /**
   * Component Groups
   */
-
-  /* Form controls */
-  --wa-form-control-activated-color: var(--wa-color-neutral-border-loud);
+  --wa-form-control-background-color: var(--wa-color-surface-default);
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
+  --wa-form-control-activated-color: var(--wa-color-neutral-border-loud);

  --wa-form-control-label-color: var(--wa-color-text-normal);
  --wa-form-control-label-font-weight: var(--wa-font-weight-bold);
  --wa-form-control-label-line-height: var(--wa-line-height-normal);
-
-  /* Tooltips */
-  --wa-tooltip-arrow-size: 0.375rem;
-
-  --wa-tooltip-background-color: var(--wa-color-text-normal);
-
-  --wa-tooltip-border-radius: var(--wa-border-radius-s);
-
-  --wa-tooltip-content-color: var(--wa-color-surface-default);
-  --wa-tooltip-font-size: var(--wa-font-size-s);
-  --wa-tooltip-line-height: var(--wa-line-height-normal);
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  color-scheme: dark;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
-  --wa-color-surface-border: var(--wa-color-gray-20);
-
-  --wa-color-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-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
-
-  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
-
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-   * 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-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-on-loud: white;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-05);
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-50);
-  --wa-color-danger-border-loud: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: white;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-50);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-on-loud: white;
-
-  /**
-   * Component Groups
-   */
-
-  /* Form controls */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-activated-color: var(--wa-color-neutral-border-loud);
-  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-
-  --wa-form-control-placeholder-color: var(--wa-color-gray-60);
-
-  --wa-form-control-required-content-color: inherit;
-}
-
-:where(:root),
-:host,
-.wa-theme-awesome {
-  /* #region Custom Styles */
-  wa-badge {
-    border-radius: var(--wa-border-radius-m);
-    font-weight: var(--wa-font-weight-bold);
-    text-transform: uppercase;
-  }
-
-  :is(
-      button,
-      input:where([type='button'], [type='reset'], [type='submit']),
-      wa-button,
-      wa-radio-group > wa-radio-button,
-      .wa-button
-    ):not([appearance='plain'], .wa-plain) {
-    --wa-transition-slow: 0;
-    --wa-transition-normal: 0;
-    --wa-transition-fast: 0;
-
-    --border-color: var(--text-color);
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--border-color);
-    box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
-      var(--wa-shadow-spread-s) var(--border-color);
-    --background-color-active: var(--border-color);
-    --text-color-active: var(--background-color);
-
-    margin-bottom: var(--wa-shadow-offset-y-s);
-
-    &:is([appearance='outlined'], .wa-outlined) {
-      --background-color: var(--wa-color-surface-default);
-    }
-
-    &:not([disabled], [loading]):active,
-    &::part(checked) {
-      box-shadow: none;
-      transform: translateY(var(--wa-shadow-offset-y-s));
-    }
-
-    .wa-dark & {
-      --border-color: var(--wa-color-border-quiet);
-    }
-  }
-
-  wa-callout,
-  .wa-callout {
-    &:is([appearance~='outlined'], .wa-outlined) {
-      border-color: var(--wa-color-border-normal);
-    }
-    &:not([appearance~='accent'], .wa-accent) {
-      color: var(--wa-color-text-normal);
-    }
-    &:not([appearance~='accent'], .wa-accent) {
-      --icon-color: var(--wa-color-border-normal);
-    }
-  }
-
-  wa-card {
-    background-color: var(--wa-color-surface-raised);
-  }
-  wa-card::part(header) {
-    border-bottom-style: dotted;
-  }
-  wa-card::part(footer) {
-    border-top-style: dotted;
-  }
-
-  input[type='checkbox'],
-  wa-checkbox {
-    --checked-icon-color: var(--wa-color-surface-default);
-  }
-
-  wa-radio-group > wa-radio-button {
-    &::part(base):active,
-    &::part(checked) {
-      --background-color: var(--border-color);
-      --background-color-hover: var(--border-color);
-      --border-color: var(--wa-color-neutral-border-loud);
-      --text-color: var(--wa-color-surface-default);
-    }
-  }
-
-  wa-switch {
-    --height: 1.5em;
-  }
-
-  wa-tag {
-    font-weight: var(--wa-font-weight-bold);
-  }
-
-  :is(
-      input:where(
-          :not(
-            [type='button'],
-            [type='checkbox'],
-            [type='color'],
-            [type='file'],
-            [type='hidden'],
-            [type='image'],
-            [type='radio'],
-            [type='range'],
-            [type='reset'],
-            [type='submit']
-          )
-        ),
-      select,
-      textarea,
-      wa-input,
-      wa-select,
-      wa-textarea,
-      .wa-text-field
-    ):not(:focus, [appearance='filled'], .wa-filled) {
-    --box-shadow: inset var(--wa-shadow-s);
-  }
-  /* #endregion */
 }
--- a/src/styles/themes/awesome/color.css
+++ b/src/styles/themes/awesome/color.css
@@ -0,0 +1,126 @@
+@import url('../../color/bright.css');
+@import url('../default/color.css');
+
+:where(:root),
+:host,
+.wa-theme-awesome,
+.wa-light,
+.wa-dark .wa-invert {
+  /**
+   * Foundational Colors
+   */
+  --wa-color-text-normal: var(--wa-color-gray-20);
+
+  /**
+   * 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-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-on-loud: var(--wa-color-text-normal);
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-70);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-30);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-loud: var(--wa-color-text-normal);
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-border-quiet: var(--wa-color-red-70);
+  --wa-color-danger-border-normal: var(--wa-color-red-50);
+  --wa-color-danger-border-loud: var(--wa-color-red-30);
+  --wa-color-danger-on-quiet: var(--wa-color-red-40);
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-loud: var(--wa-color-text-normal);
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-70);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-50);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-30);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-40);
+  --wa-color-neutral-on-loud: var(--wa-color-text-normal);
+}
+
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  color-scheme: dark;
+  color: var(--wa-color-text-normal);
+
+  /**
+   * 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-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-on-loud: white;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-05);
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-border-quiet: var(--wa-color-red-30);
+  --wa-color-danger-border-normal: var(--wa-color-red-50);
+  --wa-color-danger-border-loud: var(--wa-color-red-80);
+  --wa-color-danger-on-quiet: var(--wa-color-red-70);
+  --wa-color-danger-on-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-loud: white;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-30);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-50);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-on-loud: white;
+}
--- a/src/styles/themes/awesome/overrides.css
+++ b/src/styles/themes/awesome/overrides.css
@@ -0,0 +1,119 @@
+:where(:root),
+:host,
+.wa-theme-awesome {
+  /* #region Custom Styles */
+  wa-badge {
+    border-radius: var(--wa-border-radius-m);
+    font-weight: var(--wa-font-weight-bold);
+    text-transform: uppercase;
+  }
+
+  :is(
+      button,
+      input:where([type='button'], [type='reset'], [type='submit']),
+      wa-button,
+      wa-radio-group > wa-radio-button,
+      .wa-button
+    ):not([appearance='plain'], .wa-plain) {
+    --wa-transition-slow: 0;
+    --wa-transition-normal: 0;
+    --wa-transition-fast: 0;
+
+    --border-color: var(--text-color);
+    --border-color-hover: var(--border-color);
+    --border-color-active: var(--border-color);
+    box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
+      var(--wa-shadow-spread-s) var(--border-color);
+    --background-color-active: var(--border-color);
+    --text-color-active: var(--background-color);
+
+    margin-bottom: var(--wa-shadow-offset-y-s);
+
+    &:is([appearance='outlined'], .wa-outlined) {
+      --background-color: var(--wa-color-surface-default);
+    }
+
+    &:not([disabled], [loading]):active,
+    &::part(checked) {
+      box-shadow: none;
+      transform: translateY(var(--wa-shadow-offset-y-s));
+    }
+
+    .wa-dark & {
+      --border-color: var(--wa-color-border-quiet);
+    }
+  }
+
+  wa-callout,
+  .wa-callout {
+    &:is([appearance~='outlined'], .wa-outlined) {
+      border-color: var(--wa-color-border-normal);
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      color: var(--wa-color-text-normal);
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-border-normal);
+    }
+  }
+
+  wa-card {
+    background-color: var(--wa-color-surface-raised);
+  }
+  wa-card::part(header) {
+    border-bottom-style: dotted;
+  }
+  wa-card::part(footer) {
+    border-top-style: dotted;
+  }
+
+  input[type='checkbox'],
+  wa-checkbox,
+  wa-tree-item::part(checkbox__control) {
+    --checked-icon-color: var(--wa-color-surface-default);
+  }
+
+  wa-radio-group > wa-radio-button {
+    &::part(base):active,
+    &::part(checked) {
+      --background-color: var(--border-color);
+      --background-color-hover: var(--border-color);
+      --border-color: var(--wa-color-neutral-border-loud);
+      --text-color: var(--wa-color-surface-default);
+    }
+  }
+
+  wa-switch {
+    --height: 1.5em;
+  }
+
+  wa-tag {
+    font-weight: var(--wa-font-weight-bold);
+  }
+
+  :is(
+      input:where(
+          :not(
+            [type='button'],
+            [type='checkbox'],
+            [type='color'],
+            [type='file'],
+            [type='hidden'],
+            [type='image'],
+            [type='radio'],
+            [type='range'],
+            [type='reset'],
+            [type='submit']
+          )
+        ),
+      select,
+      textarea,
+      wa-input,
+      wa-select,
+      wa-textarea,
+      .wa-text-field
+    ):not(:focus, [appearance='filled'], .wa-filled) {
+    --box-shadow: inset var(--wa-shadow-s);
+  }
+  /* #endregion */
+}
--- a/src/styles/themes/awesome/typography.css
+++ b/src/styles/themes/awesome/typography.css
@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.wa-theme-awesome {
+  /**
+   * Typography
+   */
+  --wa-font-family-body: Quicksand, sans-serif;
+  --wa-font-family-heading: var(--wa-font-family-body);
+  --wa-font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  --wa-font-family-longform: ui-serif, serif;
+
+  --wa-font-weight-light: 400;
+  --wa-font-weight-normal: 500;
+  --wa-font-weight-semibold: 600;
+  --wa-font-weight-bold: 700;
+
+  --wa-font-weight-body: var(--wa-font-weight-normal);
+  --wa-font-weight-heading: var(--wa-font-weight-bold);
+  --wa-font-weight-action: var(--wa-font-weight-bold);
+}
--- a/src/styles/themes/brutalist.css
+++ b/src/styles/themes/brutalist.css
@@ -1,99 +1,19 @@
-@import url('../color/default.css');
-@import url('default/color.css');
+@import url('brutalist/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('brutalist/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
+@import url('brutalist/overrides.css');

 :where(:root),
 :host,
 .wa-theme-brutalist,
+.wa-dark,
 .wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-surface-border: var(--wa-color-gray-10);
-
-  --wa-color-text-link: var(--wa-color-gray-40);
-
-  --wa-color-shadow: rgb(0 0 0 / 0.2);
-
-  --wa-color-mix-hover: white 10%;
-  --wa-color-mix-active: white 20%;
-
-  /**
-   * 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-on-loud: white;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-60);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
-  --wa-color-success-on-loud: white;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-60);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-loud: white;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-80);
-  --wa-color-danger-border-normal: var(--wa-color-red-60);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-loud: white;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: white;
-
-  /**
-   * Typography
-   */
-  --wa-font-family-body: 'Space Grotesk', sans-serif;
-  --wa-font-family-heading: 'IBM Plex Sans Condensed', sans-serif;
-  --wa-font-family-code: 'Space Mono', monospace;
-  --wa-font-family-longform: ui-serif, serif;
-
-  --wa-font-weight-bold: 700;
-
-  --wa-font-weight-heading: var(--wa-font-weight-semibold);
-
+.wa-invert {
  /**
   * Spacing
   */
@@ -113,9 +33,7 @@
   * Shadows
   */
  --wa-shadow-blur-scale: 0;
-
  --wa-shadow-offset-x-scale: 4;
-
  --wa-shadow-offset-y-scale: 4;

  /**
@@ -123,178 +41,3 @@
   */
  --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
 }
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  color-scheme: dark;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-surface-raised: var(--wa-color-gray-05);
-  --wa-color-surface-default: var(--wa-color-gray-10);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
-  --wa-color-surface-border: var(--wa-color-gray-40);
-
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
-  --wa-color-text-link: var(--wa-color-gray-70);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
-
-  --wa-color-shadow: rgb(0 0 0 / 0.5);
-
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-   * 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-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-green-80);
-  --wa-color-success-on-normal: var(--wa-color-green-95);
-  --wa-color-success-on-loud: var(--wa-color-green-10);
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-95);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-95);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-50);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-95);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
-}
-
-/**
- * Component Styles
- */
-:where(:root),
-:host,
-.wa-theme-brutalist {
-  blockquote,
-  pre {
-    border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
-  }
-  wa-badge {
-    text-transform: uppercase;
-  }
-
-  wa-callout,
-  wa-tag {
-    border-inline-start-color: var(--border-color, var(--wa-color-border-loud));
-    border-inline-start-width: var(--wa-border-width-s);
-
-    &:not([appearance~='outlined'], .wa-outlined) {
-      border-block-start-width: 0;
-      border-block-end-width: 0;
-      border-inline-end-width: 0;
-    }
-
-    &:not([appearance~='accent'], .wa-accent) {
-      --icon-color: var(--wa-color-fill-loud);
-      --text-color: var(--wa-color-text-normal);
-    }
-  }
-
-  wa-callout,
-  .wa-callout {
-    --spacing: var(--wa-space-s) var(--wa-space-m);
-
-    &::part(icon) {
-      --spacing: var(--wa-space-m);
-    }
-  }
-
-  wa-carousel {
-    --pagination-color: var(--wa-color-neutral-fill-normal);
-  }
-
-  wa-carousel::part(scroll-container) {
-    padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
-  }
-
-  wa-carousel::part(pagination-item),
-  wa-image-comparer::part(handle),
-  wa-progress-bar::part(base),
-  wa-slider::part(base),
-  input[type='range'],
-  wa-switch::part(control),
-  wa-switch::part(thumb) {
-    border-radius: var(--wa-border-radius-square);
-  }
-
-  wa-carousel-item {
-    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
-    box-shadow: var(--wa-shadow-s);
-  }
-
-  :is(
-    input:where(
-        :not(
-          [type='button'],
-          [type='checkbox'],
-          [type='color'],
-          [type='file'],
-          [type='hidden'],
-          [type='image'],
-          [type='radio'],
-          [type='range'],
-          [type='reset'],
-          [type='submit']
-        )
-      ),
-    select,
-    textarea,
-    wa-input,
-    wa-select,
-    wa-textarea,
-    .wa-text-field
-  ) {
-    --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
-  }
-
-  wa-rating {
-    --symbol-color-active: var(--wa-color-neutral-fill-loud);
-  }
-}
--- a/src/styles/themes/brutalist/color.css
+++ b/src/styles/themes/brutalist/color.css
@@ -0,0 +1,145 @@
+@import url('../../color/default.css');
+@import url('../default/color.css');
+
+:where(:root),
+:host,
+.wa-theme-brutalist,
+.wa-light,
+.wa-dark .wa-invert {
+  /**
+   * Foundational Colors
+   */
+  --wa-color-surface-border: var(--wa-color-gray-10);
+
+  --wa-color-text-link: var(--wa-color-gray-40);
+
+  --wa-color-shadow: rgb(0 0 0 / 0.2);
+
+  --wa-color-mix-hover: white 10%;
+  --wa-color-mix-active: white 20%;
+
+  /**
+   * 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-on-loud: white;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-border-quiet: var(--wa-color-green-80);
+  --wa-color-success-border-normal: var(--wa-color-green-60);
+  --wa-color-success-border-loud: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-40);
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-loud: white;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-60);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-loud: white;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-border-quiet: var(--wa-color-red-80);
+  --wa-color-danger-border-normal: var(--wa-color-red-60);
+  --wa-color-danger-border-loud: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-40);
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-loud: white;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-70);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-40);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-20);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-10);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-on-loud: white;
+}
+
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  color-scheme: dark;
+  color: var(--wa-color-text-normal);
+
+  /**
+   * Foundational Colors
+   */
+  --wa-color-surface-raised: var(--wa-color-gray-05);
+  --wa-color-surface-default: var(--wa-color-gray-10);
+  --wa-color-surface-lowered: var(--wa-color-gray-05);
+  --wa-color-surface-border: var(--wa-color-gray-40);
+
+  --wa-color-text-link: var(--wa-color-gray-70);
+
+  --wa-color-shadow: rgb(0 0 0 / 0.5);
+
+  /**
+   * 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-success-fill-quiet: var(--wa-color-green-20);
+  --wa-color-success-fill-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-loud: var(--wa-color-green-70);
+  --wa-color-success-border-quiet: var(--wa-color-green-30);
+  --wa-color-success-border-normal: var(--wa-color-green-40);
+  --wa-color-success-border-loud: var(--wa-color-green-80);
+  --wa-color-success-on-quiet: var(--wa-color-green-80);
+  --wa-color-success-on-normal: var(--wa-color-green-95);
+  --wa-color-success-on-loud: var(--wa-color-green-10);
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-95);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
+  --wa-color-danger-fill-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
+  --wa-color-danger-border-quiet: var(--wa-color-red-30);
+  --wa-color-danger-border-normal: var(--wa-color-red-40);
+  --wa-color-danger-border-loud: var(--wa-color-red-80);
+  --wa-color-danger-on-quiet: var(--wa-color-red-80);
+  --wa-color-danger-on-normal: var(--wa-color-red-95);
+  --wa-color-danger-on-loud: var(--wa-color-red-10);
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-50);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-90);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-95);
+  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
+}
--- a/src/styles/themes/brutalist/overrides.css
+++ b/src/styles/themes/brutalist/overrides.css
@@ -0,0 +1,89 @@
+:where(:root),
+:host,
+.wa-theme-brutalist {
+  blockquote,
+  pre {
+    border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
+  }
+  wa-badge {
+    text-transform: uppercase;
+  }
+
+  wa-callout,
+  wa-tag {
+    border-inline-start-color: var(--border-color, var(--wa-color-border-loud));
+    border-inline-start-width: var(--wa-border-width-s);
+
+    &:not([appearance~='outlined'], .wa-outlined) {
+      border-block-start-width: 0;
+      border-block-end-width: 0;
+      border-inline-end-width: 0;
+    }
+
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-fill-loud);
+      --text-color: var(--wa-color-text-normal);
+    }
+  }
+
+  wa-callout,
+  .wa-callout {
+    --spacing: var(--wa-space-s) var(--wa-space-m);
+
+    &::part(icon) {
+      --spacing: var(--wa-space-m);
+    }
+  }
+
+  wa-carousel {
+    --pagination-color: var(--wa-color-neutral-fill-normal);
+  }
+
+  wa-carousel::part(scroll-container) {
+    padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
+  }
+
+  wa-carousel::part(pagination-item),
+  wa-image-comparer::part(handle),
+  wa-progress-bar::part(base),
+  wa-slider::part(base),
+  input[type='range'],
+  wa-switch::part(control),
+  wa-switch::part(thumb) {
+    border-radius: var(--wa-border-radius-square);
+  }
+
+  wa-carousel-item {
+    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
+    box-shadow: var(--wa-shadow-s);
+  }
+
+  :is(
+    input:where(
+        :not(
+          [type='button'],
+          [type='checkbox'],
+          [type='color'],
+          [type='file'],
+          [type='hidden'],
+          [type='image'],
+          [type='radio'],
+          [type='range'],
+          [type='reset'],
+          [type='submit']
+        )
+      ),
+    select,
+    textarea,
+    wa-input,
+    wa-select,
+    wa-textarea,
+    .wa-text-field
+  ) {
+    --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
+  }
+
+  wa-rating {
+    --symbol-color-active: var(--wa-color-neutral-fill-loud);
+  }
+}
--- a/src/styles/themes/brutalist/typography.css
+++ b/src/styles/themes/brutalist/typography.css
@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.wa-theme-brutalist {
+  --wa-font-family-body: 'Space Grotesk', sans-serif;
+  --wa-font-family-heading: 'IBM Plex Sans Condensed', sans-serif;
+  --wa-font-family-code: 'Space Mono', monospace;
+  --wa-font-family-longform: ui-serif, serif;
+
+  --wa-font-weight-bold: 700;
+
+  --wa-font-weight-heading: var(--wa-font-weight-semibold);
+}
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -1,84 +1,19 @@
-@import url('../color/classic.css');
-@import url('default/color.css');
+@import url('classic/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('classic/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
+@import url('classic/overrides.css');

 :where(:root),
 :host,
 .wa-theme-classic,
+.wa-dark,
 .wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-
-  /**
-   * 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-on-loud: white;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
-  --wa-color-success-on-loud: white;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-loud: white;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-loud: white;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: white;
-
-  /**
-   * Typography
-   */
-  --wa-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --wa-font-family-heading: var(--wa-font-family-body);
-  --wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  --wa-font-family-longform: Georgia, 'Times New Roman', serif;
-
-  --wa-link-decoration-default: underline;
-
+.wa-invert {
  /**
   * Focus
   */
@@ -106,238 +41,9 @@
  /**
   * Component Groups
   */
-
  /* Form controls */
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);

  /* Panels */
  --wa-panel-border-radius: var(--wa-border-radius-m);
-
-  /* Tooltips */
-  --wa-tooltip-background-color: var(--wa-color-text-normal);
-  --wa-tooltip-content-color: var(--wa-color-surface-default);
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  color-scheme: dark;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
-  --wa-color-surface-border: var(--wa-color-gray-20);
-
-  --wa-color-text-normal: var(--wa-color-gray-80);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
-  --wa-color-text-link: var(--wa-color-blue-70);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
-
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
-    transparent
-  );
-
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-   * 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-on-loud: var(--wa-color-gray-10);
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
-  --wa-color-success-on-loud: var(--wa-color-gray-10);
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-gray-10);
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-60);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: var(--wa-color-gray-10);
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
-}
-
-/**
- * Component Styles
- */
-:where(:root),
-:host,
-.wa-theme-classic {
-  wa-avatar {
-    --background-color: var(--wa-color-neutral-fill-loud);
-    --text-color: var(--wa-color-neutral-on-loud);
-  }
-
-  button,
-  input:where([type='button'], [type='reset'], [type='submit']),
-  wa-button,
-  .wa-button,
-  wa-radio-button {
-    font-size: var(--wa-size-smaller);
-  }
-
-  wa-radio-button {
-    --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
-    --background-color-hover: var(--wa-form-control-activated-color);
-    --border-color: var(--wa-form-control-border-color);
-    --border-color-active: var(--background-color-active);
-    --border-color-hover: var(--background-color-hover);
-    --text-color-active: var(--text-color-hover);
-    --text-color-hover: var(--wa-color-brand-on-loud);
-    --indicator-color: var(--wa-background-color);
-
-    &[checked] {
-      --background-color: var(--wa-form-control-activated-color);
-      --border-color: var(--background-color);
-      --text-color: var(--wa-color-brand-on-loud);
-    }
-  }
-
-  wa-breadcrumb {
-    font-size: var(--wa-font-size-s);
-  }
-
-  wa-callout,
-  .wa-callout {
-    --spacing: var(--wa-space-l);
-    font-size: var(--wa-size-smaller);
-
-    &:is([appearance~='outlined'], .wa-outlined) {
-      border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
-      border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
-        var(--wa-color-surface-border) var(--wa-color-surface-border);
-
-      &:not([appearance~='accent'], .wa-accent) {
-        --border-color: var(--wa-color-fill-loud);
-      }
-    }
-    &:not([appearance~='accent'], .wa-accent) {
-      --icon-color: var(--wa-color-fill-loud);
-      --text-color: var(--wa-color-text-normal);
-    }
-  }
-
-  wa-card {
-    background-color: var(--wa-color-surface-raised);
-  }
-
-  wa-carousel {
-    --box-shadow: var(--wa-shadow-s);
-    --pagination-color-active: var(--wa-color-neutral-fill-loud);
-  }
-
-  wa-dialog,
-  wa-drawer {
-    --spacing: var(--wa-space-l);
-  }
-
-  :is(
-      input:where(
-          :not(
-            [type='button'],
-            [type='checkbox'],
-            [type='color'],
-            [type='file'],
-            [type='hidden'],
-            [type='image'],
-            [type='radio'],
-            [type='range'],
-            [type='reset'],
-            [type='submit']
-          )
-        ),
-      select,
-      textarea,
-      wa-input,
-      wa-select,
-      wa-textarea,
-      .wa-text-field
-    ):not([appearance='filled'], .wa-filled) {
-    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-      color-mix(in oklab, var(--wa-color-focus), transparent 50%);
-    --wa-focus-ring-offset: 0;
-  }
-
-  input[type='radio'],
-  wa-radio {
-    --background-color-checked: var(--border-color-checked);
-    --checked-icon-color: var(--wa-color-surface-default);
-    --checked-icon-scale: 0.4;
-  }
-
-  input[type='range'],
-  wa-slider {
-    --thumb-gap: 0;
-  }
-
-  wa-switch {
-    --background-color: var(--wa-color-gray-50);
-    --border-color: var(--background-color);
-    --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
-    --thumb-color: var(--wa-color-surface-default);
-    --thumb-size: calc(var(--height) + 4px);
-    --width: calc(var(--height) * 2);
-
-    &::part(thumb) {
-      border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
-    }
-    &[checked]::part(thumb) {
-      border-color: var(--background-color-checked);
-    }
-  }
-
-  wa-progress-bar {
-    --height: 1rem;
-  }
-
-  wa-tab {
-    font-size: var(--wa-font-size-s);
-  }
 }
--- a/src/styles/themes/classic/color.css
+++ b/src/styles/themes/classic/color.css
@@ -0,0 +1,125 @@
+@import url('../../color/classic.css');
+@import url('../default/color.css');
+
+:where(:root),
+:host,
+.wa-theme-classic,
+.wa-light,
+.wa-dark .wa-invert {
+  color-scheme: light;
+
+  /**
+   * 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-on-loud: white;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-border-loud: var(--wa-color-green-60);
+  --wa-color-success-on-quiet: var(--wa-color-green-50);
+  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-on-loud: white;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-on-loud: white;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-loud: var(--wa-color-red-60);
+  --wa-color-danger-on-quiet: var(--wa-color-red-50);
+  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-on-loud: white;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-on-loud: white;
+}
+
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  /**
+   * Foundational Colors
+   */
+  --wa-color-text-normal: var(--wa-color-gray-80);
+
+  /**
+   * 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-on-loud: var(--wa-color-gray-10);
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-20);
+  --wa-color-success-fill-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-loud: var(--wa-color-green-70);
+  --wa-color-success-border-quiet: var(--wa-color-green-30);
+  --wa-color-success-border-normal: var(--wa-color-green-40);
+  --wa-color-success-border-loud: var(--wa-color-green-50);
+  --wa-color-success-on-quiet: var(--wa-color-green-70);
+  --wa-color-success-on-normal: var(--wa-color-green-80);
+  --wa-color-success-on-loud: var(--wa-color-gray-10);
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-on-loud: var(--wa-color-gray-10);
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
+  --wa-color-danger-fill-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-loud: var(--wa-color-red-60);
+  --wa-color-danger-border-quiet: var(--wa-color-red-30);
+  --wa-color-danger-border-normal: var(--wa-color-red-40);
+  --wa-color-danger-border-loud: var(--wa-color-red-50);
+  --wa-color-danger-on-quiet: var(--wa-color-red-70);
+  --wa-color-danger-on-normal: var(--wa-color-red-80);
+  --wa-color-danger-on-loud: var(--wa-color-gray-10);
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-60);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
+  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+}
--- a/src/styles/themes/classic/overrides.css
+++ b/src/styles/themes/classic/overrides.css
@@ -0,0 +1,134 @@
+:where(:root),
+:host,
+.wa-theme-classic {
+  wa-avatar {
+    --background-color: var(--wa-color-neutral-fill-loud);
+    --text-color: var(--wa-color-neutral-on-loud);
+  }
+
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  wa-button,
+  .wa-button,
+  wa-radio-button {
+    font-size: var(--wa-size-smaller);
+  }
+
+  wa-radio-button {
+    --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
+    --background-color-hover: var(--wa-form-control-activated-color);
+    --border-color: var(--wa-form-control-border-color);
+    --border-color-active: var(--background-color-active);
+    --border-color-hover: var(--background-color-hover);
+    --text-color-active: var(--text-color-hover);
+    --text-color-hover: var(--wa-color-brand-on-loud);
+    --indicator-color: var(--wa-background-color);
+
+    &[checked] {
+      --background-color: var(--wa-form-control-activated-color);
+      --border-color: var(--background-color);
+      --text-color: var(--wa-color-brand-on-loud);
+    }
+  }
+
+  wa-breadcrumb {
+    font-size: var(--wa-font-size-s);
+  }
+
+  wa-callout,
+  .wa-callout {
+    --spacing: var(--wa-space-l);
+    font-size: var(--wa-size-smaller);
+
+    &:is([appearance~='outlined'], .wa-outlined) {
+      border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
+      border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
+        var(--wa-color-surface-border) var(--wa-color-surface-border);
+
+      &:not([appearance~='accent'], .wa-accent) {
+        --border-color: var(--wa-color-fill-loud);
+      }
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-fill-loud);
+      --text-color: var(--wa-color-text-normal);
+    }
+  }
+
+  wa-card {
+    background-color: var(--wa-color-surface-raised);
+  }
+
+  wa-carousel {
+    --box-shadow: var(--wa-shadow-s);
+    --pagination-color-active: var(--wa-color-neutral-fill-loud);
+  }
+
+  wa-dialog,
+  wa-drawer {
+    --spacing: var(--wa-space-l);
+  }
+
+  :is(
+      input:where(
+          :not(
+            [type='button'],
+            [type='checkbox'],
+            [type='color'],
+            [type='file'],
+            [type='hidden'],
+            [type='image'],
+            [type='radio'],
+            [type='range'],
+            [type='reset'],
+            [type='submit']
+          )
+        ),
+      select,
+      textarea,
+      wa-input,
+      wa-select,
+      wa-textarea,
+      .wa-text-field
+    ):not([appearance='filled'], .wa-filled) {
+    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
+      color-mix(in oklab, var(--wa-color-focus), transparent 50%);
+    --wa-focus-ring-offset: 0;
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--border-color-checked);
+    --checked-icon-color: var(--wa-color-surface-default);
+    --checked-icon-scale: 0.4;
+  }
+
+  input[type='range'],
+  wa-slider {
+    --thumb-gap: 0;
+  }
+
+  wa-switch {
+    --background-color: var(--wa-color-gray-50);
+    --border-color: var(--background-color);
+    --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
+    --thumb-color: var(--wa-color-surface-default);
+    --thumb-size: calc(var(--height) + 4px);
+    --width: calc(var(--height) * 2);
+
+    &::part(thumb) {
+      border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
+    }
+    &[checked]::part(thumb) {
+      border-color: var(--background-color-checked);
+    }
+  }
+
+  wa-progress-bar {
+    --height: 1rem;
+  }
+
+  wa-tab {
+    font-size: var(--wa-font-size-s);
+  }
+}
--- a/src/styles/themes/classic/typography.css
+++ b/src/styles/themes/classic/typography.css
@@ -0,0 +1,13 @@
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.wa-theme-classic {
+  --wa-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --wa-font-family-heading: var(--wa-font-family-body);
+  --wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  --wa-font-family-longform: Georgia, 'Times New Roman', serif;
+
+  --wa-link-decoration-default: underline;
+}
--- a/src/styles/themes/default.css
+++ b/src/styles/themes/default.css
@@ -7,19 +7,3 @@
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
-
-:where(:root),
-:host,
-.wa-theme-default,
-.wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-  color: var(--wa-color-text-normal);
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  color-scheme: dark;
-  color: var(--wa-color-text-normal);
-}
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -4,8 +4,12 @@
 :where(:root),
 :host,
 .wa-theme-default,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-light,
 .wa-dark .wa-invert {
+  color-scheme: light;
+  color: var(--wa-color-text-normal);
+
  /**
   * Foundational Colors
   */
@@ -108,6 +112,9 @@
 .wa-dark,
 .wa-invert,
 :is(:host-context(.wa-dark)) {
+  color-scheme: dark;
+  color: var(--wa-color-text-normal);
+
  /**
   * Foundational Colors
   */
--- a/src/styles/themes/default/groups.css
+++ b/src/styles/themes/default/groups.css
@@ -4,8 +4,10 @@
 :where(:root),
 :host,
 .wa-theme-default,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-light,
-.wa-dark .wa-invert {
+.wa-dark,
+.wa-invert {
  /* Form controls */
  --wa-form-control-background-color: var(--wa-color-surface-default);

@@ -38,35 +40,11 @@
  /* Tooltips */
  --wa-tooltip-arrow-size: 0.375rem;

-  --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
+  --wa-tooltip-background-color: var(--wa-color-text-normal);

-  --wa-tooltip-border-radius: var(--wa-border-radius-m);
+  --wa-tooltip-border-radius: var(--wa-border-radius-s);

-  --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
+  --wa-tooltip-content-color: var(--wa-color-surface-default);
  --wa-tooltip-font-size: var(--wa-font-size-s);
  --wa-tooltip-line-height: var(--wa-line-height-normal);
 }
-
-/** need to wrap :host-context() in an :is() selector for unsupported browsers */
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  /* Form controls */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-
-  --wa-form-control-placeholder-color: var(--wa-color-gray-60);
-
-  --wa-form-control-required-content-color: inherit;
-
-  /* Tooltips */
-  --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
-
-  --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
-}
--- a/src/styles/themes/glassy.css
+++ b/src/styles/themes/glassy.css
@@ -1,206 +0,0 @@
-@import url('../color/elegant.css');
-@import url('default/color.css');
-@import url('default/space.css');
-@import url('default/outlines.css');
-@import url('default/typography.css');
-@import url('default/rounding.css');
-@import url('default/shadows.css');
-@import url('default/transitions.css');
-@import url('default/groups.css');
-
-:where(:root),
-:host,
-.wa-theme-glassy,
-.wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * 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-50);
-  --wa-color-brand-border-quiet: var(--wa-color-teal-90);
-  --wa-color-brand-border-normal: var(--wa-color-teal-80);
-  --wa-color-brand-border-loud: var(--wa-color-teal-60);
-  --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: white;
-
-  /**
-   * Shadows
-   */
-  --wa-shadow-blur-scale: 3;
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  color-scheme: dark;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
-  --wa-color-surface-border: var(--wa-color-gray-20);
-
-  --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-teal-70);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
-
-  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
-
-  --wa-color-focus: var(--wa-color-teal-60);
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-teal-10);
-  --wa-color-brand-fill-normal: var(--wa-color-teal-20);
-  --wa-color-brand-fill-loud: var(--wa-color-teal-50);
-  --wa-color-brand-border-quiet: var(--wa-color-teal-20);
-  --wa-color-brand-border-normal: var(--wa-color-teal-30);
-  --wa-color-brand-border-loud: var(--wa-color-teal-40);
-  --wa-color-brand-on-quiet: var(--wa-color-teal-60);
-  --wa-color-brand-on-normal: var(--wa-color-teal-70);
-  --wa-color-brand-on-loud: white;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-60);
-  --wa-color-success-on-normal: var(--wa-color-green-70);
-  --wa-color-success-on-loud: white;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
-  --wa-color-warning-on-loud: white;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-60);
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
-  --wa-color-danger-on-loud: white;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
-}
-
-/**
- * Component Styles
- */
-:where(:root),
-:host,
-.wa-theme-glassy {
-  wa-button:not([appearance='plain']) {
-    box-shadow:
-      inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-      inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-      inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
-      var(--wa-shadow-s) /* outer shadow */;
-
-    margin-bottom: var(--wa-shadow-offset-y-s);
-    transition: transform var(--wa-transition-fast);
-
-    &:not([disabled]) {
-      &:hover {
-        box-shadow:
-          inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-          inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-          inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-          inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
-          var(--wa-shadow-m) /* outer shadow */;
-      }
-
-      &:active {
-        box-shadow:
-          inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
-          inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
-          inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
-          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-          inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
-          0 0 0 0 transparent /* outer shadow */;
-
-        transform: translateY(var(--wa-shadow-offset-y-s));
-      }
-    }
-  }
-
-  wa-checkbox,
-  wa-input:not(:focus),
-  wa-radio,
-  wa-select {
-    --box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
-      inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
-  }
-
-  wa-checkbox:state(checked),
-  wa-radio:state(checked) {
-    --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-  }
-
-  wa-textarea:not(:focus) {
-    &:not([appearance='filled']):not([disabled]) {
-      --box-shadow: var(--wa-shadow-s);
-    }
-  }
-
-  wa-switch {
-    --box-shadow: inset var(--wa-shadow-s);
-    --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-      inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
-      inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-  }
-
-  wa-progress-bar {
-    box-shadow: inset var(--wa-shadow-s);
-
-    &::part(indicator) {
-      box-shadow:
-        inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-        inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-        inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
-        var(--wa-shadow-s) /* outer shadow */;
-    }
-  }
-}
--- a/src/styles/themes/glossy.css
+++ b/src/styles/themes/glossy.css
@@ -0,0 +1,31 @@
+@import url('glossy/color.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('glossy/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
+@import url('glossy/overrides.css');
+
+:where(:root),
+:host,
+.wa-theme-mellow,
+.wa-dark,
+.wa-light,
+.wa-invert {
+  /**
+   * Spacing
+   */
+  --wa-space-scale: 1.125;
+
+  /**
+   * Rounding
+   */
+  --wa-border-radius-scale: 1.33;
+
+  /**
+   * Shadows
+   */
+  --wa-shadow-blur-scale: 3;
+}
--- a/src/styles/themes/glossy/color.css
+++ b/src/styles/themes/glossy/color.css
@@ -0,0 +1,66 @@
+@import url('../../color/elegant.css');
+@import url('../default/color.css');
+
+:where(:root),
+:host,
+.wa-theme-glossy,
+.wa-light,
+.wa-dark .wa-invert {
+  /**
+   * Foundational Colors
+   */
+  --wa-color-text-link: var(--wa-color-indigo-40);
+
+  --wa-color-focus: var(--wa-color-indigo-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-on-loud: white;
+
+  --wa-color-success-fill-loud: var(--wa-color-green-40);
+
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
+
+  --wa-color-danger-fill-loud: var(--wa-color-red-40);
+
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
+}
+
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  /**
+   * Foundational Colors
+   */
+  --wa-color-text-link: var(--wa-color-indigo-70);
+
+  --wa-color-focus: var(--wa-color-indigo-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-on-loud: white;
+
+  --wa-color-success-fill-loud: var(--wa-color-green-40);
+
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
+
+  --wa-color-danger-fill-loud: var(--wa-color-red-40);
+}
--- a/src/styles/themes/glossy/overrides.css
+++ b/src/styles/themes/glossy/overrides.css
@@ -0,0 +1,116 @@
+:where(:root),
+:host,
+.wa-theme-glossy {
+  --wa-theme-glossy-inner-shine: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.3);
+  --wa-theme-glossy-top-highlight: inset 0 0.25rem 0 0 rgb(255 255 255 / 0.15);
+  --wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
+  --wa-theme-glossy-lower-shade: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.03);
+  --wa-theme-glossy-bottom-shadow: inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.15);
+
+  --wa-theme-glossy-inner-shine-active: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1);
+  --wa-theme-glossy-top-highlight-active: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.04);
+  --wa-theme-glossy-upper-tint-active: inset 0 1.25em 0 0 rgb(0 0 0 / 0.04);
+  --wa-theme-glossy-lower-shade-active: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02);
+  --wa-theme-glossy-bottom-shadow-active: inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    letter-spacing: -0.02em;
+  }
+  :is(
+      button,
+      input:where([type='button'], [type='reset'], [type='submit']),
+      wa-button,
+      wa-radio-button,
+      .wa-button
+    ):not([appearance='plain'], .wa-plain) {
+    box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
+      var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade), var(--wa-theme-glossy-bottom-shadow);
+
+    margin-bottom: var(--wa-shadow-offset-y-s);
+    transition: all var(--wa-transition-fast);
+
+    &:not([disabled]):active {
+      box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
+        var(--wa-theme-glossy-upper-tint-active), var(--wa-theme-glossy-lower-shade-active),
+        var(--wa-theme-glossy-bottom-shadow-active);
+
+      transform: scale(0.98);
+    }
+  }
+
+  input:where(
+      :not(
+        [type='button'],
+        [type='checkbox'],
+        [type='color'],
+        [type='file'],
+        [type='hidden'],
+        [type='image'],
+        [type='radio'],
+        [type='range'],
+        [type='reset'],
+        [type='submit']
+      )
+    ),
+  select,
+  textarea,
+  wa-input,
+  wa-select,
+  wa-textarea,
+  .wa-text-field {
+    --wa-theme-glossy-upper-tint: inset 0 -1.25em 0 0 rgb(255 255 255 / 0.085);
+    --wa-theme-glossy-lower-shade: inset 0 1.125em 0 0 rgb(0 0 0 / 0.02);
+    --box-shadow: var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade);
+    transition: all var(--wa-transition-fast);
+
+    &:focus {
+      --box-shadow: 0 0 transparent, 0 0 transparent;
+    }
+  }
+
+  input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
+  wa-checkbox:is(:state(checked), :state(indeterminate)),
+  wa-tree-item:is(:state(selected), :state(indeterminate))::part(checkbox__control),
+  wa-radio:state(checked) {
+    --box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
+      var(--wa-theme-glossy-bottom-shadow);
+
+    &:active {
+      --box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
+        var(--wa-theme-glossy-bottom-shadow-active);
+    }
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--border-color-checked);
+    --checked-icon-color: var(--wa-color-surface-default);
+    --checked-icon-scale: 0.4;
+  }
+
+  input[type='range'],
+  wa-slider,
+  wa-switch {
+    --thumb-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
+      var(--wa-theme-glossy-bottom-shadow);
+  }
+
+  progress,
+  wa-progress-bar {
+    box-shadow: inset var(--wa-shadow-s);
+
+    &::part(indicator) {
+      box-shadow:
+        var(--wa-theme-glossy-inner-shine),
+        var(--wa-theme-glossy-top-highlight),
+        inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+        inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+        var(--wa-theme-glossy-bottom-shadow);
+    }
+  }
+}
--- a/src/styles/themes/glossy/typography.css
+++ b/src/styles/themes/glossy/typography.css
@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('../default/typography.css');
+
+:where(:root),
+:host,
+.wa-theme-glossy {
+  --wa-font-family-body: 'Figtree', sans-serif;
+  --wa-font-family-heading: var(--wa-font-family-body);
+  --wa-font-family-code: ui-monospace, monospace;
+  --wa-font-family-longform: ui-serif, serif;
+
+  --wa-font-weight-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-semibold: 600;
+  --wa-font-weight-bold: 800;
+
+  --wa-line-height-condensed: 1.35;
+  --wa-line-height-normal: 1.8;
+  --wa-line-height-expanded: 2.25;
+}
--- a/src/styles/themes/matter.css
+++ b/src/styles/themes/matter.css
@@ -0,0 +1,42 @@
+@import url('matter/color.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('matter/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
+@import url('matter/overrides.css');
+
+:where(:root),
+:host,
+.wa-theme-matter,
+.wa-dark,
+.wa-light,
+.wa-invert {
+  /**
+   * Rounding
+   */
+  --wa-border-radius-scale: 1.33;
+
+  /**
+   * Shadows
+   */
+  --wa-shadow-blur-scale: 1.25;
+  --wa-shadow-offset-y-scale: 0.5;
+  --wa-shadow-spread-scale: 0;
+
+  /**
+   * Focus
+   */
+  --wa-focus-ring-width: 0.125rem;
+  --wa-focus-ring-offset: 0rem;
+
+  /**
+   * Component Groups
+   */
+  --wa-form-control-border-radius: var(--wa-border-radius-s);
+  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
+
+  --wa-tooltip-arrow-size: 0rem;
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Lea Verou	3dc526c948	Support inheritance and initial values	2025-01-21 15:26:45 -05:00
Lea Verou	e3560dcf98	Do not reflect default values - Add `default` descriptor - Do not reflect attributes when equal to their default value - Patch getter return value to return default value when empty - Use it in button `appearance`	2025-01-21 15:16:11 -05:00
Cory LaViska	f2bb2c84a0	fix nested tab groups (#576 )	2025-01-21 12:54:38 -05:00
Cory LaViska	13b3342017	fix slot names (#577 )	2025-01-21 12:52:41 -05:00
Cory LaViska	d1c1d689ce	ensure fix works on backers website (#579 )	2025-01-21 12:36:54 -05:00
Cory LaViska	44e5e37a2b	3.0.0-alpha.9	2025-01-17 10:40:54 -05:00
Cory LaViska	566aae927d	fix typo	2025-01-17 10:39:18 -05:00
Lea Verou	7258c001a7	Demo for mixing and matching (#565 )	2025-01-17 10:38:03 -05:00
Lea Verou	7a70940c6a	Update changelog, remove `.wa-callout` from alpha	2025-01-16 18:27:47 -05:00
Lea Verou	45f4edc426	Fix #561	2025-01-16 16:50:28 -05:00
Lea Verou	da32015f27	Basic mixing and matching docs (#560 )	2025-01-16 16:31:24 -05:00
Lea Verou	03d8238edb	Add missing `:state(blank)` docs	2025-01-16 16:17:50 -05:00
Lindsay M	34f8744493	Fix missing mild palette doc and links (#557 )	2025-01-16 16:09:52 -05:00
Lindsay M	fa3fe5f753	Theme files housekeeping, closes #519 (#552 ) * Reorg Glossy theme * Reorg Playful theme * Remove redundant dark mode tokens	2025-01-16 16:09:28 -05:00
Lindsay M	fc6c7de1fd	Fix contrast issues with Bright teal (#556 )	2025-01-16 16:09:03 -05:00
Lea Verou	0037712549	Matter Ripple MVP (#558 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-16 16:05:50 -05:00
Lea Verou	5301945bfa	Filled inputs	2025-01-16 14:48:56 -05:00
Lea Verou	1298651dd8	Floating labels on select	2025-01-16 14:48:56 -05:00
Lea Verou	5f9695fde1	Floating labels on textarea	2025-01-16 14:48:56 -05:00
Lea Verou	2eb2597efe	Floating labels for input	2025-01-16 14:48:56 -05:00
lindsaym-fa	431e82261b	Initial floating label attempt	2025-01-16 14:48:56 -05:00
Lea Verou	df51149d0a	Show contrast ratios in contrast pair tables	2025-01-16 13:18:26 -05:00
Lindsay M	fba0b11343	Add Matter theme (#547 ) * Add Matter theme * Add Matter to alpha build * Add changelog * Fix incorrect palette name * Make loud fills darker in light mode	2025-01-16 12:08:51 -05:00
Lea Verou	3618e93490	Reintroduce `--border-width` and `--border-radius`, fixes #531	2025-01-16 10:36:03 -05:00
Lea Verou	cfa95307d1	Quick proof of concept contrast tests	2025-01-16 10:22:01 -05:00
Lea Verou	15344c2a2a	Appease Turbo for the color scheme picker too, fixes #520	2025-01-16 10:15:52 -05:00
lindsaym-fa	3974aa5130	Decrease line height on swatches	2025-01-16 10:15:16 -05:00
lindsaym-fa	a6702ad6d2	Revise Color tokens doc and link to palettes	2025-01-16 10:15:16 -05:00
lindsaym-fa	ecf21adddc	Fix punctuation	2025-01-16 10:15:16 -05:00
Lea Verou	52c24fc3b7	Add color palette to theme pages	2025-01-16 10:15:16 -05:00
Lea Verou	d464714d7b	Rudimentary palette icons	2025-01-16 10:15:16 -05:00
Lea Verou	7d089bbe2f	Palette Docs	2025-01-16 10:15:16 -05:00
Lea Verou	71914afc91	`defaultPalette` -> `palette`	2025-01-16 10:15:16 -05:00
Lindsay M	9d139e3fa0	Minor style update for checkboxes in `wa-tree-item` (#542 ) * Use theme value line height for tree item checkbox * Apply theme checkbox styles to selected tree items	2025-01-16 09:30:35 -05:00
Lindsay M	db3039e9fe	Fix `green-40` in classic color palette (#548 )	2025-01-16 09:26:06 -05:00
Lindsay M	9494b9bb67	Improve default tooltip styles (#543 ) * Use inverted colors for tooltips * Remove redundant tooltip overrides from themes	2025-01-16 04:35:08 -05:00
Lea Verou	7e1f4f0351	Separate meaningful theme parts out (#526 ) Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-01-15 17:32:36 -05:00
Lindsay M	5ebe4f4d3e	Finalize playful theme, closes #490 (#527 ) * Finalize Playful theme * Add changelog, add to alpha * Add playful theme to alpha build * Touchup and tweaks * Tweak hover mix color in `wa-dark` * Avoid transforming buttons in button groups * Final touchup --------- Co-authored-by: Lea Verou <lea@verou.me>	2025-01-15 17:13:48 -05:00
Lea Verou	dfb9d53a25	Checkbox improvements - Added `part="control", fixes #529 - Removed wrapper div which is no longer needed - Removed `form-control--has-hint` class which is no longer used anywhere	2025-01-15 15:03:58 -05:00
Lindsay M	c2c1a2ff5b	Add missing Glossy and Premium themes to alpha build (#528 )	2025-01-15 10:45:43 -05:00
Lindsay M	ac86c037a1	Finalize Glossy theme, closes #491 (#525 ) * Initial glassy theme progress * Add fallback to slider thumb box shadow * Remove redundant `wa-dark` styles and refactor shadows * Rename to 'Glossy' since it fits the vibe better	2025-01-14 18:44:31 -05:00
				`@@ -0,0 +1 @@`
				`["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]`
				`@@ -0,0 +1 @@`
				`export { default as default } from '../../src/styles/color/palettes.js';`