From d12b97b0b0abffc748d8d8b458791081dc898f2f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 12:19:50 -0400
Subject: [PATCH 01/31] fix wa-pill and wa-input[pill] styles (#791)

---
 docs/docs/native/input.md        | 8 ++++++++
 docs/docs/resources/changelog.md | 5 +++++
 src/styles/native/input.css      | 7 ++++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/docs/native/input.md b/docs/docs/native/input.md
index c7c11f0dc..ef7c483e5 100644
--- a/docs/docs/native/input.md
+++ b/docs/docs/native/input.md
@@ -42,6 +42,14 @@ wa-code-demo::part(preview) {
 <wa-input label="WA Input (url)" type="url"></wa-input>
 ```
 
+## Pill shaped text fields
+
+Add the `wa-pill` class to an `<input>` to make it pill-shaped.
+
+```html {.example}
+<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
+```
+
 ## Color Picker
 
 Basic:
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 51bd55882..cbea1f20e 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,6 +12,11 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
+## Next
+
+- Fixed `wa-pill` class for text fields
+- Fixed `pill` style for `<wa-input>` elements
+
 ## 3.0.0-alpha.11
 
 ### Color Palettes
diff --git a/src/styles/native/input.css b/src/styles/native/input.css
index 246812a7a..7580e33d3 100644
--- a/src/styles/native/input.css
+++ b/src/styles/native/input.css
@@ -121,7 +121,8 @@ input:where(:not(
   font: inherit;
 }
 
-.wa-pill,
-:host([pill]) {
-  border-radius: var(--wa-border-radius-pill);
+input.wa-pill,
+textarea.wa-pill,
+:host([pill]) .wa-text-field {
+  border-radius: var(--wa-border-radius-pill) !important;
 }

From 1283a696a5380ff7c07592aa1aba245db23f4669 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 14:22:23 -0400
Subject: [PATCH 02/31] fix switch + tooltip behavior (#793)

---
 docs/docs/resources/changelog.md | 1 +
 src/components/switch/switch.ts  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index cbea1f20e..275fd9702 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -25,6 +25,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Added a `pink` scale to all color palettes
 - Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
 - Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too).
+- Fixed a bug in `<wa-switch>` that caused tooltips to work incorrectly when toggling the switch
 
 ### Design Tokens
 
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 74d5a7fb7..47a9bcdf4 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -49,6 +49,7 @@ import styles from './switch.css';
  */
 @customElement('wa-switch')
 export default class WaSwitch extends WebAwesomeFormAssociatedElement {
+  static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
   static shadowStyle = [formControlStyles, sizeStyles, styles];
 
   static get validators() {

From da4f619d9533a28feb8232b2172006da62e0a112 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 14:44:39 -0400
Subject: [PATCH 03/31] prevent card example from overflowing (#795)

---
 docs/docs/components/card.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index 222e5b8d5..d1cd32a64 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -19,13 +19,13 @@ icon: card
 
   <div slot="footer">
     <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
+    <wa-rating label="Rating"></wa-rating>
   </div>
 </wa-card>
 
 <style>
   .card-overview {
-    max-width: 300px;
+    width: 300px;
   }
 
   .card-overview small {

From a6745602d6a2585410139a3c7b2f0d7f59c02ece Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 12 Mar 2025 15:59:37 -0400
Subject: [PATCH 04/31] fix color picker light dismiss (#794)

* fix color picker light dismiss

* update changelog
---
 docs/docs/resources/changelog.md             | 1 +
 src/components/color-picker/color-picker.css | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 275fd9702..0da89e80d 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -16,6 +16,7 @@ During the alpha period, things might break! We take breaking changes very serio
 
 - Fixed `wa-pill` class for text fields
 - Fixed `pill` style for `<wa-input>` elements
+- Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
 
 ## 3.0.0-alpha.11
 
diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css
index fa7e6ad18..2cf52a21f 100644
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -278,11 +278,11 @@
 }
 
 /*
-   * Color dropdown
-   */
+ * Color dropdown
+ */
 
 .color-dropdown {
-  display: flex;
+  display: contents;
 }
 
 .color-dropdown::part(panel) {

From c0ca739366e927871d0f64ba166e1075ae1254df Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 12 Mar 2025 15:14:26 -0400
Subject: [PATCH 05/31] More robust dynamic value / options handling, fixes
 #789

---
 src/components/select/select.test.ts | 34 +++++++++++++
 src/components/select/select.ts      | 71 ++++++++++++++++++++++++----
 2 files changed, 96 insertions(+), 9 deletions(-)

diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index 747cfe987..ca302c03a 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -647,6 +647,7 @@ describe('<wa-select>', () => {
             );
             const el = form.querySelector<WaSelect>('wa-select')!;
 
+            expect(el.defaultValue).to.equal('option-1');
             expect(el.value).to.equal('');
             expect(new FormData(form).get('select')).equal('');
 
@@ -657,6 +658,7 @@ describe('<wa-select>', () => {
 
             await aTimeout(10);
             await el.updateComplete;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['option-1']);
             expect(el.value).to.equal('option-1');
             expect(new FormData(form).get('select')).equal('option-1');
           });
@@ -745,6 +747,8 @@ describe('<wa-select>', () => {
             );
 
             const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['bar', 'baz']);
+            expect(el.optionValues?.size).to.equal(2);
             expect(el.value).to.have.members(['bar', 'baz']);
             expect(el.value!.length).to.equal(2);
             expect(new FormData(form).getAll('select')).to.have.members(['bar', 'baz']);
@@ -760,6 +764,36 @@ describe('<wa-select>', () => {
             expect(new FormData(form).getAll('select')).to.have.members(['foo', 'bar', 'baz']);
           });
         });
+
+        describe('With setting the value via JS', () => {
+          it('Should preserve value even if not returned', async () => {
+            const form = await fixture<HTMLFormElement>(
+              html` <form>
+                <wa-select name="select">
+                  <wa-option value="bar">Bar</wa-option>
+                  <wa-option value="baz">Baz</wa-option>
+                </wa-select>
+              </form>`,
+            );
+
+            const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.value).to.equal('');
+
+            el.value = 'foo';
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('');
+
+            const option = document.createElement('wa-option');
+            option.value = 'foo';
+            option.innerText = 'Foo';
+            el.append(option);
+
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('foo');
+          });
+        });
       });
     });
   }
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index e82c53d2c..d7ab3c3b6 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -118,6 +118,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   @state() displayLabel = '';
   @state() currentOption: WaOption;
   @state() selectedOptions: WaOption[] = [];
+  @state() optionValues: Set<string> | undefined;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -158,7 +159,47 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     return val;
   }
 
-  @property({ attribute: false }) value: string | string[] | null = null;
+  private _value: string[] | undefined;
+  @property({ attribute: false })
+  set value(val: string | string[]) {
+    let oldValue = this.value;
+
+    if (!Array.isArray(val)) {
+      val = val.split(' ');
+    }
+
+    if (!this._value || this._value.join(' ') !== val.join(' ')) {
+      this._value = val;
+      let newValue = this.value;
+
+      if (newValue != oldValue) {
+        this.requestUpdate('value', oldValue);
+      }
+    }
+  }
+  get value() {
+    let value = this._value ?? this.defaultValue;
+    value = Array.isArray(value) ? value : [value];
+    let optionsChanged = !this.optionValues;
+
+    if (optionsChanged) {
+      this.optionValues = new Set(
+        this.getAllOptions()
+          .filter(option => !option.disabled)
+          .map(option => option.value),
+      );
+    }
+
+    // Drop values not in the DOM
+    let ret: string | string[] = value.filter(v => this.optionValues!.has(v));
+    ret = this.multiple ? ret : (ret[0] ?? '');
+
+    if (optionsChanged) {
+      this.requestUpdate('value');
+    }
+
+    return ret;
+  }
 
   /** The select's size. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@@ -538,12 +579,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     }
 
     const allOptions = this.getAllOptions();
-    const val = this.valueHasChanged ? this.value : this.defaultValue;
-    const value = Array.isArray(val) ? val : [val];
-    const values: string[] = [];
+    this.optionValues = undefined; // dirty the value so it gets recalculated
 
-    // Check for duplicate values in menu items
-    allOptions.forEach(option => values.push(option.value));
+    const value = this.value;
 
     // Select only the options that match the new value
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
@@ -565,6 +603,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
   // Gets an array of all `<wa-option>` elements
   private getAllOptions() {
+    if (!this?.querySelectorAll) {
+      return [];
+    }
     return [...this.querySelectorAll<WaOption>('wa-option')];
   }
 
@@ -628,11 +669,24 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
     // Update selected options cache
     this.selectedOptions = options.filter(el => el.selected);
+    let selectedValues = new Set(this.selectedOptions.map(el => el.value));
+
+    // Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading)
+    // Note that options NOT present in the DOM will be moved to the end after this
+    if (selectedValues.size > 0 || this._value) {
+      if (!this._value) {
+        // First time it's set
+        let value = this.defaultValue ?? [];
+        this._value = Array.isArray(value) ? value : [value];
+      }
+
+      // Filter out values that are in the DOM
+      this._value = this._value.filter(value => !this.optionValues?.has(value));
+      this._value.unshift(...selectedValues);
+    }
 
     // Update the value and display label
     if (this.multiple) {
-      this.value = this.selectedOptions.map(el => el.value);
-
       if (this.placeholder && this.value.length === 0) {
         // When no items are selected, keep the value empty so the placeholder shows
         this.displayLabel = '';
@@ -641,7 +695,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
       }
     } else {
       const selectedOption = this.selectedOptions[0];
-      this.value = selectedOption?.value ?? '';
       this.displayLabel = selectedOption?.label ?? '';
     }
 

From a9bf1bd8384928da14f1df072ca36aed465adb2e Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 13 Mar 2025 17:07:03 -0400
Subject: [PATCH 06/31] Add `--wa-color-{role}-N` variables, closes #785 (#797)

* Initial comment, based on #768

* Add `neutral` color variables

* Add `success`, `warning`, and `danger` variables

* Theme touch-ups

* Remove unused clamped tokens

* Re-add clamped tokens test page, refactor to be based on hue instead of `brand`
---
 docs/docs/experimental/clamped-colors.njk |  23 +-
 src/styles/brand/base.css                 |  74 -----
 src/styles/brand/blue.css                 |  21 +-
 src/styles/brand/cyan.css                 |  21 +-
 src/styles/brand/gray.css                 |  21 +-
 src/styles/brand/green.css                |  21 +-
 src/styles/brand/indigo.css               |  21 +-
 src/styles/brand/orange.css               |  21 +-
 src/styles/brand/pink.css                 |  21 +-
 src/styles/brand/purple.css               |  21 +-
 src/styles/brand/red.css                  |  21 +-
 src/styles/brand/yellow.css               |  21 +-
 src/styles/color/anodized.css             |   2 +
 src/styles/color/base.css                 | 338 ++++++++++++++++++++++
 src/styles/color/bright.css               |   2 +
 src/styles/color/classic.css              |   2 +
 src/styles/color/default.css              |   2 +
 src/styles/color/elegant.css              |   2 +
 src/styles/color/mild.css                 |   2 +
 src/styles/color/natural.css              |   2 +
 src/styles/color/rudimentary.css          |   2 +
 src/styles/color/scripts/palettes.js      |   4 +-
 src/styles/color/vogue.css                |   2 +
 src/styles/danger/blue.css                |  36 +++
 src/styles/danger/cyan.css                |  36 +++
 src/styles/danger/gray.css                |  36 +++
 src/styles/danger/green.css               |  36 +++
 src/styles/danger/indigo.css              |  36 +++
 src/styles/danger/orange.css              |  36 +++
 src/styles/danger/pink.css                |  36 +++
 src/styles/danger/purple.css              |  36 +++
 src/styles/danger/red.css                 |  36 +++
 src/styles/danger/yellow.css              |  36 +++
 src/styles/neutral/blue.css               |  36 +++
 src/styles/neutral/cyan.css               |  36 +++
 src/styles/neutral/gray.css               |  36 +++
 src/styles/neutral/green.css              |  36 +++
 src/styles/neutral/indigo.css             |  36 +++
 src/styles/neutral/orange.css             |  36 +++
 src/styles/neutral/pink.css               |  36 +++
 src/styles/neutral/purple.css             |  36 +++
 src/styles/neutral/red.css                |  36 +++
 src/styles/neutral/yellow.css             |  36 +++
 src/styles/success/blue.css               |  36 +++
 src/styles/success/cyan.css               |  36 +++
 src/styles/success/gray.css               |  36 +++
 src/styles/success/green.css              |  36 +++
 src/styles/success/indigo.css             |  36 +++
 src/styles/success/orange.css             |  36 +++
 src/styles/success/pink.css               |  36 +++
 src/styles/success/purple.css             |  36 +++
 src/styles/success/red.css                |  36 +++
 src/styles/success/yellow.css             |  36 +++
 src/styles/themes/active/color.css        | 144 ++++-----
 src/styles/themes/awesome/color.css       | 142 ++++-----
 src/styles/themes/brutalist/color.css     | 160 +++++-----
 src/styles/themes/classic/color.css       | 144 ++++-----
 src/styles/themes/default/color.css       | 166 +++++------
 src/styles/themes/glossy/color.css        |  68 +----
 src/styles/themes/matter/color.css        | 144 ++++-----
 src/styles/themes/mellow/color.css        |  80 ++---
 src/styles/themes/playful/color.css       | 164 ++++++-----
 src/styles/themes/premium/color.css       | 174 ++++++-----
 src/styles/themes/tailspin/color.css      | 146 +++++-----
 src/styles/warning/blue.css               |  36 +++
 src/styles/warning/cyan.css               |  36 +++
 src/styles/warning/gray.css               |  36 +++
 src/styles/warning/green.css              |  36 +++
 src/styles/warning/indigo.css             |  36 +++
 src/styles/warning/orange.css             |  36 +++
 src/styles/warning/pink.css               |  36 +++
 src/styles/warning/purple.css             |  36 +++
 src/styles/warning/red.css                |  36 +++
 src/styles/warning/yellow.css             |  36 +++
 74 files changed, 2742 insertions(+), 897 deletions(-)
 delete mode 100644 src/styles/brand/base.css
 create mode 100644 src/styles/color/base.css
 create mode 100644 src/styles/danger/blue.css
 create mode 100644 src/styles/danger/cyan.css
 create mode 100644 src/styles/danger/gray.css
 create mode 100644 src/styles/danger/green.css
 create mode 100644 src/styles/danger/indigo.css
 create mode 100644 src/styles/danger/orange.css
 create mode 100644 src/styles/danger/pink.css
 create mode 100644 src/styles/danger/purple.css
 create mode 100644 src/styles/danger/red.css
 create mode 100644 src/styles/danger/yellow.css
 create mode 100644 src/styles/neutral/blue.css
 create mode 100644 src/styles/neutral/cyan.css
 create mode 100644 src/styles/neutral/gray.css
 create mode 100644 src/styles/neutral/green.css
 create mode 100644 src/styles/neutral/indigo.css
 create mode 100644 src/styles/neutral/orange.css
 create mode 100644 src/styles/neutral/pink.css
 create mode 100644 src/styles/neutral/purple.css
 create mode 100644 src/styles/neutral/red.css
 create mode 100644 src/styles/neutral/yellow.css
 create mode 100644 src/styles/success/blue.css
 create mode 100644 src/styles/success/cyan.css
 create mode 100644 src/styles/success/gray.css
 create mode 100644 src/styles/success/green.css
 create mode 100644 src/styles/success/indigo.css
 create mode 100644 src/styles/success/orange.css
 create mode 100644 src/styles/success/pink.css
 create mode 100644 src/styles/success/purple.css
 create mode 100644 src/styles/success/red.css
 create mode 100644 src/styles/success/yellow.css
 create mode 100644 src/styles/warning/blue.css
 create mode 100644 src/styles/warning/cyan.css
 create mode 100644 src/styles/warning/gray.css
 create mode 100644 src/styles/warning/green.css
 create mode 100644 src/styles/warning/indigo.css
 create mode 100644 src/styles/warning/orange.css
 create mode 100644 src/styles/warning/pink.css
 create mode 100644 src/styles/warning/purple.css
 create mode 100644 src/styles/warning/red.css
 create mode 100644 src/styles/warning/yellow.css

diff --git a/docs/docs/experimental/clamped-colors.njk b/docs/docs/experimental/clamped-colors.njk
index fac431d52..27797832d 100644
--- a/docs/docs/experimental/clamped-colors.njk
+++ b/docs/docs/experimental/clamped-colors.njk
@@ -1,13 +1,10 @@
 ---
-title: Clamped brand tokens
+title: Clamped Color Tokens
 layout: block
 ---
 
-{% set tints = ['40-max', '50-max', '60-max', '40-min', '50-min', '60-min'] %}
-
-{% for hue in hues %}
-<link href="/dist/styles/brand/{{ hue }}.css" rel="stylesheet">
-{% endfor %}
+{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
+{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
 
 <table class="colors">
   <thead>
@@ -20,18 +17,18 @@ layout: block
     </tr>
   </thead>
 {% for hue in hues -%}
-<tr class="wa-brand-{{ hue }}">
+<tr class="wa-color-{{ hue }}">
   <th>{{ hue | capitalize }}</th>
   <td class="core-column">
-    <div class="color swatch" style="background-color: var(--wa-color-brand); color: var(--wa-color-brand-on);">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
       {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></wa-copy-button>
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
     </div>
   </td>
   {% for tint in tints -%}
     <td>
-      <div class="color swatch" style="background-color: var(--wa-color-brand-{{ tint }})">
-        <wa-copy-button value="--wa-color-brand-{{ tint }}" copy-label="--wa-color-brand-{{ tint }}"></wa-copy-button>
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
       </div>
     </td>
   {%- endfor -%}
@@ -41,7 +38,7 @@ layout: block
 
 <style>
 .core-column .color.swatch::before {
-  counter-reset: key var(--wa-color-brand-key);
+  counter-reset: key var(--key);
   content: counter(key);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/styles/brand/base.css b/src/styles/brand/base.css
deleted file mode 100644
index 175dc8049..000000000
--- a/src/styles/brand/base.css
+++ /dev/null
@@ -1,74 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']),
-:where([class^='wa-brand-'], [class*=' wa-brand-']) {
-  /**
-   * Conditional tokens for use in color-mix()
-   * --wa-color-brand-if-lt-N ➡️ 100% if key < N, 0% otherwise
-   * --wa-color-brand-if-gte-N ➡️ 100% if key >= N, 0% otherwise
-   */
-  --wa-color-brand-if-lt-40: calc(clamp(0, 40 - var(--wa-color-brand-key), 1) * 100%);
-  --wa-color-brand-if-lt-50: calc(clamp(0, 50 - var(--wa-color-brand-key), 1) * 100%);
-  --wa-color-brand-if-lt-60: calc(clamp(0, 60 - var(--wa-color-brand-key), 1) * 100%);
-  --wa-color-brand-if-lt-70: calc(clamp(0, 70 - var(--wa-color-brand-key), 1) * 100%);
-  --wa-color-brand-if-lt-80: calc(clamp(0, 80 - var(--wa-color-brand-key), 1) * 100%);
-
-  --wa-color-brand-if-gte-40: calc(100% - var(--wa-color-brand-if-lt-40));
-  --wa-color-brand-if-gte-50: calc(100% - var(--wa-color-brand-if-lt-50));
-  --wa-color-brand-if-gte-60: calc(100% - var(--wa-color-brand-if-lt-60));
-  --wa-color-brand-if-gte-70: calc(100% - var(--wa-color-brand-if-lt-70));
-  --wa-color-brand-if-gte-80: calc(100% - var(--wa-color-brand-if-lt-80));
-
-  /*
-   * Convenience tokens for common tint cutoffs
-   * --wa-color-brand-N-max ➡️ var(--color-brand) if key <= N, var(--color-brand-N) otherwise
-   * --wa-color-brand-N-min ➡️ var(--color-brand) if key >= N, var(--color-brand-N) otherwise
-   */
-  --wa-color-brand-40-max: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-lt-40),
-    var(--wa-color-brand-40)
-  );
-  --wa-color-brand-40-min: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-gte-40),
-    var(--wa-color-brand-40)
-  );
-
-  --wa-color-brand-50-max: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-lt-50),
-    var(--wa-color-brand-50)
-  );
-  --wa-color-brand-50-min: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-gte-50),
-    var(--wa-color-brand-50)
-  );
-
-  --wa-color-brand-60-max: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-lt-60),
-    var(--wa-color-brand-60)
-  );
-  --wa-color-brand-60-min: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-gte-60),
-    var(--wa-color-brand-60)
-  );
-
-  --wa-color-brand-70-max: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-lt-70),
-    var(--wa-color-brand-70)
-  );
-  --wa-color-brand-70-min: color-mix(
-    in oklab,
-    var(--wa-color-brand) var(--wa-color-brand-if-gte-70),
-    var(--wa-color-brand-70)
-  );
-
-  /* Text color: white if key < 60, brand-10 otherwise */
-  --wa-color-brand-on: color-mix(in oklab, var(--wa-color-brand-10) var(--wa-color-brand-if-gte-60), white);
-}
diff --git a/src/styles/brand/blue.css b/src/styles/brand/blue.css
index 94ce3f332..a46c9e84c 100644
--- a/src/styles/brand/blue.css
+++ b/src/styles/brand/blue.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-blue-10);
   --wa-color-brand-05: var(--wa-color-blue-05);
   --wa-color-brand: var(--wa-color-blue);
-  --wa-color-brand-key: var(--wa-color-blue-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-blue-max-50);
+  --wa-color-brand-min-50: var(--wa-color-blue-min-50);
+  --wa-color-brand-max-60: var(--wa-color-blue-max-60);
+  --wa-color-brand-min-60: var(--wa-color-blue-min-60);
+  --wa-color-brand-max-70: var(--wa-color-blue-max-70);
+  --wa-color-brand-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-brand-on: var(--wa-color-blue-on);
 }
diff --git a/src/styles/brand/cyan.css b/src/styles/brand/cyan.css
index afca52c2c..6e7ec4565 100644
--- a/src/styles/brand/cyan.css
+++ b/src/styles/brand/cyan.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-cyan-10);
   --wa-color-brand-05: var(--wa-color-cyan-05);
   --wa-color-brand: var(--wa-color-cyan);
-  --wa-color-brand-key: var(--wa-color-cyan-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-brand-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-brand-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-brand-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-brand-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-brand-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-brand-on: var(--wa-color-cyan-on);
 }
diff --git a/src/styles/brand/gray.css b/src/styles/brand/gray.css
index 59edc0b3b..991f48f65 100644
--- a/src/styles/brand/gray.css
+++ b/src/styles/brand/gray.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-gray-10);
   --wa-color-brand-05: var(--wa-color-gray-05);
   --wa-color-brand: var(--wa-color-gray);
-  --wa-color-brand-key: var(--wa-color-gray-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-gray-max-50);
+  --wa-color-brand-min-50: var(--wa-color-gray-min-50);
+  --wa-color-brand-max-60: var(--wa-color-gray-max-60);
+  --wa-color-brand-min-60: var(--wa-color-gray-min-60);
+  --wa-color-brand-max-70: var(--wa-color-gray-max-70);
+  --wa-color-brand-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-brand-on: var(--wa-color-gray-on);
 }
diff --git a/src/styles/brand/green.css b/src/styles/brand/green.css
index b0c392732..3a9768e06 100644
--- a/src/styles/brand/green.css
+++ b/src/styles/brand/green.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-green-10);
   --wa-color-brand-05: var(--wa-color-green-05);
   --wa-color-brand: var(--wa-color-green);
-  --wa-color-brand-key: var(--wa-color-green-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-green-max-50);
+  --wa-color-brand-min-50: var(--wa-color-green-min-50);
+  --wa-color-brand-max-60: var(--wa-color-green-max-60);
+  --wa-color-brand-min-60: var(--wa-color-green-min-60);
+  --wa-color-brand-max-70: var(--wa-color-green-max-70);
+  --wa-color-brand-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-brand-on: var(--wa-color-green-on);
 }
diff --git a/src/styles/brand/indigo.css b/src/styles/brand/indigo.css
index b4516bceb..4eb083a65 100644
--- a/src/styles/brand/indigo.css
+++ b/src/styles/brand/indigo.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-indigo-10);
   --wa-color-brand-05: var(--wa-color-indigo-05);
   --wa-color-brand: var(--wa-color-indigo);
-  --wa-color-brand-key: var(--wa-color-indigo-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-brand-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-brand-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-brand-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-brand-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-brand-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-brand-on: var(--wa-color-indigo-on);
 }
diff --git a/src/styles/brand/orange.css b/src/styles/brand/orange.css
index b067fd064..da5fb937a 100644
--- a/src/styles/brand/orange.css
+++ b/src/styles/brand/orange.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-orange-10);
   --wa-color-brand-05: var(--wa-color-orange-05);
   --wa-color-brand: var(--wa-color-orange);
-  --wa-color-brand-key: var(--wa-color-orange-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-orange-max-50);
+  --wa-color-brand-min-50: var(--wa-color-orange-min-50);
+  --wa-color-brand-max-60: var(--wa-color-orange-max-60);
+  --wa-color-brand-min-60: var(--wa-color-orange-min-60);
+  --wa-color-brand-max-70: var(--wa-color-orange-max-70);
+  --wa-color-brand-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-brand-on: var(--wa-color-orange-on);
 }
diff --git a/src/styles/brand/pink.css b/src/styles/brand/pink.css
index 5ffcd8387..81610ff6d 100644
--- a/src/styles/brand/pink.css
+++ b/src/styles/brand/pink.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-pink-10);
   --wa-color-brand-05: var(--wa-color-pink-05);
   --wa-color-brand: var(--wa-color-pink);
-  --wa-color-brand-key: var(--wa-color-pink-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-pink-max-50);
+  --wa-color-brand-min-50: var(--wa-color-pink-min-50);
+  --wa-color-brand-max-60: var(--wa-color-pink-max-60);
+  --wa-color-brand-min-60: var(--wa-color-pink-min-60);
+  --wa-color-brand-max-70: var(--wa-color-pink-max-70);
+  --wa-color-brand-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-brand-on: var(--wa-color-pink-on);
 }
diff --git a/src/styles/brand/purple.css b/src/styles/brand/purple.css
index 84b11d4e5..0fcbf19de 100644
--- a/src/styles/brand/purple.css
+++ b/src/styles/brand/purple.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-purple-10);
   --wa-color-brand-05: var(--wa-color-purple-05);
   --wa-color-brand: var(--wa-color-purple);
-  --wa-color-brand-key: var(--wa-color-purple-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-purple-max-50);
+  --wa-color-brand-min-50: var(--wa-color-purple-min-50);
+  --wa-color-brand-max-60: var(--wa-color-purple-max-60);
+  --wa-color-brand-min-60: var(--wa-color-purple-min-60);
+  --wa-color-brand-max-70: var(--wa-color-purple-max-70);
+  --wa-color-brand-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-brand-on: var(--wa-color-purple-on);
 }
diff --git a/src/styles/brand/red.css b/src/styles/brand/red.css
index 823c1e304..cee3d7e28 100644
--- a/src/styles/brand/red.css
+++ b/src/styles/brand/red.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-red-10);
   --wa-color-brand-05: var(--wa-color-red-05);
   --wa-color-brand: var(--wa-color-red);
-  --wa-color-brand-key: var(--wa-color-red-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-red-max-50);
+  --wa-color-brand-min-50: var(--wa-color-red-min-50);
+  --wa-color-brand-max-60: var(--wa-color-red-max-60);
+  --wa-color-brand-min-60: var(--wa-color-red-min-60);
+  --wa-color-brand-max-70: var(--wa-color-red-max-70);
+  --wa-color-brand-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-brand-on: var(--wa-color-red-on);
 }
diff --git a/src/styles/brand/yellow.css b/src/styles/brand/yellow.css
index abf5cea11..51d01e0f0 100644
--- a/src/styles/brand/yellow.css
+++ b/src/styles/brand/yellow.css
@@ -1,5 +1,3 @@
-@import url('base.css');
-
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -17,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-yellow-10);
   --wa-color-brand-05: var(--wa-color-yellow-05);
   --wa-color-brand: var(--wa-color-yellow);
-  --wa-color-brand-key: var(--wa-color-yellow-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-brand-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-brand-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-brand-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-brand-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-brand-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-brand-on: var(--wa-color-yellow-on);
 }
diff --git a/src/styles/color/anodized.css b/src/styles/color/anodized.css
index f10a6dcc4..fc1b06a94 100644
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/base.css b/src/styles/color/base.css
new file mode 100644
index 000000000..802ab0c9f
--- /dev/null
+++ b/src/styles/color/base.css
@@ -0,0 +1,338 @@
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+:where([class^='wa-brand-'], [class*=' wa-brand-']),
+:where(:root),
+:host {
+  /**
+   * Conditional tokens for use in color-mix()
+   * --wa-color-{hue}-lt-N ➡️ 100% if key < N, 0% otherwise
+   * --wa-color-{hue}-gte-N ➡️ 100% if key >= N, 0% otherwise
+   */
+
+  --wa-color-red-lt-50: calc(clamp(0, 50 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-50: calc(100% - var(--wa-color-red-lt-50));
+  --wa-color-red-lt-60: calc(clamp(0, 60 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-60: calc(100% - var(--wa-color-red-lt-60));
+  --wa-color-red-lt-70: calc(clamp(0, 70 - var(--wa-color-red-key), 1) * 100%);
+  --wa-color-red-gte-70: calc(100% - var(--wa-color-red-lt-70));
+
+  --wa-color-orange-lt-50: calc(clamp(0, 50 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-50: calc(100% - var(--wa-color-orange-lt-50));
+  --wa-color-orange-lt-60: calc(clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-60: calc(100% - var(--wa-color-orange-lt-60));
+  --wa-color-orange-lt-70: calc(clamp(0, 70 - var(--wa-color-orange-key), 1) * 100%);
+  --wa-color-orange-gte-70: calc(100% - var(--wa-color-orange-lt-70));
+
+  --wa-color-yellow-lt-50: calc(clamp(0, 50 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-50: calc(100% - var(--wa-color-yellow-lt-50));
+  --wa-color-yellow-lt-60: calc(clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-60: calc(100% - var(--wa-color-yellow-lt-60));
+  --wa-color-yellow-lt-70: calc(clamp(0, 70 - var(--wa-color-yellow-key), 1) * 100%);
+  --wa-color-yellow-gte-70: calc(100% - var(--wa-color-yellow-lt-70));
+
+  --wa-color-green-lt-50: calc(clamp(0, 50 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-50: calc(100% - var(--wa-color-green-lt-50));
+  --wa-color-green-lt-60: calc(clamp(0, 60 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-60: calc(100% - var(--wa-color-green-lt-60));
+  --wa-color-green-lt-70: calc(clamp(0, 70 - var(--wa-color-green-key), 1) * 100%);
+  --wa-color-green-gte-70: calc(100% - var(--wa-color-green-lt-70));
+
+  --wa-color-cyan-lt-50: calc(clamp(0, 50 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-50: calc(100% - var(--wa-color-cyan-lt-50));
+  --wa-color-cyan-lt-60: calc(clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-60: calc(100% - var(--wa-color-cyan-lt-60));
+  --wa-color-cyan-lt-70: calc(clamp(0, 70 - var(--wa-color-cyan-key), 1) * 100%);
+  --wa-color-cyan-gte-70: calc(100% - var(--wa-color-cyan-lt-70));
+
+  --wa-color-blue-lt-50: calc(clamp(0, 50 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-50: calc(100% - var(--wa-color-blue-lt-50));
+  --wa-color-blue-lt-60: calc(clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-60: calc(100% - var(--wa-color-blue-lt-60));
+  --wa-color-blue-lt-70: calc(clamp(0, 70 - var(--wa-color-blue-key), 1) * 100%);
+  --wa-color-blue-gte-70: calc(100% - var(--wa-color-blue-lt-70));
+
+  --wa-color-indigo-lt-50: calc(clamp(0, 50 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-50: calc(100% - var(--wa-color-indigo-lt-50));
+  --wa-color-indigo-lt-60: calc(clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-60: calc(100% - var(--wa-color-indigo-lt-60));
+  --wa-color-indigo-lt-70: calc(clamp(0, 70 - var(--wa-color-indigo-key), 1) * 100%);
+  --wa-color-indigo-gte-70: calc(100% - var(--wa-color-indigo-lt-70));
+
+  --wa-color-purple-lt-50: calc(clamp(0, 50 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-50: calc(100% - var(--wa-color-purple-lt-50));
+  --wa-color-purple-lt-60: calc(clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-60: calc(100% - var(--wa-color-purple-lt-60));
+  --wa-color-purple-lt-70: calc(clamp(0, 70 - var(--wa-color-purple-key), 1) * 100%);
+  --wa-color-purple-gte-70: calc(100% - var(--wa-color-purple-lt-70));
+
+  --wa-color-pink-lt-50: calc(clamp(0, 50 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-50: calc(100% - var(--wa-color-pink-lt-50));
+  --wa-color-pink-lt-60: calc(clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-60: calc(100% - var(--wa-color-pink-lt-60));
+  --wa-color-pink-lt-70: calc(clamp(0, 70 - var(--wa-color-pink-key), 1) * 100%);
+  --wa-color-pink-gte-70: calc(100% - var(--wa-color-pink-lt-70));
+
+  --wa-color-gray-lt-50: calc(clamp(0, 50 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-50: calc(100% - var(--wa-color-gray-lt-50));
+  --wa-color-gray-lt-60: calc(clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-60: calc(100% - var(--wa-color-gray-lt-60));
+  --wa-color-gray-lt-70: calc(clamp(0, 70 - var(--wa-color-gray-key), 1) * 100%);
+  --wa-color-gray-gte-70: calc(100% - var(--wa-color-gray-lt-70));
+
+  /*
+   * Convenience tokens for common tint cutoffs
+   * --wa-color-{hue}-N-max ➡️ var(--color-{hue}) if key <= N, var(--color-{hue}-N) otherwise
+   * --wa-color-{hue}-N-min ➡️ var(--color-{hue}) if key >= N, var(--color-{hue}-N) otherwise
+   */
+
+  --wa-color-red-max-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-50), var(--wa-color-red-50));
+  --wa-color-red-min-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-50), var(--wa-color-red-50));
+  --wa-color-red-max-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-60), var(--wa-color-red-60));
+  --wa-color-red-min-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-60), var(--wa-color-red-60));
+  --wa-color-red-max-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-70), var(--wa-color-red-70));
+  --wa-color-red-min-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-70), var(--wa-color-red-70));
+
+  --wa-color-orange-max-50: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-50),
+    var(--wa-color-orange-50)
+  );
+  --wa-color-orange-min-50: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-50),
+    var(--wa-color-orange-50)
+  );
+  --wa-color-orange-max-60: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-60),
+    var(--wa-color-orange-60)
+  );
+  --wa-color-orange-min-60: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-60),
+    var(--wa-color-orange-60)
+  );
+  --wa-color-orange-max-70: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-lt-70),
+    var(--wa-color-orange-70)
+  );
+  --wa-color-orange-min-70: color-mix(
+    in oklab,
+    var(--wa-color-orange) var(--wa-color-orange-gte-70),
+    var(--wa-color-orange-70)
+  );
+
+  --wa-color-yellow-max-50: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-50),
+    var(--wa-color-yellow-50)
+  );
+  --wa-color-yellow-min-50: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-50),
+    var(--wa-color-yellow-50)
+  );
+  --wa-color-yellow-max-60: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-60),
+    var(--wa-color-yellow-60)
+  );
+  --wa-color-yellow-min-60: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-60),
+    var(--wa-color-yellow-60)
+  );
+  --wa-color-yellow-max-70: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-lt-70),
+    var(--wa-color-yellow-70)
+  );
+  --wa-color-yellow-min-70: color-mix(
+    in oklab,
+    var(--wa-color-yellow) var(--wa-color-yellow-gte-70),
+    var(--wa-color-yellow-70)
+  );
+
+  --wa-color-green-max-50: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-50),
+    var(--wa-color-green-50)
+  );
+  --wa-color-green-min-50: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-50),
+    var(--wa-color-green-50)
+  );
+  --wa-color-green-max-60: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-60),
+    var(--wa-color-green-60)
+  );
+  --wa-color-green-min-60: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-60),
+    var(--wa-color-green-60)
+  );
+  --wa-color-green-max-70: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-lt-70),
+    var(--wa-color-green-70)
+  );
+  --wa-color-green-min-70: color-mix(
+    in oklab,
+    var(--wa-color-green) var(--wa-color-green-gte-70),
+    var(--wa-color-green-70)
+  );
+
+  --wa-color-cyan-max-50: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-50), var(--wa-color-cyan-50));
+  --wa-color-cyan-min-50: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-50),
+    var(--wa-color-cyan-50)
+  );
+  --wa-color-cyan-max-60: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-60), var(--wa-color-cyan-60));
+  --wa-color-cyan-min-60: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-60),
+    var(--wa-color-cyan-60)
+  );
+  --wa-color-cyan-max-70: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-70), var(--wa-color-cyan-70));
+  --wa-color-cyan-min-70: color-mix(
+    in oklab,
+    var(--wa-color-cyan) var(--wa-color-cyan-gte-70),
+    var(--wa-color-cyan-70)
+  );
+
+  --wa-color-blue-max-50: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-50), var(--wa-color-blue-50));
+  --wa-color-blue-min-50: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-50),
+    var(--wa-color-blue-50)
+  );
+  --wa-color-blue-max-60: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-60), var(--wa-color-blue-60));
+  --wa-color-blue-min-60: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-60),
+    var(--wa-color-blue-60)
+  );
+  --wa-color-blue-max-70: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-70), var(--wa-color-blue-70));
+  --wa-color-blue-min-70: color-mix(
+    in oklab,
+    var(--wa-color-blue) var(--wa-color-blue-gte-70),
+    var(--wa-color-blue-70)
+  );
+
+  --wa-color-indigo-max-50: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-50),
+    var(--wa-color-indigo-50)
+  );
+  --wa-color-indigo-min-50: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-50),
+    var(--wa-color-indigo-50)
+  );
+  --wa-color-indigo-max-60: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-60),
+    var(--wa-color-indigo-60)
+  );
+  --wa-color-indigo-min-60: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-60),
+    var(--wa-color-indigo-60)
+  );
+  --wa-color-indigo-max-70: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-lt-70),
+    var(--wa-color-indigo-70)
+  );
+  --wa-color-indigo-min-70: color-mix(
+    in oklab,
+    var(--wa-color-indigo) var(--wa-color-indigo-gte-70),
+    var(--wa-color-indigo-70)
+  );
+
+  --wa-color-purple-max-50: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-50),
+    var(--wa-color-purple-50)
+  );
+  --wa-color-purple-min-50: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-50),
+    var(--wa-color-purple-50)
+  );
+  --wa-color-purple-max-60: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-60),
+    var(--wa-color-purple-60)
+  );
+  --wa-color-purple-min-60: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-60),
+    var(--wa-color-purple-60)
+  );
+  --wa-color-purple-max-70: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-lt-70),
+    var(--wa-color-purple-70)
+  );
+  --wa-color-purple-min-70: color-mix(
+    in oklab,
+    var(--wa-color-purple) var(--wa-color-purple-gte-70),
+    var(--wa-color-purple-70)
+  );
+
+  --wa-color-pink-max-50: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-50), var(--wa-color-pink-50));
+  --wa-color-pink-min-50: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-50),
+    var(--wa-color-pink-50)
+  );
+  --wa-color-pink-max-60: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-60), var(--wa-color-pink-60));
+  --wa-color-pink-min-60: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-60),
+    var(--wa-color-pink-60)
+  );
+  --wa-color-pink-max-70: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-70), var(--wa-color-pink-70));
+  --wa-color-pink-min-70: color-mix(
+    in oklab,
+    var(--wa-color-pink) var(--wa-color-pink-gte-70),
+    var(--wa-color-pink-70)
+  );
+
+  --wa-color-gray-max-50: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-50), var(--wa-color-gray-50));
+  --wa-color-gray-min-50: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-50),
+    var(--wa-color-gray-50)
+  );
+  --wa-color-gray-max-60: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-60), var(--wa-color-gray-60));
+  --wa-color-gray-min-60: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-60),
+    var(--wa-color-gray-60)
+  );
+  --wa-color-gray-max-70: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-70), var(--wa-color-gray-70));
+  --wa-color-gray-min-70: color-mix(
+    in oklab,
+    var(--wa-color-gray) var(--wa-color-gray-gte-70),
+    var(--wa-color-gray-70)
+  );
+
+  /* Text color: white if key < 60, {hue}-10 otherwise */
+
+  --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
+  --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
+  --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
+  --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
+  --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
+  --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
+  --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
+  --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
+  --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
+  --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
+}
diff --git a/src/styles/color/bright.css b/src/styles/color/bright.css
index 4feaaacb1..912b77c40 100644
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/classic.css b/src/styles/color/classic.css
index 86fbd2b8d..8d1c822fc 100644
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/default.css b/src/styles/color/default.css
index 8485cc788..340f2d09a 100644
--- a/src/styles/color/default.css
+++ b/src/styles/color/default.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/elegant.css b/src/styles/color/elegant.css
index 5bda0b721..3e45327b5 100644
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/mild.css b/src/styles/color/mild.css
index e8a6df088..45f69f779 100644
--- a/src/styles/color/mild.css
+++ b/src/styles/color/mild.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/natural.css b/src/styles/color/natural.css
index 393fae84f..8c3200ee4 100644
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/rudimentary.css b/src/styles/color/rudimentary.css
index 283a4b3f5..b1d2f32f3 100644
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/color/scripts/palettes.js b/src/styles/color/scripts/palettes.js
index 588807a1c..68cb59302 100644
--- a/src/styles/color/scripts/palettes.js
+++ b/src/styles/color/scripts/palettes.js
@@ -8,7 +8,9 @@ import fs from 'fs';
 import path from 'path';
 import { PALETTE_DIR } from './util.js';
 
-export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css'));
+export const paletteFiles = fs
+  .readdirSync(PALETTE_DIR + '/')
+  .filter(file => file.endsWith('.css') && !file.endsWith('base.css'));
 export const declarationRegex =
   /^\s*--wa-color-(?<hue>[a-z]+)(?:-(?<level>[0-9]+|key))?:\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
 export const rawCSS = {};
diff --git a/src/styles/color/vogue.css b/src/styles/color/vogue.css
index 8b0500445..7277a877d 100644
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
diff --git a/src/styles/danger/blue.css b/src/styles/danger/blue.css
new file mode 100644
index 000000000..352ca8806
--- /dev/null
+++ b/src/styles/danger/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-blue {
+  --wa-color-danger-95: var(--wa-color-blue-95);
+  --wa-color-danger-90: var(--wa-color-blue-90);
+  --wa-color-danger-80: var(--wa-color-blue-80);
+  --wa-color-danger-70: var(--wa-color-blue-70);
+  --wa-color-danger-60: var(--wa-color-blue-60);
+  --wa-color-danger-50: var(--wa-color-blue-50);
+  --wa-color-danger-40: var(--wa-color-blue-40);
+  --wa-color-danger-30: var(--wa-color-blue-30);
+  --wa-color-danger-20: var(--wa-color-blue-20);
+  --wa-color-danger-10: var(--wa-color-blue-10);
+  --wa-color-danger-05: var(--wa-color-blue-05);
+  --wa-color-danger: var(--wa-color-blue);
+
+  --wa-color-danger-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-blue-max-50);
+  --wa-color-danger-min-50: var(--wa-color-blue-min-50);
+  --wa-color-danger-max-60: var(--wa-color-blue-max-60);
+  --wa-color-danger-min-60: var(--wa-color-blue-min-60);
+  --wa-color-danger-max-70: var(--wa-color-blue-max-70);
+  --wa-color-danger-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-danger-on: var(--wa-color-blue-on);
+}
diff --git a/src/styles/danger/cyan.css b/src/styles/danger/cyan.css
new file mode 100644
index 000000000..bf1b3158b
--- /dev/null
+++ b/src/styles/danger/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-cyan {
+  --wa-color-danger-95: var(--wa-color-cyan-95);
+  --wa-color-danger-90: var(--wa-color-cyan-90);
+  --wa-color-danger-80: var(--wa-color-cyan-80);
+  --wa-color-danger-70: var(--wa-color-cyan-70);
+  --wa-color-danger-60: var(--wa-color-cyan-60);
+  --wa-color-danger-50: var(--wa-color-cyan-50);
+  --wa-color-danger-40: var(--wa-color-cyan-40);
+  --wa-color-danger-30: var(--wa-color-cyan-30);
+  --wa-color-danger-20: var(--wa-color-cyan-20);
+  --wa-color-danger-10: var(--wa-color-cyan-10);
+  --wa-color-danger-05: var(--wa-color-cyan-05);
+  --wa-color-danger: var(--wa-color-cyan);
+
+  --wa-color-danger-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-danger-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-danger-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-danger-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-danger-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-danger-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-danger-on: var(--wa-color-cyan-on);
+}
diff --git a/src/styles/danger/gray.css b/src/styles/danger/gray.css
new file mode 100644
index 000000000..5c436068b
--- /dev/null
+++ b/src/styles/danger/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-gray {
+  --wa-color-danger-95: var(--wa-color-gray-95);
+  --wa-color-danger-90: var(--wa-color-gray-90);
+  --wa-color-danger-80: var(--wa-color-gray-80);
+  --wa-color-danger-70: var(--wa-color-gray-70);
+  --wa-color-danger-60: var(--wa-color-gray-60);
+  --wa-color-danger-50: var(--wa-color-gray-50);
+  --wa-color-danger-40: var(--wa-color-gray-40);
+  --wa-color-danger-30: var(--wa-color-gray-30);
+  --wa-color-danger-20: var(--wa-color-gray-20);
+  --wa-color-danger-10: var(--wa-color-gray-10);
+  --wa-color-danger-05: var(--wa-color-gray-05);
+  --wa-color-danger: var(--wa-color-gray);
+
+  --wa-color-danger-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-gray-max-50);
+  --wa-color-danger-min-50: var(--wa-color-gray-min-50);
+  --wa-color-danger-max-60: var(--wa-color-gray-max-60);
+  --wa-color-danger-min-60: var(--wa-color-gray-min-60);
+  --wa-color-danger-max-70: var(--wa-color-gray-max-70);
+  --wa-color-danger-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-danger-on: var(--wa-color-gray-on);
+}
diff --git a/src/styles/danger/green.css b/src/styles/danger/green.css
new file mode 100644
index 000000000..c24b3d7d1
--- /dev/null
+++ b/src/styles/danger/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-green {
+  --wa-color-danger-95: var(--wa-color-green-95);
+  --wa-color-danger-90: var(--wa-color-green-90);
+  --wa-color-danger-80: var(--wa-color-green-80);
+  --wa-color-danger-70: var(--wa-color-green-70);
+  --wa-color-danger-60: var(--wa-color-green-60);
+  --wa-color-danger-50: var(--wa-color-green-50);
+  --wa-color-danger-40: var(--wa-color-green-40);
+  --wa-color-danger-30: var(--wa-color-green-30);
+  --wa-color-danger-20: var(--wa-color-green-20);
+  --wa-color-danger-10: var(--wa-color-green-10);
+  --wa-color-danger-05: var(--wa-color-green-05);
+  --wa-color-danger: var(--wa-color-green);
+
+  --wa-color-danger-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-green-max-50);
+  --wa-color-danger-min-50: var(--wa-color-green-min-50);
+  --wa-color-danger-max-60: var(--wa-color-green-max-60);
+  --wa-color-danger-min-60: var(--wa-color-green-min-60);
+  --wa-color-danger-max-70: var(--wa-color-green-max-70);
+  --wa-color-danger-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-danger-on: var(--wa-color-green-on);
+}
diff --git a/src/styles/danger/indigo.css b/src/styles/danger/indigo.css
new file mode 100644
index 000000000..a3c75da3d
--- /dev/null
+++ b/src/styles/danger/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-indigo {
+  --wa-color-danger-95: var(--wa-color-indigo-95);
+  --wa-color-danger-90: var(--wa-color-indigo-90);
+  --wa-color-danger-80: var(--wa-color-indigo-80);
+  --wa-color-danger-70: var(--wa-color-indigo-70);
+  --wa-color-danger-60: var(--wa-color-indigo-60);
+  --wa-color-danger-50: var(--wa-color-indigo-50);
+  --wa-color-danger-40: var(--wa-color-indigo-40);
+  --wa-color-danger-30: var(--wa-color-indigo-30);
+  --wa-color-danger-20: var(--wa-color-indigo-20);
+  --wa-color-danger-10: var(--wa-color-indigo-10);
+  --wa-color-danger-05: var(--wa-color-indigo-05);
+  --wa-color-danger: var(--wa-color-indigo);
+
+  --wa-color-danger-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-danger-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-danger-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-danger-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-danger-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-danger-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-danger-on: var(--wa-color-indigo-on);
+}
diff --git a/src/styles/danger/orange.css b/src/styles/danger/orange.css
new file mode 100644
index 000000000..fb11dd590
--- /dev/null
+++ b/src/styles/danger/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-orange {
+  --wa-color-danger-95: var(--wa-color-orange-95);
+  --wa-color-danger-90: var(--wa-color-orange-90);
+  --wa-color-danger-80: var(--wa-color-orange-80);
+  --wa-color-danger-70: var(--wa-color-orange-70);
+  --wa-color-danger-60: var(--wa-color-orange-60);
+  --wa-color-danger-50: var(--wa-color-orange-50);
+  --wa-color-danger-40: var(--wa-color-orange-40);
+  --wa-color-danger-30: var(--wa-color-orange-30);
+  --wa-color-danger-20: var(--wa-color-orange-20);
+  --wa-color-danger-10: var(--wa-color-orange-10);
+  --wa-color-danger-05: var(--wa-color-orange-05);
+  --wa-color-danger: var(--wa-color-orange);
+
+  --wa-color-danger-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-orange-max-50);
+  --wa-color-danger-min-50: var(--wa-color-orange-min-50);
+  --wa-color-danger-max-60: var(--wa-color-orange-max-60);
+  --wa-color-danger-min-60: var(--wa-color-orange-min-60);
+  --wa-color-danger-max-70: var(--wa-color-orange-max-70);
+  --wa-color-danger-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-danger-on: var(--wa-color-orange-on);
+}
diff --git a/src/styles/danger/pink.css b/src/styles/danger/pink.css
new file mode 100644
index 000000000..3e85eec73
--- /dev/null
+++ b/src/styles/danger/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-pink {
+  --wa-color-danger-95: var(--wa-color-pink-95);
+  --wa-color-danger-90: var(--wa-color-pink-90);
+  --wa-color-danger-80: var(--wa-color-pink-80);
+  --wa-color-danger-70: var(--wa-color-pink-70);
+  --wa-color-danger-60: var(--wa-color-pink-60);
+  --wa-color-danger-50: var(--wa-color-pink-50);
+  --wa-color-danger-40: var(--wa-color-pink-40);
+  --wa-color-danger-30: var(--wa-color-pink-30);
+  --wa-color-danger-20: var(--wa-color-pink-20);
+  --wa-color-danger-10: var(--wa-color-pink-10);
+  --wa-color-danger-05: var(--wa-color-pink-05);
+  --wa-color-danger: var(--wa-color-pink);
+
+  --wa-color-danger-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-pink-max-50);
+  --wa-color-danger-min-50: var(--wa-color-pink-min-50);
+  --wa-color-danger-max-60: var(--wa-color-pink-max-60);
+  --wa-color-danger-min-60: var(--wa-color-pink-min-60);
+  --wa-color-danger-max-70: var(--wa-color-pink-max-70);
+  --wa-color-danger-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-danger-on: var(--wa-color-pink-on);
+}
diff --git a/src/styles/danger/purple.css b/src/styles/danger/purple.css
new file mode 100644
index 000000000..478005e31
--- /dev/null
+++ b/src/styles/danger/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-purple {
+  --wa-color-danger-95: var(--wa-color-purple-95);
+  --wa-color-danger-90: var(--wa-color-purple-90);
+  --wa-color-danger-80: var(--wa-color-purple-80);
+  --wa-color-danger-70: var(--wa-color-purple-70);
+  --wa-color-danger-60: var(--wa-color-purple-60);
+  --wa-color-danger-50: var(--wa-color-purple-50);
+  --wa-color-danger-40: var(--wa-color-purple-40);
+  --wa-color-danger-30: var(--wa-color-purple-30);
+  --wa-color-danger-20: var(--wa-color-purple-20);
+  --wa-color-danger-10: var(--wa-color-purple-10);
+  --wa-color-danger-05: var(--wa-color-purple-05);
+  --wa-color-danger: var(--wa-color-purple);
+
+  --wa-color-danger-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-purple-max-50);
+  --wa-color-danger-min-50: var(--wa-color-purple-min-50);
+  --wa-color-danger-max-60: var(--wa-color-purple-max-60);
+  --wa-color-danger-min-60: var(--wa-color-purple-min-60);
+  --wa-color-danger-max-70: var(--wa-color-purple-max-70);
+  --wa-color-danger-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-danger-on: var(--wa-color-purple-on);
+}
diff --git a/src/styles/danger/red.css b/src/styles/danger/red.css
new file mode 100644
index 000000000..11457667e
--- /dev/null
+++ b/src/styles/danger/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-red {
+  --wa-color-danger-95: var(--wa-color-red-95);
+  --wa-color-danger-90: var(--wa-color-red-90);
+  --wa-color-danger-80: var(--wa-color-red-80);
+  --wa-color-danger-70: var(--wa-color-red-70);
+  --wa-color-danger-60: var(--wa-color-red-60);
+  --wa-color-danger-50: var(--wa-color-red-50);
+  --wa-color-danger-40: var(--wa-color-red-40);
+  --wa-color-danger-30: var(--wa-color-red-30);
+  --wa-color-danger-20: var(--wa-color-red-20);
+  --wa-color-danger-10: var(--wa-color-red-10);
+  --wa-color-danger-05: var(--wa-color-red-05);
+  --wa-color-danger: var(--wa-color-red);
+
+  --wa-color-danger-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-red-max-50);
+  --wa-color-danger-min-50: var(--wa-color-red-min-50);
+  --wa-color-danger-max-60: var(--wa-color-red-max-60);
+  --wa-color-danger-min-60: var(--wa-color-red-min-60);
+  --wa-color-danger-max-70: var(--wa-color-red-max-70);
+  --wa-color-danger-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-danger-on: var(--wa-color-red-on);
+}
diff --git a/src/styles/danger/yellow.css b/src/styles/danger/yellow.css
new file mode 100644
index 000000000..424e28687
--- /dev/null
+++ b/src/styles/danger/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-danger-yellow {
+  --wa-color-danger-95: var(--wa-color-yellow-95);
+  --wa-color-danger-90: var(--wa-color-yellow-90);
+  --wa-color-danger-80: var(--wa-color-yellow-80);
+  --wa-color-danger-70: var(--wa-color-yellow-70);
+  --wa-color-danger-60: var(--wa-color-yellow-60);
+  --wa-color-danger-50: var(--wa-color-yellow-50);
+  --wa-color-danger-40: var(--wa-color-yellow-40);
+  --wa-color-danger-30: var(--wa-color-yellow-30);
+  --wa-color-danger-20: var(--wa-color-yellow-20);
+  --wa-color-danger-10: var(--wa-color-yellow-10);
+  --wa-color-danger-05: var(--wa-color-yellow-05);
+  --wa-color-danger: var(--wa-color-yellow);
+
+  --wa-color-danger-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-danger-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-danger-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-danger-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-danger-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-danger-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-danger-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-danger-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-danger-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-danger-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-danger-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-danger-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-danger-on: var(--wa-color-yellow-on);
+}
diff --git a/src/styles/neutral/blue.css b/src/styles/neutral/blue.css
new file mode 100644
index 000000000..bb31fcc06
--- /dev/null
+++ b/src/styles/neutral/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-blue {
+  --wa-color-neutral-95: var(--wa-color-blue-95);
+  --wa-color-neutral-90: var(--wa-color-blue-90);
+  --wa-color-neutral-80: var(--wa-color-blue-80);
+  --wa-color-neutral-70: var(--wa-color-blue-70);
+  --wa-color-neutral-60: var(--wa-color-blue-60);
+  --wa-color-neutral-50: var(--wa-color-blue-50);
+  --wa-color-neutral-40: var(--wa-color-blue-40);
+  --wa-color-neutral-30: var(--wa-color-blue-30);
+  --wa-color-neutral-20: var(--wa-color-blue-20);
+  --wa-color-neutral-10: var(--wa-color-blue-10);
+  --wa-color-neutral-05: var(--wa-color-blue-05);
+  --wa-color-neutral: var(--wa-color-blue);
+
+  --wa-color-neutral-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-blue-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-blue-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-blue-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-blue-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-blue-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-blue-on);
+}
diff --git a/src/styles/neutral/cyan.css b/src/styles/neutral/cyan.css
new file mode 100644
index 000000000..671ca0ce5
--- /dev/null
+++ b/src/styles/neutral/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-cyan {
+  --wa-color-neutral-95: var(--wa-color-cyan-95);
+  --wa-color-neutral-90: var(--wa-color-cyan-90);
+  --wa-color-neutral-80: var(--wa-color-cyan-80);
+  --wa-color-neutral-70: var(--wa-color-cyan-70);
+  --wa-color-neutral-60: var(--wa-color-cyan-60);
+  --wa-color-neutral-50: var(--wa-color-cyan-50);
+  --wa-color-neutral-40: var(--wa-color-cyan-40);
+  --wa-color-neutral-30: var(--wa-color-cyan-30);
+  --wa-color-neutral-20: var(--wa-color-cyan-20);
+  --wa-color-neutral-10: var(--wa-color-cyan-10);
+  --wa-color-neutral-05: var(--wa-color-cyan-05);
+  --wa-color-neutral: var(--wa-color-cyan);
+
+  --wa-color-neutral-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-cyan-on);
+}
diff --git a/src/styles/neutral/gray.css b/src/styles/neutral/gray.css
new file mode 100644
index 000000000..a606dd6b9
--- /dev/null
+++ b/src/styles/neutral/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-gray {
+  --wa-color-neutral-95: var(--wa-color-gray-95);
+  --wa-color-neutral-90: var(--wa-color-gray-90);
+  --wa-color-neutral-80: var(--wa-color-gray-80);
+  --wa-color-neutral-70: var(--wa-color-gray-70);
+  --wa-color-neutral-60: var(--wa-color-gray-60);
+  --wa-color-neutral-50: var(--wa-color-gray-50);
+  --wa-color-neutral-40: var(--wa-color-gray-40);
+  --wa-color-neutral-30: var(--wa-color-gray-30);
+  --wa-color-neutral-20: var(--wa-color-gray-20);
+  --wa-color-neutral-10: var(--wa-color-gray-10);
+  --wa-color-neutral-05: var(--wa-color-gray-05);
+  --wa-color-neutral: var(--wa-color-gray);
+
+  --wa-color-neutral-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-gray-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-gray-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-gray-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-gray-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-gray-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-gray-on);
+}
diff --git a/src/styles/neutral/green.css b/src/styles/neutral/green.css
new file mode 100644
index 000000000..91fa062bb
--- /dev/null
+++ b/src/styles/neutral/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-green {
+  --wa-color-neutral-95: var(--wa-color-green-95);
+  --wa-color-neutral-90: var(--wa-color-green-90);
+  --wa-color-neutral-80: var(--wa-color-green-80);
+  --wa-color-neutral-70: var(--wa-color-green-70);
+  --wa-color-neutral-60: var(--wa-color-green-60);
+  --wa-color-neutral-50: var(--wa-color-green-50);
+  --wa-color-neutral-40: var(--wa-color-green-40);
+  --wa-color-neutral-30: var(--wa-color-green-30);
+  --wa-color-neutral-20: var(--wa-color-green-20);
+  --wa-color-neutral-10: var(--wa-color-green-10);
+  --wa-color-neutral-05: var(--wa-color-green-05);
+  --wa-color-neutral: var(--wa-color-green);
+
+  --wa-color-neutral-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-green-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-green-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-green-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-green-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-green-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-green-on);
+}
diff --git a/src/styles/neutral/indigo.css b/src/styles/neutral/indigo.css
new file mode 100644
index 000000000..7f126353c
--- /dev/null
+++ b/src/styles/neutral/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-indigo {
+  --wa-color-neutral-95: var(--wa-color-indigo-95);
+  --wa-color-neutral-90: var(--wa-color-indigo-90);
+  --wa-color-neutral-80: var(--wa-color-indigo-80);
+  --wa-color-neutral-70: var(--wa-color-indigo-70);
+  --wa-color-neutral-60: var(--wa-color-indigo-60);
+  --wa-color-neutral-50: var(--wa-color-indigo-50);
+  --wa-color-neutral-40: var(--wa-color-indigo-40);
+  --wa-color-neutral-30: var(--wa-color-indigo-30);
+  --wa-color-neutral-20: var(--wa-color-indigo-20);
+  --wa-color-neutral-10: var(--wa-color-indigo-10);
+  --wa-color-neutral-05: var(--wa-color-indigo-05);
+  --wa-color-neutral: var(--wa-color-indigo);
+
+  --wa-color-neutral-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-indigo-on);
+}
diff --git a/src/styles/neutral/orange.css b/src/styles/neutral/orange.css
new file mode 100644
index 000000000..d025333e2
--- /dev/null
+++ b/src/styles/neutral/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-orange {
+  --wa-color-neutral-95: var(--wa-color-orange-95);
+  --wa-color-neutral-90: var(--wa-color-orange-90);
+  --wa-color-neutral-80: var(--wa-color-orange-80);
+  --wa-color-neutral-70: var(--wa-color-orange-70);
+  --wa-color-neutral-60: var(--wa-color-orange-60);
+  --wa-color-neutral-50: var(--wa-color-orange-50);
+  --wa-color-neutral-40: var(--wa-color-orange-40);
+  --wa-color-neutral-30: var(--wa-color-orange-30);
+  --wa-color-neutral-20: var(--wa-color-orange-20);
+  --wa-color-neutral-10: var(--wa-color-orange-10);
+  --wa-color-neutral-05: var(--wa-color-orange-05);
+  --wa-color-neutral: var(--wa-color-orange);
+
+  --wa-color-neutral-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-orange-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-orange-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-orange-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-orange-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-orange-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-orange-on);
+}
diff --git a/src/styles/neutral/pink.css b/src/styles/neutral/pink.css
new file mode 100644
index 000000000..c45d19dfe
--- /dev/null
+++ b/src/styles/neutral/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-pink {
+  --wa-color-neutral-95: var(--wa-color-pink-95);
+  --wa-color-neutral-90: var(--wa-color-pink-90);
+  --wa-color-neutral-80: var(--wa-color-pink-80);
+  --wa-color-neutral-70: var(--wa-color-pink-70);
+  --wa-color-neutral-60: var(--wa-color-pink-60);
+  --wa-color-neutral-50: var(--wa-color-pink-50);
+  --wa-color-neutral-40: var(--wa-color-pink-40);
+  --wa-color-neutral-30: var(--wa-color-pink-30);
+  --wa-color-neutral-20: var(--wa-color-pink-20);
+  --wa-color-neutral-10: var(--wa-color-pink-10);
+  --wa-color-neutral-05: var(--wa-color-pink-05);
+  --wa-color-neutral: var(--wa-color-pink);
+
+  --wa-color-neutral-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-pink-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-pink-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-pink-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-pink-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-pink-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-pink-on);
+}
diff --git a/src/styles/neutral/purple.css b/src/styles/neutral/purple.css
new file mode 100644
index 000000000..5dae2f390
--- /dev/null
+++ b/src/styles/neutral/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-purple {
+  --wa-color-neutral-95: var(--wa-color-purple-95);
+  --wa-color-neutral-90: var(--wa-color-purple-90);
+  --wa-color-neutral-80: var(--wa-color-purple-80);
+  --wa-color-neutral-70: var(--wa-color-purple-70);
+  --wa-color-neutral-60: var(--wa-color-purple-60);
+  --wa-color-neutral-50: var(--wa-color-purple-50);
+  --wa-color-neutral-40: var(--wa-color-purple-40);
+  --wa-color-neutral-30: var(--wa-color-purple-30);
+  --wa-color-neutral-20: var(--wa-color-purple-20);
+  --wa-color-neutral-10: var(--wa-color-purple-10);
+  --wa-color-neutral-05: var(--wa-color-purple-05);
+  --wa-color-neutral: var(--wa-color-purple);
+
+  --wa-color-neutral-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-purple-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-purple-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-purple-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-purple-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-purple-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-purple-on);
+}
diff --git a/src/styles/neutral/red.css b/src/styles/neutral/red.css
new file mode 100644
index 000000000..4c1c37f13
--- /dev/null
+++ b/src/styles/neutral/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-red {
+  --wa-color-neutral-95: var(--wa-color-red-95);
+  --wa-color-neutral-90: var(--wa-color-red-90);
+  --wa-color-neutral-80: var(--wa-color-red-80);
+  --wa-color-neutral-70: var(--wa-color-red-70);
+  --wa-color-neutral-60: var(--wa-color-red-60);
+  --wa-color-neutral-50: var(--wa-color-red-50);
+  --wa-color-neutral-40: var(--wa-color-red-40);
+  --wa-color-neutral-30: var(--wa-color-red-30);
+  --wa-color-neutral-20: var(--wa-color-red-20);
+  --wa-color-neutral-10: var(--wa-color-red-10);
+  --wa-color-neutral-05: var(--wa-color-red-05);
+  --wa-color-neutral: var(--wa-color-red);
+
+  --wa-color-neutral-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-red-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-red-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-red-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-red-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-red-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-red-on);
+}
diff --git a/src/styles/neutral/yellow.css b/src/styles/neutral/yellow.css
new file mode 100644
index 000000000..ed860a5bb
--- /dev/null
+++ b/src/styles/neutral/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-neutral-yellow {
+  --wa-color-neutral-95: var(--wa-color-yellow-95);
+  --wa-color-neutral-90: var(--wa-color-yellow-90);
+  --wa-color-neutral-80: var(--wa-color-yellow-80);
+  --wa-color-neutral-70: var(--wa-color-yellow-70);
+  --wa-color-neutral-60: var(--wa-color-yellow-60);
+  --wa-color-neutral-50: var(--wa-color-yellow-50);
+  --wa-color-neutral-40: var(--wa-color-yellow-40);
+  --wa-color-neutral-30: var(--wa-color-yellow-30);
+  --wa-color-neutral-20: var(--wa-color-yellow-20);
+  --wa-color-neutral-10: var(--wa-color-yellow-10);
+  --wa-color-neutral-05: var(--wa-color-yellow-05);
+  --wa-color-neutral: var(--wa-color-yellow);
+
+  --wa-color-neutral-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-neutral-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-neutral-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-neutral-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-neutral-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-neutral-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-neutral-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-neutral-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-neutral-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-neutral-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-neutral-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-neutral-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-neutral-on: var(--wa-color-yellow-on);
+}
diff --git a/src/styles/success/blue.css b/src/styles/success/blue.css
new file mode 100644
index 000000000..ea52bb405
--- /dev/null
+++ b/src/styles/success/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-blue {
+  --wa-color-success-95: var(--wa-color-blue-95);
+  --wa-color-success-90: var(--wa-color-blue-90);
+  --wa-color-success-80: var(--wa-color-blue-80);
+  --wa-color-success-70: var(--wa-color-blue-70);
+  --wa-color-success-60: var(--wa-color-blue-60);
+  --wa-color-success-50: var(--wa-color-blue-50);
+  --wa-color-success-40: var(--wa-color-blue-40);
+  --wa-color-success-30: var(--wa-color-blue-30);
+  --wa-color-success-20: var(--wa-color-blue-20);
+  --wa-color-success-10: var(--wa-color-blue-10);
+  --wa-color-success-05: var(--wa-color-blue-05);
+  --wa-color-success: var(--wa-color-blue);
+
+  --wa-color-success-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-blue-max-50);
+  --wa-color-success-min-50: var(--wa-color-blue-min-50);
+  --wa-color-success-max-60: var(--wa-color-blue-max-60);
+  --wa-color-success-min-60: var(--wa-color-blue-min-60);
+  --wa-color-success-max-70: var(--wa-color-blue-max-70);
+  --wa-color-success-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-success-on: var(--wa-color-blue-on);
+}
diff --git a/src/styles/success/cyan.css b/src/styles/success/cyan.css
new file mode 100644
index 000000000..f04c86bea
--- /dev/null
+++ b/src/styles/success/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-cyan {
+  --wa-color-success-95: var(--wa-color-cyan-95);
+  --wa-color-success-90: var(--wa-color-cyan-90);
+  --wa-color-success-80: var(--wa-color-cyan-80);
+  --wa-color-success-70: var(--wa-color-cyan-70);
+  --wa-color-success-60: var(--wa-color-cyan-60);
+  --wa-color-success-50: var(--wa-color-cyan-50);
+  --wa-color-success-40: var(--wa-color-cyan-40);
+  --wa-color-success-30: var(--wa-color-cyan-30);
+  --wa-color-success-20: var(--wa-color-cyan-20);
+  --wa-color-success-10: var(--wa-color-cyan-10);
+  --wa-color-success-05: var(--wa-color-cyan-05);
+  --wa-color-success: var(--wa-color-cyan);
+
+  --wa-color-success-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-success-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-success-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-success-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-success-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-success-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-success-on: var(--wa-color-cyan-on);
+}
diff --git a/src/styles/success/gray.css b/src/styles/success/gray.css
new file mode 100644
index 000000000..1ef3cd2bc
--- /dev/null
+++ b/src/styles/success/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-gray {
+  --wa-color-success-95: var(--wa-color-gray-95);
+  --wa-color-success-90: var(--wa-color-gray-90);
+  --wa-color-success-80: var(--wa-color-gray-80);
+  --wa-color-success-70: var(--wa-color-gray-70);
+  --wa-color-success-60: var(--wa-color-gray-60);
+  --wa-color-success-50: var(--wa-color-gray-50);
+  --wa-color-success-40: var(--wa-color-gray-40);
+  --wa-color-success-30: var(--wa-color-gray-30);
+  --wa-color-success-20: var(--wa-color-gray-20);
+  --wa-color-success-10: var(--wa-color-gray-10);
+  --wa-color-success-05: var(--wa-color-gray-05);
+  --wa-color-success: var(--wa-color-gray);
+
+  --wa-color-success-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-gray-max-50);
+  --wa-color-success-min-50: var(--wa-color-gray-min-50);
+  --wa-color-success-max-60: var(--wa-color-gray-max-60);
+  --wa-color-success-min-60: var(--wa-color-gray-min-60);
+  --wa-color-success-max-70: var(--wa-color-gray-max-70);
+  --wa-color-success-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-success-on: var(--wa-color-gray-on);
+}
diff --git a/src/styles/success/green.css b/src/styles/success/green.css
new file mode 100644
index 000000000..4088a7762
--- /dev/null
+++ b/src/styles/success/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-green {
+  --wa-color-success-95: var(--wa-color-green-95);
+  --wa-color-success-90: var(--wa-color-green-90);
+  --wa-color-success-80: var(--wa-color-green-80);
+  --wa-color-success-70: var(--wa-color-green-70);
+  --wa-color-success-60: var(--wa-color-green-60);
+  --wa-color-success-50: var(--wa-color-green-50);
+  --wa-color-success-40: var(--wa-color-green-40);
+  --wa-color-success-30: var(--wa-color-green-30);
+  --wa-color-success-20: var(--wa-color-green-20);
+  --wa-color-success-10: var(--wa-color-green-10);
+  --wa-color-success-05: var(--wa-color-green-05);
+  --wa-color-success: var(--wa-color-green);
+
+  --wa-color-success-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-green-max-50);
+  --wa-color-success-min-50: var(--wa-color-green-min-50);
+  --wa-color-success-max-60: var(--wa-color-green-max-60);
+  --wa-color-success-min-60: var(--wa-color-green-min-60);
+  --wa-color-success-max-70: var(--wa-color-green-max-70);
+  --wa-color-success-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-success-on: var(--wa-color-green-on);
+}
diff --git a/src/styles/success/indigo.css b/src/styles/success/indigo.css
new file mode 100644
index 000000000..b85471c29
--- /dev/null
+++ b/src/styles/success/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-indigo {
+  --wa-color-success-95: var(--wa-color-indigo-95);
+  --wa-color-success-90: var(--wa-color-indigo-90);
+  --wa-color-success-80: var(--wa-color-indigo-80);
+  --wa-color-success-70: var(--wa-color-indigo-70);
+  --wa-color-success-60: var(--wa-color-indigo-60);
+  --wa-color-success-50: var(--wa-color-indigo-50);
+  --wa-color-success-40: var(--wa-color-indigo-40);
+  --wa-color-success-30: var(--wa-color-indigo-30);
+  --wa-color-success-20: var(--wa-color-indigo-20);
+  --wa-color-success-10: var(--wa-color-indigo-10);
+  --wa-color-success-05: var(--wa-color-indigo-05);
+  --wa-color-success: var(--wa-color-indigo);
+
+  --wa-color-success-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-success-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-success-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-success-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-success-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-success-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-success-on: var(--wa-color-indigo-on);
+}
diff --git a/src/styles/success/orange.css b/src/styles/success/orange.css
new file mode 100644
index 000000000..6e534f047
--- /dev/null
+++ b/src/styles/success/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-orange {
+  --wa-color-success-95: var(--wa-color-orange-95);
+  --wa-color-success-90: var(--wa-color-orange-90);
+  --wa-color-success-80: var(--wa-color-orange-80);
+  --wa-color-success-70: var(--wa-color-orange-70);
+  --wa-color-success-60: var(--wa-color-orange-60);
+  --wa-color-success-50: var(--wa-color-orange-50);
+  --wa-color-success-40: var(--wa-color-orange-40);
+  --wa-color-success-30: var(--wa-color-orange-30);
+  --wa-color-success-20: var(--wa-color-orange-20);
+  --wa-color-success-10: var(--wa-color-orange-10);
+  --wa-color-success-05: var(--wa-color-orange-05);
+  --wa-color-success: var(--wa-color-orange);
+
+  --wa-color-success-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-orange-max-50);
+  --wa-color-success-min-50: var(--wa-color-orange-min-50);
+  --wa-color-success-max-60: var(--wa-color-orange-max-60);
+  --wa-color-success-min-60: var(--wa-color-orange-min-60);
+  --wa-color-success-max-70: var(--wa-color-orange-max-70);
+  --wa-color-success-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-success-on: var(--wa-color-orange-on);
+}
diff --git a/src/styles/success/pink.css b/src/styles/success/pink.css
new file mode 100644
index 000000000..5e6693d84
--- /dev/null
+++ b/src/styles/success/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-pink {
+  --wa-color-success-95: var(--wa-color-pink-95);
+  --wa-color-success-90: var(--wa-color-pink-90);
+  --wa-color-success-80: var(--wa-color-pink-80);
+  --wa-color-success-70: var(--wa-color-pink-70);
+  --wa-color-success-60: var(--wa-color-pink-60);
+  --wa-color-success-50: var(--wa-color-pink-50);
+  --wa-color-success-40: var(--wa-color-pink-40);
+  --wa-color-success-30: var(--wa-color-pink-30);
+  --wa-color-success-20: var(--wa-color-pink-20);
+  --wa-color-success-10: var(--wa-color-pink-10);
+  --wa-color-success-05: var(--wa-color-pink-05);
+  --wa-color-success: var(--wa-color-pink);
+
+  --wa-color-success-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-pink-max-50);
+  --wa-color-success-min-50: var(--wa-color-pink-min-50);
+  --wa-color-success-max-60: var(--wa-color-pink-max-60);
+  --wa-color-success-min-60: var(--wa-color-pink-min-60);
+  --wa-color-success-max-70: var(--wa-color-pink-max-70);
+  --wa-color-success-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-success-on: var(--wa-color-pink-on);
+}
diff --git a/src/styles/success/purple.css b/src/styles/success/purple.css
new file mode 100644
index 000000000..2a9dfa78f
--- /dev/null
+++ b/src/styles/success/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-purple {
+  --wa-color-success-95: var(--wa-color-purple-95);
+  --wa-color-success-90: var(--wa-color-purple-90);
+  --wa-color-success-80: var(--wa-color-purple-80);
+  --wa-color-success-70: var(--wa-color-purple-70);
+  --wa-color-success-60: var(--wa-color-purple-60);
+  --wa-color-success-50: var(--wa-color-purple-50);
+  --wa-color-success-40: var(--wa-color-purple-40);
+  --wa-color-success-30: var(--wa-color-purple-30);
+  --wa-color-success-20: var(--wa-color-purple-20);
+  --wa-color-success-10: var(--wa-color-purple-10);
+  --wa-color-success-05: var(--wa-color-purple-05);
+  --wa-color-success: var(--wa-color-purple);
+
+  --wa-color-success-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-purple-max-50);
+  --wa-color-success-min-50: var(--wa-color-purple-min-50);
+  --wa-color-success-max-60: var(--wa-color-purple-max-60);
+  --wa-color-success-min-60: var(--wa-color-purple-min-60);
+  --wa-color-success-max-70: var(--wa-color-purple-max-70);
+  --wa-color-success-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-success-on: var(--wa-color-purple-on);
+}
diff --git a/src/styles/success/red.css b/src/styles/success/red.css
new file mode 100644
index 000000000..a60880f2c
--- /dev/null
+++ b/src/styles/success/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-red {
+  --wa-color-success-95: var(--wa-color-red-95);
+  --wa-color-success-90: var(--wa-color-red-90);
+  --wa-color-success-80: var(--wa-color-red-80);
+  --wa-color-success-70: var(--wa-color-red-70);
+  --wa-color-success-60: var(--wa-color-red-60);
+  --wa-color-success-50: var(--wa-color-red-50);
+  --wa-color-success-40: var(--wa-color-red-40);
+  --wa-color-success-30: var(--wa-color-red-30);
+  --wa-color-success-20: var(--wa-color-red-20);
+  --wa-color-success-10: var(--wa-color-red-10);
+  --wa-color-success-05: var(--wa-color-red-05);
+  --wa-color-success: var(--wa-color-red);
+
+  --wa-color-success-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-red-max-50);
+  --wa-color-success-min-50: var(--wa-color-red-min-50);
+  --wa-color-success-max-60: var(--wa-color-red-max-60);
+  --wa-color-success-min-60: var(--wa-color-red-min-60);
+  --wa-color-success-max-70: var(--wa-color-red-max-70);
+  --wa-color-success-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-success-on: var(--wa-color-red-on);
+}
diff --git a/src/styles/success/yellow.css b/src/styles/success/yellow.css
new file mode 100644
index 000000000..287e9053d
--- /dev/null
+++ b/src/styles/success/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-success-yellow {
+  --wa-color-success-95: var(--wa-color-yellow-95);
+  --wa-color-success-90: var(--wa-color-yellow-90);
+  --wa-color-success-80: var(--wa-color-yellow-80);
+  --wa-color-success-70: var(--wa-color-yellow-70);
+  --wa-color-success-60: var(--wa-color-yellow-60);
+  --wa-color-success-50: var(--wa-color-yellow-50);
+  --wa-color-success-40: var(--wa-color-yellow-40);
+  --wa-color-success-30: var(--wa-color-yellow-30);
+  --wa-color-success-20: var(--wa-color-yellow-20);
+  --wa-color-success-10: var(--wa-color-yellow-10);
+  --wa-color-success-05: var(--wa-color-yellow-05);
+  --wa-color-success: var(--wa-color-yellow);
+
+  --wa-color-success-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-success-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-success-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-success-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-success-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-success-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-success-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-success-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-success-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-success-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-success-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-success-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-success-on: var(--wa-color-yellow-on);
+}
diff --git a/src/styles/themes/active/color.css b/src/styles/themes/active/color.css
index 20af3694f..e6b04d98e 100644
--- a/src/styles/themes/active/color.css
+++ b/src/styles/themes/active/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/rudimentary.css');
 @import url('../default/color.css');
 @import url('../../brand/green.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -13,7 +17,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-normal: var(--wa-color-gray-05);
+  --wa-color-text-normal: var(--wa-color-neutral-05);
   --wa-color-text-link: var(--wa-color-brand-40);
 
   --wa-color-focus: var(--wa-color-blue-60);
@@ -26,52 +30,52 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
   --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
   --wa-color-brand-border-quiet: var(--wa-color-brand-90);
   --wa-color-brand-border-normal: var(--wa-color-brand-80);
   --wa-color-brand-border-loud: var(--wa-color-brand-70);
   --wa-color-brand-on-quiet: var(--wa-color-brand-40);
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
+  --wa-color-brand-on-loud: black;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-70);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-70);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: black;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-70);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: black;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-70);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-70);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: black;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: black;
 }
 
@@ -90,51 +94,51 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
   --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
   --wa-color-brand-border-quiet: var(--wa-color-brand-20);
   --wa-color-brand-border-normal: var(--wa-color-brand-30);
   --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-90);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
+  --wa-color-brand-on-loud: black;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-80);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-90);
   --wa-color-success-on-loud: black;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-90);
   --wa-color-warning-on-loud: black;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-90);
   --wa-color-danger-on-loud: black;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-90);
   --wa-color-neutral-on-loud: black;
 }
diff --git a/src/styles/themes/awesome/color.css b/src/styles/themes/awesome/color.css
index ed55d2aea..f608d931a 100644
--- a/src/styles/themes/awesome/color.css
+++ b/src/styles/themes/awesome/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/bright.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -10,14 +14,14 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-normal: var(--wa-color-gray-20);
+  --wa-color-text-normal: var(--wa-color-neutral-20);
 
   /**
    * Semantic Colors
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
   --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70-min);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
   --wa-color-brand-border-quiet: var(--wa-color-brand-70);
   --wa-color-brand-border-normal: var(--wa-color-brand-50);
   --wa-color-brand-border-loud: var(--wa-color-brand-30);
@@ -25,44 +29,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: var(--wa-color-text-normal);
 
-  --wa-color-success-fill-quiet: var(--wa-color-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-70);
-  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-border-loud: var(--wa-color-green-30);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-70);
+  --wa-color-success-border-normal: var(--wa-color-success-50);
+  --wa-color-success-border-loud: var(--wa-color-success-30);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-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-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-border-normal: var(--wa-color-warning-50);
+  --wa-color-warning-border-loud: var(--wa-color-warning-30);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-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-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-border-normal: var(--wa-color-danger-50);
+  --wa-color-danger-border-loud: var(--wa-color-danger-30);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-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-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-40);
   --wa-color-neutral-on-loud: var(--wa-color-text-normal);
 }
 
@@ -77,51 +81,51 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
   --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
   --wa-color-brand-border-quiet: var(--wa-color-brand-30);
   --wa-color-brand-border-normal: var(--wa-color-brand-50);
   --wa-color-brand-border-loud: var(--wa-color-brand-80);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-80);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-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-30);
-  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-border-loud: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-50);
+  --wa-color-success-border-loud: var(--wa-color-success-80);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-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-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-50);
+  --wa-color-warning-border-loud: var(--wa-color-warning-80);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-warning-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-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-50);
+  --wa-color-danger-border-loud: var(--wa-color-danger-80);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-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-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
   --wa-color-neutral-on-loud: white;
 }
diff --git a/src/styles/themes/brutalist/color.css b/src/styles/themes/brutalist/color.css
index 9089ee416..98013f2a5 100644
--- a/src/styles/themes/brutalist/color.css
+++ b/src/styles/themes/brutalist/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/default.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -10,9 +14,9 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-border: var(--wa-color-gray-10);
+  --wa-color-surface-border: var(--wa-color-neutral-10);
 
-  --wa-color-text-link: var(--wa-color-gray-40);
+  --wa-color-text-link: var(--wa-color-neutral-40);
 
   --wa-color-shadow: rgb(0 0 0 / 0.2);
 
@@ -24,7 +28,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
   --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-max-50);
   --wa-color-brand-border-quiet: var(--wa-color-brand-80);
   --wa-color-brand-border-normal: var(--wa-color-brand-60);
   --wa-color-brand-border-loud: var(--wa-color-brand-40);
@@ -32,44 +36,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-60);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-max-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-80);
+  --wa-color-success-border-normal: var(--wa-color-success-60);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-40);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-60);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-max-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-border-normal: var(--wa-color-warning-60);
+  --wa-color-warning-border-loud: var(--wa-color-warning-40);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-40);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-80);
-  --wa-color-danger-border-normal: var(--wa-color-red-60);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-max-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-border-normal: var(--wa-color-danger-60);
+  --wa-color-danger-border-loud: var(--wa-color-danger-40);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-40);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -82,12 +86,12 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-gray-05);
-  --wa-color-surface-default: var(--wa-color-gray-10);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
-  --wa-color-surface-border: var(--wa-color-gray-40);
+  --wa-color-surface-raised: var(--wa-color-neutral-05);
+  --wa-color-surface-default: var(--wa-color-neutral-10);
+  --wa-color-surface-lowered: var(--wa-color-neutral-05);
+  --wa-color-surface-border: var(--wa-color-neutral-40);
 
-  --wa-color-text-link: var(--wa-color-gray-70);
+  --wa-color-text-link: var(--wa-color-neutral-70);
 
   --wa-color-shadow: rgb(0 0 0 / 0.5);
 
@@ -96,51 +100,51 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
   --wa-color-brand-fill-normal: var(--wa-color-brand-30);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70-min);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
   --wa-color-brand-border-quiet: var(--wa-color-brand-30);
   --wa-color-brand-border-normal: var(--wa-color-brand-40);
   --wa-color-brand-border-loud: var(--wa-color-brand-80);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-95);
   --wa-color-brand-on-loud: var(--wa-color-brand-10);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-green-80);
-  --wa-color-success-on-normal: var(--wa-color-green-95);
-  --wa-color-success-on-loud: var(--wa-color-green-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-80);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-95);
+  --wa-color-success-on-loud: var(--wa-color-success-10);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-95);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-80);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-95);
+  --wa-color-warning-on-loud: var(--wa-color-warning-10);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-80);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-95);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-80);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-95);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-50);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-95);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-90);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-95);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
diff --git a/src/styles/themes/classic/color.css b/src/styles/themes/classic/color.css
index c2ded2237..a42a72998 100644
--- a/src/styles/themes/classic/color.css
+++ b/src/styles/themes/classic/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/classic.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -22,44 +26,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-50);
-  --wa-color-success-on-normal: var(--wa-color-green-40);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-50);
+  --wa-color-success-on-normal: var(--wa-color-success-40);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-50);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-50);
+  --wa-color-warning-on-normal: var(--wa-color-warning-40);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-50);
-  --wa-color-danger-on-normal: var(--wa-color-red-40);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-50);
+  --wa-color-danger-on-normal: var(--wa-color-danger-40);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -69,7 +73,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-text-normal: var(--wa-color-gray-80);
+  --wa-color-text-normal: var(--wa-color-neutral-80);
 
   /**
    * Semantic Colors
@@ -82,45 +86,45 @@
   --wa-color-brand-border-loud: var(--wa-color-brand-50);
   --wa-color-brand-on-quiet: var(--wa-color-brand-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-80);
-  --wa-color-brand-on-loud: var(--wa-color-gray-10);
+  --wa-color-brand-on-loud: var(--wa-color-neutral-10);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
-  --wa-color-success-on-loud: var(--wa-color-gray-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-70);
+  --wa-color-success-on-normal: var(--wa-color-success-80);
+  --wa-color-success-on-loud: var(--wa-color-neutral-10);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-gray-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-neutral-10);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-60);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: var(--wa-color-gray-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-60);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-80);
+  --wa-color-danger-on-loud: var(--wa-color-neutral-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
 }
diff --git a/src/styles/themes/default/color.css b/src/styles/themes/default/color.css
index bf027e1a4..da6fd8339 100644
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -1,4 +1,8 @@
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 /**
  * Foundational Colors and Semantic Colors
@@ -20,25 +24,25 @@
    * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
   --wa-color-surface-raised: white;
   --wa-color-surface-default: white;
-  --wa-color-surface-lowered: var(--wa-color-gray-95);
-  --wa-color-surface-border: var(--wa-color-gray-90);
+  --wa-color-surface-lowered: var(--wa-color-neutral-95);
+  --wa-color-surface-border: var(--wa-color-neutral-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-normal: var(--wa-color-neutral-10);
+  --wa-color-text-quiet: var(--wa-color-neutral-40);
   --wa-color-text-link: var(--wa-color-brand-40);
 
   /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
+  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 20%, transparent);
 
   /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
    * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
    * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
+    var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
     transparent
   );
 
@@ -61,7 +65,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
   --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-max-50);
   --wa-color-brand-border-quiet: var(--wa-color-brand-90);
   --wa-color-brand-border-normal: var(--wa-color-brand-80);
   --wa-color-brand-border-loud: var(--wa-color-brand-60);
@@ -69,44 +73,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-max-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-max-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-max-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -120,17 +124,17 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
+  --wa-color-surface-raised: var(--wa-color-neutral-10);
+  --wa-color-surface-default: var(--wa-color-neutral-05);
   --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
-  --wa-color-surface-border: var(--wa-color-gray-20);
+  --wa-color-surface-border: var(--wa-color-neutral-20);
 
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
   --wa-color-text-link: var(--wa-color-brand-70);
 
   --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
 
   /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
   --wa-color-shadow: color-mix(
@@ -149,51 +153,51 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
   --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
   --wa-color-brand-border-quiet: var(--wa-color-brand-20);
   --wa-color-brand-border-normal: var(--wa-color-brand-30);
   --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-60);
   --wa-color-brand-on-normal: var(--wa-color-brand-70);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-60);
-  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-fill-quiet: var(--wa-color-success-10);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-40);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-60);
+  --wa-color-success-on-normal: var(--wa-color-success-70);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-40);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-60);
+  --wa-color-warning-on-normal: var(--wa-color-warning-70);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-60);
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-40);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-60);
+  --wa-color-danger-on-normal: var(--wa-color-danger-70);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
 }
diff --git a/src/styles/themes/glossy/color.css b/src/styles/themes/glossy/color.css
index b8bed8836..831354aee 100644
--- a/src/styles/themes/glossy/color.css
+++ b/src/styles/themes/glossy/color.css
@@ -1,67 +1,7 @@
 @import url('../../color/elegant.css');
 @import url('../default/color.css');
 @import url('../../brand/indigo.css');
-
-:where(:root),
-:host,
-.wa-theme-glossy,
-.wa-light,
-.wa-dark .wa-invert {
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-link: var(--wa-color-brand-40);
-
-  --wa-color-focus: var(--wa-color-brand-60);
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-link: var(--wa-color-brand-70);
-
-  --wa-color-focus: var(--wa-color-brand-60);
-
-  /**
-    * Semantic Colors
-    */
-  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
-  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-border-normal: var(--wa-color-brand-30);
-  --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
-  --wa-color-brand-on-normal: var(--wa-color-brand-70);
-  --wa-color-brand-on-loud: var(--wa-color-brand-on);
-
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-}
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
diff --git a/src/styles/themes/matter/color.css b/src/styles/themes/matter/color.css
index 62648dcbf..d3e891796 100644
--- a/src/styles/themes/matter/color.css
+++ b/src/styles/themes/matter/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/mild.css');
 @import url('../default/color.css');
-@import url('../../brand/indigo.css');
+@import url('../../brand/purple.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -15,7 +19,7 @@
    */
 
   --wa-color-surface-raised: var(--wa-color-brand-95);
-  --wa-color-surface-lowered: var(--wa-color-gray-90);
+  --wa-color-surface-lowered: var(--wa-color-neutral-90);
 
   --wa-color-text-link: var(--wa-color-brand-40);
 
@@ -39,44 +43,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-  --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-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-40);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-80);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: white;
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-  --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-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-40);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-80);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: white;
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-  --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-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-40);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-80);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-20);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -102,43 +106,43 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-80);
   --wa-color-brand-on-loud: var(--wa-color-brand-10);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-30);
-  --wa-color-success-fill-loud: var(--wa-color-green-70);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-80);
-  --wa-color-success-on-loud: var(--wa-color-green-10);
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-30);
+  --wa-color-success-fill-loud: var(--wa-color-success-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-20);
+  --wa-color-success-border-normal: var(--wa-color-success-30);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-70);
+  --wa-color-success-on-normal: var(--wa-color-success-80);
+  --wa-color-success-on-loud: var(--wa-color-success-10);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-30);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-border-normal: var(--wa-color-warning-30);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-80);
+  --wa-color-warning-on-loud: var(--wa-color-warning-10);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-30);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-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-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-80);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-30);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-border-normal: var(--wa-color-danger-30);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-80);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --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: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
diff --git a/src/styles/themes/mellow/color.css b/src/styles/themes/mellow/color.css
index aeca9a958..c8d945415 100644
--- a/src/styles/themes/mellow/color.css
+++ b/src/styles/themes/mellow/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/natural.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -14,9 +18,9 @@
    * Foundational Colors
    */
   --wa-color-surface-raised: white;
-  --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);
+  --wa-color-surface-default: var(--wa-color-neutral-95);
+  --wa-color-surface-lowered: var(--wa-color-neutral-90);
+  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
 
   --wa-color-text-normal: var(--wa-color-brand-20);
   --wa-color-text-quiet: var(--wa-color-brand-40);
@@ -29,7 +33,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
   --wa-color-brand-fill-normal: var(--wa-color-brand-80);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
   --wa-color-brand-border-quiet: var(--wa-color-brand-80);
   --wa-color-brand-border-normal: var(--wa-color-brand-70);
   --wa-color-brand-border-loud: var(--wa-color-brand-60);
@@ -37,44 +41,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-90);
-  --wa-color-success-fill-normal: var(--wa-color-green-80);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-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-fill-quiet: var(--wa-color-success-90);
+  --wa-color-success-fill-normal: var(--wa-color-success-80);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: var(--wa-color-success-80);
+  --wa-color-success-border-normal: var(--wa-color-success-70);
+  --wa-color-success-border-loud: var(--wa-color-success-60);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: white;
 
-  --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-50);
-  --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-fill-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-80);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-border-normal: var(--wa-color-warning-70);
+  --wa-color-warning-border-loud: var(--wa-color-warning-60);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: white;
 
-  --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-50);
-  --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-fill-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-80);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-border-normal: var(--wa-color-danger-70);
+  --wa-color-danger-border-loud: var(--wa-color-danger-60);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: white;
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
-  --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-fill-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 }
 
@@ -84,7 +88,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
+  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-30), transparent);
 
   --wa-color-text-normal: var(--wa-color-brand-90);
   --wa-color-text-quiet: var(--wa-color-brand-70);
@@ -92,6 +96,6 @@
   /**
    * Semantic Colors
    */
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
   --wa-color-neutral-on-loud: white;
 }
diff --git a/src/styles/themes/playful/color.css b/src/styles/themes/playful/color.css
index 1c02e288b..731bab72d 100644
--- a/src/styles/themes/playful/color.css
+++ b/src/styles/themes/playful/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/rudimentary.css');
 @import url('../default/color.css');
 @import url('../../brand/purple.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -10,7 +14,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-border: var(--wa-color-gray-80);
+  --wa-color-surface-border: var(--wa-color-neutral-80);
 
   --wa-color-text-link: var(--wa-color-yellow-40);
 
@@ -29,45 +33,45 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
-  --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-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --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-30);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: white;
+  --wa-color-success-fill-quiet: var(--wa-color-success-90);
+  --wa-color-success-fill-normal: var(--wa-color-success-80);
+  --wa-color-success-fill-loud: var(--wa-color-success);
+  --wa-color-success-border-quiet: var(--wa-color-success-90);
+  --wa-color-success-border-normal: var(--wa-color-success-70);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-30);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
+  --wa-color-success-on-loud: var(--wa-color-success-on);
 
-  --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-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --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-30);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: white;
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-80);
+  --wa-color-warning-fill-loud: var(--wa-color-warning);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+  --wa-color-warning-border-normal: var(--wa-color-warning-70);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
+  --wa-color-warning-on-loud: var(--wa-color-warning-on);
 
-  --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-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --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-30);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: white;
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-80);
+  --wa-color-danger-fill-loud: var(--wa-color-danger);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+  --wa-color-danger-border-normal: var(--wa-color-danger-70);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
+  --wa-color-danger-on-loud: var(--wa-color-danger-on);
 
-  --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-90);
-  --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-30);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-95);
 }
 
 .wa-dark,
@@ -76,13 +80,13 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-raised: var(--wa-color-gray-20);
-  --wa-color-surface-default: var(--wa-color-gray-10);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
-  --wa-color-surface-border: var(--wa-color-gray-20);
+  --wa-color-surface-raised: var(--wa-color-neutral-20);
+  --wa-color-surface-default: var(--wa-color-neutral-10);
+  --wa-color-surface-lowered: var(--wa-color-neutral-05);
+  --wa-color-surface-border: var(--wa-color-neutral-20);
 
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
   --wa-color-text-link: var(--wa-color-yellow-80);
 
   --wa-color-focus: var(--wa-color-brand-60);
@@ -98,47 +102,47 @@
   --wa-color-brand-border-quiet: var(--wa-color-brand-30);
   --wa-color-brand-border-normal: var(--wa-color-brand-40);
   --wa-color-brand-border-loud: var(--wa-color-brand-50);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-70);
   --wa-color-brand-on-normal: var(--wa-color-brand-90);
   --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-20);
-  --wa-color-success-fill-normal: var(--wa-color-green-40);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-green-40);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
-  --wa-color-success-on-loud: white;
+  --wa-color-success-fill-quiet: var(--wa-color-success-20);
+  --wa-color-success-fill-normal: var(--wa-color-success-40);
+  --wa-color-success-fill-loud: var(--wa-color-success);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-70);
+  --wa-color-success-on-normal: var(--wa-color-success-90);
+  --wa-color-success-on-loud: var(--wa-color-success-on);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-on-loud: white;
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-20);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-40);
+  --wa-color-warning-fill-loud: var(--wa-color-warning);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
+  --wa-color-warning-on-normal: var(--wa-color-warning-90);
+  --wa-color-warning-on-loud: var(--wa-color-warning-on);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
-  --wa-color-danger-fill-normal: var(--wa-color-red-40);
-  --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-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
-  --wa-color-danger-on-loud: white;
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-20);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-40);
+  --wa-color-danger-fill-loud: var(--wa-color-danger);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
+  --wa-color-danger-on-normal: var(--wa-color-danger-90);
+  --wa-color-danger-on-loud: var(--wa-color-danger-on);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
-  --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-50);
-  --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-05);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
 }
diff --git a/src/styles/themes/premium/color.css b/src/styles/themes/premium/color.css
index 5f71e430b..d28d65046 100644
--- a/src/styles/themes/premium/color.css
+++ b/src/styles/themes/premium/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/anodized.css');
 @import url('../default/color.css');
 @import url('../../brand/cyan.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -10,11 +14,7 @@
   /**
    * Foundational Colors
    */
-  --wa-color-surface-border: var(--wa-color-gray-80);
-
-  --wa-color-text-link: var(--wa-color-brand-40);
-
-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-surface-border: var(--wa-color-neutral-80);
 
   --wa-color-mix-hover: white 10%;
   --wa-color-mix-active: var(--wa-color-surface-default) 5%;
@@ -24,7 +24,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
   --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
   --wa-color-brand-border-quiet: var(--wa-color-brand-80);
   --wa-color-brand-border-normal: var(--wa-color-brand-70);
   --wa-color-brand-border-loud: var(--wa-color-brand-50);
@@ -32,45 +32,45 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-green-80);
-  --wa-color-success-border-normal: var(--wa-color-green-70);
-  --wa-color-success-border-loud: var(--wa-color-green-50);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: var(--wa-color-green-20);
+  --wa-color-success-fill-quiet: var(--wa-color-success-95);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-80);
+  --wa-color-success-border-normal: var(--wa-color-success-70);
+  --wa-color-success-border-loud: var(--wa-color-success-50);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
+  --wa-color-success-on-loud: var(--wa-color-success-20);
 
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-70);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-border-normal: var(--wa-color-warning-70);
+  --wa-color-warning-border-loud: var(--wa-color-warning-50);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
+  --wa-color-warning-on-loud: var(--wa-color-warning-20);
 
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-80);
-  --wa-color-danger-border-normal: var(--wa-color-red-70);
-  --wa-color-danger-border-loud: var(--wa-color-red-50);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-border-normal: var(--wa-color-danger-70);
+  --wa-color-danger-border-loud: var(--wa-color-danger-50);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-30);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
-  --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);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-95);
 }
 
 .wa-dark,
@@ -79,17 +79,15 @@
   /**
    * Foundational Colors
    */
-  --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-surface-raised: var(--wa-color-neutral-30);
+  --wa-color-surface-default: var(--wa-color-neutral-20);
+  --wa-color-surface-lowered: var(--wa-color-neutral-10);
+  --wa-color-surface-border: var(--wa-color-neutral-30);
 
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-80);
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-80);
   --wa-color-text-link: var(--wa-color-brand-80);
 
-  --wa-color-focus: var(--wa-color-brand-60);
-
   --wa-color-mix-hover: white 20%;
   --wa-color-mix-active: var(--wa-color-surface-default) 10%;
 
@@ -98,51 +96,51 @@
     */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-30);
   --wa-color-brand-fill-normal: var(--wa-color-brand-40);
-  --wa-color-brand-fill-loud: var(--wa-color-brand);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-min-70);
   --wa-color-brand-border-quiet: var(--wa-color-brand-30);
   --wa-color-brand-border-normal: var(--wa-color-brand-40);
   --wa-color-brand-border-loud: var(--wa-color-brand-70);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
   --wa-color-brand-on-normal: var(--wa-color-brand-90);
   --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
-  --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-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-success-fill-quiet: var(--wa-color-success-30);
+  --wa-color-success-fill-normal: var(--wa-color-success-40);
+  --wa-color-success-fill-loud: var(--wa-color-success-min-70);
+  --wa-color-success-border-quiet: var(--wa-color-success-30);
+  --wa-color-success-border-normal: var(--wa-color-success-40);
+  --wa-color-success-border-loud: var(--wa-color-success-70);
+  --wa-color-success-on-quiet: var(--wa-color-success-80);
+  --wa-color-success-on-normal: var(--wa-color-success-90);
+  --wa-color-success-on-loud: var(--wa-color-success-20);
 
-  --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-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-warning-fill-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-40);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
+  --wa-color-warning-border-quiet: var(--wa-color-warning-30);
+  --wa-color-warning-border-normal: var(--wa-color-warning-40);
+  --wa-color-warning-border-loud: var(--wa-color-warning-70);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-80);
+  --wa-color-warning-on-normal: var(--wa-color-warning-90);
+  --wa-color-warning-on-loud: var(--wa-color-warning-20);
 
-  --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-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-30);
-  --wa-color-danger-border-normal: var(--wa-color-red-40);
-  --wa-color-danger-border-loud: var(--wa-color-red-70);
-  --wa-color-danger-on-quiet: var(--wa-color-red-70);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
-  --wa-color-danger-on-loud: var(--wa-color-red-10);
+  --wa-color-danger-fill-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-40);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
+  --wa-color-danger-border-quiet: var(--wa-color-danger-30);
+  --wa-color-danger-border-normal: var(--wa-color-danger-40);
+  --wa-color-danger-border-loud: var(--wa-color-danger-70);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-80);
+  --wa-color-danger-on-normal: var(--wa-color-danger-90);
+  --wa-color-danger-on-loud: var(--wa-color-danger-10);
 
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-30);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-40);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-70);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-border-normal: var(--wa-color-neutral-40);
+  --wa-color-neutral-border-loud: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
diff --git a/src/styles/themes/tailspin/color.css b/src/styles/themes/tailspin/color.css
index 5af80c5ed..a7a8890de 100644
--- a/src/styles/themes/tailspin/color.css
+++ b/src/styles/themes/tailspin/color.css
@@ -1,6 +1,10 @@
 @import url('../../color/vogue.css');
 @import url('../default/color.css');
 @import url('../../brand/indigo.css');
+@import url('../../success/green.css');
+@import url('../../warning/yellow.css');
+@import url('../../danger/red.css');
+@import url('../../neutral/gray.css');
 
 :where(:root),
 :host,
@@ -16,8 +20,8 @@
 
   --wa-color-focus: var(--wa-color-brand-50);
 
-  --wa-color-mix-hover: var(--wa-color-gray-80) 20%;
-  --wa-color-mix-active: var(--wa-color-gray-80) 10%;
+  --wa-color-mix-hover: var(--wa-color-neutral-80) 20%;
+  --wa-color-mix-active: var(--wa-color-neutral-80) 10%;
 
   /**
    * Semantic Colors
@@ -32,44 +36,44 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
-  --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) 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-fill-quiet: color-mix(in oklab, var(--wa-color-success-95) 85%, transparent);
+  --wa-color-success-fill-normal: var(--wa-color-success-90);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-80), transparent);
+  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-70) 60%, transparent);
+  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-60) 70%, transparent);
+  --wa-color-success-on-quiet: var(--wa-color-success-40);
+  --wa-color-success-on-normal: var(--wa-color-success-30);
   --wa-color-success-on-loud: white;
 
-  --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) 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-fill-quiet: color-mix(in oklab, var(--wa-color-warning-95) 85%, transparent);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-80), transparent);
+  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-70) 60%, transparent);
+  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-60) 70%, transparent);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+  --wa-color-warning-on-normal: var(--wa-color-warning-30);
   --wa-color-warning-on-loud: white;
 
-  --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) 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-fill-quiet: color-mix(in oklab, var(--wa-color-danger-95) 85%, transparent);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-80), transparent);
+  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-70) 60%, transparent);
+  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-60) 70%, transparent);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+  --wa-color-danger-on-normal: var(--wa-color-danger-30);
   --wa-color-danger-on-loud: white;
 
-  --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-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-95) 85%, transparent);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-neutral-10);
+  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
+  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-70) 60%, transparent);
+  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-60) 70%, transparent);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
   --wa-color-neutral-on-loud: white;
 
   /**
@@ -88,15 +92,15 @@
   --wa-color-surface-border: rgb(255 255 255 / 0.1);
 
   --wa-color-text-normal: white;
-  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
   --wa-color-text-link: var(--wa-color-brand-70);
 
   --wa-color-shadow: rgb(0 0 0 / 0.2);
 
   --wa-color-focus: var(--wa-color-brand-60);
 
-  --wa-color-mix-hover: var(--wa-color-gray-70) 20%;
-  --wa-color-mix-active: var(--wa-color-gray-70) 10%;
+  --wa-color-mix-hover: var(--wa-color-neutral-70) 20%;
+  --wa-color-mix-active: var(--wa-color-neutral-70) 10%;
 
   /**
    * Semantic Colors
@@ -107,47 +111,47 @@
   --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
   --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
   --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
-  --wa-color-brand-on-normal: var(--wa-color-brand-70);
+  --wa-color-brand-on-quiet: var(--wa-color-brand-min-60);
+  --wa-color-brand-on-normal: var(--wa-color-brand-min-70);
   --wa-color-brand-on-loud: white;
 
-  --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) 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-fill-quiet: color-mix(in oklab, var(--wa-color-success-10) 90%, transparent);
+  --wa-color-success-fill-normal: var(--wa-color-success-20);
+  --wa-color-success-fill-loud: var(--wa-color-success-50);
+  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent);
+  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent);
+  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent);
+  --wa-color-success-on-quiet: var(--wa-color-success-min-60);
+  --wa-color-success-on-normal: var(--wa-color-success-min-70);
   --wa-color-success-on-loud: white;
 
-  --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) 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-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent);
+  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
+  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent);
+  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent);
+  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent);
+  --wa-color-warning-on-quiet: var(--wa-color-warning-min-60);
+  --wa-color-warning-on-normal: var(--wa-color-warning-min-70);
   --wa-color-warning-on-loud: white;
 
-  --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) 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-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent);
+  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
+  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent);
+  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent);
+  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent);
+  --wa-color-danger-on-quiet: var(--wa-color-danger-min-60);
+  --wa-color-danger-on-normal: var(--wa-color-danger-min-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-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent);
+  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
   --wa-color-neutral-fill-loud: white;
-  --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);
+  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-20), transparent);
+  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-30) 60%, transparent);
+  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-40) 70%, transparent);
+  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
+  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
+  --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
 }
diff --git a/src/styles/warning/blue.css b/src/styles/warning/blue.css
new file mode 100644
index 000000000..df03400ea
--- /dev/null
+++ b/src/styles/warning/blue.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-blue {
+  --wa-color-warning-95: var(--wa-color-blue-95);
+  --wa-color-warning-90: var(--wa-color-blue-90);
+  --wa-color-warning-80: var(--wa-color-blue-80);
+  --wa-color-warning-70: var(--wa-color-blue-70);
+  --wa-color-warning-60: var(--wa-color-blue-60);
+  --wa-color-warning-50: var(--wa-color-blue-50);
+  --wa-color-warning-40: var(--wa-color-blue-40);
+  --wa-color-warning-30: var(--wa-color-blue-30);
+  --wa-color-warning-20: var(--wa-color-blue-20);
+  --wa-color-warning-10: var(--wa-color-blue-10);
+  --wa-color-warning-05: var(--wa-color-blue-05);
+  --wa-color-warning: var(--wa-color-blue);
+
+  --wa-color-warning-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-blue-max-50);
+  --wa-color-warning-min-50: var(--wa-color-blue-min-50);
+  --wa-color-warning-max-60: var(--wa-color-blue-max-60);
+  --wa-color-warning-min-60: var(--wa-color-blue-min-60);
+  --wa-color-warning-max-70: var(--wa-color-blue-max-70);
+  --wa-color-warning-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-warning-on: var(--wa-color-blue-on);
+}
diff --git a/src/styles/warning/cyan.css b/src/styles/warning/cyan.css
new file mode 100644
index 000000000..8c813de0f
--- /dev/null
+++ b/src/styles/warning/cyan.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-cyan {
+  --wa-color-warning-95: var(--wa-color-cyan-95);
+  --wa-color-warning-90: var(--wa-color-cyan-90);
+  --wa-color-warning-80: var(--wa-color-cyan-80);
+  --wa-color-warning-70: var(--wa-color-cyan-70);
+  --wa-color-warning-60: var(--wa-color-cyan-60);
+  --wa-color-warning-50: var(--wa-color-cyan-50);
+  --wa-color-warning-40: var(--wa-color-cyan-40);
+  --wa-color-warning-30: var(--wa-color-cyan-30);
+  --wa-color-warning-20: var(--wa-color-cyan-20);
+  --wa-color-warning-10: var(--wa-color-cyan-10);
+  --wa-color-warning-05: var(--wa-color-cyan-05);
+  --wa-color-warning: var(--wa-color-cyan);
+
+  --wa-color-warning-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-warning-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-warning-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-warning-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-warning-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-warning-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-warning-on: var(--wa-color-cyan-on);
+}
diff --git a/src/styles/warning/gray.css b/src/styles/warning/gray.css
new file mode 100644
index 000000000..82a1b99ee
--- /dev/null
+++ b/src/styles/warning/gray.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-gray {
+  --wa-color-warning-95: var(--wa-color-gray-95);
+  --wa-color-warning-90: var(--wa-color-gray-90);
+  --wa-color-warning-80: var(--wa-color-gray-80);
+  --wa-color-warning-70: var(--wa-color-gray-70);
+  --wa-color-warning-60: var(--wa-color-gray-60);
+  --wa-color-warning-50: var(--wa-color-gray-50);
+  --wa-color-warning-40: var(--wa-color-gray-40);
+  --wa-color-warning-30: var(--wa-color-gray-30);
+  --wa-color-warning-20: var(--wa-color-gray-20);
+  --wa-color-warning-10: var(--wa-color-gray-10);
+  --wa-color-warning-05: var(--wa-color-gray-05);
+  --wa-color-warning: var(--wa-color-gray);
+
+  --wa-color-warning-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-gray-max-50);
+  --wa-color-warning-min-50: var(--wa-color-gray-min-50);
+  --wa-color-warning-max-60: var(--wa-color-gray-max-60);
+  --wa-color-warning-min-60: var(--wa-color-gray-min-60);
+  --wa-color-warning-max-70: var(--wa-color-gray-max-70);
+  --wa-color-warning-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-warning-on: var(--wa-color-gray-on);
+}
diff --git a/src/styles/warning/green.css b/src/styles/warning/green.css
new file mode 100644
index 000000000..7f5f6569d
--- /dev/null
+++ b/src/styles/warning/green.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-green {
+  --wa-color-warning-95: var(--wa-color-green-95);
+  --wa-color-warning-90: var(--wa-color-green-90);
+  --wa-color-warning-80: var(--wa-color-green-80);
+  --wa-color-warning-70: var(--wa-color-green-70);
+  --wa-color-warning-60: var(--wa-color-green-60);
+  --wa-color-warning-50: var(--wa-color-green-50);
+  --wa-color-warning-40: var(--wa-color-green-40);
+  --wa-color-warning-30: var(--wa-color-green-30);
+  --wa-color-warning-20: var(--wa-color-green-20);
+  --wa-color-warning-10: var(--wa-color-green-10);
+  --wa-color-warning-05: var(--wa-color-green-05);
+  --wa-color-warning: var(--wa-color-green);
+
+  --wa-color-warning-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-green-max-50);
+  --wa-color-warning-min-50: var(--wa-color-green-min-50);
+  --wa-color-warning-max-60: var(--wa-color-green-max-60);
+  --wa-color-warning-min-60: var(--wa-color-green-min-60);
+  --wa-color-warning-max-70: var(--wa-color-green-max-70);
+  --wa-color-warning-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-warning-on: var(--wa-color-green-on);
+}
diff --git a/src/styles/warning/indigo.css b/src/styles/warning/indigo.css
new file mode 100644
index 000000000..db10ebc8b
--- /dev/null
+++ b/src/styles/warning/indigo.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-indigo {
+  --wa-color-warning-95: var(--wa-color-indigo-95);
+  --wa-color-warning-90: var(--wa-color-indigo-90);
+  --wa-color-warning-80: var(--wa-color-indigo-80);
+  --wa-color-warning-70: var(--wa-color-indigo-70);
+  --wa-color-warning-60: var(--wa-color-indigo-60);
+  --wa-color-warning-50: var(--wa-color-indigo-50);
+  --wa-color-warning-40: var(--wa-color-indigo-40);
+  --wa-color-warning-30: var(--wa-color-indigo-30);
+  --wa-color-warning-20: var(--wa-color-indigo-20);
+  --wa-color-warning-10: var(--wa-color-indigo-10);
+  --wa-color-warning-05: var(--wa-color-indigo-05);
+  --wa-color-warning: var(--wa-color-indigo);
+
+  --wa-color-warning-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-warning-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-warning-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-warning-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-warning-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-warning-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-warning-on: var(--wa-color-indigo-on);
+}
diff --git a/src/styles/warning/orange.css b/src/styles/warning/orange.css
new file mode 100644
index 000000000..df46f463d
--- /dev/null
+++ b/src/styles/warning/orange.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-orange {
+  --wa-color-warning-95: var(--wa-color-orange-95);
+  --wa-color-warning-90: var(--wa-color-orange-90);
+  --wa-color-warning-80: var(--wa-color-orange-80);
+  --wa-color-warning-70: var(--wa-color-orange-70);
+  --wa-color-warning-60: var(--wa-color-orange-60);
+  --wa-color-warning-50: var(--wa-color-orange-50);
+  --wa-color-warning-40: var(--wa-color-orange-40);
+  --wa-color-warning-30: var(--wa-color-orange-30);
+  --wa-color-warning-20: var(--wa-color-orange-20);
+  --wa-color-warning-10: var(--wa-color-orange-10);
+  --wa-color-warning-05: var(--wa-color-orange-05);
+  --wa-color-warning: var(--wa-color-orange);
+
+  --wa-color-warning-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-orange-max-50);
+  --wa-color-warning-min-50: var(--wa-color-orange-min-50);
+  --wa-color-warning-max-60: var(--wa-color-orange-max-60);
+  --wa-color-warning-min-60: var(--wa-color-orange-min-60);
+  --wa-color-warning-max-70: var(--wa-color-orange-max-70);
+  --wa-color-warning-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-warning-on: var(--wa-color-orange-on);
+}
diff --git a/src/styles/warning/pink.css b/src/styles/warning/pink.css
new file mode 100644
index 000000000..de06dd08c
--- /dev/null
+++ b/src/styles/warning/pink.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-pink {
+  --wa-color-warning-95: var(--wa-color-pink-95);
+  --wa-color-warning-90: var(--wa-color-pink-90);
+  --wa-color-warning-80: var(--wa-color-pink-80);
+  --wa-color-warning-70: var(--wa-color-pink-70);
+  --wa-color-warning-60: var(--wa-color-pink-60);
+  --wa-color-warning-50: var(--wa-color-pink-50);
+  --wa-color-warning-40: var(--wa-color-pink-40);
+  --wa-color-warning-30: var(--wa-color-pink-30);
+  --wa-color-warning-20: var(--wa-color-pink-20);
+  --wa-color-warning-10: var(--wa-color-pink-10);
+  --wa-color-warning-05: var(--wa-color-pink-05);
+  --wa-color-warning: var(--wa-color-pink);
+
+  --wa-color-warning-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-pink-max-50);
+  --wa-color-warning-min-50: var(--wa-color-pink-min-50);
+  --wa-color-warning-max-60: var(--wa-color-pink-max-60);
+  --wa-color-warning-min-60: var(--wa-color-pink-min-60);
+  --wa-color-warning-max-70: var(--wa-color-pink-max-70);
+  --wa-color-warning-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-warning-on: var(--wa-color-pink-on);
+}
diff --git a/src/styles/warning/purple.css b/src/styles/warning/purple.css
new file mode 100644
index 000000000..e0cf12e68
--- /dev/null
+++ b/src/styles/warning/purple.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-purple {
+  --wa-color-warning-95: var(--wa-color-purple-95);
+  --wa-color-warning-90: var(--wa-color-purple-90);
+  --wa-color-warning-80: var(--wa-color-purple-80);
+  --wa-color-warning-70: var(--wa-color-purple-70);
+  --wa-color-warning-60: var(--wa-color-purple-60);
+  --wa-color-warning-50: var(--wa-color-purple-50);
+  --wa-color-warning-40: var(--wa-color-purple-40);
+  --wa-color-warning-30: var(--wa-color-purple-30);
+  --wa-color-warning-20: var(--wa-color-purple-20);
+  --wa-color-warning-10: var(--wa-color-purple-10);
+  --wa-color-warning-05: var(--wa-color-purple-05);
+  --wa-color-warning: var(--wa-color-purple);
+
+  --wa-color-warning-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-purple-max-50);
+  --wa-color-warning-min-50: var(--wa-color-purple-min-50);
+  --wa-color-warning-max-60: var(--wa-color-purple-max-60);
+  --wa-color-warning-min-60: var(--wa-color-purple-min-60);
+  --wa-color-warning-max-70: var(--wa-color-purple-max-70);
+  --wa-color-warning-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-warning-on: var(--wa-color-purple-on);
+}
diff --git a/src/styles/warning/red.css b/src/styles/warning/red.css
new file mode 100644
index 000000000..1d9db95d3
--- /dev/null
+++ b/src/styles/warning/red.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-red {
+  --wa-color-warning-95: var(--wa-color-red-95);
+  --wa-color-warning-90: var(--wa-color-red-90);
+  --wa-color-warning-80: var(--wa-color-red-80);
+  --wa-color-warning-70: var(--wa-color-red-70);
+  --wa-color-warning-60: var(--wa-color-red-60);
+  --wa-color-warning-50: var(--wa-color-red-50);
+  --wa-color-warning-40: var(--wa-color-red-40);
+  --wa-color-warning-30: var(--wa-color-red-30);
+  --wa-color-warning-20: var(--wa-color-red-20);
+  --wa-color-warning-10: var(--wa-color-red-10);
+  --wa-color-warning-05: var(--wa-color-red-05);
+  --wa-color-warning: var(--wa-color-red);
+
+  --wa-color-warning-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-red-max-50);
+  --wa-color-warning-min-50: var(--wa-color-red-min-50);
+  --wa-color-warning-max-60: var(--wa-color-red-max-60);
+  --wa-color-warning-min-60: var(--wa-color-red-min-60);
+  --wa-color-warning-max-70: var(--wa-color-red-max-70);
+  --wa-color-warning-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-warning-on: var(--wa-color-red-on);
+}
diff --git a/src/styles/warning/yellow.css b/src/styles/warning/yellow.css
new file mode 100644
index 000000000..0a37be680
--- /dev/null
+++ b/src/styles/warning/yellow.css
@@ -0,0 +1,36 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-warning-yellow {
+  --wa-color-warning-95: var(--wa-color-yellow-95);
+  --wa-color-warning-90: var(--wa-color-yellow-90);
+  --wa-color-warning-80: var(--wa-color-yellow-80);
+  --wa-color-warning-70: var(--wa-color-yellow-70);
+  --wa-color-warning-60: var(--wa-color-yellow-60);
+  --wa-color-warning-50: var(--wa-color-yellow-50);
+  --wa-color-warning-40: var(--wa-color-yellow-40);
+  --wa-color-warning-30: var(--wa-color-yellow-30);
+  --wa-color-warning-20: var(--wa-color-yellow-20);
+  --wa-color-warning-10: var(--wa-color-yellow-10);
+  --wa-color-warning-05: var(--wa-color-yellow-05);
+  --wa-color-warning: var(--wa-color-yellow);
+
+  --wa-color-warning-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-warning-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-warning-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-warning-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-warning-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-warning-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-warning-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-warning-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-warning-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-warning-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-warning-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-warning-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-warning-on: var(--wa-color-yellow-on);
+}

From 1d03f7bee0d921548139396bb48c46d7c5a49666 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Fri, 14 Mar 2025 09:29:04 -0400
Subject: [PATCH 07/31] [Icon-button] Make `--background-color-hover` work +
 remaining 3 interaction properties (#801)

* [Icon-button] Make `--background-color-hover` work, fixes #800

* [Icon-button] Introduce `--text-color-hover`, `--background-color-active`, `--text-color-active`

* Oops
---
 src/components/icon-button/icon-button.css | 10 +++++++---
 src/components/icon-button/icon-button.ts  |  5 ++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css
index 38ef368f1..cf12fe75b 100644
--- a/src/components/icon-button/icon-button.css
+++ b/src/components/icon-button/icon-button.css
@@ -1,5 +1,8 @@
 :host {
   --background-color-hover: var(--wa-color-neutral-fill-quiet);
+  --text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  --background-color-active: transparent;
+  --text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
 
   display: inline-block;
   color: var(--wa-color-text-quiet);
@@ -22,12 +25,13 @@
 
 :host(:not([disabled])) .icon-button:hover,
 :host(:not([disabled])) .icon-button:focus-visible {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  background-color: var(--background-color-hover);
+  color: var(--text-color-hover);
 }
 
 :host(:not([disabled])) .icon-button:active {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  background-color: var(--background-color-active);
+  color: var(--text-color-active);
 }
 
 .icon-button:focus {
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index 0a7b62834..64ec7475e 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -17,7 +17,10 @@ import styles from './icon-button.css';
  * @event blur - Emitted when the icon button loses focus.
  * @event focus - Emitted when the icon button gains focus.
  *
- * @cssproperty --background-color-hover - The color of the button's background on hover.
+ * @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover.
+ * @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`.
+ * @cssproperty --text-color-hover - The color of the button's background on hover.
+ * @cssproperty --text-color-active - The color of the button's background on `:active`.
  *
  * @csspart base - The component's base wrapper.
  */

From 79bafc513ad07dccc6134794198518b30d8f9051 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Tue, 18 Mar 2025 13:04:24 -0400
Subject: [PATCH 08/31] 11ty for webawesome-app (#803)

* working on integration

* 11ty for webawesome + app

* add flashes

* additional changes

* prettier

* add note about nunjucks

* prettier
---
 docs/.eleventy.js       | 22 +++++++++++++++++++---
 docs/_includes/base.njk |  8 ++++++++
 docs/_includes/head.njk |  4 ++++
 docs/_layouts/page.njk  |  9 +++++++--
 docs/index.md           |  4 +---
 scripts/build.js        | 38 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index c32049193..29d755be3 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -1,3 +1,4 @@
+import * as path from 'node:path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
@@ -16,7 +17,10 @@ import { searchPlugin } from './_utils/search.js';
 
 import process from 'process';
 
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
 const isDev = process.argv.includes('--develop');
 
@@ -24,6 +28,12 @@ const globalData = {
   package: packageData,
   isAlpha,
   layout: 'page.njk',
+
+  server: {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  },
 };
 
 const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
@@ -55,7 +65,12 @@ export default function (eleventyConfig) {
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+  });
+
+  // Turns `{% server_variable "foo" %} into `{{ server.foo | safe }}`
+  eleventyConfig.addShortcode('server', function (property) {
+    return `{{ server.${property} | safe }}`;
   });
 
   // Paired shortcodes - {% shortCode %}content{% endShortCode %}
@@ -131,7 +146,8 @@ export default function (eleventyConfig) {
       .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
       .map(component => {
         const name = component.tagName.split(/wa-/)[1];
-        return `./dist/components/${name}/${name}.js`;
+        const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+        return path.join(componentDirectory, 'components', name, `${name}.js`);
       });
 
     eleventyConfig.addPlugin(litPlugin, {
diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index 0a01532bf..6cbfea2de 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -50,6 +50,9 @@
             Search
             <kbd slot="suffix" class="only-desktop">/</kbd>
           </wa-button>
+
+          {# Login #}
+          {% server "loginOrAvatar" %}
         </div>
       </header>
 
@@ -76,14 +79,19 @@
         </aside>
       {% endif %}
 
+
       {# Main #}
       <main id="content">
         {# Expandable outline #}
+        {% if hasOutline %}
         <nav id="outline-expandable">
           <details class="outline-links">
             <summary>On this page</summary>
           </details>
         </nav>
+        {% endif %}
+
+        <div id="flashes">{% server "flashes" %}</div>
 
         {% block header %}
           {% include 'breadcrumbs.njk' %}
diff --git a/docs/_includes/head.njk b/docs/_includes/head.njk
index 695aa836b..89a303d24 100644
--- a/docs/_includes/head.njk
+++ b/docs/_includes/head.njk
@@ -47,3 +47,7 @@
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
 <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
 <link rel="stylesheet" href="/dist/styles/forms.css" />
+
+
+{# Used by Web Awesome App to inject other assets into the head. #}
+{% server "head" %}
diff --git a/docs/_layouts/page.njk b/docs/_layouts/page.njk
index a55a02c21..203527a44 100644
--- a/docs/_layouts/page.njk
+++ b/docs/_layouts/page.njk
@@ -1,4 +1,9 @@
-{% set hasSidebar = true %}
-{% set hasOutline = false %}
+{% if hasSidebar == undefined  %}
+  {% set hasSidebar = true %}
+{% endif %}
+
+{% if hasOutline == undefined  %}
+  {% set hasOutline = false %}
+{% endif %}
 
 {% extends "../_includes/base.njk" %}
diff --git a/docs/index.md b/docs/index.md
index aa3d060f5..9ae2e8a82 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,8 +4,6 @@ description: Build better with Web Awesome, the open source library of web compo
 layout: page
 ---
 
-
-
 <style>
   .title,
   .anchor-heading a,
@@ -387,4 +385,4 @@ layout: page
       &copy; Fonticons, Inc.
     </div>
   </footer>
-</div>
+</div>
\ No newline at end of file
diff --git a/scripts/build.js b/scripts/build.js
index 53db74355..31b335a96 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -4,9 +4,11 @@ import { execSync } from 'child_process';
 import { deleteAsync } from 'del';
 import esbuild from 'esbuild';
 import { replace } from 'esbuild-plugin-replace';
+
 import { mkdir, readFile } from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
 import { globby } from 'globby';
+import nunjucks from 'nunjucks';
 import ora from 'ora';
 import { dirname, join, relative } from 'path';
 import process from 'process';
@@ -266,6 +268,13 @@ async function regenerateBundle() {
  * Generates the documentation site.
  */
 async function generateDocs() {
+  /**
+   * Used by the webawesome-app to skip doc generation since it will do its own.
+   */
+  if (process.env.SKIP_ELEVENTY === 'true') {
+    return;
+  }
+
   spinner.start('Writing the docs');
 
   const args = [];
@@ -336,6 +345,35 @@ if (isDeveloping) {
           '/dist/': './dist-cdn/',
         },
       },
+      middleware: [
+        function simulateWebawesomeApp(req, res, next) {
+          // Accumulator for strings so we can pass them through nunjucks a second time similar to how the webawesome-app
+          // will be running nunjucks twice.
+          const finalString = [];
+          const encoding = 'utf-8';
+
+          const _write = res.write;
+          res.write = function (chunk, encoding) {
+            finalString.push(chunk.toString());
+          };
+
+          const _end = res.end;
+          res.end = function (...args) {
+            const transformedStr = nunjucks.renderString(finalString.join(''), {
+              // Stub the server EJS shortcodes.
+              server: {
+                head: '',
+                loginOrAvatar: '',
+                flashes: '',
+              },
+            });
+            _write.call(res, transformedStr, encoding);
+            _end.call(res, ...args);
+          };
+
+          next();
+        },
+      ],
       callbacks: {
         ready: (_err, instance) => {
           // 404 errors

From 07fe6d598ea8c56d029400d33286458f9086db7d Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Tue, 18 Mar 2025 16:08:31 -0400
Subject: [PATCH 09/31] Add curated `orange` to all palettes, closes #657
 (#798)

* Adjust `orange` in Default palette

* Adjust `orange`, `red`, and `yellow` in Classic palette

* Adjust `orange` in Anodized palette

* Adjust `orange` in Bright palette

* Adjust `orange` in Mild palette

* Adjust `orange` in Natural palette

* Adjust `orange` in Vogue palette

* Adjust `orange` in Rudimentary palette

* Adjust `orange` in Elegant palette
---
 src/styles/color/anodized.css    | 22 ++++++------
 src/styles/color/bright.css      | 14 ++++----
 src/styles/color/classic.css     | 60 ++++++++++++++++----------------
 src/styles/color/default.css     | 26 +++++++-------
 src/styles/color/elegant.css     | 22 ++++++------
 src/styles/color/mild.css        | 26 +++++++-------
 src/styles/color/natural.css     | 22 ++++++------
 src/styles/color/rudimentary.css | 26 +++++++-------
 src/styles/color/vogue.css       | 26 +++++++-------
 9 files changed, 122 insertions(+), 122 deletions(-)

diff --git a/src/styles/color/anodized.css b/src/styles/color/anodized.css
index fc1b06a94..42c446508 100644
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -18,17 +18,17 @@
   --wa-color-red: var(--wa-color-red-70);
   --wa-color-red-key: 70;
 
-  --wa-color-orange-95: oklch(96.462% 0.02077 52.138);
-  --wa-color-orange-90: oklch(92.556% 0.04363 51.242);
-  --wa-color-orange-80: #fdbb96 /* oklch(84.396% 0.09052 50.397) */;
-  --wa-color-orange-70: #eb9c74 /* oklch(76.151% 0.10953 47.299) */;
-  --wa-color-orange-60: #cf8162 /* oklch(67.86% 0.10698 42.148) */;
-  --wa-color-orange-50: #aa6248 /* oklch(57.281% 0.1014 40.415) */;
-  --wa-color-orange-40: #864834 /* oklch(47.233% 0.08958 39.166) */;
-  --wa-color-orange-30: #6b3727 /* oklch(39.974% 0.07776 38.975) */;
-  --wa-color-orange-20: #50271a /* oklch(32.519% 0.0649 38.022) */;
-  --wa-color-orange-10: #32160e /* oklch(23.873% 0.04713 38.423) */;
-  --wa-color-orange-05: #210c06 /* oklch(18.614% 0.03797 38.589) */;
+  --wa-color-orange-95: #ffefe8 /* oklch(96.287% 0.01978 45.262) */;
+  --wa-color-orange-90: #ffe0d2 /* oklch(92.854% 0.03927 45.816) */;
+  --wa-color-orange-80: #fbbc9e /* oklch(84.557% 0.08373 46.569) */;
+  --wa-color-orange-70: #f3976f /* oklch(76.236% 0.12363 43.995) */;
+  --wa-color-orange-60: #d67e59 /* oklch(68.046% 0.12088 43.174) */;
+  --wa-color-orange-50: #ae6140 /* oklch(57.433% 0.11041 43.333) */;
+  --wa-color-orange-40: #89472c /* oklch(47.39% 0.09837 42.278) */;
+  --wa-color-orange-30: #6f351e /* oklch(40.084% 0.08944 41.51) */;
+  --wa-color-orange-20: #542513 /* oklch(32.696% 0.07578 40.822) */;
+  --wa-color-orange-10: #341408 /* oklch(23.762% 0.05577 40.619) */;
+  --wa-color-orange-05: #230b04 /* oklch(18.679% 0.04417 39.815) */;
   --wa-color-orange: var(--wa-color-orange-70);
   --wa-color-orange-key: 70;
 
diff --git a/src/styles/color/bright.css b/src/styles/color/bright.css
index 912b77c40..64a540263 100644
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -22,13 +22,13 @@
   --wa-color-orange-90: oklch(92.395% 0.07984 53.06);
   --wa-color-orange-80: oklch(84.389% 0.12224 47.981);
   --wa-color-orange-70: oklch(76.55% 0.16521 42.512);
-  --wa-color-orange-60: #ea7237 /* oklch(68.444% 0.16501 44.349) */;
-  --wa-color-orange-50: #c0561a /* oklch(57.844% 0.15254 45.085) */;
-  --wa-color-orange-40: #963e05 /* oklch(47.639% 0.13153 45.898) */;
-  --wa-color-orange-30: oklch(40.376% 0.11554 45.517);
-  --wa-color-orange-20: oklch(32.94% 0.09927 45.913);
-  --wa-color-orange-10: oklch(24.083% 0.07743 46.027);
-  --wa-color-orange-05: oklch(18.817% 0.06098 48.455);
+  --wa-color-orange-60: #e97331 /* oklch(68.357% 0.16507 46.504) */;
+  --wa-color-orange-50: #bf5712 /* oklch(57.834% 0.15197 47.326) */;
+  --wa-color-orange-40: oklch(47.62% 0.132 48.51);
+  --wa-color-orange-30: oklch(40.38% 0.11554 50);
+  --wa-color-orange-20: oklch(32.94% 0.09927 52);
+  --wa-color-orange-10: oklch(24.083% 0.07743 54);
+  --wa-color-orange-05: oklch(18.817% 0.06098 55);
   --wa-color-orange: var(--wa-color-orange-70);
   --wa-color-orange-key: 70;
 
diff --git a/src/styles/color/classic.css b/src/styles/color/classic.css
index 8d1c822fc..ed584e045 100644
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -6,45 +6,45 @@
 .wa-palette-classic {
   --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
   --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
-  --wa-color-red-80: #ffb8b4 /* oklch(84.753% 0.08313 22.598) */;
-  --wa-color-red-70: #fd908e /* oklch(76.913% 0.13219 21.705) */;
-  --wa-color-red-60: #f46766 /* oklch(68.945% 0.17423 23.179) */;
-  --wa-color-red-50: #df2f2e /* oklch(58.922% 0.21141 26.911) */;
-  --wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
-  --wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
-  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
-  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
-  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
+  --wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
+  --wa-color-red-70: #fe8f8d /* oklch(76.859% 0.13466 21.762) */;
+  --wa-color-red-60: #f56667 /* oklch(68.982% 0.17631 22.472) */;
+  --wa-color-red-50: #e02c2b /* oklch(58.861% 0.21461 27.156) */;
+  --wa-color-red-40: #b5051a /* oklch(48.833% 0.19611 25.68) */;
+  --wa-color-red-30: #900015 /* oklch(41.172% 0.16676 24.609) */;
+  --wa-color-red-20: #6c000d /* oklch(33.479% 0.1356 24.617) */;
+  --wa-color-red-10: #450005 /* oklch(24.598% 0.09968 24.835) */;
+  --wa-color-red-05: #2f0002 /* oklch(19.218% 0.07801 25.517) */;
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-orange-95: oklch(96.245% 0.04153 59.224);
-  --wa-color-orange-90: oklch(92.468% 0.07656 58.647);
-  --wa-color-orange-80: oklch(84.375% 0.11283 54.179);
-  --wa-color-orange-70: #fb945a /* oklch(76.369% 0.14454 48.621) */;
-  --wa-color-orange-60: #f26b31 /* oklch(68.509% 0.18046 41.503) */;
-  --wa-color-orange-50: #cf4812 /* oklch(58.288% 0.18026 38.576) */;
-  --wa-color-orange-40: oklch(48.175% 0.16316 38.526);
-  --wa-color-orange-30: oklch(40.779% 0.13925 37.899);
-  --wa-color-orange-20: oklch(33.129% 0.11288 38.58);
-  --wa-color-orange-10: oklch(24.259% 0.0831 38.502);
-  --wa-color-orange-05: oklch(18.969% 0.06527 38.137);
+  --wa-color-orange-95: #fff0e4 /* oklch(96.374% 0.0228 61.238) */;
+  --wa-color-orange-90: #ffe0c8 /* oklch(92.611% 0.04689 59.917) */;
+  --wa-color-orange-80: #ffbb89 /* oklch(84.386% 0.10217 57.161) */;
+  --wa-color-orange-70: #ff9342 /* oklch(76.486% 0.15964 54.102) */;
+  --wa-color-orange-60: #f36d00 /* oklch(68.715% 0.18774 47.79) */;
+  --wa-color-orange-50: #c94e00 /* oklch(58.068% 0.17131 43.217) */;
+  --wa-color-orange-40: #9d3800 /* oklch(47.924% 0.14534 41.739) */;
+  --wa-color-orange-30: #7e2900 /* oklch(40.53% 0.1259 40.51) */;
+  --wa-color-orange-20: #5e1c00 /* oklch(32.874% 0.1027 40.228) */;
+  --wa-color-orange-10: #3b0f00 /* oklch(24.125% 0.07446 40.837) */;
+  --wa-color-orange-05: #280700 /* oklch(18.837% 0.05933 39.827) */;
   --wa-color-orange: var(--wa-color-orange-60);
   --wa-color-orange-key: 60;
 
   --wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
   --wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
-  --wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;
+  --wa-color-yellow-80: #f5c24b /* oklch(83.879% 0.14445 85.083) */;
   --wa-color-yellow-70: #e9a010 /* oklch(75.825% 0.15689 75.537) */;
-  --wa-color-yellow-60: #de7c00 /* oklch(68.073% 0.15991 59.827) */;
-  --wa-color-yellow-50: #bc5908 /* oklch(57.654% 0.1491 50.241) */;
-  --wa-color-yellow-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
-  --wa-color-yellow-30: #763104 /* oklch(40.324% 0.1093 46.564) */;
-  --wa-color-yellow-20: #572301 /* oklch(32.677% 0.08796 47.926) */;
-  --wa-color-yellow-10: #371300 /* oklch(24.001% 0.06559 47.77) */;
-  --wa-color-yellow-05: #250a00 /* oklch(18.773% 0.0519 47.039) */;
-  --wa-color-yellow: var(--wa-color-yellow-60);
-  --wa-color-yellow-key: 60;
+  --wa-color-yellow-60: #d78000 /* oklch(67.839% 0.15287 64.455) */;
+  --wa-color-yellow-50: #b26000 /* oklch(57.324% 0.13672 58.338) */;
+  --wa-color-yellow-40: #8a4700 /* oklch(47.183% 0.11461 56.655) */;
+  --wa-color-yellow-30: #6e3700 /* oklch(40.03% 0.0976 56.323) */;
+  --wa-color-yellow-20: #522700 /* oklch(32.54% 0.07981 55.802) */;
+  --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+  --wa-color-yellow-05: #210d00 /* oklch(18.619% 0.04431 58.553) */;
+  --wa-color-yellow: var(--wa-color-yellow-70);
+  --wa-color-yellow-key: 70;
 
   --wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
   --wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;
diff --git a/src/styles/color/default.css b/src/styles/color/default.css
index 340f2d09a..cdbbbad5c 100644
--- a/src/styles/color/default.css
+++ b/src/styles/color/default.css
@@ -18,19 +18,19 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-orange-95: oklch(96.494% 0.0335 57.914);
-  --wa-color-orange-90: oklch(92.556% 0.06963 56.631);
-  --wa-color-orange-80: oklch(84.494% 0.12276 53.381);
-  --wa-color-orange-70: oklch(76.375% 0.17194 46.091);
-  --wa-color-orange-60: #eb713f /* oklch(68.398% 0.16422 41.446) */;
-  --wa-color-orange-50: #cb4b1d /* oklch(58.153% 0.17174 38.404) */;
-  --wa-color-orange-40: #a2310c /* oklch(48.028% 0.15488 36.538) */;
-  --wa-color-orange-30: #7f2810 /* oklch(40.591% 0.12506 35.663) */;
-  --wa-color-orange-20: #5d1d0e /* oklch(32.908% 0.09683 34.387) */;
-  --wa-color-orange-10: #3a1005 /* oklch(24.088% 0.06954 35.613) */;
-  --wa-color-orange-05: #270803 /* oklch(18.801% 0.05509 34.149) */;
-  --wa-color-orange: var(--wa-color-orange-70);
-  --wa-color-orange-key: 70;
+  --wa-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
+  --wa-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
+  --wa-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
+  --wa-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
+  --wa-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
+  --wa-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
+  --wa-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
+  --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
+  --wa-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
+  --wa-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
+  --wa-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
 
   --wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
   --wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
diff --git a/src/styles/color/elegant.css b/src/styles/color/elegant.css
index 3e45327b5..cd959e7e0 100644
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -18,17 +18,17 @@
   --wa-color-red: var(--wa-color-red-40);
   --wa-color-red-key: 40;
 
-  --wa-color-orange-95: oklch(96.238% 0.02664 61.788);
-  --wa-color-orange-90: #fbe1cc /* oklch(92.512% 0.04019 60.45) */;
-  --wa-color-orange-80: #edc1a0 /* oklch(84.097% 0.06661 58.236) */;
-  --wa-color-orange-70: #dda178 /* oklch(75.734% 0.09064 55.123) */;
-  --wa-color-orange-60: #cd8351 /* oklch(67.646% 0.1134 53.172) */;
-  --wa-color-orange-50: #b65d22 /* oklch(57.437% 0.13446 49.881) */;
-  --wa-color-orange-40: oklch(47.576% 0.13426 46.452);
-  --wa-color-orange-30: oklch(40.382% 0.12087 47.003);
-  --wa-color-orange-20: oklch(32.846% 0.0965 46.227);
-  --wa-color-orange-10: oklch(24.06% 0.06873 45.849);
-  --wa-color-orange-05: #260900 /* oklch(18.727% 0.05359 44.791) */;
+  --wa-color-orange-95: #ffefe1 /* oklch(96.105% 0.02545 63.746) */;
+  --wa-color-orange-90: #fbe0cb /* oklch(92.334% 0.04096 60.142) */;
+  --wa-color-orange-80: #efc19f /* oklch(84.313% 0.06973 58.09) */;
+  --wa-color-orange-70: #e1a173 /* oklch(76.013% 0.09772 56.368) */;
+  --wa-color-orange-60: #d1824d /* oklch(67.937% 0.11938 53.195) */;
+  --wa-color-orange-50: #b65d22 /* oklch(57.543% 0.13444 49.914) */;
+  --wa-color-orange-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
+  --wa-color-orange-30: #773001 /* oklch(40.317% 0.11198 46.326) */;
+  --wa-color-orange-20: #592100 /* oklch(32.692% 0.09239 45.689) */;
+  --wa-color-orange-10: #381200 /* oklch(24.015% 0.06777 45.771) */;
+  --wa-color-orange-05: #260900 /* oklch(18.789% 0.05427 44.405) */;
   --wa-color-orange: var(--wa-color-orange-50);
   --wa-color-orange-key: 50;
 
diff --git a/src/styles/color/mild.css b/src/styles/color/mild.css
index 45f69f779..0c009a080 100644
--- a/src/styles/color/mild.css
+++ b/src/styles/color/mild.css
@@ -18,19 +18,19 @@
   --wa-color-red: var(--wa-color-red-40);
   --wa-color-red-key: 40;
 
-  --wa-color-orange-95: oklch(96.126% 0.05417 66.333);
-  --wa-color-orange-90: oklch(92.413% 0.07898 62.545);
-  --wa-color-orange-80: #f9bd86 /* oklch(84.088% 0.09891 63.847) */;
-  --wa-color-orange-70: #e2a05f /* oklch(75.707% 0.11352 64.057) */;
-  --wa-color-orange-60: #d18228 /* oklch(67.572% 0.13809 64.146) */;
-  --wa-color-orange-50: oklch(57.202% 0.13583 64.309);
-  --wa-color-orange-40: oklch(47.462% 0.13789 64.939);
-  --wa-color-orange-30: oklch(40.049% 0.12025 65.207);
-  --wa-color-orange-20: oklch(32.552% 0.09777 64.859);
-  --wa-color-orange-10: oklch(23.884% 0.07141 64.246);
-  --wa-color-orange-05: oklch(18.698% 0.05597 65.589);
-  --wa-color-orange: var(--wa-color-orange-60);
-  --wa-color-orange-key: 60;
+  --wa-color-orange-95: #fff0e8 /* oklch(96.479% 0.01949 50.157) */;
+  --wa-color-orange-90: #ffdfc8 /* oklch(92.42% 0.04692 57.822) */;
+  --wa-color-orange-80: #ffbb84 /* oklch(84.3% 0.10585 59.641) */;
+  --wa-color-orange-70: #e79f64 /* oklch(76.075% 0.1143 59.207) */;
+  --wa-color-orange-60: #ca854c /* oklch(67.612% 0.11209 58.789) */;
+  --wa-color-orange-50: #a56732 /* oklch(57.133% 0.10488 58.75) */;
+  --wa-color-orange-40: #824c1a /* oklch(47.091% 0.09621 59.168) */;
+  --wa-color-orange-30: #6a3907 /* oklch(39.832% 0.09012 58.688) */;
+  --wa-color-orange-20: #512800 /* oklch(32.57% 0.07814 57.787) */;
+  --wa-color-orange-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+  --wa-color-orange-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
 
   --wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
   --wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
diff --git a/src/styles/color/natural.css b/src/styles/color/natural.css
index 8c3200ee4..f2dadaaf5 100644
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -18,17 +18,17 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-orange-95: #f8f0ec /* oklch(96.084% 0.01043 54.557) */;
-  --wa-color-orange-90: #f2e3d8 /* oklch(92.485% 0.02211 56.694) */;
-  --wa-color-orange-80: #e4c4ad /* oklch(84.166% 0.04799 57.553) */;
-  --wa-color-orange-70: #d3a583 /* oklch(75.674% 0.07148 57.481) */;
-  --wa-color-orange-60: #bc8a65 /* oklch(67.319% 0.08062 57.054) */;
-  --wa-color-orange-50: #9e6940 /* oklch(56.757% 0.08845 56.746) */;
-  --wa-color-orange-40: #7e4d27 /* oklch(46.949% 0.08447 57.382) */;
-  --wa-color-orange-30: #673a17 /* oklch(39.774% 0.0793 55.768) */;
-  --wa-color-orange-20: #4f2906 /* oklch(32.45% 0.0725 57.629) */;
-  --wa-color-orange-10: #311702 /* oklch(23.759% 0.05361 57.126) */;
-  --wa-color-orange-05: #200d01 /* oklch(18.517% 0.04211 57.178) */;
+  --wa-color-orange-95: #f9f2ed /* oklch(96.52% 0.01008 58.217) */;
+  --wa-color-orange-90: #f4e3d6 /* oklch(92.595% 0.02556 59.903) */;
+  --wa-color-orange-80: #e6c3aa /* oklch(84.087% 0.05242 57.474) */;
+  --wa-color-orange-70: #d3a685 /* oklch(75.824% 0.06976 57.703) */;
+  --wa-color-orange-60: #bf8962 /* oklch(67.428% 0.08515 56.553) */;
+  --wa-color-orange-50: #a26839 /* oklch(57.025% 0.09733 58.071) */;
+  --wa-color-orange-40: #824b20 /* oklch(46.959% 0.09366 55.634) */;
+  --wa-color-orange-30: #683a17 /* oklch(39.855% 0.08077 54.814) */;
+  --wa-color-orange-20: #4d2a0e /* oklch(32.469% 0.06563 55.984) */;
+  --wa-color-orange-10: #301705 /* oklch(23.621% 0.04968 54.306) */;
+  --wa-color-orange-05: #1f0e03 /* oklch(18.572% 0.03671 56.067) */;
   --wa-color-orange: var(--wa-color-orange-50);
   --wa-color-orange-key: 50;
 
diff --git a/src/styles/color/rudimentary.css b/src/styles/color/rudimentary.css
index b1d2f32f3..00d6e0c29 100644
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -18,19 +18,19 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-orange-95: oklch(96.488% 0.04965 58.92);
-  --wa-color-orange-90: oklch(92.244% 0.08759 57.789);
-  --wa-color-orange-80: oklch(84.32% 0.12702 56.232);
-  --wa-color-orange-70: oklch(76.31% 0.17967 50.95);
-  --wa-color-orange-60: #e87431 /* oklch(68.352% 0.16354 47.083) */;
-  --wa-color-orange-50: oklch(58.23% 0.17947 43.3);
-  --wa-color-orange-40: oklch(48.089% 0.16071 40.798);
-  --wa-color-orange-30: oklch(40.708% 0.13699 39.616);
-  --wa-color-orange-20: oklch(33.124% 0.1121 39.599);
-  --wa-color-orange-10: oklch(24.257% 0.08204 39.602);
-  --wa-color-orange-05: oklch(18.966% 0.06414 39.606);
-  --wa-color-orange: var(--wa-color-orange-70);
-  --wa-color-orange-key: 70;
+  --wa-color-orange-95: #fff1e4 /* oklch(96.567% 0.02297 65.466) */;
+  --wa-color-orange-90: #ffdfc4 /* oklch(92.327% 0.0504 62.301) */;
+  --wa-color-orange-80: #ffbc80 /* oklch(84.418% 0.10871 62.363) */;
+  --wa-color-orange-70: #ff9427 /* oklch(76.467% 0.1689 59.353) */;
+  --wa-color-orange-60: #f16e00 /* oklch(68.563% 0.18516 48.551) */;
+  --wa-color-orange-50: #c75003 /* oklch(58.025% 0.16741 44.08) */;
+  --wa-color-orange-40: #9e3702 /* oklch(47.974% 0.14693 40.809) */;
+  --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
+  --wa-color-orange-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
+  --wa-color-orange-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
+  --wa-color-orange-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
 
   --wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */;
   --wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */;
diff --git a/src/styles/color/vogue.css b/src/styles/color/vogue.css
index 7277a877d..15061226d 100644
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -18,19 +18,19 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-orange-95: oklch(96.355% 0.05982 62.448);
-  --wa-color-orange-90: oklch(92.371% 0.10134 60.314);
-  --wa-color-orange-80: oklch(84.228% 0.13101 54.157);
-  --wa-color-orange-70: oklch(76.275% 0.16839 51.143);
-  --wa-color-orange-60: #e67530 /* oklch(68.22% 0.16179 47.997) */;
-  --wa-color-orange-50: oklch(58.011% 0.16819 44.953);
-  --wa-color-orange-40: #9b390d /* oklch(47.739% 0.14004 40.585) */;
-  --wa-color-orange-30: #7a2b17 /* oklch(40.323% 0.11475 35.602) */;
-  --wa-color-orange-20: #5c1e0f /* oklch(32.963% 0.09552 34.666) */;
-  --wa-color-orange-10: #3a0f06 /* oklch(24.042% 0.07066 34.715) */;
-  --wa-color-orange-05: #270803 /* oklch(18.867% 0.05444 34.696) */;
-  --wa-color-orange: var(--wa-color-orange-70);
-  --wa-color-orange-key: 70;
+  --wa-color-orange-95: #fff1de /* oklch(96.415% 0.02927 75.692) */;
+  --wa-color-orange-90: #fee0bc /* oklch(92.25% 0.05764 72.084) */;
+  --wa-color-orange-80: #fdbe7a /* oklch(84.485% 0.11179 67.463) */;
+  --wa-color-orange-70: #fb9641 /* oklch(76.472% 0.15504 57.097) */;
+  --wa-color-orange-60: #f56b11 /* oklch(68.77% 0.18951 45.673) */;
+  --wa-color-orange-50: #cf480e /* oklch(58.335% 0.18077 39.019) */;
+  --wa-color-orange-40: #a13308 /* oklch(48.025% 0.15268 37.837) */;
+  --wa-color-orange-30: #802604 /* oklch(40.538% 0.12998 37.701) */;
+  --wa-color-orange-20: #601a02 /* oklch(33.012% 0.10627 37.613) */;
+  --wa-color-orange-10: #3d0d01 /* oklch(24.269% 0.07841 37.157) */;
+  --wa-color-orange-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
 
   --wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
   --wa-color-yellow-90: #fde761 /* oklch(92.138% 0.15325 99.997) */;

From 872a110b1ec916a3c37fac40b449822d51c79e15 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Thu, 20 Mar 2025 14:58:21 -0400
Subject: [PATCH 10/31] reflect href on buttons (#817)

---
 src/components/button/button.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index eb6152c2e..1ba684c61 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -109,7 +109,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) value: string | null = null;
 
   /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-  @property() href = '';
+  @property({ reflect: true }) href = null;
 
   /** Tells the browser where to open the link. Only used when `href` is present. */
   @property() target: '_blank' | '_parent' | '_self' | '_top';

From 899edd1d5e342b086b203b920936420c6d56215b Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Thu, 20 Mar 2025 16:37:22 -0400
Subject: [PATCH 11/31] Konnorrogers/add a guard for non server deploys (#818)

* add a guard for non-server builds

* add a guard for non-server builds

* add a guard for non-server builds

* prettier
---
 docs/.eleventy.js | 85 ++++++++++++++++++++++++++++++++---------------
 scripts/build.js  | 30 -----------------
 2 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 29d755be3..c75fdf019 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -9,6 +9,7 @@ import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js'
 // import { formatCodePlugin } from './_utils/format-code.js';
 import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
+import nunjucks from 'nunjucks';
 import componentList from './_data/componentList.js';
 import * as filters from './_utils/filters.js';
 import { outlinePlugin } from './_utils/outline.js';
@@ -40,6 +41,11 @@ const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
 const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
 
 export default function (eleventyConfig) {
+  /**
+   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
+   */
+  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
+
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
     eleventyConfig.ignores.add('**/experimental/**');
@@ -68,9 +74,35 @@ export default function (eleventyConfig) {
     return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
   });
 
-  // Turns `{% server_variable "foo" %} into `{{ server.foo | safe }}`
+  // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
   eleventyConfig.addShortcode('server', function (property) {
-    return `{{ server.${property} | safe }}`;
+    if (serverBuild) {
+      return `{{ server.${property} | safe }}`;
+    }
+
+    return '';
+  });
+
+  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
+    // For a server build, we expect a server to run the second transform.
+    if (serverBuild) {
+      return content;
+    }
+
+    // Only run the transform on files nunjucks would transform.
+    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
+      return content;
+    }
+
+    /** This largely mimics what an app would do and just stubs out what we don't care about. */
+    return nunjucks.renderString(content, {
+      // Stub the server EJS shortcodes.
+      server: {
+        head: '',
+        loginOrAvatar: '',
+        flashes: '',
+      },
+    });
   });
 
   // Paired shortcodes - {% shortCode %}content{% endShortCode %}
@@ -132,30 +164,6 @@ export default function (eleventyConfig) {
     ]),
   );
 
-  // SSR plugin
-  if (!isDev) {
-    //
-    // Problematic components in SSR land:
-    //  - animation (breaks on navigation + ssr with Turbo)
-    //  - mutation-observer (why SSR this?)
-    //  - resize-observer (why SSR this?)
-    //  - tooltip (why SSR this?)
-    //
-    const omittedModules = [];
-    const componentModules = componentList
-      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-      .map(component => {
-        const name = component.tagName.split(/wa-/)[1];
-        const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
-        return path.join(componentDirectory, 'components', name, `${name}.js`);
-      });
-
-    eleventyConfig.addPlugin(litPlugin, {
-      mode: 'worker',
-      componentModules,
-    });
-  }
-
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({
@@ -182,6 +190,31 @@ export default function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
+  // SSR plugin
+  // Make sure this is the last thing, we dont want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
+  if (!isDev) {
+    //
+    // Problematic components in SSR land:
+    //  - animation (breaks on navigation + ssr with Turbo)
+    //  - mutation-observer (why SSR this?)
+    //  - resize-observer (why SSR this?)
+    //  - tooltip (why SSR this?)
+    //
+    const omittedModules = [];
+    const componentModules = componentList
+      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+      .map(component => {
+        const name = component.tagName.split(/wa-/)[1];
+        const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+        return path.join(componentDirectory, 'components', name, `${name}.js`);
+      });
+
+    eleventyConfig.addPlugin(litPlugin, {
+      mode: 'worker',
+      componentModules,
+    });
+  }
+
   return {
     markdownTemplateEngine: 'njk',
     dir: {
diff --git a/scripts/build.js b/scripts/build.js
index 31b335a96..d87c7818b 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -8,7 +8,6 @@ import { replace } from 'esbuild-plugin-replace';
 import { mkdir, readFile } from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
 import { globby } from 'globby';
-import nunjucks from 'nunjucks';
 import ora from 'ora';
 import { dirname, join, relative } from 'path';
 import process from 'process';
@@ -345,35 +344,6 @@ if (isDeveloping) {
           '/dist/': './dist-cdn/',
         },
       },
-      middleware: [
-        function simulateWebawesomeApp(req, res, next) {
-          // Accumulator for strings so we can pass them through nunjucks a second time similar to how the webawesome-app
-          // will be running nunjucks twice.
-          const finalString = [];
-          const encoding = 'utf-8';
-
-          const _write = res.write;
-          res.write = function (chunk, encoding) {
-            finalString.push(chunk.toString());
-          };
-
-          const _end = res.end;
-          res.end = function (...args) {
-            const transformedStr = nunjucks.renderString(finalString.join(''), {
-              // Stub the server EJS shortcodes.
-              server: {
-                head: '',
-                loginOrAvatar: '',
-                flashes: '',
-              },
-            });
-            _write.call(res, transformedStr, encoding);
-            _end.call(res, ...args);
-          };
-
-          next();
-        },
-      ],
       callbacks: {
         ready: (_err, instance) => {
           // 404 errors

From 87c1762146fcec6d5e9b2328e3b42c93a64eb116 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Fri, 21 Mar 2025 11:52:28 -0400
Subject: [PATCH 12/31] Scrub `:host-context()` from everywhere

---
 docs/docs/themes/creating.md             | 3 +--
 docs/docs/themes/index.njk               | 7 +++----
 src/styles/themes/active/color.css       | 3 +--
 src/styles/themes/awesome/color.css      | 3 +--
 src/styles/themes/brutalist/color.css    | 3 +--
 src/styles/themes/classic/color.css      | 3 +--
 src/styles/themes/default/color.css      | 4 +---
 src/styles/themes/matter/color.css       | 3 +--
 src/styles/themes/mellow/color.css       | 3 +--
 src/styles/themes/playful/color.css      | 3 +--
 src/styles/themes/premium/color.css      | 3 +--
 src/styles/themes/tailspin/color.css     | 3 +--
 src/styles/themes/tailspin/overrides.css | 3 +--
 13 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/docs/docs/themes/creating.md b/docs/docs/themes/creating.md
index 618d7bead..a73484182 100644
--- a/docs/docs/themes/creating.md
+++ b/docs/docs/themes/creating.md
@@ -31,8 +31,7 @@ If you're customizing the default dark styles, scope your styles to the followin
 
 ```css
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   /* your custom styles here */
 }
 ```
diff --git a/docs/docs/themes/index.njk b/docs/docs/themes/index.njk
index 9c1753e0e..fa89792a5 100644
--- a/docs/docs/themes/index.njk
+++ b/docs/docs/themes/index.njk
@@ -1,6 +1,6 @@
 ---
 title: Themes
-description: Themes are collections of design tokens that thread through every Web Awesome component and pattern. 
+description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
   Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
 layout: overview
 override:tags: []
@@ -30,7 +30,7 @@ In pre-made themes, we use a light color scheme by default.
 Additionally, styles may be scoped to the `:root` selector to be activated automatically.
 For pre-made themes, *all* custom properties are scoped to `:root`, the theme class, and `wa-light`.
 
-Finally, we scope themes to `:host` and `:host-context()` to ensure the styles are applied to the shadow roots of custom elements.
+Finally, we scope themes to `:host` to ensure the styles are applied to the shadow roots of custom elements.
 
 For example, the default theme is set up like this:
 
@@ -44,8 +44,7 @@ For example, the default theme is set up like this:
 }
 
 .wa-dark,
-.wa-invert,
-:host-context(.wa-dark) {
+.wa-invert {
   /* subset of CSS custom properties for a dark color scheme */
 }
 ```
diff --git a/src/styles/themes/active/color.css b/src/styles/themes/active/color.css
index e6b04d98e..c8e15c4ca 100644
--- a/src/styles/themes/active/color.css
+++ b/src/styles/themes/active/color.css
@@ -80,8 +80,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   /**
    * Foundational Colors
    */
diff --git a/src/styles/themes/awesome/color.css b/src/styles/themes/awesome/color.css
index f608d931a..94e34e9fb 100644
--- a/src/styles/themes/awesome/color.css
+++ b/src/styles/themes/awesome/color.css
@@ -71,8 +71,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
 
diff --git a/src/styles/themes/brutalist/color.css b/src/styles/themes/brutalist/color.css
index 98013f2a5..0efe93aa6 100644
--- a/src/styles/themes/brutalist/color.css
+++ b/src/styles/themes/brutalist/color.css
@@ -78,8 +78,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
 
diff --git a/src/styles/themes/classic/color.css b/src/styles/themes/classic/color.css
index a42a72998..023f73ee5 100644
--- a/src/styles/themes/classic/color.css
+++ b/src/styles/themes/classic/color.css
@@ -68,8 +68,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   /**
    * Foundational Colors
    */
diff --git a/src/styles/themes/default/color.css b/src/styles/themes/default/color.css
index da6fd8339..ad1593dbb 100644
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -114,10 +114,8 @@
   --wa-color-neutral-on-loud: white;
 }
 
-/** need to wrap :host-context() in an :is() selector for unsupported browsers */
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   color-scheme: dark;
   color: var(--wa-color-text-normal);
 
diff --git a/src/styles/themes/matter/color.css b/src/styles/themes/matter/color.css
index d3e891796..24be3ee3a 100644
--- a/src/styles/themes/matter/color.css
+++ b/src/styles/themes/matter/color.css
@@ -85,8 +85,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   /**
    * Foundational Colors
    */
diff --git a/src/styles/themes/mellow/color.css b/src/styles/themes/mellow/color.css
index c8d945415..b279c64ff 100644
--- a/src/styles/themes/mellow/color.css
+++ b/src/styles/themes/mellow/color.css
@@ -83,8 +83,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   /**
    * Foundational Colors
    */
diff --git a/src/styles/themes/playful/color.css b/src/styles/themes/playful/color.css
index 731bab72d..f853cc63a 100644
--- a/src/styles/themes/playful/color.css
+++ b/src/styles/themes/playful/color.css
@@ -75,8 +75,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   /**
    * Foundational Colors
    */
diff --git a/src/styles/themes/premium/color.css b/src/styles/themes/premium/color.css
index d28d65046..1172226c5 100644
--- a/src/styles/themes/premium/color.css
+++ b/src/styles/themes/premium/color.css
@@ -74,8 +74,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   /**
    * Foundational Colors
    */
diff --git a/src/styles/themes/tailspin/color.css b/src/styles/themes/tailspin/color.css
index a7a8890de..403052d7e 100644
--- a/src/styles/themes/tailspin/color.css
+++ b/src/styles/themes/tailspin/color.css
@@ -84,8 +84,7 @@
 }
 
 .wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
+.wa-invert {
   /**
    * Foundational Colors
    */
diff --git a/src/styles/themes/tailspin/overrides.css b/src/styles/themes/tailspin/overrides.css
index 1730eacac..449777139 100644
--- a/src/styles/themes/tailspin/overrides.css
+++ b/src/styles/themes/tailspin/overrides.css
@@ -1,7 +1,6 @@
 :where(:root),
 :host,
-.wa-theme-tailspin,
-:is(:host-context(.wa-theme-tailspin)) {
+.wa-theme-tailspin {
   h1,
   h2,
   h3,

From 5bad30ec30d0a9c3b3995471a64f1f1520cb9bb1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 21 Mar 2025 13:01:49 -0400
Subject: [PATCH 13/31] fix remove event and return null when empty (#819)

* fix remove event and return null when empty

* use closest
---
 docs/docs/resources/changelog.md |  1 +
 src/components/select/select.ts  | 40 +++++++++++++++++++++++++-------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 0da89e80d..633e61af2 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -17,6 +17,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Fixed `wa-pill` class for text fields
 - Fixed `pill` style for `<wa-input>` elements
 - Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
+- Fixed a bug in `<wa-select multiple>` that sometimes resulted in empty `<div>` elements being output
 
 ## 3.0.0-alpha.11
 
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index d7ab3c3b6..d6e160584 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -291,7 +291,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           ?pill=${this.pill}
           size=${this.size}
           removable
-          @wa-remove=${(event: WaRemoveEvent) => this.handleTagRemove(event, option)}
         >
           ${option.label}
         </wa-tag>
@@ -587,10 +586,33 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
   }
 
-  private handleTagRemove(event: WaRemoveEvent, option: WaOption) {
+  private handleTagRemove(event: WaRemoveEvent, directOption?: WaOption) {
     event.stopPropagation();
 
-    if (!this.disabled) {
+    if (this.disabled) return;
+
+    // Use the directly provided option if available (from getTag method)
+    let option = directOption;
+
+    // If no direct option was provided, find the option from the event path
+    if (!option) {
+      const tagElement = (event.target as Element).closest('wa-tag[part~=tag]');
+
+      if (tagElement) {
+        // Find the index of this tag among all tags
+        const tagsContainer = this.shadowRoot?.querySelector('[part="tags"]');
+        if (tagsContainer) {
+          const allTags = Array.from(tagsContainer.children);
+          const index = allTags.indexOf(tagElement as HTMLElement);
+
+          if (index >= 0 && index < this.selectedOptions.length) {
+            option = this.selectedOptions[index];
+          }
+        }
+      }
+    }
+
+    if (option) {
       this.toggleOptionSelection(option, false);
 
       // Emit after updating
@@ -707,10 +729,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     return this.selectedOptions.map((option, index) => {
       if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
         const tag = this.getTag(option, index);
-        // Wrap so we can handle the remove
-        return html`<div @wa-remove=${(e: WaRemoveEvent) => this.handleTagRemove(e, option)}>
-          ${typeof tag === 'string' ? unsafeHTML(tag) : tag}
-        </div>`;
+        if (!tag) return null;
+        return typeof tag === 'string' ? unsafeHTML(tag) : tag;
       } else if (index === this.maxOptionsVisible) {
         // Hit tag limit
         return html`
@@ -726,7 +746,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           >
         `;
       }
-      return html``;
+      return null;
     });
   }
 
@@ -926,7 +946,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
               />
 
               <!-- Tags need to wait for first hydration before populating otherwise it will create a hydration mismatch. -->
-              ${this.multiple && this.hasUpdated ? html`<div part="tags" class="tags">${this.tags}</div>` : ''}
+              ${this.multiple && this.hasUpdated
+                ? html`<div part="tags" class="tags" @wa-remove=${this.handleTagRemove}>${this.tags}</div>`
+                : ''}
 
               <input
                 class="value-input"

From 59dcaaff83cde147c9feb10ff3a22bead2eb05f5 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Fri, 21 Mar 2025 16:30:06 -0400
Subject: [PATCH 14/31] Content hierarchy bugfixes & improvements (#821)

- Sidebar, overview listings, breadcrumbs now based on actual parent-child relationships, rather than increasingly outdated heuristics
- parent properties are now generated automatically from the URL structure, and need only be specified to override that default
- Ability to group by page hierarchy in overview pages, where pages that have >= 2 children become categories

Smaller improvements:
- More flexible syntax for specifying the params of overview pages
- [Overviews] Hide group heading if only one group is present
- parentItem and parentUrl properties that can be used on any page
- Alias a collection as the children of a page (useful for "virtual" parents like Layout)
- Do not error if a page card icon is missing
---
 docs/_includes/breadcrumbs.njk   |  11 +-
 docs/_includes/grouped-pages.njk |  20 ++-
 docs/_includes/page-card.njk     |   2 +-
 docs/_includes/sidebar-group.njk |   9 +-
 docs/_includes/sidebar-link.njk  |   2 +-
 docs/_layouts/overview.njk       |   5 +-
 docs/_layouts/theme.njk          |   2 +-
 docs/_utils/filters.js           | 254 ++++++++++++++++++++++---------
 docs/docs/components/index.njk   |  13 +-
 docs/docs/docs.11tydata.js       |  78 +++++++++-
 docs/docs/layout.njk             |   3 +-
 docs/docs/palettes/index.njk     |   2 +-
 docs/docs/patterns/index.njk     |   2 -
 docs/docs/themes/index.njk       |   2 +-
 docs/docs/tokens/index.njk       |   1 +
 15 files changed, 297 insertions(+), 109 deletions(-)

diff --git a/docs/_includes/breadcrumbs.njk b/docs/_includes/breadcrumbs.njk
index 5f9fa145b..96d5563e8 100644
--- a/docs/_includes/breadcrumbs.njk
+++ b/docs/_includes/breadcrumbs.njk
@@ -1,8 +1,11 @@
-{% set breadcrumbs = page.url | breadcrumbs %}
-{% if breadcrumbs.length > 0 %}
+{% set ancestors = page.url | ancestors %}
+
+{% if ancestors.length > 0 %}
   <wa-breadcrumb id="docs-breadcrumbs">
-  {% for crumb in breadcrumbs %}
-    <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
+  {% for ancestor in ancestors %}
+    {% if ancestor.page.url != "/" %}
+    <wa-breadcrumb-item href="{{ ancestor.page.url }}">{{ ancestor.data.title }}</wa-breadcrumb-item>
+    {% endif %}
   {% endfor %}
   <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
   </wa-breadcrumb>
diff --git a/docs/_includes/grouped-pages.njk b/docs/_includes/grouped-pages.njk
index 84cf846f5..7c06d0b3a 100644
--- a/docs/_includes/grouped-pages.njk
+++ b/docs/_includes/grouped-pages.njk
@@ -1,12 +1,18 @@
 {# Cards for pages listed by category #}
 
 <section id="grid" class="index-grid">
-{% for category, pages in allPages | groupByTags(categories) -%}
-  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
-    {%- for page in pages -%}
-      {%- if not page.data.parent or listChildren -%}
-        {% include "page-card.njk" %}
-      {%- endif -%}
-    {%- endfor -%}
+{% set groupedPages = allPages | groupPages(categories, page) %}
+{% for category, pages in groupedPages -%}
+  {% if groupedPages.meta.groupCount > 1 %}
+  <h2 class="index-category">
+    {% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
+    {% else %}
+    {{ pages.meta.title }}
+    {% endif %}
+  </h2>
+  {% endif %}
+  {%- for page in pages -%}
+      {% include "page-card.njk" %}
+  {%- endfor -%}
 {%- endfor -%}
 </section>
diff --git a/docs/_includes/page-card.njk b/docs/_includes/page-card.njk
index f63d813ed..b684a3487 100644
--- a/docs/_includes/page-card.njk
+++ b/docs/_includes/page-card.njk
@@ -2,7 +2,7 @@
 <a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
 	<wa-card with-header>
 		<div slot="header">
-		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
+		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
 		</div>
 		<span class="page-name">{{ page.data.title }}</span>
 		{% if pageSubtitle -%}
diff --git a/docs/_includes/sidebar-group.njk b/docs/_includes/sidebar-group.njk
index c49ef48da..b723d22ab 100644
--- a/docs/_includes/sidebar-group.njk
+++ b/docs/_includes/sidebar-group.njk
@@ -1,9 +1,12 @@
 {# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
 {% if collections[tag] -%}
   {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+  {% set groupItem = groupUrl | getCollectionItemFromUrl %}
+  {% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
+
   <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
     <h2 slot="summary">
-      {% if groupUrl | getCollectionItemFromUrl %}
+      {% if groupItem %}
         <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
           <wa-icon name="grid-2"></wa-icon>
         </a>
@@ -12,10 +15,8 @@
       {% endif %}
     </h2>
     <ul>
-      {% for page in collections[tag] | sort %}
-        {% if not page.data.parent -%}
+      {% for page in children %}
           {% include 'sidebar-link.njk' %}
-        {%- endif %}
       {% endfor %}
     </ul>
   </wa-details>
diff --git a/docs/_includes/sidebar-link.njk b/docs/_includes/sidebar-link.njk
index dab3e32a0..261a272ec 100644
--- a/docs/_includes/sidebar-link.njk
+++ b/docs/_includes/sidebar-link.njk
@@ -1,4 +1,4 @@
-{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
+{% if not (isAlpha and page.data.noAlpha) and not page.data.unlisted -%}
 	<li>
 		<a href="{{ page.url }}">{{ page.data.title }}</a>
 		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
diff --git a/docs/_layouts/overview.njk b/docs/_layouts/overview.njk
index fbc99b73d..48645d379 100644
--- a/docs/_layouts/overview.njk
+++ b/docs/_layouts/overview.njk
@@ -1,6 +1,5 @@
 ---
 layout: page-outline
-tags: ["overview"]
 ---
 {% set forTag = forTag or (page.url | split('/') | last) %}
 {% if description %}
@@ -13,8 +12,10 @@ tags: ["overview"]
   </wa-input>
 </div>
 
-{% set allPages = collections[forTag] %}
+{% set allPages = allPages or collections[forTag] %}
+{% if allPages and allPages.length > 0 %}
 {% include "grouped-pages.njk" %}
+{% endif %}
 
 <link href="/assets/styles/filter.css" rel="stylesheet">
 <script type="module" src="/assets/scripts/filter.js"></script>
diff --git a/docs/_layouts/theme.njk b/docs/_layouts/theme.njk
index 97c737f41..63693354c 100644
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -68,7 +68,7 @@ wa_data.palettes = {
       <wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
         <wa-card with-header>
           <div slot="header">
-          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" %}
+          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
           </div>
           <span class="page-name">
             {{ palette.data.title }}
diff --git a/docs/_utils/filters.js b/docs/_utils/filters.js
index 912b5dbb1..f81e5b909 100644
--- a/docs/_utils/filters.js
+++ b/docs/_utils/filters.js
@@ -29,6 +29,9 @@ function getCollection(name) {
 }
 
 export function getCollectionItemFromUrl(url, collection) {
+  if (!url) {
+    return null;
+  }
   collection ??= getCollection.call(this, 'all') || [];
   return collection.find(item => item.url === url);
 }
@@ -42,35 +45,33 @@ export function split(text, separator) {
   return (text + '').split(separator).filter(Boolean);
 }
 
-export function breadcrumbs(url, { withCurrent = false } = {}) {
-  const parts = split(url, '/');
-  const ret = [];
+export function ancestors(url, { withCurrent = false, withRoot = false } = {}) {
+  let ret = [];
+  let currentUrl = url;
+  let currentItem = getCollectionItemFromUrl.call(this, url);
 
-  while (parts.length) {
-    let partialUrl = '/' + parts.join('/') + '/';
-    let item = getCollectionItemFromUrl.call(this, partialUrl);
-
-    if (item && (partialUrl !== url || withCurrent)) {
-      let title = item.data.title;
-      if (title) {
-        ret.unshift({ url: partialUrl, title });
-      }
-    }
-
-    parts.pop();
-
-    if (item?.data.parent) {
-      let parentURL = item.data.parent;
-      if (!item.data.parent.startsWith('/')) {
-        // Parent is in the same directory
-        parts.push(item.data.parent);
-        parentURL = '/' + parts.join('/') + '/';
-      }
-
-      let parentBreadcrumbs = breadcrumbs.call(this, parentURL, { withCurrent: true });
-      return [...parentBreadcrumbs, ...ret];
+  if (!currentItem) {
+    // Might have eleventyExcludeFromCollections, jump to parent
+    let parentUrl = this.ctx.parentUrl;
+    if (parentUrl) {
+      url = parentUrl;
     }
   }
+
+  for (let item; (item = getCollectionItemFromUrl.call(this, url)); url = item.data.parentUrl) {
+    ret.unshift(item);
+  }
+
+  if (!withRoot && ret[0]?.page.url === '/') {
+    // Remove root
+    ret.shift();
+  }
+
+  if (!withCurrent && ret.at(-1)?.page.url === currentUrl) {
+    // Remove current page
+    ret.pop();
+  }
+
   return ret;
 }
 
@@ -180,69 +181,178 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
 /**
  * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
  * @param {object[]} collection
- * @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
- * @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
+ * @param { Object<string, string> | string[]} [options] Options object or array of tags to group by.
+ * @param {string[] | true} [options.tags] Tags to group by. If true, groups by all tags.
+ *                            If not provided/empty, defaults to grouping by page hierarchy, with any pages with more than 1 children becoming groups.
+ * @param {string[]} [options.groups] The groups to use if only a subset or a specific order is desired. Defaults to `options.tags`.
+ * @param {string[]} [options.titles] Any title overrides for groups.
+ * @param {string | false} [options.other="Other"] The title to use for the "Other" group. If `false`, the "Other" group is removed..
+ * @returns { Object.<string, object[]> } An object of group ids to arrays of page objects.
  */
-export function groupByTags(collection, tags) {
+export function groupPages(collection, options = {}, page) {
   if (!collection) {
-    console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(tags)}`);
-  }
-  if (!tags) {
-    // Default to grouping by union of all tags
-    tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
-  } else if (Array.isArray(tags)) {
-    // May contain objects of one-off tag -> label mappings
-    tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
-  } else if (typeof tags === 'object') {
-    // tags is an object of tags to labels, so we just want the keys
-    tags = Object.keys(tags);
+    console.error(`Empty collection passed to groupPages() to group by ${JSON.stringify(options)}`);
   }
 
-  let ret = Object.fromEntries(tags.map(tag => [tag, []]));
-  ret.other = [];
+  if (Array.isArray(options)) {
+    options = { tags: options };
+  }
+
+  let { tags, groups, titles = {}, other = 'Other' } = options;
+
+  if (groups === undefined && Array.isArray(tags)) {
+    groups = tags;
+  }
+
+  let grouping;
+
+  if (tags) {
+    grouping = {
+      isGroup: item => undefined,
+      getCandidateGroups: item => item.data.tags,
+      getGroupMeta: group => ({}),
+    };
+  } else {
+    grouping = {
+      isGroup: item => (item.data.children.length >= 2 ? item.page.url : undefined),
+      getCandidateGroups: item => {
+        let parentUrl = item.data.parentUrl;
+        if (page?.url === parentUrl) {
+          return [];
+        }
+        return [parentUrl];
+      },
+      getGroupMeta: group => {
+        let item = byUrl[group] || getCollectionItemFromUrl.call(this, group);
+        return {
+          title: item?.data.title,
+          url: group,
+          item,
+        };
+      },
+      sortGroups: groups => sort(groups.map(url => byUrl[url]).filter(Boolean)).map(item => item.page.url),
+    };
+  }
+
+  let byUrl = {};
+  let byParentUrl = {};
 
   for (let item of collection) {
-    let categorized = false;
+    let url = item.page.url;
+    let parentUrl = item.data.parentUrl;
 
-    for (let tag of tags) {
-      if (item.data.tags.includes(tag)) {
-        ret[tag].push(item);
-        categorized = true;
-      }
-    }
+    byUrl[url] = item;
 
-    if (!categorized) {
-      ret.other.push(item);
+    if (parentUrl) {
+      byParentUrl[parentUrl] ??= [];
+      byParentUrl[parentUrl].push(item);
     }
   }
 
-  // Remove empty categories
-  for (let category in ret) {
-    if (ret[category].length === 0) {
-      delete ret[category];
+  let urlToGroups = {};
+
+  for (let item of collection) {
+    let url = item.page.url;
+    let parentUrl = item.data.parentUrl;
+
+    if (grouping.isGroup(item)) {
+      continue;
+    }
+
+    let parentItem = byUrl[parentUrl];
+    if (parentItem && !grouping.isGroup(parentItem)) {
+      // Their parent is also here and is not a group
+      continue;
+    }
+
+    let candidateGroups = grouping.getCandidateGroups(item);
+
+    if (groups) {
+      candidateGroups = candidateGroups.filter(group => groups.includes(group));
+    }
+
+    urlToGroups[url] ??= [];
+
+    for (let group of candidateGroups) {
+      urlToGroups[url].push(group);
+    }
+  }
+
+  let ret = {};
+
+  for (let url in urlToGroups) {
+    let groups = urlToGroups[url];
+    let item = byUrl[url];
+
+    if (groups.length === 0) {
+      // Not filtered out but also not categorized
+      groups = ['other'];
+    }
+
+    for (let group of groups) {
+      ret[group] ??= [];
+      ret[group].push(item);
+
+      if (!ret[group].meta) {
+        if (group === 'other') {
+          ret[group].meta = { title: other };
+        } else {
+          ret[group].meta = grouping.getGroupMeta(group);
+          ret[group].meta.title = titles[group] ?? ret[group].meta.title ?? capitalize(group);
+        }
+      }
+    }
+  }
+
+  if (other === false) {
+    delete ret.other;
+  }
+
+  // Sort
+  let sortedGroups = groups ?? grouping.sortGroups?.(Object.keys(ret));
+
+  if (sortedGroups) {
+    ret = sortObject(ret, sortedGroups);
+  }
+
+  Object.defineProperty(ret, 'meta', {
+    value: {
+      groupCount: Object.keys(ret).length,
+    },
+    enumerable: false,
+  });
+
+  return ret;
+}
+
+/**
+ * Sort an object by its keys
+ * @param {*} obj
+ * @param {function | string[]} order
+ */
+function sortObject(obj, order) {
+  let ret = {};
+  let sortedKeys = Array.isArray(order) ? order : Object.keys(obj).sort(order);
+
+  for (let key of sortedKeys) {
+    if (key in obj) {
+      ret[key] = obj[key];
+    }
+  }
+
+  // Add any keys that weren't in the order
+  for (let key in obj) {
+    if (!(key in ret)) {
+      ret[key] = obj[key];
     }
   }
 
   return ret;
 }
 
-export function getCategoryTitle(category, categories) {
-  let title;
-  if (Array.isArray(categories)) {
-    // Find relevant entry
-    // [{id: "Title"}, id2, ...]
-    title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
-  } else if (typeof categories === 'object') {
-    // {id: "Title", id2: "Title 2", ...}
-    title = categories[category];
-  }
-
-  if (title) {
-    return title;
-  }
-
-  // Capitalized
-  return category.charAt(0).toUpperCase() + category.slice(1);
+function capitalize(str) {
+  str += '';
+  return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
 const IDENTITY = x => x;
diff --git a/docs/docs/components/index.njk b/docs/docs/components/index.njk
index f5d19614d..64ddf6e40 100644
--- a/docs/docs/components/index.njk
+++ b/docs/docs/components/index.njk
@@ -2,13 +2,10 @@
 title: Components
 description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
 layout: overview
-categories:
-  - actions
-  - feedback: 'Feedback & Status'
-  - imagery
-  - inputs
-  - navigation
-  - organization
-  - helpers: 'Utilities'
 override:tags: []
+categories:
+  tags: [actions, feedback, imagery, inputs, navigation, organization, helpers]
+  titles:
+    feedback: 'Feedback & Status'
+    helpers: 'Utilities'
 ---
diff --git a/docs/docs/docs.11tydata.js b/docs/docs/docs.11tydata.js
index 7ed1011e1..2232f7e53 100644
--- a/docs/docs/docs.11tydata.js
+++ b/docs/docs/docs.11tydata.js
@@ -1,10 +1,80 @@
+/**
+ * Global data for all pages
+ */
+import { sort } from '../_utils/filters.js';
+
 export default {
   eleventyComputed: {
-    children(data) {
-      let mainTag = data.tags?.[0];
-      let collection = data.collections[mainTag] ?? [];
+    // Default parent. Can be overridden by explicitly setting parent in the data.
+    // parent can refer to either an ancestor page in the URL or another page in the same directory
+    parent(data) {
+      let { parent, page } = data;
 
-      return collection.filter(item => item.data.parent === data.page.fileSlug);
+      if (parent) {
+        return parent;
+      }
+
+      return page.url.split('/').filter(Boolean).at(-2);
+    },
+
+    parentUrl(data) {
+      let { parent, page } = data;
+      return getParentUrl(page.url, parent);
+    },
+
+    parentItem(data) {
+      let { parentUrl } = data;
+      return data.collections.all.find(item => item.url === parentUrl);
+    },
+
+    children(data) {
+      let { collections, page, parentOf } = data;
+
+      if (parentOf) {
+        return collections[parentOf];
+      }
+
+      let collection = collections.all ?? [];
+      let url = page.url;
+
+      let ret = collection.filter(item => {
+        return item.data.parentUrl === url;
+      });
+
+      sort(ret);
+
+      return ret;
     },
   },
 };
+
+function getParentUrl(url, parent) {
+  let parts = url.split('/').filter(Boolean);
+  let ancestorIndex = parts.findLastIndex(part => part === parent);
+  let retParts = parts.slice();
+
+  if (ancestorIndex > -1) {
+    // parent is an ancestor
+    retParts.splice(ancestorIndex + 1);
+  } else {
+    // parent is a sibling in the same directory
+    retParts.splice(-1, 1, parent);
+  }
+
+  let ret = retParts.join('/');
+
+  if (url.startsWith('/')) {
+    ret = '/' + ret;
+  }
+
+  if (!retParts.at(-1).includes('.') && !ret.endsWith('/')) {
+    // If no extension, make sure to end with a slash
+    ret += '/';
+  }
+
+  if (ret === '/docs/') {
+    ret = '/';
+  }
+
+  return ret;
+}
diff --git a/docs/docs/layout.njk b/docs/docs/layout.njk
index 67d8f8778..57af8bc94 100644
--- a/docs/docs/layout.njk
+++ b/docs/docs/layout.njk
@@ -2,6 +2,7 @@
 title: Layout
 description: Layout components and utility classes help you organize content that can adapt to any device or screen size. See the [installation instructions](#installation) to use Web Awesome's layout tools in your project.
 layout: overview
+parentOf: layout
 categories: ["components", "utilities"]
 override:tags: []
 ---
@@ -22,4 +23,4 @@ Or, you can choose to import _only_ the utilities:
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
 ```
-{% endmarkdown %}
\ No newline at end of file
+{% endmarkdown %}
diff --git a/docs/docs/palettes/index.njk b/docs/docs/palettes/index.njk
index 9f3eb51f4..36a41a6c3 100644
--- a/docs/docs/palettes/index.njk
+++ b/docs/docs/palettes/index.njk
@@ -5,6 +5,6 @@ layout: overview
 override:tags: []
 forTag: palette
 categories:
+  tags: [other, pro]
   other: Free
-  pro: Pro
 ---
diff --git a/docs/docs/patterns/index.njk b/docs/docs/patterns/index.njk
index fee915547..e51a1f6ce 100644
--- a/docs/docs/patterns/index.njk
+++ b/docs/docs/patterns/index.njk
@@ -2,7 +2,5 @@
 title: Patterns
 description: Patterns are reusable solutions to common design problems.
 layout: overview
-categories: ["e-commerce"]
-listChildren: true
 override:tags: []
 ---
diff --git a/docs/docs/themes/index.njk b/docs/docs/themes/index.njk
index fa89792a5..71331c483 100644
--- a/docs/docs/themes/index.njk
+++ b/docs/docs/themes/index.njk
@@ -6,8 +6,8 @@ layout: overview
 override:tags: []
 forTag: theme
 categories:
+  tags: [other, pro]
   other: Free
-  pro: Pro
 ---
 
 <div class="max-line-length">
diff --git a/docs/docs/tokens/index.njk b/docs/docs/tokens/index.njk
index 74337da3f..578b6524f 100644
--- a/docs/docs/tokens/index.njk
+++ b/docs/docs/tokens/index.njk
@@ -3,4 +3,5 @@ title: Design Tokens
 description: A theme is a collection of predefined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
 layout: overview
 override:tags: []
+categories: {tags: true}
 ---

From fcfe2bde7d43db5e963e4c8383c78896b4f6bdf6 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 24 Mar 2025 16:33:24 -0400
Subject: [PATCH 15/31] Add FOUCE utilities (#686)

* add fouce utilities

* add comment

* Update docs/docs/installation.md

Co-authored-by: Lea Verou <lea@verou.me>

* commit PR suggestion

* rename wa-reduce-fouce to wa-cloak

* remove class as requested

* add cloak class

* wait a cycle

* move turbo to same file

* reduce fade

* disable SSR and add Turbo FOUCE helper

* disable SSR

* fix test suite

* workflow dispatch

* update fouce util

* no need to remove cloak class

* simplify fouce util

* add allDefined util

* update changelog

---------

Co-authored-by: Lea Verou <lea@verou.me>
Co-authored-by: konnorrogers <konnor5456@gmail.com>
---
 .github/workflows/ssr_tests.js.yml |   9 +-
 docs/_includes/base.njk            |   2 +-
 docs/_includes/head.njk            |   3 +-
 docs/assets/scripts/turbo.js       |   4 +
 docs/docs/installation.md          |   4 -
 docs/docs/resources/changelog.md   |   2 +
 docs/docs/usage.md                 |  24 ++++++
 docs/docs/utilities/fouce.md       |  32 +++++++
 docs/docs/utilities/fouce.njk      | 131 -----------------------------
 src/styles/utilities/fouce.css     |  19 ++---
 src/utilities/autoloader.ts        |  25 ++++++
 src/utilities/defined.ts           |  64 ++++++++++++++
 src/webawesome.ts                  |   3 +-
 web-test-runner.config.js          |   4 -
 14 files changed, 168 insertions(+), 158 deletions(-)
 create mode 100644 docs/docs/utilities/fouce.md
 delete mode 100644 docs/docs/utilities/fouce.njk
 create mode 100644 src/utilities/defined.ts

diff --git a/.github/workflows/ssr_tests.js.yml b/.github/workflows/ssr_tests.js.yml
index 1b188eaa2..a5944d604 100644
--- a/.github/workflows/ssr_tests.js.yml
+++ b/.github/workflows/ssr_tests.js.yml
@@ -1,11 +1,12 @@
-# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: SSR Tests
 
 on:
-  push:
-    branches: [next]
+  # push:
+  #   branches: [next]
+  workflow_dispatch:
 
 jobs:
   ssr_test:
diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index 6cbfea2de..21bfd33a6 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
diff --git a/docs/_includes/head.njk b/docs/_includes/head.njk
index 89a303d24..5a9808f7b 100644
--- a/docs/_includes/head.njk
+++ b/docs/_includes/head.njk
@@ -23,10 +23,9 @@
 <script src="/assets/scripts/hydration-errors.js"></script>
 <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
 <link rel="preconnect" href="https://cdn.jsdelivr.net">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
 
 {# Web Awesome #}
-<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
+<script type="module" src="/dist/webawesome.loader.js"></script>
 
 <script type="module" src="/assets/scripts/theme-picker.js"></script>
 {# Preset Theme #}
diff --git a/docs/assets/scripts/turbo.js b/docs/assets/scripts/turbo.js
index fb1d0ea0f..e00e470c3 100644
--- a/docs/assets/scripts/turbo.js
+++ b/docs/assets/scripts/turbo.js
@@ -1,3 +1,6 @@
+import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm';
+import { preventTurboFouce } from '/dist/webawesome.js';
+
 if (!window.___turboScrollPositions___) {
   window.___turboScrollPositions___ = {};
 }
@@ -70,3 +73,4 @@ function fixDSD(e) {
 window.addEventListener('turbo:before-cache', saveScrollPosition);
 window.addEventListener('turbo:before-render', restoreScrollPosition);
 window.addEventListener('turbo:render', restoreScrollPosition);
+preventTurboFouce();
diff --git a/docs/docs/installation.md b/docs/docs/installation.md
index 473e4ab1f..b142497bc 100644
--- a/docs/docs/installation.md
+++ b/docs/docs/installation.md
@@ -37,10 +37,6 @@ This snippet includes three parts:
 
 Now you can [start using Web Awesome!](/docs/usage)
 
-:::info
-While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
-:::
-
 ---
 
 ## Using Font Awesome Kit Codes
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 633e61af2..474aa3600 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -14,6 +14,8 @@ During the alpha period, things might break! We take breaking changes very serio
 
 ## Next
 
+- Added the `wa-cloak` utility to prevent FOUCE
+- Added the `allDefined()` utility for awaiting component registration
 - Fixed `wa-pill` class for text fields
 - Fixed `pill` style for `<wa-input>` elements
 - Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
diff --git a/docs/docs/usage.md b/docs/docs/usage.md
index aea75ebc4..651ade28e 100644
--- a/docs/docs/usage.md
+++ b/docs/docs/usage.md
@@ -8,6 +8,30 @@ Web Awesome components are just regular HTML elements, or [custom elements](http
 
 If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
 
+## Awaiting Registration
+
+Unlike traditional frameworks, custom elements don't have a centralized initialization phase. This means you need to verify that a custom element has been properly registered before attempting to interact with its properties or methods.
+
+You can use the [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) method to ensure a specific component is ready:
+
+```ts
+await customElements.whenDefined('wa-button');
+
+// <wa-button> is ready to use!
+const button = document.querySelector('wa-button');
+```
+
+When working with multiple components, checking each one individually can become tedious. For convenience, Web Awesome provides the `allDefined()` function which automatically detects and waits for all Web Awesome components in the DOM to be initialized before resolving.
+
+```ts
+import { allDefined } from '/dist/webawesome.js';
+
+// Waits for all Web Awesome components in the DOM to be registered
+await allDefined();
+
+// All Web Awesome components on the page are ready!
+```
+
 ## Attributes & Properties
 
 Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
diff --git a/docs/docs/utilities/fouce.md b/docs/docs/utilities/fouce.md
new file mode 100644
index 000000000..e80173065
--- /dev/null
+++ b/docs/docs/utilities/fouce.md
@@ -0,0 +1,32 @@
+---
+title: Reduce FOUCE
+description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
+file: styles/utilities/fouce.css
+icon: spinner
+---
+
+While convenient, autoloading can lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
+The [FOUCE style utility](/docs/utilities/fouce/#opting-in) (which is automatically applied if you use the [Web Awesome utilities](/docs/utilities/)) takes care of hiding custom elements until they and their contents have been registered, up to a maximum of two seconds.
+
+In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded. To do that, you can add the `wa-reduce-fouce` class to any element on the page or even apply it to the whole page by placing the class on the `<html>` element.
+
+```html
+<html class="wa-cloak">
+  ...
+</html>
+```
+
+As soon as all elements are registered _or_ after two seconds have elapsed, the autoloader will show the page. The two-second timeout prevents blank screens from persisting on slow networks and pages that have errors.
+
+:::details Are you using Turbo in your app?
+
+If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a change to register new components.
+
+The following function acts as a middleware to ensure components are registered _before_ the page shows, eliminating FOUCE for page-to-page navigation with Turbo.
+
+```js
+import { preventTurboFouce } from '/dist/webawesome.js';
+
+preventTurboFouce();
+```
+:::
diff --git a/docs/docs/utilities/fouce.njk b/docs/docs/utilities/fouce.njk
deleted file mode 100644
index 23669b9dc..000000000
--- a/docs/docs/utilities/fouce.njk
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: Reduce FOUCE
-description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
-file: styles/utilities/fouce.css
-icon: spinner
----
-{% markdown %}
-No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.
-
-Here is a comparison of the loading experience with and without this utility,
-with a simulated slow loading time:
-
-{% endmarkdown %}
-
-
-<div class="wa-split wa-align-items-end">
-  <strong>Normal loading</strong>
-  <wa-button onclick="document.querySelectorAll('iframe').forEach(iframe => iframe.srcdoc = iframe.srcdoc)">
-    <wa-icon name="refresh"></wa-icon>
-    Refresh
-  </wa-button>
-  <strong>With FOUCE reduction</strong>
-</div>
-
-
-{% set sample_card %}
-<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high">
-<link rel="stylesheet" href="/dist/styles/webawesome.css">
-<link rel="stylesheet" href="/dist/styles/forms.css">
-<script type=module>
-const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
-const loadScript = src => new Promise((resolve, reject) => {
-  const script = document.createElement("script");
-  script.src = src;
-  script.type = "module";
-  script.onload = resolve;
-  script.onerror = reject;
-  document.head.appendChild(script);
-});
-
-await delay(500);
-await loadScript("/dist/components/button/button.js");
-await delay(500);
-await loadScript("/dist/components/card/card.js");
-await delay(500);
-await loadScript("/dist/components/rating/rating.js");
-</script>
-
-<wa-card with-footer with-image class="card-overview">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Mittens</strong><br />
-  This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </div>
-</wa-card>
-
-<style>
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot=footer] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-{% endset %}
-
-
-<div class="iframes">
-<iframe srcdoc='<body class="wa-fouce-off">{{ sample_card }}</body>'></iframe>
-<iframe srcdoc='{{ sample_card }}'></iframe>
-</div>
-<style>
-.iframes {
-	display: flex;
-	gap: var(--wa-space-m);
-  margin-top: var(--wa-space-l);
-
-	iframe {
-		flex: 1;
-		height: 60ch;
-	}
-}
-</style>
-
-{% markdown %}
-## How does it work?
-
-The utility consists of a timeout (`2s` by default) and a fade duration (`200ms` by default).
-- If the element is _ready_ before the timeout, it will appear immediately.
-- If it takes longer than _timeout_ + _fade_, it will fade in over the fade duration.
-- If it takes somewhere between _timeout_ and _timeout_ + _fade_, you will get an interrupted fade.
-
-An element is considered ready when both of these are true:
-1. Either It has been registered or has a `did-ssr` attribute (indicating it was pre-rendered)
-2. If it’s a Web Awesome component, its contents are also ready
-
-## Customization
-
-You can use the following CSS variables to customize the behavior:
-
-| Variable | Description | Default |
-| --- | --- | --- |
-| `--wa-fouce-fade` | The transition duration for the fade effect. | `200ms` |
-| `--wa-fouce-timeout` | The timeout after which elements will appear even if not registered | `2s` |
-
-The fade duration cannot be longer than the timeout.
-This means that you can disable FOUCE reduction on an element by setting `--wa-fouce-timeout: 0s`.
-
-For example, if instead of `did-ssr` you used an `ssr` attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:
-
-```css
-[ssr] {
-  --wa-fouce-timeout: 0s;
-}
-```
-
-You can also opt-out from FOUCE reduction for an element and its contents by adding the `.wa-fouce-off` class to it.
-Applying this class to the root element will disable the utility for the entire page.
-{% endmarkdown %}
diff --git a/src/styles/utilities/fouce.css b/src/styles/utilities/fouce.css
index 75e44d807..84ab08e48 100644
--- a/src/styles/utilities/fouce.css
+++ b/src/styles/utilities/fouce.css
@@ -1,20 +1,17 @@
 /*
  * Utility to minimize FOUCE and show custom elements only after they're registered
  */
+:not(:defined),
+:state(wa-defined):has(:not(:defined)),
+.wa-cloak:has(:not(:defined)) {
+  animation: 2s step-end wa-fouce-cloak;
+}
 
-@keyframes wa-fade-in {
+@keyframes wa-fouce-cloak {
   from {
     opacity: 0;
   }
-}
-
-:not(:defined),
-:state(wa-defined):has(:not(:defined)) {
-  /* The clamp() ensures that if --wa-fouce-timeout is set to 0s, the whole effect is disabled */
-  --wa-fouce-animation: clamp(0s, var(--wa-fouce-fade, 200ms), var(--wa-fouce-timeout, 2s)) var(--wa-fouce-timeout, 2s)
-    wa-fade-in both;
-
-  &:where(:not([did-ssr], .wa-fouce-off, .wa-fouce-off *)) {
-    animation: var(--wa-fouce-animation);
+  to {
+    opacity: 1;
   }
 }
diff --git a/src/utilities/autoloader.ts b/src/utilities/autoloader.ts
index 4ff6463ad..c40127ce5 100644
--- a/src/utilities/autoloader.ts
+++ b/src/utilities/autoloader.ts
@@ -50,6 +50,12 @@ export async function discover(root: Element | ShadowRoot) {
       console.warn(imp.reason); // eslint-disable-line no-console
     }
   }
+
+  // Wait a cycle to allow the first Lit update to run
+  await new Promise(requestAnimationFrame);
+
+  // Dispatch an event when discovery is complete.
+  document.dispatchEvent(new CustomEvent('wa-discovery-complete'));
 }
 
 /**
@@ -69,3 +75,22 @@ function register(tagName: string): Promise<void> {
     import(path).then(() => resolve()).catch(() => reject(new Error(`Unable to autoload <${tagName}> from ${path}`)));
   });
 }
+
+/**
+ * Acts as a middleware for Turbo's `turbo:before-render` event to ensure components are auto-loaded before showing the
+ * next page, eliminating page-to-page FOUCE in a Turbo environment.
+ */
+export function preventTurboFouce(timeout = 2000) {
+  document.addEventListener('turbo:before-render', async (event: CustomEvent) => {
+    const newBody = event.detail.newBody;
+
+    event.preventDefault();
+
+    try {
+      // Wait until all elements are registered or two seconds, whichever comes first
+      await Promise.race([discover(newBody), new Promise(resolve => setTimeout(resolve, timeout))]);
+    } finally {
+      event.detail.resume();
+    }
+  });
+}
diff --git a/src/utilities/defined.ts b/src/utilities/defined.ts
new file mode 100644
index 000000000..277693085
--- /dev/null
+++ b/src/utilities/defined.ts
@@ -0,0 +1,64 @@
+interface AllDefinedOptions {
+  /**
+   * A callback that accepts a custom element tag name and returns `true` if the custom element should be defined before
+   * resolving or `false` to skip it. The tag name is always in lowercase.
+   */
+  match: (tagName: string) => boolean;
+
+  /**
+   * To wait for additional custom elements that may not be on the page when the function is called, provide them here.
+   */
+  additionalElements: string | string[];
+
+  /**
+   * The root in which to look for custom elements. Defaults to `document`. By design, shadow roots are not traversed,
+   * but you can call this function and set `root` to a custom element's shadow root if needed.
+   */
+  root: Document | ShadowRoot;
+}
+
+/**
+ * Waits for custom elements that are currently on the page to be registered before resolving. This is sugar for
+ * awaiting `customElements.whenDefined()` multiple times. By default, the function waits for all undefined Web Awesome
+ * elements, but you can pass a custom match function to wait for other custom elements instead.
+ *
+ * The function returns with `Promise.all()`, so any loading errors will cause it to reject. Make sure you handle errors
+ * accordingly using a try/catch block or a `.catch()`.
+ *
+ * @example
+ * // Wait for Web Awesome elements
+ * await allDefined();
+ *
+ * // Wait for all custom elements that start with `foo-` as well as the `<bar-button>` element
+ * await allDefined({
+ *   match: tagName => tagName.startsWith('foo-'),
+ *   additionalElements: ['bar-button', 'baz-dialog']
+ * });
+ */
+export async function allDefined(options?: Partial<AllDefinedOptions>) {
+  const opts: AllDefinedOptions = {
+    match: tagName => tagName.startsWith('wa-'),
+    additionalElements: [],
+    root: document,
+    ...options,
+  };
+
+  // Ensure additional elements is an array
+  const additionalElements = Array.isArray(opts.additionalElements)
+    ? opts.additionalElements
+    : [opts.additionalElements];
+
+  // Discover undefined elements in the document
+  const undefinedElements = [...opts.root.querySelectorAll(':not(:defined)')]
+    .map(el => el.localName)
+    .filter((tag, index, arr) => arr.indexOf(tag) === index) // make it unique
+    .filter(tag => opts.match(tag)); // make sure it matches
+
+  const tagsToAwait = [...undefinedElements, ...additionalElements];
+
+  // Wait for all to be registered
+  await Promise.all(tagsToAwait.map(tag => customElements.whenDefined(tag)));
+
+  // Wait a cycle for the first update
+  await new Promise(requestAnimationFrame);
+}
diff --git a/src/webawesome.ts b/src/webawesome.ts
index ae2a4bee2..287f9d02a 100644
--- a/src/webawesome.ts
+++ b/src/webawesome.ts
@@ -1,6 +1,7 @@
 export { registerIconLibrary, unregisterIconLibrary } from './components/icon/library.js';
-export { discover, startLoader, stopLoader } from './utilities/autoloader.js';
+export { discover, preventTurboFouce, startLoader, stopLoader } from './utilities/autoloader.js';
 export { getBasePath, getKitCode, setBasePath, setKitCode } from './utilities/base-path.js';
+export { allDefined } from './utilities/defined.js';
 export { registerTranslation } from './utilities/localize.js';
 
 // Utilities
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index 0ce1a4570..599e2f43e 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -1,4 +1,3 @@
-import { litSsrPlugin } from '@lit-labs/testing/web-test-runner-ssr-plugin.js';
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { readFileSync } from 'fs';
@@ -53,7 +52,6 @@ export default {
       ts: true,
       target: 'es2020',
     }),
-    litSsrPlugin(),
   ],
   browsers: [
     playwrightLauncher({ product: 'chromium', concurrency }),
@@ -78,12 +76,10 @@ export default {
             ${componentImports.map(str => `"${str}"`).join(',\n')}
           ]
 
-          window.SSR_ONLY = ${process.env['SSR_ONLY'] === 'true'}
           window.CSR_ONLY = ${process.env['CSR_ONLY'] === 'true'}
         </script>
         <script type="module">
           ;(async () => {
-            await import('@lit-labs/ssr-client/lit-element-hydrate-support.js')
             await Promise.allSettled(window.clientComponents.map(str => import(str)));
           })()
         </script>

From c9979e15f8046c6c4bac6251c63164e85c256803 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 24 Mar 2025 16:49:08 -0400
Subject: [PATCH 16/31] adds a hard coded delay to drastically reduce theme
 picker jank (#829)

---
 docs/assets/scripts/theme-picker.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/assets/scripts/theme-picker.js b/docs/assets/scripts/theme-picker.js
index e9220a235..b22a60414 100644
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -4,9 +4,12 @@ export function domChange(fn, { behavior = 'smooth' } = {}) {
     document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
   if (canUseViewTransitions && behavior === 'smooth') {
-    document.startViewTransition(fn);
-  } else {
-    fn(true);
+    const transition = document.startViewTransition(() => {
+      fn(true);
+      // Wait a brief delay before finishing the transition to prevent jumpiness
+      return new Promise(resolve => setTimeout(resolve, 200));
+    });
+    return transition;
   }
 }
 

From 8214ff6b2d090034659add00a3983d3b84a71c70 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 11:39:04 -0400
Subject: [PATCH 17/31] Several fixes around overviews, outlines etc (#825)

* Fix outline for headings that have links

Previously produced blank items because it assumed any link in a heading is an anchor

* Filter unlisted items from overviews

Previously they were filtered only when the card was rendered, so their heading was still shown

* [Overview] Add id to group headings

* Hide headings from empty groups

Should never happen but you never know

* [Overview] Ensure "Other" is always last even when no sorting
---
 docs/_includes/grouped-pages.njk |  4 ++--
 docs/_includes/sidebar-link.njk  |  2 +-
 docs/_utils/filters.js           | 17 ++++++++++++++++-
 docs/_utils/outline.js           |  2 +-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/docs/_includes/grouped-pages.njk b/docs/_includes/grouped-pages.njk
index 7c06d0b3a..2273f4c98 100644
--- a/docs/_includes/grouped-pages.njk
+++ b/docs/_includes/grouped-pages.njk
@@ -3,8 +3,8 @@
 <section id="grid" class="index-grid">
 {% set groupedPages = allPages | groupPages(categories, page) %}
 {% for category, pages in groupedPages -%}
-  {% if groupedPages.meta.groupCount > 1 %}
-  <h2 class="index-category">
+  {% if groupedPages.meta.groupCount > 1 and pages.length > 0 %}
+  <h2 class="index-category" id="{{ category | slugify }}">
     {% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
     {% else %}
     {{ pages.meta.title }}
diff --git a/docs/_includes/sidebar-link.njk b/docs/_includes/sidebar-link.njk
index 261a272ec..d44628b07 100644
--- a/docs/_includes/sidebar-link.njk
+++ b/docs/_includes/sidebar-link.njk
@@ -1,4 +1,4 @@
-{% if not (isAlpha and page.data.noAlpha) and not page.data.unlisted -%}
+{% if page | show -%}
 	<li>
 		<a href="{{ page.url }}">{{ page.data.title }}</a>
 		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
diff --git a/docs/_utils/filters.js b/docs/_utils/filters.js
index f81e5b909..9747a78b3 100644
--- a/docs/_utils/filters.js
+++ b/docs/_utils/filters.js
@@ -178,6 +178,10 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
   });
 }
 
+export function show(page) {
+  return !(page.data.noAlpha && page.data.isAlpha) && !page.data.unlisted;
+}
+
 /**
  * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
  * @param {object[]} collection
@@ -198,7 +202,7 @@ export function groupPages(collection, options = {}, page) {
     options = { tags: options };
   }
 
-  let { tags, groups, titles = {}, other = 'Other' } = options;
+  let { tags, groups, titles = {}, other = 'Other', filter = show } = options;
 
   if (groups === undefined && Array.isArray(tags)) {
     groups = tags;
@@ -237,6 +241,10 @@ export function groupPages(collection, options = {}, page) {
   let byUrl = {};
   let byParentUrl = {};
 
+  if (filter) {
+    collection = collection.filter(filter);
+  }
+
   for (let item of collection) {
     let url = item.page.url;
     let parentUrl = item.data.parentUrl;
@@ -313,6 +321,13 @@ export function groupPages(collection, options = {}, page) {
 
   if (sortedGroups) {
     ret = sortObject(ret, sortedGroups);
+  } else {
+    // At least make sure other is last
+    if (ret.other) {
+      let otherGroup = ret.other;
+      delete ret.other;
+      ret.other = otherGroup;
+    }
   }
 
   Object.defineProperty(ret, 'meta', {
diff --git a/docs/_utils/outline.js b/docs/_utils/outline.js
index 0281ee66b..026a59e00 100644
--- a/docs/_utils/outline.js
+++ b/docs/_utils/outline.js
@@ -39,7 +39,7 @@ export function outlinePlugin(options = {}) {
         }
 
         // Create a clone of the heading so we can remove links and [data-no-outline] elements from the text content
-        clone.querySelectorAll('a').forEach(a => a.remove());
+        clone.querySelectorAll('.wa-visually-hidden, [hidden], [aria-hidden="true"]').forEach(el => el.remove());
         clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
 
         // Generate the link

From 17cf902f5396b0d3df2966e5c528ebb79f32dbb9 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 12:51:36 -0400
Subject: [PATCH 18/31] Add `appearance` to details, closes #569

Except `accent` as that's a) far less useful and b) trickier due to the icon color
---
 docs/docs/components/details.md   | 25 +++++++++++++++++++++++++
 docs/docs/native/details.md       | 29 +++++++++++++++++++++++++++++
 src/components/details/details.ts |  6 +++++-
 src/styles/native/details.css     |  6 ++++--
 4 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/docs/docs/components/details.md b/docs/docs/components/details.md
index 07cd53b33..9f6d94107 100644
--- a/docs/docs/components/details.md
+++ b/docs/docs/components/details.md
@@ -77,6 +77,31 @@ The details component automatically adapts to right-to-left languages:
 </wa-details>
 ```
 
+### Appearance
+
+Use the `appearance` attribute to change the element’s visual appearance.
+
+```html {.example}
+<div class="wa-stack">
+<wa-details summary="Outlined (default)">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+<wa-details summary="Filled" appearance="filled">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+<wa-details summary="Filled + Outlined" appearance="filled outlined">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+<wa-details summary="Plain" appearance="plain">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+</div>
+```
+
 ### Grouping Details
 
 Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event.
diff --git a/docs/docs/native/details.md b/docs/docs/native/details.md
index 767904bc2..d633e8430 100644
--- a/docs/docs/native/details.md
+++ b/docs/docs/native/details.md
@@ -19,6 +19,35 @@ file: styles/native/details.css
 
 ## Examples
 
+### Appearance
+
+Use the [appearance utility classes](/docs/utilities/appearance) to change the element's visual appearance:
+
+```html {.example}
+<div class="wa-stack">
+<details>
+  <summary>Outlined (default)</summary>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</details>
+<details class="wa-filled">
+  <summary>Filled</summary>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</details>
+<details class="wa-filled wa-outlined">
+  <summary>Filled + Outlined</summary>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</details>
+<details class="wa-plain">
+  <summary>Plain</summary>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</details>
+</div>
+```
+
 ### Right-to-Left Languages
 
 The details styling automatically adapts to right-to-left languages:
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index 175a394eb..5c34adeed 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -9,6 +9,7 @@ import { getTargetElement, waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/details.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import styles from './details.css';
@@ -45,7 +46,7 @@ import styles from './details.css';
  */
 @customElement('wa-details')
 export default class WaDetails extends WebAwesomeElement {
-  static shadowStyle = [nativeStyles, styles];
+  static shadowStyle = [appearanceStyles, nativeStyles, styles];
 
   private detailsObserver: MutationObserver;
   private readonly localize = new LocalizeController(this);
@@ -67,6 +68,9 @@ export default class WaDetails extends WebAwesomeElement {
   /** Disables the details so it can't be toggled. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** The element's visual appearance. */
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'plain' = 'outlined';
+
   firstUpdated() {
     this.body.style.height = this.open ? 'auto' : '0';
     if (this.open) {
diff --git a/src/styles/native/details.css b/src/styles/native/details.css
index 0dd4779b2..ab50445af 100644
--- a/src/styles/native/details.css
+++ b/src/styles/native/details.css
@@ -2,10 +2,12 @@ details:where(:not(:host *)),
 :host {
   --icon-color: var(--wa-color-text-quiet);
   --spacing: var(--wa-space-m);
+  --outlined-border-color: var(--wa-color-surface-border);
 
-  background-color: var(--wa-color-surface-default);
-  border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
+  background-color: var(--background-color, var(--wa-color-surface-default));
+  border: var(--wa-panel-border-width) var(--border-color, var(--wa-color-surface-border)) var(--wa-panel-border-style);
   border-radius: var(--wa-panel-border-radius);
+  color: var(--text-color, inherit);
   padding: var(--spacing);
 
   /* Print styles */

From faed8da3cd14da143bf6d6f4d238fe822bb8c5cc Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 12:51:42 -0400
Subject: [PATCH 19/31] Fix broken link

---
 docs/docs/native/button.md  | 2 +-
 docs/docs/native/callout.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/docs/native/button.md b/docs/docs/native/button.md
index b9740a711..3c050199f 100644
--- a/docs/docs/native/button.md
+++ b/docs/docs/native/button.md
@@ -33,7 +33,7 @@ Use the [variant utility classes](../utilities/color.md) to set the button's sem
 
 ### Appearance
 
-Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:
+Use the [appearance utility classes](/docs/utilities/appearance) to change the button's visual appearance:
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
diff --git a/docs/docs/native/callout.md b/docs/docs/native/callout.md
index e3ef62b88..ae8a5cdbf 100644
--- a/docs/docs/native/callout.md
+++ b/docs/docs/native/callout.md
@@ -57,7 +57,7 @@ Use the [variant utility classes](../utilities/color.md) to set the callout's co
 
 ### Appearance
 
-Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
+Use the [appearance utility classes](/docs/utilities/appearance) to change the callout's visual appearance (the default is `outlined filled`).
 
 ```html {.example}
 <article class="wa-callout wa-brand wa-outlined wa-accent">

From 2b3803f91e588f13c280bee2f7d22578b27006eb Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 13:35:23 -0400
Subject: [PATCH 20/31] [Card] Support `appearance`, closes #609

---
 docs/docs/components/card.md | 21 ++++++++++++++++++---
 src/components/card/card.css | 26 ++++++++++++++++++++------
 src/components/card/card.ts  | 10 ++++++++--
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index d1cd32a64..87a99abc2 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -177,8 +177,23 @@ Use the `size` attribute to change a card's size.
   </footer>
 </wa-card>
 </div>
-
 ```
 
-<style>
-</style>
+### Appearance
+
+Use the `appearance` attribute to change the card's visual appearance.
+
+```html {.example}
+<div class="wa-grid">
+<wa-card>
+  <div slot="header">Outlined (default)</div>
+  Card content.
+</wa-card>
+{% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
+<wa-card appearance="{{ appearance }}">
+  <div slot="header">{{ appearance | capitalize }}</div>
+  Card content.
+</wa-card>
+{%- endfor %}
+</div>
+```
diff --git a/src/components/card/card.css b/src/components/card/card.css
index 8be8a0d9a..8b2f193f9 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -5,15 +5,15 @@
 
   --spacing: var(--wa-space);
   --border-width: var(--wa-panel-border-width);
-  --border-color: var(--wa-color-surface-border);
+  --outlined-border-color: var(--wa-color-surface-border);
   --border-radius: var(--wa-panel-border-radius);
-
   --inner-border-radius: calc(var(--border-radius) - var(--border-width));
+  --inner-border-color: var(--outlined-border-color);
 
   display: flex;
   flex-direction: column;
-  background-color: var(--wa-color-surface-default);
-  border-color: var(--border-color);
+  background-color: var(--background-color, var(--wa-color-surface-default));
+  border-color: var(--border-color, var(--wa-color-surface-border));
   border-radius: var(--border-radius);
   border-style: var(--wa-panel-border-style);
   box-shadow: var(--wa-shadow-s);
@@ -21,6 +21,20 @@
   color: var(--wa-color-text-normal);
 }
 
+:host(:is([appearance~='accent'], .wa-accent)) {
+  color: var(--text-color, var(--wa-color-text-normal));
+}
+
+:host([appearance~='filled']),
+:host(.wa-filled) {
+  --inner-border-color: oklab(from var(--outlined-border-color) l a b / 65%);
+}
+
+:host([appearance='plain']) {
+  --inner-border-color: transparent;
+  box-shadow: none;
+}
+
 /* Take care of top and bottom radii */
 .image,
 :host(:not([with-image])) .header,
@@ -49,7 +63,7 @@
 .header {
   display: block;
   border-block-end-style: inherit;
-  border-block-end-color: var(--border-color);
+  border-block-end-color: var(--inner-border-color);
   border-block-end-width: var(--border-width);
   padding: calc(var(--spacing) / 2) var(--spacing);
 }
@@ -62,7 +76,7 @@
 .footer {
   display: block;
   border-block-start-style: inherit;
-  border-block-start-color: var(--border-color);
+  border-block-start-color: var(--inner-border-color);
   border-block-start-width: var(--border-width);
   padding: var(--spacing);
 }
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 2c9317d9a..6bf2693ce 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { HasSlotController } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './card.css';
 
@@ -22,19 +23,24 @@ import styles from './card.css';
  * @csspart footer - The container that wraps the card's footer.
  *
  * @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
- * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders, including inner borders. Expects a single value.
+ * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
+ * @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
  * @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
  * @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {
-  static shadowStyle = [sizeStyles, styles];
+  static shadowStyle = [sizeStyles, appearanceStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
 
   /** The component's size. Will be inherited by any descendants with a `size` attribute. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
 
+  /** The card's visual appearance. */
+  @property({ reflect: true })
+  appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined';
+
   /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
   @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
 

From 9e84274a93dffff707a508658edecbd495b25159 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 14:11:16 -0400
Subject: [PATCH 21/31] [Card] Round all corners of the image for
 `appearance=plain`

---
 docs/docs/components/card.md | 10 ++++++++++
 src/components/card/card.css |  9 +++++++++
 2 files changed, 19 insertions(+)

diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index 87a99abc2..bb50a96cd 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -186,11 +186,21 @@ Use the `appearance` attribute to change the card's visual appearance.
 ```html {.example}
 <div class="wa-grid">
 <wa-card>
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
   <div slot="header">Outlined (default)</div>
   Card content.
 </wa-card>
 {% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
 <wa-card appearance="{{ appearance }}">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
   <div slot="header">{{ appearance | capitalize }}</div>
   Card content.
 </wa-card>
diff --git a/src/components/card/card.css b/src/components/card/card.css
index 8b2f193f9..30df20f03 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -60,6 +60,15 @@
   }
 }
 
+/* Round all corners for plain appearance */
+:host([appearance='plain']) .image {
+  border-radius: var(--inner-border-radius);
+
+  &::slotted(img) {
+    border-radius: inherit !important;
+  }
+}
+
 .header {
   display: block;
   border-block-end-style: inherit;

From 7c6f31e0c70cb361e8e524d5a4f1d6d9f4bc1f0c Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 14:19:54 -0400
Subject: [PATCH 22/31] [Card docs] Use style utilities instead of custom CSS

---
 docs/docs/components/card.md | 42 +++++++-----------------------------
 1 file changed, 8 insertions(+), 34 deletions(-)

diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index bb50a96cd..daf427d79 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -15,9 +15,9 @@ icon: card
 
   <strong>Mittens</strong><br />
   This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
+  <small class="wa-caption-m">6 weeks old</small>
 
-  <div slot="footer">
+  <div slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating label="Rating"></wa-rating>
   </div>
@@ -27,16 +27,6 @@ icon: card
   .card-overview {
     width: 300px;
   }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
 </style>
 ```
 
@@ -65,9 +55,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 
 ```html {.example}
 <wa-card with-header class="card-header">
-  <div slot="header">
+  <div slot="header" class="wa-split">
     Header Title
-    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
+    <wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
   </div>
 
   This card has a header. You can put all sorts of things in it!
@@ -78,19 +68,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
     max-width: 300px;
   }
 
-  .card-header [slot='header'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
   .card-header h3 {
     margin: 0;
   }
-
-  .card-header wa-icon-button {
-    font-size: var(--wa-font-size-m);
-  }
 </style>
 ```
 
@@ -103,7 +83,7 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 <wa-card with-footer class="card-footer">
   This card has a footer. You can put all sorts of things in it!
 
-  <div slot="footer">
+  <div slot="footer" class="wa-split">
     <wa-rating></wa-rating>
     <wa-button variant="brand">Preview</wa-button>
   </div>
@@ -113,12 +93,6 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
   .card-footer {
     max-width: 300px;
   }
-
-  .card-footer [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
 </style>
 ```
 
@@ -153,7 +127,7 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="small">
   This is a small card.
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
@@ -162,7 +136,7 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="medium">
   This is a medium card (default).
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
@@ -171,7 +145,7 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="large">
   This is a large card.
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>

From b41dbd2de7bb6bfb0c5df666cdb3f2e6bdeffc08 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 16:41:22 -0400
Subject: [PATCH 23/31] Fix: Specify default card background

---
 src/components/card/card.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/card/card.css b/src/components/card/card.css
index 30df20f03..abb88e521 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -5,6 +5,7 @@
 
   --spacing: var(--wa-space);
   --border-width: var(--wa-panel-border-width);
+  --outlined-background-color: var(--wa-color-surface-default);
   --outlined-border-color: var(--wa-color-surface-border);
   --border-radius: var(--wa-panel-border-radius);
   --inner-border-radius: calc(var(--border-radius) - var(--border-width));

From 041555fe990fe389a64db61ea64b410a95994c3a Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 16:16:28 -0400
Subject: [PATCH 24/31] `border-radius: 0` on plain details

---
 src/styles/native/details.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/native/details.css b/src/styles/native/details.css
index ab50445af..f7264d3fc 100644
--- a/src/styles/native/details.css
+++ b/src/styles/native/details.css
@@ -21,6 +21,12 @@ details:where(:not(:host *)),
   }
 }
 
+details.wa-plain,
+:host(wa-details[appearance='plain']),
+:host(wa-details.wa-plain) {
+  border-radius: 0;
+}
+
 details:where(:not(:host *)) summary,
 :host summary /* nesting these summary styles in the rule above breaks in Firefox and Safari */ {
   display: flex;

From 0db9ca12e332c4e0e25cf8f6b1e0ad6b574117f9 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 26 Mar 2025 10:45:29 -0400
Subject: [PATCH 25/31] Remove unused SSR module and remove first load fade
 (#835)

* disable SSR module in 11ty

* remove first load fade
---
 docs/.eleventy.js                   | 53 ++++++++++++++---------------
 docs/assets/scripts/theme-picker.js | 17 ++++++++-
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index c75fdf019..fb0dbfd58 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -7,10 +7,10 @@ import { highlightCodePlugin } from './_utils/highlight-code.js';
 import { markdown } from './_utils/markdown.js';
 import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
 // import { formatCodePlugin } from './_utils/format-code.js';
-import litPlugin from '@lit-labs/eleventy-plugin-lit';
+// import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
 import nunjucks from 'nunjucks';
-import componentList from './_data/componentList.js';
+// import componentList from './_data/componentList.js';
 import * as filters from './_utils/filters.js';
 import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
@@ -29,7 +29,6 @@ const globalData = {
   package: packageData,
   isAlpha,
   layout: 'page.njk',
-
   server: {
     head: '',
     loginOrAvatar: '',
@@ -190,30 +189,30 @@ export default function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
-  // SSR plugin
-  // Make sure this is the last thing, we dont want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
-  if (!isDev) {
-    //
-    // Problematic components in SSR land:
-    //  - animation (breaks on navigation + ssr with Turbo)
-    //  - mutation-observer (why SSR this?)
-    //  - resize-observer (why SSR this?)
-    //  - tooltip (why SSR this?)
-    //
-    const omittedModules = [];
-    const componentModules = componentList
-      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-      .map(component => {
-        const name = component.tagName.split(/wa-/)[1];
-        const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
-        return path.join(componentDirectory, 'components', name, `${name}.js`);
-      });
-
-    eleventyConfig.addPlugin(litPlugin, {
-      mode: 'worker',
-      componentModules,
-    });
-  }
+  // // SSR plugin
+  // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
+  // if (!isDev) {
+  //   //
+  //   // Problematic components in SSR land:
+  //   //  - animation (breaks on navigation + ssr with Turbo)
+  //   //  - mutation-observer (why SSR this?)
+  //   //  - resize-observer (why SSR this?)
+  //   //  - tooltip (why SSR this?)
+  //   //
+  //   const omittedModules = [];
+  //   const componentModules = componentList
+  //     .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+  //     .map(component => {
+  //       const name = component.tagName.split(/wa-/)[1];
+  //       const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+  //       return path.join(componentDirectory, 'components', name, `${name}.js`);
+  //     });
+  //
+  //   eleventyConfig.addPlugin(litPlugin, {
+  //     mode: 'worker',
+  //     componentModules,
+  //   });
+  // }
 
   return {
     markdownTemplateEngine: 'njk',
diff --git a/docs/assets/scripts/theme-picker.js b/docs/assets/scripts/theme-picker.js
index b22a60414..f1d69e1e6 100644
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -1,8 +1,20 @@
+let initialPageLoadComplete = false;
+
+window.addEventListener('load', () => {
+  initialPageLoadComplete = true;
+});
+
 // Helper for view transitions
-export function domChange(fn, { behavior = 'smooth' } = {}) {
+export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
   const canUseViewTransitions =
     document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
+  // Skip transitions on initial page load
+  if (!initialPageLoadComplete && ignoreInitialLoad) {
+    fn(false);
+    return null;
+  }
+
   if (canUseViewTransitions && behavior === 'smooth') {
     const transition = document.startViewTransition(() => {
       fn(true);
@@ -10,6 +22,9 @@ export function domChange(fn, { behavior = 'smooth' } = {}) {
       return new Promise(resolve => setTimeout(resolve, 200));
     });
     return transition;
+  } else {
+    fn(false);
+    return null;
   }
 }
 

From 1bba87c66d0ca6ca2622abb2c0276dccbdf483b1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 26 Mar 2025 12:07:09 -0400
Subject: [PATCH 26/31] Improve search lists (#837)

* add debounce to search so it feels more natural

* improve search grid styles
---
 docs/assets/scripts/filter.js | 12 +++++++++++-
 docs/assets/styles/docs.css   | 14 +++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/docs/assets/scripts/filter.js b/docs/assets/scripts/filter.js
index 7d0398f41..d0b16de9e 100644
--- a/docs/assets/scripts/filter.js
+++ b/docs/assets/scripts/filter.js
@@ -1,3 +1,11 @@
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
 function updateResults(input) {
   const filter = input.value.toLowerCase().trim();
   let filtered = Boolean(filter);
@@ -18,8 +26,10 @@ function updateResults(input) {
   }
 }
 
+const debouncedUpdateResults = debounce(updateResults, 300);
+
 document.documentElement.addEventListener('input', e => {
   if (e.target?.matches('#block-filter wa-input')) {
-    updateResults(e.target);
+    debouncedUpdateResults(e.target);
   }
 });
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 3a275228f..d51d19360 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -370,10 +370,22 @@ wa-page > main:has(> .index-grid) {
 
 .index-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
+  grid-template-columns: repeat(4, 1fr);
   gap: var(--wa-space-2xl);
   margin-block-end: var(--wa-space-3xl);
 
+  @media screen and (max-width: 1470px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media screen and (max-width: 960px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (max-width: 500px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
   a {
     border-radius: var(--wa-border-radius-l);
     text-decoration: none;

From fa24c0f70e0a8d1eff9ee3f44129f52901ba0c2e Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 25 Mar 2025 16:16:50 -0400
Subject: [PATCH 27/31] Update changelog.md

---
 docs/docs/resources/changelog.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 474aa3600..45c4b94fc 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -14,9 +14,18 @@ During the alpha period, things might break! We take breaking changes very serio
 
 ## Next
 
-- Added the `wa-cloak` utility to prevent FOUCE
+### Enhancements
+
+- Added `appearance` to [`<wa-details>`](/docs/components/details) and [`<wa-card>`](/docs/components/card) and support for the [appearance utilities](/docs/utilities/appearance/) in the [`<details>` native styles](/docs/native/details).
+- Added an `orange` scale to all color palettes
+- Added the `.wa-cloak` utility to prevent FOUCE
 - Added the `allDefined()` utility for awaiting component registration
-- Fixed `wa-pill` class for text fields
+
+### Bugfixes
+
+- Specifying inherited CSS properties on `<wa-tooltip>` now works as expected ([thanks Dennis!](https://github.com/shoelace-style/webawesome-alpha/discussions/203))
+- Fixed a bug in `<wa-select>` that made it hard to use with VueJS, Svelte, and many other frameworks
+- Fixed the `wa-pill` class for text fields
 - Fixed `pill` style for `<wa-input>` elements
 - Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
 - Fixed a bug in `<wa-select multiple>` that sometimes resulted in empty `<div>` elements being output

From 8424b496461aed5d267c7d5b9dd5b1b841ff0697 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 26 Mar 2025 10:47:57 -0400
Subject: [PATCH 28/31] Theme icons, take 1

---
 docs/_includes/svgs/theme.njk      | 28 ++++++++++
 docs/assets/styles/docs.css        |  2 +-
 docs/assets/styles/theme-icons.css | 82 ++++++++++++++++++++++++++++--
 docs/docs/themes/themes.json       |  1 +
 4 files changed, 108 insertions(+), 5 deletions(-)
 create mode 100644 docs/_includes/svgs/theme.njk

diff --git a/docs/_includes/svgs/theme.njk b/docs/_includes/svgs/theme.njk
new file mode 100644
index 000000000..2cc84f7a3
--- /dev/null
+++ b/docs/_includes/svgs/theme.njk
@@ -0,0 +1,28 @@
+{% set themeId = theme.fileSlug or page.fileSlug %}
+
+<div class="theme-icon-host theme-overall-icon-host">
+  <template shadowrootmode="open">
+    <link rel="stylesheet" href="/dist/styles/utilities.css">
+    <link rel="stylesheet" href="/dist/styles/native/content.css">
+    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
+    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
+
+    <div class="theme-icon theme-overall-icon wa-theme-{{ themeId }}" role="presentation" data-no-anchor data-no-outline>
+      <div class="row row-1">
+        <h2>Aa</h2>
+        <div class="swatches">
+          <div class="wa-brand"></div>
+
+          <div class="wa-success"></div>
+          <div class="wa-warning"></div>
+          <div class="wa-danger"></div>
+          <div class="wa-neutral"></div>
+        </div>
+      </div>
+      <div class="row row-2">
+        <wa-input value="Input" size="small"></wa-input>
+        <wa-button size="small" variant="brand">Go</wa-button>
+      </div>
+    </div>
+  </template>
+</div>
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index d51d19360..cae9f5b10 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -4,6 +4,7 @@
 @import 'outline.css';
 @import 'search.css';
 @import 'cera_typeface.css';
+@import 'theme-icons.css';
 
 :root {
   --wa-brand-orange: #f36944;
@@ -412,7 +413,6 @@ wa-page > main:has(> .index-grid) {
 
     &::part(header) {
       background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
-      border-bottom: none;
       display: flex;
       align-items: center;
       justify-content: center;
diff --git a/docs/assets/styles/theme-icons.css b/docs/assets/styles/theme-icons.css
index 573e2aee1..ad6946d65 100644
--- a/docs/assets/styles/theme-icons.css
+++ b/docs/assets/styles/theme-icons.css
@@ -1,3 +1,36 @@
+wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
+  min-width: 22ch;
+
+  &::part(header) {
+    /* We want to add a background color, so any spacing needs to go on .theme-icon */
+    padding: 0;
+    min-block-size: 0;
+  }
+
+  [slot='header'] {
+    display: block;
+    width: 100%;
+    border-radius: inherit;
+  }
+}
+
+.theme-icon-host {
+  display: block;
+  border-radius: inherit;
+}
+
+.theme-icon {
+  border-radius: inherit;
+  box-sizing: border-box;
+
+  h2,
+  h3,
+  p {
+    margin-block: 0;
+    padding: 0;
+  }
+}
+
 .theme-color-icon {
   display: grid;
   gap: var(--wa-space-xs);
@@ -25,10 +58,51 @@
   display: flex;
   flex-direction: column;
   gap: var(--wa-space-xs);
+}
 
-  h3,
-  p {
-    margin-block: 0;
-    padding: 0;
+.theme-overall-icon {
+  display: flex;
+  flex-flow: column;
+  gap: var(--wa-space-xs);
+  justify-content: center;
+  width: 100%;
+  min-height: 7.5rem;
+  box-sizing: border-box;
+  padding: var(--wa-space-xs) var(--wa-space-m);
+  background: var(--wa-color-surface-lowered);
+
+  .row {
+    display: flex;
+    gap: var(--wa-space-xs);
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .row-2 {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    contain: inline-size;
+    width: 100%;
+
+    wa-input {
+      min-width: 1em;
+    }
+  }
+
+  .swatches {
+    display: flex;
+    gap: var(--wa-space-2xs);
+
+    > div {
+      width: 1em;
+      height: 2em;
+      border-radius: var(--wa-border-radius-s);
+      background: var(--wa-color-fill-loud);
+      color: var(--wa-color-on-loud);
+
+      &.wa-brand {
+        width: 2em;
+      }
+    }
   }
 }
diff --git a/docs/docs/themes/themes.json b/docs/docs/themes/themes.json
index 3af2e88e3..35e61b030 100644
--- a/docs/docs/themes/themes.json
+++ b/docs/docs/themes/themes.json
@@ -3,6 +3,7 @@
   "wide": true,
   "tags": ["themes", "theme"],
   "brand": "blue",
+  "icon": "theme",
   "eleventyComputed": {
     "file": "styles/themes/{{ page.fileSlug }}.css"
   }

From fd287edd5677de5f79f8a6cb3326c283424de456 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 26 Mar 2025 11:40:36 -0400
Subject: [PATCH 29/31] Change balance of color swatches

---
 docs/assets/styles/theme-icons.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/assets/styles/theme-icons.css b/docs/assets/styles/theme-icons.css
index ad6946d65..ad15ca323 100644
--- a/docs/assets/styles/theme-icons.css
+++ b/docs/assets/styles/theme-icons.css
@@ -91,17 +91,17 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
 
   .swatches {
     display: flex;
-    gap: var(--wa-space-2xs);
+    gap: var(--wa-space-3xs);
 
     > div {
-      width: 1em;
-      height: 2em;
+      width: 1.25rem;
+      height: 1.25rem;
       border-radius: var(--wa-border-radius-s);
       background: var(--wa-color-fill-loud);
       color: var(--wa-color-on-loud);
 
       &.wa-brand {
-        width: 2em;
+        width: 2.5rem;
       }
     }
   }

From d451ba98e5f1112801020298ed981e6da0815913 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 26 Mar 2025 12:54:32 -0400
Subject: [PATCH 30/31] Fix web fonts in theme icons

Instead of raw DSD, use a component that pulls in a child template and then goes over the CSS and extracts font-related rules into the document, just once per rule.
This also fixes theme icons in Vue.
---
 docs/_includes/head.njk                  |   4 +-
 docs/_includes/svgs/theme-color.njk      |   8 +-
 docs/_includes/svgs/theme-typography.njk |  10 +-
 docs/_includes/svgs/theme.njk            |   7 +-
 docs/assets/components/scoped.js         | 156 +++++++++++++++++++++++
 docs/assets/styles/theme-icons.css       |   2 +-
 6 files changed, 173 insertions(+), 14 deletions(-)
 create mode 100644 docs/assets/components/scoped.js

diff --git a/docs/_includes/head.njk b/docs/_includes/head.njk
index 5a9808f7b..c6bd79be7 100644
--- a/docs/_includes/head.njk
+++ b/docs/_includes/head.njk
@@ -24,6 +24,9 @@
 <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
 <link rel="preconnect" href="https://cdn.jsdelivr.net">
 
+{# Internal components #}
+<script type="module" src="/assets/components/scoped.js"></script>
+
 {# Web Awesome #}
 <script type="module" src="/dist/webawesome.loader.js"></script>
 
@@ -47,6 +50,5 @@
 <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
 <link rel="stylesheet" href="/dist/styles/forms.css" />
 
-
 {# Used by Web Awesome App to inject other assets into the head. #}
 {% server "head" %}
diff --git a/docs/_includes/svgs/theme-color.njk b/docs/_includes/svgs/theme-color.njk
index 0c41f7f5d..a5d543ced 100644
--- a/docs/_includes/svgs/theme-color.njk
+++ b/docs/_includes/svgs/theme-color.njk
@@ -1,13 +1,13 @@
 {% set themeId = theme.fileSlug %}
 
-<div>
-  <template shadowrootmode="open">
+<wa-scoped class="theme-icon-host theme-color-icon-host">
+  <template>
     <link rel="stylesheet" href="/dist/styles/utilities.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
     <link rel="stylesheet" href="/assets/styles/theme-icons.css">
 
-    <div class="theme-color-icon wa-theme-{{ themeId }}">
+    <div class="theme-icon theme-color-icon wa-theme-{{ themeId }}">
       <div class="wa-brand wa-accent">A</div>
       <div class="wa-brand wa-outlined">A</div>
       <div class="wa-brand wa-filled">A</div>
@@ -21,4 +21,4 @@
       {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
     </div>
   </template>
-</div>
+</wa-scoped>
diff --git a/docs/_includes/svgs/theme-typography.njk b/docs/_includes/svgs/theme-typography.njk
index 06ba0212a..e72813555 100644
--- a/docs/_includes/svgs/theme-typography.njk
+++ b/docs/_includes/svgs/theme-typography.njk
@@ -1,16 +1,16 @@
-{% set themeId = theme.fileSlug %}
+{% set themeId = theme.fileSlug or page.fileSlug %}
 
-<div>
-  <template shadowrootmode="open">
+<wa-scoped class="theme-icon-host theme-typography-icon-host">
+  <template>
     <link rel="stylesheet" href="/dist/styles/native/content.css">
     <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
     <link rel="stylesheet" href="/assets/styles/theme-icons.css">
 
-    <div class="theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
+    <div class="theme-icon theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
       <h3>Title</h3>
       <p>Body text</p>
     </div>
   </template>
-</div>
+</wa-scoped>
diff --git a/docs/_includes/svgs/theme.njk b/docs/_includes/svgs/theme.njk
index 2cc84f7a3..02c2db1dc 100644
--- a/docs/_includes/svgs/theme.njk
+++ b/docs/_includes/svgs/theme.njk
@@ -1,7 +1,8 @@
 {% set themeId = theme.fileSlug or page.fileSlug %}
 
-<div class="theme-icon-host theme-overall-icon-host">
-  <template shadowrootmode="open">
+
+<wa-scoped class="theme-icon-host theme-overall-icon-host">
+  <template>
     <link rel="stylesheet" href="/dist/styles/utilities.css">
     <link rel="stylesheet" href="/dist/styles/native/content.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
@@ -25,4 +26,4 @@
       </div>
     </div>
   </template>
-</div>
+</wa-scoped>
diff --git a/docs/assets/components/scoped.js b/docs/assets/components/scoped.js
new file mode 100644
index 000000000..450dba2f4
--- /dev/null
+++ b/docs/assets/components/scoped.js
@@ -0,0 +1,156 @@
+/**
+ * Low-level utility to encapsulate a bit of HTML (mainly to apply certain stylesheets to it without them leaking to the rest of the page)
+ * Usage: <wa-scoped><template><!-- your HTML here --></template></wa-scoped>
+ */
+
+// Map of <wa-scoped> elements to any global <style> elements they’ve created
+const imports = new Set();
+const fontFaceRules = new Set();
+
+export default class WaScoped extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.observer = new MutationObserver(() => this.render());
+    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.observer.takeRecords();
+    this.observer.disconnect();
+
+    this.shadowRoot.innerHTML = '';
+
+    // To avoid mutating this.childNodes while iterating over it
+    let nodes = [];
+
+    for (let template of this.childNodes) {
+      // Other solutions we can try if needed: <script type="text/html">, or comment nodes
+      if (template instanceof HTMLTemplateElement) {
+        if (template.content.childNodes.length > 0) {
+          nodes.push(template.content.cloneNode(true));
+        } else if (template.childNodes.length > 0) {
+          // Fake template, suck its children out of the light DOM
+          nodes.push(...template.childNodes);
+        }
+      } else {
+        // Regular child, suck it out of the light DOM
+        nodes.push(template);
+      }
+    }
+
+    this.shadowRoot.append(...nodes);
+
+    this.#fixStyles();
+
+    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+  }
+
+  /**
+   * @font-face does not work in shadow DOM in Chrome & FF, as of March 2025 https://issues.chromium.org/issues/41085401
+   * This works around this issue by traversing the shadow DOM CSS looking
+   * for @font-face rules or CSS imports to known font providers and copies them to the main document
+   */
+  async #fixStyles() {
+    let styleElements = [...this.shadowRoot.querySelectorAll('link[rel="stylesheet"], style')];
+
+    let loadStates = styleElements.map(element => {
+      try {
+        if (element.sheet?.cssRules) {
+          // Already loaded
+          return Promise.resolve(element.sheet);
+        }
+      } catch (e) {
+        // CORS
+        return Promise.resolve(null);
+      }
+
+      return new Promise((resolve, reject) => {
+        element.addEventListener('load', e => resolve(element.sheet));
+        element.addEventListener('error', e => reject(null));
+      });
+    });
+
+    await Promise.allSettled(loadStates);
+
+    let fontRules = findFontFaceRules(...this.shadowRoot.styleSheets);
+
+    if (!fontRules.length) {
+      return;
+    }
+
+    let doc = this.ownerDocument;
+    // Why not adoptedStyleSheets? Can't have @import in those yet
+    let id = `wa-scoped-hoisted-fonts`;
+    let style = doc.head.querySelector('style#' + id);
+    if (!style) {
+      style = Object.assign(doc.createElement('style'), { id, textContent: ' ' });
+      doc.head.append(style);
+    }
+    let sheet = style.sheet;
+
+    for (let rule of fontRules) {
+      let cssText = rule.cssText;
+      if (rule.type === CSSRule.FONT_FACE_RULE) {
+        if (fontFaceRules.has(cssText)) {
+          continue;
+        }
+        fontFaceRules.add(cssText);
+        sheet.insertRule(cssText);
+      } else if (rule.type === CSSRule.IMPORT_RULE) {
+        if (imports.has(rule.href)) {
+          continue;
+        }
+        imports.add(rule.href);
+        sheet.insertRule(cssText, 0);
+      }
+    }
+  }
+
+  static observedAttributes = [];
+}
+
+customElements.define('wa-scoped', WaScoped);
+
+export const WEB_FONT_HOSTS = [
+  'fonts.googleapis.com',
+  'fonts.gstatic.com',
+  'use.typekit.net',
+  'fonts.adobe.com',
+  'kit.fontawesome.com',
+  'pro.fontawesome.com',
+  'cdn.materialdesignicons.com',
+];
+
+function findFontFaceRules(...stylesheets) {
+  let ret = [];
+
+  for (let sheet of stylesheets) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch (e) {
+      // CORS
+      continue;
+    }
+
+    for (let rule of rules) {
+      if (rule.type === CSSRule.FONT_FACE_RULE) {
+        ret.push(rule);
+      } else if (rule.type === CSSRule.IMPORT_RULE) {
+        if (WEB_FONT_HOSTS.some(host => rule.href.includes(host))) {
+          ret.push(rule);
+        } else if (rule.styleSheet) {
+          ret.push(...findFontFaceRules(rule.styleSheet));
+        }
+      }
+    }
+  }
+
+  return ret;
+}
diff --git a/docs/assets/styles/theme-icons.css b/docs/assets/styles/theme-icons.css
index ad15ca323..1a1375eec 100644
--- a/docs/assets/styles/theme-icons.css
+++ b/docs/assets/styles/theme-icons.css
@@ -20,6 +20,7 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
 }
 
 .theme-icon {
+  padding: var(--wa-space-xs) var(--wa-space-m);
   border-radius: inherit;
   box-sizing: border-box;
 
@@ -68,7 +69,6 @@ wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
   width: 100%;
   min-height: 7.5rem;
   box-sizing: border-box;
-  padding: var(--wa-space-xs) var(--wa-space-m);
   background: var(--wa-color-surface-lowered);
 
   .row {

From 09f668fc99e75e7f13ec76a75b3385c64e97d911 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 26 Mar 2025 17:11:28 -0400
Subject: [PATCH 31/31] Workaround for dark mode

---
 docs/_includes/svgs/theme.njk       |  2 +-
 docs/assets/components/scoped.js    | 13 +++++++++++++
 docs/assets/scripts/theme-picker.js |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/_includes/svgs/theme.njk b/docs/_includes/svgs/theme.njk
index 02c2db1dc..92b39caff 100644
--- a/docs/_includes/svgs/theme.njk
+++ b/docs/_includes/svgs/theme.njk
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
     <link rel="stylesheet" href="/assets/styles/theme-icons.css">
 
-    <div class="theme-icon theme-overall-icon wa-theme-{{ themeId }}" role="presentation" data-no-anchor data-no-outline>
+    <div class="theme-icon theme-overall-icon" role="presentation" data-no-anchor data-no-outline>
       <div class="row row-1">
         <h2>Aa</h2>
         <div class="swatches">
diff --git a/docs/assets/components/scoped.js b/docs/assets/components/scoped.js
index 450dba2f4..e97e62096 100644
--- a/docs/assets/components/scoped.js
+++ b/docs/assets/components/scoped.js
@@ -18,6 +18,9 @@ export default class WaScoped extends HTMLElement {
 
   connectedCallback() {
     this.render();
+    this.ownerDocument.documentElement.addEventListener('wa-color-scheme-change', e =>
+      this.#applyDarkMode(e.detail.dark),
+    );
   }
 
   render() {
@@ -47,10 +50,20 @@ export default class WaScoped extends HTMLElement {
     this.shadowRoot.append(...nodes);
 
     this.#fixStyles();
+    this.#applyDarkMode();
 
     this.observer.observe(this, { childList: true, subtree: true, characterData: true });
   }
 
+  #applyDarkMode(isDark = getComputedStyle(this).colorScheme === 'dark') {
+    // Hack to make dark mode work
+    // NOTE If any child nodes actually have .wa-dark, this will override it
+    for (let node of this.shadowRoot.children) {
+      node.classList.toggle('wa-dark', isDark);
+    }
+    this.classList.toggle('wa-dark', isDark);
+  }
+
   /**
    * @font-face does not work in shadow DOM in Chrome & FF, as of March 2025 https://issues.chromium.org/issues/41085401
    * This works around this issue by traversing the shadow DOM CSS looking
diff --git a/docs/assets/scripts/theme-picker.js b/docs/assets/scripts/theme-picker.js
index f1d69e1e6..d5a7e541d 100644
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -118,6 +118,7 @@ const colorScheme = new ThemeAspect({
     domChange(() => {
       let dark = this.computedValue === 'dark';
       document.documentElement.classList.toggle(`wa-dark`, dark);
+      document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } }));
     });
   },
 });