Attempt to use tintless variables

(definition only for now)

docs/_includes/base.njk

@@ -83,8 +83,6 @@
           </details>
         </nav>
 
-
-
         {% block header %}
           {% include 'breadcrumbs.njk' %}
           <h1 class="title">{{ title }}</h1>

docs/_includes/head.njk

@@ -30,19 +30,15 @@
 
 <script type="module" src="/assets/scripts/theme-picker.js"></script>
 {# Preset Theme #}
-<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
-{% if not forceTheme %}
+{% if forceTheme %}
+<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
+{% else %}
+<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
 <script>
-if (localStorage.presetTheme) {
-	let preset = localStorage.presetTheme;
+{
+	let preset = localStorage.presetTheme ?? 'default';
 	let script = document.currentScript;
-	let link = script.previousElementSibling;
-	let newLink = link.cloneNode();
-	newLink.href = link.href.replace("/default.css", `/${preset}.css`);
-	newLink.addEventListener('load', () => {
-		link.remove();
-	});
-	link.after(newLink);
+	script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
 }
 </script>
 <script type="module" src="/assets/scripts/preset-theme-picker.js"></script>

docs/_includes/sidebar-group.njk

@@ -1,8 +1,8 @@
 {# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
 {% if collections[tag] -%}
-  <wa-details {{ (tag in (tags or [])) | attr('open') }}>
+  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
     <h2 slot="summary">
-      {% set groupUrl %}/docs/{{ tag }}/{% endset %}
       {% if groupUrl | getCollectionItemFromUrl %}
         <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
           <wa-icon name="grid-2"></wa-icon>

docs/_includes/sidebar.njk

@@ -25,7 +25,7 @@
   'utilities': 'Style Utilities',
   'layout': 'Layout',
   'patterns': 'Patterns',
-  'theming': 'Theming'
+  'tokens': 'Design Tokens'
 } %}
   {% include 'sidebar-group.njk' %}
 {% endfor %}

docs/assets/scripts/preset-theme-picker.js

@@ -5,7 +5,7 @@ const presetTheme = new ThemeAspect({
   key: 'presetTheme',
   picker: 'wa-select.preset-theme-selector',
 
-  applyChange() {
+  applyChange(options = {}) {
     const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
     const oldStylesheet = oldStylesheets.pop();
 
@@ -38,7 +38,7 @@ const presetTheme = new ThemeAspect({
 
               oldStylesheet.remove();
             },
-            { behavior: 'smooth' },
+            { behavior: 'smooth', ...options },
           );
         },
         { once: true },
@@ -61,4 +61,8 @@ function updateSelectionBeforeTurboLoad(e) {
   document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
 });
 
+window.addEventListener('turbo:render', e => {
+  presetTheme.applyChange({ behavior: 'instant' });
+});
+
 window.presetTheme = presetTheme;

docs/assets/scripts/search.js

@@ -9,6 +9,7 @@ const icons = {
   component: 'puzzle-piece',
   document: 'file',
   home: 'house',
+  native: 'code',
   theme: 'palette',
 };
 let searchTimeout;
@@ -166,6 +167,7 @@ async function updateResults(query = '') {
       li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
 
       if (page.url === '/') icon = icons.home;
+      if (page.url.startsWith('/docs/native')) icon = icons.native;
       if (page.url.startsWith('/docs/components')) icon = icons.component;
       if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme;
 

docs/assets/scripts/theme-picker.js

@@ -91,11 +91,6 @@ const colorScheme = new ThemeAspect({
     domChange(() => {
       let dark = this.computedValue === 'dark';
       document.documentElement.classList.toggle(`wa-dark`, dark);
-
-      for (let el of document.querySelectorAll('.wa-invert')) {
-        el.classList.toggle('wa-dark', !dark);
-        el.classList.toggle('wa-light', dark);
-      }
     });
   },
 });

docs/assets/styles/code-highlighter.css

@@ -1,6 +1,12 @@
 pre {
   background-color: var(--wa-color-gray-20);
   color: white;
+
+  /* Ensures a discernible background color in dark mode
+   * Useful for themes that use gray-20 as --wa-color-surface-default  */
+  .wa-dark & {
+    background-color: var(--wa-color-surface-lowered);
+  }
 }
 .code-comment,
 .code-prolog,

docs/assets/styles/docs.css

@@ -382,6 +382,7 @@ wa-page > main:has(> .index-grid) {
 
 /* Swatches */
 .swatch {
+  position: relative;
   background-color: transparent;
   border-color: var(--wa-color-neutral-border-normal);
   border-style: var(--wa-border-style);
@@ -391,6 +392,33 @@ wa-page > main:has(> .index-grid) {
   line-height: 2.5;
   height: 2.5em;
   padding-inline: var(--wa-space-xs);
+
+  wa-copy-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    --background-color-hover: transparent;
+    font-family: var(--wa-font-family-code);
+
+    &::part(button) {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    &::part(button):hover {
+      cursor: copy;
+    }
+
+    &::part(copy-icon),
+    &::part(success-icon),
+    &::part(error-icon) {
+      opacity: 0 !important;
+    }
+  }
 }
 
 /* Layout Examples */

docs/docs/components/callout.md

@@ -3,6 +3,7 @@ title: Callout
 description: Callouts are used to display important messages inline.
 tags: [feedback, content]
 icon: callout
+native: callout
 ---
 
 ```html {.example}

docs/docs/customizing.md

@@ -12,7 +12,7 @@ Web Awesome uses numerous CSS custom properties that make up a high-level themin
 
 Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.
 
-To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/theming/color/#literal-colors).
+To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/tokens/color/#literal-colors).
 
 ```css
 :where(:root),

docs/docs/native/button.md

@@ -20,7 +20,7 @@ snippets:
 
 ### Variants
 
-Use the variant utility classes to set the button's semantic variant.
+Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.
 
 ```html {.example}
 <button class="wa-neutral">Neutral</button>
@@ -32,7 +32,7 @@ Use the variant utility classes to set the button's semantic variant.
 
 ### Appearance
 
-Use the appearance utility classes to change the button's visual appearance:
+Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
@@ -69,7 +69,7 @@ Use the appearance utility classes to change the button's visual appearance:
 
 ### Sizes
 
-Use `wa-size-*` classes to change a button's size.
+Use the [size utility classes](../utilities/size.md) to change a button's size.
 
 ```html {.example}
 <button class="wa-size-s">Small</button>

docs/docs/native/callout.md

@@ -0,0 +1,116 @@
+---
+title: Callout
+description: Callouts are used to display important messages inline.
+component: callout
+icon: callout
+snippets: '.wa-callout'
+---
+
+```html {.example}
+<article class="wa-callout">
+  This is a callout style, applied to a standard article element.
+</article>
+```
+
+## Examples
+
+### Variants
+
+Use the [variant utility classes](../utilities/color.md) to set the callout's color variant.
+
+```html {.example}
+<article class="wa-callout wa-brand">
+  <strong>This is super informative</strong><br />
+  You can tell by how pretty the callout is.
+</article>
+
+<br />
+
+<article class="wa-callout wa-success">
+  <strong>Your changes have been saved</strong><br />
+  You can safely exit the app now.
+</article>
+
+<br />
+
+<article class="wa-callout wa-neutral">
+  <strong>Your settings have been updated</strong><br />
+  Settings will take effect on next login.
+</article>
+
+<br />
+
+<article class="wa-callout wa-warning">
+  <strong>Your session has ended</strong><br />
+  Please login again to continue.
+</article>
+
+<br />
+
+<article class="wa-callout wa-danger">
+  <strong>Your account has been deleted</strong><br />
+  We're very sorry to see you go!
+</article>
+```
+
+### Appearance
+
+Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
+
+```html {.example}
+<article class="wa-callout wa-brand wa-outlined wa-accent">
+  This <strong>accent</strong> callout is also <strong>outlined</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-accent">
+  This <strong>accent</strong> callout draws attention without an outline
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-outlined wa-filled">
+  This callout is both <strong>filled</strong> and <strong>outlined</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-filled">
+  This callout is only <strong>filled</strong>
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-outlined">
+  Here's an <strong>outlined</strong> callout
+</article>
+
+<br />
+
+<article class="wa-callout wa-brand wa-plain">
+  No bells and whistles on this <strong>plain</strong> callout
+</article>
+```
+
+### Sizes
+
+Use the [size utility classes](../utilities/size.md) to change a callout's size.
+
+```html {.example}
+<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
+  This is meant to be very emphasized.
+</article>
+
+<br />
+
+<article class="wa-callout">
+  Normal-sized callout.
+</article>
+
+<br />
+
+<article class="wa-callout wa-plain wa-plain wa-size-s">
+  Just a small tip!
+</article>
+```

docs/docs/resources/changelog.md

@@ -12,6 +12,13 @@ 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!
 :::
 
+
+## 3.0.0-alpha.9
+
+- Added `.wa-callout` utility class
+- Added new themes:
+  - Premium
+
 ## 3.0.0-alpha.8
 
 - Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
@@ -30,7 +37,6 @@ During the alpha period, things might break! We take breaking changes very serio
   - Brutalist
   - Mellow
   - Tailspin
-  - Playful
 - Renamed `--wa-form-control-resting-color` to `--wa-form-control-border-color` for familiarity and accuracy
 - Removed size-based `--wa-form-control-height-*` tokens in favor of `--wa-form-control-height` (see [size utilities](/docs/utilities/size/))
 - Updated the `--wa-border-width-*` and `--wa-border-radius-*` scale for better DX

docs/docs/themes/active.md

@@ -3,4 +3,5 @@ title: Active
 description: Energetic and tactile, always in motion.
 isPro: true
 tags: pro
+defaultPalette: rudimentary
 ---

docs/docs/themes/awesome.md

@@ -2,4 +2,5 @@
 title: Awesome
 description: Punchy and vibrant, the rockstar of themes.
 order: 0.2
+defaultPalette: bright
 ---

docs/docs/themes/brutalist.md

@@ -3,4 +3,5 @@ title: Brutalist
 description: Sharp, square, and unapologetically bold.
 isPro: true
 tags: pro
+defaultPalette: default
 ---

docs/docs/themes/classic.md

@@ -2,4 +2,5 @@
 title: Classic
 description: Timeless elegance that never goes out of style.
 order: 0.1
+defaultPalette: classic
 ---

docs/docs/themes/creating.md

@@ -21,7 +21,8 @@ If you're customizing the default light styles, scope your styles to the followi
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   /* your custom styles here */
 }
 ```
@@ -30,6 +31,7 @@ If you're customizing the default dark styles, scope your styles to the followin
 
 ```css
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   /* your custom styles here */
 }

docs/docs/themes/default.md

@@ -2,4 +2,5 @@
 title: Default
 description: Your trusty companion, like a perfectly broken-in pair of jeans.
 order: 0
+defaultPalette: default
 ---

docs/docs/themes/glassy.md

@@ -4,4 +4,5 @@ description: Smooth, sleek, and reflective.
 isPro: true
 tags: pro
 noAlpha: true
+defaultPalette: elegant
 ---

docs/docs/themes/index.njk

@@ -1,6 +1,6 @@
 ---
 title: Themes
-description: Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
+description: Themes are collections of predefined CSS custom properties that thread through every Web Awesome component and pattern.
 layout: overview
 override:tags: []
 forTag: theme
@@ -14,7 +14,7 @@ categories:
 
 ## What's a Theme?
 
-Themes are a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover a range of styles from colors to transitions. We use these custom properties throughout Web Awesome components for a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
+A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
 
 Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
 Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
@@ -22,6 +22,7 @@ Please note that if you import multiple themes, the last one will be the default
 
 Each theme may also include both light and dark color schemes with the classes `wa-light` and `wa-dark`.
 You can use these classes to apply a specific color scheme to an entire page or just a section.
+You can also use `wa-invert` which behaves like `wa-dark` in light mode, and like `wa-light` in dark mode.
 In pre-made themes, we use a light color scheme by default.
 
 
@@ -36,11 +37,13 @@ For example, the default theme is set up like this:
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   /* all CSS custom properties for color, typography, space, etc. */
 }
 
 .wa-dark,
+.wa-invert,
 :host-context(.wa-dark) {
   /* subset of CSS custom properties for a dark color scheme */
 }

docs/docs/themes/mellow.md

@@ -3,4 +3,5 @@ title: Mellow
 description: Soft and soothing, like a lazy Sunday morning.
 isPro: true
 tags: pro
+defaultPalette: natural
 ---

docs/docs/themes/playful.md

@@ -4,4 +4,5 @@ description: Fun, colorful, and full of personality.
 isPro: true
 tags: pro
 noAlpha: true
+defaultPalette: rudimentary
 ---

docs/docs/themes/premium.md

@@ -3,5 +3,5 @@ title: Premium
 description: The ultimate in sophistication and style.
 isPro: true
 tags: pro
-noAlpha: true
+defaultPalette: anodized
 ---

docs/docs/themes/tailspin.md

@@ -3,4 +3,5 @@ title: Tailspin
 description: Like a bird in flight, guiding you from there to here.
 isPro: true
 tags: pro
+defaultPalette: vogue
 ---

docs/docs/theming/color.md

@@ -1,599 +0,0 @@
----
-title: Color
-description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
----
-
-<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,
-      color-mix(in oklab, transparent, var(--mix-color)) 25%,
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
-      var(--wa-color-brand-fill-loud) 75%,
-      var(--wa-color-brand-fill-loud))
-    ;
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    text-align: center;
-  }
-</style>
-
-Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
-
-Color is organized by three main categories:
-
-- [Literal colors](/#literal-colors) that give familiar names to your starting color palette
-- [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.
-
-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:
-
-- 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}`.
-
-<div class="color-name">Red</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Yellow</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Green</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Teal</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-teal-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Blue</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Indigo</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Violet</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Gray</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-## Foundational Colors
-
-Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
-
-### Surfaces
-
-Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
-
-| Custom Property               | Preview                                                                                                                         |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-surface-raised`   | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div>              |
-| `--wa-color-surface-default`  | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div>                                            |
-| `--wa-color-surface-lowered`  | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div>      |
-| `--wa-color-surface-border`   | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div>                                                 |
-
-### Text
-
-Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
-
-| Custom Property          | Preview                                                    |
-| ------------------------ | ---------------------------------------------------------- |
-| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
-| `--wa-color-text-quiet`  | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div>  |
-| `--wa-color-text-link`   | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div>   |
-
-### Overlays
-
-Overlays provide a backdrop to isolate content, often allowing background context to show through.
-
-| Custom Property             | Preview                                                                             |
-| --------------------------- | ----------------------------------------------------------------------------------- |
-| `--wa-color-overlay-modal`  | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div>  |
-| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
-
-### Shadow
-
-Web Awesome uses a single color for all shadows. This is used alongside other [shadow properties](/docs/theming/shadows) to construct your theme's shadows.
-
-| Custom Property     | Preview                                                                     |
-| ------------------- | --------------------------------------------------------------------------- |
-| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
-
-### Interactions
-
-#### Focus
-
-Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus properties](/docs/theming/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
-
-| Custom Property    | Preview                                                                                                                 |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
-
-#### Hover and Active
-
-Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
-
-| Custom Property         | Preview                                                                                                          |
-| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-mix-hover`  | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div>  |
-| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
-
-
-## Semantic Colors
-
-Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
-- **Brand** to emphasize your brand color
-- **Success** for validity or confirmation
-- **Neutral** for ordinary or inactive content
-- **Warning** for caution or uncertainty
-- **Danger** for errors or risk
-
-Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
-- **Fill** for background colors or areas larger than a few pixels
-- **Border** for borders, dividers, and other stroke-width elements
-- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
-
-Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
-- **Quiet** draws the least attention
-- **Normal** draws some attention
-- **Loud** draws the most attention
-
-| Custom Property              |  <code>brand</code> |  <code>success</code> |  <code>neutral</code> |  <code>warning</code> | <code>danger</code> |
-| ---------------------------- | ------------------- | --------------------- | --------------------- | --------------------- | ------------------- |
-| `--wa-color-*-fill-quiet`    | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> |  <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
-| `--wa-color-*-fill-normal`   | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
-| `--wa-color-*-fill-loud`     | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> |  <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> |  <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
-| `--wa-color-*-border-quiet`  | <div class="swatch" value="--wa-color-brand-border-quiet" style="border-color: var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-success-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" value="--wa-color-warning-border-quiet" style="border-color: var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" value="--wa-color-danger-border-quiet" style="border-color: var(--wa-color-danger-border-quiet)"></div> |
-| `--wa-color-*-border-normal`  | <div class="swatch" value="--wa-color-brand-border-normal" style="border-color: var(--wa-color-brand-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-success-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" value="--wa-color-warning-border-normal" style="border-color: var(--wa-color-warning-border-normal)"></div> | <div class="swatch" value="--wa-color-danger-border-normal" style="border-color: var(--wa-color-danger-border-normal)"></div> |
-| `--wa-color-*-border-loud`  | <div class="swatch" value="--wa-color-brand-border-loud" style="border-color: var(--wa-color-brand-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-success-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" value="--wa-color-warning-border-loud" style="border-color: var(--wa-color-warning-border-loud)"></div> | <div class="swatch" value="--wa-color-danger-border-loud" style="border-color: var(--wa-color-danger-border-loud)"></div> |
-| `--wa-color-*-on-quiet`      | <div class="swatch" value="--wa-color-brand-on-quiet" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-quiet" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-quiet" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-quiet" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-quiet" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
-| `--wa-color-*-on-normal`     | <div class="swatch" value="--wa-color-brand-on-normal" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-normal" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-normal" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
-| `--wa-color-*-on-loud`       | <div class="swatch" value="--wa-color-brand-on-loud" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-loud" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-loud" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-loud" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-loud" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
-
-<style>
-.swatch {
-  position: relative;
-}
-.swatch wa-copy-button {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.swatch wa-copy-button::part(button) {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-.swatch wa-copy-button {
-  --background-color-hover: transparent;
-  font-family: var(--wa-font-family-code);
-}
-
-.swatch wa-copy-button::part(button):hover {
-  cursor: copy;
-}
-
-.swatch wa-copy-button::part(copy-icon),
-.swatch wa-copy-button::part(success-icon),
-.swatch wa-copy-button::part(error-icon) {
-  opacity: 0 !important;
-}
-</style>
-
-<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>

docs/docs/theming/index.njk

@@ -1,6 +0,0 @@
----
-title: Theming
-description: A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
-layout: overview
-override:tags: []
----

docs/docs/theming/theming.json

@@ -1,7 +0,0 @@
-{
-  "layout": "page-outline.njk",
-  "tags": ["theming"],
-  "eleventyComputed": {
-    "icon": "theming/{{ page.fileSlug }}"
-  }
-}

docs/docs/tokens/borders.md

@@ -21,7 +21,7 @@ Border widths use `rem` units in order to scale proportionately with the root fo
 | `--wa-border-width-m` | `0.125rem` <small>(2px)</small>  | <div class="swatch" style="border-width: var(--wa-border-width-m)"></div> |
 | `--wa-border-width-l` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-l)"></div> |
 
-To scale all borders at once, you can use the  `--wa-border-width-scale` property which specifies a multiplier on `border-width`. 
+To scale all borders at once, you can use the  `--wa-border-width-scale` property which specifies a multiplier on `border-width`.
 Values < 1 make all borders uniformly thinner, while values > 1 make them thicker.
 
 ## Radius
@@ -44,5 +44,5 @@ Size-based border radius properties allow you to customize the overall roundness
 | `--wa-border-radius-m`  | `0.375rem` <small>(6px)</small>  | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
 | `--wa-border-radius-l`  | `0.75rem` <small>(12px)</small>  | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div> |
 
-To scale all border radii at once, you can use the  `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`. 
-Values < 1 make corners sharper, while values > 1 make them rounder.
+To scale all border radii at once, you can use the  `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`.
+Values < 1 make corners sharper, while values > 1 make them rounder.

docs/docs/tokens/color.md

@@ -0,0 +1,223 @@
+---
+title: Color
+description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
+---
+
+<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,
+      color-mix(in oklab, transparent, var(--mix-color)) 25%,
+      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
+      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
+      var(--wa-color-brand-fill-loud) 75%,
+      var(--wa-color-brand-fill-loud))
+    ;
+    border: none;
+    color: var(--wa-color-brand-on-loud);
+    text-align: center;
+  }
+</style>
+
+Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
+
+Color is organized by three main categories:
+
+- [Literal colors](/#literal-colors) that give familiar names to your starting color palette
+- [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.
+
+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:
+
+- 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}`.
+
+{% set hues = ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] %}
+{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
+{% for hue in hues -%}
+<div class="color-name">{{ hue | capitalize }}</div>
+<ul class="color-group">
+  {% for tint in tints -%}
+    <li class="color-preview">
+      <div class="swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})"></div>
+      <small>{{ tint }}</small>
+    </li>
+  {%- endfor %}
+</ul>
+{%- endfor %}
+
+You can also omit the lightness value to get the brightest, most intense color for each hue:
+
+<div class="color-name">Accent colors</div>
+<ul class="color-group">
+  {% for hue in hues -%}
+    <li class="color-preview">
+      <div class="swatch" style="background-color: var(--wa-color-{{ hue }})"></div>
+      <small>{{ hue }}</small>
+    </li>
+  {%- endfor %}
+</ul>
+
+## Foundational Colors
+
+Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
+
+### Surfaces
+
+Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
+
+| Custom Property               | Preview                                                                                                                         |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `--wa-color-surface-raised`   | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div>              |
+| `--wa-color-surface-default`  | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div>                                            |
+| `--wa-color-surface-lowered`  | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div>      |
+| `--wa-color-surface-border`   | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div>                                                 |
+
+### Text
+
+Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
+
+| Custom Property          | Preview                                                    |
+| ------------------------ | ---------------------------------------------------------- |
+| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
+| `--wa-color-text-quiet`  | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div>  |
+| `--wa-color-text-link`   | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div>   |
+
+### Overlays
+
+Overlays provide a backdrop to isolate content, often allowing background context to show through.
+
+| Custom Property             | Preview                                                                             |
+| --------------------------- | ----------------------------------------------------------------------------------- |
+| `--wa-color-overlay-modal`  | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div>  |
+| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
+
+### Shadow
+
+Web Awesome uses a single color for all shadows.
+This is used alongside other [shadow tokens](/docs/tokens/shadows) to construct your theme's shadows.
+
+| Custom Property     | Preview                                                                     |
+| ------------------- | --------------------------------------------------------------------------- |
+| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
+
+### Interactions
+
+#### Focus
+
+Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus tokens](/docs/tokens/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
+
+| Custom Property    | Preview                                                                                                                 |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
+
+#### Hover and Active
+
+Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
+
+| Custom Property         | Preview                                                                                                          |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `--wa-color-mix-hover`  | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div>  |
+| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
+
+
+## Semantic Colors
+
+Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
+- **Brand** to emphasize your brand color
+- **Success** for validity or confirmation
+- **Neutral** for ordinary or inactive content
+- **Warning** for caution or uncertainty
+- **Danger** for errors or risk
+
+Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
+- **Fill** for background colors or areas larger than a few pixels
+- **Border** for borders, dividers, and other stroke-width elements
+- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
+
+Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
+- **Quiet** draws the least attention
+- **Normal** draws some attention
+- **Loud** draws the most attention
+
+{% set variants = ['brand', 'success', 'neutral', 'warning', 'danger'] %}
+<table>
+  <thead>
+    <tr>
+      <th>Custom Property</th>
+      {% for variant in variants -%}
+        <th><code>{{ variant }}</code></th>
+      {%- endfor %}
+    </tr>
+  </thead>
+  {% for type in ['fill', 'border', 'on'] -%}
+    {% for attention in ['quiet', 'normal', 'loud'] -%}
+      <tr>
+        <td><code>--wa-color-*-{{ type }}-{{ attention }}</code></td>
+        {% for variant in variants -%}
+          <td>
+            {%- if type == 'border' -%}
+            <div class="swatch" style="border-color: var(--wa-color-{{ variant }}-{{ type }}-{{ attention }})"></div>
+            {%- else -%}
+            <div class="swatch" style="background-color: var(--wa-color-{{ variant }}-fill-{{ attention }}); color: var(--wa-color-{{ variant }}-on-{{ attention }})">{{ 'AaBb' if type == 'on' }}</div>
+            {%- endif %}
+          </td>
+        {%- endfor %}
+      </tr>
+    {%- 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>

docs/docs/tokens/focus.md

@@ -3,7 +3,7 @@ title: Focus
 description: Configure recognizable focus states with Web Awesome's focus properties.
 ---
 
-A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/theming/color/#interactions), these custom properties create a uniform focus state for Web Awesome components.
+A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/tokens/color/#interactions), these tokens create a uniform focus state for Web Awesome components.
 
 
 | Custom Property          |  Default Value                                                                |

docs/docs/tokens/index.njk

@@ -0,0 +1,6 @@
+---
+title: Design Tokens
+description: A theme is a collection of predefined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
+layout: overview
+override:tags: []
+---

docs/docs/tokens/shadows.md

@@ -3,7 +3,7 @@ title: Shadows
 description: Elevate your components with Web Awesome's shadow properties.
 ---
 
-Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
+Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/tokens/color/#shadow), these tokens create realistic shadows for Web Awesome components.
 
 Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
 

docs/docs/tokens/tokens.json

@@ -0,0 +1,7 @@
+{
+  "layout": "page-outline.njk",
+  "tags": ["tokens"],
+  "eleventyComputed": {
+    "icon": "tokens/{{ page.fileSlug }}"
+  }
+}

docs/docs/tokens/typography.md

@@ -69,7 +69,7 @@ Line heights control the distance between lines of text and are unitless to scal
 
 ## Links
 
-Together with [`--wa-color-link`](/docs/theming/color/#text), these custom properties add text decoration to `<a>` elements to signal their role as hyperlinks.
+Together with [`--wa-color-link`](/docs/tokens/color/#text), these tokens add text decoration to `<a>` elements to signal their role as hyperlinks.
 
 | Custom Property                | Default Value                                                                      |
 | ------------------------------ | ---------------------------------------------------------------------------------- |

docs/docs/utilities/color.md

@@ -1,7 +1,7 @@
 ---
 title: Color Variants
 description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
-icon: theming/color
+icon: tokens/color
 snippets:
   - .wa-brand
   - .wa-neutral
@@ -27,7 +27,7 @@ You can create the same effect on any element by using the color variant utility
 - `.wa-danger`
 
 Using these classes is a two-way handshake:
-they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/theming/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
+they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/tokens/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
 This means that styles can be written to respond to variants by using e.g. `--wa-color-fill-loud` instead of e.g. `--wa-color-brand-fill-loud`,
 and all of our [native styles](/docs/native/) do so (where it made sense).
 

docs/docs/utilities/gap.md

@@ -16,7 +16,7 @@ tags: ["utilities", "layout"]
 Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
 Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden.
 
-Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/theming/space) properties in your theme.
+Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) tokens in your theme.
 
 | Class Name   | `gap` Value      | Preview                                                                                                     |
 | ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |

docs/docs/utilities/rounding.md

@@ -14,7 +14,7 @@ status: wip
 
 Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.
 
-Each class corresponds to one of the [`--wa-border-radius-*`](/docs/theming/borders/#radius) properties in your theme.
+Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) tokens in your theme.
 
 | Class Name                | `border-radius` Value       | Preview                                                                                 |
 | ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |

docs/docs/utilities/size.md

@@ -1,7 +1,7 @@
 ---
 title: Size
 description: Size utilities give elements one of three preset sizes (small, medium, or large).
-icon: theming/space
+icon: tokens/space
 status: experimental
 snippets:
   - .wa-size-s
@@ -22,7 +22,7 @@ You can create the same effect on any element by using the size utility classes:
 - `.wa-size-l`
 
 Using these classes does two things:
-- It sets `font-size` to one of the [size tokens](/docs/theming/typography/#font-size).
+- It sets `font-size` to one of the [size tokens](/docs/tokens/typography/#font-size).
 You can use CSS `em` units to reference that size in other properties.
 - It calculates `--wa-form-control-height` based on the applied size, supporting consistent heights for elements like inputs and buttons.
 - It aliases a bunch of other properties that CSS can use:

docs/docs/utilities/text.md

@@ -13,7 +13,7 @@ Use body classes to style the main content of your pages. Each `wa-body-*` class
 - `font-weight: var(--wa-font-weight-body);`
 - `line-height: var(--wa-line-height-normal);`
 
-Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme.
+Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme.
 
 | Class Name         | `font-size` Value    |  Preview                                                                  |
 | ------------------ | -------------------- | ------------------------------------------------------------------------- |
@@ -31,7 +31,7 @@ Use heading classes to style section titles and headings in your content. Each `
 - `line-height: var(--wa-line-height-condensed);`
 - `text-wrap: balance;`
 
-Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
 
 | Class Name       | `font-size` Value    | Preview                                               |
 | ---------------- | -------------------- | ----------------------------------------------------- |
@@ -51,7 +51,7 @@ Use caption classes to style descriptions or auxiliary text in your content. Eac
 - `font-weight: var(--wa-font-weight-body);`
 - `line-height: var(--wa-line-height-condensed);`
 
-Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
 
 | Class Name       | `font-size` Value    | Preview                                                                        |
 | ---------------- | -------------------- | ------------------------------------------------------------------------------ |

src/components/callout/callout.css

@@ -1,22 +1,8 @@
 :host {
   --icon-color: currentColor;
   --icon-size: var(--wa-font-size-l);
-  --spacing: var(--wa-space-m);
 
-  position: relative;
   display: flex;
-  align-items: stretch;
-  border-radius: var(--wa-panel-border-radius);
-  background-color: var(--background-color, var(--wa-color-fill-quiet));
-  border-color: var(--border-color, transparent);
-  border-style: var(--wa-panel-border-style);
-  border-width: var(--wa-panel-border-width);
-  color: var(--text-color, var(--wa-color-on-normal));
-  padding: var(--spacing);
-}
-
-:host([appearance~='accent']) {
-  font-weight: var(--wa-font-weight-semibold);
 }
 
 [part~='icon'] {

src/components/callout/callout.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import nativeStyles from '../../styles/native/callout.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
@@ -24,7 +25,7 @@ import styles from './callout.css';
  */
 @customElement('wa-callout')
 export default class WaCallout extends WebAwesomeElement {
-  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
 
   /** The callout's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';

src/components/icon/library.system.ts

@@ -4,6 +4,36 @@ function dataUri(svg: string) {
   return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 }
 
+export const iconsByVariant: { [key: string]: { [key: string]: string } } = {
+  solid: {
+    check: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
+    'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
+    'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
+    'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
+    circle: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
+    'eye-dropper': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
+    'grip-vertical': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
+    indeterminate: `<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>`,
+    minus: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
+    pause: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
+    play: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
+    star: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
+    user: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
+    xmark: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`,
+  },
+  regular: {
+    'circle-xmark': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
+    copy: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
+    eye: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
+    'eye-slash': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
+  },
+};
+
+/**
+ * Union of all icons, across variants
+ */
+export const icons: { [key: string]: string } = Object.assign({}, ...Object.values(iconsByVariant));
+
 //
 // System icons are a separate library to ensure they're always available, regardless of how the default icon library is
 // configured or if its icons resolve properly. All Web Awesome components must use the system library instead of the
@@ -12,107 +42,12 @@ function dataUri(svg: string) {
 const systemLibrary: IconLibrary = {
   name: 'system',
   resolver: (name: string, family = 'classic', variant = 'solid') => {
-    //
-    // Classic + Solid
-    //
-    if (family === 'classic' && variant === 'solid') {
-      switch (name) {
-        case 'check':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
-          );
+    if (family === 'classic') {
+      // Try given variant first, fall back to any variant
+      let svg = iconsByVariant[variant]?.[name];
 
-        case 'chevron-down':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
-          );
-
-        case 'chevron-left':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
-          );
-
-        case 'chevron-right':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
-          );
-
-        case 'circle':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
-          );
-
-        case 'eye-dropper':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
-          );
-
-        case 'grip-vertical':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
-          );
-
-        case 'indeterminate':
-          return dataUri(`
-            <svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>
-          `);
-
-        case 'minus':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
-          );
-
-        case 'pause':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
-          );
-
-        case 'play':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
-          );
-
-        case 'star':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
-          );
-
-        case 'user':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
-          );
-
-        case 'xmark':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg`,
-          );
-      }
-    }
-
-    //
-    // Classic + Regular
-    //
-    if (family === 'classic' && variant === 'regular') {
-      switch (name) {
-        case 'circle-xmark':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
-          );
-
-        case 'copy':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
-          );
-
-        case 'eye':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
-          );
-
-        case 'eye-slash':
-          return dataUri(
-            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
-          );
+      if (svg) {
+        return dataUri(svg);
       }
     }
 

src/styles/color/anodized.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #562317;
   --wa-color-red-10: #36130a;
   --wa-color-red-05: #240a05;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fff2b8;
   --wa-color-yellow-90: #ffe578;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #482b21;
   --wa-color-yellow-10: #2c1912;
   --wa-color-yellow-05: #1d0e0a;
+  --wa-color-yellow: var(--wa-color-yellow-90);
 
   --wa-color-green-95: #dcf8ea;
   --wa-color-green-90: #bcf1d8;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #003a2d;
   --wa-color-green-10: #00231b;
   --wa-color-green-05: #001610;
+  --wa-color-green: var(--wa-color-green-60);
 
   --wa-color-teal-95: #cbfaf9;
   --wa-color-teal-90: #9ff4f3;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #083936;
   --wa-color-teal-10: #04221f;
   --wa-color-teal-05: #021513;
+  --wa-color-teal: var(--wa-color-teal-80);
 
   --wa-color-blue-95: #ecf3ff;
   --wa-color-blue-90: #d9e7ff;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #1b325b;
   --wa-color-blue-10: #101d35;
   --wa-color-blue-05: #0a1222;
+  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #f5efff;
   --wa-color-indigo-90: #ede0ff;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #381d7f;
   --wa-color-indigo-10: #210e53;
   --wa-color-indigo-05: #150739;
+  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #fbedfd;
   --wa-color-violet-90: #f7defa;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #561658;
   --wa-color-violet-10: #340d36;
   --wa-color-violet-05: #210822;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e2e5e8;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #18354a;
   --wa-color-gray-10: #012034;
   --wa-color-gray-05: #001421;
+  --wa-color-gray: var(--wa-color-gray-10);
 }

src/styles/color/bright.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #6d0000;
   --wa-color-red-10: #450000;
   --wa-color-red-05: #300000;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef3c1;
   --wa-color-yellow-90: #fee682;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #532600;
   --wa-color-yellow-10: #341500;
   --wa-color-yellow-05: #220c00;
+  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #e0fae4;
   --wa-color-green-90: #baf4c2;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #123a1a;
   --wa-color-green-10: #0b2210;
   --wa-color-green-05: #07150a;
+  --wa-color-green: var(--wa-color-green-70);
 
   --wa-color-teal-95: #cafae6;
   --wa-color-teal-90: #aaf3d7;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #00483d;
   --wa-color-teal-10: #00312b;
   --wa-color-teal-05: #001613;
+  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e7f5ff;
   --wa-color-blue-90: #ceeaff;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #0d3459;
   --wa-color-blue-10: #071f35;
   --wa-color-blue-05: #051321;
+  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #edf2ff;
   --wa-color-indigo-90: #dce5ff;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #1e2c70;
   --wa-color-indigo-10: #121a43;
   --wa-color-indigo-05: #0b102a;
+  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #f3f0ff;
   --wa-color-violet-90: #eae2ff;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #372372;
   --wa-color-violet-10: #211544;
   --wa-color-violet-05: #150d2a;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e3e5ea;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #1a3356;
   --wa-color-gray-10: #0e1e35;
   --wa-color-gray-05: #081220;
+  --wa-color-gray: var(--wa-color-gray-20);
 }

src/styles/color/classic.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #631111;
   --wa-color-red-10: #3b0d0d;
   --wa-color-red-05: #260606;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef2c4;
   --wa-color-yellow-90: #fde494;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #532408;
   --wa-color-yellow-10: #321606;
   --wa-color-yellow-05: #1f0c01;
+  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #e9f5ed;
   --wa-color-green-90: #cfedd9;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #0c391d;
   --wa-color-green-10: #082213;
   --wa-color-green-05: #02140a;
+  --wa-color-green: var(--wa-color-green-60);
 
   --wa-color-teal-95: #d0fbf3;
   --wa-color-teal-90: #a9f4e8;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #0a3835;
   --wa-color-teal-10: #082120;
   --wa-color-teal-05: #021413;
+  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e5f4fe;
   --wa-color-blue-90: #c8ebfd;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #04354f;
   --wa-color-blue-10: #05202f;
   --wa-color-blue-05: #04121b;
+  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #eef2ff;
   --wa-color-indigo-90: #dee5fd;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #29247a;
   --wa-color-indigo-10: #191843;
   --wa-color-indigo-05: #0f0e26;
+  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f7efff;
   --wa-color-violet-90: #efe0ff;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #48176e;
   --wa-color-violet-10: #2e054e;
   --wa-color-violet-05: #1d0331;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f2f2f3;
   --wa-color-gray-90: #e5e5e8;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #313134;
   --wa-color-gray-10: #1d1d20;
   --wa-color-gray-05: #101113;
+  --wa-color-gray: var(--wa-color-gray-40);
 }

src/styles/color/default.css

@@ -0,0 +1,114 @@
+/**
+ * Literal Colors
+ * Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
+ * Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
+ * A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
+ * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
+ * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
+ */
+:where(:root),
+:host {
+  --wa-color-red-95: #ffefef;
+  --wa-color-red-90: #ffdddc;
+  --wa-color-red-80: #ffb7b6;
+  --wa-color-red-70: #fc9090;
+  --wa-color-red-60: #f2676c;
+  --wa-color-red-50: #de2d44;
+  --wa-color-red-40: #b11036;
+  --wa-color-red-30: #861a2f;
+  --wa-color-red-20: #641122;
+  --wa-color-red-10: #400712;
+  --wa-color-red-05: #2a030a;
+  --wa-color-red: var(--wa-color-red-50);
+
+  --wa-color-yellow-95: #fdf3ba;
+  --wa-color-yellow-90: #fee590;
+  --wa-color-yellow-80: #fcc041;
+  --wa-color-yellow-70: #f39b00;
+  --wa-color-yellow-60: #e07b00;
+  --wa-color-yellow-50: #bb5a00;
+  --wa-color-yellow-40: #924200;
+  --wa-color-yellow-30: #743200;
+  --wa-color-yellow-20: #572300;
+  --wa-color-yellow-10: #361300;
+  --wa-color-yellow-05: #240b00;
+  --wa-color-yellow: var(--wa-color-yellow-70);
+
+  --wa-color-green-95: #e2f9e2;
+  --wa-color-green-90: #c2f2c1;
+  --wa-color-green-80: #92da97;
+  --wa-color-green-70: #5dc36f;
+  --wa-color-green-60: #00ac49;
+  --wa-color-green-50: #008825;
+  --wa-color-green-40: #006800;
+  --wa-color-green-30: #005300;
+  --wa-color-green-20: #003c00;
+  --wa-color-green-10: #002400;
+  --wa-color-green-05: #001700;
+  --wa-color-green: var(--wa-color-green-60);
+
+  --wa-color-teal-95: #e3f7f5;
+  --wa-color-teal-90: #c6eeeb;
+  --wa-color-teal-80: #81d9d3;
+  --wa-color-teal-70: #34c2b9;
+  --wa-color-teal-60: #10a69d;
+  --wa-color-teal-50: #00837c;
+  --wa-color-teal-40: #00645e;
+  --wa-color-teal-30: #004e49;
+  --wa-color-teal-20: #003935;
+  --wa-color-teal-10: #002220;
+  --wa-color-teal-05: #001513;
+  --wa-color-teal: var(--wa-color-teal-70);
+
+  --wa-color-blue-95: #ebf4ff;
+  --wa-color-blue-90: #d4e7ff;
+  --wa-color-blue-80: #a6ccff;
+  --wa-color-blue-70: #77b1ff;
+  --wa-color-blue-60: #4895fd;
+  --wa-color-blue-50: #0070ef;
+  --wa-color-blue-40: #0055b8;
+  --wa-color-blue-30: #004390;
+  --wa-color-blue-20: #00306c;
+  --wa-color-blue-10: #001c45;
+  --wa-color-blue-05: #00112f;
+  --wa-color-blue: var(--wa-color-blue-50);
+
+  --wa-color-indigo-95: #f0f2fe;
+  --wa-color-indigo-90: #e2e4fc;
+  --wa-color-indigo-80: #c2c6f8;
+  --wa-color-indigo-70: #a5a9f2;
+  --wa-color-indigo-60: #8a8beb;
+  --wa-color-indigo-50: #6b65e2;
+  --wa-color-indigo-40: #5246c1;
+  --wa-color-indigo-30: #412eaa;
+  --wa-color-indigo-20: #321393;
+  --wa-color-indigo-10: #1c006a;
+  --wa-color-indigo-05: #130049;
+  --wa-color-indigo: var(--wa-color-indigo-30);
+
+  --wa-color-violet-95: #f9effd;
+  --wa-color-violet-90: #f4defb;
+  --wa-color-violet-80: #e7baf7;
+  --wa-color-violet-70: #d996ef;
+  --wa-color-violet-60: #c674e1;
+  --wa-color-violet-50: #a94dc6;
+  --wa-color-violet-40: #8732a1;
+  --wa-color-violet-30: #6d2283;
+  --wa-color-violet-20: #521564;
+  --wa-color-violet-10: #330940;
+  --wa-color-violet-05: #22042b;
+  --wa-color-violet: var(--wa-color-violet-50);
+
+  --wa-color-gray-95: #f1f2f3;
+  --wa-color-gray-90: #e4e5e9;
+  --wa-color-gray-80: #c7c9d0;
+  --wa-color-gray-70: #abaeb9;
+  --wa-color-gray-60: #9194a2;
+  --wa-color-gray-50: #717584;
+  --wa-color-gray-40: #545868;
+  --wa-color-gray-30: #424554;
+  --wa-color-gray-20: #2f323f;
+  --wa-color-gray-10: #1b1d26;
+  --wa-color-gray-05: #101219;
+  --wa-color-gray: var(--wa-color-gray-40);
+}

src/styles/color/elegant.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #6b001c;
   --wa-color-red-10: #44000d;
   --wa-color-red-05: #2e0006;
+  --wa-color-red: var(--wa-color-red-40);
 
   --wa-color-yellow-95: #f5f2e5;
   --wa-color-yellow-90: #ece6cc;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #492c05;
   --wa-color-yellow-10: #2b1a02;
   --wa-color-yellow-05: #191008;
+  --wa-color-yellow: var(--wa-color-yellow-60);
 
   --wa-color-green-95: #ecf4f1;
   --wa-color-green-90: #dae9e3;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #003b24;
   --wa-color-green-10: #002316;
   --wa-color-green-05: #00160d;
+  --wa-color-green: var(--wa-color-green-40);
 
   --wa-color-teal-95: #ebf4f4;
   --wa-color-teal-90: #d9e9e9;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #00393b;
   --wa-color-teal-10: #002223;
   --wa-color-teal-05: #001415;
+  --wa-color-teal: var(--wa-color-teal-50);
 
   --wa-color-blue-95: #ebf3fa;
   --wa-color-blue-90: #d8e8f5;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #00345d;
   --wa-color-blue-10: #001f37;
   --wa-color-blue-05: #001221;
+  --wa-color-blue: var(--wa-color-blue-50);
 
   --wa-color-indigo-95: #f1f1fa;
   --wa-color-indigo-90: #e4e4f6;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #272972;
   --wa-color-indigo-10: #171844;
   --wa-color-indigo-05: #0d0e27;
+  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f6f0f9;
   --wa-color-violet-90: #eee2f2;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #501862;
   --wa-color-violet-10: #300e3b;
   --wa-color-violet-05: #1c0823;
+  --wa-color-violet: var(--wa-color-violet-40);
 
   --wa-color-gray-95: #f2f2f3;
   --wa-color-gray-90: #e6e5e8;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #35313c;
   --wa-color-gray-10: #1f1c23;
   --wa-color-gray-05: #131115;
+  --wa-color-gray: var(--wa-color-gray-40);
 }

src/styles/color/natural.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #562318;
   --wa-color-red-10: #36130b;
   --wa-color-red-05: #240a05;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #f5f0e8;
   --wa-color-yellow-90: #ede4d5;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #442f00;
   --wa-color-yellow-10: #2a1b00;
   --wa-color-yellow-05: #1b1000;
+  --wa-color-yellow: var(--wa-color-yellow-50);
 
   --wa-color-green-95: #edf2ee;
   --wa-color-green-90: #dde8df;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #193922;
   --wa-color-green-10: #0c2212;
   --wa-color-green-05: #051509;
+  --wa-color-green: var(--wa-color-green-50);
 
   --wa-color-teal-95: #eff3f4;
   --wa-color-teal-90: #dee7e9;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #0a383e;
   --wa-color-teal-10: #022125;
   --wa-color-teal-05: #011518;
+  --wa-color-teal: var(--wa-color-teal-40);
 
   --wa-color-blue-95: #eef1f5;
   --wa-color-blue-90: #e1e6ef;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #203351;
   --wa-color-blue-10: #101e34;
   --wa-color-blue-05: #081223;
+  --wa-color-blue: var(--wa-color-blue-40);
 
   --wa-color-indigo-95: #f2f2f7;
   --wa-color-indigo-90: #e6e5f1;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #332e50;
   --wa-color-indigo-10: #1e1a32;
   --wa-color-indigo-05: #121021;
+  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #f4f1f6;
   --wa-color-violet-90: #eae4ef;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #3e2b4b;
   --wa-color-violet-10: #26182f;
   --wa-color-violet-05: #180e1f;
+  --wa-color-violet: var(--wa-color-violet-40);
 
   --wa-color-gray-95: #f1f1f0;
   --wa-color-gray-90: #e7e6e4;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #35322d;
   --wa-color-gray-10: #1f1d1a;
   --wa-color-gray-05: #131210;
+  --wa-color-gray: var(--wa-color-gray-50);
 }

src/styles/color/rudimentary.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #601a00;
   --wa-color-red-10: #3d0d00;
   --wa-color-red-05: #290600;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fff497;
   --wa-color-yellow-90: #ffe571;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #53251c;
   --wa-color-yellow-10: #311613;
   --wa-color-yellow-05: #1f0d0b;
+  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #dafadc;
   --wa-color-green-90: #b9f4bc;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #003b1c;
   --wa-color-green-10: #00230e;
   --wa-color-green-05: #001607;
+  --wa-color-green: var(--wa-color-green-80);
 
   --wa-color-teal-95: #d1f9f1;
   --wa-color-teal-90: #a9f4e6;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #003843;
   --wa-color-teal-10: #002129;
   --wa-color-teal-05: #00151b;
+  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e1f4ff;
   --wa-color-blue-90: #caebff;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #002e76;
   --wa-color-blue-10: #001a4e;
   --wa-color-blue-05: #000f36;
+  --wa-color-blue: var(--wa-color-blue-50);
 
   --wa-color-indigo-95: #f1efff;
   --wa-color-indigo-90: #e7e3ff;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #3a009b;
   --wa-color-indigo-10: #220064;
   --wa-color-indigo-05: #160046;
+  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f8edfd;
   --wa-color-violet-90: #f2e0fc;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #4f1568;
   --wa-color-violet-10: #310a42;
   --wa-color-violet-05: #20052d;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f2f2f2;
   --wa-color-gray-90: #e6e6e6;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #313131;
   --wa-color-gray-10: #1d1d1d;
   --wa-color-gray-05: #131313;
+  --wa-color-gray: var(--wa-color-gray-95);
 }

src/styles/color/vogue.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #641414;
   --wa-color-red-10: #400809;
   --wa-color-red-05: #2b0404;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef6ab;
   --wa-color-yellow-90: #ffe759;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #502809;
   --wa-color-yellow-10: #311704;
   --wa-color-yellow-05: #1f0e02;
+  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #d6fbe3;
   --wa-color-green-90: #acf5c6;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #093a1d;
   --wa-color-green-10: #032311;
   --wa-color-green-05: #02160a;
+  --wa-color-green: var(--wa-color-green-70);
 
   --wa-color-teal-95: #d1fbf2;
   --wa-color-teal-90: #9bf6e4;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #073938;
   --wa-color-teal-10: #022222;
   --wa-color-teal-05: #011515;
+  --wa-color-teal: var(--wa-color-teal-80);
 
   --wa-color-blue-95: #ebf3ff;
   --wa-color-blue-90: #d6e7fe;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #1c2e69;
   --wa-color-blue-10: #101b41;
   --wa-color-blue-05: #09102c;
+  --wa-color-blue: var(--wa-color-blue-40);
 
   --wa-color-indigo-95: #eef2ff;
   --wa-color-indigo-90: #dde5ff;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #2b2871;
   --wa-color-indigo-10: #1b1842;
   --wa-color-indigo-05: #100f29;
+  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f7efff;
   --wa-color-violet-90: #efe0ff;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #4b1079;
   --wa-color-violet-10: #2f0451;
   --wa-color-violet-05: #1e0238;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e3e5e9;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #293342;
   --wa-color-gray-10: #161e2d;
   --wa-color-gray-05: #0c1220;
+  --wa-color-gray: var(--wa-color-gray-10);
 }

src/styles/native.css

@@ -4,6 +4,7 @@
 @import url('native/code.css');
 @import url('native/forms.css');
 @import url('native/button.css');
+@import url('native/callout.css');
 @import url('native/checkbox.css');
 @import url('native/color-picker.css');
 @import url('native/input.css');

src/styles/native/callout.css

@@ -0,0 +1,20 @@
+:host,
+.wa-callout {
+  --spacing: var(--wa-space-m);
+
+  position: relative;
+  align-items: stretch;
+  border-radius: var(--wa-panel-border-radius);
+  background-color: var(--background-color, var(--wa-color-fill-quiet));
+  border-color: var(--border-color, transparent);
+  border-style: var(--wa-panel-border-style);
+  border-width: var(--wa-panel-border-width);
+  color: var(--text-color, var(--wa-color-on-normal));
+  padding: var(--spacing);
+}
+
+:host([appearance~='accent']),
+:host(.wa-accent),
+.wa-callout.wa-accent {
+  font-weight: var(--wa-font-weight-semibold);
+}

src/styles/themes/active.css

@@ -1,5 +1,5 @@
 @import url('../color/rudimentary.css');
-@import url('default/color-semantic.css');
+@import url('default/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-active,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -32,7 +33,7 @@
    */
   --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-fill-loud: var(--wa-color-green);
   --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);
@@ -42,7 +43,7 @@
 
   --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-fill-loud: var(--wa-color-green);
   --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);
@@ -52,7 +53,7 @@
 
   --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-fill-loud: var(--wa-color-yellow);
   --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);
@@ -100,6 +101,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/awesome.css

@@ -1,5 +1,5 @@
 @import url('../color/bright.css');
-@import url('default/color-semantic.css');
+@import url('default/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-awesome,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -46,7 +47,7 @@
 
   --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-fill-loud: var(--wa-color-yellow);
   --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);
@@ -143,6 +144,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
@@ -287,7 +289,8 @@
     }
   }
 
-  wa-callout {
+  wa-callout,
+  .wa-callout {
     &:is([appearance~='outlined'], .wa-outlined) {
       border-color: var(--wa-color-border-normal);
     }

src/styles/themes/brutalist.css

@@ -1,5 +1,5 @@
+@import url('../color/default.css');
 @import url('default/color.css');
-@import url('default/color-semantic.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-brutalist,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -124,6 +125,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
@@ -235,7 +237,8 @@
     }
   }
 
-  wa-callout {
+  wa-callout,
+  .wa-callout {
     --spacing: var(--wa-space-s) var(--wa-space-m);
 
     &::part(icon) {

src/styles/themes/classic.css

@@ -1,5 +1,5 @@
 @import url('../color/classic.css');
-@import url('default/color-semantic.css');
+@import url('default/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -11,7 +11,8 @@
 :where(:root),
 :host,
 .wa-theme-classic,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
 
   /**
@@ -118,6 +119,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
@@ -242,7 +244,8 @@
     font-size: var(--wa-font-size-s);
   }
 
-  wa-callout {
+  wa-callout,
+  .wa-callout {
     --spacing: var(--wa-space-l);
     font-size: var(--wa-size-smaller);
 

src/styles/themes/default.css

@@ -1,5 +1,5 @@
+@import url('../color/default.css');
 @import url('default/color.css');
-@import url('default/color-semantic.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -11,12 +11,14 @@
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.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);

src/styles/themes/default/color-semantic.css

@@ -1,183 +0,0 @@
-/**
- * Foundational Colors and Semantic Colors
- */
-:where(:root),
-:host,
-.wa-theme-default,
-.wa-light {
-  /**
-   * Foundational Colors
-   */
-
-  /* Surfaces are background layers that other content rests on.
-   * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
-  --wa-color-surface-raised: white;
-  --wa-color-surface-default: white;
-  --wa-color-surface-lowered: var(--wa-color-gray-95);
-  --wa-color-surface-border: var(--wa-color-gray-90);
-
-  /* Text colors are used for standard text elements.
-   * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
-  --wa-color-text-normal: var(--wa-color-gray-10);
-  --wa-color-text-quiet: var(--wa-color-gray-40);
-  --wa-color-text-link: var(--wa-color-blue-40);
-
-  /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
-
-  /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
-   * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
-   * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
-    transparent
-  );
-
-  /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
-   * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
-  --wa-color-mix-hover: black 10%;
-  --wa-color-mix-active: black 20%;
-
-  /**
-   * Semantic Colors
-   * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
-   * Within these groups, each color specifies a role -
-   *  *  Fill for background colors or areas larger than a few pixels
-   *  *  Border for borders, dividers, and other stroke-like elements
-   *  *  On for content displayed on a fill with the corresponding attention
-   * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
-  --wa-color-brand-border-normal: var(--wa-color-blue-80);
-  --wa-color-brand-border-loud: var(--wa-color-blue-60);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-30);
-  --wa-color-brand-on-loud: white;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: white;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: white;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: white;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: white;
-}
-
-/** need to wrap :host-context() in an :is() selector for unsupported browsers */
-.wa-dark,
-:is(:host-context(.wa-dark)) {
-  /**
-   * 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-20);
-  --wa-color-brand-border-normal: var(--wa-color-blue-30);
-  --wa-color-brand-border-loud: var(--wa-color-blue-40);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-60);
-  --wa-color-brand-on-normal: var(--wa-color-blue-70);
-  --wa-color-brand-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);
-}

src/styles/themes/default/color.css

@@ -1,106 +1,190 @@
 /**
- * Literal Colors
- * Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
- * Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
- * A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
- * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
- * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
+ * Foundational Colors and Semantic Colors
  */
 :where(:root),
-:host {
-  --wa-color-red-95: #ffefef;
-  --wa-color-red-90: #ffdddc;
-  --wa-color-red-80: #ffb7b6;
-  --wa-color-red-70: #fc9090;
-  --wa-color-red-60: #f2676c;
-  --wa-color-red-50: #de2d44;
-  --wa-color-red-40: #b11036;
-  --wa-color-red-30: #861a2f;
-  --wa-color-red-20: #641122;
-  --wa-color-red-10: #400712;
-  --wa-color-red-05: #2a030a;
+:host,
+.wa-theme-default,
+.wa-light,
+.wa-dark .wa-invert {
+  /**
+   * Foundational Colors
+   */
 
-  --wa-color-yellow-95: #fdf3ba;
-  --wa-color-yellow-90: #fee590;
-  --wa-color-yellow-80: #fcc041;
-  --wa-color-yellow-70: #f39b00;
-  --wa-color-yellow-60: #e07b00;
-  --wa-color-yellow-50: #bb5a00;
-  --wa-color-yellow-40: #924200;
-  --wa-color-yellow-30: #743200;
-  --wa-color-yellow-20: #572300;
-  --wa-color-yellow-10: #361300;
-  --wa-color-yellow-05: #240b00;
+  /* Surfaces are background layers that other content rests on.
+   * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
+  --wa-color-surface-raised: white;
+  --wa-color-surface-default: white;
+  --wa-color-surface-lowered: var(--wa-color-gray-95);
+  --wa-color-surface-border: var(--wa-color-gray-90);
 
-  --wa-color-green-95: #e2f9e2;
-  --wa-color-green-90: #c2f2c1;
-  --wa-color-green-80: #92da97;
-  --wa-color-green-70: #5dc36f;
-  --wa-color-green-60: #00ac49;
-  --wa-color-green-50: #008825;
-  --wa-color-green-40: #006800;
-  --wa-color-green-30: #005300;
-  --wa-color-green-20: #003c00;
-  --wa-color-green-10: #002400;
-  --wa-color-green-05: #001700;
+  /* Text colors are used for standard text elements.
+   * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
+  --wa-color-text-normal: var(--wa-color-gray-10);
+  --wa-color-text-quiet: var(--wa-color-gray-40);
+  --wa-color-text-link: var(--wa-color-blue-40);
 
-  --wa-color-teal-95: #e3f7f5;
-  --wa-color-teal-90: #c6eeeb;
-  --wa-color-teal-80: #81d9d3;
-  --wa-color-teal-70: #34c2b9;
-  --wa-color-teal-60: #10a69d;
-  --wa-color-teal-50: #00837c;
-  --wa-color-teal-40: #00645e;
-  --wa-color-teal-30: #004e49;
-  --wa-color-teal-20: #003935;
-  --wa-color-teal-10: #002220;
-  --wa-color-teal-05: #001513;
+  /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
+  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
 
-  --wa-color-blue-95: #ebf4ff;
-  --wa-color-blue-90: #d4e7ff;
-  --wa-color-blue-80: #a6ccff;
-  --wa-color-blue-70: #77b1ff;
-  --wa-color-blue-60: #4895fd;
-  --wa-color-blue-50: #0070ef;
-  --wa-color-blue-40: #0055b8;
-  --wa-color-blue-30: #004390;
-  --wa-color-blue-20: #00306c;
-  --wa-color-blue-10: #001c45;
-  --wa-color-blue-05: #00112f;
+  /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
+   * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
+   * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
+  --wa-color-shadow: color-mix(
+    in oklab,
+    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
+    transparent
+  );
 
-  --wa-color-indigo-95: #f0f2fe;
-  --wa-color-indigo-90: #e2e4fc;
-  --wa-color-indigo-80: #c2c6f8;
-  --wa-color-indigo-70: #a5a9f2;
-  --wa-color-indigo-60: #8a8beb;
-  --wa-color-indigo-50: #6b65e2;
-  --wa-color-indigo-40: #5246c1;
-  --wa-color-indigo-30: #412eaa;
-  --wa-color-indigo-20: #321393;
-  --wa-color-indigo-10: #1c006a;
-  --wa-color-indigo-05: #130049;
+  /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
+   * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
+  --wa-color-focus: var(--wa-color-blue-60);
 
-  --wa-color-violet-95: #f9effd;
-  --wa-color-violet-90: #f4defb;
-  --wa-color-violet-80: #e7baf7;
-  --wa-color-violet-70: #d996ef;
-  --wa-color-violet-60: #c674e1;
-  --wa-color-violet-50: #a94dc6;
-  --wa-color-violet-40: #8732a1;
-  --wa-color-violet-30: #6d2283;
-  --wa-color-violet-20: #521564;
-  --wa-color-violet-10: #330940;
-  --wa-color-violet-05: #22042b;
+  /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
+  --wa-color-mix-hover: black 10%;
+  --wa-color-mix-active: black 20%;
 
-  --wa-color-gray-95: #f1f2f3;
-  --wa-color-gray-90: #e4e5e9;
-  --wa-color-gray-80: #c7c9d0;
-  --wa-color-gray-70: #abaeb9;
-  --wa-color-gray-60: #9194a2;
-  --wa-color-gray-50: #717584;
-  --wa-color-gray-40: #545868;
-  --wa-color-gray-30: #424554;
-  --wa-color-gray-20: #2f323f;
-  --wa-color-gray-10: #1b1d26;
-  --wa-color-gray-05: #101219;
+  /**
+   * Semantic Colors
+   * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
+   * Within these groups, each color specifies a role -
+   *  *  Fill for background colors or areas larger than a few pixels
+   *  *  Border for borders, dividers, and other stroke-like elements
+   *  *  On for content displayed on a fill with the corresponding attention
+   * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
+  --wa-color-brand-border-normal: var(--wa-color-blue-80);
+  --wa-color-brand-border-loud: var(--wa-color-blue-60);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-30);
+  --wa-color-brand-on-loud: white;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-border-loud: var(--wa-color-green-60);
+  --wa-color-success-on-quiet: var(--wa-color-green-40);
+  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: white;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: white;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-loud: var(--wa-color-red-60);
+  --wa-color-danger-on-quiet: var(--wa-color-red-40);
+  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: white;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-on-loud: white;
+}
+
+/** need to wrap :host-context() in an :is() selector for unsupported browsers */
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  /**
+   * 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);
+
+  /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
+  --wa-color-shadow: color-mix(
+    in oklab,
+    var(--wa-color-surface-lowered) 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-20);
+  --wa-color-brand-border-normal: var(--wa-color-blue-30);
+  --wa-color-brand-border-loud: var(--wa-color-blue-40);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-60);
+  --wa-color-brand-on-normal: var(--wa-color-blue-70);
+  --wa-color-brand-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);
 }

src/styles/themes/default/groups.css

@@ -4,7 +4,8 @@
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   /* Form controls */
   --wa-form-control-background-color: var(--wa-color-surface-default);
 
@@ -48,6 +49,7 @@
 
 /** 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);

src/styles/themes/glassy.css

@@ -1,5 +1,5 @@
 @import url('../color/elegant.css');
-@import url('default/color-semantic.css');
+@import url('default/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -11,7 +11,8 @@
 :where(:root),
 :host,
 .wa-theme-glassy,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -35,6 +36,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/mellow.css

@@ -1,5 +1,5 @@
 @import url('../color/natural.css');
-@import url('default/color-semantic.css');
+@import url('default/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-mellow,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -121,6 +122,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
@@ -214,7 +216,8 @@
     letter-spacing: calc(1em * -0.02);
   }
 
-  wa-callout {
+  wa-callout,
+  .wa-callout {
     border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
       calc(var(--wa-panel-border-width) * 4);
   }

src/styles/themes/playful.css

@@ -1,4 +1,5 @@
-@import url('default/color-semantic.css');
+@import url('../color/rudimentary.css');
+@import url('default/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -11,97 +12,11 @@
 :where(:root),
 :host,
 .wa-theme-playful,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
-  /**
-   * Literal Colors
-   */
-  --wa-color-red-95: #ffeeee;
-  --wa-color-red-90: #ffdddd;
-  --wa-color-red-80: #ffb6b8;
-  --wa-color-red-70: #fb9191;
-  --wa-color-red-60: #f16b5e;
-  --wa-color-red-50: #da3c06;
-  --wa-color-red-40: #a62c00;
-  --wa-color-red-30: #812500;
-  --wa-color-red-20: #601a00;
-  --wa-color-red-10: #3d0d00;
-  --wa-color-red-05: #290600;
-
-  --wa-color-yellow-95: #fff497;
-  --wa-color-yellow-90: #ffe571;
-  --wa-color-yellow-80: #ffbd31;
-  --wa-color-yellow-70: #f09d27;
-  --wa-color-yellow-60: #d67f31;
-  --wa-color-yellow-50: #b1612d;
-  --wa-color-yellow-40: #8b4527;
-  --wa-color-yellow-30: #703422;
-  --wa-color-yellow-20: #53251c;
-  --wa-color-yellow-10: #311613;
-  --wa-color-yellow-05: #1f0d0b;
-
-  --wa-color-green-95: #dafadc;
-  --wa-color-green-90: #b9f4bc;
-  --wa-color-green-80: #64e177;
-  --wa-color-green-70: #2ec859;
-  --wa-color-green-60: #00ac4a;
-  --wa-color-green-50: #008840;
-  --wa-color-green-40: #006734;
-  --wa-color-green-30: #005128;
-  --wa-color-green-20: #003b1c;
-  --wa-color-green-10: #00230e;
-  --wa-color-green-05: #001607;
-
-  --wa-color-blue-95: #e1f4ff;
-  --wa-color-blue-90: #caebff;
-  --wa-color-blue-80: #87d1ff;
-  --wa-color-blue-70: #4cb8ff;
-  --wa-color-blue-60: #0099ff;
-  --wa-color-blue-50: #0072ed;
-  --wa-color-blue-40: #0053be;
-  --wa-color-blue-30: #00409b;
-  --wa-color-blue-20: #002e76;
-  --wa-color-blue-10: #001a4e;
-  --wa-color-blue-05: #000f36;
-
-  --wa-color-indigo-95: #f1efff;
-  --wa-color-indigo-90: #e7e3ff;
-  --wa-color-indigo-80: #cbc1ff;
-  --wa-color-indigo-70: #b3a3ff;
-  --wa-color-indigo-60: #9b81ff;
-  --wa-color-indigo-50: #7f56f9;
-  --wa-color-indigo-40: #6427e7;
-  --wa-color-indigo-30: #5102ca;
-  --wa-color-indigo-20: #3a009b;
-  --wa-color-indigo-10: #220064;
-  --wa-color-indigo-05: #160046;
-
-  --wa-color-violet-95: #f8edfd;
-  --wa-color-violet-90: #f2e0fc;
-  --wa-color-violet-80: #e3baf6;
-  --wa-color-violet-70: #d498f1;
-  --wa-color-violet-60: #c76ff2;
-  --wa-color-violet-50: #ac44dc;
-  --wa-color-violet-40: #862dad;
-  --wa-color-violet-30: #6b218a;
-  --wa-color-violet-20: #4f1568;
-  --wa-color-violet-10: #310a42;
-  --wa-color-violet-05: #20052d;
-
-  --wa-color-gray-95: #f2f2f2;
-  --wa-color-gray-90: #e6e6e6;
-  --wa-color-gray-80: #c9c9c9;
-  --wa-color-gray-70: #afafaf;
-  --wa-color-gray-60: #959595;
-  --wa-color-gray-50: #747474;
-  --wa-color-gray-40: #585858;
-  --wa-color-gray-30: #454545;
-  --wa-color-gray-20: #313131;
-  --wa-color-gray-10: #1d1d1d;
-  --wa-color-gray-05: #131313;
-
   /**
    * Foundational Colors
    */
@@ -205,6 +120,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/premium.css

@@ -1,5 +1,5 @@
 @import url('../color/anodized.css');
-@import url('default/color-semantic.css');
+@import url('default/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -7,13 +7,13 @@
 @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+Mono&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
 
 :where(:root),
 :host,
 .wa-theme-premium,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -22,52 +22,59 @@
    */
   --wa-color-surface-border: var(--wa-color-gray-80);
 
+  --wa-color-text-link: var(--wa-color-teal-40);
+
+  --wa-color-focus: var(--wa-color-teal-60);
+
+  --wa-color-mix-hover: white 10%;
+  --wa-color-mix-active: var(--wa-color-surface-default) 5%;
+
   /**
    * Semantic Colors
    */
-  --wa-color-brand-fill-quiet: var(--wa-color-teal-90);
-  --wa-color-brand-fill-normal: var(--wa-color-teal-80);
-  --wa-color-brand-fill-loud: var(--wa-color-teal-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-teal-95);
+  --wa-color-brand-fill-normal: var(--wa-color-teal-90);
+  --wa-color-brand-fill-loud: var(--wa-color-teal-80);
   --wa-color-brand-border-quiet: var(--wa-color-teal-80);
   --wa-color-brand-border-normal: var(--wa-color-teal-70);
   --wa-color-brand-border-loud: var(--wa-color-teal-50);
   --wa-color-brand-on-quiet: var(--wa-color-teal-40);
   --wa-color-brand-on-normal: var(--wa-color-teal-30);
-  --wa-color-brand-on-loud: var(--wa-color-teal-95);
+  --wa-color-brand-on-loud: var(--wa-color-teal-20);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-90);
-  --wa-color-success-fill-normal: var(--wa-color-green-80);
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
+  --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-80);
   --wa-color-success-border-normal: var(--wa-color-green-70);
   --wa-color-success-border-loud: var(--wa-color-green-50);
   --wa-color-success-on-quiet: var(--wa-color-green-40);
   --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: var(--wa-color-green-95);
+  --wa-color-success-on-loud: var(--wa-color-green-20);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
+  --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-80);
   --wa-color-warning-border-normal: var(--wa-color-yellow-70);
   --wa-color-warning-border-loud: var(--wa-color-yellow-50);
   --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
   --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-95);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-20);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-90);
-  --wa-color-danger-fill-normal: var(--wa-color-red-80);
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
+  --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-80);
   --wa-color-danger-border-normal: var(--wa-color-red-70);
   --wa-color-danger-border-loud: var(--wa-color-red-50);
   --wa-color-danger-on-quiet: var(--wa-color-red-40);
   --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: var(--wa-color-red-95);
+  --wa-color-danger-on-loud: var(--wa-color-red-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
+  --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-30);
   --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
   --wa-color-neutral-border-normal: var(--wa-color-gray-70);
   --wa-color-neutral-border-loud: var(--wa-color-gray-50);
@@ -79,14 +86,18 @@
    * Typography
    */
   --wa-font-family-heading: 'Playfair Display', serif;
-  --wa-font-family-body: 'Inter', sans-serif;
-  --wa-font-family-code: 'IBM Plex Mono', 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
-    monospace;
-  --wa-font-family-longform: 'Lora', serif;
+  --wa-font-family-body: 'DM Sans', sans-serif;
+  --wa-font-family-longform: 'Playfair', serif;
 
   --wa-font-weight-heading: var(--wa-font-weight-semibold);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-normal);
+  --wa-font-weight-action: var(--wa-font-weight-semibold);
+
+  --wa-line-height-condensed: 1.1;
+  --wa-line-height-normal: 1.5;
+  --wa-line-height-expanded: 2;
+
+  --wa-link-decoration-default: underline color-mix(in oklab, currentColor 40%, transparent);
 
   /**
    * Borders
@@ -96,16 +107,20 @@
   /**
     * Rounding
     */
-  --wa-border-radius-scale: 1.33;
+  --wa-border-radius-scale: 0.5;
 
   /**
    * Component Groups
    */
+  --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
+
   --wa-form-control-background-color: transparent;
-  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
+
+  --wa-form-control-value-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);
@@ -120,30 +135,25 @@
 
   --wa-color-text-normal: var(--wa-color-gray-95);
   --wa-color-text-quiet: var(--wa-color-gray-80);
-  --wa-color-text-link: var(--wa-color-blue-80);
+  --wa-color-text-link: var(--wa-color-teal-80);
 
-  --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-focus: var(--wa-color-teal-60);
 
-  --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%;
+  --wa-color-mix-hover: white 20%;
+  --wa-color-mix-active: var(--wa-color-surface-default) 10%;
 
   /**
     * Semantic Colors
     */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-30);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-40);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-80);
-  --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-70);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-70);
-  --wa-color-brand-on-normal: var(--wa-color-blue-90);
-  --wa-color-brand-on-loud: var(--wa-color-blue-20);
+  --wa-color-brand-fill-quiet: var(--wa-color-teal-30);
+  --wa-color-brand-fill-normal: var(--wa-color-teal-40);
+  --wa-color-brand-fill-loud: var(--wa-color-teal-80);
+  --wa-color-brand-border-quiet: var(--wa-color-teal-30);
+  --wa-color-brand-border-normal: var(--wa-color-teal-40);
+  --wa-color-brand-border-loud: var(--wa-color-teal-70);
+  --wa-color-brand-on-quiet: var(--wa-color-teal-70);
+  --wa-color-brand-on-normal: var(--wa-color-teal-90);
+  --wa-color-brand-on-loud: var(--wa-color-teal-20);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-30);
   --wa-color-success-fill-normal: var(--wa-color-green-40);
@@ -167,113 +177,70 @@
 
   --wa-color-danger-fill-quiet: var(--wa-color-red-30);
   --wa-color-danger-fill-normal: var(--wa-color-red-40);
-  --wa-color-danger-fill-loud: var(--wa-color-red-80);
+  --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-70);
   --wa-color-danger-on-quiet: var(--wa-color-red-70);
   --wa-color-danger-on-normal: var(--wa-color-red-90);
-  --wa-color-danger-on-loud: var(--wa-color-red-20);
+  --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-40);
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-40);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
   --wa-color-neutral-border-quiet: var(--wa-color-gray-30);
   --wa-color-neutral-border-normal: var(--wa-color-gray-40);
   --wa-color-neutral-border-loud: var(--wa-color-gray-70);
   --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
   --wa-color-neutral-on-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-95);
+  --wa-color-neutral-on-loud: var(--wa-color-gray-20);
+
+  /**
+   * Component Groups
+   */
+  --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
 }
 
 /**
  * Component Styles
  */
+:where(:root),
+:host,
 .wa-theme-premium {
   wa-rating {
-    --symbol-size: var(--wa-font-size-l);
     --symbol-color-active: var(--wa-color-text-quiet);
   }
 
-  wa-switch {
-    --background: transparent;
-    --border-color: var(--wa-color-neutral-border-normal);
-    --thumb-color: var(--border-color);
-    --thumb-color-checked: var(--wa-color-brand-fill-quiet);
-    --thumb-size: 1em;
-    --height: 1.5em;
-    --width: calc(var(--thumb-size) * 2.5);
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  wa-button,
+  .wa-button {
+    font-size: var(--wa-size-smaller);
+    text-transform: uppercase;
   }
 
-  wa-button {
-    --box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
-      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
+  wa-callout {
+    font-size: var(--wa-size-smaller);
   }
 
-  wa-button[appearance='outlined'] {
-    --box-shadow: none;
-  }
-
-  wa-card {
-    border-radius: var(--wa-border-radius-l);
-  }
-
-  wa-alert {
-    font-size: var(--wa-font-size-s);
-    --border-color: var(--background);
-  }
-
-  wa-carousel {
-    --pagination-color-active: var(--wa-color-brand-fill-loud);
-    --pagination-color: var(--wa-color-neutral-fill-normal);
+  input[type='checkbox'],
+  wa-checkbox {
+    --checked-icon-color: var(--wa-color-surface-default);
   }
 
   wa-badge,
-  wa-button::part(label),
   wa-tag {
     text-transform: uppercase;
   }
 
-  wa-badge,
-  wa-tag {
-    border-width: 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;
   }
 
-  &:not(.wa-dark) wa-alert {
-    &[variant='brand'] {
-      --background: var(--wa-color-primary-95);
-    }
-    &[variant='success'] {
-      --background: var(--wa-color-green-95);
-    }
-    &[variant='warning'] {
-      --background: var(--wa-color-yellow-95);
-    }
-    &[variant='danger'] {
-      --background: var(--wa-color-red-95);
-    }
-  }
-
-  wa-badge {
-    &[variant='brand'] {
-      --background: var(--wa-color-primary-80);
-      --text-color: var(--wa-color-primary-20);
-    }
-    &[variant='success'] {
-      --background: var(--wa-color-green-80);
-      --text-color: var(--wa-color-green-20);
-    }
-    &[variant='warning'] {
-      --background: var(--wa-color-yellow-80);
-      --text-color: var(--wa-color-yellow-20);
-    }
-    &[variant='danger'] {
-      --background: var(--wa-color-red-80);
-      --text-color: var(--wa-color-red-20);
-    }
-    &[variant='neutral'] {
-      --background: white;
-      --text-color: var(--wa-color-base-30);
-    }
+  wa-switch {
+    --thumb-color-checked: var(--wa-color-surface-default);
   }
 }

src/styles/themes/tailspin.css

@@ -1,5 +1,5 @@
 @import url('../color/vogue.css');
-@import url('default/color-semantic.css');
+@import url('default/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
 @import url('default/typography.css');
@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-tailspin,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -33,7 +34,7 @@
    */
   --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-95) 85%, transparent);
   --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo);
   --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-80), transparent);
   --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-70) 60%, transparent);
   --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-60) 70%, transparent);
@@ -126,6 +127,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
@@ -238,7 +240,8 @@
     box-shadow: var(--wa-shadow-s);
   }
 
-  wa-callout {
+  wa-callout,
+  .wa-callout {
     border-radius: var(--wa-border-radius-m);
 
     &::part(icon) {

src/styles/utilities/appearance.css

@@ -1,4 +1,13 @@
+/* 0 specificity. Safari doesn't like :where(:host()) so we need a separate rule. */
+.wa-filled,
+.wa-plain,
+.wa-accent,
+:host {
+  --border-color: transparent;
+}
+
 .wa-outlined,
+:where(.wa-callout),
 :host([appearance~='outlined']) {
   --background-color: var(--outlined-background-color, transparent);
   --background-color-hover: var(--outlined-background-color-hover, var(--wa-color-fill-quiet));
@@ -20,12 +29,13 @@
   --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
   --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
 
-  --outlined-border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
+  --outlined-border-color: color-mix(in oklab, var(--wa-color-fill-loud), oklab(0% none none / none) 20%);
 
   --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
 }
 
 .wa-filled,
+:where(.wa-callout),
 :host([appearance~='filled']) {
   --background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
   --background-color-hover: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
@@ -36,17 +46,9 @@
   --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
 }
 
-/* 0 specificity. Safari doesn't like :where(:host()) so we need a separate rule. */
-:where(.wa-filled),
-:host(:where([appearance~='filled'])) {
-  --border-color: transparent;
-}
-
 .wa-plain,
 :host([appearance~='plain']) {
   --background-color: transparent;
-  --text-color: var(--wa-color-on-quiet);
-
   --background-color-hover: var(--wa-color-fill-quiet);
   --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);