Update webawesome-element.ts

- Base class abstraction
- Use in `<wa-icon>` (docs excluded from alpha)

docs/_includes/base-wide.njk

@@ -24,7 +24,6 @@
     <script type="module" src="/dist/webawesome.loader.js"></script>
     <link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
     <link rel="stylesheet" href="/dist/styles/webawesome.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/color/standard.css" />
     <link rel="stylesheet" href="/dist/styles/forms.css" />
 
     {# Docs styles #}

docs/_includes/preset-theme-selector.njk

@@ -1,17 +1,18 @@
 {# Preset theme selector #}
-<wa-dropdown id="preset-theme-selector">
+<wa-dropdown class="preset-theme-selector">
   <wa-button slot="trigger" appearance="filled" size="small" pill caret>
     <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-    <span id="preset-theme-selector__text">Default</span>
+    <span class="preset-theme-selector__text">Default</span>
   </wa-button>
   <wa-menu>
     <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
     <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="fa">Font Awesome</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="active">Active</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="brutalist">Brutalism</wa-menu-item>
+    <wa-menu-item type="checkbox" value="awesome">Awesome</wa-menu-item>
+    <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
+    <wa-menu-item type="checkbox" value="brutalist">Brutalist</wa-menu-item>
     <wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="migration">Migration</wa-menu-item>
+    <wa-menu-item type="checkbox" value="mellow">Mellow</wa-menu-item>
+    <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
     <wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
     <wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
   </wa-menu>

docs/assets/scripts/preset-theme.js

@@ -1,13 +1,17 @@
-//
-// Preset theme selector
-//
 (() => {
+  function applyThemeChange(stylesheet, newStylesheet) {
+    newStylesheet.rel = 'stylesheet';
+    newStylesheet.id = stylesheet.id;
+    requestAnimationFrame(() => {
+      stylesheet.remove();
+    });
+  }
+
   function setPresetTheme(newPresetTheme) {
     presetTheme = newPresetTheme;
     localStorage.setItem('presetTheme', presetTheme);
 
     const stylesheet = document.getElementById('theme-stylesheet');
-
     const newStylesheet = Object.assign(document.createElement('link'), {
       href: `/dist/styles/themes/${presetTheme}.css`,
       rel: 'preload',
@@ -17,35 +21,44 @@
     newStylesheet.addEventListener(
       'load',
       () => {
-        newStylesheet.rel = 'stylesheet';
-        newStylesheet.id = stylesheet.id;
-        requestAnimationFrame(() => {
-          stylesheet.remove();
-        });
+        const canUseViewTransitions =
+          document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+        if (canUseViewTransitions) {
+          document.startViewTransition(() => applyThemeChange(stylesheet, newStylesheet));
+        } else {
+          applyThemeChange(stylesheet, newStylesheet);
+        }
       },
       { once: true },
     );
 
     document.head.append(newStylesheet);
-
-    // Update the UI
     updateSelection();
-
-    // Toggle the dark mode class
     document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
   }
 
   function updateSelection(container = document) {
-    const menu = container.querySelector('#preset-theme-selector wa-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-      const isChecked = item.getAttribute('value') === presetTheme;
-      if (isChecked) {
-        container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
+    const menus = container.querySelectorAll('.preset-theme-selector wa-menu');
+    if (!menus) return;
+
+    [...menus].forEach(menu => {
+      // Clear all checked states
+      [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+        await customElements.whenDefined(item.localName);
+        await item.updateComplete;
+        item.checked = false; // Reset all items to unchecked first
+      });
+
+      // Then set only the selected item as checked
+      const selectedItem = menu.querySelector(`wa-menu-item[value="${presetTheme}"]`);
+      if (selectedItem) {
+        customElements.whenDefined(selectedItem.localName).then(async () => {
+          await selectedItem.updateComplete;
+          selectedItem.checked = true;
+          container.querySelector('.preset-theme-selector__text').textContent = selectedItem.innerText;
+        });
       }
-      await customElements.whenDefined(item.localName);
-      await item.updateComplete;
-      item.checked = isChecked;
     });
   }
 
@@ -53,14 +66,14 @@
 
   // Selection is not preserved when changing page, so update when opening dropdown
   document.addEventListener('wa-show', event => {
-    const presetThemeSelector = event.target.closest('#preset-theme-selector');
+    const presetThemeSelector = event.target.closest('.preset-theme-selector');
     if (!presetThemeSelector) return;
     updateSelection();
   });
 
   // Listen for selections
   document.addEventListener('wa-select', event => {
-    const menu = event.target.closest('#preset-theme-selector wa-menu');
+    const menu = event.target.closest('.preset-theme-selector wa-menu');
     if (!menu) return;
     setPresetTheme(event.detail.item.value);
   });

docs/assets/styles/docs.css

@@ -22,7 +22,7 @@ wa-page {
 /* Header */
 wa-page::part(header) {
   background-color: var(--wa-color-surface-default);
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
+  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
 }
 
 wa-page::part(body) {
@@ -81,7 +81,7 @@ wa-page > header {
   }
   wa-button#search-trigger {
     --background-color: var(--wa-form-control-background-color);
-    --border-color: var(--wa-form-control-resting-color);
+    --border-color: var(--wa-form-control-border-color);
   }
   #search-trigger kbd {
     font-size: var(--wa-font-size-2xs);
@@ -428,7 +428,7 @@ wa-page > main:has(> .index-grid) {
 @media screen and not (max-width: 768px) {
   /* Navigation sidebar */
   wa-page::part(navigation) {
-    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
+    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
   }
 
   wa-page > #sidebar {

docs/assets/styles/theme-headers.css

@@ -1,5 +1,14 @@
-/* #region Custom Styles */
-@container preview (min-width: 0) {
+/* Theme Builder Headers
+ * These styles control the appearance of the header of the theme builder,
+ * allowing each theme to have a unique hero section.
+ */
+
+/* #region Default */
+html[class*='wa-theme-default'] .preview-container {
+  container-name: default-theme;
+}
+
+@container default-theme (min-width: 0) {
   .hero-background {
     height: 47rem;
     background-color: var(--wa-color-brand-fill-loud);
@@ -22,7 +31,7 @@
   }
 
   .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-quiet);
+    --background-color: var(--wa-color-neutral-fill-quiet);
     --text-color: var(--wa-color-neutral-on-normal);
   }
 
@@ -41,10 +50,733 @@
 }
 
 /* responsive */
-@container preview (min-width: 1040px) {
+@container default-theme (min-width: 1040px) {
   .hero-background::after {
     background-position: right bottom;
     background-size: 90%;
   }
 }
 /* #endregion */
+
+/* #region Migration */
+html[class*='wa-theme-migration'] .preview-container {
+  container-name: migration-theme;
+}
+
+@container migration-theme (min-width: 0) {
+  .project-header {
+    background: var(--wa-color-surface-default);
+  }
+
+  .hero {
+    --hero-background-color: var(--wa-color-surface-default);
+    --hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
+    background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
+      radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
+      radial-gradient(
+        circle at 40% 50%,
+        color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
+        transparent 40%
+      ),
+      radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
+      radial-gradient(
+        circle at 80% 80%,
+        color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
+        transparent 40%
+      ),
+      radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
+      linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
+      linear-gradient(90deg, var(--hero-background-color), transparent),
+      repeating-linear-gradient(
+        var(--hero-lines-color),
+        var(--hero-lines-color) 1px,
+        transparent 1px,
+        transparent 10rem,
+        var(--hero-lines-color) 10rem
+      ),
+      repeating-linear-gradient(
+        90deg,
+        var(--hero-lines-color),
+        var(--hero-lines-color) 1px,
+        transparent 1px,
+        transparent 10rem,
+        var(--hero-lines-color) 10rem
+      ),
+      var(--hero-background-color);
+
+    & .title {
+      padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
+
+      & .hero-title {
+        font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
+        margin-block: 0 var(--wa-space-3xl);
+      }
+    }
+  }
+  .badge-stock {
+    position: absolute;
+    top: var(--wa-space-l);
+    left: var(--wa-space-l);
+  }
+
+  .message-composer wa-card {
+    &::part(footer) {
+      border: none;
+    }
+    & wa-icon-button {
+      color: var(--wa-color-base-50);
+    }
+  }
+
+  .products {
+    margin-top: calc(var(--wa-space-3xl) * -8);
+  }
+
+  pre.codeblock {
+    background-color: var(--wa-color-neutral-fill-normal);
+  }
+}
+/* #endregion */
+
+/* #region Brutalist */
+html[class*='wa-theme-brutalist'] .preview-container {
+  container-name: brutalist-theme;
+}
+
+@container brutalist-theme (min-width: 0) {
+  .overlap {
+    background: var(--wa-color-surface-lowered) url('/assets/images/themer/brutalist/hero.png') 50% 3% no-repeat;
+  }
+
+  .strata.hero {
+    height: 42rem;
+    padding-top: 8rem;
+    padding-right: 50%;
+    --wa-font-weight-heading: var(--wa-font-weight-normal);
+  }
+
+  .hero wa-button {
+    --background: var(--wa-color-neutral-fill-loud);
+    margin-block-start: var(--wa-space-xl);
+    font-size: var(--wa-font-size-l);
+  }
+
+  /* imitating the large button styles */
+  .hero wa-button::part(label) {
+    padding: 0 var(--wa-space-l);
+  }
+
+  .strata.products {
+    margin-top: -20rem;
+    padding-top: 10rem;
+  }
+
+  .product-card .badge-stock {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .product-card::part(footer) {
+    --wa-shadow-offset-x-s: 0;
+    --wa-shadow-offset-y-s: 0;
+    border-width: 0;
+    text-align: right;
+  }
+
+  .product-card wa-button::part(prefix) {
+    padding-inline-start: var(--wa-space-xs);
+  }
+
+  .product-card wa-button::part(suffix) {
+    padding-inline-end: var(--wa-space-xs);
+  }
+
+  .product-card wa-button:not(:last-child) {
+    margin-inline-end: var(--wa-space-xs);
+  }
+
+  /* imitating the rounded avatar */
+  .blog wa-avatar {
+    background-color: transparent;
+  }
+
+  .blog wa-avatar::part(image) {
+    border: var(--wa-border-width-s) solid var(--wa-color-brand-fill-loud);
+    border-radius: var(--wa-border-radius-circle);
+  }
+
+  .blog .landscape-frame {
+    box-shadow: var(--wa-shadow-s);
+    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
+    margin-block-end: var(--wa-shadow-offset-y-s);
+  }
+
+  .post-meta .categories {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .message-composer wa-card::part(header) {
+    background-color: var(--wa-color-neutral-fill-loud);
+  }
+
+  .message-composer .grouped-buttons {
+    --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-30), white 40%);
+  }
+
+  .message-composer [slot='header'] wa-icon-button::part(base) {
+    color: var(--wa-color-neutral-on-loud);
+  }
+
+  .message-composer .grouped-buttons wa-icon-button::part(base):hover {
+    background-color: var(--wa-color-neutral-fill-normal);
+    color: var(--wa-color-text-normal);
+  }
+
+  .message-composer wa-tooltip::part(body) {
+    background-color: var(--wa-color-brand-fill-loud);
+    color: var(--wa-color-brand-on-loud);
+  }
+
+  .message-composer wa-tooltip::part(base__arrow) {
+    --arrow-color: var(--wa-color-brand-fill-loud);
+  }
+
+  .message-composer wa-card::part(footer) {
+    border-width: 0;
+    --padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
+  }
+
+  .support-table th {
+    background-color: var(--wa-color-neutral-fill-loud);
+    color: var(--wa-color-neutral-on-loud);
+  }
+
+  .support-table th wa-checkbox {
+    --background: transparent;
+    --border-color: var(--wa-color-neutral-on-loud);
+    --border-color-checked: var(--wa-color-neutral-on-loud);
+  }
+
+  .checkout-form {
+    font-size: var(--wa-font-size-s);
+  }
+
+  .checkout-form .square-frame {
+    box-shadow: var(--wa-shadow-s);
+    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
+  }
+
+  .wa-theme-brutalist-dark {
+    & p a::before {
+      background: var(--wa-color-yellow-40);
+    }
+
+    & wa-rating {
+      --symbol-color: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
+      --symbol-color-active: var(--wa-color-gray-80);
+    }
+
+    & wa-alert {
+      &[variant='brand'] {
+        --icon-color: var(--wa-color-brand-on-quiet);
+      }
+      &[variant='success'] {
+        --icon-color: var(--wa-color-success-on-quiet);
+      }
+      &[variant='warning'] {
+        --icon-color: var(--wa-color-warning-on-quiet);
+      }
+      &[variant='danger'] {
+        --icon-color: var(--wa-color-danger-on-quiet);
+      }
+      &[variant='neutral'] {
+        --icon-color: var(--wa-color-neutral-on-quiet);
+      }
+    }
+  }
+
+  .preview-container pre {
+    border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-quiet);
+  }
+
+  p a,
+  a.highlite-link {
+    position: relative;
+    --wa-link-decoration-default: none;
+    --wa-link-decoration-hover: none;
+
+    &:before {
+      position: absolute;
+      z-index: -1;
+      content: '';
+      background: var(--wa-color-yellow-80);
+      width: 100%;
+      bottom: 0;
+      height: 50%;
+      opacity: 0.7;
+      transition: all var(--wa-transition-fast) ease-in-out;
+    }
+
+    &:hover:before {
+      height: 100%;
+    }
+  }
+}
+@container brutalist-theme (min-width: 1040px) and (max-width: 1140px) {
+  .product-card wa-button {
+    font-size: 80%;
+  }
+}
+/* #endregion */
+
+/* #region Playful */
+html[class*='wa-theme-playful'] .preview-container {
+  container-name: playful-theme;
+}
+
+@container playful-theme (min-width: 0) {
+  .project-header {
+    color: var(--wa-color-success-on-normal);
+  }
+
+  .hero-background {
+    position: absolute;
+    z-index: -1;
+    top: -60rem;
+    left: 50%;
+    width: 250rem;
+    height: 250rem;
+    transform: translate(-50%, -50%);
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: linear-gradient(180deg, var(--wa-color-green-90) 69.42%, var(--wa-color-green-80) 100%);
+  }
+
+  .hero-background::after {
+    background: url(/assets/images/themer/playful/hero.png) 0 50% no-repeat;
+    content: '';
+    position: absolute;
+    width: 520px;
+    height: 600px;
+    transform: translateX(-50%);
+    left: 50%;
+    bottom: 33rem;
+  }
+
+  .strata.hero {
+    padding-top: 19rem;
+    text-align: center;
+  }
+
+  .hero .hero-title {
+    color: var(--wa-color-success-on-normal);
+    font-size: var(--wa-font-size-4xl);
+  }
+
+  .hero .hero-cta {
+    font-size: var(--wa-font-size-l);
+  }
+
+  .product-card .badge-stock {
+    position: absolute;
+    top: var(--wa-space-xl);
+    right: var(--wa-space-xl);
+  }
+
+  .product-card {
+    --wa-panel-border-radius: var(--wa-border-radius-l);
+  }
+
+  .product-card::part(footer) {
+    border-width: 0;
+  }
+
+  .product-card wa-button {
+    margin-inline-end: var(--wa-space-xs);
+  }
+
+  .blog wa-avatar {
+    --size: 2rem;
+  }
+
+  .blog .landscape-frame {
+    border-radius: var(--wa-border-radius-l);
+    box-shadow: var(--wa-shadow-s);
+  }
+
+  .message-composer wa-card {
+    --background: var(--wa-color-surface-raised);
+  }
+
+  .message-composer wa-card::part(header) {
+    --wa-color-neutral-border-quiet: var(--wa-color-gray-70);
+    border-width: 0;
+    background-color: var(--wa-color-neutral-fill-quiet);
+  }
+
+  &:not(.wa-theme-premium-dark) .message-composer wa-card {
+    --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
+  }
+
+  .message-composer wa-icon-button {
+    color: var(--wa-text-color-normal);
+    font-size: var(--wa-font-size-l);
+  }
+
+  .message-composer wa-card::part(footer) {
+    padding-top: 0;
+  }
+
+  .product-detail .price {
+    font-weight: var(--wa-font-weight-bold);
+  }
+
+  .support-table wa-card {
+    --background: var(--wa-color-surface-raised);
+  }
+
+  .support-table th {
+    font-size: var(--wa-font-size-s);
+    font-weight: var(--wa-font-weight-bold);
+    background-color: var(--wa-color-surface-lowered);
+  }
+
+  .support-table tr {
+    border-top-color: var(--wa-color-surface-lowered);
+  }
+
+  .support-table .excerpt {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .order-item img {
+    border-radius: var(--wa-border-radius-m);
+  }
+
+  .checkout-form {
+    font-size: var(--wa-font-size-s);
+  }
+
+  .checkout-form h2 {
+    font-size: var(--wa-font-size-3xl);
+  }
+
+  .checkout-form wa-input::part(form-control-label),
+  .checkout-form wa-select::part(form-control-label) {
+    font-size: var(--wa-font-size-s);
+    padding-block-end: var(--wa-space-xs);
+  }
+
+  .wa-theme-playful-dark {
+    & .hero-background {
+      background: linear-gradient(180deg, var(--wa-color-green-60) 69.42%, var(--wa-color-green-30) 100%);
+    }
+
+    & .message-composer wa-card {
+      --border-color: var(--wa-color-gray-30);
+    }
+
+    & .message-composer wa-card::part(header) {
+      background: var(--wa-color-gray-40);
+    }
+
+    & .message-composer wa-card::part(footer) {
+      border-top: 0;
+    }
+
+    & .message-composer .tools .grouped-buttons:not(:last-of-type) {
+      --wa-color-neutral-border-quiet: var(--wa-color-gray-40);
+    }
+
+    & .support-table th {
+      background: var(--wa-color-surface-lowered);
+    }
+  }
+}
+/* responsive */
+@container playful-theme (min-width: 1040px) and (max-width: 1140px) {
+  .product-card wa-button {
+    font-size: 80%;
+    margin-inline-end: 0;
+  }
+}
+/* #endregion */
+
+/* #region Active */
+html[class*='wa-theme-active'] .preview-container {
+  container-name: active-theme;
+}
+
+@container active-theme (min-width: 0) {
+  .hero-background::after {
+    backdrop-filter: brightness(0.8);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .hero-background {
+    background: linear-gradient(
+      var(--wa-color-green-80) 20%,
+      var(--wa-color-primary-80) 80.5%,
+      var(--wa-color-base-10) 80.5%,
+      var(--wa-color-primary-80) 100%
+    );
+    background: url(/assets/images/themer/active/hero.png) 50% 0px / cover no-repeat;
+    height: 40rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+  }
+
+  .strata.hero {
+    height: 24rem;
+  }
+
+  .hero .title {
+    text-align: right;
+    margin-inline-start: 55%;
+  }
+
+  .hero .hero-title {
+    font-style: italic;
+    font-weight: var(--wa-font-weight-black);
+    font-size: var(--wa-font-size-2xl);
+  }
+
+  .hero wa-button[variant='brand'] {
+    --background: var(--wa-color-neutral-fill-quiet);
+    --text-color: var(--wa-color-neutral-on-normal);
+  }
+
+  wa-rating {
+    --symbol-color-active: var(--wa-color-brand-on-quiet);
+  }
+}
+
+/* responsive */
+@container preview (min-width: 1100px) {
+  .hero-background {
+    height: 47rem;
+  }
+
+  .strata.hero {
+    height: 30rem;
+  }
+
+  .hero .title {
+    margin-block-start: 10%;
+  }
+}
+/* #endregion */
+
+/* #region Premium */
+html[class*='wa-theme-premium'] .preview-container {
+  container-name: premium-theme;
+}
+
+@container premium-theme (min-width: 0) {
+  .project-header {
+    background-color: var(--wa-color-warning-fill-normal);
+  }
+
+  .strata.hero {
+    height: 60rem;
+    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
+    background-size: cover;
+    padding-top: var(--wa-space-2xl);
+    padding-left: var(--wa-space-s);
+    text-align: right;
+  }
+
+  .hero .hero-title {
+    color: var(--wa-color-warning-on-normal);
+    font-style: italic;
+  }
+
+  .blog wa-avatar {
+    border-radius: var(--wa-border-radius-circle);
+    overflow: hidden;
+  }
+
+  .strata.products {
+    margin-top: -25rem;
+    padding-top: 10rem;
+    background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
+  }
+
+  .product-card .badge-stock {
+    position: absolute;
+    top: var(--wa-space-xl);
+    right: var(--wa-space-xl);
+  }
+
+  .product-card wa-rating {
+    --symbol-size: var(--wa-font-size-m);
+  }
+
+  .product-card .title {
+    font-size: var(--wa-font-size-2xl);
+  }
+
+  .product-card .description {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .product-card::part(footer) {
+    border-width: 0;
+  }
+
+  .product-card wa-button:not(:last-child) {
+    margin-inline-end: var(--wa-space-xs);
+  }
+
+  .blog .authors a {
+    --wa-color-text-link: var(--wa-color-text-quiet);
+    --wa-link-decoration-default: none;
+  }
+
+  .message-composer wa-card {
+    --background: var(--wa-color-surface-raised);
+  }
+
+  .message-composer wa-card::part(header) {
+    border-width: 0;
+    background-color: var(--wa-color-neutral-fill-quiet);
+  }
+
+  &:not(.wa-theme-premium-dark) .message-composer wa-card {
+    --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
+  }
+
+  .message-composer wa-card::part(footer) {
+    border-width: 0;
+    --padding: var(--wa-space-s) var(--wa-space-xl);
+  }
+
+  .message-composer .grouped-buttons wa-icon-button::part(base) {
+    block-size: var(--wa-form-control-height-s);
+    inline-size: var(--wa-form-control-height-s);
+    justify-content: center;
+  }
+  .message-composer .grouped-buttons wa-icon-button::part(base):hover {
+    background-color: var(--wa-color-neutral-fill-normal);
+    color: var(--wa-color-text-normal);
+  }
+
+  .support-table th {
+    text-transform: uppercase;
+    font-weight: var(--wa-font-weight-normal);
+    color: var(--wa-color-text-quiet);
+    background-color: var(--wa-color-surface-lowered);
+  }
+
+  .support-table th:first-child {
+    border-radius: var(--wa-border-radius-l) 0 0 0;
+  }
+
+  .support-table th:last-child {
+    border-radius: 0 var(--wa-border-radius-l) 0 0;
+  }
+
+  .support-table tr {
+    --wa-color-surface-border: var(--wa-color-surface-lowered);
+  }
+
+  .checkout-form wa-input::part(form-control-label),
+  .checkout-form wa-select::part(form-control-label) {
+    font-size: var(--wa-font-size-s);
+    margin-block-end: var(--wa-space-xs);
+  }
+
+  .order-item .finish {
+    color: var(--wa-color-text-quiet);
+    font-size: var(--wa-font-size-s);
+    font-style: italic;
+  }
+
+  .wa-theme-premium-dark {
+    & .message-composer .tools .grouped-buttons:not(:last-of-type) {
+      --wa-color-neutral-border-quiet: var(--wa-color-base-40);
+    }
+
+    & .preview-container pre,
+    & .preview-container code {
+      background-color: var(--wa-color-base-20);
+    }
+
+    /* syntax highlighting */
+    & .token {
+      &.selector {
+        color: var(--wa-color-green-80);
+      }
+
+      &.tag {
+        color: var(--wa-color-primary-80);
+      }
+
+      &.punctuation {
+        color: var(--wa-color-base-95);
+      }
+
+      &.attr-name {
+        color: var(--wa-color-green-80);
+      }
+
+      &.attr-value {
+        color: var(--wa-color-yellow-80);
+      }
+    }
+  }
+  .preview-container pre,
+  .preview-container code {
+    background-color: var(--wa-color-base-90);
+    font-size: var(--font-size-m);
+  }
+
+  /* syntax highlighting */
+  .token {
+    &.selector {
+      color: var(--wa-color-green-30);
+    }
+
+    &.tag {
+      color: var(--wa-color-primary-30);
+    }
+
+    &.punctuation {
+      color: var(--wa-color-base-10);
+    }
+
+    &.attr-name {
+      color: var(--wa-color-green-30);
+    }
+
+    &.attr-value {
+      color: var(--wa-color-yellow-30);
+    }
+  }
+}
+
+/* responsive */
+@container preview (min-width: 1040px) {
+  .strata.hero {
+    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
+    padding-top: 15rem;
+    padding-left: 50%;
+  }
+
+  .strata.products {
+    margin-top: -25rem;
+    padding-top: 10rem;
+    background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
+  }
+}
+/* #endregion */

docs/docs/components/icon.md

@@ -24,6 +24,63 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu
 <wa-icon family="brands" name="web-awesome"></wa-icon>
 ```
 
+<div data-alpha="remove">
+
+### Setting icon info via CSS
+
+You can also set the icon's family, name, and variant via CSS custom properties.
+This can be useful when you want to set the icon dynamically (e.g. in response to a CSS pseudo-class or media query) or set  defaults for a group of icons (e.g. icons inside callouts or all icons for a given theme).
+
+```html {.example}
+<wa-callout>
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  This is a callout.
+</wa-callout>
+
+<wa-callout variant="danger">
+  <wa-icon slot="icon" name="dumpster-fire" variant="solid"></wa-icon>
+  This is a callout with an explicit icon.
+</wa-callout>
+
+<wa-callout variant="warning">
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  Here be dragons.
+  <button id="toggle_icon">Toggle&nbsp;<wa-icon name="circle-exclamation"></wa-icon></button>
+</wa-callout>
+
+<style>
+wa-callout {
+  --wa-icon-variant: regular;
+  --wa-icon-name: info-circle;
+
+  &[variant="warning"] {
+    --wa-icon-name: triangle-exclamation;
+  }
+}
+</style>
+<script>
+toggle_icon.addEventListener('click', e => {
+  let callout = e.target.closest('wa-callout');
+  let value = callout.style.getPropertyValue('--wa-icon-name').trim();
+  if (value) {
+    callout.style.removeProperty('--wa-icon-name');
+  }
+  else {
+    callout.style.setProperty('--wa-icon-name', 'circle-exclamation');
+  }
+});
+</script>
+```
+
+Notes:
+- If you specify attributes, they will override the CSS custom properties, which provides a way to set defaults and then override them as needed.
+- CSS custom properties inherit — so if you set a `--wa-icon-*` custom property on an element, it will affect *all* icons within it that don’t override these values (either via attributes or CSS custom properties).
+- These CSS properties are currently not reactive and will only be read when the component is first connected.
+
+</div>
+
 ### Colors
 
 Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.

docs/docs/experimental/sandbox.md

@@ -1,7 +1,7 @@
 ---
 title: Theming Sandbox
 description: TODO
-layout: page
+layout: page-outline
 ---
 
 ## Card
@@ -245,11 +245,78 @@ layout: page
     <wa-spinner></wa-spinner>
   </div>
   <div class="alignment">
-    <wa-input label="AaBbCc" hint="Lorem ipsum dolor"></wa-input>
-    <wa-select label="AaBbCc" value="ocbs" multiple hint="Lorem ipsum dolor">
+    <wa-input label="AaBbCc" hint="Ipsum"></wa-input>
+    <wa-select label="AaBbCc" value="ocbs" multiple hint="Ipsum">
       <wa-option value="ocbs">OCBS</wa-option>
     </wa-select>
-    <wa-color-picker label="AaBbCc" hint="Lorem ipsum dolor"></wa-color-picker>
+    <wa-color-picker label="AaBbCc" hint="Ipsum"></wa-color-picker>
   </div>
 </div>
 ```
+
+```html {.example}
+<style>
+  .wa-theme-test {
+    --wa-form-control-background-color: mistyrose;
+
+    --wa-form-control-border-style: dotted;
+    --wa-form-control-border-width: 3px;
+    --wa-form-control-border-radius: 12px;
+
+    --wa-form-control-activated-color: mediumvioletred;
+    --wa-form-control-border-color: palevioletred;
+
+    --wa-form-control-label-color: rosybrown;
+    --wa-form-control-label-font-weight: 900;
+    --wa-form-control-label-line-height: 1;
+
+    --wa-form-control-value-color: brown;
+    --wa-form-control-value-font-weight: 900;
+    --wa-form-control-value-line-height: 2;
+
+    --wa-form-control-placeholder-color: lightpink;
+  }
+</style>
+<div class="wa-theme-test" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <label>Native Input <input type="text" placeholder="placeholder"></label>
+  <wa-input label="WA Input" type="text" placeholder="placeholder"></wa-input>
+
+  <label>Native Input <input type="text" value="value"></label>
+  <wa-input label="WA Input" type="text" value="value"></wa-input>
+
+  <label>Native Textarea <textarea placeholder="placeholder"></textarea></label>
+  <wa-textarea label="WA Textarea" placeholder="placeholder"></wa-textarea>
+
+  <label>Native Textarea <textarea>value</textarea></label>
+  <wa-textarea label="WA Textarea" value="value"></wa-textarea>
+
+  <label><input type="checkbox" checked> Native Checkbox</label>
+  <wa-checkbox checked>WA Checkbox</wa-checkbox>
+
+  <label><input type="checkbox"> Native Checkbox</label>
+  <wa-checkbox>WA Checkbox</wa-checkbox>
+
+  <label><input type="radio" checked> Native Radio</label>
+  <wa-radio checked>WA Radio</wa-radio>
+
+  <label><input type="radio"> Native Radio</label>
+  <wa-radio>WA Radio</wa-radio>
+
+  <label>
+    Native Select 
+    <select value="option-1">
+      <option value="option-1">Option 1</option>
+      <option value="option-2">Option 2</option>
+      <option value="option-3">Option 3</option>
+      <option value="option-4">Option 4</option>
+    </select>
+  </label>
+  <wa-select label="WA Select" value="option-1">
+    <wa-option value="option-1">Option 1</wa-option>
+    <wa-option value="option-2">Option 2</wa-option>
+    <wa-option value="option-3">Option 3</wa-option>
+    <wa-option value="option-4">Option 4</wa-option>
+  </wa-select>
+</div>
+
+```

docs/docs/experimental/themer.md

@@ -5,6 +5,15 @@ layout: page
 hasOutline: false
 ---
 
+<script>
+  // Add stylesheet to set themed headers
+  const themeHeadersLink = document.createElement("link");
+  themeHeadersLink.type="text/css";
+  themeHeadersLink.rel="stylesheet";
+  themeHeadersLink.href="/assets/styles/theme-headers.css";
+  document.getElementsByTagName("head")[0].appendChild(themeHeadersLink);
+</script>
+
 <style>
   /* turn off eleventy header anchors */
   .anchor-heading a {
@@ -156,7 +165,7 @@ hasOutline: false
     --wa-form-control-border-radius: var(--wa-border-radius-m);
 
     --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-    --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
+    --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 
     --wa-form-control-label-color: var(--wa-color-text-normal);
     --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
@@ -168,16 +177,6 @@ hasOutline: false
 
     --wa-form-control-placeholder-color: color-mix(in oklab, var(--wa-color-text-normal), transparent);
 
-    --wa-form-control-height-s: calc(
-      var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height)
-    );
-    --wa-form-control-height-m: calc(
-      var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height)
-    );
-    --wa-form-control-height-l: calc(
-      var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height)
-    );
-
     --wa-form-control-required-content: '*';
     --wa-form-control-required-content-color: inherit;
     --wa-form-control-required-content-offset: -0.1em;
@@ -364,13 +363,13 @@ hasOutline: false
   /* file uploader styles */
   .file-uploader {
     position: relative;
-    border: var(--wa-form-control-border-width) dashed var(--wa-form-control-resting-color);
+    border: var(--wa-form-control-border-width) dashed var(--wa-form-control-border-color);
     border-radius: var(--wa-form-control-border-radius);
     background: var(--wa-form-control-background-color);
     cursor: pointer;
     font-weight: var(--wa-font-weight-action);
-    height: calc(var(--wa-form-control-height-m) + var(--wa-border-width-s) * 2);
-    line-height: var(--wa-form-control-height-m);
+    height: calc(var(--wa-form-control-height) + var(--wa-border-width-s) * 2);
+    line-height: var(--wa-form-control-height);
     text-align: center;
   }
 
@@ -502,7 +501,7 @@ hasOutline: false
     </div>
     <wa-select name="theme" label="Pick a theme to start!" value="default">
       <wa-option value="default">Default</wa-option>
-      <wa-option data-alpha="remove" value="fa">Font Awesome</wa-option>
+      <wa-option data-alpha="remove" value="awesome">Awesome</wa-option>
       <wa-option data-alpha="remove" value="premium">Premium</wa-option>
       <wa-option data-alpha="remove" value="playful">Playful</wa-option>
       <wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
@@ -880,7 +879,7 @@ hasOutline: false
       case 'migration':
         colorPalette = 'classic';
         break;
-      case 'fa':
+      case 'awesome':
         colorPalette = 'bright';
         break;
       case 'playful':
@@ -1049,7 +1048,7 @@ hasOutline: false
       case 'playful':
       case 'brutalist':
       case 'classic':
-      case 'fa':
+      case 'awesome':
       case 'glassy':
       case 'active':
         assetFolder = themeSelect.value;
@@ -1245,7 +1244,7 @@ hasOutline: false
     let presetLogoIcons;
 
     switch(themeSelect.value) {
-      case 'fa':
+      case 'awesome':
         presetLogoIcons = ['cupcake', 'camera-retro', 'rocket-launch', 'cookie-bite'];
         break;
       case 'premium':
@@ -1447,7 +1446,7 @@ hasOutline: false
 
   function setPreferredIcons() {
     switch(themeSelect.value) {
-      case 'fa':
+      case 'awesome':
         iconFamily.value = 'fa-classic';
         iconStyle.value = 'solid';
         useFaIcons();
@@ -1664,7 +1663,7 @@ hasOutline: false
 
   .preview-container {
     background: var(--wa-color-surface-lowered);
-    container: preview / inline-size;
+    container-type: inline-size;
     padding: 0;
     max-inline-size: 1400px;
     margin-inline: auto;

docs/docs/resources/changelog.md

@@ -17,12 +17,22 @@ During the alpha period, things might break! We take breaking changes very serio
 - Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
 - Added `appearance` to `<wa-callout>` and `<wa-tag>`
 - Fixed a bug in `<wa-switch>` where it would not properly change its "checked" state when its property changed.
+- Fixed a bug in `<wa-switch>` where the value would be incorrectly submitted as "on" when a value is provided and the switch is checked
 - Fixed a bug in the `wa-split` CSS utility that caused it to behave incorrectly
 - Improved performance of `<wa-select>` when using a large number of options
 - Updated the Japanese translation
 
 ### Theming
 
+- Added new themes:
+  - Awesome
+  - Active
+  - Brutalist
+  - Mellow
+  - Migration
+  - 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
   - Changed the value of `--wa-border-width-scale` to `1` and updated calculations of size-based `--wa-border-width-*` tokens
   - Changed the value of `--wa-border-radius-scale` to `1` and updated calculations of size-based `--wa-border-radius-*` tokens

docs/docs/theming/borders.md

@@ -15,14 +15,15 @@ Border style controls the standard line shape of borders throughout Web Awesome.
 
 Border widths use `rem` units in order to scale proportionately with the root font size.
 
-Each border width value uses a `calc()` function with `--wa-border-width-scale` to scale all border widths at once. By default, this multiplier is `0.0625`. The table below lists the result of the calculation.
-
 | Custom Property       | Default Value                    | Preview                                                                   |
 | --------------------- | -------------------------------- | ------------------------------------------------------------------------- |
 | `--wa-border-width-s` | `0.0625rem` <small>(1px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-s)"></div> |
 | `--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`. 
+Values < 1 make all borders uniformly thinner, while values > 1 make them thicker.
+
 ## Radius
 
 Border radius controls the corners of Web Awesome components.
@@ -37,10 +38,11 @@ Common border radius properties allow you to achieve specific shapes beyond your
 
 Size-based border radius properties allow you to customize the overall roundness of Web Awesome components. These use `rem` units in order to scale proportionately with the root font size.
 
-Each property uses a `calc()` function with `--wa-border-radius-scale` to uniformly scale all border radii. By default, this multiplier is `1`. The table below lists the result of the calculation.
+| Custom Property         | Default Value                    |  Preview                                                                    |
+| ----------------------- | -------------------------------- | --------------------------------------------------------------------------- |
+| `--wa-border-radius-s`  | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
+| `--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> |
 
-| Custom Property         | Default Value                    |  Preview                                                                     |
-| ----------------------- | -------------------------------- | ---------------------------------------------------------------------------- |
-| `--wa-border-radius-s` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
-| `--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.

docs/docs/theming/color.md

@@ -210,6 +210,54 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
   </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">

docs/docs/theming/component-groups.md

@@ -15,11 +15,11 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
 | Custom Property                             | Default Value                                                                                     |
 | ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | `--wa-form-control-background-color`        | `var(--wa-color-surface-default)`                                                                 |
+| `--wa-form-control-border-color`            | `var(--wa-color-neutral-border-loud)`                                                             |
 | `--wa-form-control-border-style`            | `var(--wa-border-style)`                                                                          |
 | `--wa-form-control-border-width`            | `var(--wa-border-width-s)`                                                                        |
 | `--wa-form-control-border-radius`           | `var(--wa-border-radius-m)`                                                                       |
 | `--wa-form-control-activated-color`         | `var(--wa-color-brand-fill-loud)`                                                                 |
-| `--wa-form-control-resting-color`           | `var(--wa-color-neutral-border-loud)`                                                             |
 | `--wa-form-control-label-color`             | `var(--wa-color-neutral-border-loud)`                                                             |
 | `--wa-form-control-label-font-weight`       | `var(--wa-font-weight-normal)`                                                                    |
 | `--wa-form-control-label-line-height`       | `var(--wa-line-height-normal)`                                                                    |
@@ -27,9 +27,6 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
 | `--wa-form-control-value-font-weight`       | `var(--wa-font-weight-body)`                                                                      |
 | `--wa-form-control-value-line-height`       | `var(--wa-line-height-condensed)`                                                                 |
 | `--wa-form-control-placeholder-color`       | `var(--wa-color-gray-60)`                                                                         |
-| `--wa-form-control-height-s`                | `calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height))` |
-| `--wa-form-control-height-m`                | `calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height))`  |
-| `--wa-form-control-height-l`                | `calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height))`  |
 | `--wa-form-control-required-content`        | `'*'`                                                                                             |
 | `--wa-form-control-required-content-color`  | `inherit`                                                                                         |
 | `--wa-form-control-required-content-offset` | `-0.1em`                                                                                          |

docs/docs/utilities/size.md

@@ -24,6 +24,7 @@ You can create the same effect on any element by using the size utility classes:
 Using these classes does two things:
 - It sets `font-size` to one of the [size tokens](/docs/theming/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:
 
 | Custom Property | Small | Medium | Large |
@@ -32,7 +33,6 @@ You can use CSS `em` units to reference that size in other properties.
 | `--wa-size-smaller` | `--wa-font-size-xs` | `--wa-font-size-s` | `--wa-font-size-m` |
 | `--wa-space` | `--wa-space-s` | `--wa-space-m` | `--wa-space-l` |
 | `--wa-space-smaller` | `--wa-space-xs` | `--wa-space-s` | `--wa-space-m` |
-| `--wa-form-control-height` | `--wa-form-control-height-s` | `--wa-form-control-height-m` | `--wa-form-control-height-l` |
 
 For example, assume we wanted to make a custom `.tag` class with size variants.
 

package-lock.json

@@ -9,6 +9,7 @@
       "version": "3.0.0-alpha.7",
       "license": "MIT",
       "dependencies": {
+        "@bramus/style-observer": "^1.3.0",
         "@ctrl/tinycolor": "^4.1.0",
         "@floating-ui/dom": "^1.6.12",
         "@shoelace-style/animations": "^1.2.0",
@@ -676,6 +677,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/@bramus/style-observer": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@bramus/style-observer/-/style-observer-1.3.0.tgz",
+      "integrity": "sha512-IQjYId9X7xgz0NeKGatC37lqsdS+cE5bfdB9jKh7+zJnA9BqENee2C48boDIRQrTED4JxleRZGhTY86S1/l7QA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@cspell/cspell-bundled-dicts": {
       "version": "6.31.3",
       "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-6.31.3.tgz",

package.json

@@ -64,6 +64,7 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
+    "@bramus/style-observer": "^1.3.0",
     "@ctrl/tinycolor": "^4.1.0",
     "@floating-ui/dom": "^1.6.12",
     "@shoelace-style/animations": "^1.2.0",

scripts/build.js

@@ -113,7 +113,15 @@ async function generateStyles() {
     // Remove pro themes
     const allThemes = await globby(join(cdnDir, 'styles/themes/**/*.css'));
     const proThemes = allThemes.filter(file => {
-      if (file.includes('themes/classic') || file.includes('themes/default')) {
+      if (
+        file.includes('themes/classic') ||
+        file.includes('themes/default') ||
+        file.includes('themes/awesome') ||
+        file.includes('themes/active') ||
+        file.includes('themes/mellow') ||
+        file.includes('themes/migration') ||
+        file.includes('themes/brutalist')
+      ) {
         return false;
       }
       return true;

src/components/button-group/button-group.ts

@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -32,8 +33,10 @@ export default class WaButtonGroup extends WebAwesomeElement {
   /** The button group's orientation. */
   @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
 
-  updated(changedProps: Map<string, unknown>) {
-    if (changedProps.has('orientation')) {
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('orientation')) {
       this.setAttribute('aria-orientation', this.orientation);
       this.updateClassNames();
     }

src/components/button/button.ts

@@ -7,7 +7,7 @@ import { WaFocusEvent } from '../../events/focus.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/button.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';

src/components/carousel/carousel.css

@@ -1,7 +1,7 @@
 :host {
   --aspect-ratio: 16 / 9;
   --navigation-color: var(--wa-color-text-quiet);
-  --pagination-color: var(--wa-form-control-resting-color);
+  --pagination-color: var(--wa-form-control-border-color);
   --pagination-color-active: var(--wa-form-control-activated-color);
   --scroll-hint: 0px;
   --slide-gap: var(--wa-space-m, 1rem);

src/components/checkbox/checkbox.ts

@@ -11,7 +11,7 @@ import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/checkbox.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/utilities/size.css';

src/components/color-picker/color-picker.css

@@ -317,7 +317,7 @@
   border-radius: inherit;
   background-color: currentColor;
   box-shadow:
-    inset 0 0 0 0.0625rem var(--wa-form-control-resting-color),
+    inset 0 0 0 0.0625rem var(--wa-form-control-border-color),
     inset 0 0 0 0.25rem var(--wa-color-surface-default);
 }
 

src/components/color-picker/color-picker.ts

@@ -15,7 +15,7 @@ import { clamp } from '../../internal/math.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import visuallyHidden from '../../styles/utilities/visually-hidden.css';

src/components/icon-button/icon-button.ts

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { html, literal } from 'lit/static-html.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import '../icon/icon.js';
 import styles from './icon-button.css';
 

src/components/icon/icon.css

@@ -31,3 +31,24 @@ svg {
   width: 1em;
   justify-content: center;
 }
+
+@property --wa-icon-family {
+  syntax: '<custom-ident> | auto';
+  inherits: true;
+  initial-value: 'auto';
+}
+@property --wa-icon-variant {
+  syntax: '<custom-ident> | auto';
+  inherits: true;
+  initial-value: 'auto';
+}
+@property --wa-icon-library {
+  syntax: '<custom-ident> | auto';
+  inherits: true;
+  initial-value: 'auto';
+}
+@property --wa-icon-name {
+  syntax: '<custom-ident> | auto';
+  inherits: true;
+  initial-value: 'auto';
+}

src/components/icon/icon.ts

@@ -48,21 +48,21 @@ export default class WaIcon extends WebAwesomeElement {
   @state() private svg: SVGElement | HTMLTemplateResult | null = null;
 
   /** The name of the icon to draw. Available names depend on the icon library being used. */
-  @property({ reflect: true }) name?: string;
+  @property({ cssProperty: true }) name?: string;
 
   /**
    * The family of icons to choose from. For Font Awesome Free (default), valid options include `classic` and `brands`.
    * For Font Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, and `brands`. Custom icon
    * libraries may or may not use this property.
    */
-  @property({ reflect: true }) family: string;
+  @property({ cssProperty: true }) family: string;
 
   /**
    * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
    * the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries
    * may or may not use this property.
    */
-  @property({ reflect: true }) variant: string;
+  @property({ cssProperty: true }) variant: string;
 
   /** Draws the icon in a fixed-width both. */
   @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
@@ -80,10 +80,11 @@ export default class WaIcon extends WebAwesomeElement {
   @property() label = '';
 
   /** The name of a registered custom icon library. */
-  @property({ reflect: true }) library = 'default';
+  @property({ cssProperty: true }) library = 'default';
 
   connectedCallback() {
     super.connectedCallback();
+
     watchIcon(this);
   }
 

src/components/input/input.ts

@@ -11,7 +11,7 @@ import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/input.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';

src/components/popup/popup.ts

@@ -1,5 +1,6 @@
 import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
 import { offsetParent } from 'composed-offset-position';
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -222,11 +223,11 @@ export default class WaPopup extends WebAwesomeElement {
     this.stop();
   }
 
-  async updated(changedProps: Map<string, unknown>) {
-    super.updated(changedProps);
+  async updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
 
     // Start or stop the positioner when active changes
-    if (changedProps.has('active')) {
+    if (changedProperties.has('active')) {
       if (this.active) {
         this.start();
       } else {
@@ -235,7 +236,7 @@ export default class WaPopup extends WebAwesomeElement {
     }
 
     // Update the anchor when anchor changes
-    if (changedProps.has('anchor')) {
+    if (changedProperties.has('anchor')) {
       this.handleAnchorChange();
     }
 

src/components/progress-ring/progress-ring.ts

@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -38,15 +39,15 @@ export default class WaProgressRing extends WebAwesomeElement {
   /** A custom label for assistive devices. */
   @property() label = '';
 
-  updated(changedProps: Map<string, unknown>) {
-    super.updated(changedProps);
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
 
     //
     // This block is only required for Safari because it doesn't transition the circle when the custom properties
     // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
     // but I couldn't pinpoint it so this works around the problem.
     //
-    if (changedProps.has('value')) {
+    if (changedProperties.has('value')) {
       const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
       const circumference = 2 * Math.PI * radius;
       const offset = circumference - (this.value / 100) * circumference;

src/components/radio-button/radio-button.ts

@@ -6,7 +6,7 @@ import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/button.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';

src/components/radio-group/radio-group.ts

@@ -7,7 +7,7 @@ import { uniqueId } from '../../internal/math.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import buttonGroupStyles from '../../styles/utilities/button-group.css';
 import sizeStyles from '../../styles/utilities/size.css';

src/components/radio/radio.ts

@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/radio.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import '../icon/icon.js';

src/components/select/select.ts

@@ -19,7 +19,7 @@ import { scrollIntoView } from '../../internal/scroll.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/select.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';

src/components/slider/slider.ts

@@ -10,7 +10,7 @@ import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import sliderStyles from '../../styles/native/slider.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import { LocalizeController } from '../../utilities/localize.js';

src/components/switch/switch.css

@@ -1,13 +1,13 @@
 :host {
   --background-color: var(--wa-form-control-background-color);
   --background-color-checked: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-resting-color);
+  --border-color: var(--wa-form-control-border-color);
   --border-color-checked: var(--background-color-checked);
   --border-style: var(--wa-form-control-border-style);
   --border-width: var(--wa-form-control-border-width);
   --box-shadow: initial;
   --height: calc(1em * var(--wa-form-control-value-line-height));
-  --thumb-color: var(--wa-form-control-resting-color);
+  --thumb-color: var(--wa-form-control-border-color);
   --thumb-color-checked: var(--wa-form-control-background-color);
   --thumb-shadow: initial;
   --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);

src/components/switch/switch.test.ts

@@ -20,8 +20,7 @@ describe('<wa-switch>', () => {
         const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
 
         expect(el.name).to.equal(null);
-        // TODO - fix default value
-        // expect(el.value).to.be.null;
+        expect(el.value).to.equal('on');
         expect(el.title).to.equal('');
         expect(el.disabled).to.be.false;
         expect(el.required).to.be.false;
@@ -138,10 +137,7 @@ describe('<wa-switch>', () => {
       });
 
       describe('when submitting a form', () => {
-        //
-        // TODO - this test should pass, so this is likely a bug in the component
-        //
-        it.skip('should submit the correct value when a value is provided', async () => {
+        it('should submit the correct value when a value is provided', async () => {
           const form = await fixture<HTMLFormElement>(html`
             <form>
               <wa-switch name="a" value="1" checked></wa-switch>
@@ -215,10 +211,7 @@ describe('<wa-switch>', () => {
           expect(waSwitch.checkValidity()).to.be.true;
         });
 
-        //
-        // TODO - this test should pass, so this is likely a bug in the component
-        //
-        it.skip('should be present in form data when using the form attribute and located outside of a <form>', async () => {
+        it('should be present in form data when using the form attribute and located outside of a <form>', async () => {
           const el = await fixture<HTMLFormElement>(html`
             <div>
               <form id="f">

src/components/switch/switch.ts

@@ -11,7 +11,7 @@ import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './switch.css';
@@ -212,16 +212,11 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
 
   setValue(value: string | File | FormData | null, stateValue?: string | File | FormData | null | undefined): void {
     if (!this.checked) {
-      this.value = null;
       this.internals.setFormValue(null, null);
       return;
     }
 
-    if (!value) {
-      value = 'on';
-    }
-
-    this.internals.setFormValue(value, stateValue);
+    this.internals.setFormValue(value ?? 'on', stateValue);
   }
 
   formResetCallback(): void {

src/components/textarea/textarea.ts

@@ -1,4 +1,5 @@
-import { html, type PropertyValues } from 'lit';
+import type { PropertyValues } from 'lit';
+import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -10,7 +11,7 @@ import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/input.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
@@ -272,7 +273,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
     this.setTextareaDimensions();
   }
 
-  protected updated(changedProperties: PropertyValues<this>) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('resize')) {
       this.setTextareaDimensions();
     }

src/components/viewport-demo/viewport-demo.ts

@@ -1,3 +1,4 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -281,14 +282,14 @@ export default class WaViewportDemo extends WebAwesomeElement {
     }
   }
 
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
+  updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('iframe')) {
+    if (changedProperties.has('iframe' as keyof WaViewportDemo)) {
       this.observeResize();
     }
 
-    if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p))) {
+    if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p as keyof WaViewportDemo))) {
       this.updateZoom();
     }
 

src/internal/test/form-control-base-tests.ts

@@ -2,7 +2,7 @@ import { aTimeout, expect } from '@open-wc/testing';
 import { html, type TemplateResult } from 'lit';
 import { html as staticHTML, unsafeStatic } from 'lit/static-html.js';
 import { clickOnElement } from '../test.js';
-import type { WebAwesomeFormControl } from '../webawesome-element.js';
+import type { WebAwesomeFormControl } from '../webawesome-formassociated-element.js';
 import type { clientFixture, hydratedFixture } from './fixture.js';
 import { fixtures } from './fixture.js';
 

src/internal/validators/custom-error-validator.ts

@@ -1,4 +1,4 @@
-import type { Validator } from '../webawesome-element.js';
+import type { Validator } from '../webawesome-formassociated-element.js';
 
 /**
  * This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing

src/internal/validators/mirror-validator.ts

@@ -1,4 +1,4 @@
-import type { Validator } from '../webawesome-element.js';
+import type { Validator } from '../webawesome-formassociated-element.js';
 
 /**
  * This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing

src/internal/validators/required-validator.ts

@@ -1,4 +1,4 @@
-import type { Validator } from '../webawesome-element.js';
+import type { Validator } from '../webawesome-formassociated-element.js';
 
 export interface RequiredValidatorOptions {
   /** This is a cheap way for us to get translation strings for the user without having proper translations. */

src/internal/webawesome-element.ts

@@ -1,9 +1,19 @@
-import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit';
+import { CSSStyleObserver } from '@bramus/style-observer';
+import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
 import { LitElement, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
-import { WaInvalidEvent } from '../events/invalid.js';
 import componentStyles from '../styles/shadow/component.css';
-import { CustomErrorValidator } from './validators/custom-error-validator.js';
+import { getComputedStyle } from './computedStyle.js';
+
+// Augment Lit's module
+declare module 'lit' {
+  interface PropertyDeclaration {
+    /**
+     * Indicates whether the property should reflect to a CSS custom property.
+     */
+    cssProperty?: true | string;
+  }
+}
 
 export default class WebAwesomeElement extends LitElement {
   constructor() {
@@ -54,6 +64,18 @@ export default class WebAwesomeElement extends LitElement {
 
   internals: ElementInternals;
 
+  #computedStyle: CSSStyleDeclaration | null;
+  #setVia: Record<PropertyKey, 'css' | 'attribute' | 'js'> = {};
+  #setting = new Set<PropertyKey>();
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // FIXME this is currently static.
+    // It will only update when the element is connected, not when a relevant CSS property changes.
+    this.updateCSSProperties();
+  }
+
   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
     if (!this.#hasRecordedInitialProperties) {
       (this.constructor as typeof WebAwesomeElement).elementProperties.forEach(
@@ -113,6 +135,21 @@ export default class WebAwesomeElement extends LitElement {
     }
   }
 
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    let Self = this.constructor as typeof WebAwesomeElement;
+
+    if (Self.cssAttributeProperties.size > 0) {
+      for (let [name] of changedProperties) {
+        if (typeof name === 'string' && this.#setVia[name] === 'css' && !this.#setting.has(name)) {
+          // A property is being set via JS and it’s NOT because we're reflecting a CSS property
+          this.#setVia[name] = 'js';
+        }
+      }
+    }
+  }
+
   /** Checks if states are supported by the element */
   private hasStatesSupport(): boolean {
     return Boolean(this.internals?.states);
@@ -150,385 +187,69 @@ export default class WebAwesomeElement extends LitElement {
   hasCustomState(state: string): boolean {
     return this.hasStatesSupport() ? this.internals.states.has(state) : false;
   }
-}
 
-export interface Validator<T extends WebAwesomeFormAssociatedElement = WebAwesomeFormAssociatedElement> {
-  observedAttributes?: string[];
-  checkValidity: (element: T) => {
-    message: string;
-    isValid: boolean;
-    invalidKeys: Exclude<keyof ValidityState, 'valid'>[];
-  };
-  message?: string | ((element: T) => string);
-}
-
-export interface WebAwesomeFormControl extends WebAwesomeElement {
-  // Form attributes
-  name: null | string;
-  disabled?: boolean;
-  defaultValue?: unknown;
-  defaultChecked?: boolean;
-  checked?: boolean;
-  defaultSelected?: boolean;
-  selected?: boolean;
-  form?: string | null;
-
-  value?: unknown;
-
-  // Constraint validation attributes
-  pattern?: string;
-  min?: number | string | Date;
-  max?: number | string | Date;
-  step?: number | 'any';
-  required?: boolean;
-  minlength?: number;
-  maxlength?: number;
-
-  // Form validation properties
-  readonly validity: ValidityState;
-  readonly validationMessage: string;
-
-  // Form validation methods
-  checkValidity: () => boolean;
-  getForm: () => HTMLFormElement | null;
-  reportValidity: () => boolean;
-  setCustomValidity: (message: string) => void;
-
-  // Form properties
-  hasInteracted: boolean;
-  valueHasChanged?: boolean;
-
-  /** Convenience API for `setCustomValidity()` */
-  customError: null | string;
-}
-
-// setFormValue omitted so that we can use `setValue`
-export class WebAwesomeFormAssociatedElement
-  extends WebAwesomeElement
-  implements Omit<ElementInternals, 'form' | 'setFormValue'>, WebAwesomeFormControl
-{
-  static formAssociated = true;
-
-  /**
-   * Validators are static because they have `observedAttributes`, essentially attributes to "watch"
-   * for changes. Whenever these attributes change, we want to be notified and update the validator.
-   */
-  static get validators(): Validator[] {
-    return [CustomErrorValidator()];
-  }
-
-  // Append all Validator "observedAttributes" into the "observedAttributes" so they can run.
-  static get observedAttributes() {
-    const parentAttrs = new Set(super.observedAttributes || []);
-
-    for (const validator of this.validators) {
-      if (!validator.observedAttributes) {
-        continue;
-      }
-
-      for (const attr of validator.observedAttributes) {
-        parentAttrs.add(attr);
-      }
+  protected updateCSSProperties() {
+    const Self = this.constructor as typeof WebAwesomeElement;
+    if (Self.cssAttributeProperties.size === 0) {
+      return;
     }
 
-    return [...parentAttrs];
-  }
-
-  // Form attributes
-  /** The name of the input, submitted as a name/value pair with form data. */
-  @property({ reflect: true }) name: string | null = null;
-
-  /** Disables the form control. */
-  @property({ type: Boolean }) disabled = false;
-
-  required: boolean = false;
-
-  assumeInteractionOn: string[] = ['wa-input'];
-
-  // Additional
-  input?: (HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement;
-
-  validators: Validator[] = [];
-
-  // Should these be private?
-  @property({ state: true, attribute: false }) valueHasChanged: boolean = false;
-  @property({ state: true, attribute: false }) hasInteracted: boolean = false;
-
-  // This works around a limitation in Safari. It is a hacky way for us to preserve custom errors generated by the user.
-  @property({ attribute: 'custom-error', reflect: true }) customError: string | null = null;
-
-  private emittedEvents: string[] = [];
-
-  constructor() {
-    super();
-
-    if (!isServer) {
-      // eslint-disable-next-line
-      this.addEventListener('invalid', this.emitInvalid);
-    }
-  }
-  states: CustomStateSet;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateValidity();
-
-    // Lazily evaluate after the constructor to allow people to override the `assumeInteractionOn`
-    this.assumeInteractionOn.forEach(event => {
-      this.addEventListener(event, this.handleInteraction);
-    });
-  }
-
-  firstUpdated(...args: Parameters<LitElement['firstUpdated']>) {
-    super.firstUpdated(...args);
-    this.updateValidity();
-  }
-
-  emitInvalid = (e: Event) => {
-    if (e.target !== this) return;
-
-    // An "invalid" event counts as interacted, this is usually triggered by a button "submitting"
-    this.hasInteracted = true;
-    this.dispatchEvent(new WaInvalidEvent());
-  };
-
-  protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]) {
-    if (!isServer && changedProperties.has('customError')) {
-      // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
-      if (!this.customError) {
-        this.customError = null;
-      }
-      this.setCustomValidity(this.customError || '');
-    }
-
-    if (changedProperties.has('value') || changedProperties.has('disabled')) {
-      // @ts-expect-error Some components will use an accessors, other use a property, so we dont want to limit them.
-      const value = this.value as unknown;
-
-      // Accounts for the snowflake case on `<wa-select>`
-      if (Array.isArray(value)) {
-        if (this.name) {
-          const formData = new FormData();
-          for (const val of value) {
-            formData.append(this.name, val as string);
-          }
-          this.setValue(formData, formData);
+    if (!Self.styleObserver) {
+      // First time, init stuff
+      // First, replace `true` with actual CSS property names
+      for (let [name, cssProperty] of Self.cssAttributeProperties) {
+        if (cssProperty === true) {
+          // Default name
+          cssProperty = `--${this.tagName.toLowerCase()}-${name}`;
+          Self.cssAttributeProperties.set(name, cssProperty);
+        }
+      }
+      // Then we observe them
+      let cssProperties = [...Self.cssAttributeProperties.values()] as string[];
+
+      Self.styleObserver = new CSSStyleObserver(cssProperties, (...args) => {
+        console.log(...args);
+        this.updateCSSProperties();
+      });
+    }
+
+    this.#computedStyle ??= getComputedStyle(this);
+
+    const tagName = this.tagName.toLowerCase();
+    for (let [name, cssProperty] of Self.cssAttributeProperties) {
+      if (typeof name === 'string' && !this.hasAttribute(name) && this.#setVia[name] !== 'js') {
+        // Check if supplied as a CSS custom property
+        // TODO !important should override attribute values
+        cssProperty = cssProperty === true ? `--${tagName}-${name}` : cssProperty;
+        const value = this.#computedStyle?.getPropertyValue(cssProperty);
+
+        if (value && value !== 'auto') {
+          this.#setVia[name] = 'css';
+          this.#setting.add(name);
+          // @ts-ignore
+          this[name] = value.trim();
+          this.updateComplete.then(() => {
+            this.#setting.delete(name);
+          });
         }
-      } else {
-        this.setValue(value as FormData | string | File | null, value as FormData | string | File | null);
       }
     }
-
-    if (changedProperties.has('disabled')) {
-      this.toggleCustomState('disabled', this.disabled);
-
-      if (this.hasAttribute('disabled') || (!isServer && !this.matches(':disabled'))) {
-        this.toggleAttribute('disabled', this.disabled);
-      }
-    }
-
-    this.updateValidity();
-    super.willUpdate(changedProperties);
   }
 
-  private handleInteraction = (event: Event) => {
-    const emittedEvents = this.emittedEvents;
-    if (!emittedEvents.includes(event.type)) {
-      emittedEvents.push(event.type);
-    }
+  // Subclasses will get their own copy automagically (see below)
+  protected static cssAttributeProperties = new Map<PropertyKey, true | string>();
+  protected static styleObserver: CSSStyleObserver | undefined;
 
-    // Mark it as user-interacted as soon as all associated events have been emitted
-    if (emittedEvents.length === this.assumeInteractionOn?.length) {
-      this.hasInteracted = true;
-    }
-  };
+  static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
+    super.createProperty(name, options);
 
-  get labels() {
-    return this.internals.labels;
-  }
-
-  getForm() {
-    return this.internals.form;
-  }
-
-  @property({ attribute: false, state: true, type: Object })
-  get validity() {
-    return this.internals.validity;
-  }
-
-  // Not sure if this supports `novalidate`. Will need to test.
-  get willValidate() {
-    return this.internals.willValidate;
-  }
-
-  get validationMessage() {
-    return this.internals.validationMessage;
-  }
-
-  checkValidity() {
-    this.updateValidity();
-    return this.internals.checkValidity();
-  }
-
-  reportValidity() {
-    this.updateValidity();
-    // This seems reasonable. `reportValidity()` is kind of like "we expect you to have interacted"
-    this.hasInteracted = true;
-    return this.internals.reportValidity();
-  }
-
-  /**
-   * Override this to change where constraint validation popups are anchored.
-   */
-  get validationTarget(): undefined | HTMLElement {
-    return (this.input || undefined) as undefined | HTMLElement;
-  }
-
-  setValidity(...args: Parameters<typeof this.internals.setValidity>) {
-    const flags = args[0];
-    const message = args[1];
-    let anchor = args[2];
-
-    if (!anchor) {
-      anchor = this.validationTarget;
-    }
-
-    this.internals.setValidity(flags, message, anchor || undefined);
-    this.requestUpdate('validity');
-    this.setCustomStates();
-  }
-
-  setCustomStates() {
-    const required = Boolean(this.required);
-    const isValid = this.internals.validity.valid;
-    const hasInteracted = this.hasInteracted;
-
-    this.toggleCustomState('required', required);
-    this.toggleCustomState('optional', !required);
-    this.toggleCustomState('invalid', !isValid);
-    this.toggleCustomState('valid', isValid);
-    this.toggleCustomState('user-invalid', !isValid && hasInteracted);
-    this.toggleCustomState('user-valid', isValid && hasInteracted);
-  }
-
-  /**
-   * Do not use this when creating a "Validator". This is intended for end users of components.
-   * We track manually defined custom errors so we don't clear them on accident in our validators.
-   *
-   */
-  setCustomValidity(message: string) {
-    if (!message) {
-      // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
-      this.customError = null;
-      this.setValidity({});
-      return;
-    }
-
-    this.customError = message;
-    this.setValidity({ customError: true }, message, this.validationTarget);
-  }
-
-  formResetCallback() {
-    this.resetValidity();
-    this.hasInteracted = false;
-    this.valueHasChanged = false;
-    this.emittedEvents = [];
-    this.updateValidity();
-  }
-
-  formDisabledCallback(isDisabled: boolean) {
-    this.disabled = isDisabled;
-
-    this.updateValidity();
-  }
-
-  /**
-   * Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when
-   * the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of
-   * "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.
-   */
-  formStateRestoreCallback(state: string | File | FormData | null, reason: 'autocomplete' | 'restore') {
-    // @ts-expect-error We purposely do not have a value property. It makes things hard to extend.
-    this.value = state;
-
-    if (reason === 'restore') {
-      this.resetValidity();
-    }
-
-    this.updateValidity();
-  }
-
-  setValue(...args: Parameters<typeof this.internals.setFormValue>) {
-    const [value, state] = args;
-
-    this.internals.setFormValue(value, state);
-  }
-
-  get allValidators() {
-    const staticValidators = (this.constructor as typeof WebAwesomeFormAssociatedElement).validators || [];
-
-    const validators = this.validators || [];
-    return [...staticValidators, ...validators];
-  }
-
-  /**
-   * Reset validity is a way of removing manual custom errors and native validation.
-   */
-  resetValidity() {
-    this.setCustomValidity('');
-    this.setValidity({});
-  }
-
-  updateValidity() {
-    if (
-      this.disabled ||
-      this.hasAttribute('disabled') ||
-      !this.willValidate //
-    ) {
-      this.resetValidity();
-
-      return;
-    }
-
-    const validators = this.allValidators;
-
-    if (!validators?.length) {
-      // If there's no validators, we do nothing. We also don't want to mess with custom errors, so we just stop here.
-      return;
-    }
-
-    type ValidityKey = { -readonly [P in keyof ValidityState]: ValidityState[P] };
-
-    const flags: Partial<ValidityKey> = {
-      // Don't trust custom errors from the Browser. Safari breaks the spec.
-      customError: Boolean(this.customError),
-    };
-
-    const formControl = this.validationTarget || this.input || undefined;
-
-    let finalMessage = '';
-
-    for (const validator of validators) {
-      const { isValid, message, invalidKeys } = validator.checkValidity(this);
-
-      if (isValid) {
-        continue;
+    if (options?.cssProperty) {
+      if (this.cssAttributeProperties === WebAwesomeElement.cssAttributeProperties) {
+        // Each class needs its own, otherwise they'd share the same object
+        this.cssAttributeProperties = new Map();
       }
 
-      if (!finalMessage) {
-        finalMessage = message;
-      }
-
-      if (invalidKeys?.length >= 0) {
-        (invalidKeys as (keyof ValidityState)[]).forEach(str => (flags[str] = true));
-      }
+      this.cssAttributeProperties.set(name, options.cssProperty);
     }
-
-    // This is a workaround for preserving custom errors
-    if (!finalMessage) {
-      finalMessage = this.validationMessage;
-    }
-
-    this.setValidity(flags, finalMessage, formControl);
   }
 }

src/internal/webawesome-formassociated-element.ts

@@ -0,0 +1,386 @@
+import { LitElement, isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import { WaInvalidEvent } from '../events/invalid.js';
+import { CustomErrorValidator } from './validators/custom-error-validator.js';
+import WebAwesomeElement from './webawesome-element.js';
+
+export interface Validator<T extends WebAwesomeFormAssociatedElement = WebAwesomeFormAssociatedElement> {
+  observedAttributes?: string[];
+  checkValidity: (element: T) => {
+    message: string;
+    isValid: boolean;
+    invalidKeys: Exclude<keyof ValidityState, 'valid'>[];
+  };
+  message?: string | ((element: T) => string);
+}
+
+export interface WebAwesomeFormControl extends WebAwesomeElement {
+  // Form attributes
+  name: null | string;
+  disabled?: boolean;
+  defaultValue?: unknown;
+  defaultChecked?: boolean;
+  checked?: boolean;
+  defaultSelected?: boolean;
+  selected?: boolean;
+  form?: string | null;
+
+  value?: unknown;
+
+  // Constraint validation attributes
+  pattern?: string;
+  min?: number | string | Date;
+  max?: number | string | Date;
+  step?: number | 'any';
+  required?: boolean;
+  minlength?: number;
+  maxlength?: number;
+
+  // Form validation properties
+  readonly validity: ValidityState;
+  readonly validationMessage: string;
+
+  // Form validation methods
+  checkValidity: () => boolean;
+  getForm: () => HTMLFormElement | null;
+  reportValidity: () => boolean;
+  setCustomValidity: (message: string) => void;
+
+  // Form properties
+  hasInteracted: boolean;
+  valueHasChanged?: boolean;
+
+  /** Convenience API for `setCustomValidity()` */
+  customError: null | string;
+}
+
+// setFormValue omitted so that we can use `setValue`
+export class WebAwesomeFormAssociatedElement
+  extends WebAwesomeElement
+  implements Omit<ElementInternals, 'form' | 'setFormValue'>, WebAwesomeFormControl
+{
+  static formAssociated = true;
+
+  /**
+   * Validators are static because they have `observedAttributes`, essentially attributes to "watch"
+   * for changes. Whenever these attributes change, we want to be notified and update the validator.
+   */
+  static get validators(): Validator[] {
+    return [CustomErrorValidator()];
+  }
+
+  // Append all Validator "observedAttributes" into the "observedAttributes" so they can run.
+  static get observedAttributes() {
+    const parentAttrs = new Set(super.observedAttributes || []);
+
+    for (const validator of this.validators) {
+      if (!validator.observedAttributes) {
+        continue;
+      }
+
+      for (const attr of validator.observedAttributes) {
+        parentAttrs.add(attr);
+      }
+    }
+
+    return [...parentAttrs];
+  }
+
+  // Form attributes
+  /** The name of the input, submitted as a name/value pair with form data. */
+  @property({ reflect: true }) name: string | null = null;
+
+  /** Disables the form control. */
+  @property({ type: Boolean }) disabled = false;
+
+  required: boolean = false;
+
+  assumeInteractionOn: string[] = ['wa-input'];
+
+  // Additional
+  input?: (HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement;
+
+  validators: Validator[] = [];
+
+  // Should these be private?
+  @property({ state: true, attribute: false }) valueHasChanged: boolean = false;
+  @property({ state: true, attribute: false }) hasInteracted: boolean = false;
+
+  // This works around a limitation in Safari. It is a hacky way for us to preserve custom errors generated by the user.
+  @property({ attribute: 'custom-error', reflect: true }) customError: string | null = null;
+
+  private emittedEvents: string[] = [];
+
+  constructor() {
+    super();
+
+    if (!isServer) {
+      // eslint-disable-next-line
+      this.addEventListener('invalid', this.emitInvalid);
+    }
+  }
+  states: CustomStateSet;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateValidity();
+
+    // Lazily evaluate after the constructor to allow people to override the `assumeInteractionOn`
+    this.assumeInteractionOn.forEach(event => {
+      this.addEventListener(event, this.handleInteraction);
+    });
+  }
+
+  firstUpdated(...args: Parameters<LitElement['firstUpdated']>) {
+    super.firstUpdated(...args);
+    this.updateValidity();
+  }
+
+  emitInvalid = (e: Event) => {
+    if (e.target !== this) return;
+
+    // An "invalid" event counts as interacted, this is usually triggered by a button "submitting"
+    this.hasInteracted = true;
+    this.dispatchEvent(new WaInvalidEvent());
+  };
+
+  protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]) {
+    if (!isServer && changedProperties.has('customError')) {
+      // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
+      if (!this.customError) {
+        this.customError = null;
+      }
+      this.setCustomValidity(this.customError || '');
+    }
+
+    if (changedProperties.has('value') || changedProperties.has('disabled')) {
+      // @ts-expect-error Some components will use an accessors, other use a property, so we dont want to limit them.
+      const value = this.value as unknown;
+
+      // Accounts for the snowflake case on `<wa-select>`
+      if (Array.isArray(value)) {
+        if (this.name) {
+          const formData = new FormData();
+          for (const val of value) {
+            formData.append(this.name, val as string);
+          }
+          this.setValue(formData, formData);
+        }
+      } else {
+        this.setValue(value as FormData | string | File | null, value as FormData | string | File | null);
+      }
+    }
+
+    if (changedProperties.has('disabled')) {
+      this.toggleCustomState('disabled', this.disabled);
+
+      if (this.hasAttribute('disabled') || (!isServer && !this.matches(':disabled'))) {
+        this.toggleAttribute('disabled', this.disabled);
+      }
+    }
+
+    this.updateValidity();
+    super.willUpdate(changedProperties);
+  }
+
+  private handleInteraction = (event: Event) => {
+    const emittedEvents = this.emittedEvents;
+    if (!emittedEvents.includes(event.type)) {
+      emittedEvents.push(event.type);
+    }
+
+    // Mark it as user-interacted as soon as all associated events have been emitted
+    if (emittedEvents.length === this.assumeInteractionOn?.length) {
+      this.hasInteracted = true;
+    }
+  };
+
+  get labels() {
+    return this.internals.labels;
+  }
+
+  getForm() {
+    return this.internals.form;
+  }
+
+  @property({ attribute: false, state: true, type: Object })
+  get validity() {
+    return this.internals.validity;
+  }
+
+  // Not sure if this supports `novalidate`. Will need to test.
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+
+  checkValidity() {
+    this.updateValidity();
+    return this.internals.checkValidity();
+  }
+
+  reportValidity() {
+    this.updateValidity();
+    // This seems reasonable. `reportValidity()` is kind of like "we expect you to have interacted"
+    this.hasInteracted = true;
+    return this.internals.reportValidity();
+  }
+
+  /**
+   * Override this to change where constraint validation popups are anchored.
+   */
+  get validationTarget(): undefined | HTMLElement {
+    return (this.input || undefined) as undefined | HTMLElement;
+  }
+
+  setValidity(...args: Parameters<typeof this.internals.setValidity>) {
+    const flags = args[0];
+    const message = args[1];
+    let anchor = args[2];
+
+    if (!anchor) {
+      anchor = this.validationTarget;
+    }
+
+    this.internals.setValidity(flags, message, anchor || undefined);
+    this.requestUpdate('validity');
+    this.setCustomStates();
+  }
+
+  setCustomStates() {
+    const required = Boolean(this.required);
+    const isValid = this.internals.validity.valid;
+    const hasInteracted = this.hasInteracted;
+
+    this.toggleCustomState('required', required);
+    this.toggleCustomState('optional', !required);
+    this.toggleCustomState('invalid', !isValid);
+    this.toggleCustomState('valid', isValid);
+    this.toggleCustomState('user-invalid', !isValid && hasInteracted);
+    this.toggleCustomState('user-valid', isValid && hasInteracted);
+  }
+
+  /**
+   * Do not use this when creating a "Validator". This is intended for end users of components.
+   * We track manually defined custom errors so we don't clear them on accident in our validators.
+   *
+   */
+  setCustomValidity(message: string) {
+    if (!message) {
+      // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
+      this.customError = null;
+      this.setValidity({});
+      return;
+    }
+
+    this.customError = message;
+    this.setValidity({ customError: true }, message, this.validationTarget);
+  }
+
+  formResetCallback() {
+    this.resetValidity();
+    this.hasInteracted = false;
+    this.valueHasChanged = false;
+    this.emittedEvents = [];
+    this.updateValidity();
+  }
+
+  formDisabledCallback(isDisabled: boolean) {
+    this.disabled = isDisabled;
+
+    this.updateValidity();
+  }
+
+  /**
+   * Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when
+   * the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of
+   * "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.
+   */
+  formStateRestoreCallback(state: string | File | FormData | null, reason: 'autocomplete' | 'restore') {
+    // @ts-expect-error We purposely do not have a value property. It makes things hard to extend.
+    this.value = state;
+
+    if (reason === 'restore') {
+      this.resetValidity();
+    }
+
+    this.updateValidity();
+  }
+
+  setValue(...args: Parameters<typeof this.internals.setFormValue>) {
+    const [value, state] = args;
+
+    this.internals.setFormValue(value, state);
+  }
+
+  get allValidators() {
+    const staticValidators = (this.constructor as typeof WebAwesomeFormAssociatedElement).validators || [];
+
+    const validators = this.validators || [];
+    return [...staticValidators, ...validators];
+  }
+
+  /**
+   * Reset validity is a way of removing manual custom errors and native validation.
+   */
+  resetValidity() {
+    this.setCustomValidity('');
+    this.setValidity({});
+  }
+
+  updateValidity() {
+    if (
+      this.disabled ||
+      this.hasAttribute('disabled') ||
+      !this.willValidate //
+    ) {
+      this.resetValidity();
+
+      return;
+    }
+
+    const validators = this.allValidators;
+
+    if (!validators?.length) {
+      // If there's no validators, we do nothing. We also don't want to mess with custom errors, so we just stop here.
+      return;
+    }
+
+    type ValidityKey = { -readonly [P in keyof ValidityState]: ValidityState[P] };
+
+    const flags: Partial<ValidityKey> = {
+      // Don't trust custom errors from the Browser. Safari breaks the spec.
+      customError: Boolean(this.customError),
+    };
+
+    const formControl = this.validationTarget || this.input || undefined;
+
+    let finalMessage = '';
+
+    for (const validator of validators) {
+      const { isValid, message, invalidKeys } = validator.checkValidity(this);
+
+      if (isValid) {
+        continue;
+      }
+
+      if (!finalMessage) {
+        finalMessage = message;
+      }
+
+      if (invalidKeys?.length >= 0) {
+        (invalidKeys as (keyof ValidityState)[]).forEach(str => (flags[str] = true));
+      }
+    }
+
+    // This is a workaround for preserving custom errors
+    if (!finalMessage) {
+      finalMessage = this.validationMessage;
+    }
+
+    this.setValidity(flags, finalMessage, formControl);
+  }
+}

src/styles/color/anodized.css

@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #ffecf9;
-  --wa-color-rose-90: #ffdcf3;
-  --wa-color-rose-80: #ffb2db;
-  --wa-color-rose-70: #ea95bf;
-  --wa-color-rose-60: #ca7da3;
-  --wa-color-rose-50: #a36282;
-  --wa-color-rose-40: #7c4963;
-  --wa-color-rose-30: #63384e;
-  --wa-color-rose-20: #492839;
-  --wa-color-rose-10: #2d1722;
-  --wa-color-rose-05: #1d0d15;
-
   --wa-color-red-95: #fbeeeb;
   --wa-color-red-90: #f8e0d9;
   --wa-color-red-80: #efbdb1;
@@ -36,18 +24,6 @@
   --wa-color-yellow-10: #2c1912;
   --wa-color-yellow-05: #1d0e0a;
 
-  --wa-color-lime-95: #defe88;
-  --wa-color-lime-90: #d1f376;
-  --wa-color-lime-80: #b0d65f;
-  --wa-color-lime-70: #95bc54;
-  --wa-color-lime-60: #7ba04a;
-  --wa-color-lime-50: #5e803c;
-  --wa-color-lime-40: #45612c;
-  --wa-color-lime-30: #354c21;
-  --wa-color-lime-20: #253716;
-  --wa-color-lime-10: #15210b;
-  --wa-color-lime-05: #0b1405;
-
   --wa-color-green-95: #dcf8ea;
   --wa-color-green-90: #bcf1d8;
   --wa-color-green-80: #6dddad;
@@ -72,18 +48,6 @@
   --wa-color-teal-10: #04221f;
   --wa-color-teal-05: #021513;
 
-  --wa-color-gray-95: #f1f2f4;
-  --wa-color-gray-90: #e2e5e8;
-  --wa-color-gray-80: #c2c9d0;
-  --wa-color-gray-70: #a6b0ba;
-  --wa-color-gray-60: #8897a3;
-  --wa-color-gray-50: #657888;
-  --wa-color-gray-40: #435c6f;
-  --wa-color-gray-30: #2d485d;
-  --wa-color-gray-20: #18354a;
-  --wa-color-gray-10: #012034;
-  --wa-color-gray-05: #001421;
-
   --wa-color-blue-95: #ecf3ff;
   --wa-color-blue-90: #d9e7ff;
   --wa-color-blue-80: #abcaff;
@@ -119,4 +83,16 @@
   --wa-color-violet-20: #561658;
   --wa-color-violet-10: #340d36;
   --wa-color-violet-05: #210822;
+
+  --wa-color-gray-95: #f1f2f4;
+  --wa-color-gray-90: #e2e5e8;
+  --wa-color-gray-80: #c2c9d0;
+  --wa-color-gray-70: #a6b0ba;
+  --wa-color-gray-60: #8897a3;
+  --wa-color-gray-50: #657888;
+  --wa-color-gray-40: #435c6f;
+  --wa-color-gray-30: #2d485d;
+  --wa-color-gray-20: #18354a;
+  --wa-color-gray-10: #012034;
+  --wa-color-gray-05: #001421;
 }

src/styles/color/bright.css

@@ -1,64 +1,40 @@
 :root,
 :host {
-  --wa-color-rose-95: #fdeef4;
-  --wa-color-rose-90: #fddde9;
-  --wa-color-rose-80: #fbb6cf;
-  --wa-color-rose-70: #f88fb4;
-  --wa-color-rose-60: #ea6997;
-  --wa-color-rose-50: #ca4171;
-  --wa-color-rose-40: #a7204f;
-  --wa-color-rose-30: #85183e;
-  --wa-color-rose-20: #60112d;
-  --wa-color-rose-10: #3b0b1c;
-  --wa-color-rose-05: #240611;
+  --wa-color-red-95: #ffefef;
+  --wa-color-red-90: #ffdddd;
+  --wa-color-red-80: #ffb7b7;
+  --wa-color-red-70: #ff8e8e;
+  --wa-color-red-60: #fd5f5f;
+  --wa-color-red-50: #de3131;
+  --wa-color-red-40: #b40917;
+  --wa-color-red-30: #910000;
+  --wa-color-red-20: #6d0000;
+  --wa-color-red-10: #450000;
+  --wa-color-red-05: #300000;
 
-  --wa-color-red-95: #ffeeef;
-  --wa-color-red-90: #fdd;
-  --wa-color-red-80: #ffb2b2;
-  --wa-color-red-70: #ff8585;
-  --wa-color-red-60: #ff5c5c;
-  --wa-color-red-50: #e12124;
-  --wa-color-red-40: #aa1d00;
-  --wa-color-red-30: #8a0b00;
-  --wa-color-red-20: #700000;
-  --wa-color-red-10: #46000c;
-  --wa-color-red-05: #2e0008;
+  --wa-color-yellow-95: #fef3c1;
+  --wa-color-yellow-90: #fee682;
+  --wa-color-yellow-80: #fbc217;
+  --wa-color-yellow-70: #f39b00;
+  --wa-color-yellow-60: #e67700;
+  --wa-color-yellow-50: #b75d00;
+  --wa-color-yellow-40: #8c4600;
+  --wa-color-yellow-30: #6f3600;
+  --wa-color-yellow-20: #532600;
+  --wa-color-yellow-10: #341500;
+  --wa-color-yellow-05: #220c00;
 
-  --wa-color-yellow-95: #fff3bf;
-  --wa-color-yellow-90: #f8e695;
-  --wa-color-yellow-80: #eec637;
-  --wa-color-yellow-70: #d8a815;
-  --wa-color-yellow-60: #ce8500;
-  --wa-color-yellow-50: #aa6300;
-  --wa-color-yellow-40: #824c00;
-  --wa-color-yellow-30: #663b00;
-  --wa-color-yellow-20: #492b00;
-  --wa-color-yellow-10: #2c1a00;
-  --wa-color-yellow-05: #1b0e00;
-
-  --wa-color-lime-95: #e8f9c7;
-  --wa-color-lime-90: #d2f19c;
-  --wa-color-lime-80: #9edc41;
-  --wa-color-lime-70: #7dc11d;
-  --wa-color-lime-60: #68a514;
-  --wa-color-lime-50: #50810b;
-  --wa-color-lime-40: #3a630c;
-  --wa-color-lime-30: #2b4e0b;
-  --wa-color-lime-20: #1e3808;
-  --wa-color-lime-10: #122206;
-  --wa-color-lime-05: #081404;
-
-  --wa-color-green-95: #dbfadf;
-  --wa-color-green-90: #bbf3c3;
-  --wa-color-green-80: #79df8a;
-  --wa-color-green-70: #4dc661;
-  --wa-color-green-60: #35aa4a;
-  --wa-color-green-50: #298539;
-  --wa-color-green-40: #20652d;
-  --wa-color-green-30: #165025;
-  --wa-color-green-20: #0d391c;
-  --wa-color-green-10: #062312;
-  --wa-color-green-05: #03140c;
+  --wa-color-green-95: #e0fae4;
+  --wa-color-green-90: #baf4c2;
+  --wa-color-green-80: #73e085;
+  --wa-color-green-70: #46c65c;
+  --wa-color-green-60: #33aa49;
+  --wa-color-green-50: #2a863c;
+  --wa-color-green-40: #20662e;
+  --wa-color-green-30: #194f24;
+  --wa-color-green-20: #123a1a;
+  --wa-color-green-10: #0b2210;
+  --wa-color-green-05: #07150a;
 
   --wa-color-teal-95: #cafae6;
   --wa-color-teal-90: #aaf3d7;
@@ -72,51 +48,51 @@
   --wa-color-teal-10: #00312b;
   --wa-color-teal-05: #001613;
 
-  --wa-color-blue-95: #e4f1ff;
-  --wa-color-blue-90: #cee6ff;
-  --wa-color-blue-80: #96ccff;
-  --wa-color-blue-70: #53b4ff;
-  --wa-color-blue-60: #349bf1;
-  --wa-color-blue-50: #0079cd;
-  --wa-color-blue-40: #005aa8;
-  --wa-color-blue-30: #00458c;
-  --wa-color-blue-20: #003073;
-  --wa-color-blue-10: #00175c;
-  --wa-color-blue-05: #000e39;
+  --wa-color-blue-95: #e7f5ff;
+  --wa-color-blue-90: #ceeaff;
+  --wa-color-blue-80: #94d0fe;
+  --wa-color-blue-70: #60b5f9;
+  --wa-color-blue-60: #3299f0;
+  --wa-color-blue-50: #1a77cc;
+  --wa-color-blue-40: #165a9b;
+  --wa-color-blue-30: #11477a;
+  --wa-color-blue-20: #0d3459;
+  --wa-color-blue-10: #071f35;
+  --wa-color-blue-05: #051321;
 
-  --wa-color-indigo-95: #f4f0fe;
-  --wa-color-indigo-90: #e9e2fe;
-  --wa-color-indigo-80: #d0c1fc;
-  --wa-color-indigo-70: #b8a2fa;
-  --wa-color-indigo-60: #9f81f9;
-  --wa-color-indigo-50: #7d59ea;
-  --wa-color-indigo-40: #5f3dc4;
-  --wa-color-indigo-30: #4b309b;
-  --wa-color-indigo-20: #36236f;
-  --wa-color-indigo-10: #211543;
-  --wa-color-indigo-05: #130c27;
+  --wa-color-indigo-95: #edf2ff;
+  --wa-color-indigo-90: #dce5ff;
+  --wa-color-indigo-80: #bac8ff;
+  --wa-color-indigo-70: #96abff;
+  --wa-color-indigo-60: #738efc;
+  --wa-color-indigo-50: #486af1;
+  --wa-color-indigo-40: #354dc3;
+  --wa-color-indigo-30: #293c98;
+  --wa-color-indigo-20: #1e2c70;
+  --wa-color-indigo-10: #121a43;
+  --wa-color-indigo-05: #0b102a;
 
-  --wa-color-violet-95: #fbeefe;
-  --wa-color-violet-90: #f6defc;
-  --wa-color-violet-80: #ecb8f8;
-  --wa-color-violet-70: #e191f4;
-  --wa-color-violet-60: #cd70e3;
-  --wa-color-violet-50: #a84ebe;
-  --wa-color-violet-40: #892f9f;
-  --wa-color-violet-30: #6c257e;
-  --wa-color-violet-20: #4e1b5a;
-  --wa-color-violet-10: #2f1037;
-  --wa-color-violet-05: #1c0920;
+  --wa-color-violet-95: #f3f0ff;
+  --wa-color-violet-90: #eae2ff;
+  --wa-color-violet-80: #d1c0ff;
+  --wa-color-violet-70: #b8a0fd;
+  --wa-color-violet-60: #a080fb;
+  --wa-color-violet-50: #7f57f5;
+  --wa-color-violet-40: #603dc7;
+  --wa-color-violet-30: #4c309c;
+  --wa-color-violet-20: #372372;
+  --wa-color-violet-10: #211544;
+  --wa-color-violet-05: #150d2a;
 
-  --wa-color-gray-95: #f1f2f5;
-  --wa-color-gray-90: #e3e6eb;
-  --wa-color-gray-80: #c5cad4;
-  --wa-color-gray-70: #a8afbf;
-  --wa-color-gray-60: #8b95aa;
-  --wa-color-gray-50: #677490;
-  --wa-color-gray-40: #4a5877;
-  --wa-color-gray-30: #3a455d;
-  --wa-color-gray-20: #2a3142;
-  --wa-color-gray-10: #191e28;
-  --wa-color-gray-05: #0e1117;
+  --wa-color-gray-95: #f1f2f4;
+  --wa-color-gray-90: #e3e5ea;
+  --wa-color-gray-80: #c7cad4;
+  --wa-color-gray-70: #a9afbe;
+  --wa-color-gray-60: #8d95a8;
+  --wa-color-gray-50: #6a7591;
+  --wa-color-gray-40: #4b5977;
+  --wa-color-gray-30: #344566;
+  --wa-color-gray-20: #1a3356;
+  --wa-color-gray-10: #0e1e35;
+  --wa-color-gray-05: #081220;
 }

src/styles/color/classic.css

@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #fdeff0;
-  --wa-color-rose-90: #fadfe1;
-  --wa-color-rose-80: #ecbec4;
-  --wa-color-rose-70: #eb98a2;
-  --wa-color-rose-60: #ed6b7e;
-  --wa-color-rose-50: #d53752;
-  --wa-color-rose-40: #ae1638;
-  --wa-color-rose-30: #8b0d2c;
-  --wa-color-rose-20: #620e30;
-  --wa-color-rose-10: #3d0919;
-  --wa-color-rose-05: #29030d;
-
   --wa-color-red-95: #feeeee;
   --wa-color-red-90: #fedede;
   --wa-color-red-80: #fdb8b8;
@@ -36,18 +24,6 @@
   --wa-color-yellow-10: #321606;
   --wa-color-yellow-05: #1f0c01;
 
-  --wa-color-lime-95: #e4fbb9;
-  --wa-color-lime-90: #c9f47f;
-  --wa-color-lime-80: #9cdc33;
-  --wa-color-lime-70: #7dc115;
-  --wa-color-lime-60: #6ba512;
-  --wa-color-lime-50: #50810a;
-  --wa-color-lime-40: #3d6208;
-  --wa-color-lime-30: #304d09;
-  --wa-color-lime-20: #23370a;
-  --wa-color-lime-10: #152108;
-  --wa-color-lime-05: #0b1302;
-
   --wa-color-green-95: #e9f5ed;
   --wa-color-green-90: #cfedd9;
   --wa-color-green-80: #a2d5b4;
@@ -108,15 +84,15 @@
   --wa-color-violet-10: #2e054e;
   --wa-color-violet-05: #1d0331;
 
-  --wa-color-gray-95: #f1f2f3;
-  --wa-color-gray-90: #e5e6e7;
-  --wa-color-gray-80: #c8c9cd;
-  --wa-color-gray-70: #acafb4;
-  --wa-color-gray-60: #8f95a0;
-  --wa-color-gray-50: #6e7482;
-  --wa-color-gray-40: #4f5967;
-  --wa-color-gray-30: #3c4655;
-  --wa-color-gray-20: #293240;
-  --wa-color-gray-10: #171d2c;
-  --wa-color-gray-05: #0d111b;
+  --wa-color-gray-95: #f2f2f3;
+  --wa-color-gray-90: #e5e5e8;
+  --wa-color-gray-80: #c9c9cc;
+  --wa-color-gray-70: #aeafb1;
+  --wa-color-gray-60: #94959b;
+  --wa-color-gray-50: #72747d;
+  --wa-color-gray-40: #565861;
+  --wa-color-gray-30: #43454d;
+  --wa-color-gray-20: #313134;
+  --wa-color-gray-10: #1d1d20;
+  --wa-color-gray-05: #101113;
 }

src/styles/color/elegant.css

@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #faeff6;
-  --wa-color-rose-90: #f5e0ed;
-  --wa-color-rose-80: #eabcd8;
-  --wa-color-rose-70: #e09ac3;
-  --wa-color-rose-60: #d476ae;
-  --wa-color-rose-50: #c54490;
-  --wa-color-rose-40: #ad0066;
-  --wa-color-rose-30: #8a0051;
-  --wa-color-rose-20: #67003d;
-  --wa-color-rose-10: #410026;
-  --wa-color-rose-05: #2a0019;
-
   --wa-color-red-95: #fdeeef;
   --wa-color-red-90: #fcdfe0;
   --wa-color-red-80: #f8b9bc;
@@ -36,18 +24,6 @@
   --wa-color-yellow-10: #2b1a02;
   --wa-color-yellow-05: #191008;
 
-  --wa-color-lime-95: #f1f3ec;
-  --wa-color-lime-90: #e3e7da;
-  --wa-color-lime-80: #c4cdb1;
-  --wa-color-lime-70: #a6b48b;
-  --wa-color-lime-60: #899c65;
-  --wa-color-lime-50: #667e36;
-  --wa-color-lime-40: #476017;
-  --wa-color-lime-30: #384c12;
-  --wa-color-lime-20: #29370d;
-  --wa-color-lime-10: #182008;
-  --wa-color-lime-05: #0e1304;
-
   --wa-color-green-95: #ecf4f1;
   --wa-color-green-90: #dae9e3;
   --wa-color-green-80: #b0d1c4;

src/styles/color/natural.css

@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #f9f0f2;
-  --wa-color-rose-90: #f3e2e7;
-  --wa-color-rose-80: #e4bfca;
-  --wa-color-rose-70: #d5a1b1;
-  --wa-color-rose-60: #c28397;
-  --wa-color-rose-50: #a76179;
-  --wa-color-rose-40: #85455b;
-  --wa-color-rose-30: #6b3448;
-  --wa-color-rose-20: #512435;
-  --wa-color-rose-10: #32131f;
-  --wa-color-rose-05: #210b13;
-
   --wa-color-red-95: #f9f0ee;
   --wa-color-red-90: #f5e2dd;
   --wa-color-red-80: #e8bfb5;
@@ -36,18 +24,6 @@
   --wa-color-yellow-10: #2a1b00;
   --wa-color-yellow-05: #1b1000;
 
-  --wa-color-lime-95: #f0f2eb;
-  --wa-color-lime-90: #e3e8da;
-  --wa-color-lime-80: #c2ccaf;
-  --wa-color-lime-70: #a6b48b;
-  --wa-color-lime-60: #8a9b68;
-  --wa-color-lime-50: #6b7c45;
-  --wa-color-lime-40: #505e2d;
-  --wa-color-lime-30: #3e4a20;
-  --wa-color-lime-20: #2c3614;
-  --wa-color-lime-10: #192008;
-  --wa-color-lime-05: #0f1404;
-
   --wa-color-green-95: #edf2ee;
   --wa-color-green-90: #dde8df;
   --wa-color-green-80: #b8cebc;

src/styles/color/rudimentary.css

@@ -1,17 +1,5 @@
 :root,
 :host {
-  --wa-color-rose-95: #ffecf8;
-  --wa-color-rose-90: #ffdcf1;
-  --wa-color-rose-80: #ffb2de;
-  --wa-color-rose-70: #fe88c4;
-  --wa-color-rose-60: #fa57a7;
-  --wa-color-rose-50: #e30084;
-  --wa-color-rose-40: #ae0068;
-  --wa-color-rose-30: #890057;
-  --wa-color-rose-20: #660043;
-  --wa-color-rose-10: #400029;
-  --wa-color-rose-05: #2c001b;
-
   --wa-color-red-95: #ffeeee;
   --wa-color-red-90: #ffdddd;
   --wa-color-red-80: #ffb6b8;
@@ -36,18 +24,6 @@
   --wa-color-yellow-10: #311613;
   --wa-color-yellow-05: #1f0d0b;
 
-  --wa-color-lime-95: #daff92;
-  --wa-color-lime-90: #c1f759;
-  --wa-color-lime-80: #9bdc1a;
-  --wa-color-lime-70: #7ec200;
-  --wa-color-lime-60: #60a600;
-  --wa-color-lime-50: #3e8600;
-  --wa-color-lime-40: #216600;
-  --wa-color-lime-30: #135100;
-  --wa-color-lime-20: #083b00;
-  --wa-color-lime-10: #022400;
-  --wa-color-lime-05: #011600;
-
   --wa-color-green-95: #dafadc;
   --wa-color-green-90: #b9f4bc;
   --wa-color-green-80: #64e177;

src/styles/color/standard.css

@@ -1,86 +0,0 @@
-: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-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-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-blue-95: #e8f3ff;
-  --wa-color-blue-90: #d1e8ff;
-  --wa-color-blue-80: #9fceff;
-  --wa-color-blue-70: #6eb3ff;
-  --wa-color-blue-60: #3e96ff;
-  --wa-color-blue-50: #0071ec;
-  --wa-color-blue-40: #0053c0;
-  --wa-color-blue-30: #003f9c;
-  --wa-color-blue-20: #002d77;
-  --wa-color-blue-10: #001a4e;
-  --wa-color-blue-05: #000f35;
-
-  --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-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-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;
-}

src/styles/color/vogue.css

@@ -0,0 +1,98 @@
+:root,
+:host {
+  --wa-color-red-95: #feeeee;
+  --wa-color-red-90: #fedddd;
+  --wa-color-red-80: #fdb8b8;
+  --wa-color-red-70: #fb9191;
+  --wa-color-red-60: #f66565;
+  --wa-color-red-50: #e12b2b;
+  --wa-color-red-40: #af1b1b;
+  --wa-color-red-30: #851e1e;
+  --wa-color-red-20: #641414;
+  --wa-color-red-10: #400809;
+  --wa-color-red-05: #2b0404;
+
+  --wa-color-yellow-95: #fef6ab;
+  --wa-color-yellow-90: #ffe759;
+  --wa-color-yellow-80: #f3c41a;
+  --wa-color-yellow-70: #e0a502;
+  --wa-color-yellow-60: #c88804;
+  --wa-color-yellow-50: #a76706;
+  --wa-color-yellow-40: #834b0f;
+  --wa-color-yellow-30: #693910;
+  --wa-color-yellow-20: #502809;
+  --wa-color-yellow-10: #311704;
+  --wa-color-yellow-05: #1f0e02;
+
+  --wa-color-green-95: #d6fbe3;
+  --wa-color-green-90: #acf5c6;
+  --wa-color-green-80: #58e38b;
+  --wa-color-green-70: #25c861;
+  --wa-color-green-60: #17ab4e;
+  --wa-color-green-50: #158740;
+  --wa-color-green-40: #166635;
+  --wa-color-green-30: #13502b;
+  --wa-color-green-20: #093a1d;
+  --wa-color-green-10: #032311;
+  --wa-color-green-05: #02160a;
+
+  --wa-color-teal-95: #d1fbf2;
+  --wa-color-teal-90: #9bf6e4;
+  --wa-color-teal-80: #43e0ca;
+  --wa-color-teal-70: #1ac4b0;
+  --wa-color-teal-60: #0ea798;
+  --wa-color-teal-50: #0e837a;
+  --wa-color-teal-40: #11635e;
+  --wa-color-teal-30: #134d49;
+  --wa-color-teal-20: #073938;
+  --wa-color-teal-10: #022222;
+  --wa-color-teal-05: #011515;
+
+  --wa-color-blue-95: #ebf3ff;
+  --wa-color-blue-90: #d6e7fe;
+  --wa-color-blue-80: #a4cefe;
+  --wa-color-blue-70: #73b2fb;
+  --wa-color-blue-60: #4d95f9;
+  --wa-color-blue-50: #2b6df0;
+  --wa-color-blue-40: #1d4bd3;
+  --wa-color-blue-30: #1e3d9c;
+  --wa-color-blue-20: #1c2e69;
+  --wa-color-blue-10: #101b41;
+  --wa-color-blue-05: #09102c;
+
+  --wa-color-indigo-95: #eef2ff;
+  --wa-color-indigo-90: #dde5ff;
+  --wa-color-indigo-80: #bbc8fd;
+  --wa-color-indigo-70: #9caafb;
+  --wa-color-indigo-60: #818bf8;
+  --wa-color-indigo-50: #6164f0;
+  --wa-color-indigo-40: #493fd8;
+  --wa-color-indigo-30: #3932aa;
+  --wa-color-indigo-20: #2b2871;
+  --wa-color-indigo-10: #1b1842;
+  --wa-color-indigo-05: #100f29;
+
+  --wa-color-violet-95: #f7efff;
+  --wa-color-violet-90: #efe0ff;
+  --wa-color-violet-80: #dcbdfe;
+  --wa-color-violet-70: #cb99fd;
+  --wa-color-violet-60: #b875fb;
+  --wa-color-violet-50: #9e44f3;
+  --wa-color-violet-40: #7e22cd;
+  --wa-color-violet-30: #63209a;
+  --wa-color-violet-20: #4b1079;
+  --wa-color-violet-10: #2f0451;
+  --wa-color-violet-05: #1e0238;
+
+  --wa-color-gray-95: #f1f2f4;
+  --wa-color-gray-90: #e3e5e9;
+  --wa-color-gray-80: #c5cad1;
+  --wa-color-gray-70: #a9afba;
+  --wa-color-gray-60: #8e95a2;
+  --wa-color-gray-50: #6e7583;
+  --wa-color-gray-40: #505968;
+  --wa-color-gray-30: #3c4656;
+  --wa-color-gray-20: #293342;
+  --wa-color-gray-10: #161e2d;
+  --wa-color-gray-05: #0c1220;
+}

src/styles/depth/0_flat.css

@@ -1,40 +0,0 @@
-:root {
-  /**
-   * Shadows
-   * Shadow effects indicate elevation and, at times, interactivity.
-   * Elevation is defined by levels relative to the surface where the element rests -
-   *  *  Inset sits below the surface for a punched-in effect
-   *  *  Level 0 is the surface level
-   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
-   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
-   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
-   */
-  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-shadow-blur-scale: 0;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
-
-  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
-   * or transforming elements with shadows. */
-  --wa-shadow-offset-y-scale: 0;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-
-  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-color-shadow);
-  --wa-shadow-level-0: none;
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
-}

src/styles/depth/1_semiflat.css

@@ -1,40 +0,0 @@
-:root {
-  /**
-   * Shadows
-   * Shadow effects indicate elevation and, at times, interactivity.
-   * Elevation is defined by levels relative to the surface where the element rests -
-   *  *  Inset sits below the surface for a punched-in effect
-   *  *  Level 0 is the surface level
-   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
-   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
-   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
-   */
-  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-shadow-blur-scale: 0.125;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
-
-  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
-   * or transforming elements with shadows. */
-  --wa-shadow-offset-y-scale: 0.1;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-
-  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-color-shadow);
-  --wa-shadow-level-0: none;
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
-}

src/styles/depth/2_chunky.css

@@ -1,95 +0,0 @@
-:root {
-  /**
-   * Shadows
-   * Shadow effects indicate elevation and, at times, interactivity.
-   * Elevation is defined by levels relative to the surface where the element rests -
-   *  *  Inset sits below the surface for a punched-in effect
-   *  *  Level 0 is the surface level
-   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
-   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
-   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
-   */
-  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-shadow-blur-scale: 0;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
-
-  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
-   * or transforming elements with shadows. */
-  --wa-shadow-offset-y-scale: 0.25;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-
-  --wa-shadow-offset-x-scale: 0.25;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-
-  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-color-shadow);
-  --wa-shadow-level-0: none;
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
-}
-
-/* #region Buttons */
-wa-button {
-  --wa-transition-slow: 0ms;
-  --wa-transition-normal: 0ms;
-  --wa-transition-fast: 0ms;
-
-  &:not([appearance='plain']) {
-    --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
-      var(--box-shadow-color);
-    margin-bottom: var(--wa-shadow-offset-y-s);
-    margin-right: var(--wa-shadow-offset-x-s);
-
-    &:active {
-      --box-shadow: none;
-      transform: translateX(var(--wa-shadow-offset-x-s)) translateY(var(--wa-shadow-offset-y-s));
-    }
-  }
-  &[variant='brand'] {
-    --box-shadow-color: var(--wa-color-brand-border-loud);
-  }
-
-  &[variant='success'] {
-    --box-shadow-color: var(--wa-color-success-border-loud);
-  }
-
-  &[variant='neutral'] {
-    --box-shadow-color: var(--wa-color-neutral-border-loud);
-  }
-
-  &[variant='warning'] {
-    --box-shadow-color: var(--wa-color-warning-border-loud);
-  }
-
-  &[variant='danger'] {
-    --box-shadow-color: var(--wa-color-danger-border-loud);
-  }
-}
-/* #endregion */
-
-/* #region Inputs */
-wa-input,
-wa-select,
-wa-textarea {
-  &:not([appearance='filled']):not([disabled]) {
-    --box-shadow: var(--wa-shadow-xs);
-  }
-}
-/* #endregion */
-
-/* #region Progress bar */
-wa-progress-bar {
-  --box-shadow: var(--wa-shadow-xs);
-}
-/* #endregion */

src/styles/depth/3_punchy.css

@@ -1,92 +0,0 @@
-:root {
-  /**
-   * Shadows
-   * Shadow effects indicate elevation and, at times, interactivity.
-   * Elevation is defined by levels relative to the surface where the element rests -
-   *  *  Inset sits below the surface for a punched-in effect
-   *  *  Level 0 is the surface level
-   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
-   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
-   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
-   */
-  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-shadow-blur-scale: 0.125;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
-
-  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
-   * or transforming elements with shadows. */
-  --wa-shadow-offset-y-scale: 0.125;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-
-  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-color-shadow);
-  --wa-shadow-level-0: none;
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
-}
-
-/* #region Buttons */
-wa-button:not([appearance='plain']) {
-  --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
-    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
-
-  margin-bottom: var(--wa-shadow-offset-y-s);
-
-  &:not([disabled]) {
-    &:active {
-      --box-shadow: inset 0 0 0 0 transparent /* shine */,
-        inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
-        inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
-    }
-  }
-}
-/* #endregion */
-
-/* #region Inputs */
-wa-input,
-wa-select,
-wa-textarea {
-  &:not([appearance='filled']):not([disabled]) {
-    --box-shadow: var(--wa-shadow-xs);
-  }
-}
-
-wa-checkbox {
-  --background-checked: linear-gradient(
-    to bottom,
-    var(--wa-form-control-activated-color),
-    var(--wa-color-brand-border-loud)
-  );
-
-  &:not([checked]):not([indeterminate]) {
-    --box-shadow: var(--wa-shadow-xs);
-  }
-}
-
-wa-switch {
-  --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.1) /* inner highlight */,
-    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
-}
-/* #endregion */
-
-/* #region Progress bar */
-wa-progress-bar {
-  --box-shadow: var(--wa-shadow-xs);
-}
-/* #endregion */

src/styles/depth/4_glossy.css

@@ -1,296 +0,0 @@
-:root {
-  /**
-   * Shadows
-   * Shadow effects indicate elevation and, at times, interactivity.
-   * Elevation is defined by levels relative to the surface where the element rests -
-   *  *  Inset sits below the surface for a punched-in effect
-   *  *  Level 0 is the surface level
-   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
-   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
-   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
-   */
-  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-shadow-blur-scale: 0.375;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
-
-  /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
-   * or transforming elements with shadows. */
-  --wa-shadow-offset-y-scale: 0.25;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-
-  --wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-color-shadow);
-  --wa-shadow-level-0: none;
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
-
-  /**
-   * Background effects
-   */
-  --wa-background-transparency-percent: 12%;
-  --wa-filter-blur: blur(0.3125rem);
-}
-
-/* #region Alerts */
-@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
-  wa-alert {
-    &::part(base) {
-      -webkit-backdrop-filter: var(--wa-filter-blur);
-      backdrop-filter: var(--wa-filter-blur);
-    }
-
-    &[variant='brand'] {
-      --background: color-mix(
-        in oklab,
-        var(--wa-color-brand-fill-quiet),
-        transparent var(--wa-background-transparency-percent)
-      );
-    }
-
-    &[variant='success'] {
-      --background: color-mix(
-        in oklab,
-        var(--wa-color-success-fill-quiet),
-        transparent var(--wa-background-transparency-percent)
-      );
-    }
-
-    &[variant='neutral'] {
-      --background: color-mix(
-        in oklab,
-        var(--wa-color-neutral-fill-quiet),
-        transparent var(--wa-background-transparency-percent)
-      );
-    }
-
-    &[variant='warning'] {
-      --background: color-mix(
-        in oklab,
-        var(--wa-color-warning-fill-quiet),
-        transparent var(--wa-background-transparency-percent)
-      );
-    }
-
-    &[variant='danger'] {
-      --background: color-mix(
-        in oklab,
-        var(--wa-color-danger-fill-quiet),
-        transparent var(--wa-background-transparency-percent)
-      );
-    }
-  }
-}
-/* #endregion */
-
-/* #region Buttons */
-wa-button:not([appearance='plain']) {
-  --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-    inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-    inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-
-  margin-bottom: var(--wa-shadow-offset-y-xs);
-  transition: transform var(--wa-transition-fast);
-
-  &:not([disabled]) {
-    &:hover {
-      --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-        inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */, var(--wa-shadow-m) /* outer shadow */;
-    }
-
-    &:active {
-      --box-shadow: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
-        inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
-        inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
-        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */, 0 0 0 0 transparent /* outer shadow */;
-
-      transform: translateY(var(--wa-shadow-offset-y-xs));
-    }
-  }
-}
-
-wa-button:not([appearance='outlined']) {
-  &[variant='brand'] {
-    --background: linear-gradient(var(--wa-color-brand-fill-loud) 25%, var(--wa-color-brand-fill-loud));
-    --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover))
-    );
-    --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)),
-      var(--wa-color-brand-fill-loud)
-    );
-    --border-color: var(--wa-color-brand-fill-loud)
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-brand-fill-loud))
-      var(--wa-color-brand-fill-loud);
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-brand-fill-loud);
-  }
-
-  &[variant='success'] {
-    --background: linear-gradient(var(--wa-color-success-fill-loud) 25%, var(--wa-color-success-fill-loud));
-    --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover))
-    );
-    --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-active)),
-      var(--wa-color-success-fill-loud)
-    );
-    --border-color: var(--wa-color-success-fill-loud)
-      color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-success-fill-loud))
-      var(--wa-color-success-fill-loud);
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-success-fill-loud);
-  }
-
-  &[variant='neutral'] {
-    --background: linear-gradient(var(--wa-color-neutral-fill-loud) 25%, var(--wa-color-neutral-fill-loud));
-    --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover))
-    );
-    --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active)),
-      var(--wa-color-neutral-fill-loud)
-    );
-    --border-color: var(--wa-color-neutral-fill-loud)
-      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-neutral-fill-loud))
-      var(--wa-color-neutral-fill-loud);
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-neutral-fill-loud);
-  }
-
-  &[variant='warning'] {
-    --background: linear-gradient(var(--wa-color-warning-fill-loud) 25%, var(--wa-color-warning-fill-loud));
-    --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover))
-    );
-    --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-active)),
-      var(--wa-color-warning-fill-loud)
-    );
-    --border-color: var(--wa-color-warning-fill-loud)
-      color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-warning-fill-loud))
-      var(--wa-color-warning-fill-loud);
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-warning-fill-loud);
-  }
-
-  &[variant='danger'] {
-    --background: linear-gradient(var(--wa-color-danger-fill-loud) 25%, var(--wa-color-danger-fill-loud));
-    --background-hover: linear-gradient(
-      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover)) 25%,
-      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover))
-    );
-    --background-active: linear-gradient(
-      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-active)),
-      var(--wa-color-danger-fill-loud)
-    );
-    --border-color: var(--wa-color-danger-fill-loud)
-      color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-danger-fill-loud))
-      var(--wa-color-danger-fill-loud);
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--wa-color-danger-fill-loud);
-  }
-}
-/* #endregion */
-
-/* #region Cards */
-@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
-  wa-card {
-    --background: color-mix(
-      in oklab,
-      var(--wa-color-surface-raised),
-      transparent var(--wa-background-transparency-percent)
-    );
-
-    /* &::part(base) {
-      -webkit-backdrop-filter: var(--wa-filter-blur);
-      backdrop-filter: var(--wa-filter-blur);
-    } */
-    /* causes popups descendants (e.g. tooltips and dropdowns) to be mispositioned */
-  }
-}
-/* #endregion */
-
-/* #region Inputs */
-wa-input:not(:focus),
-wa-select {
-  &:not([appearance='filled']):not([disabled]) {
-    --box-shadow: var(--wa-shadow-xs), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
-      inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
-  }
-}
-
-wa-textarea:not(:focus) {
-  &:not([appearance='filled']):not([disabled]) {
-    --box-shadow: var(--wa-shadow-xs);
-  }
-}
-
-@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
-  wa-select::part(listbox) {
-    background: color-mix(
-      in oklab,
-      var(--wa-color-surface-raised),
-      transparent var(--wa-background-transparency-percent)
-    );
-    -webkit-backdrop-filter: var(--wa-filter-blur);
-    backdrop-filter: var(--wa-filter-blur);
-  }
-}
-
-wa-checkbox {
-  --background-checked: linear-gradient(
-    to bottom,
-    var(--wa-form-control-activated-color),
-    var(--wa-color-brand-border-loud)
-  );
-
-  &:not([checked]):not([indeterminate]) {
-    --box-shadow: var(--wa-shadow-xs);
-  }
-
-  &[checked] {
-    --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-  }
-}
-
-wa-switch {
-  --box-shadow: var(--wa-shadow-xs);
-  --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-    inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
-    inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-}
-/* #endregion */
-
-/* #region Progress bar */
-wa-progress-bar {
-  --box-shadow: var(--wa-shadow-xs);
-}
-/* #endregion */

src/styles/forms.css

@@ -1,5 +1,5 @@
 .wa-invalid {
-  --wa-form-control-resting-color: var(--wa-color-danger-border-loud);
+  --wa-form-control-border-color: var(--wa-color-danger-border-loud);
   --wa-form-control-activated-color: var(--wa-color-danger-fill-loud);
   --wa-form-control-value-color: var(--wa-color-danger-on-quiet);
 
@@ -11,7 +11,7 @@
 }
 
 .wa-valid {
-  --wa-form-control-resting-color: var(--wa-color-success-border-loud);
+  --wa-form-control-border-color: var(--wa-color-success-border-loud);
   --wa-form-control-activated-color: var(--wa-color-success-fill-loud);
   --wa-form-control-value-color: var(--wa-color-success-on-quiet);
 

src/styles/native/checkbox.css

@@ -3,7 +3,7 @@ label:has(input[type='checkbox']):where(:not(:host *)),
 :host {
   --background-color: var(--wa-form-control-background-color);
   --background-color-checked: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-resting-color);
+  --border-color: var(--wa-form-control-border-color);
   --border-color-checked: var(--wa-form-control-activated-color);
   --border-radius: min(
     calc(var(--toggle-size) * 0.375),

src/styles/native/color-picker.css

@@ -5,7 +5,7 @@ input[type='color'] {
   padding: 3px;
   width: calc(var(--wa-form-control-height) - 2px);
   height: calc(var(--wa-form-control-height) - 2px);
-  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-form-control-resting-color);
+  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-form-control-border-color);
   cursor: pointer;
   margin-block-start: 3px;
   forced-color-adjust: none;

src/styles/native/input.css

@@ -17,7 +17,7 @@ input:where(:not(
   &:not(:host *) {
     /* Defaults for root element. */
     --outlined-background-color: var(--wa-form-control-background-color);
-    --outlined-border-color: var(--wa-form-control-resting-color);
+    --outlined-border-color: var(--wa-form-control-border-color);
     --outlined-text-color: var(--wa-form-control-value-color);
 
     :where(&) {
@@ -32,7 +32,7 @@ input:where(:not(
 
   /* Style native inputs and <wa-input>'s visible container */
   &:not(.wa-text-field *, :host input, :host textarea) {
-    border-color: var(--border-color, var(--wa-form-control-resting-color));
+    border-color: var(--border-color, var(--wa-form-control-border-color));
     border-radius: var(--wa-form-control-border-radius);
     border-style: var(--wa-form-control-border-style);
     cursor: text;

src/styles/native/radio.css

@@ -3,7 +3,7 @@ label:has(input[type='radio']),
 :host {
   --background-color: var(--wa-form-control-background-color);
   --background-color-checked: var(--background-color);
-  --border-color: var(--wa-form-control-resting-color);
+  --border-color: var(--wa-form-control-border-color);
   --border-color-checked: var(--wa-form-control-activated-color);
   --border-style: var(--wa-border-style);
   --border-width: var(--wa-form-control-border-width);

src/styles/native/select.css

@@ -2,7 +2,7 @@ select,
 label:has(select),
 :host {
   --background-color: var(--wa-form-control-background-color);
-  --border-color: var(--wa-form-control-resting-color);
+  --border-color: var(--wa-form-control-border-color);
   --border-radius: var(--wa-form-control-border-radius);
   --border-style: var(--wa-form-control-border-style);
   --border-width: var(--wa-form-control-border-width);

src/styles/themes/active.css

@@ -1,487 +1,240 @@
-@import '../depth/3_punchy.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
+@import url('../color/rudimentary.css');
+@import url('default/color-semantic.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root,
 :host,
 .wa-theme-active-light {
   color-scheme: light;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Primitive colors
-   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
-   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
-   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
-   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
-   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
+   * Foundational 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-text-normal: var(--wa-color-gray-05);
+  --wa-color-text-link: var(--wa-color-green-40);
 
-  --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-focus: var(--wa-color-blue-60);
 
-  --wa-color-lime-95: #daff92;
-  --wa-color-lime-90: #c1f759;
-  --wa-color-lime-80: #9bdc1a;
-  --wa-color-lime-70: #7ec200;
-  --wa-color-lime-60: #60a600;
-  --wa-color-lime-50: #3e8600;
-  --wa-color-lime-40: #216600;
-  --wa-color-lime-30: #135100;
-  --wa-color-lime-20: #083b00;
-  --wa-color-lime-10: #022400;
-  --wa-color-lime-05: #011600;
-
-  --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-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;
-
-  --wa-color-primary-95: var(--wa-color-lime-95);
-  --wa-color-primary-90: var(--wa-color-lime-90);
-  --wa-color-primary-80: var(--wa-color-lime-80);
-  --wa-color-primary-70: var(--wa-color-lime-70);
-  --wa-color-primary-60: var(--wa-color-lime-60);
-  --wa-color-primary-50: var(--wa-color-lime-50);
-  --wa-color-primary-40: var(--wa-color-lime-40);
-  --wa-color-primary-30: var(--wa-color-lime-30);
-  --wa-color-primary-20: var(--wa-color-lime-20);
-  --wa-color-primary-10: var(--wa-color-lime-10);
-  --wa-color-primary-05: var(--wa-color-lime-05);
-
-  --wa-color-base-95: var(--wa-color-gray-95);
-  --wa-color-base-90: var(--wa-color-gray-90);
-  --wa-color-base-80: var(--wa-color-gray-80);
-  --wa-color-base-70: var(--wa-color-gray-70);
-  --wa-color-base-60: var(--wa-color-gray-60);
-  --wa-color-base-50: var(--wa-color-gray-50);
-  --wa-color-base-40: var(--wa-color-gray-40);
-  --wa-color-base-30: var(--wa-color-gray-30);
-  --wa-color-base-20: var(--wa-color-gray-20);
-  --wa-color-base-10: var(--wa-color-gray-10);
-  --wa-color-base-05: var(--wa-color-gray-05);
-
-  /**
-   * Foundational theme colors
-   */
-
-  /* Surfaces are background layers that UI components and other content rest on.
-   * Surface colors support 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-base-95);
-  --wa-color-surface-border: var(--wa-color-base-90);
-
-  /* Text colors are used for standard text elements.
-   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
-   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-05);
-  --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-on-quiet);
-
-  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
-   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 96%, transparent);
-
-  /* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
-
-  /* Shadow specifies the default color for box shadows that indicate elevation. */
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
-    transparent
-  );
-
-  /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
   --wa-color-mix-hover: white 10%;
   --wa-color-mix-active: black 5%;
 
   /**
-   * Semantic theme colors
-   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
-   *  *  Brand to reinforce product branding
-   *  *  Success to express validity or confirmation
-   *  *  Warning to express caution or uncertainty
-   *  *  Danger to express errors or risk
-   *  *  Neutral for elements that are innocuous or inert
-   * Each semantic group specifies colors to use as surfaces, fills, borders, and text with varying degrees of emphasis.
-   * Accent colors are the most noticeable against surfaces, whereas subtle colors draw less attention.
-   * Accent colors should have a minimum 3:1 contrast ratio against surfaces when possible.
-   * Subtle colors have no contrast requirements.
-   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
-  */
-  --wa-color-brand-fill-loud: var(--wa-color-primary-80);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
-  --wa-color-brand-border-quiet: var(--wa-color-primary-90);
-  --wa-color-brand-border-normal: var(--wa-color-primary-80);
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-green-95);
+  --wa-color-brand-fill-normal: var(--wa-color-green-90);
+  --wa-color-brand-fill-loud: var(--wa-color-green-80);
+  --wa-color-brand-border-quiet: var(--wa-color-green-90);
+  --wa-color-brand-border-normal: var(--wa-color-green-80);
+  --wa-color-brand-border-loud: var(--wa-color-green-70);
+  --wa-color-brand-on-quiet: var(--wa-color-green-40);
+  --wa-color-brand-on-normal: var(--wa-color-green-30);
   --wa-color-brand-on-loud: black;
-  --wa-color-brand-on-normal: var(--wa-color-primary-40);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
 
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
   --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
   --wa-color-success-border-quiet: var(--wa-color-green-90);
   --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-border-loud: var(--wa-color-green-70);
+  --wa-color-success-on-quiet: var(--wa-color-green-40);
+  --wa-color-success-on-normal: var(--wa-color-green-30);
   --wa-color-success-on-loud: black;
-  --wa-color-success-on-normal: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
   --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
   --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
   --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
   --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-70);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
   --wa-color-warning-on-loud: black;
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-fill-loud: var(--wa-color-red-80);
   --wa-color-danger-fill-quiet: var(--wa-color-red-95);
   --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
   --wa-color-danger-border-quiet: var(--wa-color-red-90);
   --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-loud: var(--wa-color-red-70);
+  --wa-color-danger-on-quiet: var(--wa-color-red-40);
+  --wa-color-danger-on-normal: var(--wa-color-red-30);
   --wa-color-danger-on-loud: black;
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-fill-loud: var(--wa-color-base-80);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
-  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
   --wa-color-neutral-on-loud: black;
-  --wa-color-neutral-on-normal: var(--wa-color-base-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
-  /**
+  /** 
    * Typography
    */
-  --wa-font-family-heading: Inter, sans-serif;
-  --wa-font-family-body: Inter, sans-serif;
-  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  --wa-font-family-longform: 'Lora', serif;
+  --wa-font-family-body: 'Inter', sans-serif;
 
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
   --wa-font-weight-semibold: 550;
   --wa-font-weight-bold: 650;
-  --wa-font-weight-black: 900;
-
-  --wa-font-weight-heading: var(--wa-font-weight-bold);
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-semibold);
-
-  /* The default typescale is based on the Major Second scale (x1.125).
-   * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
-  --wa-font-size-root: 16px;
-  --wa-font-size-2xs: 0.6875rem; /* 11px */
-  --wa-font-size-xs: 0.75rem; /* 12px */
-  --wa-font-size-s: 0.875rem; /* 14px */
-  --wa-font-size-m: 1rem; /* 16px */
-  --wa-font-size-l: 1.25rem; /* 20px */
-  --wa-font-size-xl: 1.625rem; /* 26px */
-  --wa-font-size-2xl: 2rem; /* 32px */
-  --wa-font-size-3xl: 2.5625rem; /* 41px */
-  --wa-font-size-4xl: 3.25rem; /* 52px */
-
-  --wa-line-height-condensed: 1.25;
-  --wa-line-height-normal: 1.6;
-  --wa-line-height-expanded: 2;
 
   /**
-   * Spacing
-   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
-   * Space can be organized into three groups with distinct usage -
-   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
-   *     and padding within small components, such as badges and tooltips
-   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
-   *     typical interface elements, such as buttons and inputs
-   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
-   *     such as cards and dialogs
+   * Rounding
    */
-  /* Space is designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-space-scale: 1;
-  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
+  --wa-border-radius-scale: 2;
 
   /**
-   * Borders
+   * Component Groups
    */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-     * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-scale: 0.0625;
-  --wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-s);
-
-  /**
-   * Corners
-   */
-  /* Corners are designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-radius-scale: 0.75;
-  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
-
-  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0;
-
-  /**
-   * Focus
-   */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: 0.1875rem; /* 3px */
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
-  --wa-focus-ring-offset: 0.0625rem; /* 1px */
-
-  /**
-   * Links
-   */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
-  --wa-link-decoration-hover: underline;
-
-  /**
-   * Transitions
-   */
-  --wa-transition-slow: 250ms;
-  --wa-transition-normal: 150ms;
-  --wa-transition-fast: 50ms;
-
-  /**
-   * Component groups
-   */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-border-radius: var(--wa-border-radius-m);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-control-label-line-height: var(--wa-line-height-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-base-60);
-
-  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
-
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
-  --wa-panel-border-radius: var(--wa-border-radius-l);
-
-  /**
-   * From 2.x
-   */
-  --wa-tooltip-arrow-size: 0.375rem;
+  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }
 
 .wa-theme-active-dark,
-.wa-theme-active-dark :host {
+:is(:host-context(.wa-theme-active-dark)) {
   color-scheme: dark;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Base theme colors
+   * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-base-10);
-  --wa-color-surface-default: var(--wa-color-base-05);
+  --wa-color-surface-raised: var(--wa-color-gray-10);
+  --wa-color-surface-default: var(--wa-color-gray-05);
   --wa-color-surface-lowered: black;
-  --wa-color-surface-border: var(--wa-color-base-20);
+  --wa-color-surface-border: var(--wa-color-gray-20);
 
-  --wa-color-text-normal: var(--wa-color-base-95);
-  --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-on-quiet);
+  --wa-color-text-normal: var(--wa-color-gray-95);
+  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-link: var(--wa-color-green-70);
 
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
+  --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 theme colors
+   * Semantic Colors
    */
-  --wa-color-brand-fill-loud: var(--wa-color-primary-80);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-20);
-  --wa-color-brand-border-quiet: var(--wa-color-primary-20);
-  --wa-color-brand-border-normal: var(--wa-color-primary-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
+  --wa-color-brand-fill-normal: var(--wa-color-green-20);
+  --wa-color-brand-fill-loud: var(--wa-color-green-80);
+  --wa-color-brand-border-quiet: var(--wa-color-green-20);
+  --wa-color-brand-border-normal: var(--wa-color-green-30);
+  --wa-color-brand-border-loud: var(--wa-color-green-60);
+  --wa-color-brand-on-quiet: var(--wa-color-green-80);
+  --wa-color-brand-on-normal: var(--wa-color-green-90);
   --wa-color-brand-on-loud: black;
-  --wa-color-brand-on-normal: var(--wa-color-primary-90);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-80);
 
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
   --wa-color-success-fill-quiet: var(--wa-color-green-10);
   --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
   --wa-color-success-border-quiet: var(--wa-color-green-20);
   --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: black;
-  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-border-loud: var(--wa-color-green-40);
   --wa-color-success-on-quiet: var(--wa-color-green-80);
+  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-on-loud: black;
 
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
   --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
   --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
   --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
   --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: black;
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
   --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-on-loud: black;
 
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
   --wa-color-danger-fill-quiet: var(--wa-color-red-10);
   --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-fill-loud: var(--wa-color-red-70);
   --wa-color-danger-border-quiet: var(--wa-color-red-20);
   --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-border-loud: var(--wa-color-red-60);
+  --wa-color-danger-on-quiet: var(--wa-color-red-80);
+  --wa-color-danger-on-normal: var(--wa-color-red-90);
   --wa-color-danger-on-loud: black;
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
 
-  --wa-color-neutral-fill-loud: var(--wa-color-base-80);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-20);
-  --wa-color-neutral-border-normal: var(--wa-color-base-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
   --wa-color-neutral-on-loud: black;
-  --wa-color-neutral-on-normal: var(--wa-color-base-80);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-70);
+}
 
-  .hero-background::after {
-    backdrop-filter: brightness(0.8);
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+/**
+ * Component Styles
+ */
+:root {
+  --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
+    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
+  --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
+    inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
+    inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
+}
+
+:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
+    [appearance='plain'],
+    .wa-plain
+  ) {
+  box-shadow: var(--wa-theme-active-shadow-pop-out);
+
+  &:not([disabled], [loading]):active {
+    box-shadow: var(--wa-theme-active-shadow-punch-in);
   }
 }
 
-/* #region Custom Styles */
-@container preview (min-width: 0) {
-  .hero-background {
-    background: linear-gradient(
-      var(--wa-color-green-80) 20%,
-      var(--wa-color-primary-80) 80.5%,
-      var(--wa-color-base-10) 80.5%,
-      var(--wa-color-primary-80) 100%
-    );
-    background: url(/assets/images/themer/active/hero.png) 50% 0px / cover no-repeat;
-    height: 40rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-  }
+wa-card {
+  --box-shadow: var(--wa-theme-active-shadow-pop-out);
+}
 
-  .strata.hero {
-    height: 24rem;
-  }
-
-  .hero .title {
-    text-align: right;
-    margin-inline-start: 55%;
-  }
-
-  .hero .hero-title {
-    font-style: italic;
-    font-weight: var(--wa-font-weight-black);
-    font-size: var(--wa-font-size-2xl);
-  }
-
-  .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-quiet);
-    --text-color: var(--wa-color-neutral-on-normal);
-  }
-
-  wa-rating {
-    --symbol-color-active: var(--wa-color-brand-on-quiet);
+input:not([type='button'], [type='reset'], [type='submit'], :checked),
+select,
+textarea,
+:is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
+wa-input,
+wa-select,
+wa-textarea {
+  &:not([appearance='filled']):not([disabled]) {
+    --box-shadow: inset var(--wa-shadow-s);
   }
 }
 
-/* responsive */
-@container preview (min-width: 1100px) {
-  .hero-background {
-    height: 47rem;
-  }
+input[type='radio'],
+wa-radio {
+  --background-color-checked: var(--wa-form-control-activated-color);
+  --checked-icon-color: var(--wa-color-brand-on-loud);
+  --checked-icon-scale: 0.4;
+}
 
-  .strata.hero {
-    height: 30rem;
-  }
+input[type='range'],
+wa-slider,
+wa-switch {
+  --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
+}
 
-  .hero .title {
-    margin-block-start: 10%;
+wa-progress-bar {
+  box-shadow: inset var(--wa-shadow-s);
+
+  &::part(indicator) {
+    box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
   }
 }
-/* #endregion */

src/styles/themes/awesome.css

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

src/styles/themes/classic.css

@@ -1,7 +1,11 @@
-@import url('default/typography.css');
+@import url('../color/classic.css');
+@import url('default/color-semantic.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
 @import url('default/shadows.css');
+@import url('default/transitions.css');
 @import url('default/groups.css');
 
 :root,
@@ -9,145 +13,9 @@
 .wa-theme-classic-light {
   color-scheme: light;
 
-  /**
-   * 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.
-   */
-  --wa-color-red-95: #feeeee;
-  --wa-color-red-90: #fedede;
-  --wa-color-red-80: #fdb8b8;
-  --wa-color-red-70: #fa9292;
-  --wa-color-red-60: #ee6c6c;
-  --wa-color-red-50: #d43c3c;
-  --wa-color-red-40: #ac1e1e;
-  --wa-color-red-30: #640f0f;
-  --wa-color-red-20: #631111;
-  --wa-color-red-10: #3b0d0d;
-  --wa-color-red-05: #260606;
-
-  --wa-color-yellow-95: #fef2c4;
-  --wa-color-yellow-90: #fde494;
-  --wa-color-yellow-80: #fbc129;
-  --wa-color-yellow-70: #f29c0b;
-  --wa-color-yellow-60: #db7e13;
-  --wa-color-yellow-50: #af6005;
-  --wa-color-yellow-40: #904207;
-  --wa-color-yellow-30: #713406;
-  --wa-color-yellow-20: #532408;
-  --wa-color-yellow-10: #321606;
-  --wa-color-yellow-05: #1f0c01;
-
-  --wa-color-green-95: #e9f5ed;
-  --wa-color-green-90: #cfedd9;
-  --wa-color-green-80: #a2d5b4;
-  --wa-color-green-70: #6cc08a;
-  --wa-color-green-60: #38a961;
-  --wa-color-green-50: #178640;
-  --wa-color-green-40: #3d6208;
-  --wa-color-green-30: #0d5026;
-  --wa-color-green-20: #0c391d;
-  --wa-color-green-10: #082213;
-  --wa-color-green-05: #02140a;
-
-  --wa-color-blue-95: #e5f4fe;
-  --wa-color-blue-90: #c8ebfd;
-  --wa-color-blue-80: #80d4fc;
-  --wa-color-blue-70: #37bbf5;
-  --wa-color-blue-60: #0d9ee0;
-  --wa-color-blue-50: #027ab9;
-  --wa-color-blue-40: #015d8d;
-  --wa-color-blue-30: #024970;
-  --wa-color-blue-20: #04354f;
-  --wa-color-blue-10: #05202f;
-  --wa-color-blue-05: #04121b;
-
-  --wa-color-indigo-95: #eef2ff;
-  --wa-color-indigo-90: #dee5fd;
-  --wa-color-indigo-80: #bec8f2;
-  --wa-color-indigo-70: #9dabf0;
-  --wa-color-indigo-60: #818cf7;
-  --wa-color-indigo-50: #6063eb;
-  --wa-color-indigo-40: #4941d3;
-  --wa-color-indigo-30: #3930ad;
-  --wa-color-indigo-20: #29247a;
-  --wa-color-indigo-10: #191843;
-  --wa-color-indigo-05: #0f0e26;
-
-  --wa-color-violet-95: #f7efff;
-  --wa-color-violet-90: #efe0ff;
-  --wa-color-violet-80: #dcbdfe;
-  --wa-color-violet-70: #cb9afd;
-  --wa-color-violet-60: #b976f9;
-  --wa-color-violet-50: #9d46ec;
-  --wa-color-violet-40: #7d22cc;
-  --wa-color-violet-30: #631f9c;
-  --wa-color-violet-20: #48176e;
-  --wa-color-violet-10: #2e054e;
-  --wa-color-violet-05: #1d0331;
-
-  --wa-color-gray-95: #f2f2f3;
-  --wa-color-gray-90: #e5e5e8;
-  --wa-color-gray-80: #c9c9cc;
-  --wa-color-gray-70: #aeafb1;
-  --wa-color-gray-60: #94959b;
-  --wa-color-gray-50: #72747d;
-  --wa-color-gray-40: #565861;
-  --wa-color-gray-30: #43454d;
-  --wa-color-gray-20: #313134;
-  --wa-color-gray-10: #1d1d20;
-  --wa-color-gray-05: #101113;
-
-  /**
-   * 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-50);
-
-  /* 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-10) 32%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 8%, 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-40) calc(var(--wa-shadow-blur-scale) * 24% + 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);
@@ -207,7 +75,7 @@
   --wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   --wa-font-family-longform: Georgia, 'Times New Roman', serif;
 
-  --wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
+  --wa-link-decoration-default: underline;
 
   /**
    * Focus
@@ -215,10 +83,13 @@
   --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
     color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
 
+  /**
+   * Rounding
+   */
+  --wa-border-radius-scale: 0.7;
+
   /**
    * Shadows
-   * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
-   * A multiplier is provided for each shadow quality to uniformly scale all related values.
    */
   --wa-shadow-offset-y-scale: 0.0625;
   --wa-shadow-spread-scale: 0;
@@ -226,8 +97,6 @@
   /**
    * Transitions
    */
-  --wa-transition-easing: ease;
-
   --wa-transition-slow: 250ms;
   --wa-transition-normal: 150ms;
   --wa-transition-fast: 50ms;
@@ -237,12 +106,7 @@
    */
 
   /* Form controls */
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-  --wa-form-control-label-line-height: var(--wa-line-height-normal);
-
-  --wa-form-control-height-s: 1.875rem;
-  --wa-form-control-height-m: 2.5rem;
-  --wa-form-control-height-l: 3.125rem;
+  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 
   /* Panels */
   --wa-panel-border-radius: var(--wa-border-radius-m);
@@ -253,8 +117,9 @@
 }
 
 .wa-theme-classic-dark,
-.wa-theme-classic-dark :host {
+:is(:host-context(.wa-theme-classic-dark)) {
   color-scheme: dark;
+  color: var(--wa-color-text-normal);
 
   /**
    * Foundational Colors
@@ -337,32 +202,25 @@
 }
 
 /**
- * Component style overrides
+ * Component Styles
  */
 wa-avatar {
   --background-color: var(--wa-color-neutral-fill-loud);
   --text-color: var(--wa-color-neutral-on-loud);
 }
 
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
 wa-button,
+.wa-button,
 wa-radio-button {
-  &[size='small'] {
-    font-size: var(--wa-font-size-xs);
-  }
-
-  &[size='medium'] {
-    font-size: var(--wa-font-size-s);
-  }
-
-  &[size='large'] {
-    font-size: var(--wa-font-size-m);
-  }
+  font-size: var(--wa-size-smaller);
 }
 
 wa-radio-button {
   --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
   --background-color-hover: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-resting-color);
+  --border-color: var(--wa-form-control-border-color);
   --border-color-active: var(--background-color-active);
   --border-color-hover: var(--background-color-hover);
   --text-color-active: var(--text-color-hover);
@@ -380,43 +238,22 @@ wa-breadcrumb {
   font-size: var(--wa-font-size-s);
 }
 
-/* #region Callouts */
 wa-callout {
-  --background-color: var(--wa-color-surface-raised);
-  --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
-  --text-color: var(--wa-color-text-normal);
   --spacing: var(--wa-space-l);
+  font-size: var(--wa-size-smaller);
 
-  font-size: var(--wa-font-size-s);
+  &:is([appearance~='outlined'], .wa-outlined) {
+    border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
+    border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
+      var(--wa-color-surface-border) var(--wa-color-surface-border);
 
-  &[variant='brand'] {
-    --border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-brand-fill-loud);
+    &:not([appearance~='accent'], .wa-accent) {
+      --border-color: var(--wa-color-fill-loud);
+    }
   }
-
-  &[variant='success'] {
-    --border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-success-fill-loud);
-  }
-
-  &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-neutral-fill-loud);
-  }
-
-  &[variant='warning'] {
-    --border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-warning-fill-loud);
-  }
-
-  &[variant='danger'] {
-    --border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-danger-fill-loud);
+  &:not([appearance~='accent'], .wa-accent) {
+    --icon-color: var(--wa-color-fill-loud);
+    --text-color: var(--wa-color-text-normal);
   }
 }
 
@@ -434,20 +271,41 @@ wa-drawer {
   --spacing: var(--wa-space-l);
 }
 
-wa-input:not([appearance='filled']),
-wa-select:not([appearance='filled']),
-wa-textarea:not([appearance='filled']) {
+:is(
+    input:where(
+        :not(
+          [type='button'],
+          [type='checkbox'],
+          [type='color'],
+          [type='file'],
+          [type='hidden'],
+          [type='image'],
+          [type='radio'],
+          [type='range'],
+          [type='reset'],
+          [type='submit']
+        )
+      ),
+    select,
+    textarea,
+    wa-input,
+    wa-select,
+    wa-textarea,
+    .wa-text-field
+  ):not([appearance='filled'], .wa-filled) {
   --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
     color-mix(in oklab, var(--wa-color-focus), transparent 50%);
   --wa-focus-ring-offset: 0;
 }
 
+input[type='radio'],
 wa-radio {
   --background-color-checked: var(--border-color-checked);
   --checked-icon-color: var(--wa-color-surface-default);
   --checked-icon-scale: 0.4;
 }
 
+input[type='range'],
 wa-slider {
   --thumb-gap: 0;
 }

src/styles/themes/default.css

@@ -16,7 +16,7 @@
 }
 
 .wa-theme-default-dark,
-.wa-theme-default-dark :host {
+:is(:host-context(.wa-theme-migration-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
 }

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

@@ -49,7 +49,7 @@
    *  *  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);

src/styles/themes/default/color.css

@@ -43,6 +43,18 @@
   --wa-color-green-10: #002400;
   --wa-color-green-05: #001700;
 
+  --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-blue-95: #ebf4ff;
   --wa-color-blue-90: #d4e7ff;
   --wa-color-blue-80: #a6ccff;

src/styles/themes/default/groups.css

@@ -1,21 +1,21 @@
 /**
-* Component Groups
-*/
+ * Component Groups
+ */
 :where(:root, :host),
 .wa-theme-default-light {
   /* Form controls */
   --wa-form-control-background-color: var(--wa-color-surface-default);
 
+  --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
   --wa-form-control-border-style: var(--wa-border-style);
   --wa-form-control-border-width: var(--wa-border-width-s);
   --wa-form-control-border-radius: var(--wa-border-radius-m);
 
   --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
 
   --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-control-label-line-height: var(--wa-line-height-condensed);
+  --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
+  --wa-form-control-label-line-height: var(--wa-line-height-normal);
 
   --wa-form-control-value-color: var(--wa-color-text-normal);
   --wa-form-control-value-font-weight: var(--wa-font-weight-body);
@@ -23,10 +23,6 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-gray-60);
 
-  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
-
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
   --wa-form-control-required-content-offset: -0.1em;
@@ -55,7 +51,7 @@
   --wa-form-control-background-color: var(--wa-color-surface-default);
 
   --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
+  --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
 
   --wa-form-control-label-color: var(--wa-color-text-normal);
 

src/styles/themes/default/outlines.css

@@ -8,7 +8,7 @@
   --wa-border-width-scale: 1;
   --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
   --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.25rem);
+  --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
 
   /**
    * Focus

src/styles/themes/default/rounding.css

@@ -1,5 +1,5 @@
 /**
-* Rounding tokens
+* Rounding
 */
 :where(:root, :host) {
   /* A multiplier is provided to uniformly increase or decrease all border radii. */

src/styles/themes/fa.css

@@ -1,613 +0,0 @@
-@import '../depth/2_chunky.css';
-@import 'cera_typeface.css';
-
-:root,
-:host,
-.wa-theme-fa-light {
-  color-scheme: light;
-
-  /**
-   * Primitive colors
-   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
-   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
-   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
-   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
-   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
-   */
-  --wa-color-red-95: #ffeeef;
-  --wa-color-red-90: #fdd;
-  --wa-color-red-80: #ffb2b2;
-  --wa-color-red-70: #ff8585;
-  --wa-color-red-60: #ff5c5c;
-  --wa-color-red-50: #e12124;
-  --wa-color-red-40: #aa1d00;
-  --wa-color-red-30: #8a0b00;
-  --wa-color-red-20: #700000;
-  --wa-color-red-10: #46000c;
-  --wa-color-red-05: #2e0008;
-
-  --wa-color-yellow-95: #fff3bf;
-  --wa-color-yellow-90: #f8e695;
-  --wa-color-yellow-80: #eec637;
-  --wa-color-yellow-70: #d8a815;
-  --wa-color-yellow-60: #ce8500;
-  --wa-color-yellow-50: #aa6300;
-  --wa-color-yellow-40: #824c00;
-  --wa-color-yellow-30: #663b00;
-  --wa-color-yellow-20: #492b00;
-  --wa-color-yellow-10: #2c1a00;
-  --wa-color-yellow-05: #1b0e00;
-
-  --wa-color-green-95: #dbfadf;
-  --wa-color-green-90: #bbf3c3;
-  --wa-color-green-80: #79df8a;
-  --wa-color-green-70: #4dc661;
-  --wa-color-green-60: #35aa4a;
-  --wa-color-green-50: #298539;
-  --wa-color-green-40: #20652d;
-  --wa-color-green-30: #165025;
-  --wa-color-green-20: #0d391c;
-  --wa-color-green-10: #062312;
-  --wa-color-green-05: #03140c;
-
-  --wa-color-blue-95: #e4f1ff;
-  --wa-color-blue-90: #cee6ff;
-  --wa-color-blue-80: #96ccff;
-  --wa-color-blue-70: #53b4ff;
-  --wa-color-blue-60: #349bf1;
-  --wa-color-blue-50: #0079cd;
-  --wa-color-blue-40: #005aa8;
-  --wa-color-blue-30: #00458c;
-  --wa-color-blue-20: #003073;
-  --wa-color-blue-10: #00175c;
-  --wa-color-blue-05: #000e39;
-
-  --wa-color-gray-95: #f1f2f5;
-  --wa-color-gray-90: #e3e6eb;
-  --wa-color-gray-80: #c5cad4;
-  --wa-color-gray-70: #a8afbf;
-  --wa-color-gray-60: #8b95aa;
-  --wa-color-gray-50: #677490;
-  --wa-color-gray-40: #4a5877;
-  --wa-color-gray-30: #3a455d;
-  --wa-color-gray-20: #2a3142;
-  --wa-color-gray-10: #191e28;
-  --wa-color-gray-05: #0e1117;
-
-  --wa-color-primary-95: var(--wa-color-blue-95);
-  --wa-color-primary-90: var(--wa-color-blue-90);
-  --wa-color-primary-80: var(--wa-color-blue-80);
-  --wa-color-primary-70: var(--wa-color-blue-70);
-  --wa-color-primary-60: var(--wa-color-blue-60);
-  --wa-color-primary-50: var(--wa-color-blue-50);
-  --wa-color-primary-40: var(--wa-color-blue-40);
-  --wa-color-primary-30: var(--wa-color-blue-30);
-  --wa-color-primary-20: var(--wa-color-blue-20);
-  --wa-color-primary-10: var(--wa-color-blue-10);
-  --wa-color-primary-05: var(--wa-color-blue-05);
-
-  --wa-color-base-95: var(--wa-color-gray-95);
-  --wa-color-base-90: var(--wa-color-gray-90);
-  --wa-color-base-80: var(--wa-color-gray-80);
-  --wa-color-base-70: var(--wa-color-gray-70);
-  --wa-color-base-60: var(--wa-color-gray-60);
-  --wa-color-base-50: var(--wa-color-gray-50);
-  --wa-color-base-40: var(--wa-color-gray-40);
-  --wa-color-base-30: var(--wa-color-gray-30);
-  --wa-color-base-20: var(--wa-color-gray-20);
-  --wa-color-base-10: var(--wa-color-gray-10);
-  --wa-color-base-05: var(--wa-color-gray-05);
-
-  /**
-   * Foundational theme colors
-   */
-
-  /* Surfaces are background layers that UI components and other content rest on.
-   * Surface colors support 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-base-95);
-  --wa-color-surface-border: var(--wa-color-base-90);
-
-  /* Text colors are used for standard text elements.
-   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
-   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-20);
-  --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-on-quiet);
-
-  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
-   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
-  --wa-color-focus: var(--wa-color-primary-60);
-
-  /* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
-
-  /* Shadow specifies the default color for box shadows that indicate elevation. */
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
-    transparent
-  );
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-y-scale: 0.35;
-
-  /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 20%;
-
-  /**
-   * Semantic theme colors
-   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
-   *  *  Brand to reinforce product branding
-   *  *  Success to express validity or confirmation
-   *  *  Warning to express caution or uncertainty
-   *  *  Danger to express errors or risk
-   *  *  Neutral for elements that are innocuous or inert
-   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
-   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
-   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
-   * Muted colors have no contrast requirements.
-   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
-  */
-
-  --wa-color-brand-fill-loud: var(--wa-color-primary-70);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
-  --wa-color-brand-border-quiet: var(--wa-color-primary-70);
-  --wa-color-brand-border-normal: var(--wa-color-primary-50);
-  --wa-color-brand-on-loud: var(--wa-color-text-normal);
-  --wa-color-brand-on-normal: var(--wa-color-primary-40);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-border-quiet: var(--wa-color-green-70);
-  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-on-loud: var(--wa-color-text-normal);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-60);
-  --wa-color-warning-on-loud: var(--wa-color-text-normal);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-border-quiet: var(--wa-color-red-70);
-  --wa-color-danger-border-normal: var(--wa-color-red-50);
-  --wa-color-danger-on-loud: var(--wa-color-text-normal);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
-
-  --wa-color-neutral-fill-loud: var(--wa-color-base-80);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-60);
-  --wa-color-neutral-border-normal: var(--wa-color-base-40);
-  --wa-color-neutral-on-loud: var(--wa-color-text-normal);
-  --wa-color-neutral-on-normal: var(--wa-color-base-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-text-normal);
-
-  /**
-   * Typography
-   */
-  --wa-font-family-heading: 'cera-round-pro', sans-serif;
-  --wa-font-family-body: 'cera-round-pro', sans-serif;
-  --wa-font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  --wa-font-family-longform: 'Lora', serif;
-
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
-  --wa-font-weight-bold: 700;
-
-  --wa-font-weight-heading: var(--wa-font-weight-bold);
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-bold);
-
-  /* The default typescale is based on the Major Second scale (x1.125).
-   * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
-  --wa-font-size-root: 16px;
-  --wa-font-size-2xs: 0.6875rem; /* 11px */
-  --wa-font-size-xs: 0.75rem; /* 12px */
-  --wa-font-size-s: 0.875rem; /* 14px */
-  --wa-font-size-m: 1rem; /* 16px */
-  --wa-font-size-l: 1.25rem; /* 20px */
-  --wa-font-size-xl: 1.625rem; /* 26px */
-  --wa-font-size-2xl: 2rem; /* 32px */
-  --wa-font-size-3xl: 2.5625rem; /* 41px */
-  --wa-font-size-4xl: 3.25rem; /* 52px */
-
-  --wa-line-height-condensed: 1.25;
-  --wa-line-height-normal: 1.75;
-  --wa-line-height-expanded: 2;
-
-  /**
-   * Spacing
-   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
-   * Space can be organized into three groups with distinct usage -
-   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
-   *     and padding within small components, such as badges and tooltips
-   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
-   *     typical interface elements, such as buttons and inputs
-   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
-   *     such as cards and dialogs
-   */
-  /* Space is designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-space-scale: 1;
-  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
-
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-     * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-scale: 0.125;
-  --wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-s);
-
-  /**
-   * Corners
-   */
-  /* Corners are designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-radius-scale: 0.5;
-  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
-
-  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0;
-
-  /**
-   * Focus
-   */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: 0.1875rem; /* 3px */
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-    color-mix(in oklab, var(--wa-color-focus) 98%, transparent);
-  --wa-focus-ring-offset: 0.0625rem; /* 1px */
-
-  /**
-   * Links
-   */
-  --wa-link-decoration-default: underline var(--wa-color-text-link) dotted;
-  --wa-link-decoration-hover: underline;
-
-  /**
-   * Transitions
-   */
-  --wa-transition-slow: 250ms;
-  --wa-transition-normal: 150ms;
-  --wa-transition-fast: 50ms;
-
-  /**
-   * Component groups
-   */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-border-radius: var(--wa-border-radius-m);
-
-  --wa-form-control-activated-color: var(--wa-color-neutral-border-normal);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-bold);
-  --wa-form-control-label-line-height: var(--wa-line-height-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-base-60);
-
-  --wa-form-control-height-s: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-m: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-l: calc(var(--wa-space-l) * 2 + 1em * var(--wa-form-control-value-line-height));
-
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
-  --wa-panel-border-radius: var(--wa-border-radius-l);
-
-  /**
-  * From 2.x
-  */
-  --wa-tooltip-arrow-size: 0.375rem;
-}
-
-.wa-theme-fa-dark,
-.wa-theme-fa-dark :host {
-  color-scheme: dark;
-
-  /**
-   * Base theme colors
-   */
-  --wa-color-surface-raised: var(--wa-color-base-30);
-  --wa-color-surface-default: var(--wa-color-base-20);
-  --wa-color-surface-lowered: var(--wa-color-base-10);
-  --wa-color-surface-border: var(--wa-color-base-30);
-
-  --wa-color-text-normal: var(--wa-color-base-95);
-  --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-on-quiet);
-
-  --wa-color-focus: var(--wa-color-primary-60);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
-
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 16% + 40%),
-    transparent
-  );
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-    * Semantic theme colors
-    */
-  --wa-color-brand-fill-loud: var(--wa-color-primary-80);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-20);
-  --wa-color-brand-border-quiet: var(--wa-color-primary-60);
-  --wa-color-brand-border-normal: var(--wa-color-primary-70);
-  --wa-color-brand-on-loud: var(--wa-color-primary-10);
-  --wa-color-brand-on-normal: var(--wa-color-primary-80);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-70);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-border-quiet: var(--wa-color-green-60);
-  --wa-color-success-border-normal: var(--wa-color-green-70);
-  --wa-color-success-on-loud: var(--wa-color-green-10);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-60);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-70);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-80);
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-border-quiet: var(--wa-color-red-60);
-  --wa-color-danger-border-normal: var(--wa-color-red-70);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-
-  --wa-color-neutral-fill-loud: var(--wa-color-base-80);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-30);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-60);
-  --wa-color-neutral-border-normal: var(--wa-color-base-70);
-  --wa-color-neutral-on-loud: var(--wa-color-base-10);
-  --wa-color-neutral-on-normal: var(--wa-color-base-80);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-70);
-}
-
-/* #region Custom Styles */
-@container preview (min-width: 0) {
-  .project-header h1 {
-    font-size: var(--wa-font-size-xl);
-  }
-
-  .hero {
-    color: var(--wa-color-brand-on-normal);
-    text-align: center;
-  }
-
-  .hero .title {
-    background:
-      url('/assets/images/themer/fa/hero.png') center center / cover no-repeat,
-      var(--wa-color-brand-fill-normal);
-    padding: calc(var(--wa-space-3xl) * 5) calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 4);
-    margin: calc(var(--wa-space-3xl) * -1) 0;
-    border-radius: var(--wa-panel-border-radius);
-  }
-
-  h1.hero-title {
-    font-size: var(--wa-font-size-4xl);
-  }
-
-  .badge-stock {
-    position: absolute;
-    top: -0.75rem;
-    right: var(--wa-space-l);
-  }
-
-  pre.codeblock,
-  .post-body code {
-    background-color: color-mix(in oklab, var(--wa-color-base-50), transparent 90%);
-  }
-
-  .message-composer wa-card::part(header) {
-    background-color: var(--wa-color-neutral-fill-normal);
-    color: var(--wa-color-neutral-on-normal);
-
-    & wa-icon-button {
-      color: var(--wa-color-text-normal);
-    }
-  }
-
-  wa-alert {
-    --text-color: var(--wa-color-text-normal);
-    --icon-color: var(--border-color);
-
-    .wa-theme-fa-dark & {
-      --background: var(--wa-color-surface-lowered);
-    }
-
-    &[variant='brand'] {
-      --border-color: var(--wa-color-brand-border-normal);
-    }
-    &[variant='success'] {
-      --border-color: var(--wa-color-success-border-normal);
-    }
-    &[variant='warning'] {
-      --border-color: var(--wa-color-warning-border-normal);
-    }
-    &[variant='danger'] {
-      --border-color: var(--wa-color-danger-border-normal);
-    }
-    &[variant='neutral'] {
-      --border-color: var(--wa-color-neutral-border-normal);
-    }
-  }
-
-  wa-badge {
-    --border-color: var(--background);
-    text-transform: uppercase;
-
-    &::part(base) {
-      font-weight: var(--wa-font-weight-bold);
-    }
-  }
-
-  wa-button:not([appearance='plain']) {
-    --border-color: var(--text-color);
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--border-color);
-    --box-shadow-color: var(--border-color);
-    --background-active: var(--border-color);
-    --text-color-active: var(--background);
-
-    &[appearance='outlined'] {
-      --background: var(--wa-color-surface-default);
-    }
-
-    .wa-theme-fa-dark & {
-      &[variant='brand'] {
-        --border-color: var(--wa-color-brand-border-loud);
-      }
-      &[variant='success'] {
-        --border-color: var(--wa-color-success-border-loud);
-      }
-      &[variant='warning'] {
-        --border-color: var(--wa-color-warning-border-loud);
-      }
-      &[variant='danger'] {
-        --border-color: var(--wa-color-danger-border-loud);
-      }
-      &[variant='neutral'] {
-        --border-color: var(--wa-color-neutral-border-loud);
-      }
-    }
-  }
-
-  wa-card {
-    --border-width: 0px;
-
-    & .title {
-      font-size: var(--wa-font-size-xl);
-    }
-
-    & wa-rating {
-      --symbol-size: var(--wa-font-size-m);
-    }
-  }
-
-  wa-carousel {
-    --pagination-color-activated: var(--wa-color-brand-fill-loud);
-    --pagination-color-resting: var(--wa-color-neutral-fill-loud);
-  }
-
-  wa-checkbox,
-  wa-radio {
-    --checked-icon-color: var(--wa-color-surface-default);
-  }
-
-  wa-radio-group > wa-radio-button {
-    --wa-transition-slow: 0ms;
-    --wa-transition-normal: 0ms;
-    --wa-transition-fast: 0ms;
-    --background-active: var(--wa-color-neutral-on-quiet);
-    --border-color-active: var(--background-active);
-    --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--border-color);
-    --text-color-active: var(--wa-color-surface-default);
-
-    &:active,
-    &[checked] {
-      --background: var(--wa-color-neutral-on-quiet);
-      --box-shadow: none;
-      --text-color: var(--wa-color-surface-default);
-      transform: translateX(var(--wa-shadow-offset-x-s)) translateY(var(--wa-shadow-offset-y-s));
-    }
-  }
-
-  wa-switch {
-    --background: transparent;
-    --border-color: var(--wa-form-control-activated-color);
-    --thumb-color: var(--border-color);
-    --thumb-color-checked: var(--wa-color-neutral-fill-quiet);
-    --thumb-size: 1em;
-    --height: 1.5em;
-    --width: calc(var(--thumb-size) * 2.5);
-  }
-
-  wa-tag {
-    font-weight: var(--wa-font-weight-bold);
-  }
-
-  wa-input,
-  wa-select {
-    --wa-form-control-height-s: calc(
-      var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
-    );
-    --wa-form-control-height-m: calc(
-      var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
-    );
-    --wa-form-control-height-l: calc(
-      var(--wa-space-l) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
-    );
-
-    & > wa-icon {
-      color: var(--wa-color-base-30);
-
-      .wa-theme-fa-dark & {
-        color: var(--wa-color-base-80);
-      }
-    }
-  }
-}
-/* #endregion */

src/styles/themes/glassy.css

@@ -1,488 +1,199 @@
-@import '../depth/4_glossy.css';
+@import url('../color/elegant.css');
+@import url('default/color-semantic.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
 
 :root,
 :host,
 .wa-theme-glassy-light {
   color-scheme: light;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Primitive colors
-   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
-   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
-   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
-   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
-   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
+   * Semantic Colors
    */
-  --wa-color-red-95: #fdeeef;
-  --wa-color-red-90: #fcdfe0;
-  --wa-color-red-80: #f8b9bc;
-  --wa-color-red-70: #f0969c;
-  --wa-color-red-60: #e3727d;
-  --wa-color-red-50: #cc465a;
-  --wa-color-red-40: #ac1d3d;
-  --wa-color-red-30: #8f012c;
-  --wa-color-red-20: #6b001c;
-  --wa-color-red-10: #44000d;
-  --wa-color-red-05: #2e0006;
-
-  --wa-color-yellow-95: #f5f2e5;
-  --wa-color-yellow-90: #ece6cc;
-  --wa-color-yellow-80: #dac992;
-  --wa-color-yellow-70: #c9ac5c;
-  --wa-color-yellow-60: #b98f27;
-  --wa-color-yellow-50: #9b6d09;
-  --wa-color-yellow-40: #785007;
-  --wa-color-yellow-30: #613e06;
-  --wa-color-yellow-20: #492c05;
-  --wa-color-yellow-10: #2b1a02;
-  --wa-color-yellow-05: #191008;
-
-  --wa-color-green-95: #ecf4f1;
-  --wa-color-green-90: #dae9e3;
-  --wa-color-green-80: #b0d1c4;
-  --wa-color-green-70: #88b9a6;
-  --wa-color-green-60: #5fa288;
-  --wa-color-green-50: #2d8462;
-  --wa-color-green-40: #00663e;
-  --wa-color-green-30: #005031;
-  --wa-color-green-20: #003b24;
-  --wa-color-green-10: #002316;
-  --wa-color-green-05: #00160d;
-
-  --wa-color-teal-95: #ebf4f4;
-  --wa-color-teal-90: #d9e9e9;
-  --wa-color-teal-80: #add0d1;
-  --wa-color-teal-70: #84b8ba;
-  --wa-color-teal-60: #5aa0a3;
-  --wa-color-teal-50: #268285;
-  --wa-color-teal-40: #006366;
-  --wa-color-teal-30: #004e51;
-  --wa-color-teal-20: #00393b;
-  --wa-color-teal-10: #002223;
-  --wa-color-teal-05: #001415;
-
-  --wa-color-gray-95: #f2f2f3;
-  --wa-color-gray-90: #e6e5e8;
-  --wa-color-gray-80: #cbc8ce;
-  --wa-color-gray-70: #b1adb6;
-  --wa-color-gray-60: #98939f;
-  --wa-color-gray-50: #7a7382;
-  --wa-color-gray-40: #5d5568;
-  --wa-color-gray-30: #494352;
-  --wa-color-gray-20: #35313c;
-  --wa-color-gray-10: #1f1c23;
-  --wa-color-gray-05: #131115;
-
-  --wa-color-primary-95: var(--wa-color-teal-95);
-  --wa-color-primary-90: var(--wa-color-teal-90);
-  --wa-color-primary-80: var(--wa-color-teal-80);
-  --wa-color-primary-70: var(--wa-color-teal-70);
-  --wa-color-primary-60: var(--wa-color-teal-60);
-  --wa-color-primary-50: var(--wa-color-teal-50);
-  --wa-color-primary-40: var(--wa-color-teal-40);
-  --wa-color-primary-30: var(--wa-color-teal-30);
-  --wa-color-primary-20: var(--wa-color-teal-20);
-  --wa-color-primary-10: var(--wa-color-teal-10);
-  --wa-color-primary-05: var(--wa-color-teal-05);
-
-  --wa-color-base-95: var(--wa-color-gray-95);
-  --wa-color-base-90: var(--wa-color-gray-90);
-  --wa-color-base-80: var(--wa-color-gray-80);
-  --wa-color-base-70: var(--wa-color-gray-70);
-  --wa-color-base-60: var(--wa-color-gray-60);
-  --wa-color-base-50: var(--wa-color-gray-50);
-  --wa-color-base-40: var(--wa-color-gray-40);
-  --wa-color-base-30: var(--wa-color-gray-30);
-  --wa-color-base-20: var(--wa-color-gray-20);
-  --wa-color-base-10: var(--wa-color-gray-10);
-  --wa-color-base-05: var(--wa-color-gray-05);
-
-  /**
-   * Base theme colors
-   */
-
-  /* Surfaces are background layers that UI components and other content rest on.
-   * Surface colors support 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-base-95);
-  --wa-color-surface-border: var(--wa-color-base-90);
-
-  /* Text colors are used for standard text elements.
-   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
-   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-10);
-  --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-on-quiet);
-
-  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
-   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 96%, transparent);
-
-  /* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-30) 32%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
-
-  /* Shadow specifies the default color for box shadows that indicate elevation. */
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
-    transparent
-  );
-
-  /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
-  --wa-color-mix-hover: white 6%;
-  --wa-color-mix-active: black 12%;
-
-  /**
-   * Semantic theme colors
-   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
-   *  *  Brand to reinforce product branding
-   *  *  Success to express validity or confirmation
-   *  *  Warning to express caution or uncertainty
-   *  *  Danger to express errors or risk
-   *  *  Neutral for elements that are innocuous or inert
-   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
-   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
-   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
-   * Muted colors have no contrast requirements.
-   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
-  */
-  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-90);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
-  --wa-color-brand-border-quiet: var(--wa-color-primary-90);
-  --wa-color-brand-border-normal: var(--wa-color-primary-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-teal-95);
+  --wa-color-brand-fill-normal: var(--wa-color-teal-90);
+  --wa-color-brand-fill-loud: var(--wa-color-teal-50);
+  --wa-color-brand-border-quiet: var(--wa-color-teal-90);
+  --wa-color-brand-border-normal: var(--wa-color-teal-80);
+  --wa-color-brand-border-loud: var(--wa-color-teal-60);
+  --wa-color-brand-on-quiet: var(--wa-color-teal-40);
+  --wa-color-brand-on-normal: var(--wa-color-teal-30);
   --wa-color-brand-on-loud: white;
-  --wa-color-brand-on-normal: var(--wa-color-primary-40);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-on-loud: white;
-  --wa-color-success-on-normal: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: white;
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: white;
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
-
-  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
-  --wa-color-neutral-border-normal: var(--wa-color-base-80);
-  --wa-color-neutral-on-loud: white;
-  --wa-color-neutral-on-normal: var(--wa-color-base-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
   /**
-   * Typography
+   * Shadows
    */
-  --wa-font-family-heading: 'Quicksand', sans-serif;
-  --wa-font-family-body: 'Inter', sans-serif;
-  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  --wa-font-family-longform: 'Lora', serif;
-
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
-  --wa-font-weight-bold: 600;
-
-  --wa-font-weight-heading: var(--wa-font-weight-bold);
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-semibold);
-
-  /* The default typescale is based on the Major Second scale (x1.125).
-   * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
-  --wa-font-size-root: 16px;
-  --wa-font-size-2xs: 0.6875rem; /* 11px */
-  --wa-font-size-xs: 0.75rem; /* 12px */
-  --wa-font-size-s: 0.875rem; /* 14px */
-  --wa-font-size-m: 1rem; /* 16px */
-  --wa-font-size-l: 1.25rem; /* 20px */
-  --wa-font-size-xl: 1.625rem; /* 26px */
-  --wa-font-size-2xl: 2rem; /* 32px */
-  --wa-font-size-3xl: 2.5625rem; /* 41px */
-  --wa-font-size-4xl: 3.25rem; /* 52px */
-
-  --wa-line-height-condensed: 1.25;
-  --wa-line-height-normal: 1.6;
-  --wa-line-height-expanded: 2;
-
-  /**
-   * Spacing
-   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
-   * Space can be organized into three groups with distinct usage -
-   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
-   *     and padding within small components, such as badges and tooltips
-   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
-   *     typical interface elements, such as buttons and inputs
-   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
-   *     such as cards and dialogs
-   */
-  /* Space is designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-space-scale: 1;
-  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
-
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-     * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-scale: 0.0625;
-  --wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-
-  --wa-panel-border-style: hidden;
-  --wa-panel-border-width: var(--wa-border-width-s);
-
-  /**
-   * Corners
-   */
-  /* Corners are designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-radius-scale: 0.375;
-  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
-
-  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0;
-
-  /**
-   * Focus
-   */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: 0.1875rem; /* 3px */
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
-  --wa-focus-ring-offset: 0.0625rem; /* 1px */
-
-  /**
-   * Links
-   */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
-  --wa-link-decoration-hover: underline;
-
-  /**
-   * Transitions
-   */
-  --wa-transition-slow: 250ms;
-  --wa-transition-normal: 150ms;
-  --wa-transition-fast: 100ms;
-
-  /**
-   * Component groups
-   */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-border-radius: var(--wa-border-radius-m);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-control-label-line-height: var(--wa-line-height-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-base-60);
-
-  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
-
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
-  --wa-panel-border-radius: var(--wa-border-radius-l);
-
-  /**
-   * From 2.x
-   */
-  --wa-tooltip-arrow-size: 0.375rem;
+  --wa-shadow-blur-scale: 3;
 }
 
 .wa-theme-glassy-dark,
-.wa-theme-glassy-dark :host {
+:is(:host-context(.wa-theme-glassy-dark)) {
   color-scheme: dark;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Base theme colors
+   * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-base-20);
-  --wa-color-surface-default: var(--wa-color-base-10);
-  --wa-color-surface-lowered: var(--wa-color-base-05);
-  --wa-color-surface-border: var(--wa-color-base-30);
+  --wa-color-surface-raised: var(--wa-color-gray-10);
+  --wa-color-surface-default: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
+  --wa-color-surface-border: var(--wa-color-gray-20);
 
-  --wa-color-text-normal: var(--wa-color-base-95);
-  --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-on-quiet);
+  --wa-color-text-normal: var(--wa-color-gray-95);
+  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-link: var(--wa-color-teal-70);
 
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
-
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-primary-05) 30%, transparent);
+  --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-mix-hover: white 6%;
-  --wa-color-mix-active: black 12%;
+  --wa-color-focus: var(--wa-color-teal-60);
+
+  --wa-color-mix-hover: black 8%;
+  --wa-color-mix-active: black 16%;
 
   /**
-   * Semantic theme colors
+   * Semantic Colors
    */
-  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-20);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-30);
-  --wa-color-brand-border-quiet: var(--wa-color-primary-20);
-  --wa-color-brand-border-normal: var(--wa-color-primary-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-teal-10);
+  --wa-color-brand-fill-normal: var(--wa-color-teal-20);
+  --wa-color-brand-fill-loud: var(--wa-color-teal-50);
+  --wa-color-brand-border-quiet: var(--wa-color-teal-20);
+  --wa-color-brand-border-normal: var(--wa-color-teal-30);
+  --wa-color-brand-border-loud: var(--wa-color-teal-40);
+  --wa-color-brand-on-quiet: var(--wa-color-teal-60);
+  --wa-color-brand-on-normal: var(--wa-color-teal-70);
   --wa-color-brand-on-loud: white;
-  --wa-color-brand-on-normal: var(--wa-color-primary-70);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-60);
 
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
   --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-on-loud: white;
-  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --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-loud: var(--wa-color-yellow-50);
   --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-on-loud: white;
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --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-loud: var(--wa-color-red-50);
   --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-on-loud: white;
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --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-loud: var(--wa-color-base-50);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-20);
-  --wa-color-neutral-border-normal: var(--wa-color-base-30);
-  --wa-color-neutral-on-loud: white;
-  --wa-color-neutral-on-normal: var(--wa-color-base-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-60);
+  --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);
+}
 
-  .hero-background::after {
-    height: 50rem;
-    -webkit-backdrop-filter: brightness(0.5);
-    backdrop-filter: brightness(0.5);
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    right: 0;
+/**
+ * Component Styles
+ */
+wa-button:not([appearance='plain']) {
+  box-shadow:
+    inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+    inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+    inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
+    var(--wa-shadow-s) /* outer shadow */;
+
+  margin-bottom: var(--wa-shadow-offset-y-s);
+  transition: transform var(--wa-transition-fast);
+
+  &:not([disabled]) {
+    &:hover {
+      box-shadow:
+        inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+        inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
+        var(--wa-shadow-m) /* outer shadow */;
+    }
+
+    &:active {
+      box-shadow:
+        inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
+        inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
+        inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
+        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+        inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
+        0 0 0 0 transparent /* outer shadow */;
+
+      transform: translateY(var(--wa-shadow-offset-y-s));
+    }
   }
 }
 
-/* #region Custom styles */
-@container preview (min-width: 0) {
-  wa-button[appearance='outlined'] {
-    &[variant='brand'] {
-      --border-color: var(--wa-color-brand-border-normal);
-    }
+wa-checkbox,
+wa-input:not(:focus),
+wa-radio,
+wa-select {
+  --box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
+    inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
+}
 
-    &[variant='success'] {
-      --border-color: var(--wa-color-success-border-normal);
-    }
+wa-checkbox:state(checked),
+wa-radio:state(checked) {
+  --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
+}
 
-    &[variant='neutral'] {
-      --border-color: var(--wa-color-neutral-border-normal);
-    }
-
-    &[variant='warning'] {
-      --border-color: var(--wa-color-warning-border-normal);
-    }
-
-    &[variant='danger'] {
-      --border-color: var(--wa-color-danger-border-normal);
-    }
-  }
-
-  wa-rating {
-    --symbol-size: var(--wa-font-size-m);
-    --symbol-color-active: var(--wa-color-neutral-on-quiet);
-  }
-
-  .hero-background {
-    height: 50rem;
-    background: url(/assets/images/themer/glassy/hero.jpg) 0px 0px / cover no-repeat;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-  }
-
-  .strata.hero {
-    height: 25rem;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    margin: 8rem;
-  }
-
-  .hero .title {
-    text-align: right;
-    color: var(--wa-color-text-normal);
+wa-textarea:not(:focus) {
+  &:not([appearance='filled']):not([disabled]) {
+    --box-shadow: var(--wa-shadow-s);
   }
 }
 
-@container preview (min-width: 720px) {
-  .strata.hero {
-    padding-left: 25%;
-  }
+wa-switch {
+  --box-shadow: inset var(--wa-shadow-s);
+  --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+    inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
+    inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
 }
 
-/* #endregion */
+wa-progress-bar {
+  box-shadow: inset var(--wa-shadow-s);
+
+  &::part(indicator) {
+    box-shadow:
+      inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+      inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+      inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
+      var(--wa-shadow-s) /* outer shadow */;
+  }
+}

src/styles/themes/mellow.css

@@ -1,366 +1,143 @@
-@import '../depth/0_flat.css';
+@import url('../color/natural.css');
+@import url('default/color-semantic.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
+@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
 
 :root,
 :host,
 .wa-theme-mellow-light {
   color-scheme: light;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Primitive colors
-   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
-   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
-   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
-   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
-   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
+   * Foundational Colors
    */
-  --wa-color-red-95: #f9f0ee;
-  --wa-color-red-90: #f5e2dd;
-  --wa-color-red-80: #e8bfb5;
-  --wa-color-red-70: #dba294;
-  --wa-color-red-60: #c98373;
-  --wa-color-red-50: #ae6150;
-  --wa-color-red-40: #8c4434;
-  --wa-color-red-30: #713225;
-  --wa-color-red-20: #562318;
-  --wa-color-red-10: #36130b;
-  --wa-color-red-05: #240a05;
-
-  --wa-color-yellow-95: #f5f0e8;
-  --wa-color-yellow-90: #ede4d5;
-  --wa-color-yellow-80: #dac6a4;
-  --wa-color-yellow-70: #c7ab7b;
-  --wa-color-yellow-60: #b29054;
-  --wa-color-yellow-50: #94702b;
-  --wa-color-yellow-40: #735310;
-  --wa-color-yellow-30: #5c4003;
-  --wa-color-yellow-20: #442f00;
-  --wa-color-yellow-10: #2a1b00;
-  --wa-color-yellow-05: #1b1000;
-
-  --wa-color-green-95: #edf2ee;
-  --wa-color-green-90: #dde8df;
-  --wa-color-green-80: #b8cebc;
-  --wa-color-green-70: #98b79e;
-  --wa-color-green-60: #779e7f;
-  --wa-color-green-50: #53805d;
-  --wa-color-green-40: #366241;
-  --wa-color-green-30: #264d31;
-  --wa-color-green-20: #193922;
-  --wa-color-green-10: #0c2212;
-  --wa-color-green-05: #051509;
-
-  --wa-color-blue-95: #eef1f5;
-  --wa-color-blue-90: #e1e6ef;
-  --wa-color-blue-80: #bdc9dc;
-  --wa-color-blue-70: #9fb0ca;
-  --wa-color-blue-60: #8196b8;
-  --wa-color-blue-50: #5f779e;
-  --wa-color-blue-40: #415981;
-  --wa-color-blue-30: #2f466a;
-  --wa-color-blue-20: #203351;
-  --wa-color-blue-10: #101e34;
-  --wa-color-blue-05: #081223;
-
-  --wa-color-gray-95: #f1f1f0;
-  --wa-color-gray-90: #e7e6e4;
-  --wa-color-gray-80: #cac8c3;
-  --wa-color-gray-70: #b2afa8;
-  --wa-color-gray-60: #98958c;
-  --wa-color-gray-50: #7a766a;
-  --wa-color-gray-40: #5c594f;
-  --wa-color-gray-30: #49453e;
-  --wa-color-gray-20: #35322d;
-  --wa-color-gray-10: #1f1d1a;
-  --wa-color-gray-05: #131210;
-
-  --wa-color-primary-95: var(--wa-color-green-95);
-  --wa-color-primary-90: var(--wa-color-green-90);
-  --wa-color-primary-80: var(--wa-color-green-80);
-  --wa-color-primary-70: var(--wa-color-green-70);
-  --wa-color-primary-60: var(--wa-color-green-60);
-  --wa-color-primary-50: var(--wa-color-green-50);
-  --wa-color-primary-40: var(--wa-color-green-40);
-  --wa-color-primary-30: var(--wa-color-green-30);
-  --wa-color-primary-20: var(--wa-color-green-20);
-  --wa-color-primary-10: var(--wa-color-green-10);
-  --wa-color-primary-05: var(--wa-color-green-05);
-
-  --wa-color-base-95: var(--wa-color-gray-95);
-  --wa-color-base-90: var(--wa-color-gray-90);
-  --wa-color-base-80: var(--wa-color-gray-80);
-  --wa-color-base-70: var(--wa-color-gray-70);
-  --wa-color-base-60: var(--wa-color-gray-60);
-  --wa-color-base-50: var(--wa-color-gray-50);
-  --wa-color-base-40: var(--wa-color-gray-40);
-  --wa-color-base-30: var(--wa-color-gray-30);
-  --wa-color-base-20: var(--wa-color-gray-20);
-  --wa-color-base-10: var(--wa-color-gray-10);
-  --wa-color-base-05: var(--wa-color-gray-05);
-
-  /**
-   * Base theme colors
-   */
-
-  /* Surfaces are background layers that UI components and other content rest on.
-   * Surface colors support 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-base-95);
-  --wa-color-surface-border: var(--wa-color-base-90);
+  --wa-color-surface-default: var(--wa-color-gray-95);
+  --wa-color-surface-lowered: var(--wa-color-gray-90);
+  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-80), transparent);
 
-  /* Text colors are used for standard text elements.
-   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
-   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-40);
-  --wa-color-text-quiet: var(--wa-color-base-50);
-  --wa-color-text-link: var(--wa-color-blue-50);
+  --wa-color-text-normal: var(--wa-color-blue-20);
+  --wa-color-text-quiet: var(--wa-color-blue-40);
+  --wa-color-text-link: var(--wa-color-blue-40);
 
-  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
-   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-green-60) 96%, transparent);
-
-  /* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
-
-  /* Shadow specifies the default color for box shadows that indicate elevation. */
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
-    transparent
-  );
-
-  /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
-  --wa-color-mix-hover: black 12%;
-  --wa-color-mix-active: black 20%;
+  --wa-color-focus: var(--wa-color-blue-50);
 
   /**
-   * Semantic theme colors
-   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
-   *  *  Brand to reinforce product branding
-   *  *  Success to express validity or confirmation
-   *  *  Warning to express caution or uncertainty
-   *  *  Danger to express errors or risk
-   *  *  Neutral for elements that are innocuous or inert
-   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
-   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
-   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
-   * Muted colors have no contrast requirements.
-   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
-  */
-  --wa-color-brand-fill-loud: var(--wa-color-green-50);
-  --wa-color-brand-fill-quiet: var(--wa-color-green-95);
-  --wa-color-brand-fill-normal: var(--wa-color-green-90);
-  --wa-color-brand-border-quiet: var(--wa-color-green-90);
-  --wa-color-brand-border-normal: var(--wa-color-green-80);
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-90);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-80);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-40);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-80);
+  --wa-color-brand-border-normal: var(--wa-color-blue-70);
+  --wa-color-brand-border-loud: var(--wa-color-blue-60);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-30);
   --wa-color-brand-on-loud: white;
-  --wa-color-brand-on-normal: var(--wa-color-green-40);
-  --wa-color-brand-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --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-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-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-success-on-normal: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --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-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-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-warning-on-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --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-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-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-danger-on-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-90);
-  --wa-color-neutral-border-normal: var(--wa-color-base-80);
+  --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-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-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;
-  --wa-color-neutral-on-normal: var(--wa-color-base-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
 
   /**
    * Typography
    */
-  --wa-font-family-heading: 'Lora', serif;
   --wa-font-family-body: 'Mulish', sans-serif;
-  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --wa-font-family-heading: 'Lora', serif;
+  --wa-font-family-code: ui-monospace, monospace;
   --wa-font-family-longform: 'Lora', serif;
 
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
-  --wa-font-weight-bold: 600;
-
-  --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-semibold);
-
-  /* The default typescale is based on the Major Second scale (x1.125).
-   * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
-  --wa-font-size-root: 16px;
-  --wa-font-size-2xs: 0.6875rem; /* 11px */
-  --wa-font-size-xs: 0.75rem; /* 12px */
-  --wa-font-size-s: 0.875rem; /* 14px */
-  --wa-font-size-m: 1rem; /* 16px */
-  --wa-font-size-l: 1.25rem; /* 20px */
-  --wa-font-size-xl: 1.625rem; /* 26px */
-  --wa-font-size-2xl: 2rem; /* 32px */
-  --wa-font-size-3xl: 2.5625rem; /* 41px */
-  --wa-font-size-4xl: 3.25rem; /* 52px */
-
-  --wa-line-height-condensed: 1.25;
-  --wa-line-height-normal: 1.6;
-  --wa-line-height-expanded: 2;
+  --wa-font-weight-semibold: 600;
+  --wa-font-weight-bold: 700;
 
   /**
    * Spacing
-   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
-   * Space can be organized into three groups with distinct usage -
-   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
-   *     and padding within small components, such as badges and tooltips
-   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
-   *     typical interface elements, such as buttons and inputs
-   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
-   *     such as cards and dialogs
    */
-  /* Space is designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-space-scale: 1;
-  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
+  --wa-space-scale: 1.125;
 
   /**
    * Borders
    */
-  --wa-border-style: dotted;
-
-  /* Border widths are designed to scale according to a single base value.
-     * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-scale: 0.0625;
-  --wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-s);
-
-  /**
-   * Corners
-   */
-  /* Corners are designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-radius-scale: 0.06125;
-  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
-
-  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0;
+  --wa-border-width-scale: 1.5;
 
   /**
    * Focus
    */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: 0.1875rem; /* 3px */
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
-  --wa-focus-ring-offset: 0.0625rem; /* 1px */
+  --wa-focus-ring-width: 0.25rem;
 
   /**
-   * Links
+   * Shadows
    */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
-  --wa-link-decoration-hover: underline;
+  --wa-shadow-offset-y-scale: 0;
 
   /**
-   * Transitions
+   * Component Groups
    */
-  --wa-transition-slow: 250ms;
-  --wa-transition-normal: 150ms;
-  --wa-transition-fast: 50ms;
-
-  /**
-   * Component groups
-   */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-border-radius: var(--wa-border-radius-m);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-control-label-line-height: var(--wa-line-height-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-base-60);
-
-  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
-
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
-  --wa-panel-border-radius: var(--wa-border-radius-l);
-
-  /**
-   * From 2.x
-   */
-  --wa-tooltip-arrow-size: 0.375rem;
+  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }
 
 .wa-theme-mellow-dark,
-.wa-theme-mellow-dark :host {
+:is(:host-context(.wa-theme-mellow-dark)) {
   color-scheme: dark;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Base theme colors
+   * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-base-10);
-  --wa-color-surface-default: var(--wa-color-base-05);
-  --wa-color-surface-lowered: black;
-  --wa-color-surface-border: var(--wa-color-base-20);
+  --wa-color-surface-raised: var(--wa-color-gray-10);
+  --wa-color-surface-default: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: var(--wa-color-gray-05);
+  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
 
-  --wa-color-text-normal: var(--wa-color-base-80);
-  --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-blue-60);
+  --wa-color-text-normal: var(--wa-color-blue-90);
+  --wa-color-text-quiet: var(--wa-color-blue-70);
+  --wa-color-text-link: var(--wa-color-blue-70);
 
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-blue-60) 90%, transparent);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
+  --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);
 
@@ -368,74 +145,84 @@
   --wa-color-mix-active: black 16%;
 
   /**
-   * Semantic theme colors
+   * Semantic Colors
    */
-  --wa-color-brand-fill-loud: var(--wa-color-green-50);
-  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
-  --wa-color-brand-fill-normal: var(--wa-color-green-20);
-  --wa-color-brand-border-quiet: var(--wa-color-green-20);
-  --wa-color-brand-border-normal: var(--wa-color-green-30);
+  --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-brand-on-normal: var(--wa-color-green-70);
-  --wa-color-brand-on-quiet: var(--wa-color-green-60);
 
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
   --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-on-loud: white;
-  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --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-loud: var(--wa-color-yellow-50);
   --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-on-loud: white;
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --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-loud: var(--wa-color-red-50);
   --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-on-loud: white;
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --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-loud: var(--wa-color-base-50);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-20);
-  --wa-color-neutral-border-normal: var(--wa-color-base-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-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: white;
-  --wa-color-neutral-on-normal: var(--wa-color-base-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-60);
 }
 
-/* #region Custom styles */
-wa-button[appearance='outlined'] {
-  &[variant='brand'] {
-    --border-color: var(--wa-color-brand-border-normal);
-  }
-
-  &[variant='success'] {
-    --border-color: var(--wa-color-success-border-normal);
-  }
-
-  &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-border-normal);
-  }
-
-  &[variant='warning'] {
-    --border-color: var(--wa-color-warning-border-normal);
-  }
-
-  &[variant='danger'] {
-    --border-color: var(--wa-color-danger-border-normal);
-  }
+/**
+ * Component Styles
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  letter-spacing: calc(1em * -0.02);
+}
+
+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);
+}
+
+wa-card::part(header) {
+  border-bottom: var(--border-width) dotted var(--border-color);
+}
+wa-card::part(footer) {
+  border-top: var(--border-width) dotted var(--border-color);
+}
+
+input[type='radio'],
+wa-radio {
+  --checked-icon-scale: 0.6;
 }
-/* #endregion */

src/styles/themes/migration.css

@@ -1,567 +1,264 @@
-@import '../depth/1_semiflat.css';
+@import url('../color/vogue.css');
+@import url('default/color-semantic.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root,
 :host,
 .wa-theme-migration-light {
   color-scheme: light;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Primitive colors
-   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
-   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
-   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
-   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
-   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
+   * Foundational Colors
    */
-  --wa-color-red-95: #feeeee;
-  --wa-color-red-90: #fedede;
-  --wa-color-red-80: #fdb8b8;
-  --wa-color-red-70: #fa9292;
-  --wa-color-red-60: #ee6c6c;
-  --wa-color-red-50: #d43c3c;
-  --wa-color-red-40: #ac1e1e;
-  --wa-color-red-30: #640f0f;
-  --wa-color-red-20: #631111;
-  --wa-color-red-10: #3b0d0d;
-  --wa-color-red-05: #260606;
+  --wa-color-text-link: var(--wa-color-indigo-40);
 
-  --wa-color-yellow-95: #fef2c4;
-  --wa-color-yellow-90: #fde494;
-  --wa-color-yellow-80: #fbc129;
-  --wa-color-yellow-70: #f29c0b;
-  --wa-color-yellow-60: #db7e13;
-  --wa-color-yellow-50: #af6005;
-  --wa-color-yellow-40: #904207;
-  --wa-color-yellow-30: #713406;
-  --wa-color-yellow-20: #532408;
-  --wa-color-yellow-10: #321606;
-  --wa-color-yellow-05: #1f0c01;
+  --wa-color-shadow: rgb(0 0 0 / 0.05);
 
-  --wa-color-green-95: #e9f5ed;
-  --wa-color-green-90: #cfedd9;
-  --wa-color-green-80: #a2d5b4;
-  --wa-color-green-70: #6cc08a;
-  --wa-color-green-60: #38a961;
-  --wa-color-green-50: #178640;
-  --wa-color-green-40: #0e662e;
-  --wa-color-green-30: #0d5026;
-  --wa-color-green-20: #0c391d;
-  --wa-color-green-10: #082213;
-  --wa-color-green-05: #02140a;
+  --wa-color-focus: var(--wa-color-indigo-50);
 
-  --wa-color-indigo-95: #eef2ff;
-  --wa-color-indigo-90: #dee5fd;
-  --wa-color-indigo-80: #bec8f2;
-  --wa-color-indigo-70: #9dabf0;
-  --wa-color-indigo-60: #818cf7;
-  --wa-color-indigo-50: #6063eb;
-  --wa-color-indigo-40: #4941d3;
-  --wa-color-indigo-30: #3930ad;
-  --wa-color-indigo-20: #29247a;
-  --wa-color-indigo-10: #191843;
-  --wa-color-indigo-05: #0f0e26;
-
-  --wa-color-gray-95: #f1f2f3;
-  --wa-color-gray-90: #e5e6e7;
-  --wa-color-gray-80: #c8c9cd;
-  --wa-color-gray-70: #acafb4;
-  --wa-color-gray-60: #8f95a0;
-  --wa-color-gray-50: #6e7482;
-  --wa-color-gray-40: #4f5967;
-  --wa-color-gray-30: #3c4655;
-  --wa-color-gray-20: #293240;
-  --wa-color-gray-10: #171d2c;
-  --wa-color-gray-05: #0d111b;
-
-  --wa-color-primary-95: var(--wa-color-indigo-95);
-  --wa-color-primary-90: var(--wa-color-indigo-90);
-  --wa-color-primary-80: var(--wa-color-indigo-80);
-  --wa-color-primary-70: var(--wa-color-indigo-70);
-  --wa-color-primary-60: var(--wa-color-indigo-60);
-  --wa-color-primary-50: var(--wa-color-indigo-50);
-  --wa-color-primary-40: var(--wa-color-indigo-40);
-  --wa-color-primary-30: var(--wa-color-indigo-30);
-  --wa-color-primary-20: var(--wa-color-indigo-20);
-  --wa-color-primary-10: var(--wa-color-indigo-10);
-  --wa-color-primary-05: var(--wa-color-indigo-05);
-
-  --wa-color-base-95: var(--wa-color-gray-95);
-  --wa-color-base-90: var(--wa-color-gray-90);
-  --wa-color-base-80: var(--wa-color-gray-80);
-  --wa-color-base-70: var(--wa-color-gray-70);
-  --wa-color-base-60: var(--wa-color-gray-60);
-  --wa-color-base-50: var(--wa-color-gray-50);
-  --wa-color-base-40: var(--wa-color-gray-40);
-  --wa-color-base-30: var(--wa-color-gray-30);
-  --wa-color-base-20: var(--wa-color-gray-20);
-  --wa-color-base-10: var(--wa-color-gray-10);
-  --wa-color-base-05: var(--wa-color-gray-05);
+  --wa-color-mix-hover: var(--wa-color-gray-80) 20%;
+  --wa-color-mix-active: var(--wa-color-gray-80) 10%;
 
   /**
-   * Foundational theme colors
+   * Semantic Colors
    */
-
-  /* Surfaces are background layers that UI components and other content rest on.
-   * Surface colors support 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-base-95);
-  --wa-color-surface-border: var(--wa-color-base-90);
-
-  /* Text colors are used for standard text elements.
-   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
-   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-10);
-  --wa-color-text-quiet: var(--wa-color-base-40);
-  --wa-color-text-link: var(--wa-color-brand-on-quiet);
-
-  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
-   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
-  --wa-color-focus: var(--wa-color-primary-50);
-
-  /* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-20) 32%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
-
-  /* Shadow specifies the default color for box shadows that indicate elevation. */
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
-    transparent
-  );
-
-  /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
-  --wa-color-mix-hover: var(--wa-color-base-80) 20%;
-  --wa-color-mix-active: var(--wa-color-base-80) 10%;
-
-  /**
-   * Semantic theme colors
-   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
-   *  *  Brand to reinforce product branding
-   *  *  Success to express validity or confirmation
-   *  *  Warning to express caution or uncertainty
-   *  *  Danger to express errors or risk
-   *  *  Neutral for elements that are innocuous or inert
-   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
-   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
-   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
-   * Muted colors have no contrast requirements.
-   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
-  */
-
-  --wa-color-brand-fill-loud: var(--wa-color-primary-40);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-90);
-  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-primary-80), transparent);
-  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-primary-70), transparent);
+  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-95) 85%, transparent);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-80), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-70) 60%, transparent);
+  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-60) 70%, transparent);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
   --wa-color-brand-on-loud: white;
-  --wa-color-brand-on-normal: var(--wa-color-primary-40);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-40);
 
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
   --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: color-mix(in oklab, var(--wa-color-green-80), transparent);
-  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70), transparent);
+  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70) 60%, transparent);
+  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-60) 70%, transparent);
+  --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-success-on-normal: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-95) 85%, transparent);
   --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: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
-  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70), transparent);
+  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70) 60%, transparent);
+  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-60) 70%, transparent);
+  --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-warning-on-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-95) 85%, transparent);
   --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: color-mix(in oklab, var(--wa-color-red-80), transparent);
-  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70), transparent);
+  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70) 60%, transparent);
+  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-60) 70%, transparent);
+  --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-danger-on-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-fill-loud: var(--wa-color-base-10);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-90);
-  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
-  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-base-70), transparent 50%);
+  --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-95) 85%, transparent);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
+  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-80), transparent);
+  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-70) 60%, transparent);
+  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-60) 70%, transparent);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-30);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
   --wa-color-neutral-on-loud: white;
-  --wa-color-neutral-on-normal: var(--wa-color-base-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-40);
 
   /**
    * Typography
    */
-  --wa-font-family-heading: 'Inter', sans-serif;
   --wa-font-family-body: 'Inter', sans-serif;
-  --wa-font-family-code: ui-monospace, monospace;
-  --wa-font-family-longform: ui-serif, serif;
+  --wa-font-family-heading: var(--wa-font-family-body);
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
   --wa-font-weight-semibold: 500;
-  --wa-font-weight-bold: 600;
-  --wa-font-weight-black: 700;
+  --wa-font-weight-bold: 700;
 
-  --wa-font-weight-heading: var(--wa-font-weight-black);
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-bold);
+  --wa-font-size-scale: 0.875;
 
-  /* The default typescale is based on the Major Second scale (x1.125).
-   * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
-  --wa-font-size-root: 14px;
-  --wa-font-size-2xs: 0.6875rem; /* 11px */
-  --wa-font-size-xs: 0.75rem; /* 12px */
-  --wa-font-size-s: 0.875rem; /* 14px */
-  --wa-font-size-m: 1rem; /* 16px */
-  --wa-font-size-l: 1.25rem; /* 20px */
-  --wa-font-size-xl: 1.625rem; /* 26px */
-  --wa-font-size-2xl: 2rem; /* 32px */
-  --wa-font-size-3xl: 2.5625rem; /* 41px */
-  --wa-font-size-4xl: 3.25rem; /* 52px */
-
-  --wa-line-height-condensed: 1.25;
-  --wa-line-height-normal: 1.6;
-  --wa-line-height-expanded: 2;
+  --wa-link-decoration-default: none;
+  --wa-link-decoration-hover: none;
 
   /**
    * Spacing
-   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
-   * Space can be organized into three groups with distinct usage -
-   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
-   *     and padding within small components, such as badges and tooltips
-   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
-   *     typical interface elements, such as buttons and inputs
-   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
-   *     such as cards and dialogs
    */
-  /* Space is designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-space-scale: 1;
-  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
-
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-     * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-scale: calc(1 / 14);
-  --wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-s);
-
-  /**
-   * Corners
-   */
-  /* Corners are designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-radius-scale: 0.375;
-  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
-
-  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0;
+  --wa-space-scale: 0.875;
 
   /**
    * Focus
    */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: calc((2 / 14) * 1rem);
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-    color-mix(in oklab, var(--wa-color-focus) 98%, transparent);
+  --wa-focus-ring-width: 0.125rem;
   --wa-focus-ring-offset: 0;
 
   /**
-   * Links
+   * Shadows
    */
-  --wa-link-decoration-default: none;
-  --wa-link-decoration-hover: underline;
+  --wa-shadow-offset-y-scale: 0.5;
+  --wa-shadow-offset-blur-scale: 0.5;
+  --wa-shadow-spread-scale: 0;
 
   /**
-   * Transitions
+   * Component Groups
    */
-  --wa-transition-slow: 250ms;
-  --wa-transition-normal: 150ms;
-  --wa-transition-fast: 50ms;
+  --wa-form-control-background-color: color-mix(in oklab, var(--wa-color-surface-raised), transparent);
+  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 
-  /**
-   * Component groups
-   */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-border-radius: var(--wa-border-radius-m);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-quiet);
   --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
   --wa-form-control-label-line-height: var(--wa-line-height-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-base-60);
-
-  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
-
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
-  --wa-panel-border-radius: var(--wa-border-radius-l);
-
-  /**
-   * From 2.x
-   */
-  --wa-tooltip-arrow-size: 0.375rem;
 }
 
 .wa-theme-migration-dark,
-.wa-theme-migration-dark :host {
+:is(:host-context(.wa-theme-migration-dark)) {
   color-scheme: dark;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Base theme colors
+   * Foundational Colors
    */
-  --wa-color-surface-raised: color-mix(in oklab, var(--wa-color-base-10) 60%, var(--wa-color-base-20));
-  --wa-color-surface-default: var(--wa-color-base-10);
-  --wa-color-surface-lowered: var(--wa-color-base-05);
+  --wa-color-surface-raised: var(--wa-color-gray-10);
+  --wa-color-surface-default: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
   --wa-color-surface-border: rgb(255 255 255 / 0.1);
 
   --wa-color-text-normal: white;
-  --wa-color-text-quiet: var(--wa-color-base-60);
-  --wa-color-text-link: var(--wa-color-brand-on-quiet);
+  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-link: var(--wa-color-indigo-70);
 
-  --wa-color-focus: var(--wa-color-primary-60);
+  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
 
-  --wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
+  --wa-color-shadow: rgb(0 0 0 / 0.2);
 
-  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 16% + 40%), transparent);
+  --wa-color-focus: var(--wa-color-indigo-60);
 
-  --wa-color-mix-hover: var(--wa-color-base-70) 20%;
-  --wa-color-mix-active: var(--wa-color-base-70) 10%;
+  --wa-color-mix-hover: var(--wa-color-gray-70) 20%;
+  --wa-color-mix-active: var(--wa-color-gray-70) 10%;
 
   /**
-   * Semantic theme colors
+   * Semantic Colors
    */
-  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-20);
-  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-primary-20), transparent);
-  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-primary-30), transparent);
+  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-10) 90%, transparent);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-50);
+  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-20), transparent);
+  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-30), transparent);
+  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-40), transparent);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
   --wa-color-brand-on-loud: white;
-  --wa-color-brand-on-normal: var(--wa-color-primary-70);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-60);
 
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);
   --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: color-mix(in oklab, var(--wa-color-green-20), transparent);
-  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30), transparent);
-  --wa-color-success-on-loud: white;
-  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30) 60%, transparent);
+  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-40) 70%, transparent);
   --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-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-10) 90%, transparent);
   --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: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
-  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30), transparent);
-  --wa-color-warning-on-loud: white;
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30) 60%, transparent);
+  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-40) 70%, transparent);
   --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-loud: var(--wa-color-red-50);
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-10) 90%, transparent);
   --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: color-mix(in oklab, var(--wa-color-red-20), transparent);
-  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30), transparent);
-  --wa-color-danger-on-loud: white;
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30) 60%, transparent);
+  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-40) 70%, transparent);
   --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: color-mix(in oklab, var(--wa-color-gray-10) 90%, transparent);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
   --wa-color-neutral-fill-loud: white;
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-20);
-  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-20), transparent);
-  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-base-30), transparent);
-  --wa-color-neutral-on-loud: var(--wa-color-base-10);
-  --wa-color-neutral-on-normal: var(--wa-color-base-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-60);
+  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-20), transparent);
+  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-30) 60%, transparent);
+  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-40) 70%, transparent);
+  --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-10);
 }
 
-/* #region Custom Styles */
-@container preview (min-width: 0) {
-  h1,
-  h2,
-  h3,
-  h4 {
-    letter-spacing: calc(1em * -0.03);
-  }
+/**
+ * Component Styles
+ */
+h1,
+h2,
+h3,
+h4 {
+  letter-spacing: calc(1em * -0.03);
+}
 
-  .project-header {
-    background: var(--wa-color-surface-default);
-  }
+wa-avatar {
+  --background-color: var(--wa-color-neutral-fill-quiet);
+  --text-color: var(--wa-color-neutral-on-quiet);
+}
 
-  .hero {
-    --hero-background-color: var(--wa-color-surface-default);
-    --hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
-    background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
-      radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
-      radial-gradient(
-        circle at 40% 50%,
-        color-mix(in oklab, var(--wa-color-primary-40) 16%, transparent),
-        transparent 40%
-      ),
-      radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
-      radial-gradient(
-        circle at 80% 80%,
-        color-mix(in oklab, var(--wa-color-primary-40) 16%, transparent),
-        transparent 40%
-      ),
-      radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
-      linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
-      linear-gradient(90deg, var(--hero-background-color), transparent),
-      repeating-linear-gradient(
-        var(--hero-lines-color),
-        var(--hero-lines-color) 1px,
-        transparent 1px,
-        transparent 10rem,
-        var(--hero-lines-color) 10rem
-      ),
-      repeating-linear-gradient(
-        90deg,
-        var(--hero-lines-color),
-        var(--hero-lines-color) 1px,
-        transparent 1px,
-        transparent 10rem,
-        var(--hero-lines-color) 10rem
-      ),
-      var(--hero-background-color);
+a,
+wa-badge,
+wa-tag {
+  font-weight: var(--wa-font-weight-semibold);
+}
 
-    & .title {
-      padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
+:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
+    [appearance='plain'],
+    .wa-plain
+  ) {
+  box-shadow: var(--wa-shadow-s);
+}
 
-      & .hero-title {
-        font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
-        margin-block: 0 var(--wa-space-3xl);
-      }
-    }
-  }
+wa-callout {
+  border-radius: var(--wa-border-radius-m);
 
-  .badge-stock {
-    position: absolute;
-    top: var(--wa-space-l);
-    left: var(--wa-space-l);
-  }
-
-  .message-composer wa-card {
-    &::part(footer) {
-      border: none;
-    }
-    & wa-icon-button {
-      color: var(--wa-color-base-50);
-    }
-  }
-
-  .products {
-    margin-top: calc(var(--wa-space-3xl) * -8);
-  }
-
-  pre.codeblock {
-    background-color: var(--wa-color-neutral-fill-normal);
-  }
-
-  wa-avatar {
-    --wa-color-neutral-fill-loud: var(--wa-color-base-50);
-  }
-
-  a,
-  wa-badge,
-  wa-tag {
-    font-weight: var(--wa-font-weight-semibold);
-  }
-
-  wa-badge {
-    --border-color: transparent;
-
-    &[variant='brand'] {
-      --background: var(--wa-color-brand-fill-normal);
-      --text-color: var(--wa-color-brand-on-normal);
-    }
-    &[variant='success'] {
-      --background: var(--wa-color-success-fill-normal);
-      --text-color: var(--wa-color-success-on-normal);
-    }
-    &[variant='warning'] {
-      --background: var(--wa-color-warning-fill-normal);
-      --text-color: var(--wa-color-warning-on-normal);
-    }
-    &[variant='danger'] {
-      --background: var(--wa-color-danger-fill-normal);
-      --text-color: var(--wa-color-danger-on-normal);
-    }
-    &[variant='neutral'] {
-      --background: var(--wa-color-neutral-fill-normal);
-      --text-color: var(--wa-color-neutral-on-normal);
-    }
-  }
-
-  wa-button[appearance='outline'] {
-    --border-color: color-mix(in oklab, var(--text-color), transparent 75%);
-  }
-
-  wa-input,
-  wa-select {
-    --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) -0.08em
-      var(--wa-color-shadow);
-    & wa-icon {
-      color: var(--wa-color-text-quiet);
-    }
-  }
-
-  wa-radio-button:not([checked]) {
-    --border-color: var(--wa-color-neutral-border-normal);
-    --text-color: var(--wa-color-text-normal);
-  }
-
-  wa-switch {
-    --border-color: transparent;
-    --height: calc(var(--thumb-size) * (18 / 14));
-    --thumb-color: white;
-    --thumb-color-checked: var(--thumb-color);
-    --thumb-size: 1em;
-    --thumb-shadow: var(--wa-shadow-m);
-    --width: calc(var(--thumb-size) * (32 / 14));
+  &::part(icon) {
+    opacity: 0.6;
   }
 }
-/* #endregion */
+
+input[type='radio'],
+wa-radio {
+  --background-color-checked: var(--wa-form-control-activated-color);
+  --checked-icon-color: var(--wa-color-brand-on-loud);
+  --checked-icon-scale: 0.4;
+}
+
+wa-switch {
+  --background-color: var(--wa-color-neutral-fill-normal);
+  --border-color: transparent;
+  --height: calc(var(--thumb-size) * (18 / 14));
+  --thumb-color: white;
+  --thumb-color-checked: var(--thumb-color);
+  --thumb-size: 1.25em;
+  --thumb-shadow: var(--wa-shadow-s);
+  --width: calc(var(--thumb-size) * (32 / 14));
+}
+
+wa-tab {
+  color: var(--wa-color-text-quiet);
+}

src/styles/themes/premium.css

@@ -1,4 +1,12 @@
-@import '../depth/1_semiflat.css';
+@import url('../color/anodized.css');
+@import url('default/color-semantic.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
 @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');
 
@@ -6,194 +14,65 @@
 :host,
 .wa-theme-premium-light {
   color-scheme: light;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Primitive colors
-   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
-   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
-   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
-   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
-   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
+   * Foundational Colors
    */
-  --wa-color-red-95: #fbeeeb;
-  --wa-color-red-90: #f8e0d9;
-  --wa-color-red-80: #efbdb1;
-  --wa-color-red-70: #e39f8d;
-  --wa-color-red-60: #d1806b;
-  --wa-color-red-50: #b35e49;
-  --wa-color-red-40: #8e4330;
-  --wa-color-red-30: #733223;
-  --wa-color-red-20: #562317;
-  --wa-color-red-10: #36130a;
-  --wa-color-red-05: #240a05;
-
-  --wa-color-yellow-95: #fff2b8;
-  --wa-color-yellow-90: #ffe578;
-  --wa-color-yellow-80: #eac46c;
-  --wa-color-yellow-70: #d5a766;
-  --wa-color-yellow-60: #bd8a5e;
-  --wa-color-yellow-50: #9d6a4f;
-  --wa-color-yellow-40: #794f3c;
-  --wa-color-yellow-30: #603d2f;
-  --wa-color-yellow-20: #482b21;
-  --wa-color-yellow-10: #2c1912;
-  --wa-color-yellow-05: #1d0e0a;
-
-  --wa-color-green-95: #dcf8ea;
-  --wa-color-green-90: #bcf1d8;
-  --wa-color-green-80: #6dddad;
-  --wa-color-green-70: #33c685;
-  --wa-color-green-60: #00aa66;
-  --wa-color-green-50: #008754;
-  --wa-color-green-40: #006646;
-  --wa-color-green-30: #00503b;
-  --wa-color-green-20: #003a2d;
-  --wa-color-green-10: #00231b;
-  --wa-color-green-05: #001610;
-
-  --wa-color-teal-95: #cbfaf9;
-  --wa-color-teal-90: #9ff4f3;
-  --wa-color-teal-80: #1adfdb;
-  --wa-color-teal-70: #00c3be;
-  --wa-color-teal-60: #1aa6a0;
-  --wa-color-teal-50: #15837e;
-  --wa-color-teal-40: #10635e;
-  --wa-color-teal-30: #0c4e4a;
-  --wa-color-teal-20: #083936;
-  --wa-color-teal-10: #04221f;
-  --wa-color-teal-05: #021513;
-
-  --wa-color-gray-95: #f1f2f4;
-  --wa-color-gray-90: #e3e6e9;
-  --wa-color-gray-80: #c3cad1;
-  --wa-color-gray-70: #a6b0ba;
-  --wa-color-gray-60: #8897a3;
-  --wa-color-gray-50: #637787;
-  --wa-color-gray-40: #435b6e;
-  --wa-color-gray-30: #2c485d;
-  --wa-color-gray-20: #11344c;
-  --wa-color-gray-10: #002034;
-  --wa-color-gray-05: #0f1310;
-
-  --wa-color-primary-95: var(--wa-color-teal-95);
-  --wa-color-primary-90: var(--wa-color-teal-90);
-  --wa-color-primary-80: var(--wa-color-teal-80);
-  --wa-color-primary-70: var(--wa-color-teal-70);
-  --wa-color-primary-60: var(--wa-color-teal-60);
-  --wa-color-primary-50: var(--wa-color-teal-50);
-  --wa-color-primary-40: var(--wa-color-teal-40);
-  --wa-color-primary-30: var(--wa-color-teal-30);
-  --wa-color-primary-20: var(--wa-color-teal-20);
-  --wa-color-primary-10: var(--wa-color-teal-10);
-  --wa-color-primary-05: var(--wa-color-teal-05);
-
-  --wa-color-base-95: var(--wa-color-gray-95);
-  --wa-color-base-90: var(--wa-color-gray-90);
-  --wa-color-base-80: var(--wa-color-gray-80);
-  --wa-color-base-70: var(--wa-color-gray-70);
-  --wa-color-base-60: var(--wa-color-gray-60);
-  --wa-color-base-50: var(--wa-color-gray-50);
-  --wa-color-base-40: var(--wa-color-gray-40);
-  --wa-color-base-30: var(--wa-color-gray-30);
-  --wa-color-base-20: var(--wa-color-gray-20);
-  --wa-color-base-10: var(--wa-color-gray-10);
-  --wa-color-base-05: var(--wa-color-gray-05);
+  --wa-color-surface-border: var(--wa-color-gray-80);
 
   /**
-   * Base theme colors
+   * 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-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);
 
-  /* Surfaces are background layers that UI components and other content rest on.
-   * Surface colors support 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-base-95);
-  --wa-color-surface-border: var(--wa-color-base-80);
-
-  /* Text colors are used for standard text elements.
-   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
-   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-10);
-  --wa-color-text-quiet: var(--wa-color-base-50);
-  --wa-color-text-link: var(--wa-color-primary-50);
-
-  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
-   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-primary-70) 76%, transparent);
-
-  /* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
-
-  /* Shadow specifies the default color for box shadows that indicate elevation. */
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-10) calc(var(--wa-shadow-blur-scale) * 8% + 16%),
-    transparent
-  );
-
-  /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
-  --wa-color-mix-hover: black 12%;
-  --wa-color-mix-active: black 20%;
-
-  /**
-   * Semantic theme colors
-   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
-   *  *  Brand to reinforce product branding
-   *  *  Success to express validity or confirmation
-   *  *  Warning to express caution or uncertainty
-   *  *  Danger to express errors or risk
-   *  *  Neutral for elements that are innocuous or inert
-   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
-   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
-   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
-   * Muted colors have no contrast requirements.
-   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
-  */
-  --wa-color-brand-fill-loud: var(--wa-color-primary-50);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-90);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-80);
-  --wa-color-brand-border-quiet: var(--wa-color-primary-80);
-  --wa-color-brand-border-normal: var(--wa-color-primary-50);
-  --wa-color-brand-on-loud: var(--wa-color-primary-95);
-  --wa-color-brand-on-normal: var(--wa-color-primary-20);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-50);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
   --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-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-50);
+  --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-normal: var(--wa-color-green-20);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
 
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
   --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-border-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-50);
+  --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-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
 
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
   --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-border-quiet: var(--wa-color-red-80);
-  --wa-color-danger-border-normal: var(--wa-color-red-50);
+  --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-normal: var(--wa-color-red-20);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
 
-  --wa-color-neutral-fill-loud: var(--wa-color-base-50);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-80);
-  --wa-color-neutral-border-normal: var(--wa-color-base-50);
-  --wa-color-neutral-on-loud: var(--wa-color-base-95);
-  --wa-color-neutral-on-normal: var(--wa-color-base-20);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-50);
+  --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-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);
+  --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: var(--wa-color-gray-95);
 
   /**
    * Typography
@@ -204,514 +83,194 @@
     monospace;
   --wa-font-family-longform: 'Lora', serif;
 
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
-  --wa-font-weight-bold: 600;
-
   --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);
 
-  /* The default typescale is based on the Major Second scale (x1.125).
-   * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
-  --wa-font-size-root: 16px;
-  --wa-font-size-2xs: 0.6875rem; /* 11px */
-  --wa-font-size-xs: 0.75rem; /* 12px */
-  --wa-font-size-s: 0.875rem; /* 14px */
-  --wa-font-size-m: 1rem; /* 16px */
-  --wa-font-size-l: 1.25rem; /* 20px */
-  --wa-font-size-xl: 1.625rem; /* 26px */
-  --wa-font-size-2xl: 2rem; /* 32px */
-  --wa-font-size-3xl: 2.5625rem; /* 41px */
-  --wa-font-size-4xl: 3.25rem; /* 52px */
-
-  --wa-line-height-condensed: 1.25;
-  --wa-line-height-normal: 1.6;
-  --wa-line-height-expanded: 2;
-
-  /**
-   * Spacing
-   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
-   * Space can be organized into three groups with distinct usage -
-   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
-   *     and padding within small components, such as badges and tooltips
-   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
-   *     typical interface elements, such as buttons and inputs
-   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
-   *     such as cards and dialogs
-   */
-  /* Space is designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-space-scale: 1;
-  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
-
   /**
    * Borders
    */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-     * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-scale: 0.09375;
-  --wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-s);
+  --wa-border-width-scale: 1.5;
 
   /**
-   * Corners
-   */
-  /* Corners are designed to scale according to a single base value.
-   * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-radius-scale: 0.25;
-  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
-
-  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0;
+    * Rounding
+    */
+  --wa-border-radius-scale: 1.33;
 
   /**
-   * Focus
-   */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: 0.1875rem; /* 3px */
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
-  --wa-focus-ring-offset: 0.0625rem; /* 1px */
-
-  /**
-   * Links
-   */
-  --wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
-  --wa-link-decoration-hover: underline;
-
-  /**
-   * Transitions
-   */
-  --wa-transition-slow: 250ms;
-  --wa-transition-normal: 150ms;
-  --wa-transition-fast: 50ms;
-
-  /**
-   * Component groups
+   * Component Groups
    */
   --wa-form-control-background-color: transparent;
-
-  --wa-form-control-border-radius: var(--wa-border-radius-m);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-control-label-line-height: var(--wa-line-height-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-base-60);
-
-  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
-  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
-
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
-  --wa-panel-border-radius: var(--wa-border-radius-m);
-
-  /**
-   * From 2.x
-   */
-  --wa-tooltip-arrow-size: 0.375rem;
-
-  /* Depth */
-  --wa-shadow-blur-scale: 0.375;
-  --wa-shadow-offset-y-scale: 0.1875;
+  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }
 
 .wa-theme-premium-dark,
-.wa-theme-premium-dark :host {
+:is(:host-context(.wa-theme-premium-dark)) {
   color-scheme: dark;
+  color: var(--wa-color-text-normal);
 
   /**
-   * Base theme colors
+   * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-base-30);
-  --wa-color-surface-default: var(--wa-color-base-20);
-  --wa-color-surface-lowered: var(--wa-color-base-10);
-  --wa-color-surface-border: var(--wa-color-base-30);
+  --wa-color-surface-raised: var(--wa-color-gray-30);
+  --wa-color-surface-default: var(--wa-color-gray-20);
+  --wa-color-surface-lowered: var(--wa-color-gray-10);
+  --wa-color-surface-border: var(--wa-color-gray-30);
 
-  --wa-color-text-normal: var(--wa-color-base-95);
-  --wa-color-text-quiet: var(--wa-color-base-80);
-  --wa-color-text-link: var(--wa-color-primary-80);
+  --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-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
+  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
 
-  --wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
+  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
 
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-10) calc(var(--wa-shadow-blur-scale) * 16% + 40%),
-    transparent
-  );
+  --wa-color-focus: var(--wa-color-blue-60);
 
   --wa-color-mix-hover: black 8%;
   --wa-color-mix-active: black 16%;
 
   /**
-   * Semantic theme colors
-   */
-  --wa-color-brand-fill-loud: var(--wa-color-primary-80);
-  --wa-color-brand-fill-quiet: var(--wa-color-primary-30);
-  --wa-color-brand-fill-normal: var(--wa-color-primary-40);
-  --wa-color-brand-border-quiet: var(--wa-color-primary-30);
-  --wa-color-brand-border-normal: var(--wa-color-primary-40);
-  --wa-color-brand-on-loud: var(--wa-color-primary-20);
-  --wa-color-brand-on-normal: var(--wa-color-primary-90);
-  --wa-color-brand-on-quiet: var(--wa-color-primary-70);
+    * 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-success-fill-loud: var(--wa-color-green-80);
   --wa-color-success-fill-quiet: var(--wa-color-green-30);
   --wa-color-success-fill-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
   --wa-color-success-border-quiet: var(--wa-color-green-30);
   --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-on-loud: var(--wa-color-green-20);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-border-loud: var(--wa-color-green-70);
   --wa-color-success-on-quiet: var(--wa-color-green-70);
+  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-on-loud: var(--wa-color-green-20);
 
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
   --wa-color-warning-fill-quiet: var(--wa-color-yellow-30);
   --wa-color-warning-fill-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
   --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
   --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-20);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-70);
   --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-on-loud: var(--wa-color-yellow-20);
 
-  --wa-color-danger-fill-loud: var(--wa-color-red-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-border-quiet: var(--wa-color-red-30);
   --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-on-loud: var(--wa-color-red-20);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
+  --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-neutral-fill-loud: var(--wa-color-base-40);
-  --wa-color-neutral-fill-quiet: var(--wa-color-base-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-base-30);
-  --wa-color-neutral-border-quiet: var(--wa-color-base-30);
-  --wa-color-neutral-border-normal: var(--wa-color-base-70);
-  --wa-color-neutral-on-loud: var(--wa-color-base-95);
-  --wa-color-neutral-on-normal: var(--wa-color-base-90);
-  --wa-color-neutral-on-quiet: var(--wa-color-base-70);
+  --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-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);
 }
 
-/* #region Custom Styles */
-@container preview (min-width: 0) {
-  .preview-container pre,
-  .preview-container code {
-    background-color: var(--wa-color-base-90);
-    font-size: var(--font-size-m);
+/**
+ * Component Styles
+ */
+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);
+}
+
+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-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);
+}
+
+wa-badge,
+wa-button::part(label),
+wa-tag {
+  text-transform: uppercase;
+}
+
+wa-badge,
+wa-tag {
+  border-width: 0;
+}
+
+&:not(.wa-theme-premium-dark) wa-alert {
+  &[variant='brand'] {
+    --background: var(--wa-color-primary-95);
   }
-
-  /* syntax highlighting */
-  .token {
-    &.selector {
-      color: var(--wa-color-green-30);
-    }
-
-    &.tag {
-      color: var(--wa-color-primary-30);
-    }
-
-    &.punctuation {
-      color: var(--wa-color-base-10);
-    }
-
-    &.attr-name {
-      color: var(--wa-color-green-30);
-    }
-
-    &.attr-value {
-      color: var(--wa-color-yellow-30);
-    }
+  &[variant='success'] {
+    --background: var(--wa-color-green-95);
   }
-
-  wa-rating {
-    --symbol-size: var(--wa-font-size-l);
-    --symbol-color-active: var(--wa-color-text-quiet);
+  &[variant='warning'] {
+    --background: var(--wa-color-yellow-95);
   }
-
-  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);
-  }
-
-  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-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-activated: var(--wa-color-brand-fill-loud);
-    --pagination-color-resting: var(--wa-color-neutral-fill-normal);
-  }
-
-  wa-badge,
-  wa-button::part(label),
-  wa-tag {
-    text-transform: uppercase;
-  }
-
-  wa-badge,
-  wa-tag {
-    --border-width: 0;
-  }
-
-  &:not(.wa-theme-premium-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);
-    }
-  }
-
-  .project-header {
-    background-color: var(--wa-color-warning-fill-normal);
-  }
-
-  .strata.hero {
-    height: 60rem;
-    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
-    background-size: cover;
-    padding-top: var(--wa-space-2xl);
-    padding-left: var(--wa-space-s);
-    text-align: right;
-  }
-
-  .hero .hero-title {
-    color: var(--wa-color-warning-on-normal);
-    font-style: italic;
-  }
-
-  .blog wa-avatar {
-    border-radius: var(--wa-border-radius-circle);
-    overflow: hidden;
-  }
-
-  .strata.products {
-    margin-top: -25rem;
-    padding-top: 10rem;
-    background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
-  }
-
-  .product-card .badge-stock {
-    position: absolute;
-    top: var(--wa-space-xl);
-    right: var(--wa-space-xl);
-  }
-
-  .product-card wa-rating {
-    --symbol-size: var(--wa-font-size-m);
-  }
-
-  .product-card .title {
-    font-size: var(--wa-font-size-2xl);
-  }
-
-  .product-card .description {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .product-card::part(footer) {
-    border-width: 0;
-  }
-
-  .product-card wa-button:not(:last-child) {
-    margin-inline-end: var(--wa-space-xs);
-  }
-
-  .blog .authors a {
-    --wa-color-text-link: var(--wa-color-text-quiet);
-    --wa-link-decoration-default: none;
-  }
-
-  .message-composer wa-card {
-    --background: var(--wa-color-surface-raised);
-  }
-
-  .message-composer wa-card::part(header) {
-    border-width: 0;
-    background-color: var(--wa-color-neutral-fill-quiet);
-  }
-
-  &:not(.wa-theme-premium-dark) .message-composer wa-card {
-    --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
-  }
-
-  .message-composer wa-card::part(footer) {
-    border-width: 0;
-    --padding: var(--wa-space-s) var(--wa-space-xl);
-  }
-
-  .message-composer .grouped-buttons wa-icon-button::part(base) {
-    block-size: var(--wa-form-control-height-s);
-    inline-size: var(--wa-form-control-height-s);
-    justify-content: center;
-  }
-  .message-composer .grouped-buttons wa-icon-button::part(base):hover {
-    background-color: var(--wa-color-neutral-fill-normal);
-    color: var(--wa-color-text-normal);
-  }
-
-  .support-table th {
-    text-transform: uppercase;
-    font-weight: var(--wa-font-weight-normal);
-    color: var(--wa-color-text-quiet);
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  .support-table th:first-child {
-    border-radius: var(--wa-border-radius-l) 0 0 0;
-  }
-
-  .support-table th:last-child {
-    border-radius: 0 var(--wa-border-radius-l) 0 0;
-  }
-
-  .support-table tr {
-    --wa-color-surface-border: var(--wa-color-surface-lowered);
-  }
-
-  .checkout-form wa-input::part(form-control-label),
-  .checkout-form wa-select::part(form-control-label) {
-    font-size: var(--wa-font-size-s);
-    margin-block-end: var(--wa-space-xs);
-  }
-
-  .order-item .finish {
-    color: var(--wa-color-text-quiet);
-    font-size: var(--wa-font-size-s);
-    font-style: italic;
-  }
-
-  .wa-theme-premium-dark {
-    & .message-composer .tools .grouped-buttons:not(:last-of-type) {
-      --wa-color-neutral-border-quiet: var(--wa-color-base-40);
-    }
-
-    & .preview-container pre,
-    & .preview-container code {
-      background-color: var(--wa-color-base-20);
-    }
-
-    /* syntax highlighting */
-    & .token {
-      &.selector {
-        color: var(--wa-color-green-80);
-      }
-
-      &.tag {
-        color: var(--wa-color-primary-80);
-      }
-
-      &.punctuation {
-        color: var(--wa-color-base-95);
-      }
-
-      &.attr-name {
-        color: var(--wa-color-green-80);
-      }
-
-      &.attr-value {
-        color: var(--wa-color-yellow-80);
-      }
-    }
+  &[variant='danger'] {
+    --background: var(--wa-color-red-95);
   }
 }
 
-/* responsive */
-@container preview (min-width: 1040px) {
-  .strata.hero {
-    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
-    padding-top: 15rem;
-    padding-left: 50%;
+wa-badge {
+  &[variant='brand'] {
+    --background: var(--wa-color-primary-80);
+    --text-color: var(--wa-color-primary-20);
   }
-
-  .strata.products {
-    margin-top: -25rem;
-    padding-top: 10rem;
-    background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
+  &[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);
   }
 }
-
-/* #endregion */