First stab at with-* → ssr-slots

- Infrastructure in base class - Sample implementation in Card - Docs
2026-01-19 07:29:14 +00:00 · 2025-01-31 22:23:21 -08:00
48 changed files with 663 additions and 689 deletions
--- a/docs/_data/hues.json
+++ b/docs/_data/hues.json
@@ -1 +1 @@
-["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "gray"]
+["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
--- a/docs/_includes/svgs/tokens/color.njk
+++ b/docs/_includes/svgs/tokens/color.njk
@@ -2,7 +2,7 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-purple-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
 </svg>
--- a/docs/_includes/theme-showcase.njk
+++ b/docs/_includes/theme-showcase.njk
@@ -23,7 +23,7 @@
        </div>
        <wa-divider></wa-divider>
        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
+          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
            <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
          </wa-avatar>
          <div class="wa-stack wa-gap-2xs">
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -6,7 +6,7 @@ icon: card
 ---

 ```html {.example}
-<wa-card with-image with-footer class="card-overview">
+<wa-card 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"
@@ -61,10 +61,10 @@ Basic cards aren't very exciting, but they can display any content you want them
 ### Card with Header

 Headers can be used to display titles and more.
-If using SSR, you need to also use the `with-header` attribute to add a header to the card (if not, it is added automatically).
+If using SSR, you need to also use the `ssr-slots` attribute to add a header to the card (if not, it is added automatically).

 ```html {.example}
-<wa-card with-header class="card-header">
+<wa-card ssr-slots="header" class="card-header">
  <div slot="header">
    Header Title
    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
@@ -97,10 +97,10 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 ### Card with Footer

 Footers can be used to display actions, summaries, or other relevant content.
-If using SSR, you need to also use the `with-footer` attribute to add a footer to the card (if not, it is added automatically).
+If using SSR, you need to also use the `ssr-slots` attribute to add a footer to the card (if not, it is added automatically).

 ```html {.example}
-<wa-card with-footer class="card-footer">
+<wa-card ssr-slots="footer" class="card-footer">
  This card has a footer. You can put all sorts of things in it!

  <div slot="footer">
@@ -125,10 +125,10 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 ### Images

 Card images are displayed atop the card and will stretch to fit.
-If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).
+If using SSR, you need to also use the `ssr-slots` attribute to add an image to the card (if not, it is added automatically).

 ```html {.example}
-<wa-card with-image class="card-image">
+<wa-card ssr-slots="image" class="card-image">
  <img
    slot="image"
    src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
@@ -150,7 +150,7 @@ Use the `size` attribute to change a card's size.

 ```html {.example}
 <div class="wa-stack">
-<wa-card with-footer size="small">
+<wa-card ssr-slots=footer size="small">
  This is a small card.

  <footer slot="footer" class="wa-flank">
@@ -159,7 +159,7 @@ Use the `size` attribute to change a card's size.
  </footer>
 </wa-card>

-<wa-card with-footer size="medium">
+<wa-card ssr-slots=footer size="medium">
  This is a medium card (default).

  <footer slot="footer" class="wa-flank">
@@ -168,7 +168,7 @@ Use the `size` attribute to change a card's size.
  </footer>
 </wa-card>

-<wa-card with-footer size="large">
+<wa-card ssr-slots=footer size="large">
  This is a large card.

  <footer slot="footer" class="wa-flank">
--- a/docs/docs/components/carousel.md
+++ b/docs/docs/components/carousel.md
@@ -450,7 +450,7 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
    const carousel = document.querySelector('wa-carousel.aspect-ratio');
    const aspectRatio = document.querySelector('wa-select[name="aspect"]');

-    aspectRatio.addEventListener('change', () => {
+    aspectRatio.addEventlistener('change', () => {
      carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
    });
  })();
--- a/docs/docs/components/checkbox.md
+++ b/docs/docs/components/checkbox.md
@@ -82,7 +82,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
  });

  // Update validity on change
-  checkbox.addEventListener('change', () => {
+  checkbox.addEventlistener('change', () => {
    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
  });

--- a/docs/docs/components/copy-button.md
+++ b/docs/docs/components/copy-button.md
@@ -9,10 +9,6 @@ icon: copy-button
 <wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
 ```

-:::info
-Copy buttons use the browser's [`clipboard.writeText()`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS) in most browsers.
-:::
-
 ## Examples

 ### Custom Labels
--- a/docs/docs/components/page/demo-page.css
+++ b/docs/docs/components/page/demo-page.css
@@ -52,8 +52,8 @@ wa-page {
  }

  &[slot^='navigation'] {
-    background: var(--wa-color-purple-80);
-    color: var(--wa-color-purple-20);
+    background: var(--wa-color-violet-80);
+    color: var(--wa-color-violet-20);
  }

  strong {
--- a/docs/docs/components/split-panel.md
+++ b/docs/docs/components/split-panel.md
@@ -208,7 +208,7 @@ Try resizing the example below with each option and notice how the panels respon
  const splitPanel = container.querySelector('wa-split-panel');
  const select = container.querySelector('wa-select');

-  select.addEventListener('change', () => (splitPanel.primary = select.value));
+  select.addEventlistener('change', () => (splitPanel.primary = select.value));
 </script>
 ```

--- a/docs/docs/components/tree.md
+++ b/docs/docs/components/tree.md
@@ -88,7 +88,7 @@ The `selection` attribute lets you change the selection behavior of the tree.
  const selectionMode = document.querySelector('#selection-mode');
  const tree = document.querySelector('.tree-selectable');

-  selectionMode.addEventListener('change', () => {
+  selectionMode.addEventlistener('change', () => {
    tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
    tree.selection = selectionMode.value;
  });
--- a/docs/docs/customizing.md
+++ b/docs/docs/customizing.md
@@ -16,21 +16,21 @@ To use a theme, simply add a link to the theme's stylesheet to the `<head>` of y
 <link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
 ```

-You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
+You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to violet in light mode:

 ```css
 :where(:root),
 :host,
 .wa-light,
 .wa-dark .wa-invert {
-  --wa-color-brand-fill-quiet: var(--wa-color-purple-95);
-  --wa-color-brand-fill-normal: var(--wa-color-purple-90);
-  --wa-color-brand-fill-loud: var(--wa-color-purple-50);
-  --wa-color-brand-border-quiet: var(--wa-color-purple-90);
-  --wa-color-brand-border-normal: var(--wa-color-purple-80);
-  --wa-color-brand-border-loud: var(--wa-color-purple-60);
-  --wa-color-brand-on-quiet: var(--wa-color-purple-40);
-  --wa-color-brand-on-normal: var(--wa-color-purple-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-violet-95);
+  --wa-color-brand-fill-normal: var(--wa-color-violet-90);
+  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
+  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
+  --wa-color-brand-border-normal: var(--wa-color-violet-80);
+  --wa-color-brand-border-loud: var(--wa-color-violet-60);
+  --wa-color-brand-on-quiet: var(--wa-color-violet-40);
+  --wa-color-brand-on-normal: var(--wa-color-violet-30);
  --wa-color-brand-on-loud: white;
 }
 ```
@@ -99,8 +99,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr

 <style>
  .gradient-button::part(base) {
-    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
-    border: solid 1px var(--wa-color-purple-50);
+    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-violet-50), var(--wa-color-red-50));
+    border: solid 1px var(--wa-color-violet-50);
    transition: transform 100ms, box-shadow 100ms;
  }

--- a/docs/docs/experimental/ssr.md
+++ b/docs/docs/experimental/ssr.md
@@ -65,6 +65,35 @@ All Web Awesome components that get rendered for SSR will receive the `did-ssr`

 This can help if you need some styling prior to the element connecting.

+### The `ssr-slots` Attribute
+
+When using certain slots in a component rendered through SSR, you may need to use the `ssr-slots` attribute
+to declare which slots have content.
+
+E.g. when using a `<wa-card>` component without SSR, you can do this:
+
+```html
+<wa-card>
+  <img src="cat.jpg" slot="image">
+  <header slot=header>Card Header</header>
+  Card body
+  <footer slot=footer>Card Footer</footer>
+</wa-card>
+```
+
+However, when server-side rendering the very same card, you need to duplicate the information about what is in the slots in the `ssr-slots` attribute:
+
+```html
+<wa-card ssr-slots="image header footer">
+  <img src="cat.jpg" slot="image">
+  <header slot=header>Card Header</header>
+  Card body
+  <footer slot=footer>Card Footer</footer>
+</wa-card>
+```
+
+We are hoping to eventually be able to remove this requirement.
+
 ### Timing Issues

 Before setting any properties on your frontend, it is important to first wait for the element to be defined and then wait for its first update to complete.
@@ -116,4 +145,4 @@ Here are some known issues and things we're still working on.
 - `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
 - `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we don't want to increase pain for SSR users.
 - `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
+- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -576,10 +576,10 @@ hasOutline: false
      <wa-radio value="yellow"><span style="background-color:var(--wa-color-yellow-60);"></span></wa-radio>
      <wa-radio value="lime"><span style="background-color:var(--wa-color-lime-60);"></span></wa-radio>
      <wa-radio value="green"><span style="background-color:var(--wa-color-green-60);"></span></wa-radio>
-      <wa-radio value="cyan"><span style="background-color:var(--wa-color-cyan-60);"></span></wa-radio>
+      <wa-radio value="teal"><span style="background-color:var(--wa-color-teal-60);"></span></wa-radio>
      <wa-radio value="blue"><span style="background-color:var(--wa-color-blue-60);"></span></wa-radio>
      <wa-radio value="indigo"><span style="background-color:var(--wa-color-indigo-60);"></span></wa-radio>
-      <wa-radio value="purple"><span style="background-color:var(--wa-color-purple-60);"></span></wa-radio>
+      <wa-radio value="violet"><span style="background-color:var(--wa-color-violet-60);"></span></wa-radio>
      <wa-radio value="gray"><span style="background-color:var(--wa-color-gray-60);"></span></wa-radio>
    </wa-radio-group>
  </wa-details>
@@ -803,7 +803,7 @@ hasOutline: false
  const queue = [];
  let inputTimeout;

-  variantInput.addEventListener('change', () => {
+  variantInput.addEventlistener('change', () => {
    iconList.dataset.variant = variantInput.value;
  });

@@ -1084,10 +1084,10 @@ hasOutline: false
    el.classList.add(`wa-theme-${theme}-${colorMode}`);
  }

-  colorModeSelect.addEventListener('change', setColorMode);
+  colorModeSelect.addEventlistener('change', setColorMode);

  // Theme Switcher
-  themeSelect.addEventListener('change', event => {
+  themeSelect.addEventlistener('change', event => {
    const theme = event.target.value
    const newStylesheet = Object.assign(document.createElement("link"), {
      // This media: "print" allows us to lazy load the stylesheet then hot swap it on load.
@@ -1132,14 +1132,14 @@ hasOutline: false
  });

  // Color Palette
-  colorSelect.addEventListener('change', event => {
+  colorSelect.addEventlistener('change', event => {
    const colorPalette = event.target.value;

    colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
  });

  // Brand Color
-  brandColor.addEventListener('change', event => {
+  brandColor.addEventlistener('change', event => {
    const documentStyles = document.documentElement.style
    documentStyles.setProperty('--wa-color-primary-95', `var(--wa-color-${event.target.value}-95)`);
    documentStyles.setProperty('--wa-color-primary-90', `var(--wa-color-${event.target.value}-90)`);
@@ -1223,7 +1223,7 @@ hasOutline: false
  })

  // Pre-generated logos
-  logoSelector.addEventListener('change', event => {
+  logoSelector.addEventlistener('change', event => {
    const value = event.currentTarget.value

    const projectLogo = previewContainer.querySelector("#project-logo");
@@ -1279,7 +1279,7 @@ hasOutline: false
    })
  }

-  themeSelect.addEventListener('change', setLogoIcons);
+  themeSelect.addEventlistener('change', setLogoIcons);

  // Project Name
  container.querySelector('[name="project-name"]').addEventListener('input', event => {
@@ -1293,7 +1293,7 @@ hasOutline: false
  });

  // Heading text
-  fontFamilyHeading.addEventListener('change', event => {
+  fontFamilyHeading.addEventlistener('change', event => {
    let fontFamily;
    switch (event.target.value) {
      case 'assistant':
@@ -1351,7 +1351,7 @@ hasOutline: false
  })

  // Body text
-  fontFamilyBody.addEventListener('change', event => {
+  fontFamilyBody.addEventlistener('change', event => {
    let fontFamily;
    switch (event.target.value) {
      case 'assistant':
@@ -1580,7 +1580,7 @@ hasOutline: false
  }

  // Swaps icons to the preferred set for the selected theme
-  themeSelect.addEventListener('change', event => {
+  themeSelect.addEventlistener('change', event => {
    setPreferredIcons();
    showIconStyleOptions();
    syncLogoIcon();
@@ -1599,13 +1599,13 @@ hasOutline: false
  });

  // Changes available Icon Styles and swaps icons based on the selected Icon Family
-  iconFamily.addEventListener('change', event => {
+  iconFamily.addEventlistener('change', event => {
    useFaIcons();
    showIconStyleOptions();
  });

  // Swaps icons based on the selected Icon Style
-  iconStyle.addEventListener('change', useFaIcons);
+  iconStyle.addEventlistener('change', useFaIcons);


  // Corners
--- a/docs/docs/native/radio.md
+++ b/docs/docs/native/radio.md
@@ -9,11 +9,19 @@ elements:
 file: styles/native/radio.css
 ---

+<style>
+	label {
+		display: inline-block;
+	}
+
+	label + label {
+		margin-inline-start: var(--wa-space);
+	}
+</style>
+
 ```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-</div>
+<label><input type="radio" name="radio" value="1"> Option 1</label>
+<label><input type="radio" name="radio" value="2"> Option 2</label>
 ```

 ## Examples
@@ -23,11 +31,9 @@ file: styles/native/radio.css
 To set the initial value and checked state, use the `checked` attribute on the corresponding radio.

 ```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
-</div>
+<label><input type="radio" name="radio" value="1"> Option 1</label>
+<label><input type="radio" name="radio" value="2"> Option 2</label>
+<label><input type="radio" name="radio" value="3" checked> Option 3</label>
 ```

 ### Disabled
@@ -35,11 +41,9 @@ To set the initial value and checked state, use the `checked` attribute on the c
 Use the `disabled` attribute to disable a radio.

 ```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2" disabled> Option 2</label>
-  <label><input type="radio" name="radio" value="3"> Option 3</label>
-</div>
+<label><input type="radio" name="radio" value="1"> Option 1</label>
+<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
+<label><input type="radio" name="radio" value="3"> Option 3</label>
 ```

 ### Sizes
@@ -47,47 +51,27 @@ Use the `disabled` attribute to disable a radio.
 Use the [size utilities](/docs/utilities/size) to change the radios' size.

 ```html {.example}
-<fieldset class="wa-size-s wa-cluster">
-  <legend>Small</legend>
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3"> Option 3</label>
+<fieldset class="wa-size-s">
+	 <legend>Small</legend>
+	<label><input type="radio" name="radio" value="1"> Option 1</label>
+	<label><input type="radio" name="radio" value="2"> Option 2</label>
+	<label><input type="radio" name="radio" value="3"> Option 3</label>
 </fieldset>

 <br />
-<fieldset class="wa-size-m wa-cluster">
-  <legend>Medium</legend>
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3"> Option 3</label>
+<fieldset class="wa-size-m">
+	 <legend>Medium</legend>
+	<label><input type="radio" name="radio" value="1"> Option 1</label>
+	<label><input type="radio" name="radio" value="2"> Option 2</label>
+	<label><input type="radio" name="radio" value="3"> Option 3</label>
 </fieldset>

 <br />

-<fieldset class="wa-size-l wa-cluster">
-	  <legend>Large</legend>
-    <label><input type="radio" name="radio" value="1"> Option 1</label>
-    <label><input type="radio" name="radio" value="2"> Option 2</label>
-    <label><input type="radio" name="radio" value="3"> Option 3</label>
+<fieldset class="wa-size-l">
+	 <legend>Large</legend>
+	<label><input type="radio" name="radio" value="1"> Option 1</label>
+	<label><input type="radio" name="radio" value="2"> Option 2</label>
+	<label><input type="radio" name="radio" value="3"> Option 3</label>
 </fieldset>
 ```
-
-### Orientation
-
-You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy.
-
-```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
-</div>
-```
-
-```html {.example}
-<div class="wa-stack">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
-</div>
-```
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,14 +12,6 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::

-## Next
-
- Added an orientation example to the native radio docs
- Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
- Fixed a number of broken event listeners throughout the docs
- Fixed a bug in `<wa-card>` that prevented slots from showing automatically without `with-` attributes
- Fixed a bug in `<wa-select>` that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
-
 ## 3.0.0-alpha.10

 - 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
--- a/docs/docs/tokens/color.md
+++ b/docs/docs/tokens/color.md
@@ -66,7 +66,7 @@ You can use these numbers to ensure accessible color contrast per [WCAG 2.1 succ

 Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.

-{% for hue in hues -%}
+{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
 <div class="color-name">{{ hue | capitalize }}</div>
 <ul class="color-group">
  {% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -21,7 +21,7 @@
 }

 .image,
-:host(:not([with-image])) .header {
+:host(:not([ssr-slots~='image'])) .header {
  border-start-start-radius: var(--inner-border-radius);
  border-start-end-radius: var(--inner-border-radius);
 }
@@ -56,8 +56,8 @@
  padding: var(--spacing);
 }

-:host(:not([with-header])) .header,
-:host(:not([with-footer])) .footer,
-:host(:not([with-image])) .image {
+:host(:not([ssr-slots~='header'])) .header,
+:host(:not([ssr-slots~='footer'])) .footer,
+:host(:not([ssr-slots~='image'])) .image {
  display: none;
 }
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
+import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './card.css';
@@ -29,33 +29,32 @@ import styles from './card.css';
 export default class WaCard extends WebAwesomeElement {
  static shadowStyle = [sizeStyles, 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';

-  /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
-  @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
-
-  /** Renders the card with an image. Only needed for SSR, otherwise is automatically added. */
-  @property({ attribute: 'with-image', type: Boolean, reflect: true }) withImage = false;
-
-  /** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
-  @property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
-
-  updated() {
-    // Enable the respective slots when detected
-    if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
-    if (!this.withImage && this.hasSlotController.test('image')) this.withImage = true;
-    if (!this.withFooter && this.hasSlotController.test('footer')) this.withFooter = true;
-  }
+  static SSR_SLOTS = ['image', 'header', 'footer'];

  render() {
    return html`
-      <slot name="image" part="image" class="image"></slot>
-      <slot name="header" part="header" class="header"></slot>
+      <slot
+        name="image"
+        part="image"
+        class="${classMap({ image: true, 'has-slotted': this.hasSlotted.has('image') })}"
+        @slotchange=${this.slotUpdate}
+      ></slot>
+      <slot
+        name="header"
+        part="header"
+        class="${classMap({ header: true, 'has-slotted': this.hasSlotted.has('header') })}"
+        @slotchange=${this.slotUpdate}
+      ></slot>
      <slot part="body" class="body"></slot>
-      <slot name="footer" part="footer" class="footer"></slot>
+      <slot
+        name="footer"
+        part="footer"
+        class="${classMap({ footer: true, 'has-slotted': this.hasSlotted.has('footer') })}"
+        @slotchange=${this.slotUpdate}
+      ></slot>
    `;
  }
 }
--- a/src/components/select/select.css
+++ b/src/components/select/select.css
@@ -72,7 +72,7 @@
  }

  &::placeholder {
-    color: var(--wa-form-control-placeholder-color);
+    color: var(--wa-form-controls-placeholder-color);
  }
 }

--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -68,6 +68,7 @@ import styles from './select.css';
 * @csspart listbox - The listbox container where options are slotted.
 * @csspart tags - The container that houses option tags when `multiselect` is used.
 * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
 * @csspart tag__content - The tag's content part.
 * @csspart tag__remove-button - The tag's remove button.
 * @csspart tag__remove-button__base - The tag's remove button base part.
@@ -660,18 +661,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
        </div>`;
      } else if (index === this.maxOptionsVisible) {
        // Hit tag limit
-        return html`
-          <wa-tag
-            part="tag"
-            exportparts="
-              base:tag__base,
-              content:tag__content,
-              remove-button:tag__remove-button,
-              remove-button__base:tag__remove-button__base
-            "
-            >+${this.selectedOptions.length - index}</wa-tag
-          >
-        `;
+        return html`<wa-tag>+${this.selectedOptions.length - index}</wa-tag>`;
      }
      return html``;
    });
--- a/src/internal/converters.ts
+++ b/src/internal/converters.ts
@@ -0,0 +1,18 @@
+import type { ComplexAttributeConverter } from 'lit';
+
+export const setConverter: ComplexAttributeConverter<Set<string> | null, Set<string> | null> = {
+  fromAttribute(value): Set<string> | null {
+    if (value === null) {
+      return null;
+    }
+
+    return new Set(value.split(/\s+/));
+  },
+  toAttribute: value => {
+    if (value === null) {
+      return null;
+    }
+
+    return [...(value as Set<string>)].join(' ');
+  },
+};
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -2,6 +2,7 @@ import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } f
 import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import componentStyles from '../styles/shadow/component.css';
+import { setConverter } from './converters.js';

 // Augment Lit's module
 declare module 'lit' {
@@ -40,6 +41,20 @@ export default class WebAwesomeElement extends LitElement {
  @property() dir: string;
  @property() lang: string;

+  @property({
+    reflect: true,
+    attribute: 'ssr-slots',
+    converter: setConverter,
+  })
+  ssrSlots: Set<string> | null = null;
+
+  /**
+   * All slots whose slotted status we need to know on the root for SSR.
+   * Subclasses are expected to override this with their own list of slots.
+   */
+  static SSR_SLOTS: string[] = [];
+  protected hasSlotted = new Set();
+
  /**
   * One or more styles for the element’s own shadow DOM.
   * Shared component styles will automatically be added.
@@ -72,6 +87,13 @@ export default class WebAwesomeElement extends LitElement {

  internals: ElementInternals;

+  connectedCallback(): void {
+    super.connectedCallback();
+
+    let Self = this.constructor as typeof WebAwesomeElement;
+    this.ssrSlots = new Set(Self.SSR_SLOTS.filter(name => this.slotUpdate(name)));
+  }
+
  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
    if (!this.#hasRecordedInitialProperties) {
      (this.constructor as typeof WebAwesomeElement).elementProperties.forEach(
@@ -169,6 +191,44 @@ export default class WebAwesomeElement extends LitElement {
    return this.hasStatesSupport() ? this.internals.states.has(state) : false;
  }

+  protected async slotUpdate(target: Event | HTMLSlotElement | string) {
+    await this.updateComplete;
+
+    let slot = target;
+
+    if (target instanceof Event) {
+      slot = target.target as HTMLSlotElement;
+    } else if (typeof target === 'string') {
+      slot = this.shadowRoot!.querySelector(`slot[name="${target}"]`) as HTMLSlotElement;
+    } else {
+      slot = slot as HTMLSlotElement;
+    }
+
+    if (!slot) {
+      return;
+    }
+
+    const slotName = slot.name;
+    const hasSlotted = slot.assignedNodes().length > 0;
+
+    let previousHasSlotted = this.hasSlotted.has(slotName);
+
+    if (previousHasSlotted === hasSlotted) {
+      let ssrSlots = new Set(this.ssrSlots);
+
+      if (hasSlotted) {
+        ssrSlots.add(slotName);
+      } else {
+        ssrSlots.delete(slotName);
+      }
+
+      this.ssrSlots = ssrSlots;
+    }
+
+    slot.classList.toggle('has-slotted', hasSlotted);
+    return hasSlotted;
+  }
+
  getComputed(prop: PropertyKey) {
    let value = this[prop as keyof this];
    if (value !== 'inherit') {
--- a/src/styles/brand/blue.css
+++ b/src/styles/brand/blue.css
@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-blue-95);
-  --wa-color-brand-90: var(--wa-color-blue-90);
-  --wa-color-brand-80: var(--wa-color-blue-80);
-  --wa-color-brand-70: var(--wa-color-blue-70);
-  --wa-color-brand-60: var(--wa-color-blue-60);
-  --wa-color-brand-50: var(--wa-color-blue-50);
-  --wa-color-brand-40: var(--wa-color-blue-40);
-  --wa-color-brand-30: var(--wa-color-blue-30);
-  --wa-color-brand-20: var(--wa-color-blue-20);
-  --wa-color-brand-10: var(--wa-color-blue-10);
-  --wa-color-brand-05: var(--wa-color-blue-05);
-  --wa-color-brand: var(--wa-color-blue);
-}
--- a/src/styles/brand/cyan.css
+++ b/src/styles/brand/cyan.css
@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-cyan-95);
-  --wa-color-brand-90: var(--wa-color-cyan-90);
-  --wa-color-brand-80: var(--wa-color-cyan-80);
-  --wa-color-brand-70: var(--wa-color-cyan-70);
-  --wa-color-brand-60: var(--wa-color-cyan-60);
-  --wa-color-brand-50: var(--wa-color-cyan-50);
-  --wa-color-brand-40: var(--wa-color-cyan-40);
-  --wa-color-brand-30: var(--wa-color-cyan-30);
-  --wa-color-brand-20: var(--wa-color-cyan-20);
-  --wa-color-brand-10: var(--wa-color-cyan-10);
-  --wa-color-brand-05: var(--wa-color-cyan-05);
-  --wa-color-brand: var(--wa-color-cyan);
-}
--- a/src/styles/brand/green.css
+++ b/src/styles/brand/green.css
@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-green-95);
-  --wa-color-brand-90: var(--wa-color-green-90);
-  --wa-color-brand-80: var(--wa-color-green-80);
-  --wa-color-brand-70: var(--wa-color-green-70);
-  --wa-color-brand-60: var(--wa-color-green-60);
-  --wa-color-brand-50: var(--wa-color-green-50);
-  --wa-color-brand-40: var(--wa-color-green-40);
-  --wa-color-brand-30: var(--wa-color-green-30);
-  --wa-color-brand-20: var(--wa-color-green-20);
-  --wa-color-brand-10: var(--wa-color-green-10);
-  --wa-color-brand-05: var(--wa-color-green-05);
-  --wa-color-brand: var(--wa-color-green);
-}
--- a/src/styles/brand/indigo.css
+++ b/src/styles/brand/indigo.css
@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-indigo-95);
-  --wa-color-brand-90: var(--wa-color-indigo-90);
-  --wa-color-brand-80: var(--wa-color-indigo-80);
-  --wa-color-brand-70: var(--wa-color-indigo-70);
-  --wa-color-brand-60: var(--wa-color-indigo-60);
-  --wa-color-brand-50: var(--wa-color-indigo-50);
-  --wa-color-brand-40: var(--wa-color-indigo-40);
-  --wa-color-brand-30: var(--wa-color-indigo-30);
-  --wa-color-brand-20: var(--wa-color-indigo-20);
-  --wa-color-brand-10: var(--wa-color-indigo-10);
-  --wa-color-brand-05: var(--wa-color-indigo-05);
-  --wa-color-brand: var(--wa-color-indigo);
-}
--- a/src/styles/brand/purple.css
+++ b/src/styles/brand/purple.css
@@ -1,17 +0,0 @@
-:where(:root),
-:host,
-:where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
-  --wa-color-brand-95: var(--wa-color-purple-95);
-  --wa-color-brand-90: var(--wa-color-purple-90);
-  --wa-color-brand-80: var(--wa-color-purple-80);
-  --wa-color-brand-70: var(--wa-color-purple-70);
-  --wa-color-brand-60: var(--wa-color-purple-60);
-  --wa-color-brand-50: var(--wa-color-purple-50);
-  --wa-color-brand-40: var(--wa-color-purple-40);
-  --wa-color-brand-30: var(--wa-color-purple-30);
-  --wa-color-brand-20: var(--wa-color-purple-20);
-  --wa-color-brand-10: var(--wa-color-purple-10);
-  --wa-color-brand-05: var(--wa-color-purple-05);
-  --wa-color-brand: var(--wa-color-purple);
-}
--- a/src/styles/color/anodized.css
+++ b/src/styles/color/anodized.css
@@ -41,18 +41,18 @@
  --wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
  --wa-color-green: var(--wa-color-green-60);

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

  --wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
  --wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
  --wa-color-indigo: var(--wa-color-indigo-50);

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

  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
  --wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
--- a/src/styles/color/bright.css
+++ b/src/styles/color/bright.css
@@ -28,31 +28,31 @@
  --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
  --wa-color-yellow: var(--wa-color-yellow-60);

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

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

  --wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
  --wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
  --wa-color-indigo: var(--wa-color-indigo-50);

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

  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
  --wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
--- a/src/styles/color/classic.css
+++ b/src/styles/color/classic.css
@@ -41,18 +41,18 @@
  --wa-color-green-05: #02140a /* oklch(17.084% 0.03423 159.06) */;
  --wa-color-green: var(--wa-color-green-60);

-  --wa-color-cyan-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
-  --wa-color-cyan-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
-  --wa-color-cyan-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
-  --wa-color-cyan-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
-  --wa-color-cyan-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
-  --wa-color-cyan-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
-  --wa-color-cyan-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
-  --wa-color-cyan-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
-  --wa-color-cyan-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
-  --wa-color-cyan-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
-  --wa-color-cyan-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
-  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-teal-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
+  --wa-color-teal-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
+  --wa-color-teal-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
+  --wa-color-teal-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
+  --wa-color-teal-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
+  --wa-color-teal-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
+  --wa-color-teal-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
+  --wa-color-teal-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
+  --wa-color-teal-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
+  --wa-color-teal-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
+  --wa-color-teal-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
+  --wa-color-teal: var(--wa-color-teal-70);

  --wa-color-blue-95: #e5f4fe /* oklch(95.896% 0.02085 236.75) */;
  --wa-color-blue-90: #c8ebfd /* oklch(92.061% 0.04406 230.21) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #0f0e26 /* oklch(18.064% 0.04799 282.35) */;
  --wa-color-indigo: var(--wa-color-indigo-40);

-  --wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
-  --wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
-  --wa-color-purple-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
-  --wa-color-purple-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
-  --wa-color-purple-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
-  --wa-color-purple-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
-  --wa-color-purple-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
-  --wa-color-purple-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
-  --wa-color-purple-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
-  --wa-color-purple-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
-  --wa-color-purple-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
+  --wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
+  --wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
+  --wa-color-violet-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
+  --wa-color-violet-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
+  --wa-color-violet-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
+  --wa-color-violet-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
+  --wa-color-violet-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
+  --wa-color-violet-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
+  --wa-color-violet-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
+  --wa-color-violet-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
+  --wa-color-violet: var(--wa-color-violet-50);

  --wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
  --wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
--- a/src/styles/color/default.css
+++ b/src/styles/color/default.css
@@ -41,18 +41,18 @@
  --wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
  --wa-color-green: var(--wa-color-green-60);

-  --wa-color-cyan-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
-  --wa-color-cyan-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
-  --wa-color-cyan-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
-  --wa-color-cyan-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
-  --wa-color-cyan-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
-  --wa-color-cyan-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
-  --wa-color-cyan-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
-  --wa-color-cyan-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
-  --wa-color-cyan-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
-  --wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
-  --wa-color-cyan-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
-  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-teal-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
+  --wa-color-teal-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
+  --wa-color-teal-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
+  --wa-color-teal-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
+  --wa-color-teal-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
+  --wa-color-teal-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
+  --wa-color-teal-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
+  --wa-color-teal-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
+  --wa-color-teal-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
+  --wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
+  --wa-color-teal-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
+  --wa-color-teal: var(--wa-color-teal-70);

  --wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
  --wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
  --wa-color-indigo: var(--wa-color-indigo-40);

-  --wa-color-purple-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
-  --wa-color-purple-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
-  --wa-color-purple-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
-  --wa-color-purple-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
-  --wa-color-purple-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
-  --wa-color-purple-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
-  --wa-color-purple-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
-  --wa-color-purple-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
-  --wa-color-purple-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
-  --wa-color-purple-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
-  --wa-color-purple-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-violet-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
+  --wa-color-violet-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
+  --wa-color-violet-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
+  --wa-color-violet-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
+  --wa-color-violet-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
+  --wa-color-violet-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
+  --wa-color-violet-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
+  --wa-color-violet-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
+  --wa-color-violet-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
+  --wa-color-violet-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
+  --wa-color-violet-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
+  --wa-color-violet: var(--wa-color-violet-50);

  --wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
  --wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
--- a/src/styles/color/elegant.css
+++ b/src/styles/color/elegant.css
@@ -41,18 +41,18 @@
  --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
  --wa-color-green: var(--wa-color-green-40);

-  --wa-color-cyan-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
-  --wa-color-cyan-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
-  --wa-color-cyan-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
-  --wa-color-cyan-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
-  --wa-color-cyan-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
-  --wa-color-cyan-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
-  --wa-color-cyan-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
-  --wa-color-cyan-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
-  --wa-color-cyan-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
-  --wa-color-cyan-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
-  --wa-color-cyan-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
-  --wa-color-cyan: var(--wa-color-cyan-50);
+  --wa-color-teal-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
+  --wa-color-teal-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
+  --wa-color-teal-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
+  --wa-color-teal-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
+  --wa-color-teal-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
+  --wa-color-teal-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
+  --wa-color-teal-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
+  --wa-color-teal-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
+  --wa-color-teal-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
+  --wa-color-teal-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
+  --wa-color-teal-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
+  --wa-color-teal: var(--wa-color-teal-50);

  --wa-color-blue-95: #ebf3fa /* oklch(96.015% 0.01271 244.25) */;
  --wa-color-blue-90: #d8e8f5 /* oklch(92.295% 0.02463 242.35) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #0d0e27 /* oklch(17.951% 0.0503 278.32) */;
  --wa-color-indigo: var(--wa-color-indigo-40);

-  --wa-color-purple-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
-  --wa-color-purple-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
-  --wa-color-purple-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
-  --wa-color-purple-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
-  --wa-color-purple-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
-  --wa-color-purple-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
-  --wa-color-purple-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
-  --wa-color-purple-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
-  --wa-color-purple-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
-  --wa-color-purple-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
-  --wa-color-purple-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
-  --wa-color-purple: var(--wa-color-purple-40);
+  --wa-color-violet-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
+  --wa-color-violet-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
+  --wa-color-violet-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
+  --wa-color-violet-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
+  --wa-color-violet-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
+  --wa-color-violet-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
+  --wa-color-violet-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
+  --wa-color-violet-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
+  --wa-color-violet-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
+  --wa-color-violet-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
+  --wa-color-violet-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
+  --wa-color-violet: var(--wa-color-violet-40);

  --wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
  --wa-color-gray-90: #e6e5e8 /* oklch(92.354% 0.00415 301.42) */;
--- a/src/styles/color/mild.css
+++ b/src/styles/color/mild.css
@@ -41,18 +41,18 @@
  --wa-color-green-05: #001701 /* oklch(17.759% 0.05792 143.81) */;
  --wa-color-green: var(--wa-color-green-80);

-  --wa-color-cyan-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
-  --wa-color-cyan-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
-  --wa-color-cyan-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
-  --wa-color-cyan-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
-  --wa-color-cyan-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
-  --wa-color-cyan-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
-  --wa-color-cyan-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
-  --wa-color-cyan-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
-  --wa-color-cyan-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
-  --wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
-  --wa-color-cyan-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
-  --wa-color-cyan: var(--wa-color-cyan-40);
+  --wa-color-teal-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
+  --wa-color-teal-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
+  --wa-color-teal-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
+  --wa-color-teal-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
+  --wa-color-teal-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
+  --wa-color-teal-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
+  --wa-color-teal-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
+  --wa-color-teal-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
+  --wa-color-teal-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
+  --wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
+  --wa-color-teal-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
+  --wa-color-teal: var(--wa-color-teal-40);

  --wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
  --wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #180044 /* oklch(19.806% 0.11332 288.23) */;
  --wa-color-indigo: var(--wa-color-indigo-40);

-  --wa-color-purple-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
-  --wa-color-purple-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
-  --wa-color-purple-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
-  --wa-color-purple-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
-  --wa-color-purple-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
-  --wa-color-purple-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
-  --wa-color-purple-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
-  --wa-color-purple-30: #5d366c /* oklch(40.395% 0.09808 316) */;
-  --wa-color-purple-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
-  --wa-color-purple-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
-  --wa-color-purple-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
-  --wa-color-purple: var(--wa-color-purple-40);
+  --wa-color-violet-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
+  --wa-color-violet-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
+  --wa-color-violet-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
+  --wa-color-violet-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
+  --wa-color-violet-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
+  --wa-color-violet-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
+  --wa-color-violet-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
+  --wa-color-violet-30: #5d366c /* oklch(40.395% 0.09808 316) */;
+  --wa-color-violet-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
+  --wa-color-violet-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
+  --wa-color-violet-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
+  --wa-color-violet: var(--wa-color-violet-40);

  --wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
  --wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
--- a/src/styles/color/natural.css
+++ b/src/styles/color/natural.css
@@ -41,18 +41,18 @@
  --wa-color-green-05: #051509 /* oklch(17.675% 0.03381 151.11) */;
  --wa-color-green: var(--wa-color-green-50);

-  --wa-color-cyan-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
-  --wa-color-cyan-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
-  --wa-color-cyan-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
-  --wa-color-cyan-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
-  --wa-color-cyan-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
-  --wa-color-cyan-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
-  --wa-color-cyan-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
-  --wa-color-cyan-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
-  --wa-color-cyan-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
-  --wa-color-cyan-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
-  --wa-color-cyan-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
-  --wa-color-cyan: var(--wa-color-cyan-40);
+  --wa-color-teal-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
+  --wa-color-teal-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
+  --wa-color-teal-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
+  --wa-color-teal-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
+  --wa-color-teal-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
+  --wa-color-teal-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
+  --wa-color-teal-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
+  --wa-color-teal-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
+  --wa-color-teal-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
+  --wa-color-teal-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
+  --wa-color-teal-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
+  --wa-color-teal: var(--wa-color-teal-40);

  --wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
  --wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #121021 /* oklch(18.511% 0.03422 287.97) */;
  --wa-color-indigo: var(--wa-color-indigo-50);

-  --wa-color-purple-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
-  --wa-color-purple-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
-  --wa-color-purple-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
-  --wa-color-purple-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
-  --wa-color-purple-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
-  --wa-color-purple-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
-  --wa-color-purple-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
-  --wa-color-purple-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
-  --wa-color-purple-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
-  --wa-color-purple-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
-  --wa-color-purple-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
-  --wa-color-purple: var(--wa-color-purple-40);
+  --wa-color-violet-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
+  --wa-color-violet-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
+  --wa-color-violet-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
+  --wa-color-violet-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
+  --wa-color-violet-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
+  --wa-color-violet-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
+  --wa-color-violet-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
+  --wa-color-violet-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
+  --wa-color-violet-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
+  --wa-color-violet-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
+  --wa-color-violet-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
+  --wa-color-violet: var(--wa-color-violet-40);

  --wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
  --wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;
--- a/src/styles/color/rudimentary.css
+++ b/src/styles/color/rudimentary.css
@@ -41,18 +41,18 @@
  --wa-color-green-05: #001607 /* oklch(17.557% 0.04482 153.41) */;
  --wa-color-green: var(--wa-color-green-70);

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

  --wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
  --wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #160046 /* oklch(19.835% 0.11578 285.15) */;
  --wa-color-indigo: var(--wa-color-indigo-40);

-  --wa-color-purple-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
-  --wa-color-purple-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
-  --wa-color-purple-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
-  --wa-color-purple-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
-  --wa-color-purple-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
-  --wa-color-purple-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
-  --wa-color-purple-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
-  --wa-color-purple-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
-  --wa-color-purple-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
-  --wa-color-purple-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
-  --wa-color-purple-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-violet-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
+  --wa-color-violet-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
+  --wa-color-violet-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
+  --wa-color-violet-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
+  --wa-color-violet-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
+  --wa-color-violet-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
+  --wa-color-violet-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
+  --wa-color-violet-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
+  --wa-color-violet-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
+  --wa-color-violet-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
+  --wa-color-violet-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
+  --wa-color-violet: var(--wa-color-violet-50);

  --wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
  --wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
--- a/src/styles/color/tintless.js
+++ b/src/styles/color/tintless.js
@@ -133,10 +133,13 @@ function hueToChalk(hue) {
    ret = chalk[hue];
  }
  switch (hue) {
+    case 'teal':
+      ret = chalk.cyan;
+      break;
    case 'indigo':
      ret = chalk.hex('#8a8beb');
      break;
-    case 'purple':
+    case 'violet':
      ret = chalk.hex('#a94dc6');
      break;
  }
--- a/src/styles/color/vogue.css
+++ b/src/styles/color/vogue.css
@@ -41,18 +41,18 @@
  --wa-color-green-05: #02160a /* oklch(17.815% 0.03799 156.47) */;
  --wa-color-green: var(--wa-color-green-70);

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

  --wa-color-blue-95: #ebf3ff /* oklch(96.164% 0.01825 258.35) */;
  --wa-color-blue-90: #d6e7fe /* oklch(92.238% 0.03631 255.96) */;
@@ -80,18 +80,18 @@
  --wa-color-indigo-05: #100f29 /* oklch(18.672% 0.05145 281.93) */;
  --wa-color-indigo: var(--wa-color-indigo-40);

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

  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
  --wa-color-gray-90: #e3e5e9 /* oklch(92.152% 0.00582 264.53) */;
--- a/src/styles/themes/active/color.css
+++ b/src/styles/themes/active/color.css
@@ -1,6 +1,5 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
-@import url('../../brand/green.css');

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

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

@@ -24,14 +23,14 @@
  /**
   * 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-80);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-70);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-green-95);
+  --wa-color-brand-fill-normal: var(--wa-color-green-90);
+  --wa-color-brand-fill-loud: var(--wa-color-green-80);
+  --wa-color-brand-border-quiet: var(--wa-color-green-90);
+  --wa-color-brand-border-normal: var(--wa-color-green-80);
+  --wa-color-brand-border-loud: var(--wa-color-green-70);
+  --wa-color-brand-on-quiet: var(--wa-color-green-40);
+  --wa-color-brand-on-normal: var(--wa-color-green-30);
  --wa-color-brand-on-loud: black;

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

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

  /**
   * 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-80);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-border-normal: var(--wa-color-brand-30);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
-  --wa-color-brand-on-normal: var(--wa-color-brand-90);
+  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
+  --wa-color-brand-fill-normal: var(--wa-color-green-20);
+  --wa-color-brand-fill-loud: var(--wa-color-green-80);
+  --wa-color-brand-border-quiet: var(--wa-color-green-20);
+  --wa-color-brand-border-normal: var(--wa-color-green-30);
+  --wa-color-brand-border-loud: var(--wa-color-green-60);
+  --wa-color-brand-on-quiet: var(--wa-color-green-80);
+  --wa-color-brand-on-normal: var(--wa-color-green-90);
  --wa-color-brand-on-loud: black;

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

 :where(:root),
 :host,
@@ -15,24 +14,24 @@
  /**
   * 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);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-70);
-  --wa-color-brand-border-normal: var(--wa-color-brand-50);
-  --wa-color-brand-border-loud: var(--wa-color-brand-30);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-70);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-70);
+  --wa-color-brand-border-normal: var(--wa-color-blue-50);
+  --wa-color-brand-border-loud: var(--wa-color-blue-30);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-40);
  --wa-color-brand-on-loud: var(--wa-color-text-normal);

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

  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
@@ -75,24 +74,24 @@
  /**
   * 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-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
-  --wa-color-brand-border-normal: var(--wa-color-brand-50);
-  --wa-color-brand-border-loud: var(--wa-color-brand-80);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
-  --wa-color-brand-on-normal: var(--wa-color-brand-80);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-30);
+  --wa-color-brand-border-normal: var(--wa-color-blue-50);
+  --wa-color-brand-border-loud: var(--wa-color-blue-80);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-70);
+  --wa-color-brand-on-normal: var(--wa-color-blue-80);
  --wa-color-brand-on-loud: white;

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

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

 :where(:root),
 :host,
@@ -22,14 +21,14 @@
  /**
   * 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-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
-  --wa-color-brand-border-normal: var(--wa-color-brand-60);
-  --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-80);
+  --wa-color-brand-border-normal: var(--wa-color-blue-60);
+  --wa-color-brand-border-loud: var(--wa-color-blue-40);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-40);
  --wa-color-brand-on-loud: white;

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

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

 :where(:root),
 :host,
@@ -12,14 +11,14 @@
  /**
   * 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-50);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-50);
-  --wa-color-brand-on-normal: var(--wa-color-brand-40);
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
+  --wa-color-brand-border-normal: var(--wa-color-blue-80);
+  --wa-color-brand-border-loud: var(--wa-color-blue-60);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-50);
+  --wa-color-brand-on-normal: var(--wa-color-blue-40);
  --wa-color-brand-on-loud: white;

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

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

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

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

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

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

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

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

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

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

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

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

-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-indigo-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-40);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-90);
-  --wa-color-brand-border-normal: var(--wa-color-brand-80);
-  --wa-color-brand-border-loud: var(--wa-color-brand-60);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
-  --wa-color-brand-on-normal: var(--wa-color-brand-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
  --wa-color-brand-on-loud: white;

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

-  --wa-color-focus: var(--wa-color-brand-60);
+  --wa-color-focus: var(--wa-color-indigo-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-40);
-  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
-  --wa-color-brand-border-normal: var(--wa-color-brand-30);
-  --wa-color-brand-border-loud: var(--wa-color-brand-40);
-  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
-  --wa-color-brand-on-normal: var(--wa-color-brand-70);
+  --wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
+  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
+  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
+  --wa-color-brand-border-loud: var(--wa-color-indigo-40);
+  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
+  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
  --wa-color-brand-on-loud: white;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);