prevent card example from overflowing

* [Tooltip] Specify inherited CSS properties on host, fixes #773

* Remove unused `--show-delay` and `--hide-delay`

.prettierignore

@@ -13,4 +13,4 @@ package-lock.json
 tsconfig.json
 cdn
 _site
-docs/assets/scripts/prism.js
+docs/assets/scripts/prism-downloaded.js

docs/.eleventy.js

@@ -94,7 +94,7 @@ export default function (eleventyConfig) {
   eleventyConfig.addPlugin(highlightCodePlugin());
 
   // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin());
+  eleventyConfig.addPlugin(copyCodePlugin);
 
   // Various text replacements
   eleventyConfig.addPlugin(

docs/_data/hueRanges.js

@@ -0,0 +1 @@
+export { hueRanges as default } from '../assets/scripts/tweak/data.js';

docs/_data/hues.json

@@ -1 +1 @@
-["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "gray"]
+["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]

docs/_data/palettes.js

@@ -1 +1 @@
-export { default as default } from '../../src/styles/color/palettes-analyzed.js';
+export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';

docs/_includes/base.njk

@@ -5,12 +5,12 @@
     <meta name="theme-color" content="#f36944">
 
     <script type="module" src="/assets/scripts/code-examples.js"></script>
-    <script type="module" src="/assets/scripts/copy-code.js"></script>
 
     <script type="module" src="/assets/scripts/scroll.js"></script>
     <script type="module" src="/assets/scripts/turbo.js"></script>
     <script type="module" src="/assets/scripts/search.js"></script>
     <script type="module" src="/assets/scripts/outline.js"></script>
+    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
     <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
 
     {# Docs styles #}

docs/_includes/contrast-table.njk

@@ -1,4 +1,4 @@
-<table class="colors wa-palette-{{ paletteId }}">
+<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
   <thead>
     <tr>
       <th></th>
@@ -12,19 +12,31 @@
     </tr>
   </thead>
 {% for hue in hues -%}
-<tr>
+<tr data-hue="{{ hue }}">
   <th>{{ hue | capitalize }}</th>
   {% for tint_bg in tints -%}
     {% set color_bg = palettes[paletteId][hue][tint_bg] %}
     {% for tint_fg in tints | reverse -%}
       {% set color_fg = palettes[paletteId][hue][tint_fg] %}
       {% if (tint_fg - tint_bg) | abs == difference %}
-      <td>
+      {% set contrast_wcag = '' %}
-        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
+      {% if color_fg and color_bg -%}
-          {% set contrast_wcag = '' %}
+        {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
-          {% if color_fg and color_bg %}
+      {%- endif %}
-            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+      <td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
-          {% endif %}
+      data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}" data-original-contrast="{{ contrast_wcag }}">
+        <div v-content:number="contrast.value"
+        class="color swatch" :class="{
+          'value-up': contrast.value - contrast.original > 0.0001,
+          'value-down': contrast.original - contrast.value > 0.0001,
+          'contrast-fail': contrast.value < {{ minContrast }}
+        }"
+        style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})"
+        :style="{
+          '--color': contrast.bgColor,
+          color: contrast.fgColor,
+        }"
+        >
           {% if contrast_wcag %}
           {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
           {% else %}

docs/_includes/svgs/palette.njk

@@ -1,11 +1,14 @@
 {% set paletteId = palette.fileSlug or page.fileSlug %}
-{% set tints = [80, 60, 40, 20] %}
+{% set suffixes = ['-80', '', '-20'] %}
 {% set width = 20 %}
-{% set height = 13 %}
+{% set height = 12 %}
-{% set gap_x = 3 %}
+{% set height_core = 20 %}
-{% set gap_y = 3 %}
+{% set gap_x = 4 %}
+{% set gap_y = 4 %}
 
-<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
+{% set total_width = (width + gap_x) * hues|length %}
+{% set total_height = (height + gap_y) * suffixes|length + (height_core - height) %}
+<svg viewBox="0 0 {{ total_width }} {{ total_height }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
 <style>
 	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
 	.palette-icon {
@@ -15,10 +18,14 @@
 
 {% for hue in hues -%}
   {% set hueIndex = loop.index0 %}
-  {% for tint in tints -%}
+  {% set y = 0 %}
-    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
+  {% for suffix in suffixes -%}
-	      width="{{ width }}" height="{{ height }}"
+    {% set swatch_height = height if suffix else height_core %}
-	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
+
+    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ y }}"
+	      width="{{ width }}" height="{{ swatch_height }}"
+	      fill="var(--wa-color-{{ hue }}{{ suffix }})" rx="2" />
+	{% set y = y + swatch_height + gap_y %}
   {%- endfor %}
 {% endfor %}
 </svg>

docs/_includes/svgs/theme-color.njk

@@ -1,7 +1,7 @@
 {% set themeId = theme.fileSlug %}
 
-<wa-isolate>
+<div>
-  <template>
+  <template shadowrootmode="open">
     <link rel="stylesheet" href="/dist/styles/utilities.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
@@ -21,4 +21,4 @@
       {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
     </div>
   </template>
-</wa-isolate>
+</div>

docs/_includes/svgs/theme-typography.njk

@@ -1,7 +1,7 @@
 {% set themeId = theme.fileSlug %}
 
-<wa-isolate>
+<div>
-  <template>
+  <template shadowrootmode="open">
     <link rel="stylesheet" href="/dist/styles/native/content.css">
     <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
     <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
@@ -13,4 +13,4 @@
       <p>Body text</p>
     </div>
   </template>
-</wa-isolate>
+</div>

docs/_layouts/palette.njk

@@ -1,17 +1,83 @@
 {% set hasSidebar = true %}
 {% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_layouts/block.njk' %}
-
 {% set paletteId = page.fileSlug %}
-
-{% block afterContent %}
-<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
-
 {% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
 
-<table class="colors wa-palette-{{ paletteId }}">
+{% extends '../_includes/base.njk' %}
+
+{% block head %}
+<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
+<link href="{{ page.url }}../tweak.css" rel="stylesheet">
+<script type="module" src="{{ page.url }}../tweak.js"></script>
+{% endblock %}
+
+{% block header %}
+<div id="palette-app" data-palette-id="{{ paletteId }}">
+  <div
+  :class="{
+    tweaking: tweaking.chroma,
+    'tweaking-chroma': tweaking.chroma,
+    'tweaking-hue': tweaking.chroma,
+    'tweaking-gray-chroma': tweaking.grayChroma,
+    'tweaked-chroma': tweaked?.chroma,
+    'tweaked-hue': tweaked?.hue,
+    'tweaked-any': tweaked
+  }"
+  :style="{
+    '--chroma-scale': chromaScale,
+    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
+    }">
+
+  {% include 'breadcrumbs.njk' %}
+
+  <h1 v-if="saved" class="title">
+    {% raw %}{{ saved.title }}{% endraw %}
+    <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
+    <wa-icon-button class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
+  </h1>
+  <h1 v-if="!saved" class="title">{{ title }}</h1>
+
+  <div class="block-info">
+    <code class="class">.wa-palette-{{ paletteId }}</code>
+    {% include '../_includes/status.njk' %}
+    {% if not isPro %}
+    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
+    {% endif %}
+  </div>
+  {% if description %}
+  <p class="summary">
+    {{ description | inlineMarkdown | safe }}
+  </p>
+  {% endif %}
+{% endblock %}
+
+{% block afterContent %}
+
+{% set maxChroma = 0 %}
+
+<wa-callout size="small" class="tweaked-callout" variant="warning">
+  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
+   This palette has been tweaked.
+   <div class="wa-cluster wa-gap-xs">
+    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
+   </div>
+
+  <wa-button @click="reset()" appearance="outlined" variant="danger">
+    <span slot="prefix" class="icon-modifier">
+      <wa-icon name="circle-xmark" variant="regular"></wa-icon>
+    </span>
+    Reset
+  </wa-button>
+  <wa-button v-if="!saved" @click="save" variant="success">
+    <span slot="prefix" class="icon-modifier">
+      <wa-icon name="sidebar" variant="regular"></wa-icon>
+      <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
+    </span>
+    Save
+  </wa-button>
+</wa-callout>
+
+<table class="colors main wa-palette-{{ paletteId }}">
   <thead>
     <tr>
       <th></th>
@@ -21,18 +87,100 @@
       {%- endfor %}
     </tr>
   </thead>
+{# Initialize to last hue before gray #}
+{%- set hueBefore = hues[hues|length - 2] -%}
 {% for hue in hues -%}
-<tr>
+{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
-  <th>{{ hue | capitalize }}</th>
+{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
-  <td class="core-column">
+{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
-    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
+{% if hue === 'gray' %}
-      {{ palettes[paletteId][hue].maxChromaTint }}
+<tr data-hue="{{ hue }}" class="color-scale"
-      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
-    </div>
+{% else %}
+<tr data-hue="{{ hue }}" class="color-scale"
+    :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
+    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
+{% endif %}
+  <th>
+    {{ hue | capitalize }}
+  </th>
+  <td class="core-column"
+      style="--color: var(--wa-color-{{ hue }})"
+      :style="{
+        '--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
+        '--color-gray-undertone': colors[grayColor][{{coreTint}}],
+        '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
+      }">
+    <wa-dropdown>
+      <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch"
+      style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});"
+      >
+        {{ palettes[paletteId][hue].maxChromaTint }}
+        <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
+      </div>
+      <div class="popup">
+      {% if hue === 'gray' %}
+        <wa-radio-group class="core-color" orientation="horizontal" v-model="grayColor">
+          {% for h in hues -%}
+            {%- if h !== 'gray' -%}
+              <wa-radio-button id="gray-undertone-{{ h }}" value="{{ h }}" label="{{ h | capitalize }}" style="--color: var(--wa-color-{{ h }})"></wa-radio-button>
+              <wa-tooltip for="gray-undertone-{{ h }}" hoist>
+                {{ h | capitalize }}
+              </wa-tooltip>
+            {%- endif -%}
+          {%- endfor -%}
+          <div slot="label">
+            Gray undertone
+          </div>
+        </wa-radio-group>
+        <div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
+          <wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
+          value="0" min="0" :max="maxGrayChroma" step="0.01"
+            @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
+            <div slot="label">
+              Gray colorfulness
+              <wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+            </div>
+          </wa-slider>
+          <div class="label-min">Neutral</div>
+          <div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
+        </div>
+      {% else %}
+      {%- set hueAfter = hues[loop.index0 + 1] -%}
+      {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
+      {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
+      {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
+
+      <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
+        <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
+          min="{{ minShift }}" max="{{ maxShift }}" step="1"
+          @input="tweaking.hue = tweaking.{{hue}} = true"
+          @change="tweaking.hue = tweaking.{{ hue }} = false">
+          <div slot="label">
+            Tweak {{ hue }} hue
+            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+          </div>
+        </wa-slider>
+        <div class="label-min">More {{hueBefore}}</div>
+        <div class="label-max">More {{hueAfter}}</div>
+      </div>
+      {%- set hueBefore = hue -%}
+      {% endif %}
+      <div class="wa-gap-s">
+          <code>--wa-color-{{ hue }}</code>
+          <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+        </div>
+      </div>`
+    </wa-dropdown>
   </td>
   {% for tint in tints -%}
-    <td>
+    {%- set color = palettes[paletteId][hue][tint] -%}
-      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
+        :style="{
+          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
+          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
+        }">
+      <div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
         <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
       </div>
     </td>
@@ -41,6 +189,26 @@
 {%- endfor %}
 </table>
 
+{% set chromaScaleBounds = [
+(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
+(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
+<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
+:class="{ tweaked: chromaScale !== 1 }"
+style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
+  <wa-slider name="chroma-scale" ref="chromaScaleSlider"
+    v-model="chromaScale" value="1" step="0.01"
+    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
+    @input="tweaking.chroma = true"
+    @change="tweaking.chroma = false">
+    <div slot="label">
+      Overall colorfulness
+      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+    </div>
+  </wa-slider>
+  <div class="label-min">More muted</div>
+  <div class="label-max">More vibrant</div>
+</div>
+
 <h2>Used By</h2>
 
 <section class="index-grid">
@@ -65,6 +233,7 @@ A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for larg
 {% endmarkdown %}
 
 {% set difference = 40 %}
+{% set minContrast = 3 %}
 {% include "contrast-table.njk" %}
 
 {% markdown %}
@@ -84,6 +253,7 @@ A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for no
 {% endmarkdown %}
 
 {% set difference = 50 %}
+{% set minContrast = 4.5 %}
 {% include "contrast-table.njk" %}
 
 {% markdown %}
@@ -102,6 +272,7 @@ A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all
 {% endmarkdown %}
 
 {% set difference = 60 %}
+{% set minContrast = 7 %}
 {% include "contrast-table.njk" %}
 
 {% markdown %}
@@ -114,13 +285,34 @@ This also goes for a difference of `65`:
 {% include "contrast-table.njk" %}
 
 {% markdown %}
-## How to use this palette
+## How to use this palette { #usage }
 
 If you are using a Web Awesome theme that uses this palette, it will already be included.
 To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
 
 {% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
+<wa-tab-group class="import-stylesheet-code">
+<wa-tab panel="html">In HTML</wa-tab>
+<wa-tab panel="css">In CSS</wa-tab>
+<wa-tab-panel name="html">
+
+Add the following code to the `<head>` of your page:
+```html { v-content:html="code.html.highlighted" }
+<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
+```
+</wa-tab-panel>
+<wa-tab-panel name="css">
+
+Add the following code at the top of your CSS file:
+```css { v-content:html="code.css.highlighted" }
+@import url('{% cdnUrl stylesheet %}');
+```
+</wa-tab-panel>
+</wa-tab-group>
+
 
 {% endmarkdown %}
+</div></div> {# end palette app #}
 {% endblock %}
+
+

docs/_utils/copy-code.js

@@ -3,30 +3,39 @@ import { parse } from 'node-html-parser';
 /**
  * Eleventy plugin to add copy buttons to code blocks.
  */
-export function copyCodePlugin(options = {}) {
+export function copyCodePlugin(eleventyConfig, options = {}) {
   options = {
     container: 'body',
     ...options,
   };
 
-  return function (eleventyConfig) {
+  let codeCount = 0;
-    eleventyConfig.addTransform('copy-code', content => {
+  eleventyConfig.addTransform('copy-code', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
+    const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
+    const container = doc.querySelector(options.container);
 
-      if (!container) {
+    if (!container) {
-        return content;
+      return content;
+    }
+
+    // Look for code blocks
+    container.querySelectorAll('pre > code').forEach(code => {
+      const pre = code.closest('pre');
+      let preId = pre.getAttribute('id') || `code-block-${++codeCount}`;
+      let codeId = code.getAttribute('id') || `${preId}-inner`;
+
+      if (!code.getAttribute('id')) {
+        code.setAttribute('id', codeId);
+      }
+      if (!pre.getAttribute('id')) {
+        pre.setAttribute('id', preId);
       }
 
-      // Look for code blocks
+      // Add a copy button
-      container.querySelectorAll('pre > code').forEach(code => {
+      pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
-        const pre = code.closest('pre');
+        <wa-copy-button from="${codeId}" class="copy-button" hoist></wa-copy-button>`;
-
-        // Add a copy button (we set the copy data at runtime to reduce page bloat)
-        pre.innerHTML = `<wa-copy-button class="copy-button" hoist></wa-copy-button>` + pre.innerHTML;
-      });
-
-      return doc.toString();
     });
-  };
+
+    return doc.toString();
+  });
 }

docs/assets/scripts/copy-code.js

@@ -1,15 +0,0 @@
-function setCopyValue() {
-  document.querySelectorAll('.copy-button').forEach(copyButton => {
-    const pre = copyButton.closest('pre');
-    const code = pre?.querySelector('code');
-
-    if (code) {
-      copyButton.value = code.textContent;
-    }
-  });
-}
-
-// Set data for all copy buttons when the page loads
-setCopyValue();
-
-document.addEventListener('turbo:load', setCopyValue);

docs/assets/scripts/remix.js

@@ -1,37 +0,0 @@
-/**
- * Get import code for remixed themes.
- */
-export const urls = {
-  colors: id => `styles/themes/${id}/color.css`,
-  palette: id => `styles/color/${id}.css`,
-  brand: id => `styles/brand/${id}.css`,
-  typography: id => `styles/themes/${id}/typography.css`,
-};
-
-function getImport(url, options = {}) {
-  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
-  url = cdnUrl + url;
-
-  if (language === 'css') {
-    return `@import url('${url}');`;
-  } else {
-    attributes = attributes ? ` ${attributes}` : '';
-    return `<link rel="stylesheet" href="${url}"${attributes} />`;
-  }
-}
-
-export function getCode(base, params, options) {
-  let ret = [];
-
-  if (base) {
-    ret.push(`styles/themes/${base}.css`);
-  }
-
-  ret.push(
-    ...Object.entries(params)
-      .filter(([aspect, id]) => Boolean(id))
-      .map(([aspect, id]) => urls[aspect](id)),
-  );
-
-  return ret.map(url => getImport(url, options)).join('\n');
-}

docs/assets/scripts/sidebar-tweaks.js

@@ -0,0 +1,254 @@
+const sidebar = (globalThis.sidebar = {});
+
+sidebar.palettes = {
+  render() {
+    if (this.saved.length === 0) {
+      return;
+    }
+
+    for (let palette of this.saved) {
+      sidebar.palette.render(palette);
+    }
+
+    sidebar.updateCurrent();
+  },
+
+  updateSaved() {
+    this.saved = localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [];
+  },
+
+  save(saved = this.saved) {
+    this.saved = saved ?? [];
+
+    if (saved.length > 0) {
+      localStorage.savedPalettes = JSON.stringify(saved);
+    } else {
+      delete localStorage.savedPalettes;
+    }
+  },
+};
+
+sidebar.palettes.updateSaved();
+addEventListener('storage', event => sidebar.palettes.updateSaved());
+
+sidebar.palette = {
+  getUid() {
+    let savedPalettes = sidebar.palettes.saved;
+    let uids = new Set(savedPalettes.map(p => p.uid));
+
+    if (savedPalettes.length === 0) {
+      return 1;
+    }
+
+    // Find first available number
+    for (let i = 1; i <= savedPalettes.length + 1; i++) {
+      if (!uids.has(i)) {
+        return i;
+      }
+    }
+  },
+
+  equals(p1, p2) {
+    if (!p1 || !p2) {
+      return false;
+    }
+
+    return p1.id === p2.id && p1.uid === p2.uid;
+  },
+
+  delete(palette) {
+    let savedPalettes = sidebar.palettes.saved;
+    let count = savedPalettes.length;
+    if (count === 0) {
+      return;
+    }
+
+    // TODO improve UX of this
+    if (!confirm(`Are you sure you want to delete palette “${palette.title}”?`)) {
+      return;
+    }
+
+    savedPalettes = savedPalettes.filter(p => !sidebar.palette.equals(palette, p));
+
+    if (savedPalettes.length === count) {
+      // Nothing was removed
+      return;
+    }
+
+    // Update UI
+    let pathname = `/docs/palettes/${palette.id}/`;
+    let url = pathname + palette.search;
+    let uls = new Set();
+
+    for (let a of document.querySelectorAll(`#sidebar a[href="${url}"]`)) {
+      let li = a.closest('li');
+      let ul = li.closest('ul');
+      uls.add(ul);
+      li.remove();
+    }
+
+    // Remove empty lists
+    for (let ul of uls) {
+      if (!ul.children.length) {
+        ul.remove();
+      }
+    }
+
+    sidebar.updateCurrent();
+
+    sidebar.palettes.save(savedPalettes);
+
+    if (sidebar.palette.equals(globalThis.paletteApp?.saved, palette)) {
+      paletteApp.postDelete();
+    }
+  },
+
+  getSaved(palette, savedPalettes = sidebar.palettes.saved) {
+    return savedPalettes.find(p => sidebar.palette.equals(p, palette));
+  },
+
+  render(palette) {
+    // Find existing <a>
+    let { title, id, search, uid } = palette;
+
+    for (let a of document.querySelectorAll(`#sidebar a[href^="/docs/palettes/${id}/"][data-uid="${uid}"]`)) {
+      // Palette already in sidebar, just update it
+      a.textContent = palette.title;
+      a.href = `/docs/palettes/${id}/${search}`;
+      return;
+    }
+
+    let pathname = `/docs/palettes/${id}/`;
+    let url = pathname + search;
+    let parentA = document.querySelector(`a[href="${pathname}"]`);
+    let parentLi = parentA?.closest('li');
+    let a;
+
+    if (parentLi) {
+      a = Object.assign(document.createElement('a'), { href: url, textContent: title });
+      a.dataset.uid = uid;
+      let badges = [...parentLi.querySelectorAll('wa-badge')].map(badge => badge.cloneNode(true));
+      let ul = parentLi.querySelector('ul') ?? parentLi.appendChild(document.createElement('ul'));
+      let li = document.createElement('li');
+      let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
+        name: 'trash',
+        label: 'Delete',
+        className: 'delete',
+      });
+
+      deleteButton.addEventListener('click', () => {
+        let palette = { id, uid, title: a.textContent, search: a.search };
+        sidebar.palette.delete(palette);
+      });
+
+      li.append(a, ' ', ...badges, deleteButton);
+      ul.appendChild(li);
+    }
+  },
+
+  save(palette, saved) {
+    let savedPalettes = sidebar.palettes.saved;
+    let existing = this.getSaved(saved ?? palette, savedPalettes);
+    let oldValues;
+
+    if (existing) {
+      // Rename
+      oldValues = { ...existing };
+      Object.assign(existing, palette);
+    } else {
+      savedPalettes.push(palette);
+    }
+
+    this.render(palette, oldValues);
+    sidebar.updateCurrent();
+
+    sidebar.palettes.save(savedPalettes);
+  },
+};
+
+sidebar.updateCurrent = function () {
+  // Find the sidebar link with the longest shared prefix with the current URL
+  let pathParts = location.pathname.split('/').filter(Boolean);
+  let prefixes = [];
+
+  if (pathParts.length === 1) {
+    // If at /docs/ we just use that, otherwise we want at least two parts (/docs/xxx/)
+    prefixes.push('/' + pathParts[0] + '/');
+  } else {
+    for (let i = 2; i <= pathParts.length; i++) {
+      prefixes.push('/' + pathParts.slice(0, i).join('/') + '/');
+    }
+  }
+
+  // Last prefix includes the search too (if any)
+  if (location.search) {
+    let params = new URLSearchParams(location.search);
+    params.sort();
+    prefixes.push(prefixes.at(-1) + location.search);
+  }
+
+  // We want to start from the longest prefix
+  prefixes.reverse();
+  let candidates;
+  let matchingPrefix;
+
+  for (let prefix of prefixes) {
+    candidates = document.querySelectorAll(`#sidebar a[href^="${prefix}"]`);
+
+    if (candidates.length > 0) {
+      matchingPrefix = prefix;
+      break;
+    }
+  }
+
+  if (!matchingPrefix) {
+    // Abort mission
+    return;
+  }
+
+  if (matchingPrefix === pathParts.at(-1)) {
+    // Full path matches, check search
+    if (location.search) {
+      candidates = [...candidates];
+
+      let searchParams = new URLSearchParams(location.search);
+
+      if (searchParams.has('uid')) {
+        // Only consider candidates with the same uid
+        candidates = candidates.filter(a => {
+          let params = new URLSearchParams(a.search);
+          return params.get('uid') === searchParams.get('uid');
+        });
+      } else {
+        // Sort candidates based on how many params they have in common, in descending order
+        candidates = candidates.sort((a, b) => {
+          return countSharedSearchParams(searchParams, b.search) - countSharedSearchParams(searchParams, a.search);
+        });
+      }
+    }
+  }
+
+  if (candidates.length > 0) {
+    for (let current of document.querySelectorAll('#sidebar a.current')) {
+      current.classList.remove('current');
+    }
+
+    candidates[0].classList.add('current');
+  }
+};
+
+sidebar.render = function () {
+  this.palettes.render();
+};
+
+sidebar.render();
+window.addEventListener('turbo:render', () => sidebar.render());
+
+function countSharedSearchParams(searchParams, search) {
+  if (!search || search === '?') {
+    return 0;
+  }
+
+  let params = new URLSearchParams(search);
+  return [...searchParams.keys()].filter(k => params.get(k) === searchParams.get(k)).length;
+}

docs/assets/scripts/tweak.js

@@ -0,0 +1,6 @@
+/**
+ * Get import code for remixed themes and tweaked palettes.
+ */
+export { getThemeCode } from './tweak/code.js';
+export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js';
+export { default as Permalink } from './tweak/permalink.js';

docs/assets/scripts/tweak/code.js

@@ -0,0 +1,54 @@
+/**
+ * Get import code for remixed themes and tweaked palettes.
+ */
+import { urls } from './data.js';
+
+export function cssImport(url, options = {}) {
+  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
+  url = cdnUrl + url;
+
+  if (language === 'css') {
+    return `@import url('${url}');`;
+  } else {
+    attributes = attributes ? ` ${attributes}` : '';
+    return `<link rel="stylesheet" href="${url}"${attributes} />`;
+  }
+}
+
+export function cssLiteral(value, options = {}) {
+  let { language = 'html' } = options;
+
+  if (language === 'css') {
+    return value;
+  } else {
+    return `<style>\n${value}\n</style>`;
+  }
+}
+
+// Params in correct order
+export const themeParams = ['colors', 'palette', 'brand', 'typography'];
+
+export function getThemeCode(base, params, options) {
+  let ret = [];
+
+  if (base) {
+    ret.push(urls.theme(base));
+  }
+
+  for (let aspect of themeParams) {
+    let value = params[aspect];
+
+    if (value) {
+      ret.push(urls[aspect](value));
+    }
+  }
+
+  return ret.map(url => cssImport(url, options)).join('\n');
+}
+
+export function cssRule(selector, declarations, { indent = '  ' } = {}) {
+  selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
+  declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
+  declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
+  return `${selector} {\n${declarations.trimEnd()}\n}`;
+}

docs/assets/scripts/tweak/data.js

@@ -0,0 +1,73 @@
+/**
+ * Data related to theme remixing and palette tweaking
+ * Must work in both browser and Node.js
+ */
+export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
+
+export const urls = {
+  theme: id => `styles/themes/${id}.css`,
+  colors: id => `styles/themes/${id}/color.css`,
+  palette: id => `styles/color/${id}.css`,
+  brand: id => `styles/brand/${id}.css`,
+  typography: id => `styles/themes/${id}/typography.css`,
+};
+
+export const selectors = {
+  palette: id =>
+    [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
+};
+
+export const hueRanges = {
+  red: { min: 5, max: 35 }, // 30
+  orange: { min: 35, max: 60 }, // 25
+  yellow: { min: 60, max: 112 }, // 45
+  green: { min: 112, max: 170 }, // 55
+  cyan: { min: 170, max: 220 }, // 50
+  blue: { min: 220, max: 265 }, // 45
+  indigo: { min: 265, max: 290 }, // 25
+  purple: { min: 290, max: 320 }, // 30
+  pink: { min: 320, max: 365 }, // 45
+};
+
+export const moreHue = {
+  red: 'Redder',
+  orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/
+  yellow: 'Yellower',
+  green: 'Greener',
+  cyan: 'More cyan',
+  blue: 'Bluer',
+  indigo: 'More indigo',
+  pink: 'Pinker',
+};
+
+/**
+ * Max gray chroma (% of chroma of undertone) per hue
+ */
+export const maxGrayChroma = {
+  red: 0.2,
+  orange: 0.2,
+  yellow: 0.25,
+  green: 0.25,
+  cyan: 0.3,
+  blue: 0.35,
+  indigo: 0.35,
+  purple: 0.3,
+  pink: 0.25,
+};
+
+export const docsURLs = {
+  colors: '/docs/themes/',
+  palette: '/docs/palettes/',
+  typography: '/docs/themes/',
+};
+
+export const icons = {
+  colors: 'palette',
+  palette: 'swatchbook',
+  brand: 'droplet',
+  typography: 'font-case',
+};
+
+export const hues = Object.keys(hueRanges);
+
+export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];

docs/assets/scripts/tweak/permalink.js

@@ -0,0 +1,81 @@
+const IDENTITY = x => x;
+
+export default class Permalink extends URLSearchParams {
+  /** Params changed since last URL I/O */
+  changed = false;
+
+  constructor(params) {
+    super(location.search);
+    this.params = params;
+  }
+
+  toJSON() {
+    return Object.fromEntries(this.entries());
+  }
+
+  #mappings = new WeakMap();
+
+  mapObject(obj, mapping = {}) {
+    this.#mappings.set(obj, mapping);
+  }
+
+  readFrom(obj) {
+    let mapping = this.#mappings.get(obj) ?? {};
+    let { keyFrom = IDENTITY, valueFrom = IDENTITY } = mapping;
+
+    for (let key in obj) {
+      let value = obj[key];
+      let mappedValue = valueFrom(value);
+      let mappedKey = keyFrom(key);
+      this.set(mappedKey, mappedValue);
+    }
+  }
+
+  writeTo(obj) {
+    let mapping = this.#mappings.get(obj) ?? {};
+    let { keyTo = IDENTITY, valueTo = IDENTITY, canExtend = false } = mapping;
+
+    for (let [key, value] of this) {
+      let mappedKey = keyTo(key);
+      let mappedValue = valueTo(value);
+
+      if (canExtend || mappedKey in obj) {
+        obj[mappedKey] = mappedValue;
+      }
+    }
+  }
+
+  set(key, value, defaultValue) {
+    let oldValue = this.get(key);
+
+    if (!value || value == defaultValue) {
+      super.delete(key);
+
+      if (oldValue) {
+        this.changed = true;
+      }
+    } else {
+      super.set(key, value);
+
+      if (String(value) !== String(oldValue)) {
+        this.changed = true;
+      }
+    }
+
+    this.sort();
+  }
+
+  /**
+   * Update page URL if it has changed since last time
+   */
+  updateLocation() {
+    if (this.changed) {
+      // If there’s already a search, replace it.
+      // We don’t want to clog the user’s history while they iterate
+      let search = this.toString();
+      let historyAction = location.search && search ? 'replaceState' : 'pushState';
+      history[historyAction](null, '', `?${search}`);
+      this.changed = false;
+    }
+  }
+}

docs/assets/scripts/tweak/util.js

@@ -0,0 +1,36 @@
+export function normalizeAngles(angles) {
+  // First, normalize
+  angles = angles.map(h => ((h % 360) + 360) % 360);
+
+  // Remove top and bottom 25% and find average
+  let averageHue =
+    angles
+      .toSorted((a, b) => a - b)
+      .slice(angles.length / 4, -angles.length / 4)
+      .reduce((a, b) => a + b, 0) / angles.length;
+
+  for (let i = 0; i < angles.length; i++) {
+    let h = angles[i];
+    let prevHue = angles[i - 1];
+    let delta = h - prevHue;
+
+    if (Math.abs(delta) > 180) {
+      let equivalent = [h + 360, h - 360];
+      // Offset hue to minimize difference in the direction that brings it closer to the average
+      let delta = h - averageHue;
+
+      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
+        angles[i] = equivalent[0];
+      } else {
+        angles[i] = equivalent[1];
+      }
+    }
+  }
+
+  return angles;
+}
+
+export function subtractAngles(θ1, θ2) {
+  let [a, b] = normalizeAngles([θ1, θ2]);
+  return a - b;
+}

docs/assets/styles/copy-code.css

@@ -27,3 +27,19 @@ wa-copy-button.copy-button {
     opacity: 1;
   }
 }
+
+.block-link-icon {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: calc(100% + var(--wa-space-s));
+
+  transition: var(--wa-transition-slow);
+
+  &:not(:hover, :focus) {
+    opacity: 50%;
+  }
+
+  :not(:hover, :focus-within) > & {
+    opacity: 0;
+  }
+}

docs/assets/styles/docs.css

@@ -156,7 +156,7 @@ wa-page > header {
 }
 
 /* Pro badges */
-wa-badge.pro::part(base) {
+wa-badge.pro {
   background-color: var(--wa-brand-orange);
   border-color: var(--wa-brand-orange);
 }
@@ -188,6 +188,29 @@ wa-badge.pro::part(base) {
       }
     }
   }
+
+  wa-icon-button.delete {
+    vertical-align: -0.2em;
+    margin-inline-start: var(--wa-space-xs);
+
+    &:not(li:hover > *, :focus) {
+      opacity: 0;
+    }
+  }
+}
+
+wa-icon-button.delete {
+  &:hover {
+    color: var(--wa-color-danger-on-quiet);
+  }
+
+  &::part(base):hover {
+    background: var(--wa-color-danger-fill-quiet);
+  }
+
+  &:not(:hover, :focus) {
+    opacity: 0.5;
+  }
 }
 
 #sidebar-close-button {
@@ -232,16 +255,32 @@ wa-page > main {
   margin-inline: auto;
 }
 
-h1.title wa-badge {
+h1.title {
-  vertical-align: middle;
+  wa-icon-button {
+    font-size: var(--wa-font-size-l);
+    color: var(--wa-color-text-quiet);
 
-  &::part(base) {
+    &:not(:hover, :focus) {
+      opacity: 0.5;
+    }
+  }
+
+  wa-badge {
+    vertical-align: middle;
     font-size: 1.5rem;
   }
 }
 
 .block-info {
+  display: flex;
+  gap: var(--wa-space-xs);
+  flex-wrap: wrap;
+  align-items: center;
   margin-block-end: var(--wa-flow-spacing);
+
+  code {
+    line-height: var(--wa-line-height-condensed);
+  }
 }
 
 /* Current link */
@@ -400,9 +439,18 @@ wa-page > main:has(> .index-grid) {
 
   &.color {
     border-color: transparent;
+    transition: background var(--wa-transition-slow);
+    background: linear-gradient(var(--color-2, transparent) 0% 100%) no-repeat border-box var(--color,);
+    background-position: var(--color-2-position, bottom);
+    background-size: var(--color-2-width, 100%) var(--color-2-height, 50%);
+
+    &.contrast-fail {
+      outline: 1px dashed var(--wa-color-red);
+      outline-offset: calc(-1 * var(--wa-space-2xs));
+    }
   }
 
-  wa-copy-button {
+  > wa-copy-button {
     position: absolute;
     top: 0;
     left: 0;
@@ -463,6 +511,55 @@ table.colors {
   }
 }
 
+.value-up,
+.value-down {
+  position: relative;
+
+  &::after {
+    content: ' ' var(--icon);
+    position: absolute;
+    margin-inline-start: 3em;
+    scale: 1 0.6;
+    color: color-mix(in oklch, oklch(from var(--icon-color) none c h) 0%, oklch(from currentColor l none none));
+    font-size: 90%;
+  }
+}
+
+.value-down {
+  --icon: '▼';
+  --icon-color: var(--wa-color-danger-fill-quiet);
+
+  &::after {
+    margin-block-end: -0.2em;
+  }
+}
+
+.value-up {
+  --icon: '▲';
+  --icon-color: var(--wa-color-success-fill-quiet);
+}
+
+.icon-modifier {
+  position: relative;
+  display: inline-flex;
+
+  .modifier {
+    position: absolute;
+    bottom: -0.1em;
+    right: -0.3em;
+    font-size: 60%;
+
+    &::part(svg) {
+      stroke: var(--background-color, var(--wa-color-surface-default));
+      stroke-width: 100px;
+      paint-order: stroke;
+      overflow: visible;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+}
+
 /* Layout Examples */
 .layout-example-boundary {
   border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);

docs/docs/components/card.md

@@ -19,13 +19,13 @@ icon: card
 
   <div slot="footer">
     <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
+    <wa-rating label="Rating"></wa-rating>
   </div>
 </wa-card>
 
 <style>
   .card-overview {
-    max-width: 300px;
+    width: 300px;
   }
 
   .card-overview small {

docs/docs/components/radio.md

@@ -74,3 +74,15 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
   <wa-radio value="3">Large 3</wa-radio>
 </wa-radio-group>
 ```
+
+### Hint
+
+Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
+
+```html {.example}
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio value="1" hint="What should the user know about radio 1?">Option 1</wa-radio>
+  <wa-radio value="2" hint="What should the user know about radio 2?">Option 2</wa-radio>
+  <wa-radio value="3" hint="What should the user know about radio 3?">Option 3</wa-radio>
+</wa-radio-group>
+```

docs/docs/experimental/clamped-colors.njk

@@ -0,0 +1,47 @@
+---
+title: Clamped brand tokens
+layout: block
+---
+
+{% set tints = ['40-max', '50-max', '60-max', '40-min', '50-min', '60-min'] %}
+
+{% for hue in hues %}
+<link href="/dist/styles/brand/{{ hue }}.css" rel="stylesheet">
+{% endfor %}
+
+<table class="colors">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="core-column">Core tint</th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr class="wa-brand-{{ hue }}">
+  <th>{{ hue | capitalize }}</th>
+  <td class="core-column">
+    <div class="color swatch" style="background-color: var(--wa-color-brand); color: var(--wa-color-brand-on);">
+      {{ palettes[paletteId][hue].maxChromaTint }}
+      <wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></wa-copy-button>
+    </div>
+  </td>
+  {% for tint in tints -%}
+    <td>
+      <div class="color swatch" style="background-color: var(--wa-color-brand-{{ tint }})">
+        <wa-copy-button value="--wa-color-brand-{{ tint }}" copy-label="--wa-color-brand-{{ tint }}"></wa-copy-button>
+      </div>
+    </td>
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
+
+<style>
+.core-column .color.swatch::before {
+  counter-reset: key var(--wa-color-brand-key);
+  content: counter(key);
+}
+</style>

docs/docs/native/input.md

@@ -42,6 +42,14 @@ wa-code-demo::part(preview) {
 <wa-input label="WA Input (url)" type="url"></wa-input>
 ```
 
+## Pill shaped text fields
+
+Add the `wa-pill` class to an `<input>` to make it pill-shaped.
+
+```html {.example}
+<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
+```
+
 ## Color Picker
 
 Basic:

docs/docs/palettes/data.json.njk

@@ -0,0 +1,27 @@
+---
+layout: null
+permalink: "/docs/palettes/data.json"
+eleventyExcludeFromCollections: true
+---
+{
+{% for palette in collections.palettes %}
+  {% set paletteId = palette.fileSlug -%}
+  {% set colors = palettes[paletteId] -%}
+  "{{ paletteId }}": {
+    "title": "{{ palette.data.title }}",
+    "colors": {
+      {% for hue, tints in colors -%}
+        "{{ hue }}": {
+          {% for tint, value in tints -%}
+            {% if tint != "05" -%}
+              {% set value = value.coords or value -%}
+              {% set key = "05" if tint == "5" else tint -%}
+              "{{ key }}": {{ value | dump | safe }}{{ ', ' if not loop.last }}
+            {%- endif %}
+          {% endfor -%}
+        }{{ ', ' if not loop.last }}
+      {% endfor %} {# end of hue #}
+    }
+  }{{ ', ' if not loop.last }} {# end of palette #}
+{% endfor %}
+}

docs/docs/palettes/default.md

@@ -1,4 +1,5 @@
 ---
 title: Default
 description: This is the palette used in the default theme.
+order: 0
 ---

docs/docs/palettes/palettes.json

@@ -1,6 +1,7 @@
 {
   "layout": "palette.njk",
   "tags": ["palettes", "palette"],
+  "wide": true,
   "eleventyComputed": {
     "snippet": ".wa-palette-{{ page.fileSlug }}",
     "icon": "palette",

docs/docs/palettes/tweak.css

@@ -0,0 +1,205 @@
+:root {
+  --fa-sliders-simple: '\f1de';
+}
+
+.core-column {
+  position: relative;
+
+  > wa-dropdown {
+    min-width: 100%;
+  }
+}
+
+wa-dropdown > .color.swatch {
+  cursor: pointer;
+}
+
+.decorated-slider {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  margin-block-end: var(--wa-space-xl);
+
+  wa-slider {
+    grid-column: 1 / -1;
+    --track-height: 1em;
+    --track-color-inactive: transparent;
+    --track-color-active: transparent;
+    --thumb-color: var(--color-tweaked, var(--color));
+    --thumb-shadow: 0 0 0 var(--thumb-gap) var(--wa-color-surface-default),
+      var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
+        calc(var(--wa-shadow-offset-x-m) * -1 + var(--thumb-gap)) var(--wa-color-shadow);
+
+    &:active {
+      --thumb-size: 2em;
+    }
+
+    &::part(base) {
+      background: linear-gradient(to right in var(--color-interpolation-space, oklab), var(--color-1), var(--color-2));
+    }
+  }
+
+  [slot='label'] {
+    min-height: 1.1lh;
+  }
+
+  .clear-button {
+    vertical-align: middle;
+    font-size: var(--wa-font-size-xs);
+
+    &:not(.tweaked *) {
+      display: none;
+    }
+  }
+
+  .label-min,
+  .label-max {
+    font-size: var(--wa-font-size-xs);
+  }
+
+  .label-min {
+    grid-column: 1;
+    margin-inline-start: 0.15em;
+  }
+
+  .label-max {
+    grid-column: 3;
+    margin-inline-end: 0.1em;
+  }
+}
+
+.hue-shift-slider {
+  --color-1: oklch(from var(--color) l c calc(h + var(--min, 0)));
+  --color-2: oklch(from var(--color) l c calc(h + var(--max, 0)));
+  --color-interpolation-space: oklch;
+}
+
+.chroma-scale-slider {
+  --color: var(--wa-color-brand);
+  --color-1: oklch(from var(--color) l calc(c * var(--min)) h);
+  --color-2: oklch(from var(--color) l calc(c * var(--max)) h);
+}
+
+.gray-chroma-slider {
+  --color: var(--wa-color-gray);
+  --color-1: oklch(from var(--wa-color-gray) l 0 none);
+  --color-2: oklch(from var(--color-gray-undertone) l calc(c * var(--max)) h);
+  margin-top: var(--wa-space-m);
+}
+
+.popup {
+  background: var(--wa-color-surface-default);
+  border: 1px solid var(--wa-color-surface-border);
+  padding: var(--wa-space-xl);
+  border-radius: var(--wa-border-radius-m);
+
+  code {
+    white-space: nowrap;
+  }
+}
+
+.color-scale {
+  th {
+    white-space: nowrap;
+  }
+
+  td:not([data-hue='gray'] *) {
+    --tweak-c: calc(c * var(--chroma-scale, 1));
+    --tweak-h: calc(h + var(--hue-shift, 0));
+
+    --color-tweaked-no-chroma-scale: oklch(from var(--color) l c var(--tweak-h));
+    --color-tweaked-no-hue-shift: oklch(from var(--color) l var(--tweak-c) h);
+
+    &:is([data-tint='90'], [data-tint='95']) {
+      /* Work around  https://bugs.webkit.org/show_bug.cgi?id=287637 */
+
+      --color-tweaked-no-chroma-scale: lch(from var(--color) l c var(--tweak-h));
+      --color-tweaked-no-hue-shift: lch(from var(--color) l var(--tweak-c) h);
+
+      /* outline: 1px dashed red; */
+    }
+  }
+
+  .color.swatch {
+    --color-2: var(--color-tweaked);
+    --color-2-height: 100%;
+
+    &:is(.tweaking *) {
+      --color-2-height: 70%;
+    }
+
+    &:is(.tweaking-chroma *) {
+      --color: var(--color-tweaked-no-chroma-scale);
+    }
+
+    &:is(.tweaking-hue *) {
+      --color: var(--color-tweaked-no-hue-shift);
+    }
+
+    &:is(.tweaking-gray-chroma *) {
+      --color: var(--color-tweaked-no-gray-chroma);
+    }
+  }
+
+  .tweak-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: var(--wa-space-s);
+    opacity: var(--tweak-icon-opacity, 0%);
+  }
+
+  .core-column:hover {
+    --tweak-icon-opacity: 40%;
+  }
+
+  &.tweaked .core-column {
+    --tweak-icon-opacity: 80%;
+  }
+}
+
+.tweaked-callout {
+  padding: var(--wa-space-xs);
+  padding-inline-start: var(--wa-space-m);
+  align-items: center;
+
+  &:not(.tweaked-any *) {
+    visibility: hidden;
+  }
+
+  &::part(message) {
+    display: flex;
+    align-items: center;
+    gap: var(--wa-space-xs);
+  }
+
+  wa-button:first-of-type {
+    margin-inline-start: auto;
+  }
+}
+
+/* Better UI before Vue initializes */
+[v-if='saved'],
+[v-if^='tweaked'] {
+  display: none;
+}
+
+.core-color {
+  wa-radio-button::part(base) {
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    border-radius: var(--wa-border-radius-circle);
+    background: var(--color);
+    background-clip: border-box;
+  }
+
+  wa-radio-button:is([checked], :state(checked))::part(base) {
+    box-shadow:
+      inset 0 0 0 var(--indicator-width) var(--indicator-color),
+      inset 0 0 0 calc(var(--indicator-width) + 1.5px) var(--wa-color-surface-default);
+  }
+
+  &::part(form-control-input) {
+    gap: var(--wa-space-xs);
+  }
+}

docs/docs/palettes/tweak.js

@@ -0,0 +1,580 @@
+// TODO move these to local imports
+import Color from 'https://colorjs.io/dist/color.js';
+import { createApp, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
+import { cdnUrl, hueRanges, hues, Permalink, tints } from '../../assets/scripts/tweak.js';
+import { cssImport, cssLiteral, cssRule } from '../../assets/scripts/tweak/code.js';
+import { maxGrayChroma, moreHue, selectors, urls } from '../../assets/scripts/tweak/data.js';
+import { subtractAngles } from '../../assets/scripts/tweak/util.js';
+import Prism from '/assets/scripts/prism.js';
+
+await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
+
+// // Detect https://bugs.webkit.org/show_bug.cgi?id=287637
+// const SAFARI_OKLCH_BUG = (() => {
+//   let dummy = document.createElement('div');
+//   document.body.appendChild(dummy);
+//   dummy.style.color = 'oklch(from #d5e0e6 l c h)';
+//   let computedColor = getComputedStyle(dummy).color;
+//   dummy.remove();
+//   return computedColor.endsWith(' 0)');
+// })();
+
+let allPalettes = await fetch('/docs/palettes/data.json').then(r => r.json());
+globalThis.allPalettes = allPalettes;
+
+for (let palette in allPalettes) {
+  for (let hue in allPalettes[palette].colors) {
+    let scale = allPalettes[palette].colors[hue];
+    for (let tint of tints) {
+      let color = scale[tint];
+
+      if (Array.isArray(color)) {
+        scale[tint] = new Color('oklch', color);
+      }
+    }
+  }
+}
+
+const percentFormatter = value => value.toLocaleString(undefined, { style: 'percent' });
+
+let paletteAppSpec = {
+  data() {
+    let appRoot = document.querySelector('#palette-app');
+    let paletteId = appRoot.dataset.paletteId;
+    let palette = allPalettes[paletteId];
+
+    return {
+      uid: undefined,
+      paletteId,
+      paletteTitle: palette.title,
+      originalColors: palette.colors,
+      permalink: new Permalink(),
+      hueRanges,
+      hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
+      chromaScale: 1,
+      grayChroma: undefined,
+      grayColor: undefined,
+      tweaking: {},
+      saved: null,
+    };
+  },
+
+  created() {
+    // Non-reactive variables to expose
+    Object.assign(this, { moreHue });
+
+    // Read URL params and apply them. This facilitates permalinks.
+    this.permalink.mapObject(this.hueShifts, {
+      keyTo: key => key.replace(/-shift$/, ''),
+      keyFrom: key => key + '-shift',
+      valueFrom: value => (!value ? '' : Number(value)),
+      valueTo: value => (!value ? 0 : Number(value)),
+    });
+
+    this.grayChroma = this.originalGrayChroma;
+    this.grayColor = this.originalGrayColor;
+
+    if (location.search) {
+      // Update from URL
+      this.permalink.writeTo(this.hueShifts);
+
+      for (let param of ['chroma-scale', 'gray-color', 'gray-chroma']) {
+        if (this.permalink.has(param)) {
+          let value = this.permalink.get(param);
+
+          if (!isNaN(value)) {
+            // Convert numeric values to numbers
+            value = Number(value);
+          }
+
+          let prop = camelCase(param);
+          this[prop] = value;
+        }
+      }
+
+      if (this.permalink.has('uid')) {
+        this.uid = Number(this.permalink.get('uid'));
+      }
+
+      this.saved = sidebar.palette.getSaved(this.getPalette());
+    }
+  },
+
+  mounted() {
+    for (let ref in this.$refs) {
+      this.$refs[ref].tooltipFormatter = percentFormatter;
+    }
+  },
+
+  computed: {
+    tweaks() {
+      return {
+        hueShifts: this.hueShifts,
+        chromaScale: this.chromaScale,
+        grayColor: this.grayColor,
+        grayChroma: this.grayChroma,
+      };
+    },
+
+    isTweaked() {
+      return Object.values(this.hueShifts).some(Boolean);
+    },
+
+    code() {
+      let ret = {};
+      for (let language of ['html', 'css']) {
+        let code = getPaletteCode(this.paletteId, this.colors, this.tweaked, { language, cdnUrl });
+        ret[language] = {
+          raw: code,
+          highlighted: Prism.highlight(code, Prism.languages[language], language),
+        };
+      }
+
+      return ret;
+    },
+
+    colors() {
+      return applyTweaks.call(this, this.originalColors, this.tweaks, this.tweaked);
+    },
+
+    colorsMinusChromaScale() {
+      let tweaked = { ...this.tweaked, chromaScale: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
+    },
+
+    colorsMinusHueShifts() {
+      let tweaked = { ...this.tweaked, hue: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
+    },
+
+    colorsMinusGrayChroma() {
+      let tweaked = { ...this.tweaked, grayChroma: false };
+      return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
+    },
+
+    tweaked() {
+      let anyHueTweaked = Object.values(this.hueShifts).some(Boolean);
+      let hue = anyHueTweaked
+        ? Object.fromEntries(Object.entries(this.hueShifts).map(([hue, shift]) => [hue, shift !== 0]))
+        : false;
+
+      let ret = {
+        chromaScale: this.chromaScale !== 1,
+        hue,
+        grayChroma: this.grayChroma !== this.originalGrayChroma,
+        grayColor: this.grayColor !== this.originalGrayColor,
+      };
+
+      let anyTweaked = Object.values(ret).some(Boolean);
+      return anyTweaked ? ret : false;
+    },
+
+    tweaksHumanReadable() {
+      let ret = {};
+
+      if (this.chromaScale !== 1) {
+        ret.chromaScale = 'More ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
+      }
+
+      for (let hue in this.hueShifts) {
+        let shift = this.hueShifts[hue];
+
+        if (!shift) {
+          continue;
+        }
+
+        let relHue = shift < 0 ? arrayPrevious(hues, hue) : arrayNext(hues, hue);
+        let hueTweak = moreHue[relHue] ?? relHue + 'er';
+
+        ret[hue] = capitalize(hueTweak + ' ' + hue + 's');
+      }
+
+      if (this.tweaked.grayChroma || this.tweaked.grayColor) {
+        if (this.tweaked.grayChroma === 0) {
+          ret.grayChroma = 'Achromatic grays';
+        } else {
+          if (this.tweaked.grayColor) {
+            ret.grayColor = capitalize(this.grayColor) + ' gray undertone';
+          }
+
+          if (this.tweaked.grayChroma) {
+            let more = this.tweaked.grayChroma > this.originalGrayChroma;
+            ret.grayChroma = `More ${more ? 'colorful' : 'neutral'} grays`;
+          }
+        }
+      }
+
+      return ret;
+    },
+
+    originalContrasts() {
+      return getContrasts(this.originalColors);
+    },
+
+    contrasts() {
+      return getContrasts(this.colors, this.originalContrasts);
+    },
+
+    originalCoreColors() {
+      let ret = {};
+      for (let hue in this.originalColors) {
+        let maxChromaTintRaw = this.originalColors[hue].maxChromaTintRaw;
+        ret[hue] = this.originalColors[hue][maxChromaTintRaw];
+      }
+      return ret;
+    },
+
+    coreColors() {
+      let ret = {};
+      for (let hue in this.colors) {
+        let maxChromaTintRaw = this.colors[hue].maxChromaTintRaw;
+        ret[hue] = this.colors[hue][maxChromaTintRaw];
+      }
+
+      return ret;
+    },
+
+    originalGrayColor() {
+      let grayHue = this.originalCoreColors.gray.get('h');
+      let minDistance = Infinity;
+      let closestHue = null;
+
+      for (let name in this.originalCoreColors) {
+        if (name === 'gray') {
+          continue;
+        }
+
+        let hue = this.originalCoreColors[name].get('h');
+        let distance = Math.abs(subtractAngles(hue, grayHue));
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestHue = name;
+        }
+      }
+
+      return closestHue ?? 'indigo';
+    },
+
+    originalGrayChroma() {
+      let coreTint = this.originalColors.gray.maxChromaTint;
+      let grayChroma = this.originalColors.gray[coreTint].get('c');
+      if (grayChroma === 0 || grayChroma === null) {
+        return 0;
+      }
+
+      let grayColorChroma = this.originalColors[this.originalGrayColor][coreTint].get('c');
+      return grayChroma / grayColorChroma;
+    },
+
+    /**
+     * We want to preserve the original grayChroma selection so that when the user switches to another undertone
+     * that supports higher chromas, their selection will be there.
+     * This property is the gray chroma % that is actually applied.
+     */
+    computedGrayChroma() {
+      return Math.min(this.grayChroma, this.maxGrayChroma);
+    },
+
+    maxGrayChroma() {
+      return maxGrayChroma[this.grayColor] ?? 0.3;
+    },
+  },
+
+  watch: {
+    hueShifts: {
+      deep: true,
+      handler() {
+        this.permalink.readFrom(this.hueShifts);
+      },
+    },
+
+    chromaScale() {
+      this.permalink.set('chroma-scale', this.chromaScale, 1);
+    },
+
+    grayColor() {
+      this.permalink.set('gray-color', this.grayColor, this.originalGrayColor);
+    },
+
+    grayChroma() {
+      this.permalink.set('gray-chroma', this.grayChroma, this.originalGrayChroma);
+    },
+
+    tweaks: {
+      deep: true,
+      async handler(value, oldValue) {
+        await nextTick(); // must run after individual watchers
+
+        // Update page URL
+        this.permalink.updateLocation();
+
+        if (this.saved) {
+          this.save({ silent: true });
+        }
+      },
+    },
+  },
+
+  methods: {
+    getPalette() {
+      return { id: this.paletteId, uid: this.uid, search: location.search };
+    },
+
+    save({ silent } = {}) {
+      let title = silent
+        ? (this.saved?.title ?? this.paletteTitle)
+        : prompt('Palette title:', `${this.paletteTitle} (tweaked)`);
+
+      if (!title) {
+        return;
+      }
+
+      let uid = this.uid;
+
+      if (!uid) {
+        // First time saving
+        this.uid = uid = sidebar.palette.getUid();
+
+        this.permalink.set('uid', uid);
+        this.permalink.updateLocation();
+      }
+
+      let palette = { ...this.getPalette(), uid, title };
+
+      sidebar.palette.save(palette, this.saved);
+      this.saved = palette;
+    },
+
+    rename() {
+      if (!this.saved) {
+        return;
+      }
+
+      let newTitle = prompt('New title:', this.saved.title);
+
+      if (!newTitle) {
+        return;
+      }
+
+      this.saved.title = newTitle;
+      sidebar.palette.save(this.saved);
+    },
+
+    deleteSaved() {
+      sidebar.palette.delete(this.saved);
+    },
+
+    postDelete() {
+      this.saved = null;
+      this.permalink.delete('uid');
+      this.uid = undefined;
+      this.permalink.updateLocation();
+    },
+
+    /**
+     * Remove a specific tweak or all tweaks
+     * @param {string} [param] - The tweak to remove. If not provided, all tweaks are removed.
+     */
+    reset(param) {
+      if (!param || param === 'chromaScale') {
+        this.chromaScale = 1;
+      }
+
+      if (param in this.hueShifts) {
+        this.hueShifts[param] = 0;
+      } else if (!param) {
+        for (let hue in this.hueShifts) {
+          this.hueShifts[hue] = 0;
+        }
+      }
+
+      if (!param || param === 'grayColor') {
+        this.grayColor = this.originalGrayColor;
+      }
+
+      if (!param || param === 'grayChroma') {
+        this.grayChroma = this.originalGrayChroma;
+      }
+    },
+  },
+
+  directives: {
+    // Like v-text, but doesn't complain if the element has content,
+    // making it possible to use in a PE fashion, with the contents being the fallback
+    content(el, { value, arg }) {
+      if (!el.dataset.fallback) {
+        // Store the original content as a fallback the first time
+        el.dataset.fallback = el.textContent;
+      }
+
+      if (value === '') {
+        value = el.dataset.fallback;
+      } else {
+        if (arg === 'number') {
+          value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
+        }
+      }
+
+      if (arg === 'html') {
+        el.innerHTML = value;
+      } else {
+        el.textContent = value;
+      }
+    },
+  },
+
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+};
+
+function init() {
+  let paletteAppContainer = document.querySelector('#palette-app');
+  globalThis.paletteApp?.unmount?.();
+
+  if (!paletteAppContainer) {
+    return;
+  }
+
+  globalThis.paletteApp = createApp(paletteAppSpec).mount(paletteAppContainer);
+}
+
+init();
+addEventListener('turbo:render', init);
+
+export function getPaletteCode(paletteId, colors, tweaked, options) {
+  let imports = [];
+
+  if (paletteId) {
+    imports.push(urls.palette(paletteId));
+  }
+
+  let css = '';
+  let declarations = [];
+
+  if (tweaked) {
+    for (let hue in colors) {
+      if (hue === 'orange') {
+        continue;
+      } else if (hue === 'gray') {
+        if (!tweaked.grayChroma && !tweaked.grayColor) {
+          continue;
+        }
+      } else if (!tweaked.chromaScale && !tweaked.hue?.[hue]) {
+        continue;
+      }
+
+      for (let tint of tints) {
+        let color = colors[hue][tint];
+        let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
+        declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
+      }
+
+      declarations.push('');
+    }
+
+    if (declarations.length > 0) {
+      css += cssRule(selectors.palette(paletteId), declarations);
+    }
+  }
+
+  let ret = imports.map(url => cssImport(url, options)).join('\n');
+
+  if (css) {
+    ret += `\n\n${cssLiteral(css, options)}`;
+  }
+
+  return ret;
+}
+
+function arrayNext(array, element) {
+  let index = array.indexOf(element);
+  return array[(index + 1) % array.length];
+}
+
+function arrayPrevious(array, element) {
+  let index = array.indexOf(element);
+  return array[(index - 1 + array.length) % array.length];
+}
+
+function applyTweaks(originalColors, tweaks, tweaked) {
+  let ret = {};
+  let { hueShifts, chromaScale = 1, grayColor, grayChroma } = tweaks;
+
+  if (!tweaked) {
+    return originalColors;
+  }
+
+  if (tweaked.grayChroma) {
+    grayChroma = this.computedGrayChroma;
+  }
+
+  for (let hue in originalColors) {
+    let originalScale = originalColors[hue];
+    let scale = (ret[hue] = {});
+    let descriptors = Object.getOwnPropertyDescriptors(originalScale);
+    Object.defineProperties(scale, {
+      maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
+      maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
+    });
+
+    for (let tint of tints) {
+      let color = originalScale[tint].clone();
+
+      if (tweaked.hue && hueShifts[hue]) {
+        color.set({ h: h => h + hueShifts[hue] });
+      }
+
+      if (tweaked.chromaScale && chromaScale !== 1) {
+        color.set({ c: c => c * chromaScale });
+      }
+
+      if (hue === 'gray' && (tweaked.grayChroma || tweaked.grayColor)) {
+        let colorUndertone = originalColors[grayColor][tint].clone();
+        color = colorUndertone.set({ c: c => c * grayChroma });
+      }
+
+      scale[tint] = color;
+    }
+  }
+
+  return ret;
+}
+
+function camelCase(str) {
+  return (str + '').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+function capitalize(str) {
+  return str[0].toUpperCase() + str.slice(1);
+}
+
+function getContrasts(colors, originalContrasts) {
+  let ret = {};
+
+  for (let hue in colors) {
+    ret[hue] = {};
+
+    for (let tintBg of tints) {
+      ret[hue][tintBg] = {};
+      let bgColor = colors[hue][tintBg];
+
+      if (!bgColor || !bgColor.contrast) {
+        continue;
+      }
+
+      for (let tintFg of tints) {
+        let fgColor = colors[hue][tintFg];
+        let value = bgColor.contrast(fgColor, 'WCAG21');
+        if (originalContrasts) {
+          let original = originalContrasts[hue][tintBg][tintFg];
+          ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
+        } else {
+          ret[hue][tintBg][tintFg] = value;
+        }
+      }
+    }
+  }
+
+  return ret;
+}

docs/docs/resources/changelog.md

@@ -1,7 +1,7 @@
 ---
 title: Changelog
 description: Changes to each version of the project are documented here.
-layout: page
+layout: page-outline
 ---
 
 Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <wa-badge variant="brand" pill>Stable</wa-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
@@ -14,11 +14,73 @@ During the alpha period, things might break! We take breaking changes very serio
 
 ## Next
 
-- Added an orientation example to the native radio docs
+- Fixed `wa-pill` class for text fields
+- Fixed `pill` style for `<wa-input>` elements
+
+## 3.0.0-alpha.11
+
+### Color Palettes
+
+- Color palette tweaking UI. Tweak hue, grays, overall colorfulness, save or share the results.
+- Added a `pink` scale to all color palettes
+- Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
+- Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too).
+- Fixed a bug in `<wa-switch>` that caused tooltips to work incorrectly when toggling the switch
+
+### Design Tokens
+
+- Added `--wa-color-[hue]` tokens with the "core" color of each scale, regardless of which tint it lives on.
+You can find them in the first column of each color palette.
+
+### Themes
+
+- Improved UI for theme remixing:
+  - You can now override the brand color of any theme with any of the 9 hues supported.
+  - Rich previews
+  - Generated copyable code snippets.
+  - Permalinks
+- Updated Active, Glossy, Playful, and Premium themes so that `--wa-color-brand-fill-loud` uses the core color of the chosen brand color, regardless of tint.
+
+### Components
+
+#### `<wa-radio>`
+
+- Dropped the `base` part. It can now be styled by directly applying CSS to the element itself.
+- Added `hint` attribute and corresponding slot.
+
+#### `<wa-select>`
+
 - 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 bug that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
+- Fixed an incorrect CSS value in the expand icon
+- Fixed a bug that prevented the description from being read by screen readers
+
+####  `<wa-option>`
+
+- `label` attribute to override the generated label (useful for rich content)
+- `defaultLabel` property
+- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
+- Dropped `base` part for easier styling. CSS can now be applied directly to the element itself.
+
+####  `<wa-menu-item>`
+
+- `label` attribute to override the generated label (useful for rich content)
+- `defaultLabel` property
+- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
+
+#### `<wa-card>`
+- Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
+- Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
+- Fixed a bug that prevented slots from showing automatically without `with-` attributes
+
+#### `<wa-tab>`
+
+- Fixed a bug that caused `document.createElement('wa-tab')` to fail (which also meant it could not be used in VueJS and other frameworks)
+
+### Docs
+
+- Added an orientation example to the native radio docs
 - 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
 

docs/docs/themes/demo.njk

@@ -10,15 +10,17 @@ override:tags: []
 eleventyComputed:
   forceTheme: "{{ theme.fileSlug }}"
 ---
-
+{% set isPro = theme.data.isPro %}
+{% set status = theme.data.status %}
+{% set since = theme.data.since %}
 <link rel="stylesheet" href="/docs/themes/showcase.css" />
 
 {% set content %}
 <header>
   {% include 'breadcrumbs.njk' %}
   <h1 class="title">{{ theme.data.title }}</h1>
-  <p id="mix_and_match" hidden class="wa-size-s"></p>
+  <p id="mix_and_match" class="wa-size-s"></p>
-  <p>{% include 'status.njk' %}</p>
+  <p id="theme-status">{% include 'status.njk' %}</p>
   <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
 </header>
 {% include 'theme-showcase.njk' %}
@@ -34,30 +36,19 @@ eleventyComputed:
 </wa-image-comparer>
 
 <script type="module">
-import { getCode, urls as stylesheetURLs } from "/assets/scripts/remix.js";
+import { urls as stylesheetURLs, docsURLs, icons } from "/assets/scripts/tweak/data.js";
+import { getThemeCode } from "/assets/scripts/tweak/code.js";
 
 function updateTheme() {
   let params = new URLSearchParams(window.location.search);
   params = Object.fromEntries(params.entries());
 
-  const docsURLs = {
-    colors: '/docs/themes/',
-    palette: '/docs/palettes/',
-    typography: '/docs/themes/'
-  };
-  const icons = {
-    colors: 'palette',
-    palette: 'swatchbook',
-    brand: 'droplet',
-    typography: 'font-case'
-  };
-
   for (let link of document.querySelectorAll('link.mix-and-match')) {
     link.remove();
   }
 
-  let msgs = [];
+  let tweaks = [];
-  let code = getCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
+  let code = getThemeCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
   document.head.insertAdjacentHTML('beforeend', code);
 
   for (let name in stylesheetURLs) {
@@ -71,18 +62,29 @@ function updateTheme() {
       }
 
       let icon = icons[name];
-      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
+      tweaks.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
     }
   }
 
-  for (let p of mix_and_match) {
+  let isRemixed = tweaks.length > 0;
-    p.hidden = msgs.length === 0;
+  document.documentElement.classList.toggle('is-remixed', isRemixed);
-    if (msgs.length) {
+
-      let icon =
+  if (isRemixed) {
-      p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
+    for (let p of document.querySelectorAll("#theme-status")) {
-        ${ msg }</wa-badge>`).join(' ');
+        let proBadge = p.querySelector(".pro");
+        if (!proBadge) {
+          p.insertAdjacentHTML('beforeend', '<wa-badge class="pro">PRO</wa-badge>');
+        }
+    }
+
+    for (let p of mix_and_match) {
+      if (tweaks.length) {
+        p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + tweaks.map(msg => `<wa-badge appearance=outlined>
+          ${ msg }</wa-badge>`).join(' ');
+      }
     }
   }
+
 }
 updateTheme();
 </script>

docs/docs/themes/remix.js

@@ -1,12 +1,6 @@
-import { getCode } from '/assets/scripts/remix.js';
+import Prism from '/assets/scripts/prism.js';
-
+import { cdnUrl, getThemeCode, Permalink } from '/assets/scripts/tweak.js';
 await Promise.all(['wa-select', 'wa-option', 'wa-details'].map(tag => customElements.whenDefined(tag)));
-globalThis.Prism = globalThis.Prism || {};
-globalThis.Prism.manual = true;
-await import('/assets/scripts/prism.js');
-Prism.plugins.customClass.prefix('code-');
-
-const cdnUrl = document.documentElement.dataset.cdnUrl;
 
 const domChange = document.startViewTransition ? document.startViewTransition.bind(document) : fn => fn();
 
@@ -57,17 +51,11 @@ function init() {
       typography: '',
     },
     params: { colors: '', palette: '', brand: '', typography: '' },
-    urlParams: new URLSearchParams(location.search),
+    urlParams: new Permalink(),
   };
 
-  // Read URL params and apply them. This facilitates permalinks.
+  data.urlParams.mapObject(data.params);
-  if (location.search) {
+  data.urlParams.writeTo(data.params);
-    for (let aspect in data.params) {
-      if (data.urlParams.has(aspect)) {
-        data.params[aspect] = data.urlParams.get(aspect);
-      }
-    }
-  }
 
   if (computed.isRemixed) {
     // Start with the remixing UI open if the theme has been remixed
@@ -119,6 +107,10 @@ function setDefault(select, value) {
 }
 
 function render(changedAspect) {
+  if (!globalThis.demo) {
+    return;
+  }
+
   let url = new URL(demo.src);
 
   if (!changedAspect || changedAspect === 'colors') {
@@ -133,16 +125,11 @@ function render(changedAspect) {
 
   for (let aspect in data.params) {
     let value = data.params[aspect];
-
-    if (value) {
-      data.urlParams.set(aspect, value);
-    } else {
-      data.urlParams.delete(aspect);
-    }
-
     selects[aspect].value = value;
   }
 
+  data.urlParams.readFrom(data.params);
+
   // Update demo URL
   domChange(() => {
     url.search = data.urlParams;
@@ -150,18 +137,14 @@ function render(changedAspect) {
     return new Promise(resolve => (demo.onload = resolve));
   });
 
-  // Update page URL. If there’s already a search, replace it.
+  // Update page URL
-  // We don’t want to clog the user’s history while they iterate
+  data.urlParams.updateLocation();
-  let historyAction = location.search ? 'replaceState' : 'pushState';
-  history[historyAction](null, '', `?${data.urlParams}`);
 
   // Update code snippets
   for (let language in codeSnippets) {
     let codeSnippet = codeSnippets[language];
-    let copyButton = codeSnippet.previousElementSibling;
+    let code = getThemeCode(data.baseTheme, data.params, { language, cdnUrl });
-    let code = getCode(data.baseTheme, data.params, { language, cdnUrl });
     codeSnippet.textContent = code;
-    copyButton.value = code;
     Prism.highlightElement(codeSnippet);
   }
 }

docs/docs/themes/showcase.css

@@ -12,6 +12,11 @@ body,
 #mix_and_match {
   font-weight: var(--wa-font-weight-semibold);
   color: var(--wa-color-text-quiet);
+  margin-block-end: var(--wa-space-xs);
+
+  html:not(.is-remixed) {
+    display: none;
+  }
 
   wa-icon {
     vertical-align: -0.15em;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@shoelace-style/webawesome",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@shoelace-style/webawesome",
-      "version": "3.0.0-alpha.10",
+      "version": "3.0.0-alpha.11",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shoelace-style/webawesome",
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.11",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",

src/components/button/button.ts

@@ -52,6 +52,7 @@ import styles from './button.css';
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
   static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
+  static rectProxy = 'button';
 
   static get validators() {
     return [...super.validators, MirrorValidator()];
@@ -224,17 +225,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
     this.button.blur();
   }
 
-  getBoundingClientRect(): DOMRect {
-    let rect = super.getBoundingClientRect();
-    let buttonRect = this.button.getBoundingClientRect();
-
-    if (rect.width === 0 && buttonRect.width > 0) {
-      return buttonRect;
-    }
-
-    return rect;
-  }
-
   render() {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`button`;

src/components/checkbox/checkbox.ts

@@ -127,7 +127,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
   @property({ type: Boolean, reflect: true }) required = false;
 
   /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
-  @property({ attribute: 'hint' }) hint = '';
+  @property() hint = '';
 
   private handleClick() {
     this.hasInteracted = true;

src/components/code-demo/code-demo.ts

@@ -1,7 +1,6 @@
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import recursiveQSA from '../../internal/recursive-qsa.js';
 import { HasSlotController, getInnerHTML } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import '../icon/icon.js';
@@ -326,6 +325,25 @@ function absolutizeURLs(root: Element | DocumentFragment, base = location.href)
   }
 }
 
+/**
+ * Get elements that match a selector within an element’s shadow tree
+ * and any parent shadow trees, all the way up to the light DOM
+ * @param selector
+ * @param node - The node to start the search from
+ */
+function recursiveQSA(selector: string, node: Node) {
+  const ret: Element[] = [];
+
+  for (let root = node; root.nodeType !== Node.DOCUMENT_NODE; ) {
+    root = root.getRootNode();
+    const elements = (root as ShadowRoot | Document).querySelectorAll(selector);
+
+    ret.push(...elements);
+  }
+
+  return ret;
+}
+
 function dedent(code: string) {
   // Remove blank lines at the start and end
   code = code.replace(/^\s*\n|\n\s*$/g, '');

src/components/details/details.css

@@ -55,12 +55,6 @@ details {
   padding-block-start: var(--spacing);
 }
 
-.show {
-}
-
-.hide {
-}
-
 @keyframes show {
   from {
   }

src/components/isolate/isolate.ts

@@ -1,48 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import recursiveQSA from '../../internal/recursive-qsa.js';
-import WebAwesomeElement from '../../internal/webawesome-element.js';
-
-/**
- * @summary Render a piece of code in shadow DOM. An alternative to DSD that plays nicely with DOM operations like cloning etc.
- * @documentation https://backers.webawesome.com/docs/components/isolate
- * @status experimental
- * @since 3.0
- *
- */
-@customElement('wa-isolate')
-export default class WaIsolate extends WebAwesomeElement {
-  /** Includes resources and other elements from the surrounding page */
-  @property({ reflect: true }) include?: string;
-
-  render() {
-    return unsafeHTML(this.getShadowHTML());
-  }
-
-  // TODO memoize this and only update if:
-  // - this.include changes
-  // - elements have been added/removed that match the selector
-  // - Element contents have changed
-  private getShadowHTML(): string {
-    let html = '';
-
-    if (this.ownerDocument) {
-      if (this.include) {
-        let includedElements = recursiveQSA(this.include, this);
-        html += includedElements.map(el => el.outerHTML).join('\n');
-      }
-
-      // Get template elements from the light DOM
-      const templates = Array.from(this.querySelectorAll(':scope > template'));
-      html += templates.map(template => template.innerHTML).join('\n');
-    }
-
-    return html;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'wa-isolate': WaIsolate;
-  }
-}

src/components/page/page.css

@@ -9,7 +9,7 @@
   --banner-height: 0px;
   --header-height: 0px;
   --subheader-height: 0px;
-  --scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+  --scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 0.5em);
 }
 
 slot[name]:not([name='skip-to-content'], [name='navigation-toggle'])::slotted(*) {

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

@@ -50,6 +50,7 @@ import styles from './radio-button.css';
 @customElement('wa-radio-button')
 export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
   static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, buttonStyles, styles];
+  static rectProxy = 'input';
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
 

src/components/radio/radio.css

@@ -1,15 +1,15 @@
-:host(:focus-visible) {
+:host {
-  outline: none;
+  display: grid;
-}
+  grid-template-columns: auto 1fr;
-
-.radio {
-  display: flex;
   align-items: top;
-  font: inherit;
   vertical-align: middle;
   cursor: pointer;
 }
 
+:host(:focus-visible) {
+  outline: none;
+}
+
 .checked-icon {
   display: flex;
   fill: currentColor;
@@ -19,6 +19,11 @@
 }
 
 /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-.radio:not(.radio--checked) svg circle {
+:host(:not(:state(checked))) svg circle {
   opacity: 0;
 }
+
+[part~='hint'] {
+  grid-column: 2;
+  margin-block-start: var(--wa-space-3xs);
+}

src/components/radio/radio.ts

@@ -1,9 +1,11 @@
+import type { PropertyValues } from 'lit';
 import { html, isServer } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { watch } from '../../internal/watch.js';
+import { HasSlotController } from '../../internal/slot.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/radio.css';
+import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import '../icon/icon.js';
 import styles from './radio.css';
@@ -17,14 +19,15 @@ import styles from './radio.css';
  * @dependency wa-icon
  *
  * @slot - The radio's label.
+ * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
  *
  * @event blur - Emitted when the control loses focus.
  * @event focus - Emitted when the control gains focus.
  *
- * @csspart base - The component's base wrapper.
  * @csspart control - The circular container that wraps the radio's checked state.
  * @csspart checked-icon - The checked icon.
  * @csspart label - The container that wraps the radio's label.
+ * @csspart hint - The hint's wrapper.
  *
  * @cssproperty --background-color - The radio's background color.
  * @cssproperty --background-color-checked - The radio's background color when checked.
@@ -42,7 +45,7 @@ import styles from './radio.css';
  */
 @customElement('wa-radio')
 export default class WaRadio extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [sizeStyles, nativeStyles, styles];
+  static shadowStyle = [formControlStyles, sizeStyles, nativeStyles, styles];
 
   @state() checked = false;
 
@@ -63,6 +66,11 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
   /** Disables the radio. */
   @property({ type: Boolean }) disabled = false;
 
+  /** The radio's hint. If you need to display HTML, use the `hint` slot instead. */
+  @property() hint = '';
+
+  private readonly hasSlotController = new HasSlotController(this, 'hint');
+
   constructor() {
     super();
     if (!isServer) {
@@ -81,11 +89,19 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
     this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
   }
 
-  @watch('checked')
+  updated(changedProperties: PropertyValues<this>) {
-  handleCheckedChange() {
+    super.updated(changedProperties);
-    this.toggleCustomState('checked', this.checked);
+
-    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    if (changedProperties.has('checked')) {
-    this.tabIndex = this.checked ? 0 : -1;
+      this.toggleCustomState('checked', this.checked);
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+      this.tabIndex = this.checked ? 0 : -1;
+    }
+
+    if (changedProperties.has('disabled')) {
+      this.toggleCustomState('disabled', this.disabled);
+      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    }
   }
 
   /**
@@ -95,12 +111,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
     // We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself.
   }
 
-  @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    this.toggleCustomState('disabled', this.disabled);
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-  }
-
   private handleClick = () => {
     if (!this.disabled) {
       this.checked = true;
@@ -108,26 +118,30 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
   };
 
   render() {
-    return html`
+    const hasHintSlot = isServer ? true : this.hasSlotController.test('hint');
-      <span
+    const hasHint = this.hint ? true : !!hasHintSlot;
-        part="base"
-        class=${classMap({
-          radio: true,
-          'radio--checked': this.checked,
-        })}
-      >
-        <span part="control" class="control">
-          ${this.checked
-            ? html`
-                <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
-                  <circle cx="8" cy="8" r="8" />
-                </svg>
-              `
-            : ''}
-        </span>
 
-        <slot part="label" class="label"></slot>
+    return html`
+      <span part="control" class="control">
+        ${this.checked
+          ? html`
+              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
+                <circle cx="8" cy="8" r="8" />
+              </svg>
+            `
+          : ''}
       </span>
+
+      <slot part="label" class="label"></slot>
+
+      <slot
+        name="hint"
+        aria-hidden=${hasHint ? 'false' : 'true'}
+        class="${classMap({ 'has-slotted': hasHint })}"
+        id="hint"
+        part="hint"
+        >${this.hint}</slot
+      >
     `;
   }
 }

src/components/select/select.css

@@ -177,7 +177,7 @@
   align-items: center;
   color: var(--wa-color-neutral-on-quiet);
   transition: rotate var(--wa-transition-slow) ease;
-  rotate: 0;
+  rotate: 0deg;
   margin-inline-start: var(--wa-space-s);
 
   .open & {
@@ -194,7 +194,7 @@
   background: var(--wa-color-surface-raised);
   border-color: var(--wa-color-surface-border);
   border-radius: var(--wa-border-radius-m);
-  border-style: var(--border-style);
+  border-style: var(--wa-border-style);
   border-width: var(--border-width);
   padding-block: var(--wa-space-xs);
   padding-inline: 0;
@@ -208,13 +208,13 @@
   &::slotted(wa-divider) {
     --spacing: var(--wa-space-xs);
   }
-
+}
-  &::slotted(small) {
+
-    display: block;
+slot:not([name])::slotted(small) {
-    font-size: var(--wa-font-size-s);
+  display: block;
-    font-weight: var(--wa-font-weight-semibold);
+  font-size: var(--wa-font-size-s);
-    color: var(--wa-color-text-quiet);
+  font-weight: var(--wa-font-weight-semibold);
-    padding-block: var(--wa-space-xs);
+  color: var(--wa-color-text-quiet);
-    padding-inline: var(--wa-space-xl);
+  padding-block: var(--wa-space-xs);
-  }
+  padding-inline: var(--wa-space-xl);
 }

src/components/select/select.ts

@@ -927,6 +927,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
         </div>
 
         <slot
+          id="hint"
           name="hint"
           part="hint"
           class=${classMap({

src/components/switch/switch.ts

@@ -49,6 +49,7 @@ import styles from './switch.css';
  */
 @customElement('wa-switch')
 export default class WaSwitch extends WebAwesomeFormAssociatedElement {
+  static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
   static shadowStyle = [formControlStyles, sizeStyles, styles];
 
   static get validators() {

src/components/tab/tab.ts

@@ -24,7 +24,6 @@ let id = 0;
 @customElement('wa-tab')
 export default class WaTab extends WebAwesomeElement {
   static shadowStyle = styles;
-  public slot = 'nav'; // Auto-slot into nav slot
 
   private readonly attrId = ++id;
   private readonly componentId = `wa-tab-${this.attrId}`;
@@ -47,6 +46,9 @@ export default class WaTab extends WebAwesomeElement {
   @property({ type: Number, reflect: true }) tabIndex = 0;
 
   connectedCallback() {
+    // Auto-slot into nav slot
+    this.slot ||= 'nav';
+
     super.connectedCallback();
     this.setAttribute('role', 'tab');
   }

src/components/tooltip/tooltip.css

@@ -4,10 +4,16 @@
   --max-width: 30ch;
   --padding: var(--wa-space-2xs) var(--wa-space-xs);
 
+  /** These styles are added so we don't interfere in the DOM. */
   display: inline-block;
   position: absolute;
 
-  /** These styles are added so we dont interfere in the DOM. */
+  /** Defaults for inherited CSS properties */
+  color: var(--wa-tooltip-content-color);
+  font-size: var(--wa-tooltip-font-size);
+  line-height: var(--wa-tooltip-line-height);
+  text-align: start;
+  white-space: normal;
 }
 
 .tooltip {
@@ -41,12 +47,6 @@
   max-width: var(--max-width);
   border-radius: var(--border-radius);
   background-color: var(--background-color);
-  font: inherit;
-  color: var(--wa-tooltip-content-color);
-  font-size: var(--wa-tooltip-font-size);
-  line-height: var(--wa-tooltip-line-height);
-  text-align: start;
-  white-space: normal;
   padding: var(--padding);
   user-select: none;
   -webkit-user-select: none;

src/components/tooltip/tooltip.ts

@@ -35,11 +35,8 @@ import styles from './tooltip.css';
  *
  * @cssproperty --background-color - The tooltip's background color.
  * @cssproperty --border-radius - The radius of the tooltip's corners.
- * @cssproperty --text-color - The color of the tooltip's content.
  * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
  * @cssproperty --padding - The padding within the tooltip.
- * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
- * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
  */
 @customElement('wa-tooltip')
 export default class WaTooltip extends WebAwesomeElement {

src/internal/recursive-qsa.ts

@@ -1,18 +0,0 @@
-/**
- * Get elements that match a selector within an element’s shadow tree
- * and any parent shadow trees, all the way up to the light DOM
- * @param selector
- * @param node - The node to start the search from
- */
-export default function recursiveQSA(selector: string, node: Node) {
-  const ret: Element[] = [];
-
-  for (let root = node; root.nodeType !== Node.DOCUMENT_NODE; ) {
-    root = root.getRootNode();
-    const elements = (root as ShadowRoot | Document).querySelectorAll(selector);
-
-    ret.push(...elements);
-  }
-
-  return ret;
-}

src/internal/webawesome-element.ts

@@ -204,6 +204,32 @@ export default class WebAwesomeElement extends LitElement {
     );
   }
 
+  getBoundingClientRect(): DOMRect {
+    let rect = super.getBoundingClientRect();
+
+    if (rect.width === 0 && rect.height === 0) {
+      let Self = this.constructor as typeof WebAwesomeElement;
+
+      if (Self.rectProxy) {
+        let element = this[Self.rectProxy as keyof this];
+        if (element instanceof Element) {
+          let childRect = element.getBoundingClientRect();
+          if (childRect.width > 0 || childRect.height > 0) {
+            return childRect;
+          }
+        }
+      }
+    }
+
+    return rect;
+  }
+
+  /**
+   * If getBoundingClientRect() returns an empty rect,
+   * should we check another element?
+   */
+  static rectProxy: undefined | string;
+
   static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
     if (options) {
       if (options.initial !== undefined && options.default === undefined) {

src/styles/brand/base.css

@@ -0,0 +1,74 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+:where([class^='wa-brand-'], [class*=' wa-brand-']) {
+  /**
+   * Conditional tokens for use in color-mix()
+   * --wa-color-brand-if-lt-N ➡️ 100% if key < N, 0% otherwise
+   * --wa-color-brand-if-gte-N ➡️ 100% if key >= N, 0% otherwise
+   */
+  --wa-color-brand-if-lt-40: calc(clamp(0, 40 - var(--wa-color-brand-key), 1) * 100%);
+  --wa-color-brand-if-lt-50: calc(clamp(0, 50 - var(--wa-color-brand-key), 1) * 100%);
+  --wa-color-brand-if-lt-60: calc(clamp(0, 60 - var(--wa-color-brand-key), 1) * 100%);
+  --wa-color-brand-if-lt-70: calc(clamp(0, 70 - var(--wa-color-brand-key), 1) * 100%);
+  --wa-color-brand-if-lt-80: calc(clamp(0, 80 - var(--wa-color-brand-key), 1) * 100%);
+
+  --wa-color-brand-if-gte-40: calc(100% - var(--wa-color-brand-if-lt-40));
+  --wa-color-brand-if-gte-50: calc(100% - var(--wa-color-brand-if-lt-50));
+  --wa-color-brand-if-gte-60: calc(100% - var(--wa-color-brand-if-lt-60));
+  --wa-color-brand-if-gte-70: calc(100% - var(--wa-color-brand-if-lt-70));
+  --wa-color-brand-if-gte-80: calc(100% - var(--wa-color-brand-if-lt-80));
+
+  /*
+   * Convenience tokens for common tint cutoffs
+   * --wa-color-brand-N-max ➡️ var(--color-brand) if key <= N, var(--color-brand-N) otherwise
+   * --wa-color-brand-N-min ➡️ var(--color-brand) if key >= N, var(--color-brand-N) otherwise
+   */
+  --wa-color-brand-40-max: color-mix(
+    in oklab,
+    var(--wa-color-brand) var(--wa-color-brand-if-lt-40),
+    var(--wa-color-brand-40)
+  );
+  --wa-color-brand-40-min: color-mix(
+    in oklab,
+    var(--wa-color-brand) var(--wa-color-brand-if-gte-40),
+    var(--wa-color-brand-40)
+  );
+
+  --wa-color-brand-50-max: color-mix(
+    in oklab,
+    var(--wa-color-brand) var(--wa-color-brand-if-lt-50),
+    var(--wa-color-brand-50)
+  );
+  --wa-color-brand-50-min: color-mix(
+    in oklab,
+    var(--wa-color-brand) var(--wa-color-brand-if-gte-50),
+    var(--wa-color-brand-50)
+  );
+
+  --wa-color-brand-60-max: color-mix(
+    in oklab,
+    var(--wa-color-brand) var(--wa-color-brand-if-lt-60),
+    var(--wa-color-brand-60)
+  );
+  --wa-color-brand-60-min: color-mix(
+    in oklab,
+    var(--wa-color-brand) var(--wa-color-brand-if-gte-60),
+    var(--wa-color-brand-60)
+  );
+
+  --wa-color-brand-70-max: color-mix(
+    in oklab,
+    var(--wa-color-brand) var(--wa-color-brand-if-lt-70),
+    var(--wa-color-brand-70)
+  );
+  --wa-color-brand-70-min: color-mix(
+    in oklab,
+    var(--wa-color-brand) var(--wa-color-brand-if-gte-70),
+    var(--wa-color-brand-70)
+  );
+
+  /* Text color: white if key < 60, brand-10 otherwise */
+  --wa-color-brand-on: color-mix(in oklab, var(--wa-color-brand-10) var(--wa-color-brand-if-gte-60), white);
+}

src/styles/brand/blue.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-blue {
   --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);

src/styles/brand/cyan.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-cyan {
   --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);

src/styles/brand/gray.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-gray {
   --wa-color-brand-95: var(--wa-color-gray-95);
   --wa-color-brand-90: var(--wa-color-gray-90);
   --wa-color-brand-80: var(--wa-color-gray-80);

src/styles/brand/green.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-green {
   --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);

src/styles/brand/indigo.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-indigo {
   --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);

src/styles/brand/orange.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-orange {
   --wa-color-brand-95: var(--wa-color-orange-95);
   --wa-color-brand-90: var(--wa-color-orange-90);
   --wa-color-brand-80: var(--wa-color-orange-80);

src/styles/brand/pink.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-pink {
   --wa-color-brand-95: var(--wa-color-pink-95);
   --wa-color-brand-90: var(--wa-color-pink-90);
   --wa-color-brand-80: var(--wa-color-pink-80);

src/styles/brand/purple.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-purple {
   --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);

src/styles/brand/red.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-red {
   --wa-color-brand-95: var(--wa-color-red-95);
   --wa-color-brand-90: var(--wa-color-red-90);
   --wa-color-brand-80: var(--wa-color-red-80);

src/styles/brand/yellow.css

@@ -1,7 +1,10 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+:where([class^='wa-palette-'], [class*=' wa-palette-']),
+.wa-brand-yellow {
   --wa-color-brand-95: var(--wa-color-yellow-95);
   --wa-color-brand-90: var(--wa-color-yellow-90);
   --wa-color-brand-80: var(--wa-color-yellow-80);

src/styles/color/anodized.css

@@ -2,115 +2,143 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-anodized {
-  --wa-color-red-95: #fbeeeb /* oklch(95.851% 0.01469 33.071) */;
+  --wa-color-red-95: #ffefee /* oklch(96.448% 0.01742 21.806) */;
-  --wa-color-red-90: #f8e0d9 /* oklch(92.431% 0.02823 36.865) */;
+  --wa-color-red-90: #fededd /* oklch(92.674% 0.03556 19.95) */;
-  --wa-color-red-80: #efbdb1 /* oklch(83.972% 0.06035 33.801) */;
+  --wa-color-red-80: #fabab8 /* oklch(84.695% 0.0745 20.791) */;
-  --wa-color-red-70: #e39f8d /* oklch(76.38% 0.08577 35.424) */;
+  --wa-color-red-70: #f19695 /* oklch(76.595% 0.11008 20.609) */;
-  --wa-color-red-60: #d1806b /* oklch(68.083% 0.10573 35.329) */;
+  --wa-color-red-60: #d47c7e /* oklch(68.199% 0.10963 18.885) */;
-  --wa-color-red-50: #b35e49 /* oklch(57.764% 0.11532 34.927) */;
+  --wa-color-red-50: #af5e5a /* oklch(57.551% 0.10599 23.859) */;
-  --wa-color-red-40: #8e4330 /* oklch(47.527% 0.10671 35.325) */;
+  --wa-color-red-40: #89453f /* oklch(47.393% 0.09388 26.419) */;
-  --wa-color-red-30: #733223 /* oklch(40.293% 0.09564 34.326) */;
+  --wa-color-red-30: #6d352f /* oklch(40.077% 0.08085 27.557) */;
-  --wa-color-red-20: #562317 /* oklch(32.748% 0.07905 34.548) */;
+  --wa-color-red-20: #522521 /* oklch(32.622% 0.06818 26.677) */;
-  --wa-color-red-10: #36130a /* oklch(23.979% 0.05887 35.518) */;
+  --wa-color-red-10: #331512 /* oklch(23.979% 0.04918 27.221) */;
-  --wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
+  --wa-color-red-05: #220b09 /* oklch(18.625% 0.04007 26.766) */;
-  --wa-color-red: var(--wa-color-red-50);
+  --wa-color-red: var(--wa-color-red-70);
-  --wa-color-red-key: 50;
+  --wa-color-red-key: 70;
 
-  --wa-color-yellow-95: #fff2b8 /* oklch(95.764% 0.07527 96.955) */;
+  --wa-color-orange-95: oklch(96.462% 0.02077 52.138);
-  --wa-color-yellow-90: #ffe578 /* oklch(92.163% 0.13215 96.194) */;
+  --wa-color-orange-90: oklch(92.556% 0.04363 51.242);
-  --wa-color-yellow-80: #eac46c /* oklch(83.54% 0.11551 86.482) */;
+  --wa-color-orange-80: #fdbb96 /* oklch(84.396% 0.09052 50.397) */;
-  --wa-color-yellow-70: #d5a766 /* oklch(75.67% 0.0989 74.916) */;
+  --wa-color-orange-70: #eb9c74 /* oklch(76.151% 0.10953 47.299) */;
-  --wa-color-yellow-60: #bd8a5e /* oklch(67.327% 0.08618 61.351) */;
+  --wa-color-orange-60: #cf8162 /* oklch(67.86% 0.10698 42.148) */;
-  --wa-color-yellow-50: #9d6a4f /* oklch(57.149% 0.0766 48.607) */;
+  --wa-color-orange-50: #aa6248 /* oklch(57.281% 0.1014 40.415) */;
-  --wa-color-yellow-40: #794f3c /* oklch(46.965% 0.06418 45.076) */;
+  --wa-color-orange-40: #864834 /* oklch(47.233% 0.08958 39.166) */;
-  --wa-color-yellow-30: #603d2f /* oklch(39.723% 0.05466 42.556) */;
+  --wa-color-orange-30: #6b3727 /* oklch(39.974% 0.07776 38.975) */;
-  --wa-color-yellow-20: #482b21 /* oklch(32.256% 0.04681 39.773) */;
+  --wa-color-orange-20: #50271a /* oklch(32.519% 0.0649 38.022) */;
-  --wa-color-yellow-10: #2c1912 /* oklch(23.678% 0.03339 40.974) */;
+  --wa-color-orange-10: #32160e /* oklch(23.873% 0.04713 38.423) */;
-  --wa-color-yellow-05: #1d0e0a /* oklch(18.423% 0.02718 35.681) */;
+  --wa-color-orange-05: #210c06 /* oklch(18.614% 0.03797 38.589) */;
-  --wa-color-yellow: var(--wa-color-yellow-90);
+  --wa-color-orange: var(--wa-color-orange-70);
-  --wa-color-yellow-key: 90;
+  --wa-color-orange-key: 70;
 
-  --wa-color-green-95: #dcf8ea /* oklch(95.5% 0.03463 164.16) */;
+  --wa-color-yellow-95: #faf3e1 /* oklch(96.479% 0.02487 89.211) */;
-  --wa-color-green-90: #bcf1d8 /* oklch(91.473% 0.06399 164.58) */;
+  --wa-color-yellow-90: #f4e5be /* oklch(92.412% 0.0535 89.488) */;
-  --wa-color-green-80: #6dddad /* oklch(81.852% 0.12484 163.42) */;
+  --wa-color-yellow-80: #eac673 /* oklch(84.03% 0.1101 86.581) */;
-  --wa-color-green-70: #33c685 /* oklch(73.519% 0.15428 158.98) */;
+  --wa-color-yellow-70: #d4a85b /* oklch(75.609% 0.10842 79.92) */;
-  --wa-color-green-60: #0a6 /* oklch(64.917% 0.15588 156.54) */;
+  --wa-color-yellow-60: #bf8b4a /* oklch(67.445% 0.10375 70.58) */;
-  --wa-color-green-50: #008754 /* oklch(54.923% 0.12782 158.29) */;
+  --wa-color-yellow-50: #a06938 /* oklch(56.952% 0.09579 60.65) */;
-  --wa-color-green-40: #006646 /* oklch(45.146% 0.09722 163.25) */;
+  --wa-color-yellow-40: #7f4d29 /* oklch(47.038% 0.08433 54.746) */;
-  --wa-color-green-30: #00503b /* oklch(38.299% 0.07764 167.91) */;
+  --wa-color-yellow-30: #663b1e /* oklch(39.848% 0.07399 52.93) */;
-  --wa-color-green-20: #003a2d /* oklch(31.045% 0.06006 172.22) */;
+  --wa-color-yellow-20: #4c2a14 /* oklch(32.393% 0.0609 51.89) */;
-  --wa-color-green-10: #00231b /* oklch(22.853% 0.04344 174.1) */;
+  --wa-color-yellow-10: #2f1809 /* oklch(23.743% 0.04463 52.113) */;
-  --wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
+  --wa-color-yellow-05: #1f0e04 /* oklch(18.6% 0.03542 53.04) */;
-  --wa-color-green: var(--wa-color-green-60);
+  --wa-color-yellow: var(--wa-color-yellow-80);
-  --wa-color-green-key: 60;
+  --wa-color-yellow-key: 80;
 
-  --wa-color-cyan-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
+  --wa-color-green-95: #ebf6e0 /* oklch(95.901% 0.03126 128.83) */;
-  --wa-color-cyan-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
+  --wa-color-green-90: #d3efbe /* oklch(91.922% 0.0713 131.97) */;
-  --wa-color-cyan-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
+  --wa-color-green-80: #96db86 /* oklch(82.501% 0.13433 139.79) */;
-  --wa-color-cyan-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
+  --wa-color-green-70: #68c17c /* oklch(73.758% 0.13164 149.51) */;
-  --wa-color-cyan-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
+  --wa-color-green-60: #4aa672 /* oklch(65.518% 0.11814 156.17) */;
-  --wa-color-cyan-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
+  --wa-color-green-50: #2e845d /* oklch(55.093% 0.10286 160.26) */;
-  --wa-color-cyan-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
+  --wa-color-green-40: #1b6548 /* oklch(45.377% 0.0863 162.75) */;
-  --wa-color-cyan-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
+  --wa-color-green-30: #104f38 /* oklch(38.219% 0.07374 163.76) */;
-  --wa-color-cyan-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
+  --wa-color-green-20: #083a29 /* oklch(31.135% 0.05985 165.09) */;
-  --wa-color-cyan-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
+  --wa-color-green-10: #032317 /* oklch(22.865% 0.0446 164.36) */;
-  --wa-color-cyan-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
+  --wa-color-green-05: #01160d /* oklch(17.827% 0.03566 164.38) */;
+  --wa-color-green: var(--wa-color-green-80);
+  --wa-color-green-key: 80;
+
+  --wa-color-cyan-95: #cafbfd /* oklch(95.491% 0.04984 199.43) */;
+  --wa-color-cyan-90: #97f5f8 /* oklch(91.286% 0.08952 198.32) */;
+  --wa-color-cyan-80: #3fdee7 /* oklch(82.5% 0.12703 200.7) */;
+  --wa-color-cyan-70: #00c0d4 /* oklch(73.886% 0.127 207.98) */;
+  --wa-color-cyan-60: #00a3bf /* oklch(65.895% 0.11686 215.74) */;
+  --wa-color-cyan-50: #007fa2 /* oklch(55.537% 0.10592 225.72) */;
+  --wa-color-cyan-40: #006082 /* oklch(45.89% 0.09291 231.37) */;
+  --wa-color-cyan-30: #014a6b /* oklch(38.746% 0.08372 236.7) */;
+  --wa-color-cyan-20: #003652 /* oklch(31.672% 0.07138 239.03) */;
+  --wa-color-cyan-10: #002034 /* oklch(23.245% 0.05366 240.46) */;
+  --wa-color-cyan-05: #001422 /* oklch(18.196% 0.041 239.02) */;
   --wa-color-cyan: var(--wa-color-cyan-80);
   --wa-color-cyan-key: 80;
 
-  --wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
+  --wa-color-blue-95: #e5f6ff /* oklch(96.324% 0.02167 230.54) */;
-  --wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
+  --wa-color-blue-90: #c7ebff /* oklch(92.061% 0.04647 232.28) */;
-  --wa-color-blue-80: #abcaff /* oklch(83.49% 0.082 261.03) */;
+  --wa-color-blue-80: #8ed2f9 /* oklch(83.243% 0.08774 234.44) */;
-  --wa-color-blue-70: #83b0fe /* oklch(75.655% 0.12308 260.97) */;
+  --wa-color-blue-70: #5db7f3 /* oklch(74.844% 0.12234 240.33) */;
-  --wa-color-blue-60: #5593fe /* oklch(67.328% 0.1713 260.55) */;
+  --wa-color-blue-60: #309aee /* oklch(66.707% 0.15592 247.36) */;
-  --wa-color-blue-50: #3d74d2 /* oklch(57.024% 0.15628 260.38) */;
+  --wa-color-blue-50: #0774df /* oklch(56.704% 0.18422 255.07) */;
-  --wa-color-blue-40: #2e589f /* oklch(46.829% 0.12443 260.23) */;
+  --wa-color-blue-40: #0152c1 /* oklch(47.066% 0.187 259.59) */;
-  --wa-color-blue-30: #24457c /* oklch(39.571% 0.10098 260.03) */;
+  --wa-color-blue-30: #003ea2 /* oklch(40.154% 0.17138 260.8) */;
-  --wa-color-blue-20: #1b325b /* oklch(32.168% 0.07881 261.06) */;
+  --wa-color-blue-20: #002b7f /* oklch(32.816% 0.14852 261.7) */;
-  --wa-color-blue-10: #101d35 /* oklch(23.292% 0.05008 261.75) */;
+  --wa-color-blue-10: #001853 /* oklch(24.067% 0.11176 262.05) */;
-  --wa-color-blue-05: #0a1222 /* oklch(18.375% 0.0352 263.19) */;
+  --wa-color-blue-05: #000e39 /* oklch(18.796% 0.0868 261.98) */;
-  --wa-color-blue: var(--wa-color-blue-60);
+  --wa-color-blue: var(--wa-color-blue-40);
-  --wa-color-blue-key: 60;
+  --wa-color-blue-key: 40;
 
-  --wa-color-indigo-95: #f5efff /* oklch(96.142% 0.02215 302.94) */;
+  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
-  --wa-color-indigo-90: #ede0ff /* oklch(92.64% 0.04374 304.51) */;
+  --wa-color-indigo-90: #e1e4fe /* oklch(92.448% 0.03538 280.45) */;
-  --wa-color-indigo-80: #d7bdff /* oklch(84.265% 0.09443 302.44) */;
+  --wa-color-indigo-80: #bfc6fe /* oklch(84.035% 0.07865 279.01) */;
-  --wa-color-indigo-70: #bf9efe /* oklch(76.541% 0.13786 298.94) */;
+  --wa-color-indigo-70: #9fa8fc /* oklch(75.744% 0.12084 278.41) */;
-  --wa-color-indigo-60: #a280fa /* oklch(68.571% 0.17519 294.14) */;
+  --wa-color-indigo-60: #828bf6 /* oklch(67.774% 0.15666 277.72) */;
-  --wa-color-indigo-50: #7f5bec /* oklch(58.581% 0.20817 289.86) */;
+  --wa-color-indigo-50: #6166e8 /* oklch(57.738% 0.19274 276.85) */;
-  --wa-color-indigo-40: #603dc8 /* oklch(48.557% 0.20262 287.93) */;
+  --wa-color-indigo-40: #4743d0 /* oklch(48.143% 0.20939 276.34) */;
-  --wa-color-indigo-30: #4c2ba5 /* oklch(41.119% 0.18229 287.94) */;
+  --wa-color-indigo-30: #372db3 /* oklch(41.009% 0.20044 276.19) */;
-  --wa-color-indigo-20: #381d7f /* oklch(33.629% 0.15279 287.75) */;
+  --wa-color-indigo-20: #291b90 /* oklch(33.874% 0.17803 276.48) */;
-  --wa-color-indigo-10: #210e53 /* oklch(24.589% 0.11518 287.13) */;
+  --wa-color-indigo-10: #170a61 /* oklch(24.844% 0.13871 276.05) */;
-  --wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
+  --wa-color-indigo-05: #0e0445 /* oklch(19.553% 0.11104 276.58) */;
-  --wa-color-indigo: var(--wa-color-indigo-50);
+  --wa-color-indigo: var(--wa-color-indigo-40);
-  --wa-color-indigo-key: 50;
+  --wa-color-indigo-key: 40;
 
-  --wa-color-purple-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
+  --wa-color-purple-95: #fbefff /* oklch(96.613% 0.02465 317.72) */;
-  --wa-color-purple-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
+  --wa-color-purple-90: #f7ddff /* oklch(92.895% 0.0531 318.2) */;
-  --wa-color-purple-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
+  --wa-color-purple-80: #edb7ff /* oklch(85.165% 0.11316 317.53) */;
-  --wa-color-purple-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
+  --wa-color-purple-70: #dc91fe /* oklch(77.161% 0.16803 314.62) */;
-  --wa-color-purple-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
+  --wa-color-purple-60: #c670f2 /* oklch(69.273% 0.19845 312.9) */;
-  --wa-color-purple-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
+  --wa-color-purple-50: #a34bda /* oklch(58.947% 0.21432 309.63) */;
-  --wa-color-purple-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
+  --wa-color-purple-40: #802fb6 /* oklch(48.965% 0.20261 307.82) */;
-  --wa-color-purple-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
+  --wa-color-purple-30: #661f96 /* oklch(41.488% 0.1815 307.02) */;
-  --wa-color-purple-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
+  --wa-color-purple-20: #4c1372 /* oklch(33.753% 0.1509 306.93) */;
-  --wa-color-purple-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
+  --wa-color-purple-10: #30074a /* oklch(24.849% 0.1139 307.37) */;
-  --wa-color-purple-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
+  --wa-color-purple-05: #200333 /* oklch(19.47% 0.0902 307.77) */;
   --wa-color-purple: var(--wa-color-purple-50);
   --wa-color-purple-key: 50;
 
-  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
+  --wa-color-pink-95: #ffedf6 /* oklch(96.291% 0.02268 345.75) */;
-  --wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
+  --wa-color-pink-90: #feddee /* oklch(92.966% 0.04248 345.5) */;
-  --wa-color-gray-80: #c2c9d0 /* oklch(83.255% 0.01246 247.98) */;
+  --wa-color-pink-80: #feb2e3 /* oklch(84.978% 0.10743 340.7) */;
-  --wa-color-gray-70: #a6b0ba /* oklch(75.244% 0.01824 248.07) */;
+  --wa-color-pink-70: #f688de /* oklch(77.315% 0.16826 335.79) */;
-  --wa-color-gray-60: #8897a3 /* oklch(66.841% 0.02477 242.06) */;
+  --wa-color-pink-60: #e560d6 /* oklch(69.598% 0.21242 332.2) */;
-  --wa-color-gray-50: #657888 /* oklch(56.309% 0.0335 243.8) */;
+  --wa-color-pink-50: #c234bf /* oklch(59.18% 0.23062 328.94) */;
-  --wa-color-gray-40: #435c6f /* oklch(46.235% 0.04323 241.6) */;
+  --wa-color-pink-40: #9b189b /* oklch(49.224% 0.21096 328.21) */;
-  --wa-color-gray-30: #2d485d /* oklch(38.946% 0.04864 242.89) */;
+  --wa-color-pink-30: #7c097e /* oklch(41.626% 0.18577 327.45) */;
-  --wa-color-gray-20: #18354a /* oklch(31.701% 0.05142 242.24) */;
+  --wa-color-pink-20: #5e0160 /* oklch(34.016% 0.15613 327.29) */;
-  --wa-color-gray-10: #012034 /* oklch(23.295% 0.05299 241.23) */;
+  --wa-color-pink-10: #3c003c /* oklch(24.992% 0.11486 328.36) */;
-  --wa-color-gray-05: #001421 /* oklch(18.122% 0.03959 237.04) */;
+  --wa-color-pink-05: #280029 /* oklch(19.507% 0.09014 327.31) */;
+  --wa-color-pink: var(--wa-color-pink-50);
+  --wa-color-pink-key: 50;
+
+  --wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
+  --wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
+  --wa-color-gray-80: #cacaca /* oklch(83.901% 0 none) */;
+  --wa-color-gray-70: #aeafaf /* oklch(75.321% 0.00114 197.13) */;
+  --wa-color-gray-60: #959595 /* oklch(66.984% 0 none) */;
+  --wa-color-gray-50: #757575 /* oklch(56.241% 0 none) */;
+  --wa-color-gray-40: #595959 /* oklch(46.4% 0 none) */;
+  --wa-color-gray-30: #454444 /* oklch(38.762% 0.00135 17.215) */;
+  --wa-color-gray-20: #323232 /* oklch(31.714% 0 none) */;
+  --wa-color-gray-10: #1d1d1d /* oklch(23.075% 0 none) */;
+  --wa-color-gray-05: #121212 /* oklch(18.22% 0 none) */;
   --wa-color-gray: var(--wa-color-gray-40);
   --wa-color-gray-key: 40;
 }

src/styles/color/bright.css

@@ -5,112 +5,140 @@
   --wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
   --wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
   --wa-color-red-80: #ffb7b7 /* oklch(84.652% 0.084 18.964) */;
-  --wa-color-red-70: #ff8e8e /* oklch(76.851% 0.13692 20.73) */;
+  --wa-color-red-70: #ff8e90 /* oklch(76.896% 0.13677 19.629) */;
-  --wa-color-red-60: #fd5f5f /* oklch(69.182% 0.19322 23.628) */;
+  --wa-color-red-60: #f76563 /* oklch(69.077% 0.18003 23.786) */;
-  --wa-color-red-50: #de3131 /* oklch(58.924% 0.20878 26.488) */;
+  --wa-color-red-50: #d04442 /* oklch(58.513% 0.17687 25.152) */;
-  --wa-color-red-40: #b40917 /* oklch(48.728% 0.19437 26.549) */;
+  --wa-color-red-40: #a52c2b /* oklch(48.271% 0.15774 25.737) */;
-  --wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
+  --wa-color-red-30: #861d1c /* oklch(40.905% 0.1406 26.45) */;
-  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
+  --wa-color-red-20: #680d0e /* oklch(33.449% 0.1237 26.777) */;
-  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
+  --wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
-  --wa-color-red-05: #300000 /* oklch(19.415% 0.07967 29.234) */;
+  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
-  --wa-color-red: var(--wa-color-red-50);
+  --wa-color-red: var(--wa-color-red-60);
-  --wa-color-red-key: 50;
+  --wa-color-red-key: 60;
 
-  --wa-color-yellow-95: #fef3c1 /* oklch(96.062% 0.06532 97.08) */;
+  --wa-color-orange-95: oklch(96.406% 0.04001 53.476);
-  --wa-color-yellow-90: #fee682 /* oklch(92.403% 0.1233 96.206) */;
+  --wa-color-orange-90: oklch(92.395% 0.07984 53.06);
-  --wa-color-yellow-80: #fbc217 /* oklch(84.22% 0.16883 86.577) */;
+  --wa-color-orange-80: oklch(84.389% 0.12224 47.981);
-  --wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
+  --wa-color-orange-70: oklch(76.55% 0.16521 42.512);
-  --wa-color-yellow-60: #e67700 /* oklch(68.349% 0.1693 54.965) */;
+  --wa-color-orange-60: #ea7237 /* oklch(68.444% 0.16501 44.349) */;
-  --wa-color-yellow-50: #b75d00 /* oklch(57.535% 0.1429 54.739) */;
+  --wa-color-orange-50: #c0561a /* oklch(57.844% 0.15254 45.085) */;
-  --wa-color-yellow-40: #8c4600 /* oklch(47.31% 0.11712 55.012) */;
+  --wa-color-orange-40: #963e05 /* oklch(47.639% 0.13153 45.898) */;
-  --wa-color-yellow-30: #6f3600 /* oklch(40.006% 0.09924 54.843) */;
+  --wa-color-orange-30: oklch(40.376% 0.11554 45.517);
-  --wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
+  --wa-color-orange-20: oklch(32.94% 0.09927 45.913);
-  --wa-color-yellow-10: #341500 /* oklch(23.823% 0.06026 53.274) */;
+  --wa-color-orange-10: oklch(24.083% 0.07743 46.027);
-  --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
+  --wa-color-orange-05: oklch(18.817% 0.06098 48.455);
-  --wa-color-yellow: var(--wa-color-yellow-60);
+  --wa-color-orange: var(--wa-color-orange-70);
-  --wa-color-yellow-key: 60;
+  --wa-color-orange-key: 70;
 
-  --wa-color-green-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
+  --wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */;
-  --wa-color-green-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
+  --wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */;
-  --wa-color-green-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
+  --wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */;
-  --wa-color-green-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
+  --wa-color-yellow-70: #f29c00 /* oklch(76.127% 0.16443 70.48) */;
-  --wa-color-green-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
+  --wa-color-yellow-60: #d08402 /* oklch(67.671% 0.14665 69.482) */;
-  --wa-color-green-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
+  --wa-color-yellow-50: #a56804 /* oklch(57.027% 0.1228 69.447) */;
-  --wa-color-green-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
+  --wa-color-yellow-40: #7d4f04 /* oklch(46.866% 0.09949 70.54) */;
-  --wa-color-green-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
+  --wa-color-yellow-30: #643d03 /* oklch(39.73% 0.08492 68.821) */;
-  --wa-color-green-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
+  --wa-color-yellow-20: #4a2c01 /* oklch(32.318% 0.06941 69.3) */;
-  --wa-color-green-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
+  --wa-color-yellow-10: #2d1901 /* oklch(23.512% 0.04963 68.776) */;
-  --wa-color-green-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
+  --wa-color-yellow-05: #1d0f00 /* oklch(18.392% 0.03939 71.947) */;
-  --wa-color-green: var(--wa-color-green-70);
+  --wa-color-yellow: var(--wa-color-yellow-80);
-  --wa-color-green-key: 70;
+  --wa-color-yellow-key: 80;
 
-  --wa-color-cyan-95: #dcf9fc /* oklch(96.213% 0.03042 204.23) */;
+  --wa-color-green-95: #dbfaf0 /* oklch(96.006% 0.03481 174.15) */;
-  --wa-color-cyan-90: #aff0f6 /* oklch(91.368% 0.06543 203.24) */;
+  --wa-color-green-90: #b1f3de /* oklch(91.419% 0.0722 172.95) */;
-  --wa-color-cyan-80: #69dae9 /* oklch(82.807% 0.10458 206.97) */;
+  --wa-color-green-80: #3fe2b2 /* oklch(81.853% 0.14907 168.5) */;
-  --wa-color-cyan-70: #2bbfd4 /* oklch(74.03% 0.11967 209.65) */;
+  --wa-color-green-70: #29c596 /* oklch(73.487% 0.14194 166.89) */;
-  --wa-color-cyan-60: #12a3b8 /* oklch(65.721% 0.1115 211.17) */;
+  --wa-color-green-60: #19a87d /* oklch(65.107% 0.13007 166.01) */;
-  --wa-color-cyan-50: #0c8195 /* oklch(55.546% 0.09532 213.91) */;
+  --wa-color-green-50: #0a8560 /* oklch(54.742% 0.11293 164.94) */;
-  --wa-color-cyan-40: #096272 /* oklch(45.73% 0.07805 214.43) */;
+  --wa-color-green-40: #036648 /* oklch(45.239% 0.09474 164.51) */;
-  --wa-color-cyan-30: #074c59 /* oklch(38.429% 0.06506 214.82) */;
+  --wa-color-green-30: #015038 /* oklch(38.229% 0.08003 164.89) */;
-  --wa-color-cyan-20: #063842 /* oklch(31.484% 0.05211 215.06) */;
+  --wa-color-green-20: #003a28 /* oklch(30.885% 0.06454 165.46) */;
-  --wa-color-cyan-10: #032127 /* oklch(22.892% 0.03684 213.41) */;
+  --wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
-  --wa-color-cyan-05: #021518 /* oklch(18.045% 0.02758 207.97) */;
+  --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
-  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-green: var(--wa-color-green-80);
-  --wa-color-cyan-key: 70;
+  --wa-color-green-key: 80;
+
+  --wa-color-cyan-95: #dbf9fc /* oklch(96.146% 0.03142 203.97) */;
+  --wa-color-cyan-90: #a6f2fa /* oklch(91.438% 0.07533 204.25) */;
+  --wa-color-cyan-80: #51dcee /* oklch(82.7% 0.11986 207.31) */;
+  --wa-color-cyan-70: #2fbfd5 /* oklch(74.137% 0.11878 210.5) */;
+  --wa-color-cyan-60: #1fa3b9 /* oklch(65.917% 0.10909 212.4) */;
+  --wa-color-cyan-50: #118095 /* oklch(55.343% 0.09433 215.17) */;
+  --wa-color-cyan-40: #056273 /* oklch(45.726% 0.0795 215.29) */;
+  --wa-color-cyan-30: #014c5a /* oklch(38.37% 0.06757 215.53) */;
+  --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: #00151a /* oklch(17.995% 0.03161 213.85) */;
+  --wa-color-cyan: var(--wa-color-cyan-80);
+  --wa-color-cyan-key: 80;
 
   --wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
   --wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
-  --wa-color-blue-80: #94d0fe /* oklch(83.329% 0.08941 242.12) */;
+  --wa-color-blue-80: #93d0ff /* oklch(83.315% 0.09108 242.3) */;
-  --wa-color-blue-70: #60b5f9 /* oklch(74.8% 0.1287 244.9) */;
+  --wa-color-blue-70: #5bb5fe /* oklch(74.85% 0.13654 245.56) */;
-  --wa-color-blue-60: #3299f0 /* oklch(66.644% 0.15866 248.64) */;
+  --wa-color-blue-60: #4a99e4 /* oklch(66.699% 0.13625 249.55) */;
-  --wa-color-blue-50: #1a77cc /* oklch(56.301% 0.15449 251.61) */;
+  --wa-color-blue-50: #3178c0 /* oklch(56.346% 0.13216 251.63) */;
-  --wa-color-blue-40: #165a9b /* oklch(46.242% 0.12393 251.89) */;
+  --wa-color-blue-40: #235a96 /* oklch(46.273% 0.11344 253.15) */;
-  --wa-color-blue-30: #11477a /* oklch(39.241% 0.10211 251.38) */;
+  --wa-color-blue-30: #194777 /* oklch(39.272% 0.09544 252.36) */;
-  --wa-color-blue-20: #0d3459 /* oklch(31.95% 0.07871 250.89) */;
+  --wa-color-blue-20: #103359 /* oklch(31.787% 0.07886 253.15) */;
-  --wa-color-blue-10: #071f35 /* oklch(23.365% 0.05197 249.19) */;
+  --wa-color-blue-10: #061e38 /* oklch(23.254% 0.05851 252.8) */;
-  --wa-color-blue-05: #051321 /* oklch(18.208% 0.03553 248.92) */;
+  --wa-color-blue-05: #031225 /* oklch(18.051% 0.04534 253.25) */;
-  --wa-color-blue: var(--wa-color-blue-60);
+  --wa-color-blue: var(--wa-color-blue-70);
-  --wa-color-blue-key: 60;
+  --wa-color-blue-key: 70;
 
   --wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
   --wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
   --wa-color-indigo-80: #bac8ff /* oklch(84.108% 0.07867 273.5) */;
-  --wa-color-indigo-70: #96abff /* oklch(75.857% 0.12332 272.47) */;
+  --wa-color-indigo-70: #95abff /* oklch(75.79% 0.12361 271.99) */;
-  --wa-color-indigo-60: #738efc /* oklch(67.734% 0.16478 271.06) */;
+  --wa-color-indigo-60: #728dff /* oklch(67.658% 0.17035 271.19) */;
-  --wa-color-indigo-50: #486af1 /* oklch(57.714% 0.20605 268.43) */;
+  --wa-color-indigo-50: #516ed8 /* oklch(57.136% 0.16529 269.13) */;
-  --wa-color-indigo-40: #354dc3 /* oklch(47.651% 0.18567 269.2) */;
+  --wa-color-indigo-40: #3851b3 /* oklch(47.273% 0.15818 268.81) */;
-  --wa-color-indigo-30: #293c98 /* oklch(40.065% 0.15173 269.37) */;
+  --wa-color-indigo-30: #2a3f8f /* oklch(39.968% 0.13476 268.52) */;
-  --wa-color-indigo-20: #1e2c70 /* oklch(32.649% 0.11852 269.77) */;
+  --wa-color-indigo-20: #1e2d6c /* oklch(32.512% 0.11114 269.2) */;
-  --wa-color-indigo-10: #121a43 /* oklch(23.813% 0.07786 271) */;
+  --wa-color-indigo-10: #101a45 /* oklch(23.864% 0.08185 269.36) */;
-  --wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
+  --wa-color-indigo-05: #080f2f /* oklch(18.545% 0.06467 269.54) */;
-  --wa-color-indigo: var(--wa-color-indigo-50);
+  --wa-color-indigo: var(--wa-color-indigo-60);
-  --wa-color-indigo-key: 50;
+  --wa-color-indigo-key: 60;
 
   --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-70: #b8a0fe /* oklch(76.293% 0.13384 294.76) */;
-  --wa-color-purple-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
+  --wa-color-purple-60: #9e83f2 /* oklch(68.278% 0.16015 292.86) */;
-  --wa-color-purple-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
+  --wa-color-purple-50: #7b65cb /* oklch(57.62% 0.15206 290.77) */;
-  --wa-color-purple-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
+  --wa-color-purple-40: #5c4ba7 /* oklch(47.824% 0.14213 288.32) */;
-  --wa-color-purple-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
+  --wa-color-purple-30: #493590 /* oklch(40.487% 0.14337 288.41) */;
-  --wa-color-purple-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
+  --wa-color-purple-20: #371f7a /* oklch(33.309% 0.1443 287.97) */;
-  --wa-color-purple-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
+  --wa-color-purple-10: #250161 /* oklch(25.284% 0.14353 287.73) */;
-  --wa-color-purple-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
+  --wa-color-purple-05: #150047 /* oklch(19.858% 0.11707 283.68) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-purple: var(--wa-color-purple-60);
-  --wa-color-purple-key: 50;
+  --wa-color-purple-key: 60;
 
-  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
+  --wa-color-pink-95: #f8effc /* oklch(96.287% 0.01965 315.67) */;
-  --wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
+  --wa-color-pink-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
-  --wa-color-gray-80: #c7cad4 /* oklch(83.966% 0.01424 272.66) */;
+  --wa-color-pink-80: #edb8fa /* oklch(85.148% 0.10592 319.58) */;
-  --wa-color-gray-70: #a9afbe /* oklch(75.397% 0.0225 268.37) */;
+  --wa-color-pink-70: #e38ef8 /* oklch(77.16% 0.16992 319.48) */;
-  --wa-color-gray-60: #8d95a8 /* oklch(66.968% 0.02959 267.4) */;
+  --wa-color-pink-60: #c576db /* oklch(68.843% 0.16426 318.62) */;
+  --wa-color-pink-50: #a258b5 /* oklch(58.347% 0.15642 319.13) */;
+  --wa-color-pink-40: #823b94 /* oklch(48.331% 0.15299 319.08) */;
+  --wa-color-pink-30: #6d247e /* oklch(41.177% 0.1547 319.42) */;
+  --wa-color-pink-20: #580a68 /* oklch(34.103% 0.15338 319.6) */;
+  --wa-color-pink-10: #370047 /* oklch(24.984% 0.12212 316.48) */;
+  --wa-color-pink-05: #240033 /* oklch(19.65% 0.09758 313.47) */;
+  --wa-color-pink: var(--wa-color-pink-70);
+  --wa-color-pink-key: 70;
+
+  --wa-color-gray-95: #f1f2f5 /* oklch(96.124% 0.00414 271.37) */;
+  --wa-color-gray-90: #e4e6eb /* oklch(92.484% 0.00709 268.54) */;
+  --wa-color-gray-80: #c5cad5 /* oklch(83.843% 0.01625 266.26) */;
+  --wa-color-gray-70: #a8afbf /* oklch(75.353% 0.02424 266.85) */;
+  --wa-color-gray-60: #8c95aa /* oklch(66.963% 0.0328 267.07) */;
   --wa-color-gray-50: #6a7591 /* oklch(56.369% 0.04546 268.14) */;
-  --wa-color-gray-40: #4b5977 /* oklch(46.454% 0.05212 265.05) */;
+  --wa-color-gray-40: #4a597a /* oklch(46.526% 0.05715 265.38) */;
-  --wa-color-gray-30: #344566 /* oklch(39.129% 0.06051 263) */;
+  --wa-color-gray-30: #384565 /* oklch(39.365% 0.05713 266.86) */;
-  --wa-color-gray-20: #1a3356 /* oklch(32.021% 0.07012 257.11) */;
+  --wa-color-gray-20: #26314f /* oklch(31.829% 0.05593 267.86) */;
-  --wa-color-gray-10: #0e1e35 /* oklch(23.442% 0.04969 257.55) */;
+  --wa-color-gray-10: #131c38 /* oklch(23.46% 0.0555 268.48) */;
-  --wa-color-gray-05: #081220 /* oklch(18.072% 0.03272 256.72) */;
+  --wa-color-gray-05: #0a1127 /* oklch(18.485% 0.04617 268.36) */;
   --wa-color-gray: var(--wa-color-gray-40);
   --wa-color-gray-key: 40;
 }

src/styles/color/classic.css

@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
+  --wa-color-orange-95: oklch(96.245% 0.04153 59.224);
+  --wa-color-orange-90: oklch(92.468% 0.07656 58.647);
+  --wa-color-orange-80: oklch(84.375% 0.11283 54.179);
+  --wa-color-orange-70: #fb945a /* oklch(76.369% 0.14454 48.621) */;
+  --wa-color-orange-60: #f26b31 /* oklch(68.509% 0.18046 41.503) */;
+  --wa-color-orange-50: #cf4812 /* oklch(58.288% 0.18026 38.576) */;
+  --wa-color-orange-40: oklch(48.175% 0.16316 38.526);
+  --wa-color-orange-30: oklch(40.779% 0.13925 37.899);
+  --wa-color-orange-20: oklch(33.129% 0.11288 38.58);
+  --wa-color-orange-10: oklch(24.259% 0.0831 38.502);
+  --wa-color-orange-05: oklch(18.969% 0.06527 38.137);
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
   --wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
   --wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
   --wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;
@@ -100,6 +114,20 @@
   --wa-color-purple: var(--wa-color-purple-50);
   --wa-color-purple-key: 50;
 
+  --wa-color-pink-95: #fdeff7 /* oklch(96.539% 0.01831 342.02) */;
+  --wa-color-pink-90: #fcdcee /* oklch(92.607% 0.04228 343.07) */;
+  --wa-color-pink-80: #fab6db /* oklch(84.992% 0.09131 345.4) */;
+  --wa-color-pink-70: #f78cc4 /* oklch(77.072% 0.14455 348.37) */;
+  --wa-color-pink-60: #f160a9 /* oklch(69.418% 0.19234 351.99) */;
+  --wa-color-pink-50: #db2878 /* oklch(59.255% 0.21755 0.28257) */;
+  --wa-color-pink-40: #ab1854 /* oklch(48.723% 0.18199 3.8244) */;
+  --wa-color-pink-30: #851844 /* oklch(41.188% 0.14622 2.4184) */;
+  --wa-color-pink-20: #640e30 /* oklch(33.442% 0.12022 3.3857) */;
+  --wa-color-pink-10: #43001a /* oklch(24.613% 0.09885 5.3211) */;
+  --wa-color-pink-05: #2f000b /* oklch(19.457% 0.07776 12.211) */;
+  --wa-color-pink: var(--wa-color-pink-50);
+  --wa-color-pink-key: 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) */;
   --wa-color-gray-80: #c9c9cc /* oklch(83.679% 0.00413 286.31) */;

src/styles/color/default.css

@@ -2,104 +2,132 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-default {
-  --wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
+  --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
-  --wa-color-red-90: #ffdddc /* oklch(92.547% 0.03785 19.865) */;
+  --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
-  --wa-color-red-80: #ffb7b6 /* oklch(84.626% 0.08407 19.872) */;
+  --wa-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
-  --wa-color-red-70: #fc9090 /* oklch(76.834% 0.13083 20.537) */;
+  --wa-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
-  --wa-color-red-60: #f2676c /* oklch(68.768% 0.17146 20.596) */;
+  --wa-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
-  --wa-color-red-50: #de2d44 /* oklch(58.887% 0.20998 20.414) */;
+  --wa-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
-  --wa-color-red-40: #b11036 /* oklch(48.766% 0.18763 17.443) */;
+  --wa-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
-  --wa-color-red-30: #861a2f /* oklch(40.968% 0.14194 15.902) */;
+  --wa-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
-  --wa-color-red-20: #641122 /* oklch(33.29% 0.11505 15.196) */;
+  --wa-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
-  --wa-color-red-10: #400712 /* oklch(24.506% 0.08542 15.881) */;
+  --wa-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
-  --wa-color-red-05: #2a030a /* oklch(18.798% 0.06593 14.104) */;
+  --wa-color-red-05: #2a040b /* oklch(19.016% 0.06394 13.71) */;
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-yellow-95: #fdf3ba /* oklch(95.838% 0.07362 99.275) */;
+  --wa-color-orange-95: oklch(96.494% 0.0335 57.914);
-  --wa-color-yellow-90: #fee590 /* oklch(92.407% 0.10827 93.577) */;
+  --wa-color-orange-90: oklch(92.556% 0.06963 56.631);
-  --wa-color-yellow-80: #fcc041 /* oklch(84.136% 0.1524 82.087) */;
+  --wa-color-orange-80: oklch(84.494% 0.12276 53.381);
-  --wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
+  --wa-color-orange-70: oklch(76.375% 0.17194 46.091);
-  --wa-color-yellow-60: #e07b00 /* oklch(68.175% 0.16203 58.675) */;
+  --wa-color-orange-60: #eb713f /* oklch(68.398% 0.16422 41.446) */;
-  --wa-color-yellow-50: #bb5a00 /* oklch(57.639% 0.14858 51.823) */;
+  --wa-color-orange-50: #cb4b1d /* oklch(58.153% 0.17174 38.404) */;
-  --wa-color-yellow-40: #924200 /* oklch(47.573% 0.12584 49.96) */;
+  --wa-color-orange-40: #a2310c /* oklch(48.028% 0.15488 36.538) */;
-  --wa-color-yellow-30: #743200 /* oklch(40.128% 0.10738 49.167) */;
+  --wa-color-orange-30: #7f2810 /* oklch(40.591% 0.12506 35.663) */;
-  --wa-color-yellow-20: #572300 /* oklch(32.668% 0.08836 48.446) */;
+  --wa-color-orange-20: #5d1d0e /* oklch(32.908% 0.09683 34.387) */;
-  --wa-color-yellow-10: #361300 /* oklch(23.81% 0.06438 48.467) */;
+  --wa-color-orange-10: #3a1005 /* oklch(24.088% 0.06954 35.613) */;
-  --wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
+  --wa-color-orange-05: #270803 /* oklch(18.801% 0.05509 34.149) */;
-  --wa-color-yellow: var(--wa-color-yellow-70);
+  --wa-color-orange: var(--wa-color-orange-70);
-  --wa-color-yellow-key: 70;
+  --wa-color-orange-key: 70;
 
-  --wa-color-green-95: #e2f9e2 /* oklch(95.91% 0.03884 145.26) */;
+  --wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
+  --wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
+  --wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
+  --wa-color-yellow-70: #ef9d00 /* oklch(75.949% 0.16251 72.13) */;
+  --wa-color-yellow-60: #da7e00 /* oklch(67.883% 0.15587 62.246) */;
+  --wa-color-yellow-50: #b45f04 /* oklch(57.449% 0.13836 56.585) */;
+  --wa-color-yellow-40: #8c4602 /* oklch(47.319% 0.11666 54.663) */;
+  --wa-color-yellow-30: #6f3601 /* oklch(40.012% 0.09892 54.555) */;
+  --wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
+  --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+  --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
+  --wa-color-yellow: var(--wa-color-yellow-80);
+  --wa-color-yellow-key: 80;
+
+  --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
   --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
-  --wa-color-green-80: #92da97 /* oklch(82.37% 0.11765 146.06) */;
+  --wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
   --wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
   --wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
-  --wa-color-green-50: #008825 /* oklch(54.493% 0.16976 145.33) */;
+  --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
-  --wa-color-green-40: #006800 /* oklch(44.821% 0.15252 142.5) */;
+  --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
-  --wa-color-green-30: #005300 /* oklch(38.319% 0.13039 142.5) */;
+  --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
-  --wa-color-green-20: #003c00 /* oklch(30.861% 0.10501 142.5) */;
+  --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
-  --wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
+  --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
-  --wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
+  --wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
   --wa-color-green: var(--wa-color-green-60);
   --wa-color-green-key: 60;
 
-  --wa-color-cyan-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
+  --wa-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
-  --wa-color-cyan-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
+  --wa-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
-  --wa-color-cyan-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
+  --wa-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
-  --wa-color-cyan-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
+  --wa-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
-  --wa-color-cyan-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
+  --wa-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
-  --wa-color-cyan-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
+  --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
-  --wa-color-cyan-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
+  --wa-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
-  --wa-color-cyan-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
+  --wa-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
-  --wa-color-cyan-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
+  --wa-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
-  --wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
+  --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
-  --wa-color-cyan-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
+  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
   --wa-color-cyan: var(--wa-color-cyan-70);
   --wa-color-cyan-key: 70;
 
-  --wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
+  --wa-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
-  --wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
+  --wa-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
-  --wa-color-blue-80: #a6ccff /* oklch(83.582% 0.08269 255.9) */;
+  --wa-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
-  --wa-color-blue-70: #77b1ff /* oklch(75.268% 0.12855 256.14) */;
+  --wa-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
-  --wa-color-blue-60: #4895fd /* oklch(67.184% 0.17212 256.8) */;
+  --wa-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
-  --wa-color-blue-50: #0070ef /* oklch(56.997% 0.20953 257.84) */;
+  --wa-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
-  --wa-color-blue-40: #0055b8 /* oklch(46.934% 0.17173 257.73) */;
+  --wa-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
-  --wa-color-blue-30: #004390 /* oklch(39.638% 0.1408 257.02) */;
+  --wa-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
-  --wa-color-blue-20: #00306c /* oklch(32.102% 0.11523 257.27) */;
+  --wa-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
-  --wa-color-blue-10: #001c45 /* oklch(23.545% 0.08493 257.39) */;
+  --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
-  --wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
+  --wa-color-blue-05: #000f35 /* oklch(18.565% 0.07904 260.75) */;
   --wa-color-blue: var(--wa-color-blue-50);
   --wa-color-blue-key: 50;
 
-  --wa-color-indigo-95: #f0f2fe /* oklch(96.311% 0.01617 278.51) */;
+  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
-  --wa-color-indigo-90: #e2e4fc /* oklch(92.459% 0.03255 281.95) */;
+  --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
-  --wa-color-indigo-80: #c2c6f8 /* oklch(84.027% 0.06987 281.2) */;
+  --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
-  --wa-color-indigo-70: #a5a9f2 /* oklch(75.915% 0.10451 281.18) */;
+  --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
-  --wa-color-indigo-60: #8a8beb /* oklch(67.735% 0.14003 281.54) */;
+  --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
-  --wa-color-indigo-50: #6b65e2 /* oklch(57.839% 0.18419 281.11) */;
+  --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
-  --wa-color-indigo-40: #5246c1 /* oklch(48.113% 0.18471 281.3) */;
+  --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
-  --wa-color-indigo-30: #412eaa /* oklch(41.007% 0.18636 281.32) */;
+  --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
-  --wa-color-indigo-20: #321393 /* oklch(34.125% 0.1858 281.27) */;
+  --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
-  --wa-color-indigo-10: #1c006a /* oklch(25.437% 0.15565 278.46) */;
+  --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
-  --wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
+  --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
-  --wa-color-indigo: var(--wa-color-indigo-40);
+  --wa-color-indigo: var(--wa-color-indigo-50);
-  --wa-color-indigo-key: 40;
+  --wa-color-indigo-key: 50;
 
-  --wa-color-purple-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
+  --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
-  --wa-color-purple-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
+  --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
-  --wa-color-purple-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
+  --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
-  --wa-color-purple-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
+  --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
-  --wa-color-purple-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
+  --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
-  --wa-color-purple-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
+  --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
-  --wa-color-purple-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
+  --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
-  --wa-color-purple-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
+  --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
-  --wa-color-purple-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
+  --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
-  --wa-color-purple-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
+  --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
-  --wa-color-purple-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
+  --wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
   --wa-color-purple: var(--wa-color-purple-50);
   --wa-color-purple-key: 50;
 
+  --wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
+  --wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
+  --wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
+  --wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
+  --wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
+  --wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
+  --wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
+  --wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
+  --wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
+  --wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
+  --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
+  --wa-color-pink: var(--wa-color-pink-50);
+  --wa-color-pink-key: 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) */;
   --wa-color-gray-80: #c7c9d0 /* oklch(83.641% 0.00994 273.33) */;

src/styles/color/elegant.css

@@ -2,115 +2,143 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-elegant {
-  --wa-color-red-95: #fdeeef /* oklch(96.122% 0.01629 12.781) */;
+  --wa-color-red-95: #feeeef /* oklch(96.203% 0.01739 13.095) */;
-  --wa-color-red-90: #fcdfe0 /* oklch(92.771% 0.0321 15.37) */;
+  --wa-color-red-90: #fbdfe1 /* oklch(92.712% 0.03103 12.802) */;
-  --wa-color-red-80: #f8b9bc /* oklch(84.416% 0.07319 15.56) */;
+  --wa-color-red-80: #f2bcc0 /* oklch(84.468% 0.06249 13.512) */;
-  --wa-color-red-70: #f0969c /* oklch(76.649% 0.10862 15.608) */;
+  --wa-color-red-70: #e79aa1 /* oklch(76.427% 0.09275 13.523) */;
-  --wa-color-red-60: #e3727d /* oklch(68.562% 0.1405 15.424) */;
+  --wa-color-red-60: #db7781 /* oklch(68.361% 0.12461 14.576) */;
-  --wa-color-red-50: #cc465a /* oklch(58.534% 0.16911 15.341) */;
+  --wa-color-red-50: #c64b5d /* oklch(58.247% 0.15692 14.667) */;
   --wa-color-red-40: #ac1d3d /* oklch(48.628% 0.17601 15.401) */;
-  --wa-color-red-30: #8f012c /* oklch(41.346% 0.16471 15.45) */;
+  --wa-color-red-30: #8f002b /* oklch(41.286% 0.16513 15.826) */;
-  --wa-color-red-20: #6b001c /* oklch(33.484% 0.13403 16.992) */;
+  --wa-color-red-20: #6b001f /* oklch(33.545% 0.13412 15.162) */;
-  --wa-color-red-10: #44000d /* oklch(24.5% 0.09818 18.249) */;
+  --wa-color-red-10: #430212 /* oklch(24.607% 0.09481 14.336) */;
-  --wa-color-red-05: #2e0006 /* oklch(19.077% 0.07648 18.657) */;
+  --wa-color-red-05: #2d0109 /* oklch(19.102% 0.07343 14.851) */;
   --wa-color-red: var(--wa-color-red-40);
   --wa-color-red-key: 40;
 
-  --wa-color-yellow-95: #f5f2e5 /* oklch(95.994% 0.01748 96.105) */;
+  --wa-color-orange-95: oklch(96.238% 0.02664 61.788);
-  --wa-color-yellow-90: #ece6cc /* oklch(92.281% 0.03499 96.315) */;
+  --wa-color-orange-90: #fbe1cc /* oklch(92.512% 0.04019 60.45) */;
-  --wa-color-yellow-80: #dac992 /* oklch(83.686% 0.07427 92.946) */;
+  --wa-color-orange-80: #edc1a0 /* oklch(84.097% 0.06661 58.236) */;
-  --wa-color-yellow-70: #c9ac5c /* oklch(75.33% 0.10529 89.848) */;
+  --wa-color-orange-70: #dda178 /* oklch(75.734% 0.09064 55.123) */;
-  --wa-color-yellow-60: #b98f27 /* oklch(67.248% 0.12518 85.119) */;
+  --wa-color-orange-60: #cd8351 /* oklch(67.646% 0.1134 53.172) */;
-  --wa-color-yellow-50: #9b6d09 /* oklch(56.774% 0.11557 78.692) */;
+  --wa-color-orange-50: #b65d22 /* oklch(57.437% 0.13446 49.881) */;
-  --wa-color-yellow-40: #785007 /* oklch(46.422% 0.09514 74.644) */;
+  --wa-color-orange-40: oklch(47.576% 0.13426 46.452);
-  --wa-color-yellow-30: #613e06 /* oklch(39.54% 0.08123 71.804) */;
+  --wa-color-orange-30: oklch(40.382% 0.12087 47.003);
-  --wa-color-yellow-20: #492c05 /* oklch(32.206% 0.06602 68.329) */;
+  --wa-color-orange-20: oklch(32.846% 0.0965 46.227);
-  --wa-color-yellow-10: #2b1a02 /* oklch(23.457% 0.04659 73.352) */;
+  --wa-color-orange-10: oklch(24.06% 0.06873 45.849);
-  --wa-color-yellow-05: #191008 /* oklch(18.243% 0.02161 62.915) */;
+  --wa-color-orange-05: #260900 /* oklch(18.727% 0.05359 44.791) */;
-  --wa-color-yellow: var(--wa-color-yellow-60);
+  --wa-color-orange: var(--wa-color-orange-50);
-  --wa-color-yellow-key: 60;
+  --wa-color-orange-key: 50;
 
-  --wa-color-green-95: #ecf4f1 /* oklch(96.029% 0.00935 171.8) */;
+  --wa-color-yellow-95: #f7f4da /* oklch(96.266% 0.03422 101.63) */;
-  --wa-color-green-90: #dae9e3 /* oklch(92.11% 0.01786 170.06) */;
+  --wa-color-yellow-90: #ede7c3 /* oklch(92.349% 0.04769 99.435) */;
-  --wa-color-green-80: #b0d1c4 /* oklch(83.284% 0.03952 169.54) */;
+  --wa-color-yellow-80: #d8ca96 /* oklch(83.793% 0.06999 94.829) */;
-  --wa-color-green-70: #88b9a6 /* oklch(74.553% 0.05874 168.82) */;
+  --wa-color-yellow-70: #c5ac6b /* oklch(75.167% 0.08892 89.16) */;
-  --wa-color-green-60: #5fa288 /* oklch(65.987% 0.07948 167.12) */;
+  --wa-color-yellow-60: #b39043 /* oklch(67.06% 0.10423 84.751) */;
-  --wa-color-green-50: #2d8462 /* oklch(55.19% 0.09885 163.66) */;
+  --wa-color-yellow-50: #9b6d09 /* oklch(56.774% 0.11557 78.692) */;
-  --wa-color-green-40: #00663e /* oklch(44.949% 0.10492 158.13) */;
+  --wa-color-yellow-40: #7c4f00 /* oklch(46.714% 0.10011 71.858) */;
-  --wa-color-green-30: #005031 /* oklch(38.025% 0.08722 159.15) */;
+  --wa-color-yellow-30: #623e00 /* oklch(39.642% 0.08465 72.511) */;
-  --wa-color-green-20: #003b24 /* oklch(31.092% 0.0701 160.21) */;
+  --wa-color-yellow-20: #482d04 /* oklch(32.274% 0.06572 71.644) */;
-  --wa-color-green-10: #002316 /* oklch(22.679% 0.04824 164.14) */;
+  --wa-color-yellow-10: #2c1a02 /* oklch(23.612% 0.04739 71.633) */;
-  --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
+  --wa-color-yellow-05: #1d0f01 /* oklch(18.42% 0.03735 69.287) */;
+  --wa-color-yellow: var(--wa-color-yellow-50);
+  --wa-color-yellow-key: 50;
+
+  --wa-color-green-95: #eaf6ef /* oklch(96.224% 0.01568 160.63) */;
+  --wa-color-green-90: #d6ebe0 /* oklch(92.147% 0.02666 163.16) */;
+  --wa-color-green-80: #b0d2c0 /* oklch(83.388% 0.04396 162.23) */;
+  --wa-color-green-70: #89b9a0 /* oklch(74.448% 0.06245 161.7) */;
+  --wa-color-green-60: #66a184 /* oklch(65.998% 0.07584 162.02) */;
+  --wa-color-green-50: #378361 /* oklch(55.235% 0.09296 161.66) */;
+  --wa-color-green-40: #036645 /* oklch(45.159% 0.0975 162.35) */;
+  --wa-color-green-30: #005035 /* oklch(38.128% 0.08321 162.33) */;
+  --wa-color-green-20: #003a27 /* oklch(30.855% 0.06552 164.26) */;
+  --wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
+  --wa-color-green-05: #00160e /* oklch(17.779% 0.03599 168.03) */;
   --wa-color-green: var(--wa-color-green-40);
   --wa-color-green-key: 40;
 
-  --wa-color-cyan-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
+  --wa-color-cyan-95: #ecf3f6 /* oklch(95.973% 0.00849 225.08) */;
-  --wa-color-cyan-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
+  --wa-color-cyan-90: #dae8ee /* oklch(92.227% 0.01706 225.2) */;
-  --wa-color-cyan-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
+  --wa-color-cyan-80: #aecfdc /* oklch(83.456% 0.0396 223.66) */;
-  --wa-color-cyan-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
+  --wa-color-cyan-70: #82b7c9 /* oklch(74.873% 0.06114 221.03) */;
-  --wa-color-cyan-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
+  --wa-color-cyan-60: #549fb5 /* oklch(66.279% 0.08114 219.25) */;
-  --wa-color-cyan-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
+  --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
-  --wa-color-cyan-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
+  --wa-color-cyan-40: #006274 /* oklch(45.709% 0.0812 216.04) */;
-  --wa-color-cyan-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
+  --wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
-  --wa-color-cyan-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
+  --wa-color-cyan-20: #023841 /* oklch(31.326% 0.05351 212.43) */;
-  --wa-color-cyan-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
+  --wa-color-cyan-10: #012126 /* oklch(22.736% 0.03817 209.61) */;
-  --wa-color-cyan-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
+  --wa-color-cyan-05: #011519 /* oklch(18.019% 0.02954 211.13) */;
   --wa-color-cyan: var(--wa-color-cyan-50);
   --wa-color-cyan-key: 50;
 
-  --wa-color-blue-95: #ebf3fa /* oklch(96.015% 0.01271 244.25) */;
+  --wa-color-blue-95: #ebf4fb /* oklch(96.242% 0.01344 240.95) */;
   --wa-color-blue-90: #d8e8f5 /* oklch(92.295% 0.02463 242.35) */;
-  --wa-color-blue-80: #accee9 /* oklch(83.556% 0.05253 242.25) */;
+  --wa-color-blue-80: #b0cee8 /* oklch(83.785% 0.0487 244.56) */;
-  --wa-color-blue-70: #81b5dd /* oklch(75.142% 0.07972 242.18) */;
+  --wa-color-blue-70: #88b3dc /* oklch(75.074% 0.0753 247.65) */;
-  --wa-color-blue-60: #559bd2 /* oklch(66.672% 0.10847 244.18) */;
+  --wa-color-blue-60: #6299ce /* oklch(66.642% 0.09844 248.63) */;
-  --wa-color-blue-50: #1c7ac3 /* oklch(56.462% 0.13979 247.89) */;
+  --wa-color-blue-50: #3578bc /* oklch(56.244% 0.12562 251.34) */;
-  --wa-color-blue-40: #005aa0 /* oklch(46.253% 0.13415 250.9) */;
+  --wa-color-blue-40: #0159a5 /* oklch(46.385% 0.14173 252.83) */;
-  --wa-color-blue-30: #00477e /* oklch(39.201% 0.11116 250.07) */;
+  --wa-color-blue-30: #00438d /* oklch(39.39% 0.13669 256.43) */;
-  --wa-color-blue-20: #00345d /* oklch(31.892% 0.08838 249.18) */;
+  --wa-color-blue-20: #00306d /* oklch(32.191% 0.11667 257.51) */;
-  --wa-color-blue-10: #001f37 /* oklch(23.169% 0.0591 245.63) */;
+  --wa-color-blue-10: #001d43 /* oklch(23.62% 0.08036 255.9) */;
-  --wa-color-blue-05: #001221 /* oklch(17.475% 0.04178 242.4) */;
+  --wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
-  --wa-color-blue: var(--wa-color-blue-50);
+  --wa-color-blue: var(--wa-color-blue-40);
-  --wa-color-blue-key: 50;
+  --wa-color-blue-key: 40;
 
-  --wa-color-indigo-95: #f1f1fa /* oklch(96.073% 0.01199 286.17) */;
+  --wa-color-indigo-95: #f2f3fb /* oklch(96.568% 0.01071 280.48) */;
-  --wa-color-indigo-90: #e4e4f6 /* oklch(92.422% 0.02428 285.92) */;
+  --wa-color-indigo-90: #e1e4f7 /* oklch(92.225% 0.02593 278.72) */;
-  --wa-color-indigo-80: #c6c7eb /* oklch(84.051% 0.05002 284.01) */;
+  --wa-color-indigo-80: #c2c8f0 /* oklch(84.125% 0.05619 278.41) */;
-  --wa-color-indigo-70: #a9aae1 /* oklch(75.682% 0.07863 283.54) */;
+  --wa-color-indigo-70: #a2abe9 /* oklch(75.691% 0.08969 277.64) */;
-  --wa-color-indigo-60: #8d8ed7 /* oklch(67.514% 0.10716 282.54) */;
+  --wa-color-indigo-60: #838fe0 /* oklch(67.424% 0.12044 276.26) */;
-  --wa-color-indigo-50: #696ccb /* oklch(57.448% 0.14365 279.49) */;
+  --wa-color-indigo-50: #616cd2 /* oklch(57.327% 0.15517 275.74) */;
-  --wa-color-indigo-40: #4649bf /* oklch(47.579% 0.1808 275.97) */;
+  --wa-color-indigo-40: #444bbe /* oklch(47.719% 0.17747 274.78) */;
-  --wa-color-indigo-30: #36389c /* oklch(40.459% 0.15877 275.79) */;
+  --wa-color-indigo-30: #3235a6 /* oklch(40.598% 0.17674 274.08) */;
-  --wa-color-indigo-20: #272972 /* oklch(32.817% 0.12297 276.06) */;
+  --wa-color-indigo-20: #222581 /* oklch(33.204% 0.15044 273.22) */;
-  --wa-color-indigo-10: #171844 /* oklch(23.835% 0.08107 277.33) */;
+  --wa-color-indigo-10: #121650 /* oklch(24.243% 0.10418 272.65) */;
-  --wa-color-indigo-05: #0d0e27 /* oklch(17.951% 0.0503 278.32) */;
+  --wa-color-indigo-05: #090c39 /* oklch(19.042% 0.08527 272.11) */;
   --wa-color-indigo: var(--wa-color-indigo-40);
   --wa-color-indigo-key: 40;
 
-  --wa-color-purple-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
+  --wa-color-purple-95: #f6f2f8 /* oklch(96.593% 0.00898 314.78) */;
   --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-80: #dac1e8 /* oklch(84.417% 0.05975 313.48) */;
-  --wa-color-purple-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
+  --wa-color-purple-70: #c4a1e0 /* oklch(76.209% 0.09582 309.5) */;
-  --wa-color-purple-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
+  --wa-color-purple-60: #ad82d8 /* oklch(68.129% 0.13065 306.24) */;
-  --wa-color-purple-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
+  --wa-color-purple-50: #8e5dcc /* oklch(58.178% 0.16754 301.8) */;
-  --wa-color-purple-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
+  --wa-color-purple-40: #7039ba /* oklch(48.506% 0.19176 298.45) */;
-  --wa-color-purple-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
+  --wa-color-purple-30: #5925a1 /* oklch(41.419% 0.1844 296.38) */;
-  --wa-color-purple-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
+  --wa-color-purple-20: #3f1d77 /* oklch(33.628% 0.14302 294.7) */;
-  --wa-color-purple-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
+  --wa-color-purple-10: #241443 /* oklch(24.289% 0.08468 295) */;
-  --wa-color-purple-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
+  --wa-color-purple-05: #160b2e /* oklch(18.938% 0.06685 293.46) */;
   --wa-color-purple: var(--wa-color-purple-40);
   --wa-color-purple-key: 40;
 
+  --wa-color-pink-95: #faf0f7 /* oklch(96.491% 0.0141 336.14) */;
+  --wa-color-pink-90: #f4e0ed /* oklch(92.653% 0.0277 338.6) */;
+  --wa-color-pink-80: #e7bedb /* oklch(84.585% 0.06022 336.84) */;
+  --wa-color-pink-70: #d89cca /* oklch(76.426% 0.09327 335.1) */;
+  --wa-color-pink-60: #c87bba /* oklch(68.507% 0.12525 333.74) */;
+  --wa-color-pink-50: #b051a6 /* oklch(58.396% 0.16195 331.59) */;
+  --wa-color-pink-40: #972592 /* oklch(48.91% 0.19103 329.96) */;
+  --wa-color-pink-30: #7f007d /* oklch(41.721% 0.19096 329.18) */;
+  --wa-color-pink-20: #5d095a /* oklch(33.889% 0.1448 329.91) */;
+  --wa-color-pink-10: #3a0338 /* oklch(24.635% 0.10621 329.91) */;
+  --wa-color-pink-05: #280126 /* oklch(19.445% 0.08514 330.49) */;
+  --wa-color-pink: var(--wa-color-pink-40);
+  --wa-color-pink-key: 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) */;
+  --wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
-  --wa-color-gray-80: #cbc8ce /* oklch(83.695% 0.00885 308.34) */;
+  --wa-color-gray-80: #c9c9d0 /* oklch(83.798% 0.00965 286.19) */;
-  --wa-color-gray-70: #b1adb6 /* oklch(75.367% 0.01345 305.97) */;
+  --wa-color-gray-70: #adaeb9 /* oklch(75.343% 0.01566 281.86) */;
-  --wa-color-gray-60: #98939f /* oklch(67.134% 0.01834 304.67) */;
+  --wa-color-gray-60: #9294a2 /* oklch(66.945% 0.02068 279.35) */;
-  --wa-color-gray-50: #7a7382 /* oklch(56.69% 0.0242 306.59) */;
+  --wa-color-gray-50: #727486 /* oklch(56.356% 0.02776 280.45) */;
-  --wa-color-gray-40: #5d5568 /* oklch(46.422% 0.03185 304.29) */;
+  --wa-color-gray-40: #55586b /* oklch(46.492% 0.03098 278.07) */;
-  --wa-color-gray-30: #494352 /* oklch(39.46% 0.02608 303.4) */;
+  --wa-color-gray-30: #424456 /* oklch(39.204% 0.03051 279.92) */;
-  --wa-color-gray-20: #35313c /* oklch(32.176% 0.01998 301.84) */;
+  --wa-color-gray-20: #30323f /* oklch(32.064% 0.02327 278.14) */;
-  --wa-color-gray-10: #1f1c23 /* oklch(23.288% 0.01397 304.73) */;
+  --wa-color-gray-10: #1c1d25 /* oklch(23.329% 0.01544 279.52) */;
-  --wa-color-gray-05: #131115 /* oklch(18.185% 0.00865 307.93) */;
+  --wa-color-gray-05: #111217 /* oklch(18.343% 0.01033 276.41) */;
   --wa-color-gray: var(--wa-color-gray-40);
   --wa-color-gray-key: 40;
 }

src/styles/color/mild.css

@@ -16,6 +16,20 @@
   --wa-color-red: var(--wa-color-red-40);
   --wa-color-red-key: 40;
 
+  --wa-color-orange-95: oklch(96.126% 0.05417 66.333);
+  --wa-color-orange-90: oklch(92.413% 0.07898 62.545);
+  --wa-color-orange-80: #f9bd86 /* oklch(84.088% 0.09891 63.847) */;
+  --wa-color-orange-70: #e2a05f /* oklch(75.707% 0.11352 64.057) */;
+  --wa-color-orange-60: #d18228 /* oklch(67.572% 0.13809 64.146) */;
+  --wa-color-orange-50: oklch(57.202% 0.13583 64.309);
+  --wa-color-orange-40: oklch(47.462% 0.13789 64.939);
+  --wa-color-orange-30: oklch(40.049% 0.12025 65.207);
+  --wa-color-orange-20: oklch(32.552% 0.09777 64.859);
+  --wa-color-orange-10: oklch(23.884% 0.07141 64.246);
+  --wa-color-orange-05: oklch(18.698% 0.05597 65.589);
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
   --wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
   --wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
   --wa-color-yellow-80: #e3c868 /* oklch(83.63% 0.12003 93.943) */;
@@ -30,76 +44,90 @@
   --wa-color-yellow: var(--wa-color-yellow-80);
   --wa-color-yellow-key: 80;
 
-  --wa-color-green-95: #e1f9e1 /* oklch(95.814% 0.04053 145.25) */;
+  --wa-color-green-95: #dffbda /* oklch(95.911% 0.05253 140.9) */;
-  --wa-color-green-90: #bff2c0 /* oklch(91.282% 0.08527 145.33) */;
+  --wa-color-green-90: #c1f2be /* oklch(91.363% 0.08611 143.36) */;
-  --wa-color-green-80: #9fd7a1 /* oklch(82.641% 0.09444 145.54) */;
+  --wa-color-green-80: #a1d7a0 /* oklch(82.74% 0.09423 144.22) */;
-  --wa-color-green-70: #86bc88 /* oklch(74.373% 0.09308 145.46) */;
+  --wa-color-green-70: #87bb87 /* oklch(74.177% 0.09187 144.58) */;
-  --wa-color-green-60: #6ca170 /* oklch(65.848% 0.09138 146.27) */;
+  --wa-color-green-60: #6ea16f /* oklch(65.944% 0.09116 144.91) */;
-  --wa-color-green-50: #4e8153 /* oklch(55.447% 0.08949 146.53) */;
+  --wa-color-green-50: #4f8051 /* oklch(55.201% 0.08939 145.16) */;
-  --wa-color-green-40: #336339 /* oklch(45.387% 0.08557 146.75) */;
+  --wa-color-green-40: #336437 /* oklch(45.626% 0.08945 145.65) */;
-  --wa-color-green-30: #224e29 /* oklch(38.199% 0.07889 147.22) */;
+  --wa-color-green-30: #1f5026 /* oklch(38.6% 0.08722 146.45) */;
-  --wa-color-green-20: #123a1b /* oklch(31.105% 0.0705 148.25) */;
+  --wa-color-green-20: #073b14 /* oklch(30.947% 0.0845 147.2) */;
-  --wa-color-green-10: #01230a /* oklch(22.432% 0.06139 149.06) */;
+  --wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
-  --wa-color-green-05: #001701 /* oklch(17.759% 0.05792 143.81) */;
+  --wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
   --wa-color-green: var(--wa-color-green-80);
   --wa-color-green-key: 80;
 
-  --wa-color-cyan-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
+  --wa-color-cyan-95: #ccfaff /* oklch(95.468% 0.04738 204.53) */;
-  --wa-color-cyan-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
+  --wa-color-cyan-90: #b4efff /* oklch(91.73% 0.06334 216.28) */;
-  --wa-color-cyan-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
+  --wa-color-cyan-80: #8ed4e9 /* oklch(83.085% 0.07588 218.68) */;
-  --wa-color-cyan-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
+  --wa-color-cyan-70: #6bbad0 /* oklch(74.634% 0.08383 217.83) */;
-  --wa-color-cyan-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
+  --wa-color-cyan-60: #4ca0b6 /* oklch(66.234% 0.08708 217.43) */;
-  --wa-color-cyan-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
+  --wa-color-cyan-50: #238094 /* oklch(55.617% 0.08818 215.68) */;
-  --wa-color-cyan-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
+  --wa-color-cyan-40: #006274 /* oklch(45.709% 0.0812 216.04) */;
-  --wa-color-cyan-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
+  --wa-color-cyan-30: #004c5c /* oklch(38.451% 0.06912 218.07) */;
-  --wa-color-cyan-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
+  --wa-color-cyan-20: #003845 /* oklch(31.48% 0.05692 218.99) */;
-  --wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
+  --wa-color-cyan-10: #00212a /* oklch(22.908% 0.04161 219.65) */;
-  --wa-color-cyan-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
+  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
-  --wa-color-cyan: var(--wa-color-cyan-40);
+  --wa-color-cyan: var(--wa-color-cyan-50);
-  --wa-color-cyan-key: 40;
+  --wa-color-cyan-key: 50;
 
-  --wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
+  --wa-color-blue-95: #edf3ff /* oklch(96.312% 0.01733 264.49) */;
-  --wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
+  --wa-color-blue-90: #d8e7ff /* oklch(92.413% 0.03649 259.81) */;
-  --wa-color-blue-80: #b5cced /* oklch(83.888% 0.05268 257.37) */;
+  --wa-color-blue-80: #a9cdfd /* oklch(83.898% 0.07789 255.74) */;
-  --wa-color-blue-70: #95b1d7 /* oklch(75.273% 0.06312 256.12) */;
+  --wa-color-blue-70: #88b2e4 /* oklch(75.191% 0.08558 253.21) */;
-  --wa-color-blue-60: #7697c1 /* oklch(66.758% 0.07287 254.73) */;
+  --wa-color-blue-60: #6d98ca /* oklch(66.832% 0.08839 252.8) */;
-  --wa-color-blue-50: #5078a5 /* oklch(56.23% 0.08347 252.2) */;
+  --wa-color-blue-50: #4c78a8 /* oklch(56.163% 0.0895 251.64) */;
-  --wa-color-blue-40: #305b88 /* oklch(46.183% 0.08806 251.23) */;
+  --wa-color-blue-40: #2e5b89 /* oklch(46.149% 0.09035 250.84) */;
-  --wa-color-blue-30: #1b4771 /* oklch(38.952% 0.0863 250.15) */;
+  --wa-color-blue-30: #1c4772 /* oklch(39.053% 0.08729 251.07) */;
-  --wa-color-blue-20: #0a3458 /* oklch(31.794% 0.07822 249.27) */;
+  --wa-color-blue-20: #02345b /* oklch(31.798% 0.08493 248.65) */;
-  --wa-color-blue-10: #011f39 /* oklch(23.373% 0.0615 248.28) */;
+  --wa-color-blue-10: #001f3a /* oklch(23.402% 0.0636 248.4) */;
   --wa-color-blue-05: #001327 /* oklch(18.28% 0.04995 248.62) */;
   --wa-color-blue: var(--wa-color-blue-40);
   --wa-color-blue-key: 40;
 
-  --wa-color-indigo-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
+  --wa-color-indigo-95: #f1f1ff /* oklch(96.222% 0.01867 286.04) */;
-  --wa-color-indigo-90: #ede1ff /* oklch(92.831% 0.04213 303.7) */;
+  --wa-color-indigo-90: #e2e4ff /* oklch(92.556% 0.03662 282.29) */;
-  --wa-color-indigo-80: #d3c0ff /* oklch(84.487% 0.08877 298.31) */;
+  --wa-color-indigo-80: #bec7ff /* oklch(84.198% 0.07895 277.45) */;
-  --wa-color-indigo-70: #baa1f9 /* oklch(76.409% 0.12586 296.37) */;
+  --wa-color-indigo-70: #a1abe9 /* oklch(75.618% 0.0899 276.95) */;
-  --wa-color-indigo-60: #9f86e0 /* oklch(67.937% 0.13169 295.47) */;
+  --wa-color-indigo-60: #8791d0 /* oklch(67.33% 0.09401 276.64) */;
-  --wa-color-indigo-50: #7f67bd /* oklch(57.508% 0.13016 294.83) */;
+  --wa-color-indigo-50: #6871af /* oklch(56.77% 0.09626 276.58) */;
-  --wa-color-indigo-40: #624a9e /* oklch(47.598% 0.13133 294.01) */;
+  --wa-color-indigo-40: #4c5491 /* oklch(46.823% 0.09882 276.24) */;
-  --wa-color-indigo-30: #4e3589 /* oklch(40.435% 0.13395 293.19) */;
+  --wa-color-indigo-30: #39417a /* oklch(39.802% 0.09591 275.16) */;
-  --wa-color-indigo-20: #3a2074 /* oklch(33.206% 0.1353 291.46) */;
+  --wa-color-indigo-20: #262e62 /* oklch(32.442% 0.09163 273.61) */;
-  --wa-color-indigo-10: #24045f /* oklch(25.226% 0.1388 287.21) */;
+  --wa-color-indigo-10: #151a3e /* oklch(23.597% 0.06843 274) */;
-  --wa-color-indigo-05: #180044 /* oklch(19.806% 0.11332 288.23) */;
+  --wa-color-indigo-05: #0c102a /* oklch(18.638% 0.05262 273.62) */;
   --wa-color-indigo: var(--wa-color-indigo-40);
   --wa-color-indigo-key: 40;
 
-  --wa-color-purple-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
+  --wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
-  --wa-color-purple-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
+  --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
-  --wa-color-purple-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
+  --wa-color-purple-80: #d4bfff /* oklch(84.383% 0.09054 299.5) */;
-  --wa-color-purple-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
+  --wa-color-purple-70: #b9a4e9 /* oklch(76.164% 0.09954 297.97) */;
-  --wa-color-purple-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
+  --wa-color-purple-60: #9f89d0 /* oklch(67.711% 0.10516 297.78) */;
-  --wa-color-purple-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
+  --wa-color-purple-50: #7f69b0 /* oklch(57.166% 0.10893 297.1) */;
-  --wa-color-purple-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
+  --wa-color-purple-40: #624c92 /* oklch(47.204% 0.11139 296.38) */;
-  --wa-color-purple-30: #5d366c /* oklch(40.395% 0.09808 316) */;
+  --wa-color-purple-30: #4e3a77 /* oklch(40.061% 0.10079 296.72) */;
-  --wa-color-purple-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
+  --wa-color-purple-20: #3a2761 /* oklch(32.781% 0.09892 295.54) */;
-  --wa-color-purple-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
+  --wa-color-purple-10: #23163e /* oklch(24.121% 0.07355 295.33) */;
-  --wa-color-purple-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
+  --wa-color-purple-05: #160c2b /* oklch(18.861% 0.06023 294.83) */;
   --wa-color-purple: var(--wa-color-purple-40);
   --wa-color-purple-key: 40;
 
+  --wa-color-pink-95: #ffeff4 /* oklch(96.614% 0.01843 356.42) */;
+  --wa-color-pink-90: #fbdfe9 /* oklch(92.937% 0.03338 354.15) */;
+  --wa-color-pink-80: #f3bbcd /* oklch(84.75% 0.06824 357.54) */;
+  --wa-color-pink-70: #e699b2 /* oklch(76.622% 0.09694 358.59) */;
+  --wa-color-pink-60: #cf7c98 /* oklch(68.3% 0.10798 358.68) */;
+  --wa-color-pink-50: #aa5e78 /* oklch(57.699% 0.1031 358.97) */;
+  --wa-color-pink-40: #89425b /* oklch(47.676% 0.10071 359.33) */;
+  --wa-color-pink-30: #712f47 /* oklch(40.407% 0.09701 359.54) */;
+  --wa-color-pink-20: #571f34 /* oklch(33.048% 0.08607 359.54) */;
+  --wa-color-pink-10: #380f1f /* oklch(24.284% 0.06769 359.25) */;
+  --wa-color-pink-05: #260713 /* oklch(18.997% 0.0547 359.42) */;
+  --wa-color-pink: var(--wa-color-pink-60);
+  --wa-color-pink-key: 60;
+
   --wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
   --wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
   --wa-color-gray-80: #ccc8cd /* oklch(83.746% 0.00813 319.45) */;

src/styles/color/natural.css

@@ -3,27 +3,41 @@
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-natural {
   --wa-color-red-95: #f9f0ee /* oklch(96.159% 0.0101 32.516) */;
-  --wa-color-red-90: #f5e2dd /* oklch(92.669% 0.02202 35.121) */;
+  --wa-color-red-90: #f5e1dc /* oklch(92.449% 0.0231 34.298) */;
-  --wa-color-red-80: #e8bfb5 /* oklch(83.775% 0.0493 33.987) */;
+  --wa-color-red-80: #e9c1b7 /* oklch(84.299% 0.04808 34.353) */;
-  --wa-color-red-70: #dba294 /* oklch(76.229% 0.07115 34.235) */;
+  --wa-color-red-70: #daa193 /* oklch(75.915% 0.07123 34.238) */;
-  --wa-color-red-60: #c98373 /* oklch(67.81% 0.09043 33.504) */;
+  --wa-color-red-60: #c48576 /* oklch(67.655% 0.08143 33.955) */;
-  --wa-color-red-50: #ae6150 /* oklch(57.709% 0.10386 33.445) */;
+  --wa-color-red-50: #a86252 /* oklch(57.121% 0.09478 33.75) */;
-  --wa-color-red-40: #8c4434 /* oklch(47.455% 0.10187 33.787) */;
+  --wa-color-red-40: #864839 /* oklch(47.352% 0.08833 34.595) */;
-  --wa-color-red-30: #713225 /* oklch(40.002% 0.09248 33.14) */;
+  --wa-color-red-30: #6f3428 /* oklch(40.073% 0.08669 32.867) */;
   --wa-color-red-20: #562318 /* oklch(32.765% 0.07872 33.646) */;
   --wa-color-red-10: #36130b /* oklch(23.996% 0.05851 34.254) */;
   --wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-yellow-95: #f5f0e8 /* oklch(95.682% 0.01193 79.784) */;
+  --wa-color-orange-95: #f8f0ec /* oklch(96.084% 0.01043 54.557) */;
-  --wa-color-yellow-90: #ede4d5 /* oklch(92.192% 0.0223 80.684) */;
+  --wa-color-orange-90: #f2e3d8 /* oklch(92.485% 0.02211 56.694) */;
-  --wa-color-yellow-80: #dac6a4 /* oklch(83.455% 0.05079 80.939) */;
+  --wa-color-orange-80: #e4c4ad /* oklch(84.166% 0.04799 57.553) */;
+  --wa-color-orange-70: #d3a583 /* oklch(75.674% 0.07148 57.481) */;
+  --wa-color-orange-60: #bc8a65 /* oklch(67.319% 0.08062 57.054) */;
+  --wa-color-orange-50: #9e6940 /* oklch(56.757% 0.08845 56.746) */;
+  --wa-color-orange-40: #7e4d27 /* oklch(46.949% 0.08447 57.382) */;
+  --wa-color-orange-30: #673a17 /* oklch(39.774% 0.0793 55.768) */;
+  --wa-color-orange-20: #4f2906 /* oklch(32.45% 0.0725 57.629) */;
+  --wa-color-orange-10: #311702 /* oklch(23.759% 0.05361 57.126) */;
+  --wa-color-orange-05: #200d01 /* oklch(18.517% 0.04211 57.178) */;
+  --wa-color-orange: var(--wa-color-orange-50);
+  --wa-color-orange-key: 50;
+
+  --wa-color-yellow-95: #f6f1ea /* oklch(96.009% 0.01076 76.598) */;
+  --wa-color-yellow-90: #eee5d7 /* oklch(92.521% 0.02111 79.091) */;
+  --wa-color-yellow-80: #dbc8a8 /* oklch(84.033% 0.04791 80.753) */;
   --wa-color-yellow-70: #c7ab7b /* oklch(75.433% 0.07174 80.723) */;
-  --wa-color-yellow-60: #b29054 /* oklch(67.181% 0.08832 80.564) */;
+  --wa-color-yellow-60: #af905b /* oklch(66.983% 0.07981 80.152) */;
-  --wa-color-yellow-50: #94702b /* oklch(56.778% 0.09671 80.65) */;
+  --wa-color-yellow-50: #8f703a /* oklch(56.392% 0.08172 79.742) */;
-  --wa-color-yellow-40: #735310 /* oklch(46.47% 0.08924 80.445) */;
+  --wa-color-yellow-40: #71541d /* oklch(46.546% 0.08061 80.169) */;
-  --wa-color-yellow-30: #5c4003 /* oklch(39.286% 0.07968 79.822) */;
+  --wa-color-yellow-30: #5b4111 /* oklch(39.475% 0.07191 78.67) */;
   --wa-color-yellow-20: #442f00 /* oklch(32.136% 0.06628 81.612) */;
   --wa-color-yellow-10: #2a1b00 /* oklch(23.521% 0.04872 79.998) */;
   --wa-color-yellow-05: #1b1000 /* oklch(18.327% 0.03796 79.944) */;
@@ -46,31 +60,31 @@
 
   --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-80: #b8cdd1 /* oklch(83.375% 0.02342 210.4) */;
-  --wa-color-cyan-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
+  --wa-color-cyan-70: #96b4ba /* oklch(74.946% 0.03385 211.12) */;
-  --wa-color-cyan-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
+  --wa-color-cyan-60: #759ba2 /* oklch(66.386% 0.0429 210.11) */;
-  --wa-color-cyan-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
+  --wa-color-cyan-50: #4a7d86 /* oklch(55.736% 0.05643 209.98) */;
-  --wa-color-cyan-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
+  --wa-color-cyan-40: #2f6067 /* oklch(45.783% 0.05405 207.62) */;
-  --wa-color-cyan-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
+  --wa-color-cyan-30: #1e4c52 /* oklch(38.743% 0.05069 206.89) */;
-  --wa-color-cyan-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
+  --wa-color-cyan-20: #0c383e /* oklch(31.452% 0.04725 208.21) */;
   --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-cyan: var(--wa-color-cyan-50);
-  --wa-color-cyan-key: 40;
+  --wa-color-cyan-key: 50;
 
-  --wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
+  --wa-color-blue-95: #f0f2f6 /* oklch(96.077% 0.00576 264.53) */;
-  --wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
+  --wa-color-blue-90: #e0e5ef /* oklch(92.101% 0.0146 264.5) */;
-  --wa-color-blue-80: #bdc9dc /* oklch(83.261% 0.0297 259.59) */;
+  --wa-color-blue-80: #c0cbde /* oklch(83.957% 0.02915 261.47) */;
   --wa-color-blue-70: #9fb0ca /* oklch(75.271% 0.04205 258.8) */;
   --wa-color-blue-60: #8196b8 /* oklch(66.901% 0.05611 259.98) */;
-  --wa-color-blue-50: #5f779e /* oklch(56.593% 0.06705 259.94) */;
+  --wa-color-blue-50: #5c76a0 /* oklch(56.262% 0.07235 259.79) */;
-  --wa-color-blue-40: #415981 /* oklch(46.262% 0.07185 260.29) */;
+  --wa-color-blue-40: #425981 /* oklch(46.327% 0.07137 261.08) */;
   --wa-color-blue-30: #2f466a /* oklch(39.269% 0.06791 259.08) */;
   --wa-color-blue-20: #203351 /* oklch(32.043% 0.05935 259.22) */;
   --wa-color-blue-10: #101e34 /* oklch(23.495% 0.04695 259.11) */;
-  --wa-color-blue-05: #081223 /* oklch(18.293% 0.03819 260.22) */;
+  --wa-color-blue-05: #081224 /* oklch(18.37% 0.04003 261.12) */;
-  --wa-color-blue: var(--wa-color-blue-40);
+  --wa-color-blue: var(--wa-color-blue-50);
-  --wa-color-blue-key: 40;
+  --wa-color-blue-key: 50;
 
   --wa-color-indigo-95: #f2f2f7 /* oklch(96.257% 0.00665 286.27) */;
   --wa-color-indigo-90: #e6e5f1 /* oklch(92.619% 0.01616 289.92) */;
@@ -91,14 +105,28 @@
   --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-50: #866a99 /* oklch(56.923% 0.07763 311.15) */;
-  --wa-color-purple-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
+  --wa-color-purple-40: #694f7a /* oklch(47.198% 0.07429 311.36) */;
   --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-purple: var(--wa-color-purple-50);
-  --wa-color-purple-key: 40;
+  --wa-color-purple-key: 50;
+
+  --wa-color-pink-95: #f8f0f3 /* oklch(96.22% 0.00943 352.36) */;
+  --wa-color-pink-90: #f0e2e7 /* oklch(92.534% 0.0166 353.65) */;
+  --wa-color-pink-80: #dec3ce /* oklch(84.312% 0.03375 351.3) */;
+  --wa-color-pink-70: #cba4b4 /* oklch(75.858% 0.05043 351.83) */;
+  --wa-color-pink-60: #b9879c /* oklch(67.84% 0.06707 352.09) */;
+  --wa-color-pink-50: #a0637d /* oklch(57.443% 0.08557 353.01) */;
+  --wa-color-pink-40: #7f4860 /* oklch(47.455% 0.08107 352.99) */;
+  --wa-color-pink-30: #67364c /* oklch(40.225% 0.07544 352.68) */;
+  --wa-color-pink-20: #4f2538 /* oklch(32.865% 0.06781 352.99) */;
+  --wa-color-pink-10: #311422 /* oklch(23.991% 0.05118 351.37) */;
+  --wa-color-pink-05: #200b15 /* oklch(18.69% 0.03937 351.69) */;
+  --wa-color-pink: var(--wa-color-pink-50);
+  --wa-color-pink-key: 50;
 
   --wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
   --wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;

src/styles/color/rudimentary.css

@@ -2,104 +2,132 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-rudimentary {
-  --wa-color-red-95: #fee /* oklch(96.257% 0.01846 17.478) */;
+  --wa-color-red-95: #fff0f0 /* oklch(96.694% 0.01624 17.438) */;
   --wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
-  --wa-color-red-80: #ffb6b8 /* oklch(84.502% 0.08518 17.203) */;
+  --wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
-  --wa-color-red-70: #fb9191 /* oklch(76.892% 0.12835 20.456) */;
+  --wa-color-red-70: #fe8f8a /* oklch(76.793% 0.13503 23.416) */;
-  --wa-color-red-60: #f16b5e /* oklch(68.899% 0.16784 27.833) */;
+  --wa-color-red-60: #f6665e /* oklch(68.97% 0.17859 26.005) */;
-  --wa-color-red-50: #da3c06 /* oklch(58.891% 0.20155 35.469) */;
+  --wa-color-red-50: #e32720 /* oklch(58.995% 0.22134 28.631) */;
-  --wa-color-red-40: #a62c00 /* oklch(48.117% 0.16441 36.104) */;
+  --wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
-  --wa-color-red-30: #812500 /* oklch(40.578% 0.1326 38.082) */;
+  --wa-color-red-30: #910101 /* oklch(41.281% 0.16874 29.146) */;
-  --wa-color-red-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
+  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
-  --wa-color-red-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
+  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
-  --wa-color-red-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
+  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-yellow-95: #fff497 /* oklch(95.586% 0.11473 102.45) */;
+  --wa-color-orange-95: oklch(96.488% 0.04965 58.92);
-  --wa-color-yellow-90: #ffe571 /* oklch(92.08% 0.13847 96.881) */;
+  --wa-color-orange-90: oklch(92.244% 0.08759 57.789);
-  --wa-color-yellow-80: #ffbd31 /* oklch(83.787% 0.16061 80.808) */;
+  --wa-color-orange-80: oklch(84.32% 0.12702 56.232);
-  --wa-color-yellow-70: #f09d27 /* oklch(76.177% 0.15513 69.241) */;
+  --wa-color-orange-70: oklch(76.31% 0.17967 50.95);
-  --wa-color-yellow-60: #d67f31 /* oklch(67.745% 0.13973 58.256) */;
+  --wa-color-orange-60: #e87431 /* oklch(68.352% 0.16354 47.083) */;
-  --wa-color-yellow-50: #b1612d /* oklch(57.606% 0.12242 50.859) */;
+  --wa-color-orange-50: oklch(58.23% 0.17947 43.3);
-  --wa-color-yellow-40: #8b4527 /* oklch(47.274% 0.1046 42.804) */;
+  --wa-color-orange-40: oklch(48.089% 0.16071 40.798);
-  --wa-color-yellow-30: #703422 /* oklch(40.129% 0.09009 37.442) */;
+  --wa-color-orange-30: oklch(40.708% 0.13699 39.616);
-  --wa-color-yellow-20: #53251c /* oklch(32.68% 0.071 32.488) */;
+  --wa-color-orange-20: oklch(33.124% 0.1121 39.599);
-  --wa-color-yellow-10: #311613 /* oklch(23.859% 0.04441 27.497) */;
+  --wa-color-orange-10: oklch(24.257% 0.08204 39.602);
-  --wa-color-yellow-05: #1f0d0b /* oklch(18.561% 0.0315 27.209) */;
+  --wa-color-orange-05: oklch(18.966% 0.06414 39.606);
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
+  --wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */;
+  --wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */;
+  --wa-color-yellow-80: #f4c403 /* oklch(83.862% 0.17104 90.777) */;
+  --wa-color-yellow-70: #e6a200 /* oklch(75.828% 0.1578 78.483) */;
+  --wa-color-yellow-60: #d28300 /* oklch(67.735% 0.14848 68.161) */;
+  --wa-color-yellow-50: #b36000 /* oklch(57.465% 0.13759 57.969) */;
+  --wa-color-yellow-40: #8f4400 /* oklch(47.43% 0.12139 52.363) */;
+  --wa-color-yellow-30: #733301 /* oklch(40.135% 0.10525 50.086) */;
+  --wa-color-yellow-20: #562400 /* oklch(32.667% 0.08641 49.965) */;
+  --wa-color-yellow-10: #361400 /* oklch(23.998% 0.06347 49.971) */;
+  --wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
   --wa-color-yellow: var(--wa-color-yellow-80);
   --wa-color-yellow-key: 80;
 
-  --wa-color-green-95: #dafadc /* oklch(95.411% 0.05194 146.87) */;
+  --wa-color-green-95: #d3fece /* oklch(95.448% 0.0775 142.18) */;
-  --wa-color-green-90: #b9f4bc /* oklch(91.261% 0.09639 146.02) */;
+  --wa-color-green-90: #a3fb9e /* oklch(91.005% 0.15051 143.02) */;
-  --wa-color-green-80: #64e177 /* oklch(81.419% 0.18348 146.66) */;
+  --wa-color-green-80: #55e557 /* oklch(81.532% 0.22113 143.41) */;
-  --wa-color-green-70: #2ec859 /* oklch(73.18% 0.19719 147.79) */;
+  --wa-color-green-70: #35c83d /* oklch(73.012% 0.21608 143.61) */;
-  --wa-color-green-60: #00ac4a /* oklch(64.995% 0.18331 149.02) */;
+  --wa-color-green-60: #21ac2c /* oklch(64.997% 0.20039 143.64) */;
-  --wa-color-green-50: #008840 /* oklch(54.827% 0.14802 150.85) */;
+  --wa-color-green-50: #0f881d /* oklch(54.57% 0.17259 143.76) */;
-  --wa-color-green-40: #006734 /* oklch(45.037% 0.11628 152.87) */;
+  --wa-color-green-40: #016810 /* oklch(44.912% 0.14592 143.81) */;
-  --wa-color-green-30: #005128 /* oklch(38.134% 0.09801 153.08) */;
+  --wa-color-green-30: #005207 /* oklch(38.047% 0.12561 143.42) */;
-  --wa-color-green-20: #003b1c /* oklch(30.9% 0.07883 153.44) */;
+  --wa-color-green-20: #003c03 /* oklch(30.89% 0.10259 143.24) */;
-  --wa-color-green-10: #00230e /* oklch(22.462% 0.05754 153.24) */;
+  --wa-color-green-10: #002401 /* oklch(22.574% 0.07524 143.13) */;
-  --wa-color-green-05: #001607 /* oklch(17.557% 0.04482 153.41) */;
+  --wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
-  --wa-color-green: var(--wa-color-green-70);
+  --wa-color-green: var(--wa-color-green-80);
-  --wa-color-green-key: 70;
+  --wa-color-green-key: 80;
 
-  --wa-color-cyan-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
+  --wa-color-cyan-95: #bffdfd /* oklch(95.254% 0.06191 196.16) */;
-  --wa-color-cyan-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
+  --wa-color-cyan-90: #87f8f6 /* oklch(91.191% 0.10384 193.98) */;
-  --wa-color-cyan-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
+  --wa-color-cyan-80: #11e0e1 /* oklch(82.2% 0.13867 195.37) */;
-  --wa-color-cyan-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
+  --wa-color-cyan-70: #00c1cc /* oklch(73.822% 0.12561 202.07) */;
-  --wa-color-cyan-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
+  --wa-color-cyan-60: #00a4b6 /* oklch(65.766% 0.11321 208.52) */;
-  --wa-color-cyan-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
+  --wa-color-cyan-50: #008098 /* oklch(55.318% 0.09882 217.04) */;
-  --wa-color-cyan-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
+  --wa-color-cyan-40: #016177 /* oklch(45.597% 0.08301 220.49) */;
-  --wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
+  --wa-color-cyan-30: #014c5f /* oklch(38.623% 0.07093 221.97) */;
-  --wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
+  --wa-color-cyan-20: #003746 /* oklch(31.239% 0.05795 222.52) */;
-  --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
+  --wa-color-cyan-10: #00212c /* oklch(23.027% 0.04335 224.27) */;
-  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
+  --wa-color-cyan-05: #00141c /* oklch(17.778% 0.0335 224.39) */;
-  --wa-color-cyan: var(--wa-color-cyan-70);
+  --wa-color-cyan: var(--wa-color-cyan-80);
-  --wa-color-cyan-key: 70;
+  --wa-color-cyan-key: 80;
 
-  --wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
+  --wa-color-blue-95: #e5f6fe /* oklch(96.294% 0.02094 227.52) */;
-  --wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
+  --wa-color-blue-90: #c5ebff /* oklch(91.932% 0.04809 230.9) */;
-  --wa-color-blue-80: #87d1ff /* oklch(82.911% 0.09817 236.93) */;
+  --wa-color-blue-80: #8bd2ff /* oklch(83.326% 0.09527 237.31) */;
-  --wa-color-blue-70: #4cb8ff /* oklch(75.061% 0.14167 241.25) */;
+  --wa-color-blue-70: #55b6ff /* oklch(74.905% 0.13947 244.06) */;
-  --wa-color-blue-60: #09f /* oklch(66.905% 0.18368 248.81) */;
+  --wa-color-blue-60: #2a97ff /* oklch(66.922% 0.18057 251.94) */;
-  --wa-color-blue-50: #0072ed /* oklch(57.257% 0.20469 257.18) */;
+  --wa-color-blue-50: #146bff /* oklch(57.485% 0.23344 261.04) */;
-  --wa-color-blue-40: #0053be /* oklch(47.006% 0.18201 258.98) */;
+  --wa-color-blue-40: #0e48de /* oklch(48.043% 0.23341 263.63) */;
-  --wa-color-blue-30: #00409b /* oklch(39.927% 0.15956 259.61) */;
+  --wa-color-blue-30: #0038b0 /* oklch(40.387% 0.19651 262.63) */;
-  --wa-color-blue-20: #002e76 /* oklch(32.56% 0.13217 259.91) */;
+  --wa-color-blue-20: #002887 /* oklch(33.083% 0.16285 262.76) */;
-  --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
+  --wa-color-blue-10: #001658 /* oklch(24.241% 0.12149 262.95) */;
-  --wa-color-blue-05: #000f36 /* oklch(18.68% 0.08063 260.98) */;
+  --wa-color-blue-05: #000c3c /* oklch(18.73% 0.09414 262.97) */;
   --wa-color-blue: var(--wa-color-blue-50);
   --wa-color-blue-key: 50;
 
-  --wa-color-indigo-95: #f1efff /* oklch(95.834% 0.02142 291.74) */;
+  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
-  --wa-color-indigo-90: #e7e3ff /* oklch(92.744% 0.03793 292.2) */;
+  --wa-color-indigo-90: #e1e4ff /* oklch(92.481% 0.03674 280.62) */;
-  --wa-color-indigo-80: #cbc1ff /* oklch(84.027% 0.08632 291.82) */;
+  --wa-color-indigo-80: #c0c6ff /* oklch(84.148% 0.07987 279.84) */;
-  --wa-color-indigo-70: #b3a3ff /* oklch(76.472% 0.13034 290.97) */;
+  --wa-color-indigo-70: #a2a7ff /* oklch(75.911% 0.12582 280.46) */;
-  --wa-color-indigo-60: #9b81ff /* oklch(68.426% 0.17995 290.32) */;
+  --wa-color-indigo-60: #8a87ff /* oklch(68.133% 0.17285 281.91) */;
-  --wa-color-indigo-50: #7f56f9 /* oklch(58.841% 0.22979 288.88) */;
+  --wa-color-indigo-50: #6f5aff /* oklch(58.566% 0.23371 282.19) */;
-  --wa-color-indigo-40: #6427e7 /* oklch(49.439% 0.25627 286.93) */;
+  --wa-color-indigo-40: #5823f7 /* oklch(49.739% 0.27634 280.94) */;
-  --wa-color-indigo-30: #5102ca /* oklch(42.528% 0.24562 286.08) */;
+  --wa-color-indigo-30: #4600d4 /* oklch(42.607% 0.25731 280.24) */;
-  --wa-color-indigo-20: #3a009b /* oklch(34.649% 0.20256 284.92) */;
+  --wa-color-indigo-20: #3200a1 /* oklch(34.632% 0.20991 279.75) */;
-  --wa-color-indigo-10: #220064 /* oklch(25.227% 0.14791 284.49) */;
+  --wa-color-indigo-10: #1d0069 /* oklch(25.391% 0.1543 279.39) */;
-  --wa-color-indigo-05: #160046 /* oklch(19.835% 0.11578 285.15) */;
+  --wa-color-indigo-05: #120049 /* oklch(19.822% 0.11998 279.93) */;
   --wa-color-indigo: var(--wa-color-indigo-40);
   --wa-color-indigo-key: 40;
 
-  --wa-color-purple-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
+  --wa-color-purple-95: #f9f0ff /* oklch(96.646% 0.02199 312.19) */;
-  --wa-color-purple-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
+  --wa-color-purple-90: #f2dfff /* oklch(92.855% 0.04724 311.73) */;
-  --wa-color-purple-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
+  --wa-color-purple-80: #e5b9fe /* oklch(84.736% 0.10475 313.02) */;
-  --wa-color-purple-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
+  --wa-color-purple-70: #d794fc /* oklch(77.031% 0.15876 312.74) */;
-  --wa-color-purple-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
+  --wa-color-purple-60: #c86df6 /* oklch(69.308% 0.20786 312.9) */;
-  --wa-color-purple-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
+  --wa-color-purple-50: #b334e8 /* oklch(59.685% 0.25757 313.29) */;
-  --wa-color-purple-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
+  --wa-color-purple-40: #9200c2 /* oklch(49.816% 0.24738 313.46) */;
-  --wa-color-purple-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
+  --wa-color-purple-30: #720a97 /* oklch(41.936% 0.20122 313.63) */;
-  --wa-color-purple-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
+  --wa-color-purple-20: #550373 /* oklch(34.13% 0.16667 313.17) */;
-  --wa-color-purple-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
+  --wa-color-purple-10: #350149 /* oklch(24.929% 0.12192 313.39) */;
-  --wa-color-purple-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
+  --wa-color-purple-05: #240033 /* oklch(19.65% 0.09758 313.47) */;
   --wa-color-purple: var(--wa-color-purple-50);
   --wa-color-purple-key: 50;
 
+  --wa-color-pink-95: #ffeffa /* oklch(96.786% 0.02239 336.83) */;
+  --wa-color-pink-90: #ffdcf6 /* oklch(93.109% 0.05123 335.07) */;
+  --wa-color-pink-80: #ffb2ec /* oklch(85.389% 0.11534 335.86) */;
+  --wa-color-pink-70: #fd84de /* oklch(77.594% 0.18006 337.78) */;
+  --wa-color-pink-60: #f058cd /* oklch(69.814% 0.2238 338) */;
+  --wa-color-pink-50: #d31db1 /* oklch(59.681% 0.24785 337.93) */;
+  --wa-color-pink-40: #a6008a /* oklch(49.234% 0.21583 338.04) */;
+  --wa-color-pink-30: #84006d /* oklch(41.627% 0.18237 338.17) */;
+  --wa-color-pink-20: #630051 /* oklch(33.902% 0.14844 338.29) */;
+  --wa-color-pink-10: #3f0032 /* oklch(24.899% 0.1087 338.93) */;
+  --wa-color-pink-05: #2a0021 /* oklch(19.332% 0.08461 338.38) */;
+  --wa-color-pink: var(--wa-color-pink-50);
+  --wa-color-pink-key: 50;
+
   --wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
   --wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
   --wa-color-gray-80: #c9c9c9 /* oklch(83.591% 0 none) */;

src/styles/color/scripts/palettes-analyzed.js

@@ -5,6 +5,7 @@
  * More later.
  */
 import rawPalettes from './palettes.js';
+import { clamp } from './util.js';
 
 // Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance)
 const DEFAULT_ACCENT = 60;
@@ -23,15 +24,22 @@ for (let paletteId in palettes) {
   palettes[paletteId] = tokens;
 
   for (let hue in tokens) {
-    let tints = Object.assign({}, tokens[hue]);
+    let scale = Object.assign({}, tokens[hue]);
-    tokens[hue] = tints;
+    tokens[hue] = scale;
 
-    let maxChromaTint = DEFAULT_ACCENT;
+    let maxChromaTint = DEFAULT_ACCENT; // TODO handle scale.core
-    let maxChroma = tints[DEFAULT_ACCENT].c || 0;
+    let maxChroma = scale.core?.get('oklch.c') ?? (scale[DEFAULT_ACCENT].c || 0);
 
-    for (let tint in tints) {
+    for (let tint in scale) {
-      let color = tints[tint].to('oklch');
+      let color = scale[tint];
-      tints[tint] = color;
+
+      if (!color || color.constructor.name !== 'Color') {
+        // Not a color
+        continue;
+      }
+
+      color = color.to('oklch');
+      scale[tint] = color;
 
       if (tint === '05') {
         // The object has both '5' and '05' keys, but '05' is out of order
@@ -46,21 +54,17 @@ for (let paletteId in palettes) {
       }
     }
 
-    tints['05'] = tints['5'];
+    scale['05'] = scale['5'];
 
-    tints.maxChroma = tints.maxChromaRaw = maxChroma;
+    scale.maxChroma = scale.maxChromaRaw = maxChroma;
-    tints.maxChromaTint = tints.maxChromaTintRaw = maxChromaTint;
+    scale.maxChromaTint = scale.maxChromaTintRaw = maxChromaTint;
 
     if (maxChromaTint < MIN_ACCENT || maxChromaTint > MAX_ACCENT) {
-      tints.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT);
+      scale.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT);
-      tints.maxChroma = tints[maxChromaTint].c;
+      scale.maxChroma = scale[maxChromaTint].c;
     }
   }
 }
 
-function clamp(min, value, max) {
-  return Math.min(Math.max(min, value), max);
-}
-
 export default palettes;
 export { rawPalettes };

src/styles/color/scripts/palettes.js

@@ -6,13 +6,11 @@
 import Color from 'colorjs.io';
 import fs from 'fs';
 import path from 'path';
-import { fileURLToPath } from 'url';
+import { PALETTE_DIR } from './util.js';
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
+export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css'));
-
-export const paletteFiles = fs.readdirSync(__dirname).filter(file => file.endsWith('.css'));
 export const declarationRegex =
-  /^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
+  /^\s*--wa-color-(?<hue>[a-z]+)(?:-(?<level>[0-9]+|key))?:\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
 export const rawCSS = {};
 
 function parse(contents, file) {
@@ -26,8 +24,24 @@ function parse(contents, file) {
   const ret = {};
 
   for (let match of matches) {
-    let { hue, level, color } = match.groups;
+    let { hue, level = '', color } = match.groups;
     ret[hue] ??= {};
+    let scale = ret[hue];
+
+    if (level === 'key') {
+      scale.maxChromaTint = color;
+      continue;
+    }
+
+    if (!level) {
+      if (color.startsWith('var(')) {
+        // Core color aliased to another color, ignore
+        continue;
+      } else {
+        // Custom core color
+        level = 'core';
+      }
+    }
 
     // Attempt to convert color to Color object, fall back to string if this fails
     // This will happen for e.g. colors defined via color-mix()
@@ -40,13 +54,13 @@ function parse(contents, file) {
     if (level.startsWith('0')) {
       // Leading zeroes throw off sorting, add both properties
       // NOTE: Ideally one of the two would be added as non-enumerable, but then we cannot access it via 11ty data
-      ret[hue][level] = color;
+      scale[level] = color;
 
       // Drop leading zeroes
       level = level.replace(/^0+/, '');
     }
 
-    ret[hue][level] = color;
+    scale[level] = color;
   }
 
   return ret;
@@ -55,7 +69,7 @@ function parse(contents, file) {
 const palettes = {};
 
 for (let file of paletteFiles) {
-  let css = fs.readFileSync(path.join(__dirname, file), 'utf8');
+  let css = fs.readFileSync(path.join(PALETTE_DIR, file), 'utf8');
   rawCSS[file] = css;
   let tokens = parse(css, file);
   let paletteId = file.replace(/\.css$/, '');

src/styles/color/scripts/postprocess.js

@@ -0,0 +1,162 @@
+/**
+ * Post-process palette CSS files to add core colors, oklch coordinates etc.
+ * Run via node postprocess.js
+ * Warning: Will overwrite existing files. Check the diff before committing!
+ */
+import chalk from 'chalk';
+import fs from 'fs';
+import path from 'path';
+import palettes from './palettes-analyzed.js';
+import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
+
+// TODO import from global data file instead of duplicating this data
+const hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
+const huesChromatic = hues.slice(0, -1);
+
+/** If a hue is missing, how should it be generated from the neighboring hues? */
+const mixPercentage = { orange: 0.6 };
+const selector = paletteId =>
+  [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
+    ',\n',
+  );
+
+// Used for formatting warnings
+const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0);
+const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0);
+
+const indent = '  ';
+
+const paletteIssues = { total: 0 };
+
+for (let paletteId in palettes) {
+  const palette = palettes[paletteId];
+
+  let paletteCSS = '';
+  let hueCSS = Object.fromEntries(hues.map(hue => [hue, '']));
+
+  for (let hue in palette) {
+    let scale = palette[hue];
+
+    if (scale.maxChromaTint != scale.maxChromaTintRaw) {
+      reportPaletteIssue(
+        `Clamping accent color to ${chalk.bold(scale.maxChromaTint)}, but peak chroma is in ${chalk.bold(scale.maxChromaTintRaw)} (${formatComparison(scale[scale.maxChromaTintRaw].c, scale[scale.maxChromaTint].c)})`,
+        { paletteId, hue: hue },
+      );
+    }
+
+    hueCSS[hue] += scaleCSS(hue, scale);
+  }
+
+  // Generate missing hues
+  for (let i = 0; i < hues.length; i++) {
+    let hue = hues[i];
+
+    if (hueCSS[hue]) {
+      continue;
+    }
+
+    // Find previous and next hue to interpolate
+    // We assume gaps will always be at most 1 hue wide
+    let prevHue = huesChromatic[i - 1] ?? huesChromatic.at(-1);
+    let nextHue = huesChromatic[i + 1] ?? huesChromatic[0];
+
+    reportPaletteIssue(`Missing hue. Generating from ${prevHue} and ${nextHue}`, { paletteId, hue });
+
+    let prevScale = palette[prevHue];
+    let nextScale = palette[nextHue];
+
+    let progress = mixPercentage[hue] ?? 0.5;
+    let scale = (palette[hue] = {});
+
+    scale.maxChromaTint = (1 - progress) * prevScale.maxChromaTint + progress * nextScale.maxChromaTint;
+    scale.maxChromaTint = Math.round(scale.maxChromaTint / 10) * 10;
+
+    for (let tint in prevScale) {
+      if (tint === '05' || !(tint > 0)) {
+        continue;
+      }
+
+      let prevColor = palette[prevHue][tint];
+      let nextColor = palette[nextHue][tint];
+
+      let color = prevColor.mix(nextColor, progress, { space: 'oklch' });
+      scale[tint] = color;
+    }
+
+    // Ensure core color has the max chroma
+    let coreColor = scale[scale.maxChromaTint];
+    coreColor.c = Math.max(...Object.values(scale).map(color => color.c || 0)) + 0.0002;
+
+    hueCSS[hue] += scaleCSS(hue, scale);
+  }
+
+  hueCSS = Object.values(hueCSS).filter(Boolean).join('\n\n');
+  // TODO apply Prettier instead of faking it
+  paletteCSS = `${selector(paletteId)} {\n${hueCSS.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
+
+  fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), paletteCSS, 'utf8');
+}
+
+let issuePaletteCount = Object.keys(paletteIssues).length - 1;
+console.info(
+  `🎨 Wrote ${Object.keys(palettes).length} palette files.` +
+    (paletteIssues.total > 0
+      ? ` ${chalk.bold(paletteIssues.total)} issues found across ${chalk.bold(issuePaletteCount)} palettes.`
+      : ''),
+);
+
+function reportPaletteIssue(issue, { paletteId, hue }) {
+  let palettePrefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
+
+  if (!paletteIssues[paletteId]) {
+    // First time encountering an issue with this palette
+    paletteIssues[paletteId] = { count: 0 };
+  } else {
+    // Don't print palette id multiple times
+    palettePrefix = ' '.repeat(paletteIdMaxChars + 2);
+  }
+
+  paletteIssues[paletteId].count++;
+  paletteIssues.total++;
+
+  let msg = palettePrefix;
+  let huePrefix = '';
+
+  if (hue) {
+    huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
+  }
+
+  console.warn(`${msg}${huePrefix}${issue}`);
+}
+
+function declareColor(color, hue, tint) {
+  tint = tint.padStart(2, '0');
+  let ret = `--wa-color-${hue}-${tint}: `;
+
+  if (color.inGamut('srgb')) {
+    ret += `${color.toString({ format: 'hex' })} /* ${color.toString()} */;`;
+  } else {
+    ret += `${color.toString()};`;
+  }
+
+  return ret;
+}
+
+function scaleCSS(hue, scale) {
+  let ret = [];
+  for (let tint in scale) {
+    if (tint === '05' || !(tint > 0)) {
+      // The object has both '5' and '05' keys, but '05' is out of order
+      // Also ignore non-tints
+      continue;
+    }
+
+    let color = scale[tint];
+    ret.push(declareColor(color, hue, tint));
+  }
+  ret.reverse();
+
+  ret.push(`--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});`);
+  ret.push(`--wa-color-${hue}-key: ${scale.maxChromaTint};`);
+  return ret.join('\n');
+}

src/styles/color/scripts/ranges.js

@@ -0,0 +1,207 @@
+// Run via node ranges.js to analyze all palettes
+// Add palette ids, hue names, or tints to filter the analysis (e.g. node ranges.js red anodized -gray)
+import palettes from './palettes-analyzed.js';
+import { aggregates, normalizeAngles, toPrecision } from './util.js';
+
+/**
+ * Each "test" consists of the following params to analyze:
+ * - component: The color component to analyze (h, c, l). If `getValue()` is provided, this is ignored.
+ * - getValue: A function to extract the value to analyze from a color, for more complex analysis than just getting a component
+ * - by: The grouping to analyze by (1-2 of 'tint', 'hue', 'palette'). If `getKey()` is provided, this is ignored
+ * - getKey: A function to generate a key for each group. If not provided, it is generated based on the 'by' param
+ * - caption: The caption to display in the console. If not provided, a default label is generated from test params.
+ * - filter: Restrict to specific hues/tints/palettes or exclude them
+ * - stats: The stats to calculate for each group (min, max, mid, extent, avg, median, count)
+ */
+let tests = [
+  { component: 'h', by: 'hue', filter: ['core ± 10', '-gray'] },
+  { component: 'h', by: 'hue', filter: ['core', '-gray'] },
+  { component: 'h', by: 'palette', filter: ['core', 'gray'] },
+  { component: 'c', by: 'tint', filter: '-gray' },
+  { component: 'c', by: 'palette', filter: 'core', stats: ['max', 'avg', 'median', 'count'] },
+  { component: 'l', by: 'tint' },
+  {
+    caption: 'Hue change between consecutive tints',
+    getValue(color, { palette, tint, hue }) {
+      let nextTint = getNextTint(tint);
+      let nextColor = palettes[palette][hue][nextTint];
+      return color.h - nextColor.h;
+    },
+    getKey({ tint }) {
+      return `${tint} → ${getNextTint(tint)}`;
+    },
+    filter: '-95',
+  },
+];
+
+const COMPONENT_NAMES = { l: 'lightness', c: 'chroma', h: 'hue' };
+const CORE_TINT_MICROSYNTAX = /^core\s*((?<op>[-+±])\s*(?<offset>\d+))?$/;
+
+const all = {
+  tints: ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'],
+  hues: ['red', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'],
+  palettes: Object.keys(palettes),
+};
+
+let args = process.argv.slice(2);
+let used = getSubset(all, args);
+
+const getNextTint = tint => Number(tint) + (tint == 5 || tint == 90 ? 5 : 10);
+
+for (let key in used) {
+  if (used[key].length < all[key].length) {
+    // Subset of values
+    console.log(`Analyzing only ${key}:`, used[key].join(', '));
+  }
+}
+
+/**
+ * Apply a list of args (hues, tints, palette ids) to add or exclude against the corresponding arrays
+ */
+function getSubset(all, args) {
+  args = Array.isArray(args) ? args : [args];
+
+  let used = {
+    tints: [],
+    hues: [],
+    palettes: [],
+  };
+
+  if (args.length > 0) {
+    for (let arg of args) {
+      let isNegative = arg.startsWith('-');
+      arg = isNegative ? arg.slice(1) : arg;
+      let key = Object.entries(all).find(([key, values]) => values.includes(arg))?.[0];
+
+      if (!key && CORE_TINT_MICROSYNTAX.test(arg)) {
+        key = 'tints';
+      }
+
+      if (key) {
+        if (isNegative) {
+          let array = used[key].length === 0 ? all[key] : used[key];
+          used[key] = array.filter(value => value !== arg);
+        } else {
+          used[key].push(arg);
+        }
+      }
+    }
+  }
+
+  // If no filters, use all values
+  for (let key in used) {
+    if (used[key].length === 0) {
+      used[key] = all[key].slice();
+    }
+  }
+
+  return used;
+}
+
+function runTest(test = {}) {
+  let {
+    component,
+    getValue = color => color[component],
+    by = 'tint',
+    getKey = getDefaultKey(by),
+    filter,
+    caption = getDefaultCaption(test),
+    stats = ['min', 'max', 'median', 'count'],
+    silent,
+  } = test;
+  let results = {};
+  let localUsed = filter ? getSubset(used, filter) : used;
+
+  for (let palette of localUsed.palettes) {
+    for (let hue of localUsed.hues) {
+      let coreTint = palettes[palette][hue].maxChromaTint;
+      // Resolve any core tint microsyntax
+      let tints = localUsed.tints.flatMap(tint => {
+        if (CORE_TINT_MICROSYNTAX.test(tint)) {
+          let { op, offset } = CORE_TINT_MICROSYNTAX.exec(tint).groups;
+
+          if (!offset) {
+            return coreTint;
+          }
+
+          return used.tints.filter(t => {
+            let distance = t - coreTint;
+            return Math.abs(distance) <= offset && !((op === '-' && distance > 0) || (op === '+' && distance < 0));
+          });
+        }
+
+        return tint;
+      });
+
+      for (let tint of tints) {
+        let key = getKey({ hue, tint, palette });
+        let color = palettes[palette][hue][tint];
+        let value = getValue(color, { hue, tint, palette }, localUsed);
+
+        results[key] ??= [];
+        results[key].push(value);
+      }
+    }
+  }
+
+  // Process results
+  for (let key in results) {
+    let values = results[key];
+
+    if (component === 'h') {
+      values = normalizeAngles(values);
+    }
+
+    results[key] = stats.reduce((acc, stat) => {
+      acc[stat] = toPrecision(aggregates[stat](values, acc));
+      return acc;
+    }, {});
+  }
+
+  if (!silent) {
+    console.log(caption);
+    console.table(results);
+    console.log('\n');
+  }
+
+  return results;
+}
+
+for (let test of tests) {
+  runTest(test);
+}
+
+function getDefaultKey(by) {
+  by = Array.isArray(by) ? by : [by];
+
+  return variables =>
+    by
+      .map((variableName, i) => {
+        if (variableName === 'tint' && i === 0) {
+          // Drop leading zeros because they throw off row order
+          return String(variables.tint).replace(/^0+/, '');
+        }
+        return variables[variableName];
+      })
+      .join('-');
+}
+
+function getDefaultCaption({ component, by, filter }) {
+  let ret = COMPONENT_NAMES[component];
+
+  by = Array.isArray(by) ? by : [by];
+  ret += ` by ${by.join(' ')}`;
+
+  if (filter) {
+    filter = Array.isArray(filter) ? filter.join(', ') : filter;
+    ret += ` (${filter})`;
+  }
+
+  ret = ret.replace('hue by hue', 'hue by color name');
+
+  return capitalize(ret);
+}
+
+function capitalize(str) {
+  return str[0].toUpperCase() + str.slice(1);
+}

src/styles/color/scripts/util.js

@@ -0,0 +1,106 @@
+import chalk from 'chalk';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+let url = new URL('.', import.meta.url);
+// One level up
+url.pathname = path.join(url.pathname, '..');
+export const PALETTE_DIR = fileURLToPath(url);
+
+export function clamp(min, value, max) {
+  return Math.min(Math.max(min, value), max);
+}
+
+/**
+ * Format a comparison by rounding numbers to the lowest number of significant digits that still shows a difference.
+ * @param {number} a
+ * @param {number} b
+ * @returns {string}
+ */
+export function formatComparison(a, b) {
+  let op = a < b ? '<' : '>';
+
+  for (let i = 1; i < 10; i++) {
+    let roundedA = a.toPrecision(i);
+    let roundedB = b.toPrecision(i);
+
+    if (roundedA !== roundedB) {
+      return `${roundedA} ${op} ${roundedB}`;
+    }
+  }
+
+  return `${a} ${op} ${b}`;
+}
+
+export function hueToChalk(hue) {
+  let ret;
+
+  if (hue in chalk) {
+    ret = chalk[hue];
+  }
+  switch (hue) {
+    case 'indigo':
+      ret = chalk.hex('#8a8beb');
+      break;
+    case 'purple':
+      ret = chalk.hex('#a94dc6');
+      break;
+  }
+
+  if (ret) {
+    return ret.bold;
+  }
+
+  return chalk.bold;
+}
+
+export function toPrecision(value, precision = 2) {
+  return +Number(value).toPrecision(precision);
+}
+
+export function normalizeAngles(angles) {
+  // First, normalize
+  angles = angles.map(h => ((h % 360) + 360) % 360);
+
+  // Remove top and bottom 25% and find average
+  let averageHue =
+    angles
+      .toSorted((a, b) => a - b)
+      .slice(angles.length / 4, -angles.length / 4)
+      .reduce((a, b) => a + b, 0) / angles.length;
+
+  for (let i = 0; i < angles.length; i++) {
+    let h = angles[i];
+    let prevHue = angles[i - 1];
+    let delta = h - prevHue;
+
+    if (Math.abs(delta) > 180) {
+      let equivalent = [h + 360, h - 360];
+      // Offset hue to minimize difference in the direction that brings it closer to the average
+      let delta = h - averageHue;
+
+      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
+        angles[i] = equivalent[0];
+      } else {
+        angles[i] = equivalent[1];
+      }
+    }
+  }
+
+  return angles;
+}
+
+export const aggregates = {
+  min: values => Math.min(...values),
+  max: values => Math.max(...values),
+  avg: values => values.reduce((a, b) => a + b, 0) / values.length,
+  count: values => values.length,
+  values: values => values,
+  median: values => {
+    let sorted = values.slice().sort((a, b) => a - b);
+    let mid = Math.floor(sorted.length / 2);
+    return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+  },
+  extent: (values, { min, max }) => max - min,
+  mid: (values, { min, max }) => (max + min) / 2,
+};

src/styles/color/tintless.js

@@ -1,132 +0,0 @@
-/**
- * Add tintless variables and OKLCH coords as comments to palette CSS files.
- * Run via node tintless.js
- * Warning: Will overwrite existing files. Check the diff before committing!
- */
-import chalk from 'chalk';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import palettes, { rawPalettes } from './palettes-analyzed.js';
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
-
-const selector = paletteId =>
-  [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
-    ',\n',
-  );
-
-// Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance)
-const defaultAccent = 60;
-
-// Min and max allowed tints
-const minAccentTint = 40;
-const maxAccentTint = 90;
-
-// Used for formatting warnings
-const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0);
-const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0);
-
-let issueCount = 0;
-let issuePaletteCount = 0;
-
-for (let paletteId in palettes) {
-  const tokens = palettes[paletteId];
-
-  let css = '';
-  let prefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
-
-  for (let hue in tokens) {
-    let tints = tokens[hue];
-
-    let tintCSS = '';
-
-    for (let tint in tints) {
-      if (tint === '05' || !(tint > 0)) {
-        // The object has both '5' and '05' keys, but '05' is out of order
-        // Also ignore non-tints
-        continue;
-      }
-
-      let color = tints[tint];
-      tint = tint.padStart(2, '0');
-
-      tintCSS =
-        `--wa-color-${hue}-${tint}: ${color.toString({ format: 'hex' })} /* ${color.toString()} */;\n` + tintCSS;
-    }
-
-    if (tints.maxChromaTint != tints.maxChromaTintRaw) {
-      let huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
-
-      console.warn(
-        `${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(tints.maxChromaTint)}, but peak chroma is in ${chalk.bold(tints.maxChromaTintRaw)} (${formatComparison(tints[tints.maxChromaTintRaw].c, tints[tints.maxChromaTint].c)})`,
-      );
-      issueCount++;
-
-      if (prefix.trim()) {
-        // First time encountering an issue with this palette
-        issuePaletteCount++;
-
-        // Don't print palette id multiple times
-        prefix = ' '.repeat(paletteIdMaxChars + 2);
-      }
-    }
-
-    tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${tints.maxChromaTint});\n`;
-    tintCSS += `--wa-color-${hue}-key: ${tints.maxChromaTint};\n`;
-    css += tintCSS + '\n';
-  }
-
-  let indent = '  ';
-  css = `${selector(paletteId)} {\n${css.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
-
-  fs.writeFileSync(path.join(__dirname, paletteId + '.css'), css, 'utf8');
-}
-
-console.info(
-  `🎨 Wrote ${Object.keys(palettes).length} palette files.` +
-    (issueCount > 0 ? ` ${chalk.bold(issueCount)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` : ''),
-);
-
-/**
- * Format a comparison by rounding numbers to the lowest number of significant digits that still shows a difference.
- * @param {number} a
- * @param {number} b
- * @returns {string}
- */
-function formatComparison(a, b) {
-  let op = a < b ? '<' : '>';
-
-  for (let i = 1; i < 10; i++) {
-    let roundedA = a.toPrecision(i);
-    let roundedB = b.toPrecision(i);
-
-    if (roundedA !== roundedB) {
-      return `${roundedA} ${op} ${roundedB}`;
-    }
-  }
-
-  return `${a} ${op} ${b}`;
-}
-
-function hueToChalk(hue) {
-  let ret;
-
-  if (hue in chalk) {
-    ret = chalk[hue];
-  }
-  switch (hue) {
-    case 'indigo':
-      ret = chalk.hex('#8a8beb');
-      break;
-    case 'purple':
-      ret = chalk.hex('#a94dc6');
-      break;
-  }
-
-  if (ret) {
-    return ret.bold;
-  }
-
-  return chalk.bold;
-}

src/styles/color/vogue.css

@@ -2,75 +2,89 @@
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-vogue {
-  --wa-color-red-95: #feeeee /* oklch(96.175% 0.01736 17.459) */;
+  --wa-color-red-95: #ffeff0 /* oklch(96.503% 0.01737 13.094) */;
-  --wa-color-red-90: #fedddd /* oklch(92.486% 0.03666 17.834) */;
+  --wa-color-red-90: #ffdde0 /* oklch(92.655% 0.03789 11.812) */;
-  --wa-color-red-80: #fdb8b8 /* oklch(84.646% 0.08038 18.878) */;
+  --wa-color-red-80: #feb7c0 /* oklch(84.783% 0.08312 10.582) */;
-  --wa-color-red-70: #fb9191 /* oklch(76.892% 0.12835 20.456) */;
+  --wa-color-red-70: #fd8e9c /* oklch(76.934% 0.13451 12.688) */;
-  --wa-color-red-60: #f66565 /* oklch(68.965% 0.17872 22.978) */;
+  --wa-color-red-60: #f96077 /* oklch(69.165% 0.18694 14.455) */;
-  --wa-color-red-50: #e12b2b /* oklch(58.974% 0.21613 27.031) */;
+  --wa-color-red-50: #e3204a /* oklch(59.121% 0.2222 17.415) */;
-  --wa-color-red-40: #af1b1b /* oklch(48.576% 0.18205 27.417) */;
+  --wa-color-red-40: #b0113a /* oklch(48.689% 0.1864 15.801) */;
-  --wa-color-red-30: #851e1e /* oklch(40.835% 0.13843 25.838) */;
+  --wa-color-red-30: #881337 /* oklch(41.033% 0.15017 10.272) */;
-  --wa-color-red-20: #641414 /* oklch(33.307% 0.11308 25.859) */;
+  --wa-color-red-20: #670b26 /* oklch(33.541% 0.12341 11.466) */;
-  --wa-color-red-10: #400809 /* oklch(24.44% 0.08486 25.315) */;
+  --wa-color-red-10: #410414 /* oklch(24.436% 0.0904 12.512) */;
-  --wa-color-red-05: #2b0404 /* oklch(19.055% 0.06569 26.078) */;
+  --wa-color-red-05: #2c020b /* oklch(19.105% 0.07041 12.549) */;
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
+  --wa-color-orange-95: oklch(96.355% 0.05982 62.448);
+  --wa-color-orange-90: oklch(92.371% 0.10134 60.314);
+  --wa-color-orange-80: oklch(84.228% 0.13101 54.157);
+  --wa-color-orange-70: oklch(76.275% 0.16839 51.143);
+  --wa-color-orange-60: #e67530 /* oklch(68.22% 0.16179 47.997) */;
+  --wa-color-orange-50: oklch(58.011% 0.16819 44.953);
+  --wa-color-orange-40: #9b390d /* oklch(47.739% 0.14004 40.585) */;
+  --wa-color-orange-30: #7a2b17 /* oklch(40.323% 0.11475 35.602) */;
+  --wa-color-orange-20: #5c1e0f /* oklch(32.963% 0.09552 34.666) */;
+  --wa-color-orange-10: #3a0f06 /* oklch(24.042% 0.07066 34.715) */;
+  --wa-color-orange-05: #270803 /* oklch(18.867% 0.05444 34.696) */;
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
   --wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
-  --wa-color-yellow-90: #ffe759 /* oklch(92.242% 0.15928 99.624) */;
+  --wa-color-yellow-90: #fde761 /* oklch(92.138% 0.15325 99.997) */;
-  --wa-color-yellow-80: #f3c41a /* oklch(83.803% 0.16708 90.67) */;
+  --wa-color-yellow-80: #f5c308 /* oklch(83.774% 0.17019 89.81) */;
-  --wa-color-yellow-70: #e0a502 /* oklch(75.733% 0.15552 82.666) */;
+  --wa-color-yellow-70: #e0a504 /* oklch(75.737% 0.15524 82.606) */;
   --wa-color-yellow-60: #c88804 /* oklch(67.447% 0.14121 75.44) */;
   --wa-color-yellow-50: #a76706 /* oklch(57.104% 0.124 67.484) */;
   --wa-color-yellow-40: #834b0f /* oklch(46.963% 0.10211 60.864) */;
   --wa-color-yellow-30: #693910 /* oklch(39.742% 0.08578 56.326) */;
   --wa-color-yellow-20: #502809 /* oklch(32.489% 0.07269 53.649) */;
-  --wa-color-yellow-10: #311704 /* oklch(23.775% 0.05173 54.627) */;
+  --wa-color-yellow-10: #321603 /* oklch(23.72% 0.05451 52.882) */;
-  --wa-color-yellow-05: #1f0e02 /* oklch(18.545% 0.03815 59.032) */;
+  --wa-color-yellow-05: #210d02 /* oklch(18.673% 0.04137 52.815) */;
   --wa-color-yellow: var(--wa-color-yellow-80);
   --wa-color-yellow-key: 80;
 
-  --wa-color-green-95: #d6fbe3 /* oklch(95.529% 0.04989 156.89) */;
+  --wa-color-green-95: #e6fbbc /* oklch(95.736% 0.08443 122.96) */;
-  --wa-color-green-90: #acf5c6 /* oklch(90.962% 0.09709 155.72) */;
+  --wa-color-green-90: #c7f577 /* oklch(91.183% 0.16201 126.05) */;
-  --wa-color-green-80: #58e38b /* oklch(81.864% 0.17318 152.51) */;
+  --wa-color-green-80: #98de27 /* oklch(82.338% 0.20949 129.59) */;
-  --wa-color-green-70: #25c861 /* oklch(73.149% 0.19247 149.75) */;
+  --wa-color-green-70: #7bc211 /* oklch(73.847% 0.19884 131.28) */;
-  --wa-color-green-60: #17ab4e /* oklch(64.955% 0.17611 149.25) */;
+  --wa-color-green-60: #67a50d /* oklch(65.44% 0.17673 131.51) */;
-  --wa-color-green-50: #158740 /* oklch(54.761% 0.14352 149.99) */;
+  --wa-color-green-50: #51820e /* oklch(55.059% 0.14619 131.47) */;
-  --wa-color-green-40: #166635 /* oklch(45.105% 0.10874 151.56) */;
+  --wa-color-green-40: #3f6212 /* oklch(45.284% 0.11293 130.93) */;
-  --wa-color-green-30: #13502b /* oklch(38.277% 0.08756 152.42) */;
+  --wa-color-green-30: #324d12 /* oklch(38.502% 0.09061 130.96) */;
-  --wa-color-green-20: #093a1d /* oklch(30.848% 0.07243 152.47) */;
+  --wa-color-green-20: #213908 /* oklch(31.337% 0.07851 132.44) */;
-  --wa-color-green-10: #032311 /* oklch(22.69% 0.05156 154.92) */;
+  --wa-color-green-10: #122203 /* oklch(22.929% 0.05744 132.15) */;
-  --wa-color-green-05: #02160a /* oklch(17.815% 0.03799 156.47) */;
+  --wa-color-green-05: #091501 /* oklch(17.772% 0.04591 132.17) */;
-  --wa-color-green: var(--wa-color-green-70);
+  --wa-color-green: var(--wa-color-green-80);
-  --wa-color-green-key: 70;
+  --wa-color-green-key: 80;
 
-  --wa-color-cyan-95: #d1fbf2 /* oklch(95.61% 0.04472 180.87) */;
+  --wa-color-cyan-95: #d2faf5 /* oklch(95.553% 0.04164 187.25) */;
-  --wa-color-cyan-90: #9bf6e4 /* oklch(91.092% 0.09113 180.19) */;
+  --wa-color-cyan-90: #9df5ea /* oklch(91.142% 0.08636 185.8) */;
-  --wa-color-cyan-80: #43e0ca /* oklch(82.113% 0.13179 181.48) */;
+  --wa-color-cyan-80: #34e0d2 /* oklch(82.077% 0.1342 186.48) */;
-  --wa-color-cyan-70: #1ac4b0 /* oklch(73.775% 0.12864 181.89) */;
+  --wa-color-cyan-70: #1bc3b8 /* oklch(73.79% 0.12485 187.52) */;
-  --wa-color-cyan-60: #0ea798 /* oklch(65.521% 0.11439 183.58) */;
+  --wa-color-cyan-60: #0ba69e /* oklch(65.442% 0.11207 188.69) */;
-  --wa-color-cyan-50: #0e837a /* oklch(55.027% 0.0937 186.25) */;
+  --wa-color-cyan-50: #05837e /* oklch(55.086% 0.09419 190.05) */;
-  --wa-color-cyan-40: #11635e /* oklch(45.289% 0.07357 188.54) */;
+  --wa-color-cyan-40: #066460 /* oklch(45.484% 0.07694 189.95) */;
-  --wa-color-cyan-30: #134d49 /* oklch(38.278% 0.05833 188.33) */;
+  --wa-color-cyan-30: #064e4c /* oklch(38.409% 0.06372 191.78) */;
-  --wa-color-cyan-20: #073938 /* oklch(31.345% 0.04977 192.86) */;
+  --wa-color-cyan-20: #053938 /* oklch(31.291% 0.05079 192.86) */;
-  --wa-color-cyan-10: #022222 /* oklch(22.914% 0.03701 194.88) */;
+  --wa-color-cyan-10: #032222 /* oklch(22.965% 0.03606 194.94) */;
   --wa-color-cyan-05: #011515 /* oklch(17.806% 0.02865 194.89) */;
   --wa-color-cyan: var(--wa-color-cyan-80);
   --wa-color-cyan-key: 80;
 
-  --wa-color-blue-95: #ebf3ff /* oklch(96.164% 0.01825 258.35) */;
+  --wa-color-blue-95: #e6f5fe /* oklch(96.166% 0.01999 233.85) */;
-  --wa-color-blue-90: #d6e7fe /* oklch(92.238% 0.03631 255.96) */;
+  --wa-color-blue-90: #cce9fc /* oklch(91.886% 0.04012 236.63) */;
-  --wa-color-blue-80: #a4cefe /* oklch(83.833% 0.08104 252.13) */;
+  --wa-color-blue-80: #93d1f8 /* oklch(83.254% 0.08372 236.73) */;
-  --wa-color-blue-70: #73b2fb /* oklch(75.087% 0.12447 253.02) */;
+  --wa-color-blue-70: #57b8f1 /* oklch(74.755% 0.12265 237.38) */;
-  --wa-color-blue-60: #4d95f9 /* oklch(67.127% 0.16539 257.15) */;
+  --wa-color-blue-60: #009de5 /* oklch(66.307% 0.15092 239.62) */;
-  --wa-color-blue-50: #2b6df0 /* oklch(57.128% 0.2086 262.06) */;
+  --wa-color-blue-50: #047bbb /* oklch(55.932% 0.133 242.55) */;
-  --wa-color-blue-40: #1d4bd3 /* oklch(47.813% 0.21434 264.65) */;
+  --wa-color-blue-40: #0b5d8e /* oklch(45.95% 0.10648 242.94) */;
-  --wa-color-blue-30: #1e3d9c /* oklch(40.115% 0.15907 265.62) */;
+  --wa-color-blue-30: #0c4970 /* oklch(38.984% 0.08794 243.3) */;
-  --wa-color-blue-20: #1c2e69 /* oklch(32.363% 0.10583 267.39) */;
+  --wa-color-blue-20: #093552 /* oklch(31.634% 0.06911 243.22) */;
-  --wa-color-blue-10: #101b41 /* oklch(23.741% 0.07371 268.19) */;
+  --wa-color-blue-10: #041f32 /* oklch(23.003% 0.04923 243.03) */;
-  --wa-color-blue-05: #09102c /* oklch(18.584% 0.05736 269.49) */;
+  --wa-color-blue-05: #021321 /* oklch(17.965% 0.03841 243.33) */;
-  --wa-color-blue: var(--wa-color-blue-40);
+  --wa-color-blue: var(--wa-color-blue-60);
-  --wa-color-blue-key: 40;
+  --wa-color-blue-key: 60;
 
   --wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
   --wa-color-indigo-90: #dde5ff /* oklch(92.379% 0.03641 272.07) */;
@@ -86,19 +100,33 @@
   --wa-color-indigo: var(--wa-color-indigo-40);
   --wa-color-indigo-key: 40;
 
-  --wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
+  --wa-color-purple-95: #f2f0ff /* oklch(96.104% 0.02008 292.15) */;
-  --wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
+  --wa-color-purple-90: #e8e3ff /* oklch(92.821% 0.03803 293.84) */;
-  --wa-color-purple-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
+  --wa-color-purple-80: #cfc1ff /* oklch(84.348% 0.08665 294.83) */;
-  --wa-color-purple-70: #cb99fd /* oklch(76.728% 0.14746 306.23) */;
+  --wa-color-purple-70: #b7a0ff /* oklch(76.256% 0.13508 294.09) */;
-  --wa-color-purple-60: #b875fb /* oklch(68.999% 0.19637 304.88) */;
+  --wa-color-purple-60: #a27eff /* oklch(68.532% 0.18446 293.83) */;
-  --wa-color-purple-50: #9e44f3 /* oklch(59.348% 0.24636 302.91) */;
+  --wa-color-purple-50: #8851f7 /* oklch(58.85% 0.23337 293.05) */;
-  --wa-color-purple-40: #7e22cd /* oklch(49.465% 0.23596 302.16) */;
+  --wa-color-purple-40: #6f25de /* oklch(49.509% 0.24843 292.64) */;
-  --wa-color-purple-30: #63209a /* oklch(41.52% 0.18376 304.12) */;
+  --wa-color-purple-30: #5910ba /* oklch(42.188% 0.22532 292.19) */;
-  --wa-color-purple-20: #4b1079 /* oklch(33.995% 0.16043 303.8) */;
+  --wa-color-purple-20: #3e1485 /* oklch(33.887% 0.1683 291.25) */;
-  --wa-color-purple-10: #2f0451 /* oklch(25.081% 0.12442 302.96) */;
+  --wa-color-purple-10: #250b55 /* oklch(24.903% 0.1207 290.68) */;
-  --wa-color-purple-05: #1e0238 /* oklch(19.51% 0.09712 301.8) */;
+  --wa-color-purple-05: #18053a /* oklch(19.398% 0.09378 291.87) */;
-  --wa-color-purple: var(--wa-color-purple-50);
+  --wa-color-purple: var(--wa-color-purple-40);
-  --wa-color-purple-key: 50;
+  --wa-color-purple-key: 40;
+
+  --wa-color-pink-95: #fcefff /* oklch(96.692% 0.0252 319.87) */;
+  --wa-color-pink-90: #f7ddff /* oklch(92.895% 0.0531 318.2) */;
+  --wa-color-pink-80: #f1b5fd /* oklch(85.124% 0.1166 320.72) */;
+  --wa-color-pink-70: #eb89fb /* oklch(77.434% 0.18529 321.83) */;
+  --wa-color-pink-60: #e05bf5 /* oklch(69.971% 0.2421 321.97) */;
+  --wa-color-pink-50: #c228d6 /* oklch(59.743% 0.25837 322.66) */;
+  --wa-color-pink-40: #971aa3 /* oklch(49.218% 0.21385 324) */;
+  --wa-color-pink-30: #751b7b /* oklch(41.338% 0.16648 325.27) */;
+  --wa-color-pink-20: #5a0a5f /* oklch(33.769% 0.14665 325.41) */;
+  --wa-color-pink-10: #3a023d /* oklch(24.901% 0.1119 325.9) */;
+  --wa-color-pink-05: #270129 /* oklch(19.48% 0.0873 326.12) */;
+  --wa-color-pink: var(--wa-color-pink-50);
+  --wa-color-pink-key: 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) */;

src/styles/native/input.css

@@ -121,7 +121,8 @@ input:where(:not(
   font: inherit;
 }
 
-.wa-pill,
+input.wa-pill,
-:host([pill]) {
+textarea.wa-pill,
-  border-radius: var(--wa-border-radius-pill);
+:host([pill]) .wa-text-field {
+  border-radius: var(--wa-border-radius-pill) !important;
 }

src/styles/native/radio.css

@@ -71,13 +71,13 @@ input[type='radio'],
 input[type='radio'],
 label:has(input[type='radio']),
 input[type='radio'] + label,
-:host [part~='base'] {
+:host {
   cursor: pointer;
 }
 
 /* Checked */
 input[type='radio']:checked,
-:host .radio--checked .control {
+:host(:state(checked)) .control {
   color: var(--checked-icon-color);
   border-color: var(--border-color-checked);
   background-color: var(--background-color-checked);

src/styles/native/slider.css

@@ -55,6 +55,8 @@ input[type='range'] {
       0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
     -webkit-appearance: none;
     margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
+    transition: var(--wa-transition-fast);
+    transition-property: width, height;
   }
 
   &:enabled {

src/styles/themes/active/color.css

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

src/styles/themes/awesome/color.css

@@ -17,7 +17,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
   --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-70-min);
   --wa-color-brand-border-quiet: var(--wa-color-brand-70);
   --wa-color-brand-border-normal: var(--wa-color-brand-50);
   --wa-color-brand-border-loud: var(--wa-color-brand-30);
@@ -25,14 +25,14 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-40);
   --wa-color-brand-on-loud: var(--wa-color-text-normal);
 
-  --wa-color-success-fill-quiet: var(--wa-color-cyan-95);
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-cyan-90);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-cyan-80);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
-  --wa-color-success-border-quiet: var(--wa-color-cyan-70);
+  --wa-color-success-border-quiet: var(--wa-color-green-70);
-  --wa-color-success-border-normal: var(--wa-color-cyan-50);
+  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-border-loud: var(--wa-color-cyan-30);
+  --wa-color-success-border-loud: var(--wa-color-green-30);
-  --wa-color-success-on-quiet: var(--wa-color-cyan-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-cyan-40);
+  --wa-color-success-on-normal: var(--wa-color-green-40);
   --wa-color-success-on-loud: var(--wa-color-text-normal);
 
   --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
@@ -77,7 +77,7 @@
    */
   --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-fill-loud: var(--wa-color-brand-50-max);
   --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);
@@ -85,14 +85,14 @@
   --wa-color-brand-on-normal: var(--wa-color-brand-80);
   --wa-color-brand-on-loud: white;
 
-  --wa-color-success-fill-quiet: var(--wa-color-cyan-10);
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-cyan-20);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-cyan-50);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-cyan-30);
+  --wa-color-success-border-quiet: var(--wa-color-green-30);
-  --wa-color-success-border-normal: var(--wa-color-cyan-50);
+  --wa-color-success-border-normal: var(--wa-color-green-50);
-  --wa-color-success-border-loud: var(--wa-color-cyan-80);
+  --wa-color-success-border-loud: var(--wa-color-green-80);
-  --wa-color-success-on-quiet: var(--wa-color-cyan-70);
+  --wa-color-success-on-quiet: var(--wa-color-green-70);
-  --wa-color-success-on-normal: var(--wa-color-cyan-80);
+  --wa-color-success-on-normal: var(--wa-color-green-80);
   --wa-color-success-on-loud: white;
 
   --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);

src/styles/themes/brutalist/color.css

@@ -24,7 +24,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
   --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
   --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);
@@ -96,7 +96,7 @@
    */
   --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-fill-loud: var(--wa-color-brand-70-min);
   --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);

src/styles/themes/default/color.css

@@ -61,7 +61,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
   --wa-color-brand-fill-normal: var(--wa-color-brand-90);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
   --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);
@@ -149,7 +149,7 @@
    */
   --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-fill-loud: var(--wa-color-brand-50-max);
   --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);

src/styles/themes/glossy/color.css

@@ -19,13 +19,13 @@
    */
   --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-fill-loud: var(--wa-color-brand);
   --wa-color-brand-border-quiet: var(--wa-color-brand-90);
   --wa-color-brand-border-normal: var(--wa-color-brand-80);
   --wa-color-brand-border-loud: var(--wa-color-brand-60);
   --wa-color-brand-on-quiet: var(--wa-color-brand-40);
   --wa-color-brand-on-normal: var(--wa-color-brand-30);
-  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
   --wa-color-success-fill-loud: var(--wa-color-green-40);
 
@@ -51,13 +51,13 @@
     */
   --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-fill-loud: var(--wa-color-brand);
   --wa-color-brand-border-quiet: var(--wa-color-brand-20);
   --wa-color-brand-border-normal: var(--wa-color-brand-30);
   --wa-color-brand-border-loud: var(--wa-color-brand-40);
   --wa-color-brand-on-quiet: var(--wa-color-brand-60);
   --wa-color-brand-on-normal: var(--wa-color-brand-70);
-  --wa-color-brand-on-loud: white;
+  --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
   --wa-color-success-fill-loud: var(--wa-color-green-40);
 

src/styles/themes/mellow/color.css

@@ -29,7 +29,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
   --wa-color-brand-fill-normal: var(--wa-color-brand-80);
-  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
+  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
   --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);
@@ -39,7 +39,7 @@
 
   --wa-color-success-fill-quiet: var(--wa-color-green-90);
   --wa-color-success-fill-normal: var(--wa-color-green-80);
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
   --wa-color-success-border-quiet: var(--wa-color-green-80);
   --wa-color-success-border-normal: var(--wa-color-green-70);
   --wa-color-success-border-loud: var(--wa-color-green-60);
@@ -49,7 +49,7 @@
 
   --wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
   --wa-color-warning-fill-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
   --wa-color-warning-border-quiet: var(--wa-color-yellow-80);
   --wa-color-warning-border-normal: var(--wa-color-yellow-70);
   --wa-color-warning-border-loud: var(--wa-color-yellow-60);
@@ -59,7 +59,7 @@
 
   --wa-color-danger-fill-quiet: var(--wa-color-red-90);
   --wa-color-danger-fill-normal: var(--wa-color-red-80);
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
   --wa-color-danger-border-quiet: var(--wa-color-red-80);
   --wa-color-danger-border-normal: var(--wa-color-red-70);
   --wa-color-danger-border-loud: var(--wa-color-red-60);
@@ -69,7 +69,7 @@
 
   --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
   --wa-color-neutral-fill-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-50);
   --wa-color-neutral-border-quiet: var(--wa-color-gray-80);
   --wa-color-neutral-border-normal: var(--wa-color-gray-70);
   --wa-color-neutral-border-loud: var(--wa-color-gray-60);

src/styles/themes/playful/color.css

@@ -21,13 +21,13 @@
    */
   --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-fill-loud: var(--wa-color-brand);
   --wa-color-brand-border-quiet: var(--wa-color-brand-90);
   --wa-color-brand-border-normal: var(--wa-color-brand-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-on-loud: white;
+  --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-90);
   --wa-color-success-fill-normal: var(--wa-color-green-80);
@@ -94,13 +94,13 @@
    */
   --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-fill-loud: var(--wa-color-brand);
   --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-on-loud: white;
+  --wa-color-brand-on-loud: var(--wa-color-brand-on);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-20);
   --wa-color-success-fill-normal: var(--wa-color-green-40);

src/styles/themes/premium/color.css

@@ -24,13 +24,13 @@
    */
   --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-fill-loud: var(--wa-color-brand);
   --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-on-loud: var(--wa-color-brand-on);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
   --wa-color-success-fill-normal: var(--wa-color-green-90);
@@ -98,13 +98,13 @@
     */
   --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-fill-loud: var(--wa-color-brand);
   --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-on-loud: var(--wa-color-brand-on);
 
   --wa-color-success-fill-quiet: var(--wa-color-green-30);
   --wa-color-success-fill-normal: var(--wa-color-green-40);

src/styles/utilities/appearance.css

@@ -45,7 +45,8 @@
 
   --outlined-border-color: var(--wa-color-border-normal);
 
-  --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+  --text-color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+  --text-color-hover: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
 }
 
 .wa-plain,

src/styles/utilities/size.css

@@ -9,10 +9,10 @@
 
 :host {
   /* Components are meant to override these */
-  --size-xs: var(--wa-space-xs);
+  --size-xs: var(--wa-font-size-xs);
-  --size-s: var(--wa-space-s);
+  --size-s: var(--wa-font-size-s);
-  --size-m: var(--wa-space-m);
+  --size-m: var(--wa-font-size-m);
-  --size-l: var(--wa-space-l);
+  --size-l: var(--wa-font-size-l);
 
   --space-xs: var(--wa-space-xs);
   --space-s: var(--wa-space-s);