update changelog

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

Smaller improvements:
- More flexible syntax for specifying the params of overview pages
- [Overviews] Hide group heading if only one group is present
- parentItem and parentUrl properties that can be used on any page
- Alias a collection as the children of a page (useful for "virtual" parents like Layout)
- Do not error if a page card icon is missing

.github/workflows/ssr_tests.js.yml

@@ -1,11 +1,12 @@
-# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: SSR Tests
 
 on:
-  push:
-    branches: [next]
+  # push:
+  #   branches: [next]
+  workflow_dispatch:
 
 jobs:
   ssr_test:

.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

@@ -1,3 +1,4 @@
+import * as path from 'node:path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
@@ -8,6 +9,7 @@ import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js'
 // import { formatCodePlugin } from './_utils/format-code.js';
 import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
+import nunjucks from 'nunjucks';
 import componentList from './_data/componentList.js';
 import * as filters from './_utils/filters.js';
 import { outlinePlugin } from './_utils/outline.js';
@@ -16,7 +18,10 @@ import { searchPlugin } from './_utils/search.js';
 
 import process from 'process';
 
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
 const isDev = process.argv.includes('--develop');
 
@@ -24,12 +29,23 @@ const globalData = {
   package: packageData,
   isAlpha,
   layout: 'page.njk',
+
+  server: {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  },
 };
 
 const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
 const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
 
 export default function (eleventyConfig) {
+  /**
+   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
+   */
+  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
+
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
     eleventyConfig.ignores.add('**/experimental/**');
@@ -55,7 +71,38 @@ export default function (eleventyConfig) {
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+  });
+
+  // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
+  eleventyConfig.addShortcode('server', function (property) {
+    if (serverBuild) {
+      return `{{ server.${property} | safe }}`;
+    }
+
+    return '';
+  });
+
+  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
+    // For a server build, we expect a server to run the second transform.
+    if (serverBuild) {
+      return content;
+    }
+
+    // Only run the transform on files nunjucks would transform.
+    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
+      return content;
+    }
+
+    /** This largely mimics what an app would do and just stubs out what we don't care about. */
+    return nunjucks.renderString(content, {
+      // Stub the server EJS shortcodes.
+      server: {
+        head: '',
+        loginOrAvatar: '',
+        flashes: '',
+      },
+    });
   });
 
   // Paired shortcodes - {% shortCode %}content{% endShortCode %}
@@ -94,7 +141,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(
@@ -117,29 +164,6 @@ export default function (eleventyConfig) {
     ]),
   );
 
-  // SSR plugin
-  if (!isDev) {
-    //
-    // Problematic components in SSR land:
-    //  - animation (breaks on navigation + ssr with Turbo)
-    //  - mutation-observer (why SSR this?)
-    //  - resize-observer (why SSR this?)
-    //  - tooltip (why SSR this?)
-    //
-    const omittedModules = [];
-    const componentModules = componentList
-      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-      .map(component => {
-        const name = component.tagName.split(/wa-/)[1];
-        return `./dist/components/${name}/${name}.js`;
-      });
-
-    eleventyConfig.addPlugin(litPlugin, {
-      mode: 'worker',
-      componentModules,
-    });
-  }
-
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({
@@ -166,6 +190,31 @@ export default function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
+  // SSR plugin
+  // Make sure this is the last thing, we dont want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
+  if (!isDev) {
+    //
+    // Problematic components in SSR land:
+    //  - animation (breaks on navigation + ssr with Turbo)
+    //  - mutation-observer (why SSR this?)
+    //  - resize-observer (why SSR this?)
+    //  - tooltip (why SSR this?)
+    //
+    const omittedModules = [];
+    const componentModules = componentList
+      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+      .map(component => {
+        const name = component.tagName.split(/wa-/)[1];
+        const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+        return path.join(componentDirectory, 'components', name, `${name}.js`);
+      });
+
+    eleventyConfig.addPlugin(litPlugin, {
+      mode: 'worker',
+      componentModules,
+    });
+  }
+
   return {
     markdownTemplateEngine: 'njk',
     dir: {

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

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
 
     <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 #}
@@ -50,6 +50,9 @@
             Search
             <kbd slot="suffix" class="only-desktop">/</kbd>
           </wa-button>
+
+          {# Login #}
+          {% server "loginOrAvatar" %}
         </div>
       </header>
 
@@ -76,14 +79,19 @@
         </aside>
       {% endif %}
 
+
       {# Main #}
       <main id="content">
         {# Expandable outline #}
+        {% if hasOutline %}
         <nav id="outline-expandable">
           <details class="outline-links">
             <summary>On this page</summary>
           </details>
         </nav>
+        {% endif %}
+
+        <div id="flashes">{% server "flashes" %}</div>
 
         {% block header %}
           {% include 'breadcrumbs.njk' %}

docs/_includes/breadcrumbs.njk

@@ -1,8 +1,11 @@
-{% set breadcrumbs = page.url | breadcrumbs %}
-{% if breadcrumbs.length > 0 %}
+{% set ancestors = page.url | ancestors %}
+
+{% if ancestors.length > 0 %}
   <wa-breadcrumb id="docs-breadcrumbs">
-  {% for crumb in breadcrumbs %}
-    <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
+  {% for ancestor in ancestors %}
+    {% if ancestor.page.url != "/" %}
+    <wa-breadcrumb-item href="{{ ancestor.page.url }}">{{ ancestor.data.title }}</wa-breadcrumb-item>
+    {% endif %}
   {% endfor %}
   <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
   </wa-breadcrumb>

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>
-        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
-          {% set contrast_wcag = '' %}
-          {% if color_fg and color_bg %}
-            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
-          {% endif %}
+      {% set contrast_wcag = '' %}
+      {% if color_fg and color_bg -%}
+        {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+      {%- endif %}
+      <td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
+      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/grouped-pages.njk

@@ -1,12 +1,18 @@
 {# Cards for pages listed by category #}
 
 <section id="grid" class="index-grid">
-{% for category, pages in allPages | groupByTags(categories) -%}
-  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
-    {%- for page in pages -%}
-      {%- if not page.data.parent or listChildren -%}
-        {% include "page-card.njk" %}
-      {%- endif -%}
-    {%- endfor -%}
+{% set groupedPages = allPages | groupPages(categories, page) %}
+{% for category, pages in groupedPages -%}
+  {% if groupedPages.meta.groupCount > 1 %}
+  <h2 class="index-category">
+    {% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
+    {% else %}
+    {{ pages.meta.title }}
+    {% endif %}
+  </h2>
+  {% endif %}
+  {%- for page in pages -%}
+      {% include "page-card.njk" %}
+  {%- endfor -%}
 {%- endfor -%}
 </section>

docs/_includes/head.njk

@@ -23,10 +23,9 @@
 <script src="/assets/scripts/hydration-errors.js"></script>
 <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
 <link rel="preconnect" href="https://cdn.jsdelivr.net">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
 
 {# Web Awesome #}
-<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
+<script type="module" src="/dist/webawesome.loader.js"></script>
 
 <script type="module" src="/assets/scripts/theme-picker.js"></script>
 {# Preset Theme #}
@@ -47,3 +46,7 @@
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
 <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
 <link rel="stylesheet" href="/dist/styles/forms.css" />
+
+
+{# Used by Web Awesome App to inject other assets into the head. #}
+{% server "head" %}

docs/_includes/page-card.njk

@@ -2,7 +2,7 @@
 <a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
 	<wa-card with-header>
 		<div slot="header">
-		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
+		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
 		</div>
 		<span class="page-name">{{ page.data.title }}</span>
 		{% if pageSubtitle -%}

docs/_includes/sidebar-group.njk

@@ -1,9 +1,12 @@
 {# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
 {% if collections[tag] -%}
   {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+  {% set groupItem = groupUrl | getCollectionItemFromUrl %}
+  {% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
+
   <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
     <h2 slot="summary">
-      {% if groupUrl | getCollectionItemFromUrl %}
+      {% if groupItem %}
         <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
           <wa-icon name="grid-2"></wa-icon>
         </a>
@@ -12,10 +15,8 @@
       {% endif %}
     </h2>
     <ul>
-      {% for page in collections[tag] | sort %}
-        {% if not page.data.parent -%}
+      {% for page in children %}
           {% include 'sidebar-link.njk' %}
-        {%- endif %}
       {% endfor %}
     </ul>
   </wa-details>

docs/_includes/sidebar-link.njk

@@ -1,4 +1,4 @@
-{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
+{% if not (isAlpha and page.data.noAlpha) and not page.data.unlisted -%}
 	<li>
 		<a href="{{ page.url }}">{{ page.data.title }}</a>
 		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}

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 gap_x = 3 %}
-{% set gap_y = 3 %}
+{% set height = 12 %}
+{% set height_core = 20 %}
+{% 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 -%}
-    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
-	      width="{{ width }}" height="{{ height }}"
-	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
+  {% set y = 0 %}
+  {% for suffix in suffixes -%}
+    {% set swatch_height = height if suffix else height_core %}
+
+    <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/_layouts/overview.njk

@@ -1,6 +1,5 @@
 ---
 layout: page-outline
-tags: ["overview"]
 ---
 {% set forTag = forTag or (page.url | split('/') | last) %}
 {% if description %}
@@ -13,8 +12,10 @@ tags: ["overview"]
   </wa-input>
 </div>
 
-{% set allPages = collections[forTag] %}
+{% set allPages = allPages or collections[forTag] %}
+{% if allPages and allPages.length > 0 %}
 {% include "grouped-pages.njk" %}
+{% endif %}
 
 <link href="/assets/styles/filter.css" rel="stylesheet">
 <script type="module" src="/assets/scripts/filter.js"></script>

docs/_layouts/page.njk

@@ -1,4 +1,9 @@
-{% set hasSidebar = true %}
-{% set hasOutline = false %}
+{% if hasSidebar == undefined  %}
+  {% set hasSidebar = true %}
+{% endif %}
+
+{% if hasOutline == undefined  %}
+  {% set hasOutline = false %}
+{% endif %}
 
 {% extends "../_includes/base.njk" %}

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>
-  <th>{{ hue | capitalize }}</th>
-  <td class="core-column">
-    <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' }});">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
-    </div>
+{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
+{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
+{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
+{% if hue === 'gray' %}
+<tr data-hue="{{ hue }}" class="color-scale"
+    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
+{% 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>
-      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+    {%- set color = palettes[paletteId][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/_layouts/theme.njk

@@ -68,7 +68,7 @@ wa_data.palettes = {
       <wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
         <wa-card with-header>
           <div slot="header">
-          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" %}
+          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
           </div>
           <span class="page-name">
             {{ palette.data.title }}

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) {
-    eleventyConfig.addTransform('copy-code', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
+  let codeCount = 0;
+  eleventyConfig.addTransform('copy-code', content => {
+    const doc = parse(content, { blockTextElements: { code: true } });
+    const container = doc.querySelector(options.container);
 
-      if (!container) {
-        return content;
+    if (!container) {
+      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
-      container.querySelectorAll('pre > code').forEach(code => {
-        const pre = code.closest('pre');
-
-        // 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();
+      // Add a copy button
+      pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
+        <wa-copy-button from="${codeId}" class="copy-button" hoist></wa-copy-button>`;
     });
-  };
+
+    return doc.toString();
+  });
 }

docs/_utils/filters.js

@@ -29,6 +29,9 @@ function getCollection(name) {
 }
 
 export function getCollectionItemFromUrl(url, collection) {
+  if (!url) {
+    return null;
+  }
   collection ??= getCollection.call(this, 'all') || [];
   return collection.find(item => item.url === url);
 }
@@ -42,35 +45,33 @@ export function split(text, separator) {
   return (text + '').split(separator).filter(Boolean);
 }
 
-export function breadcrumbs(url, { withCurrent = false } = {}) {
-  const parts = split(url, '/');
-  const ret = [];
+export function ancestors(url, { withCurrent = false, withRoot = false } = {}) {
+  let ret = [];
+  let currentUrl = url;
+  let currentItem = getCollectionItemFromUrl.call(this, url);
 
-  while (parts.length) {
-    let partialUrl = '/' + parts.join('/') + '/';
-    let item = getCollectionItemFromUrl.call(this, partialUrl);
-
-    if (item && (partialUrl !== url || withCurrent)) {
-      let title = item.data.title;
-      if (title) {
-        ret.unshift({ url: partialUrl, title });
-      }
-    }
-
-    parts.pop();
-
-    if (item?.data.parent) {
-      let parentURL = item.data.parent;
-      if (!item.data.parent.startsWith('/')) {
-        // Parent is in the same directory
-        parts.push(item.data.parent);
-        parentURL = '/' + parts.join('/') + '/';
-      }
-
-      let parentBreadcrumbs = breadcrumbs.call(this, parentURL, { withCurrent: true });
-      return [...parentBreadcrumbs, ...ret];
+  if (!currentItem) {
+    // Might have eleventyExcludeFromCollections, jump to parent
+    let parentUrl = this.ctx.parentUrl;
+    if (parentUrl) {
+      url = parentUrl;
     }
   }
+
+  for (let item; (item = getCollectionItemFromUrl.call(this, url)); url = item.data.parentUrl) {
+    ret.unshift(item);
+  }
+
+  if (!withRoot && ret[0]?.page.url === '/') {
+    // Remove root
+    ret.shift();
+  }
+
+  if (!withCurrent && ret.at(-1)?.page.url === currentUrl) {
+    // Remove current page
+    ret.pop();
+  }
+
   return ret;
 }
 
@@ -180,69 +181,178 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
 /**
  * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
  * @param {object[]} collection
- * @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
- * @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
+ * @param { Object<string, string> | string[]} [options] Options object or array of tags to group by.
+ * @param {string[] | true} [options.tags] Tags to group by. If true, groups by all tags.
+ *                            If not provided/empty, defaults to grouping by page hierarchy, with any pages with more than 1 children becoming groups.
+ * @param {string[]} [options.groups] The groups to use if only a subset or a specific order is desired. Defaults to `options.tags`.
+ * @param {string[]} [options.titles] Any title overrides for groups.
+ * @param {string | false} [options.other="Other"] The title to use for the "Other" group. If `false`, the "Other" group is removed..
+ * @returns { Object.<string, object[]> } An object of group ids to arrays of page objects.
  */
-export function groupByTags(collection, tags) {
+export function groupPages(collection, options = {}, page) {
   if (!collection) {
-    console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(tags)}`);
-  }
-  if (!tags) {
-    // Default to grouping by union of all tags
-    tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
-  } else if (Array.isArray(tags)) {
-    // May contain objects of one-off tag -> label mappings
-    tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
-  } else if (typeof tags === 'object') {
-    // tags is an object of tags to labels, so we just want the keys
-    tags = Object.keys(tags);
+    console.error(`Empty collection passed to groupPages() to group by ${JSON.stringify(options)}`);
   }
 
-  let ret = Object.fromEntries(tags.map(tag => [tag, []]));
-  ret.other = [];
+  if (Array.isArray(options)) {
+    options = { tags: options };
+  }
+
+  let { tags, groups, titles = {}, other = 'Other' } = options;
+
+  if (groups === undefined && Array.isArray(tags)) {
+    groups = tags;
+  }
+
+  let grouping;
+
+  if (tags) {
+    grouping = {
+      isGroup: item => undefined,
+      getCandidateGroups: item => item.data.tags,
+      getGroupMeta: group => ({}),
+    };
+  } else {
+    grouping = {
+      isGroup: item => (item.data.children.length >= 2 ? item.page.url : undefined),
+      getCandidateGroups: item => {
+        let parentUrl = item.data.parentUrl;
+        if (page?.url === parentUrl) {
+          return [];
+        }
+        return [parentUrl];
+      },
+      getGroupMeta: group => {
+        let item = byUrl[group] || getCollectionItemFromUrl.call(this, group);
+        return {
+          title: item?.data.title,
+          url: group,
+          item,
+        };
+      },
+      sortGroups: groups => sort(groups.map(url => byUrl[url]).filter(Boolean)).map(item => item.page.url),
+    };
+  }
+
+  let byUrl = {};
+  let byParentUrl = {};
 
   for (let item of collection) {
-    let categorized = false;
+    let url = item.page.url;
+    let parentUrl = item.data.parentUrl;
 
-    for (let tag of tags) {
-      if (item.data.tags.includes(tag)) {
-        ret[tag].push(item);
-        categorized = true;
-      }
-    }
+    byUrl[url] = item;
 
-    if (!categorized) {
-      ret.other.push(item);
+    if (parentUrl) {
+      byParentUrl[parentUrl] ??= [];
+      byParentUrl[parentUrl].push(item);
     }
   }
 
-  // Remove empty categories
-  for (let category in ret) {
-    if (ret[category].length === 0) {
-      delete ret[category];
+  let urlToGroups = {};
+
+  for (let item of collection) {
+    let url = item.page.url;
+    let parentUrl = item.data.parentUrl;
+
+    if (grouping.isGroup(item)) {
+      continue;
+    }
+
+    let parentItem = byUrl[parentUrl];
+    if (parentItem && !grouping.isGroup(parentItem)) {
+      // Their parent is also here and is not a group
+      continue;
+    }
+
+    let candidateGroups = grouping.getCandidateGroups(item);
+
+    if (groups) {
+      candidateGroups = candidateGroups.filter(group => groups.includes(group));
+    }
+
+    urlToGroups[url] ??= [];
+
+    for (let group of candidateGroups) {
+      urlToGroups[url].push(group);
+    }
+  }
+
+  let ret = {};
+
+  for (let url in urlToGroups) {
+    let groups = urlToGroups[url];
+    let item = byUrl[url];
+
+    if (groups.length === 0) {
+      // Not filtered out but also not categorized
+      groups = ['other'];
+    }
+
+    for (let group of groups) {
+      ret[group] ??= [];
+      ret[group].push(item);
+
+      if (!ret[group].meta) {
+        if (group === 'other') {
+          ret[group].meta = { title: other };
+        } else {
+          ret[group].meta = grouping.getGroupMeta(group);
+          ret[group].meta.title = titles[group] ?? ret[group].meta.title ?? capitalize(group);
+        }
+      }
+    }
+  }
+
+  if (other === false) {
+    delete ret.other;
+  }
+
+  // Sort
+  let sortedGroups = groups ?? grouping.sortGroups?.(Object.keys(ret));
+
+  if (sortedGroups) {
+    ret = sortObject(ret, sortedGroups);
+  }
+
+  Object.defineProperty(ret, 'meta', {
+    value: {
+      groupCount: Object.keys(ret).length,
+    },
+    enumerable: false,
+  });
+
+  return ret;
+}
+
+/**
+ * Sort an object by its keys
+ * @param {*} obj
+ * @param {function | string[]} order
+ */
+function sortObject(obj, order) {
+  let ret = {};
+  let sortedKeys = Array.isArray(order) ? order : Object.keys(obj).sort(order);
+
+  for (let key of sortedKeys) {
+    if (key in obj) {
+      ret[key] = obj[key];
+    }
+  }
+
+  // Add any keys that weren't in the order
+  for (let key in obj) {
+    if (!(key in ret)) {
+      ret[key] = obj[key];
     }
   }
 
   return ret;
 }
 
-export function getCategoryTitle(category, categories) {
-  let title;
-  if (Array.isArray(categories)) {
-    // Find relevant entry
-    // [{id: "Title"}, id2, ...]
-    title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
-  } else if (typeof categories === 'object') {
-    // {id: "Title", id2: "Title 2", ...}
-    title = categories[category];
-  }
-
-  if (title) {
-    return title;
-  }
-
-  // Capitalized
-  return category.charAt(0).toUpperCase() + category.slice(1);
+function capitalize(str) {
+  str += '';
+  return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
 const IDENTITY = x => x;

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/turbo.js

@@ -1,3 +1,6 @@
+import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm';
+import { preventTurboFouce } from '/dist/webawesome.js';
+
 if (!window.___turboScrollPositions___) {
   window.___turboScrollPositions___ = {};
 }
@@ -70,3 +73,4 @@ function fixDSD(e) {
 window.addEventListener('turbo:before-cache', saveScrollPosition);
 window.addEventListener('turbo:before-render', restoreScrollPosition);
 window.addEventListener('turbo:render', restoreScrollPosition);
+preventTurboFouce();

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 {
-  vertical-align: middle;
+h1.title {
+  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/index.njk

@@ -2,13 +2,10 @@
 title: Components
 description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
 layout: overview
-categories:
-  - actions
-  - feedback: 'Feedback & Status'
-  - imagery
-  - inputs
-  - navigation
-  - organization
-  - helpers: 'Utilities'
 override:tags: []
+categories:
+  tags: [actions, feedback, imagery, inputs, navigation, organization, helpers]
+  titles:
+    feedback: 'Feedback & Status'
+    helpers: 'Utilities'
 ---

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/docs.11tydata.js

@@ -1,10 +1,80 @@
+/**
+ * Global data for all pages
+ */
+import { sort } from '../_utils/filters.js';
+
 export default {
   eleventyComputed: {
-    children(data) {
-      let mainTag = data.tags?.[0];
-      let collection = data.collections[mainTag] ?? [];
+    // Default parent. Can be overridden by explicitly setting parent in the data.
+    // parent can refer to either an ancestor page in the URL or another page in the same directory
+    parent(data) {
+      let { parent, page } = data;
 
-      return collection.filter(item => item.data.parent === data.page.fileSlug);
+      if (parent) {
+        return parent;
+      }
+
+      return page.url.split('/').filter(Boolean).at(-2);
+    },
+
+    parentUrl(data) {
+      let { parent, page } = data;
+      return getParentUrl(page.url, parent);
+    },
+
+    parentItem(data) {
+      let { parentUrl } = data;
+      return data.collections.all.find(item => item.url === parentUrl);
+    },
+
+    children(data) {
+      let { collections, page, parentOf } = data;
+
+      if (parentOf) {
+        return collections[parentOf];
+      }
+
+      let collection = collections.all ?? [];
+      let url = page.url;
+
+      let ret = collection.filter(item => {
+        return item.data.parentUrl === url;
+      });
+
+      sort(ret);
+
+      return ret;
     },
   },
 };
+
+function getParentUrl(url, parent) {
+  let parts = url.split('/').filter(Boolean);
+  let ancestorIndex = parts.findLastIndex(part => part === parent);
+  let retParts = parts.slice();
+
+  if (ancestorIndex > -1) {
+    // parent is an ancestor
+    retParts.splice(ancestorIndex + 1);
+  } else {
+    // parent is a sibling in the same directory
+    retParts.splice(-1, 1, parent);
+  }
+
+  let ret = retParts.join('/');
+
+  if (url.startsWith('/')) {
+    ret = '/' + ret;
+  }
+
+  if (!retParts.at(-1).includes('.') && !ret.endsWith('/')) {
+    // If no extension, make sure to end with a slash
+    ret += '/';
+  }
+
+  if (ret === '/docs/') {
+    ret = '/';
+  }
+
+  return ret;
+}

docs/docs/experimental/clamped-colors.njk

@@ -0,0 +1,44 @@
+---
+title: Clamped Color Tokens
+layout: block
+---
+
+{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
+{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
+
+<table class="colors">
+  <thead>
+    <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-color-{{ hue }}">
+  <th>{{ hue | capitalize }}</th>
+  <td class="core-column">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
+      {{ palettes[paletteId][hue].maxChromaTint }}
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+    </div>
+  </td>
+  {% for tint in tints -%}
+    <td>
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+      </div>
+    </td>
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
+
+<style>
+.core-column .color.swatch::before {
+  counter-reset: key var(--key);
+  content: counter(key);
+}
+</style>

docs/docs/installation.md

@@ -37,10 +37,6 @@ This snippet includes three parts:
 
 Now you can [start using Web Awesome!](/docs/usage)
 
-:::info
-While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
-:::
-
 ---
 
 ## Using Font Awesome Kit Codes

docs/docs/layout.njk

@@ -2,6 +2,7 @@
 title: Layout
 description: Layout components and utility classes help you organize content that can adapt to any device or screen size. See the [installation instructions](#installation) to use Web Awesome's layout tools in your project.
 layout: overview
+parentOf: layout
 categories: ["components", "utilities"]
 override:tags: []
 ---
@@ -22,4 +23,4 @@ Or, you can choose to import _only_ the utilities:
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
 ```
-{% endmarkdown %}
+{% endmarkdown %}

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/index.njk

@@ -5,6 +5,6 @@ layout: overview
 override:tags: []
 forTag: palette
 categories:
+  tags: [other, pro]
   other: Free
-  pro: Pro
 ---

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/patterns/index.njk

@@ -2,7 +2,5 @@
 title: Patterns
 description: Patterns are reusable solutions to common design problems.
 layout: overview
-categories: ["e-commerce"]
-listChildren: true
 override:tags: []
 ---

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,77 @@ During the alpha period, things might break! We take breaking changes very serio
 
 ## Next
 
-- Added an orientation example to the native radio docs
+- Added the `wa-cloak` utility to prevent FOUCE
+- Added the `allDefined()` utility for awaiting component registration
+- Fixed `wa-pill` class for text fields
+- Fixed `pill` style for `<wa-input>` elements
+- Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
+- Fixed a bug in `<wa-select multiple>` that sometimes resulted in empty `<div>` elements being output
+
+## 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/creating.md

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

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>{% include 'status.njk' %}</p>
+  <p id="mix_and_match" class="wa-size-s"></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 code = getCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
+  let tweaks = [];
+  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) {
-    p.hidden = msgs.length === 0;
-    if (msgs.length) {
-      let icon =
-      p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
-        ${ msg }</wa-badge>`).join(' ');
+  let isRemixed = tweaks.length > 0;
+  document.documentElement.classList.toggle('is-remixed', isRemixed);
+
+  if (isRemixed) {
+    for (let p of document.querySelectorAll("#theme-status")) {
+        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/index.njk

@@ -1,13 +1,13 @@
 ---
 title: Themes
-description: Themes are collections of design tokens that thread through every Web Awesome component and pattern. 
+description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
   Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
 layout: overview
 override:tags: []
 forTag: theme
 categories:
+  tags: [other, pro]
   other: Free
-  pro: Pro
 ---
 
 <div class="max-line-length">
@@ -30,7 +30,7 @@ In pre-made themes, we use a light color scheme by default.
 Additionally, styles may be scoped to the `:root` selector to be activated automatically.
 For pre-made themes, *all* custom properties are scoped to `:root`, the theme class, and `wa-light`.
 
-Finally, we scope themes to `:host` and `:host-context()` to ensure the styles are applied to the shadow roots of custom elements.
+Finally, we scope themes to `:host` to ensure the styles are applied to the shadow roots of custom elements.
 
 For example, the default theme is set up like this:
 
@@ -44,8 +44,7 @@ For example, the default theme is set up like this:
 }
 
 .wa-dark,
-.wa-invert,
-:host-context(.wa-dark) {
+.wa-invert {
   /* subset of CSS custom properties for a dark color scheme */
 }
 ```

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.
-  if (location.search) {
-    for (let aspect in data.params) {
-      if (data.urlParams.has(aspect)) {
-        data.params[aspect] = data.urlParams.get(aspect);
-      }
-    }
-  }
+  data.urlParams.mapObject(data.params);
+  data.urlParams.writeTo(data.params);
 
   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.
-  // We don’t want to clog the user’s history while they iterate
-  let historyAction = location.search ? 'replaceState' : 'pushState';
-  history[historyAction](null, '', `?${data.urlParams}`);
+  // Update page URL
+  data.urlParams.updateLocation();
 
   // Update code snippets
   for (let language in codeSnippets) {
     let codeSnippet = codeSnippets[language];
-    let copyButton = codeSnippet.previousElementSibling;
-    let code = getCode(data.baseTheme, data.params, { language, cdnUrl });
+    let code = getThemeCode(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;

docs/docs/tokens/index.njk

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

docs/docs/usage.md

@@ -8,6 +8,30 @@ Web Awesome components are just regular HTML elements, or [custom elements](http
 
 If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
 
+## Awaiting Registration
+
+Unlike traditional frameworks, custom elements don't have a centralized initialization phase. This means you need to verify that a custom element has been properly registered before attempting to interact with its properties or methods.
+
+You can use the [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) method to ensure a specific component is ready:
+
+```ts
+await customElements.whenDefined('wa-button');
+
+// <wa-button> is ready to use!
+const button = document.querySelector('wa-button');
+```
+
+When working with multiple components, checking each one individually can become tedious. For convenience, Web Awesome provides the `allDefined()` function which automatically detects and waits for all Web Awesome components in the DOM to be initialized before resolving.
+
+```ts
+import { allDefined } from '/dist/webawesome.js';
+
+// Waits for all Web Awesome components in the DOM to be registered
+await allDefined();
+
+// All Web Awesome components on the page are ready!
+```
+
 ## Attributes & Properties
 
 Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.

docs/docs/utilities/fouce.md

@@ -0,0 +1,32 @@
+---
+title: Reduce FOUCE
+description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
+file: styles/utilities/fouce.css
+icon: spinner
+---
+
+While convenient, autoloading can lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
+The [FOUCE style utility](/docs/utilities/fouce/#opting-in) (which is automatically applied if you use the [Web Awesome utilities](/docs/utilities/)) takes care of hiding custom elements until they and their contents have been registered, up to a maximum of two seconds.
+
+In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded. To do that, you can add the `wa-reduce-fouce` class to any element on the page or even apply it to the whole page by placing the class on the `<html>` element.
+
+```html
+<html class="wa-cloak">
+  ...
+</html>
+```
+
+As soon as all elements are registered _or_ after two seconds have elapsed, the autoloader will show the page. The two-second timeout prevents blank screens from persisting on slow networks and pages that have errors.
+
+:::details Are you using Turbo in your app?
+
+If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a change to register new components.
+
+The following function acts as a middleware to ensure components are registered _before_ the page shows, eliminating FOUCE for page-to-page navigation with Turbo.
+
+```js
+import { preventTurboFouce } from '/dist/webawesome.js';
+
+preventTurboFouce();
+```
+:::

docs/docs/utilities/fouce.njk

@@ -1,131 +0,0 @@
----
-title: Reduce FOUCE
-description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
-file: styles/utilities/fouce.css
-icon: spinner
----
-{% markdown %}
-No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.
-
-Here is a comparison of the loading experience with and without this utility,
-with a simulated slow loading time:
-
-{% endmarkdown %}
-
-
-<div class="wa-split wa-align-items-end">
-  <strong>Normal loading</strong>
-  <wa-button onclick="document.querySelectorAll('iframe').forEach(iframe => iframe.srcdoc = iframe.srcdoc)">
-    <wa-icon name="refresh"></wa-icon>
-    Refresh
-  </wa-button>
-  <strong>With FOUCE reduction</strong>
-</div>
-
-
-{% set sample_card %}
-<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high">
-<link rel="stylesheet" href="/dist/styles/webawesome.css">
-<link rel="stylesheet" href="/dist/styles/forms.css">
-<script type=module>
-const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
-const loadScript = src => new Promise((resolve, reject) => {
-  const script = document.createElement("script");
-  script.src = src;
-  script.type = "module";
-  script.onload = resolve;
-  script.onerror = reject;
-  document.head.appendChild(script);
-});
-
-await delay(500);
-await loadScript("/dist/components/button/button.js");
-await delay(500);
-await loadScript("/dist/components/card/card.js");
-await delay(500);
-await loadScript("/dist/components/rating/rating.js");
-</script>
-
-<wa-card with-footer with-image class="card-overview">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Mittens</strong><br />
-  This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </div>
-</wa-card>
-
-<style>
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot=footer] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-{% endset %}
-
-
-<div class="iframes">
-<iframe srcdoc='<body class="wa-fouce-off">{{ sample_card }}</body>'></iframe>
-<iframe srcdoc='{{ sample_card }}'></iframe>
-</div>
-<style>
-.iframes {
-	display: flex;
-	gap: var(--wa-space-m);
-  margin-top: var(--wa-space-l);
-
-	iframe {
-		flex: 1;
-		height: 60ch;
-	}
-}
-</style>
-
-{% markdown %}
-## How does it work?
-
-The utility consists of a timeout (`2s` by default) and a fade duration (`200ms` by default).
-- If the element is _ready_ before the timeout, it will appear immediately.
-- If it takes longer than _timeout_ + _fade_, it will fade in over the fade duration.
-- If it takes somewhere between _timeout_ and _timeout_ + _fade_, you will get an interrupted fade.
-
-An element is considered ready when both of these are true:
-1. Either It has been registered or has a `did-ssr` attribute (indicating it was pre-rendered)
-2. If it’s a Web Awesome component, its contents are also ready
-
-## Customization
-
-You can use the following CSS variables to customize the behavior:
-
-| Variable | Description | Default |
-| --- | --- | --- |
-| `--wa-fouce-fade` | The transition duration for the fade effect. | `200ms` |
-| `--wa-fouce-timeout` | The timeout after which elements will appear even if not registered | `2s` |
-
-The fade duration cannot be longer than the timeout.
-This means that you can disable FOUCE reduction on an element by setting `--wa-fouce-timeout: 0s`.
-
-For example, if instead of `did-ssr` you used an `ssr` attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:
-
-```css
-[ssr] {
-  --wa-fouce-timeout: 0s;
-}
-```
-
-You can also opt-out from FOUCE reduction for an element and its contents by adding the `.wa-fouce-off` class to it.
-Applying this class to the root element will disable the utility for the entire page.
-{% endmarkdown %}

docs/index.md

@@ -4,8 +4,6 @@ description: Build better with Web Awesome, the open source library of web compo
 layout: page
 ---
 
-
-
 <style>
   .title,
   .anchor-heading a,
@@ -387,4 +385,4 @@ layout: page
       &copy; Fonticons, Inc.
     </div>
   </footer>
-</div>
+</div>

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",

scripts/build.js

@@ -4,6 +4,7 @@ import { execSync } from 'child_process';
 import { deleteAsync } from 'del';
 import esbuild from 'esbuild';
 import { replace } from 'esbuild-plugin-replace';
+
 import { mkdir, readFile } from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
 import { globby } from 'globby';
@@ -266,6 +267,13 @@ async function regenerateBundle() {
  * Generates the documentation site.
  */
 async function generateDocs() {
+  /**
+   * Used by the webawesome-app to skip doc generation since it will do its own.
+   */
+  if (process.env.SKIP_ELEVENTY === 'true') {
+    return;
+  }
+
   spinner.start('Writing the docs');
 
   const args = [];

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()];
@@ -108,7 +109,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) value: string | null = null;
 
   /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-  @property() href = '';
+  @property({ reflect: true }) href = null;
 
   /** Tells the browser where to open the link. Only used when `href` is present. */
   @property() target: '_blank' | '_parent' | '_self' | '_top';
@@ -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/color-picker/color-picker.css

@@ -278,11 +278,11 @@
 }
 
 /*
-   * Color dropdown
-   */
+ * Color dropdown
+ */
 
 .color-dropdown {
-  display: flex;
+  display: contents;
 }
 
 .color-dropdown::part(panel) {

src/components/details/details.css

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

src/components/icon-button/icon-button.css

@@ -1,5 +1,8 @@
 :host {
   --background-color-hover: var(--wa-color-neutral-fill-quiet);
+  --text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  --background-color-active: transparent;
+  --text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
 
   display: inline-block;
   color: var(--wa-color-text-quiet);
@@ -22,12 +25,13 @@
 
 :host(:not([disabled])) .icon-button:hover,
 :host(:not([disabled])) .icon-button:focus-visible {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  background-color: var(--background-color-hover);
+  color: var(--text-color-hover);
 }
 
 :host(:not([disabled])) .icon-button:active {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  background-color: var(--background-color-active);
+  color: var(--text-color-active);
 }
 
 .icon-button:focus {

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

@@ -17,7 +17,10 @@ import styles from './icon-button.css';
  * @event blur - Emitted when the icon button loses focus.
  * @event focus - Emitted when the icon button gains focus.
  *
- * @cssproperty --background-color-hover - The color of the button's background on hover.
+ * @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover.
+ * @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`.
+ * @cssproperty --text-color-hover - The color of the button's background on hover.
+ * @cssproperty --text-color-active - The color of the button's background on `:active`.
  *
  * @csspart base - The component's base wrapper.
  */

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) {
-  outline: none;
-}
-
-.radio {
-  display: flex;
+:host {
+  display: grid;
+  grid-template-columns: auto 1fr;
   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')
-  handleCheckedChange() {
-    this.toggleCustomState('checked', this.checked);
-    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-    this.tabIndex = this.checked ? 0 : -1;
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('checked')) {
+      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`
-      <span
-        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>
+    const hasHintSlot = isServer ? true : this.hasSlotController.test('hint');
+    const hasHint = this.hint ? true : !!hasHintSlot;
 
-        <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;
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-semibold);
-    color: var(--wa-color-text-quiet);
-    padding-block: var(--wa-space-xs);
-    padding-inline: var(--wa-space-xl);
-  }
+}
+
+slot:not([name])::slotted(small) {
+  display: block;
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-semibold);
+  color: var(--wa-color-text-quiet);
+  padding-block: var(--wa-space-xs);
+  padding-inline: var(--wa-space-xl);
 }

src/components/select/select.test.ts

@@ -647,6 +647,7 @@ describe('<wa-select>', () => {
             );
             const el = form.querySelector<WaSelect>('wa-select')!;
 
+            expect(el.defaultValue).to.equal('option-1');
             expect(el.value).to.equal('');
             expect(new FormData(form).get('select')).equal('');
 
@@ -657,6 +658,7 @@ describe('<wa-select>', () => {
 
             await aTimeout(10);
             await el.updateComplete;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['option-1']);
             expect(el.value).to.equal('option-1');
             expect(new FormData(form).get('select')).equal('option-1');
           });
@@ -745,6 +747,8 @@ describe('<wa-select>', () => {
             );
 
             const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['bar', 'baz']);
+            expect(el.optionValues?.size).to.equal(2);
             expect(el.value).to.have.members(['bar', 'baz']);
             expect(el.value!.length).to.equal(2);
             expect(new FormData(form).getAll('select')).to.have.members(['bar', 'baz']);
@@ -760,6 +764,36 @@ describe('<wa-select>', () => {
             expect(new FormData(form).getAll('select')).to.have.members(['foo', 'bar', 'baz']);
           });
         });
+
+        describe('With setting the value via JS', () => {
+          it('Should preserve value even if not returned', async () => {
+            const form = await fixture<HTMLFormElement>(
+              html` <form>
+                <wa-select name="select">
+                  <wa-option value="bar">Bar</wa-option>
+                  <wa-option value="baz">Baz</wa-option>
+                </wa-select>
+              </form>`,
+            );
+
+            const el = form.querySelector<WaSelect>('wa-select')!;
+            expect(el.value).to.equal('');
+
+            el.value = 'foo';
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('');
+
+            const option = document.createElement('wa-option');
+            option.value = 'foo';
+            option.innerText = 'Foo';
+            el.append(option);
+
+            await aTimeout(10);
+            await el.updateComplete;
+            expect(el.value).to.equal('foo');
+          });
+        });
       });
     });
   }

src/components/select/select.ts

@@ -118,6 +118,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   @state() displayLabel = '';
   @state() currentOption: WaOption;
   @state() selectedOptions: WaOption[] = [];
+  @state() optionValues: Set<string> | undefined;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -158,7 +159,47 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     return val;
   }
 
-  @property({ attribute: false }) value: string | string[] | null = null;
+  private _value: string[] | undefined;
+  @property({ attribute: false })
+  set value(val: string | string[]) {
+    let oldValue = this.value;
+
+    if (!Array.isArray(val)) {
+      val = val.split(' ');
+    }
+
+    if (!this._value || this._value.join(' ') !== val.join(' ')) {
+      this._value = val;
+      let newValue = this.value;
+
+      if (newValue != oldValue) {
+        this.requestUpdate('value', oldValue);
+      }
+    }
+  }
+  get value() {
+    let value = this._value ?? this.defaultValue;
+    value = Array.isArray(value) ? value : [value];
+    let optionsChanged = !this.optionValues;
+
+    if (optionsChanged) {
+      this.optionValues = new Set(
+        this.getAllOptions()
+          .filter(option => !option.disabled)
+          .map(option => option.value),
+      );
+    }
+
+    // Drop values not in the DOM
+    let ret: string | string[] = value.filter(v => this.optionValues!.has(v));
+    ret = this.multiple ? ret : (ret[0] ?? '');
+
+    if (optionsChanged) {
+      this.requestUpdate('value');
+    }
+
+    return ret;
+  }
 
   /** The select's size. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
@@ -250,7 +291,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           ?pill=${this.pill}
           size=${this.size}
           removable
-          @wa-remove=${(event: WaRemoveEvent) => this.handleTagRemove(event, option)}
         >
           ${option.label}
         </wa-tag>
@@ -538,21 +578,41 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     }
 
     const allOptions = this.getAllOptions();
-    const val = this.valueHasChanged ? this.value : this.defaultValue;
-    const value = Array.isArray(val) ? val : [val];
-    const values: string[] = [];
+    this.optionValues = undefined; // dirty the value so it gets recalculated
 
-    // Check for duplicate values in menu items
-    allOptions.forEach(option => values.push(option.value));
+    const value = this.value;
 
     // Select only the options that match the new value
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
   }
 
-  private handleTagRemove(event: WaRemoveEvent, option: WaOption) {
+  private handleTagRemove(event: WaRemoveEvent, directOption?: WaOption) {
     event.stopPropagation();
 
-    if (!this.disabled) {
+    if (this.disabled) return;
+
+    // Use the directly provided option if available (from getTag method)
+    let option = directOption;
+
+    // If no direct option was provided, find the option from the event path
+    if (!option) {
+      const tagElement = (event.target as Element).closest('wa-tag[part~=tag]');
+
+      if (tagElement) {
+        // Find the index of this tag among all tags
+        const tagsContainer = this.shadowRoot?.querySelector('[part="tags"]');
+        if (tagsContainer) {
+          const allTags = Array.from(tagsContainer.children);
+          const index = allTags.indexOf(tagElement as HTMLElement);
+
+          if (index >= 0 && index < this.selectedOptions.length) {
+            option = this.selectedOptions[index];
+          }
+        }
+      }
+    }
+
+    if (option) {
       this.toggleOptionSelection(option, false);
 
       // Emit after updating
@@ -565,6 +625,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
   // Gets an array of all `<wa-option>` elements
   private getAllOptions() {
+    if (!this?.querySelectorAll) {
+      return [];
+    }
     return [...this.querySelectorAll<WaOption>('wa-option')];
   }
 
@@ -628,11 +691,24 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
     // Update selected options cache
     this.selectedOptions = options.filter(el => el.selected);
+    let selectedValues = new Set(this.selectedOptions.map(el => el.value));
+
+    // Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading)
+    // Note that options NOT present in the DOM will be moved to the end after this
+    if (selectedValues.size > 0 || this._value) {
+      if (!this._value) {
+        // First time it's set
+        let value = this.defaultValue ?? [];
+        this._value = Array.isArray(value) ? value : [value];
+      }
+
+      // Filter out values that are in the DOM
+      this._value = this._value.filter(value => !this.optionValues?.has(value));
+      this._value.unshift(...selectedValues);
+    }
 
     // Update the value and display label
     if (this.multiple) {
-      this.value = this.selectedOptions.map(el => el.value);
-
       if (this.placeholder && this.value.length === 0) {
         // When no items are selected, keep the value empty so the placeholder shows
         this.displayLabel = '';
@@ -641,7 +717,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
       }
     } else {
       const selectedOption = this.selectedOptions[0];
-      this.value = selectedOption?.value ?? '';
       this.displayLabel = selectedOption?.label ?? '';
     }
 
@@ -654,10 +729,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     return this.selectedOptions.map((option, index) => {
       if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
         const tag = this.getTag(option, index);
-        // Wrap so we can handle the remove
-        return html`<div @wa-remove=${(e: WaRemoveEvent) => this.handleTagRemove(e, option)}>
-          ${typeof tag === 'string' ? unsafeHTML(tag) : tag}
-        </div>`;
+        if (!tag) return null;
+        return typeof tag === 'string' ? unsafeHTML(tag) : tag;
       } else if (index === this.maxOptionsVisible) {
         // Hit tag limit
         return html`
@@ -673,7 +746,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
           >
         `;
       }
-      return html``;
+      return null;
     });
   }
 
@@ -873,7 +946,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
               />
 
               <!-- Tags need to wait for first hydration before populating otherwise it will create a hydration mismatch. -->
-              ${this.multiple && this.hasUpdated ? html`<div part="tags" class="tags">${this.tags}</div>` : ''}
+              ${this.multiple && this.hasUpdated
+                ? html`<div part="tags" class="tags" @wa-remove=${this.handleTagRemove}>${this.tags}</div>`
+                : ''}
 
               <input
                 class="value-input"
@@ -927,6 +1002,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/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/blue.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-blue-10);
   --wa-color-brand-05: var(--wa-color-blue-05);
   --wa-color-brand: var(--wa-color-blue);
-  --wa-color-brand-key: var(--wa-color-blue-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-blue-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-blue-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-blue-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-blue-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-blue-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-blue-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-blue-max-50);
+  --wa-color-brand-min-50: var(--wa-color-blue-min-50);
+  --wa-color-brand-max-60: var(--wa-color-blue-max-60);
+  --wa-color-brand-min-60: var(--wa-color-blue-min-60);
+  --wa-color-brand-max-70: var(--wa-color-blue-max-70);
+  --wa-color-brand-min-70: var(--wa-color-blue-min-70);
+
+  --wa-color-brand-on: var(--wa-color-blue-on);
 }

src/styles/brand/cyan.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-cyan-10);
   --wa-color-brand-05: var(--wa-color-cyan-05);
   --wa-color-brand: var(--wa-color-cyan);
-  --wa-color-brand-key: var(--wa-color-cyan-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-cyan-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-cyan-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-cyan-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-cyan-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-cyan-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-cyan-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-cyan-max-50);
+  --wa-color-brand-min-50: var(--wa-color-cyan-min-50);
+  --wa-color-brand-max-60: var(--wa-color-cyan-max-60);
+  --wa-color-brand-min-60: var(--wa-color-cyan-min-60);
+  --wa-color-brand-max-70: var(--wa-color-cyan-max-70);
+  --wa-color-brand-min-70: var(--wa-color-cyan-min-70);
+
+  --wa-color-brand-on: var(--wa-color-cyan-on);
 }

src/styles/brand/gray.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-gray-10);
   --wa-color-brand-05: var(--wa-color-gray-05);
   --wa-color-brand: var(--wa-color-gray);
-  --wa-color-brand-key: var(--wa-color-gray-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-gray-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-gray-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-gray-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-gray-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-gray-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-gray-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-gray-max-50);
+  --wa-color-brand-min-50: var(--wa-color-gray-min-50);
+  --wa-color-brand-max-60: var(--wa-color-gray-max-60);
+  --wa-color-brand-min-60: var(--wa-color-gray-min-60);
+  --wa-color-brand-max-70: var(--wa-color-gray-max-70);
+  --wa-color-brand-min-70: var(--wa-color-gray-min-70);
+
+  --wa-color-brand-on: var(--wa-color-gray-on);
 }

src/styles/brand/green.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-green-10);
   --wa-color-brand-05: var(--wa-color-green-05);
   --wa-color-brand: var(--wa-color-green);
-  --wa-color-brand-key: var(--wa-color-green-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-green-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-green-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-green-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-green-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-green-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-green-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-green-max-50);
+  --wa-color-brand-min-50: var(--wa-color-green-min-50);
+  --wa-color-brand-max-60: var(--wa-color-green-max-60);
+  --wa-color-brand-min-60: var(--wa-color-green-min-60);
+  --wa-color-brand-max-70: var(--wa-color-green-max-70);
+  --wa-color-brand-min-70: var(--wa-color-green-min-70);
+
+  --wa-color-brand-on: var(--wa-color-green-on);
 }

src/styles/brand/indigo.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-indigo-10);
   --wa-color-brand-05: var(--wa-color-indigo-05);
   --wa-color-brand: var(--wa-color-indigo);
-  --wa-color-brand-key: var(--wa-color-indigo-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-indigo-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-indigo-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-indigo-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-indigo-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-indigo-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-indigo-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-indigo-max-50);
+  --wa-color-brand-min-50: var(--wa-color-indigo-min-50);
+  --wa-color-brand-max-60: var(--wa-color-indigo-max-60);
+  --wa-color-brand-min-60: var(--wa-color-indigo-min-60);
+  --wa-color-brand-max-70: var(--wa-color-indigo-max-70);
+  --wa-color-brand-min-70: var(--wa-color-indigo-min-70);
+
+  --wa-color-brand-on: var(--wa-color-indigo-on);
 }

src/styles/brand/orange.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-orange-10);
   --wa-color-brand-05: var(--wa-color-orange-05);
   --wa-color-brand: var(--wa-color-orange);
-  --wa-color-brand-key: var(--wa-color-orange-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-orange-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-orange-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-orange-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-orange-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-orange-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-orange-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-orange-max-50);
+  --wa-color-brand-min-50: var(--wa-color-orange-min-50);
+  --wa-color-brand-max-60: var(--wa-color-orange-max-60);
+  --wa-color-brand-min-60: var(--wa-color-orange-min-60);
+  --wa-color-brand-max-70: var(--wa-color-orange-max-70);
+  --wa-color-brand-min-70: var(--wa-color-orange-min-70);
+
+  --wa-color-brand-on: var(--wa-color-orange-on);
 }

src/styles/brand/pink.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-pink-10);
   --wa-color-brand-05: var(--wa-color-pink-05);
   --wa-color-brand: var(--wa-color-pink);
-  --wa-color-brand-key: var(--wa-color-pink-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-pink-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-pink-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-pink-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-pink-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-pink-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-pink-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-pink-max-50);
+  --wa-color-brand-min-50: var(--wa-color-pink-min-50);
+  --wa-color-brand-max-60: var(--wa-color-pink-max-60);
+  --wa-color-brand-min-60: var(--wa-color-pink-min-60);
+  --wa-color-brand-max-70: var(--wa-color-pink-max-70);
+  --wa-color-brand-min-70: var(--wa-color-pink-min-70);
+
+  --wa-color-brand-on: var(--wa-color-pink-on);
 }

src/styles/brand/purple.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-purple-10);
   --wa-color-brand-05: var(--wa-color-purple-05);
   --wa-color-brand: var(--wa-color-purple);
-  --wa-color-brand-key: var(--wa-color-purple-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-purple-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-purple-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-purple-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-purple-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-purple-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-purple-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-purple-max-50);
+  --wa-color-brand-min-50: var(--wa-color-purple-min-50);
+  --wa-color-brand-max-60: var(--wa-color-purple-max-60);
+  --wa-color-brand-min-60: var(--wa-color-purple-min-60);
+  --wa-color-brand-max-70: var(--wa-color-purple-max-70);
+  --wa-color-brand-min-70: var(--wa-color-purple-min-70);
+
+  --wa-color-brand-on: var(--wa-color-purple-on);
 }

src/styles/brand/red.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-red-10);
   --wa-color-brand-05: var(--wa-color-red-05);
   --wa-color-brand: var(--wa-color-red);
-  --wa-color-brand-key: var(--wa-color-red-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-red-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-red-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-red-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-red-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-red-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-red-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-red-max-50);
+  --wa-color-brand-min-50: var(--wa-color-red-min-50);
+  --wa-color-brand-max-60: var(--wa-color-red-max-60);
+  --wa-color-brand-min-60: var(--wa-color-red-min-60);
+  --wa-color-brand-max-70: var(--wa-color-red-max-70);
+  --wa-color-brand-min-70: var(--wa-color-red-min-70);
+
+  --wa-color-brand-on: var(--wa-color-red-on);
 }

src/styles/brand/yellow.css

@@ -1,7 +1,8 @@
 :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);
@@ -14,5 +15,22 @@
   --wa-color-brand-10: var(--wa-color-yellow-10);
   --wa-color-brand-05: var(--wa-color-yellow-05);
   --wa-color-brand: var(--wa-color-yellow);
-  --wa-color-brand-key: var(--wa-color-yellow-key);
+
+  --wa-color-brand-lt-50: var(--wa-color-yellow-lt-50);
+  --wa-color-brand-gte-50: var(--wa-color-yellow-gte-50);
+
+  --wa-color-brand-lt-60: var(--wa-color-yellow-lt-60);
+  --wa-color-brand-gte-60: var(--wa-color-yellow-gte-60);
+
+  --wa-color-brand-lt-70: var(--wa-color-yellow-lt-70);
+  --wa-color-brand-gte-70: var(--wa-color-yellow-gte-70);
+
+  --wa-color-brand-max-50: var(--wa-color-yellow-max-50);
+  --wa-color-brand-min-50: var(--wa-color-yellow-min-50);
+  --wa-color-brand-max-60: var(--wa-color-yellow-max-60);
+  --wa-color-brand-min-60: var(--wa-color-yellow-min-60);
+  --wa-color-brand-max-70: var(--wa-color-yellow-max-70);
+  --wa-color-brand-min-70: var(--wa-color-yellow-min-70);
+
+  --wa-color-brand-on: var(--wa-color-yellow-on);
 }

src/styles/color/anodized.css

@@ -1,116 +1,146 @@
+@import url('base.css');
+
 :where(:root),
 :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-90: #f8e0d9 /* oklch(92.431% 0.02823 36.865) */;
-  --wa-color-red-80: #efbdb1 /* oklch(83.972% 0.06035 33.801) */;
-  --wa-color-red-70: #e39f8d /* oklch(76.38% 0.08577 35.424) */;
-  --wa-color-red-60: #d1806b /* oklch(68.083% 0.10573 35.329) */;
-  --wa-color-red-50: #b35e49 /* oklch(57.764% 0.11532 34.927) */;
-  --wa-color-red-40: #8e4330 /* oklch(47.527% 0.10671 35.325) */;
-  --wa-color-red-30: #733223 /* oklch(40.293% 0.09564 34.326) */;
-  --wa-color-red-20: #562317 /* oklch(32.748% 0.07905 34.548) */;
-  --wa-color-red-10: #36130a /* oklch(23.979% 0.05887 35.518) */;
-  --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-red-95: #ffefee /* oklch(96.448% 0.01742 21.806) */;
+  --wa-color-red-90: #fededd /* oklch(92.674% 0.03556 19.95) */;
+  --wa-color-red-80: #fabab8 /* oklch(84.695% 0.0745 20.791) */;
+  --wa-color-red-70: #f19695 /* oklch(76.595% 0.11008 20.609) */;
+  --wa-color-red-60: #d47c7e /* oklch(68.199% 0.10963 18.885) */;
+  --wa-color-red-50: #af5e5a /* oklch(57.551% 0.10599 23.859) */;
+  --wa-color-red-40: #89453f /* oklch(47.393% 0.09388 26.419) */;
+  --wa-color-red-30: #6d352f /* oklch(40.077% 0.08085 27.557) */;
+  --wa-color-red-20: #522521 /* oklch(32.622% 0.06818 26.677) */;
+  --wa-color-red-10: #331512 /* oklch(23.979% 0.04918 27.221) */;
+  --wa-color-red-05: #220b09 /* oklch(18.625% 0.04007 26.766) */;
+  --wa-color-red: var(--wa-color-red-70);
+  --wa-color-red-key: 70;
 
-  --wa-color-yellow-95: #fff2b8 /* oklch(95.764% 0.07527 96.955) */;
-  --wa-color-yellow-90: #ffe578 /* oklch(92.163% 0.13215 96.194) */;
-  --wa-color-yellow-80: #eac46c /* oklch(83.54% 0.11551 86.482) */;
-  --wa-color-yellow-70: #d5a766 /* oklch(75.67% 0.0989 74.916) */;
-  --wa-color-yellow-60: #bd8a5e /* oklch(67.327% 0.08618 61.351) */;
-  --wa-color-yellow-50: #9d6a4f /* oklch(57.149% 0.0766 48.607) */;
-  --wa-color-yellow-40: #794f3c /* oklch(46.965% 0.06418 45.076) */;
-  --wa-color-yellow-30: #603d2f /* oklch(39.723% 0.05466 42.556) */;
-  --wa-color-yellow-20: #482b21 /* oklch(32.256% 0.04681 39.773) */;
-  --wa-color-yellow-10: #2c1912 /* oklch(23.678% 0.03339 40.974) */;
-  --wa-color-yellow-05: #1d0e0a /* oklch(18.423% 0.02718 35.681) */;
-  --wa-color-yellow: var(--wa-color-yellow-90);
-  --wa-color-yellow-key: 90;
+  --wa-color-orange-95: #ffefe8 /* oklch(96.287% 0.01978 45.262) */;
+  --wa-color-orange-90: #ffe0d2 /* oklch(92.854% 0.03927 45.816) */;
+  --wa-color-orange-80: #fbbc9e /* oklch(84.557% 0.08373 46.569) */;
+  --wa-color-orange-70: #f3976f /* oklch(76.236% 0.12363 43.995) */;
+  --wa-color-orange-60: #d67e59 /* oklch(68.046% 0.12088 43.174) */;
+  --wa-color-orange-50: #ae6140 /* oklch(57.433% 0.11041 43.333) */;
+  --wa-color-orange-40: #89472c /* oklch(47.39% 0.09837 42.278) */;
+  --wa-color-orange-30: #6f351e /* oklch(40.084% 0.08944 41.51) */;
+  --wa-color-orange-20: #542513 /* oklch(32.696% 0.07578 40.822) */;
+  --wa-color-orange-10: #341408 /* oklch(23.762% 0.05577 40.619) */;
+  --wa-color-orange-05: #230b04 /* oklch(18.679% 0.04417 39.815) */;
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
 
-  --wa-color-green-95: #dcf8ea /* oklch(95.5% 0.03463 164.16) */;
-  --wa-color-green-90: #bcf1d8 /* oklch(91.473% 0.06399 164.58) */;
-  --wa-color-green-80: #6dddad /* oklch(81.852% 0.12484 163.42) */;
-  --wa-color-green-70: #33c685 /* oklch(73.519% 0.15428 158.98) */;
-  --wa-color-green-60: #0a6 /* oklch(64.917% 0.15588 156.54) */;
-  --wa-color-green-50: #008754 /* oklch(54.923% 0.12782 158.29) */;
-  --wa-color-green-40: #006646 /* oklch(45.146% 0.09722 163.25) */;
-  --wa-color-green-30: #00503b /* oklch(38.299% 0.07764 167.91) */;
-  --wa-color-green-20: #003a2d /* oklch(31.045% 0.06006 172.22) */;
-  --wa-color-green-10: #00231b /* oklch(22.853% 0.04344 174.1) */;
-  --wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
-  --wa-color-green: var(--wa-color-green-60);
-  --wa-color-green-key: 60;
+  --wa-color-yellow-95: #faf3e1 /* oklch(96.479% 0.02487 89.211) */;
+  --wa-color-yellow-90: #f4e5be /* oklch(92.412% 0.0535 89.488) */;
+  --wa-color-yellow-80: #eac673 /* oklch(84.03% 0.1101 86.581) */;
+  --wa-color-yellow-70: #d4a85b /* oklch(75.609% 0.10842 79.92) */;
+  --wa-color-yellow-60: #bf8b4a /* oklch(67.445% 0.10375 70.58) */;
+  --wa-color-yellow-50: #a06938 /* oklch(56.952% 0.09579 60.65) */;
+  --wa-color-yellow-40: #7f4d29 /* oklch(47.038% 0.08433 54.746) */;
+  --wa-color-yellow-30: #663b1e /* oklch(39.848% 0.07399 52.93) */;
+  --wa-color-yellow-20: #4c2a14 /* oklch(32.393% 0.0609 51.89) */;
+  --wa-color-yellow-10: #2f1809 /* oklch(23.743% 0.04463 52.113) */;
+  --wa-color-yellow-05: #1f0e04 /* oklch(18.6% 0.03542 53.04) */;
+  --wa-color-yellow: var(--wa-color-yellow-80);
+  --wa-color-yellow-key: 80;
 
-  --wa-color-cyan-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
-  --wa-color-cyan-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
-  --wa-color-cyan-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
-  --wa-color-cyan-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
-  --wa-color-cyan-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
-  --wa-color-cyan-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
-  --wa-color-cyan-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
-  --wa-color-cyan-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
-  --wa-color-cyan-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
-  --wa-color-cyan-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
-  --wa-color-cyan-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
+  --wa-color-green-95: #ebf6e0 /* oklch(95.901% 0.03126 128.83) */;
+  --wa-color-green-90: #d3efbe /* oklch(91.922% 0.0713 131.97) */;
+  --wa-color-green-80: #96db86 /* oklch(82.501% 0.13433 139.79) */;
+  --wa-color-green-70: #68c17c /* oklch(73.758% 0.13164 149.51) */;
+  --wa-color-green-60: #4aa672 /* oklch(65.518% 0.11814 156.17) */;
+  --wa-color-green-50: #2e845d /* oklch(55.093% 0.10286 160.26) */;
+  --wa-color-green-40: #1b6548 /* oklch(45.377% 0.0863 162.75) */;
+  --wa-color-green-30: #104f38 /* oklch(38.219% 0.07374 163.76) */;
+  --wa-color-green-20: #083a29 /* oklch(31.135% 0.05985 165.09) */;
+  --wa-color-green-10: #032317 /* oklch(22.865% 0.0446 164.36) */;
+  --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-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
-  --wa-color-blue-80: #abcaff /* oklch(83.49% 0.082 261.03) */;
-  --wa-color-blue-70: #83b0fe /* oklch(75.655% 0.12308 260.97) */;
-  --wa-color-blue-60: #5593fe /* oklch(67.328% 0.1713 260.55) */;
-  --wa-color-blue-50: #3d74d2 /* oklch(57.024% 0.15628 260.38) */;
-  --wa-color-blue-40: #2e589f /* oklch(46.829% 0.12443 260.23) */;
-  --wa-color-blue-30: #24457c /* oklch(39.571% 0.10098 260.03) */;
-  --wa-color-blue-20: #1b325b /* oklch(32.168% 0.07881 261.06) */;
-  --wa-color-blue-10: #101d35 /* oklch(23.292% 0.05008 261.75) */;
-  --wa-color-blue-05: #0a1222 /* oklch(18.375% 0.0352 263.19) */;
-  --wa-color-blue: var(--wa-color-blue-60);
-  --wa-color-blue-key: 60;
+  --wa-color-blue-95: #e5f6ff /* oklch(96.324% 0.02167 230.54) */;
+  --wa-color-blue-90: #c7ebff /* oklch(92.061% 0.04647 232.28) */;
+  --wa-color-blue-80: #8ed2f9 /* oklch(83.243% 0.08774 234.44) */;
+  --wa-color-blue-70: #5db7f3 /* oklch(74.844% 0.12234 240.33) */;
+  --wa-color-blue-60: #309aee /* oklch(66.707% 0.15592 247.36) */;
+  --wa-color-blue-50: #0774df /* oklch(56.704% 0.18422 255.07) */;
+  --wa-color-blue-40: #0152c1 /* oklch(47.066% 0.187 259.59) */;
+  --wa-color-blue-30: #003ea2 /* oklch(40.154% 0.17138 260.8) */;
+  --wa-color-blue-20: #002b7f /* oklch(32.816% 0.14852 261.7) */;
+  --wa-color-blue-10: #001853 /* oklch(24.067% 0.11176 262.05) */;
+  --wa-color-blue-05: #000e39 /* oklch(18.796% 0.0868 261.98) */;
+  --wa-color-blue: var(--wa-color-blue-40);
+  --wa-color-blue-key: 40;
 
-  --wa-color-indigo-95: #f5efff /* oklch(96.142% 0.02215 302.94) */;
-  --wa-color-indigo-90: #ede0ff /* oklch(92.64% 0.04374 304.51) */;
-  --wa-color-indigo-80: #d7bdff /* oklch(84.265% 0.09443 302.44) */;
-  --wa-color-indigo-70: #bf9efe /* oklch(76.541% 0.13786 298.94) */;
-  --wa-color-indigo-60: #a280fa /* oklch(68.571% 0.17519 294.14) */;
-  --wa-color-indigo-50: #7f5bec /* oklch(58.581% 0.20817 289.86) */;
-  --wa-color-indigo-40: #603dc8 /* oklch(48.557% 0.20262 287.93) */;
-  --wa-color-indigo-30: #4c2ba5 /* oklch(41.119% 0.18229 287.94) */;
-  --wa-color-indigo-20: #381d7f /* oklch(33.629% 0.15279 287.75) */;
-  --wa-color-indigo-10: #210e53 /* oklch(24.589% 0.11518 287.13) */;
-  --wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
-  --wa-color-indigo: var(--wa-color-indigo-50);
-  --wa-color-indigo-key: 50;
+  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
+  --wa-color-indigo-90: #e1e4fe /* oklch(92.448% 0.03538 280.45) */;
+  --wa-color-indigo-80: #bfc6fe /* oklch(84.035% 0.07865 279.01) */;
+  --wa-color-indigo-70: #9fa8fc /* oklch(75.744% 0.12084 278.41) */;
+  --wa-color-indigo-60: #828bf6 /* oklch(67.774% 0.15666 277.72) */;
+  --wa-color-indigo-50: #6166e8 /* oklch(57.738% 0.19274 276.85) */;
+  --wa-color-indigo-40: #4743d0 /* oklch(48.143% 0.20939 276.34) */;
+  --wa-color-indigo-30: #372db3 /* oklch(41.009% 0.20044 276.19) */;
+  --wa-color-indigo-20: #291b90 /* oklch(33.874% 0.17803 276.48) */;
+  --wa-color-indigo-10: #170a61 /* oklch(24.844% 0.13871 276.05) */;
+  --wa-color-indigo-05: #0e0445 /* oklch(19.553% 0.11104 276.58) */;
+  --wa-color-indigo: var(--wa-color-indigo-40);
+  --wa-color-indigo-key: 40;
 
-  --wa-color-purple-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
-  --wa-color-purple-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
-  --wa-color-purple-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
-  --wa-color-purple-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
-  --wa-color-purple-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
-  --wa-color-purple-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
-  --wa-color-purple-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
-  --wa-color-purple-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
-  --wa-color-purple-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
-  --wa-color-purple-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
-  --wa-color-purple-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
+  --wa-color-purple-95: #fbefff /* oklch(96.613% 0.02465 317.72) */;
+  --wa-color-purple-90: #f7ddff /* oklch(92.895% 0.0531 318.2) */;
+  --wa-color-purple-80: #edb7ff /* oklch(85.165% 0.11316 317.53) */;
+  --wa-color-purple-70: #dc91fe /* oklch(77.161% 0.16803 314.62) */;
+  --wa-color-purple-60: #c670f2 /* oklch(69.273% 0.19845 312.9) */;
+  --wa-color-purple-50: #a34bda /* oklch(58.947% 0.21432 309.63) */;
+  --wa-color-purple-40: #802fb6 /* oklch(48.965% 0.20261 307.82) */;
+  --wa-color-purple-30: #661f96 /* oklch(41.488% 0.1815 307.02) */;
+  --wa-color-purple-20: #4c1372 /* oklch(33.753% 0.1509 306.93) */;
+  --wa-color-purple-10: #30074a /* oklch(24.849% 0.1139 307.37) */;
+  --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-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
-  --wa-color-gray-80: #c2c9d0 /* oklch(83.255% 0.01246 247.98) */;
-  --wa-color-gray-70: #a6b0ba /* oklch(75.244% 0.01824 248.07) */;
-  --wa-color-gray-60: #8897a3 /* oklch(66.841% 0.02477 242.06) */;
-  --wa-color-gray-50: #657888 /* oklch(56.309% 0.0335 243.8) */;
-  --wa-color-gray-40: #435c6f /* oklch(46.235% 0.04323 241.6) */;
-  --wa-color-gray-30: #2d485d /* oklch(38.946% 0.04864 242.89) */;
-  --wa-color-gray-20: #18354a /* oklch(31.701% 0.05142 242.24) */;
-  --wa-color-gray-10: #012034 /* oklch(23.295% 0.05299 241.23) */;
-  --wa-color-gray-05: #001421 /* oklch(18.122% 0.03959 237.04) */;
+  --wa-color-pink-95: #ffedf6 /* oklch(96.291% 0.02268 345.75) */;
+  --wa-color-pink-90: #feddee /* oklch(92.966% 0.04248 345.5) */;
+  --wa-color-pink-80: #feb2e3 /* oklch(84.978% 0.10743 340.7) */;
+  --wa-color-pink-70: #f688de /* oklch(77.315% 0.16826 335.79) */;
+  --wa-color-pink-60: #e560d6 /* oklch(69.598% 0.21242 332.2) */;
+  --wa-color-pink-50: #c234bf /* oklch(59.18% 0.23062 328.94) */;
+  --wa-color-pink-40: #9b189b /* oklch(49.224% 0.21096 328.21) */;
+  --wa-color-pink-30: #7c097e /* oklch(41.626% 0.18577 327.45) */;
+  --wa-color-pink-20: #5e0160 /* oklch(34.016% 0.15613 327.29) */;
+  --wa-color-pink-10: #3c003c /* oklch(24.992% 0.11486 328.36) */;
+  --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/base.css

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

src/styles/color/bright.css

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -5,112 +7,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-60: #fd5f5f /* oklch(69.182% 0.19322 23.628) */;
-  --wa-color-red-50: #de3131 /* oklch(58.924% 0.20878 26.488) */;
-  --wa-color-red-40: #b40917 /* oklch(48.728% 0.19437 26.549) */;
-  --wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
-  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
-  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
-  --wa-color-red-05: #300000 /* oklch(19.415% 0.07967 29.234) */;
-  --wa-color-red: var(--wa-color-red-50);
-  --wa-color-red-key: 50;
+  --wa-color-red-70: #ff8e90 /* oklch(76.896% 0.13677 19.629) */;
+  --wa-color-red-60: #f76563 /* oklch(69.077% 0.18003 23.786) */;
+  --wa-color-red-50: #d04442 /* oklch(58.513% 0.17687 25.152) */;
+  --wa-color-red-40: #a52c2b /* oklch(48.271% 0.15774 25.737) */;
+  --wa-color-red-30: #861d1c /* oklch(40.905% 0.1406 26.45) */;
+  --wa-color-red-20: #680d0e /* oklch(33.449% 0.1237 26.777) */;
+  --wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
+  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
+  --wa-color-red: var(--wa-color-red-60);
+  --wa-color-red-key: 60;
 
-  --wa-color-yellow-95: #fef3c1 /* oklch(96.062% 0.06532 97.08) */;
-  --wa-color-yellow-90: #fee682 /* oklch(92.403% 0.1233 96.206) */;
-  --wa-color-yellow-80: #fbc217 /* oklch(84.22% 0.16883 86.577) */;
-  --wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
-  --wa-color-yellow-60: #e67700 /* oklch(68.349% 0.1693 54.965) */;
-  --wa-color-yellow-50: #b75d00 /* oklch(57.535% 0.1429 54.739) */;
-  --wa-color-yellow-40: #8c4600 /* oklch(47.31% 0.11712 55.012) */;
-  --wa-color-yellow-30: #6f3600 /* oklch(40.006% 0.09924 54.843) */;
-  --wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
-  --wa-color-yellow-10: #341500 /* oklch(23.823% 0.06026 53.274) */;
-  --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
-  --wa-color-yellow: var(--wa-color-yellow-60);
-  --wa-color-yellow-key: 60;
+  --wa-color-orange-95: oklch(96.406% 0.04001 53.476);
+  --wa-color-orange-90: oklch(92.395% 0.07984 53.06);
+  --wa-color-orange-80: oklch(84.389% 0.12224 47.981);
+  --wa-color-orange-70: oklch(76.55% 0.16521 42.512);
+  --wa-color-orange-60: #e97331 /* oklch(68.357% 0.16507 46.504) */;
+  --wa-color-orange-50: #bf5712 /* oklch(57.834% 0.15197 47.326) */;
+  --wa-color-orange-40: oklch(47.62% 0.132 48.51);
+  --wa-color-orange-30: oklch(40.38% 0.11554 50);
+  --wa-color-orange-20: oklch(32.94% 0.09927 52);
+  --wa-color-orange-10: oklch(24.083% 0.07743 54);
+  --wa-color-orange-05: oklch(18.817% 0.06098 55);
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
 
-  --wa-color-green-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
-  --wa-color-green-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
-  --wa-color-green-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
-  --wa-color-green-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
-  --wa-color-green-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
-  --wa-color-green-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
-  --wa-color-green-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
-  --wa-color-green-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
-  --wa-color-green-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
-  --wa-color-green-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
-  --wa-color-green-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
-  --wa-color-green: var(--wa-color-green-70);
-  --wa-color-green-key: 70;
+  --wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */;
+  --wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */;
+  --wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */;
+  --wa-color-yellow-70: #f29c00 /* oklch(76.127% 0.16443 70.48) */;
+  --wa-color-yellow-60: #d08402 /* oklch(67.671% 0.14665 69.482) */;
+  --wa-color-yellow-50: #a56804 /* oklch(57.027% 0.1228 69.447) */;
+  --wa-color-yellow-40: #7d4f04 /* oklch(46.866% 0.09949 70.54) */;
+  --wa-color-yellow-30: #643d03 /* oklch(39.73% 0.08492 68.821) */;
+  --wa-color-yellow-20: #4a2c01 /* oklch(32.318% 0.06941 69.3) */;
+  --wa-color-yellow-10: #2d1901 /* oklch(23.512% 0.04963 68.776) */;
+  --wa-color-yellow-05: #1d0f00 /* oklch(18.392% 0.03939 71.947) */;
+  --wa-color-yellow: var(--wa-color-yellow-80);
+  --wa-color-yellow-key: 80;
 
-  --wa-color-cyan-95: #dcf9fc /* oklch(96.213% 0.03042 204.23) */;
-  --wa-color-cyan-90: #aff0f6 /* oklch(91.368% 0.06543 203.24) */;
-  --wa-color-cyan-80: #69dae9 /* oklch(82.807% 0.10458 206.97) */;
-  --wa-color-cyan-70: #2bbfd4 /* oklch(74.03% 0.11967 209.65) */;
-  --wa-color-cyan-60: #12a3b8 /* oklch(65.721% 0.1115 211.17) */;
-  --wa-color-cyan-50: #0c8195 /* oklch(55.546% 0.09532 213.91) */;
-  --wa-color-cyan-40: #096272 /* oklch(45.73% 0.07805 214.43) */;
-  --wa-color-cyan-30: #074c59 /* oklch(38.429% 0.06506 214.82) */;
-  --wa-color-cyan-20: #063842 /* oklch(31.484% 0.05211 215.06) */;
-  --wa-color-cyan-10: #032127 /* oklch(22.892% 0.03684 213.41) */;
-  --wa-color-cyan-05: #021518 /* oklch(18.045% 0.02758 207.97) */;
-  --wa-color-cyan: var(--wa-color-cyan-70);
-  --wa-color-cyan-key: 70;
+  --wa-color-green-95: #dbfaf0 /* oklch(96.006% 0.03481 174.15) */;
+  --wa-color-green-90: #b1f3de /* oklch(91.419% 0.0722 172.95) */;
+  --wa-color-green-80: #3fe2b2 /* oklch(81.853% 0.14907 168.5) */;
+  --wa-color-green-70: #29c596 /* oklch(73.487% 0.14194 166.89) */;
+  --wa-color-green-60: #19a87d /* oklch(65.107% 0.13007 166.01) */;
+  --wa-color-green-50: #0a8560 /* oklch(54.742% 0.11293 164.94) */;
+  --wa-color-green-40: #036648 /* oklch(45.239% 0.09474 164.51) */;
+  --wa-color-green-30: #015038 /* oklch(38.229% 0.08003 164.89) */;
+  --wa-color-green-20: #003a28 /* oklch(30.885% 0.06454 165.46) */;
+  --wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
+  --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
+  --wa-color-green: var(--wa-color-green-80);
+  --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-70: #60b5f9 /* oklch(74.8% 0.1287 244.9) */;
-  --wa-color-blue-60: #3299f0 /* oklch(66.644% 0.15866 248.64) */;
-  --wa-color-blue-50: #1a77cc /* oklch(56.301% 0.15449 251.61) */;
-  --wa-color-blue-40: #165a9b /* oklch(46.242% 0.12393 251.89) */;
-  --wa-color-blue-30: #11477a /* oklch(39.241% 0.10211 251.38) */;
-  --wa-color-blue-20: #0d3459 /* oklch(31.95% 0.07871 250.89) */;
-  --wa-color-blue-10: #071f35 /* oklch(23.365% 0.05197 249.19) */;
-  --wa-color-blue-05: #051321 /* oklch(18.208% 0.03553 248.92) */;
-  --wa-color-blue: var(--wa-color-blue-60);
-  --wa-color-blue-key: 60;
+  --wa-color-blue-80: #93d0ff /* oklch(83.315% 0.09108 242.3) */;
+  --wa-color-blue-70: #5bb5fe /* oklch(74.85% 0.13654 245.56) */;
+  --wa-color-blue-60: #4a99e4 /* oklch(66.699% 0.13625 249.55) */;
+  --wa-color-blue-50: #3178c0 /* oklch(56.346% 0.13216 251.63) */;
+  --wa-color-blue-40: #235a96 /* oklch(46.273% 0.11344 253.15) */;
+  --wa-color-blue-30: #194777 /* oklch(39.272% 0.09544 252.36) */;
+  --wa-color-blue-20: #103359 /* oklch(31.787% 0.07886 253.15) */;
+  --wa-color-blue-10: #061e38 /* oklch(23.254% 0.05851 252.8) */;
+  --wa-color-blue-05: #031225 /* oklch(18.051% 0.04534 253.25) */;
+  --wa-color-blue: var(--wa-color-blue-70);
+  --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-60: #738efc /* oklch(67.734% 0.16478 271.06) */;
-  --wa-color-indigo-50: #486af1 /* oklch(57.714% 0.20605 268.43) */;
-  --wa-color-indigo-40: #354dc3 /* oklch(47.651% 0.18567 269.2) */;
-  --wa-color-indigo-30: #293c98 /* oklch(40.065% 0.15173 269.37) */;
-  --wa-color-indigo-20: #1e2c70 /* oklch(32.649% 0.11852 269.77) */;
-  --wa-color-indigo-10: #121a43 /* oklch(23.813% 0.07786 271) */;
-  --wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
-  --wa-color-indigo: var(--wa-color-indigo-50);
-  --wa-color-indigo-key: 50;
+  --wa-color-indigo-70: #95abff /* oklch(75.79% 0.12361 271.99) */;
+  --wa-color-indigo-60: #728dff /* oklch(67.658% 0.17035 271.19) */;
+  --wa-color-indigo-50: #516ed8 /* oklch(57.136% 0.16529 269.13) */;
+  --wa-color-indigo-40: #3851b3 /* oklch(47.273% 0.15818 268.81) */;
+  --wa-color-indigo-30: #2a3f8f /* oklch(39.968% 0.13476 268.52) */;
+  --wa-color-indigo-20: #1e2d6c /* oklch(32.512% 0.11114 269.2) */;
+  --wa-color-indigo-10: #101a45 /* oklch(23.864% 0.08185 269.36) */;
+  --wa-color-indigo-05: #080f2f /* oklch(18.545% 0.06467 269.54) */;
+  --wa-color-indigo: var(--wa-color-indigo-60);
+  --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-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
-  --wa-color-purple-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
-  --wa-color-purple-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
-  --wa-color-purple-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
-  --wa-color-purple-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
-  --wa-color-purple-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
-  --wa-color-purple-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
-  --wa-color-purple: var(--wa-color-purple-50);
-  --wa-color-purple-key: 50;
+  --wa-color-purple-70: #b8a0fe /* oklch(76.293% 0.13384 294.76) */;
+  --wa-color-purple-60: #9e83f2 /* oklch(68.278% 0.16015 292.86) */;
+  --wa-color-purple-50: #7b65cb /* oklch(57.62% 0.15206 290.77) */;
+  --wa-color-purple-40: #5c4ba7 /* oklch(47.824% 0.14213 288.32) */;
+  --wa-color-purple-30: #493590 /* oklch(40.487% 0.14337 288.41) */;
+  --wa-color-purple-20: #371f7a /* oklch(33.309% 0.1443 287.97) */;
+  --wa-color-purple-10: #250161 /* oklch(25.284% 0.14353 287.73) */;
+  --wa-color-purple-05: #150047 /* oklch(19.858% 0.11707 283.68) */;
+  --wa-color-purple: var(--wa-color-purple-60);
+  --wa-color-purple-key: 60;
 
-  --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
-  --wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
-  --wa-color-gray-80: #c7cad4 /* oklch(83.966% 0.01424 272.66) */;
-  --wa-color-gray-70: #a9afbe /* oklch(75.397% 0.0225 268.37) */;
-  --wa-color-gray-60: #8d95a8 /* oklch(66.968% 0.02959 267.4) */;
+  --wa-color-pink-95: #f8effc /* oklch(96.287% 0.01965 315.67) */;
+  --wa-color-pink-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
+  --wa-color-pink-80: #edb8fa /* oklch(85.148% 0.10592 319.58) */;
+  --wa-color-pink-70: #e38ef8 /* oklch(77.16% 0.16992 319.48) */;
+  --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-30: #344566 /* oklch(39.129% 0.06051 263) */;
-  --wa-color-gray-20: #1a3356 /* oklch(32.021% 0.07012 257.11) */;
-  --wa-color-gray-10: #0e1e35 /* oklch(23.442% 0.04969 257.55) */;
-  --wa-color-gray-05: #081220 /* oklch(18.072% 0.03272 256.72) */;
+  --wa-color-gray-40: #4a597a /* oklch(46.526% 0.05715 265.38) */;
+  --wa-color-gray-30: #384565 /* oklch(39.365% 0.05713 266.86) */;
+  --wa-color-gray-20: #26314f /* oklch(31.829% 0.05593 267.86) */;
+  --wa-color-gray-10: #131c38 /* oklch(23.46% 0.0555 268.48) */;
+  --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

@@ -1,34 +1,50 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
 .wa-palette-classic {
   --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
   --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
-  --wa-color-red-80: #ffb8b4 /* oklch(84.753% 0.08313 22.598) */;
-  --wa-color-red-70: #fd908e /* oklch(76.913% 0.13219 21.705) */;
-  --wa-color-red-60: #f46766 /* oklch(68.945% 0.17423 23.179) */;
-  --wa-color-red-50: #df2f2e /* oklch(58.922% 0.21141 26.911) */;
-  --wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
-  --wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
-  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
-  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
-  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
+  --wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
+  --wa-color-red-70: #fe8f8d /* oklch(76.859% 0.13466 21.762) */;
+  --wa-color-red-60: #f56667 /* oklch(68.982% 0.17631 22.472) */;
+  --wa-color-red-50: #e02c2b /* oklch(58.861% 0.21461 27.156) */;
+  --wa-color-red-40: #b5051a /* oklch(48.833% 0.19611 25.68) */;
+  --wa-color-red-30: #900015 /* oklch(41.172% 0.16676 24.609) */;
+  --wa-color-red-20: #6c000d /* oklch(33.479% 0.1356 24.617) */;
+  --wa-color-red-10: #450005 /* oklch(24.598% 0.09968 24.835) */;
+  --wa-color-red-05: #2f0002 /* oklch(19.218% 0.07801 25.517) */;
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
+  --wa-color-orange-95: #fff0e4 /* oklch(96.374% 0.0228 61.238) */;
+  --wa-color-orange-90: #ffe0c8 /* oklch(92.611% 0.04689 59.917) */;
+  --wa-color-orange-80: #ffbb89 /* oklch(84.386% 0.10217 57.161) */;
+  --wa-color-orange-70: #ff9342 /* oklch(76.486% 0.15964 54.102) */;
+  --wa-color-orange-60: #f36d00 /* oklch(68.715% 0.18774 47.79) */;
+  --wa-color-orange-50: #c94e00 /* oklch(58.068% 0.17131 43.217) */;
+  --wa-color-orange-40: #9d3800 /* oklch(47.924% 0.14534 41.739) */;
+  --wa-color-orange-30: #7e2900 /* oklch(40.53% 0.1259 40.51) */;
+  --wa-color-orange-20: #5e1c00 /* oklch(32.874% 0.1027 40.228) */;
+  --wa-color-orange-10: #3b0f00 /* oklch(24.125% 0.07446 40.837) */;
+  --wa-color-orange-05: #280700 /* oklch(18.837% 0.05933 39.827) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
   --wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
   --wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
-  --wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;
+  --wa-color-yellow-80: #f5c24b /* oklch(83.879% 0.14445 85.083) */;
   --wa-color-yellow-70: #e9a010 /* oklch(75.825% 0.15689 75.537) */;
-  --wa-color-yellow-60: #de7c00 /* oklch(68.073% 0.15991 59.827) */;
-  --wa-color-yellow-50: #bc5908 /* oklch(57.654% 0.1491 50.241) */;
-  --wa-color-yellow-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
-  --wa-color-yellow-30: #763104 /* oklch(40.324% 0.1093 46.564) */;
-  --wa-color-yellow-20: #572301 /* oklch(32.677% 0.08796 47.926) */;
-  --wa-color-yellow-10: #371300 /* oklch(24.001% 0.06559 47.77) */;
-  --wa-color-yellow-05: #250a00 /* oklch(18.773% 0.0519 47.039) */;
-  --wa-color-yellow: var(--wa-color-yellow-60);
-  --wa-color-yellow-key: 60;
+  --wa-color-yellow-60: #d78000 /* oklch(67.839% 0.15287 64.455) */;
+  --wa-color-yellow-50: #b26000 /* oklch(57.324% 0.13672 58.338) */;
+  --wa-color-yellow-40: #8a4700 /* oklch(47.183% 0.11461 56.655) */;
+  --wa-color-yellow-30: #6e3700 /* oklch(40.03% 0.0976 56.323) */;
+  --wa-color-yellow-20: #522700 /* oklch(32.54% 0.07981 55.802) */;
+  --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+  --wa-color-yellow-05: #210d00 /* oklch(18.619% 0.04431 58.553) */;
+  --wa-color-yellow: var(--wa-color-yellow-70);
+  --wa-color-yellow-key: 70;
 
   --wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
   --wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;
@@ -100,6 +116,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

@@ -1,105 +1,135 @@
+@import url('base.css');
+
 :where(:root),
 :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-90: #ffdddc /* oklch(92.547% 0.03785 19.865) */;
-  --wa-color-red-80: #ffb7b6 /* oklch(84.626% 0.08407 19.872) */;
-  --wa-color-red-70: #fc9090 /* oklch(76.834% 0.13083 20.537) */;
-  --wa-color-red-60: #f2676c /* oklch(68.768% 0.17146 20.596) */;
-  --wa-color-red-50: #de2d44 /* oklch(58.887% 0.20998 20.414) */;
-  --wa-color-red-40: #b11036 /* oklch(48.766% 0.18763 17.443) */;
-  --wa-color-red-30: #861a2f /* oklch(40.968% 0.14194 15.902) */;
-  --wa-color-red-20: #641122 /* oklch(33.29% 0.11505 15.196) */;
-  --wa-color-red-10: #400712 /* oklch(24.506% 0.08542 15.881) */;
-  --wa-color-red-05: #2a030a /* oklch(18.798% 0.06593 14.104) */;
+  --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
+  --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
+  --wa-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
+  --wa-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
+  --wa-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
+  --wa-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
+  --wa-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
+  --wa-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
+  --wa-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
+  --wa-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
+  --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-yellow-90: #fee590 /* oklch(92.407% 0.10827 93.577) */;
-  --wa-color-yellow-80: #fcc041 /* oklch(84.136% 0.1524 82.087) */;
-  --wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
-  --wa-color-yellow-60: #e07b00 /* oklch(68.175% 0.16203 58.675) */;
-  --wa-color-yellow-50: #bb5a00 /* oklch(57.639% 0.14858 51.823) */;
-  --wa-color-yellow-40: #924200 /* oklch(47.573% 0.12584 49.96) */;
-  --wa-color-yellow-30: #743200 /* oklch(40.128% 0.10738 49.167) */;
-  --wa-color-yellow-20: #572300 /* oklch(32.668% 0.08836 48.446) */;
-  --wa-color-yellow-10: #361300 /* oklch(23.81% 0.06438 48.467) */;
-  --wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
-  --wa-color-yellow: var(--wa-color-yellow-70);
-  --wa-color-yellow-key: 70;
+  --wa-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
+  --wa-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
+  --wa-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
+  --wa-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
+  --wa-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
+  --wa-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
+  --wa-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
+  --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
+  --wa-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
+  --wa-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
+  --wa-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
 
-  --wa-color-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-40: #006800 /* oklch(44.821% 0.15252 142.5) */;
-  --wa-color-green-30: #005300 /* oklch(38.319% 0.13039 142.5) */;
-  --wa-color-green-20: #003c00 /* oklch(30.861% 0.10501 142.5) */;
-  --wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
-  --wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
+  --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
+  --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
+  --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
+  --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
+  --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
+  --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-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
-  --wa-color-cyan-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
-  --wa-color-cyan-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
-  --wa-color-cyan-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
-  --wa-color-cyan-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
-  --wa-color-cyan-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
-  --wa-color-cyan-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
-  --wa-color-cyan-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
-  --wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
-  --wa-color-cyan-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
+  --wa-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
+  --wa-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
+  --wa-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
+  --wa-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
+  --wa-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
+  --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
+  --wa-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
+  --wa-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
+  --wa-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
+  --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
+  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
   --wa-color-cyan: var(--wa-color-cyan-70);
   --wa-color-cyan-key: 70;
 
-  --wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
-  --wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
-  --wa-color-blue-80: #a6ccff /* oklch(83.582% 0.08269 255.9) */;
-  --wa-color-blue-70: #77b1ff /* oklch(75.268% 0.12855 256.14) */;
-  --wa-color-blue-60: #4895fd /* oklch(67.184% 0.17212 256.8) */;
-  --wa-color-blue-50: #0070ef /* oklch(56.997% 0.20953 257.84) */;
-  --wa-color-blue-40: #0055b8 /* oklch(46.934% 0.17173 257.73) */;
-  --wa-color-blue-30: #004390 /* oklch(39.638% 0.1408 257.02) */;
-  --wa-color-blue-20: #00306c /* oklch(32.102% 0.11523 257.27) */;
-  --wa-color-blue-10: #001c45 /* oklch(23.545% 0.08493 257.39) */;
-  --wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
+  --wa-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
+  --wa-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
+  --wa-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
+  --wa-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
+  --wa-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
+  --wa-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
+  --wa-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
+  --wa-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
+  --wa-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
+  --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
+  --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-90: #e2e4fc /* oklch(92.459% 0.03255 281.95) */;
-  --wa-color-indigo-80: #c2c6f8 /* oklch(84.027% 0.06987 281.2) */;
-  --wa-color-indigo-70: #a5a9f2 /* oklch(75.915% 0.10451 281.18) */;
-  --wa-color-indigo-60: #8a8beb /* oklch(67.735% 0.14003 281.54) */;
-  --wa-color-indigo-50: #6b65e2 /* oklch(57.839% 0.18419 281.11) */;
-  --wa-color-indigo-40: #5246c1 /* oklch(48.113% 0.18471 281.3) */;
-  --wa-color-indigo-30: #412eaa /* oklch(41.007% 0.18636 281.32) */;
-  --wa-color-indigo-20: #321393 /* oklch(34.125% 0.1858 281.27) */;
-  --wa-color-indigo-10: #1c006a /* oklch(25.437% 0.15565 278.46) */;
-  --wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
-  --wa-color-indigo: var(--wa-color-indigo-40);
-  --wa-color-indigo-key: 40;
+  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
+  --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
+  --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
+  --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
+  --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
+  --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
+  --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
+  --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
+  --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
+  --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
+  --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
+  --wa-color-indigo: var(--wa-color-indigo-50);
+  --wa-color-indigo-key: 50;
 
-  --wa-color-purple-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
-  --wa-color-purple-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
-  --wa-color-purple-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
-  --wa-color-purple-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
-  --wa-color-purple-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
-  --wa-color-purple-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
-  --wa-color-purple-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
-  --wa-color-purple-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
-  --wa-color-purple-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
-  --wa-color-purple-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
-  --wa-color-purple-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
+  --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
+  --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
+  --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
+  --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
+  --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
+  --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
+  --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
+  --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
+  --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
+  --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
+  --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

@@ -1,116 +1,146 @@
+@import url('base.css');
+
 :where(:root),
 :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-90: #fcdfe0 /* oklch(92.771% 0.0321 15.37) */;
-  --wa-color-red-80: #f8b9bc /* oklch(84.416% 0.07319 15.56) */;
-  --wa-color-red-70: #f0969c /* oklch(76.649% 0.10862 15.608) */;
-  --wa-color-red-60: #e3727d /* oklch(68.562% 0.1405 15.424) */;
-  --wa-color-red-50: #cc465a /* oklch(58.534% 0.16911 15.341) */;
+  --wa-color-red-95: #feeeef /* oklch(96.203% 0.01739 13.095) */;
+  --wa-color-red-90: #fbdfe1 /* oklch(92.712% 0.03103 12.802) */;
+  --wa-color-red-80: #f2bcc0 /* oklch(84.468% 0.06249 13.512) */;
+  --wa-color-red-70: #e79aa1 /* oklch(76.427% 0.09275 13.523) */;
+  --wa-color-red-60: #db7781 /* oklch(68.361% 0.12461 14.576) */;
+  --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-20: #6b001c /* oklch(33.484% 0.13403 16.992) */;
-  --wa-color-red-10: #44000d /* oklch(24.5% 0.09818 18.249) */;
-  --wa-color-red-05: #2e0006 /* oklch(19.077% 0.07648 18.657) */;
+  --wa-color-red-30: #8f002b /* oklch(41.286% 0.16513 15.826) */;
+  --wa-color-red-20: #6b001f /* oklch(33.545% 0.13412 15.162) */;
+  --wa-color-red-10: #430212 /* oklch(24.607% 0.09481 14.336) */;
+  --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-yellow-90: #ece6cc /* oklch(92.281% 0.03499 96.315) */;
-  --wa-color-yellow-80: #dac992 /* oklch(83.686% 0.07427 92.946) */;
-  --wa-color-yellow-70: #c9ac5c /* oklch(75.33% 0.10529 89.848) */;
-  --wa-color-yellow-60: #b98f27 /* oklch(67.248% 0.12518 85.119) */;
-  --wa-color-yellow-50: #9b6d09 /* oklch(56.774% 0.11557 78.692) */;
-  --wa-color-yellow-40: #785007 /* oklch(46.422% 0.09514 74.644) */;
-  --wa-color-yellow-30: #613e06 /* oklch(39.54% 0.08123 71.804) */;
-  --wa-color-yellow-20: #492c05 /* oklch(32.206% 0.06602 68.329) */;
-  --wa-color-yellow-10: #2b1a02 /* oklch(23.457% 0.04659 73.352) */;
-  --wa-color-yellow-05: #191008 /* oklch(18.243% 0.02161 62.915) */;
-  --wa-color-yellow: var(--wa-color-yellow-60);
-  --wa-color-yellow-key: 60;
+  --wa-color-orange-95: #ffefe1 /* oklch(96.105% 0.02545 63.746) */;
+  --wa-color-orange-90: #fbe0cb /* oklch(92.334% 0.04096 60.142) */;
+  --wa-color-orange-80: #efc19f /* oklch(84.313% 0.06973 58.09) */;
+  --wa-color-orange-70: #e1a173 /* oklch(76.013% 0.09772 56.368) */;
+  --wa-color-orange-60: #d1824d /* oklch(67.937% 0.11938 53.195) */;
+  --wa-color-orange-50: #b65d22 /* oklch(57.543% 0.13444 49.914) */;
+  --wa-color-orange-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
+  --wa-color-orange-30: #773001 /* oklch(40.317% 0.11198 46.326) */;
+  --wa-color-orange-20: #592100 /* oklch(32.692% 0.09239 45.689) */;
+  --wa-color-orange-10: #381200 /* oklch(24.015% 0.06777 45.771) */;
+  --wa-color-orange-05: #260900 /* oklch(18.789% 0.05427 44.405) */;
+  --wa-color-orange: var(--wa-color-orange-50);
+  --wa-color-orange-key: 50;
 
-  --wa-color-green-95: #ecf4f1 /* oklch(96.029% 0.00935 171.8) */;
-  --wa-color-green-90: #dae9e3 /* oklch(92.11% 0.01786 170.06) */;
-  --wa-color-green-80: #b0d1c4 /* oklch(83.284% 0.03952 169.54) */;
-  --wa-color-green-70: #88b9a6 /* oklch(74.553% 0.05874 168.82) */;
-  --wa-color-green-60: #5fa288 /* oklch(65.987% 0.07948 167.12) */;
-  --wa-color-green-50: #2d8462 /* oklch(55.19% 0.09885 163.66) */;
-  --wa-color-green-40: #00663e /* oklch(44.949% 0.10492 158.13) */;
-  --wa-color-green-30: #005031 /* oklch(38.025% 0.08722 159.15) */;
-  --wa-color-green-20: #003b24 /* oklch(31.092% 0.0701 160.21) */;
-  --wa-color-green-10: #002316 /* oklch(22.679% 0.04824 164.14) */;
-  --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
+  --wa-color-yellow-95: #f7f4da /* oklch(96.266% 0.03422 101.63) */;
+  --wa-color-yellow-90: #ede7c3 /* oklch(92.349% 0.04769 99.435) */;
+  --wa-color-yellow-80: #d8ca96 /* oklch(83.793% 0.06999 94.829) */;
+  --wa-color-yellow-70: #c5ac6b /* oklch(75.167% 0.08892 89.16) */;
+  --wa-color-yellow-60: #b39043 /* oklch(67.06% 0.10423 84.751) */;
+  --wa-color-yellow-50: #9b6d09 /* oklch(56.774% 0.11557 78.692) */;
+  --wa-color-yellow-40: #7c4f00 /* oklch(46.714% 0.10011 71.858) */;
+  --wa-color-yellow-30: #623e00 /* oklch(39.642% 0.08465 72.511) */;
+  --wa-color-yellow-20: #482d04 /* oklch(32.274% 0.06572 71.644) */;
+  --wa-color-yellow-10: #2c1a02 /* oklch(23.612% 0.04739 71.633) */;
+  --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-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
-  --wa-color-cyan-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
-  --wa-color-cyan-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
-  --wa-color-cyan-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
-  --wa-color-cyan-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
-  --wa-color-cyan-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
-  --wa-color-cyan-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
-  --wa-color-cyan-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
-  --wa-color-cyan-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
-  --wa-color-cyan-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
+  --wa-color-cyan-95: #ecf3f6 /* oklch(95.973% 0.00849 225.08) */;
+  --wa-color-cyan-90: #dae8ee /* oklch(92.227% 0.01706 225.2) */;
+  --wa-color-cyan-80: #aecfdc /* oklch(83.456% 0.0396 223.66) */;
+  --wa-color-cyan-70: #82b7c9 /* oklch(74.873% 0.06114 221.03) */;
+  --wa-color-cyan-60: #549fb5 /* oklch(66.279% 0.08114 219.25) */;
+  --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
+  --wa-color-cyan-40: #006274 /* oklch(45.709% 0.0812 216.04) */;
+  --wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
+  --wa-color-cyan-20: #023841 /* oklch(31.326% 0.05351 212.43) */;
+  --wa-color-cyan-10: #012126 /* oklch(22.736% 0.03817 209.61) */;
+  --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-70: #81b5dd /* oklch(75.142% 0.07972 242.18) */;
-  --wa-color-blue-60: #559bd2 /* oklch(66.672% 0.10847 244.18) */;
-  --wa-color-blue-50: #1c7ac3 /* oklch(56.462% 0.13979 247.89) */;
-  --wa-color-blue-40: #005aa0 /* oklch(46.253% 0.13415 250.9) */;
-  --wa-color-blue-30: #00477e /* oklch(39.201% 0.11116 250.07) */;
-  --wa-color-blue-20: #00345d /* oklch(31.892% 0.08838 249.18) */;
-  --wa-color-blue-10: #001f37 /* oklch(23.169% 0.0591 245.63) */;
-  --wa-color-blue-05: #001221 /* oklch(17.475% 0.04178 242.4) */;
-  --wa-color-blue: var(--wa-color-blue-50);
-  --wa-color-blue-key: 50;
+  --wa-color-blue-80: #b0cee8 /* oklch(83.785% 0.0487 244.56) */;
+  --wa-color-blue-70: #88b3dc /* oklch(75.074% 0.0753 247.65) */;
+  --wa-color-blue-60: #6299ce /* oklch(66.642% 0.09844 248.63) */;
+  --wa-color-blue-50: #3578bc /* oklch(56.244% 0.12562 251.34) */;
+  --wa-color-blue-40: #0159a5 /* oklch(46.385% 0.14173 252.83) */;
+  --wa-color-blue-30: #00438d /* oklch(39.39% 0.13669 256.43) */;
+  --wa-color-blue-20: #00306d /* oklch(32.191% 0.11667 257.51) */;
+  --wa-color-blue-10: #001d43 /* oklch(23.62% 0.08036 255.9) */;
+  --wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
+  --wa-color-blue: var(--wa-color-blue-40);
+  --wa-color-blue-key: 40;
 
-  --wa-color-indigo-95: #f1f1fa /* oklch(96.073% 0.01199 286.17) */;
-  --wa-color-indigo-90: #e4e4f6 /* oklch(92.422% 0.02428 285.92) */;
-  --wa-color-indigo-80: #c6c7eb /* oklch(84.051% 0.05002 284.01) */;
-  --wa-color-indigo-70: #a9aae1 /* oklch(75.682% 0.07863 283.54) */;
-  --wa-color-indigo-60: #8d8ed7 /* oklch(67.514% 0.10716 282.54) */;
-  --wa-color-indigo-50: #696ccb /* oklch(57.448% 0.14365 279.49) */;
-  --wa-color-indigo-40: #4649bf /* oklch(47.579% 0.1808 275.97) */;
-  --wa-color-indigo-30: #36389c /* oklch(40.459% 0.15877 275.79) */;
-  --wa-color-indigo-20: #272972 /* oklch(32.817% 0.12297 276.06) */;
-  --wa-color-indigo-10: #171844 /* oklch(23.835% 0.08107 277.33) */;
-  --wa-color-indigo-05: #0d0e27 /* oklch(17.951% 0.0503 278.32) */;
+  --wa-color-indigo-95: #f2f3fb /* oklch(96.568% 0.01071 280.48) */;
+  --wa-color-indigo-90: #e1e4f7 /* oklch(92.225% 0.02593 278.72) */;
+  --wa-color-indigo-80: #c2c8f0 /* oklch(84.125% 0.05619 278.41) */;
+  --wa-color-indigo-70: #a2abe9 /* oklch(75.691% 0.08969 277.64) */;
+  --wa-color-indigo-60: #838fe0 /* oklch(67.424% 0.12044 276.26) */;
+  --wa-color-indigo-50: #616cd2 /* oklch(57.327% 0.15517 275.74) */;
+  --wa-color-indigo-40: #444bbe /* oklch(47.719% 0.17747 274.78) */;
+  --wa-color-indigo-30: #3235a6 /* oklch(40.598% 0.17674 274.08) */;
+  --wa-color-indigo-20: #222581 /* oklch(33.204% 0.15044 273.22) */;
+  --wa-color-indigo-10: #121650 /* oklch(24.243% 0.10418 272.65) */;
+  --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-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
-  --wa-color-purple-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
-  --wa-color-purple-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
-  --wa-color-purple-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
-  --wa-color-purple-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
-  --wa-color-purple-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
-  --wa-color-purple-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
-  --wa-color-purple-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
+  --wa-color-purple-80: #dac1e8 /* oklch(84.417% 0.05975 313.48) */;
+  --wa-color-purple-70: #c4a1e0 /* oklch(76.209% 0.09582 309.5) */;
+  --wa-color-purple-60: #ad82d8 /* oklch(68.129% 0.13065 306.24) */;
+  --wa-color-purple-50: #8e5dcc /* oklch(58.178% 0.16754 301.8) */;
+  --wa-color-purple-40: #7039ba /* oklch(48.506% 0.19176 298.45) */;
+  --wa-color-purple-30: #5925a1 /* oklch(41.419% 0.1844 296.38) */;
+  --wa-color-purple-20: #3f1d77 /* oklch(33.628% 0.14302 294.7) */;
+  --wa-color-purple-10: #241443 /* oklch(24.289% 0.08468 295) */;
+  --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-80: #cbc8ce /* oklch(83.695% 0.00885 308.34) */;
-  --wa-color-gray-70: #b1adb6 /* oklch(75.367% 0.01345 305.97) */;
-  --wa-color-gray-60: #98939f /* oklch(67.134% 0.01834 304.67) */;
-  --wa-color-gray-50: #7a7382 /* oklch(56.69% 0.0242 306.59) */;
-  --wa-color-gray-40: #5d5568 /* oklch(46.422% 0.03185 304.29) */;
-  --wa-color-gray-30: #494352 /* oklch(39.46% 0.02608 303.4) */;
-  --wa-color-gray-20: #35313c /* oklch(32.176% 0.01998 301.84) */;
-  --wa-color-gray-10: #1f1c23 /* oklch(23.288% 0.01397 304.73) */;
-  --wa-color-gray-05: #131115 /* oklch(18.185% 0.00865 307.93) */;
+  --wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
+  --wa-color-gray-80: #c9c9d0 /* oklch(83.798% 0.00965 286.19) */;
+  --wa-color-gray-70: #adaeb9 /* oklch(75.343% 0.01566 281.86) */;
+  --wa-color-gray-60: #9294a2 /* oklch(66.945% 0.02068 279.35) */;
+  --wa-color-gray-50: #727486 /* oklch(56.356% 0.02776 280.45) */;
+  --wa-color-gray-40: #55586b /* oklch(46.492% 0.03098 278.07) */;
+  --wa-color-gray-30: #424456 /* oklch(39.204% 0.03051 279.92) */;
+  --wa-color-gray-20: #30323f /* oklch(32.064% 0.02327 278.14) */;
+  --wa-color-gray-10: #1c1d25 /* oklch(23.329% 0.01544 279.52) */;
+  --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

@@ -1,3 +1,5 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
@@ -16,6 +18,20 @@
   --wa-color-red: var(--wa-color-red-40);
   --wa-color-red-key: 40;
 
+  --wa-color-orange-95: #fff0e8 /* oklch(96.479% 0.01949 50.157) */;
+  --wa-color-orange-90: #ffdfc8 /* oklch(92.42% 0.04692 57.822) */;
+  --wa-color-orange-80: #ffbb84 /* oklch(84.3% 0.10585 59.641) */;
+  --wa-color-orange-70: #e79f64 /* oklch(76.075% 0.1143 59.207) */;
+  --wa-color-orange-60: #ca854c /* oklch(67.612% 0.11209 58.789) */;
+  --wa-color-orange-50: #a56732 /* oklch(57.133% 0.10488 58.75) */;
+  --wa-color-orange-40: #824c1a /* oklch(47.091% 0.09621 59.168) */;
+  --wa-color-orange-30: #6a3907 /* oklch(39.832% 0.09012 58.688) */;
+  --wa-color-orange-20: #512800 /* oklch(32.57% 0.07814 57.787) */;
+  --wa-color-orange-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+  --wa-color-orange-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
+  --wa-color-orange: var(--wa-color-orange-70);
+  --wa-color-orange-key: 70;
+
   --wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
   --wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
   --wa-color-yellow-80: #e3c868 /* oklch(83.63% 0.12003 93.943) */;
@@ -30,76 +46,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-90: #bff2c0 /* oklch(91.282% 0.08527 145.33) */;
-  --wa-color-green-80: #9fd7a1 /* oklch(82.641% 0.09444 145.54) */;
-  --wa-color-green-70: #86bc88 /* oklch(74.373% 0.09308 145.46) */;
-  --wa-color-green-60: #6ca170 /* oklch(65.848% 0.09138 146.27) */;
-  --wa-color-green-50: #4e8153 /* oklch(55.447% 0.08949 146.53) */;
-  --wa-color-green-40: #336339 /* oklch(45.387% 0.08557 146.75) */;
-  --wa-color-green-30: #224e29 /* oklch(38.199% 0.07889 147.22) */;
-  --wa-color-green-20: #123a1b /* oklch(31.105% 0.0705 148.25) */;
-  --wa-color-green-10: #01230a /* oklch(22.432% 0.06139 149.06) */;
-  --wa-color-green-05: #001701 /* oklch(17.759% 0.05792 143.81) */;
+  --wa-color-green-95: #dffbda /* oklch(95.911% 0.05253 140.9) */;
+  --wa-color-green-90: #c1f2be /* oklch(91.363% 0.08611 143.36) */;
+  --wa-color-green-80: #a1d7a0 /* oklch(82.74% 0.09423 144.22) */;
+  --wa-color-green-70: #87bb87 /* oklch(74.177% 0.09187 144.58) */;
+  --wa-color-green-60: #6ea16f /* oklch(65.944% 0.09116 144.91) */;
+  --wa-color-green-50: #4f8051 /* oklch(55.201% 0.08939 145.16) */;
+  --wa-color-green-40: #336437 /* oklch(45.626% 0.08945 145.65) */;
+  --wa-color-green-30: #1f5026 /* oklch(38.6% 0.08722 146.45) */;
+  --wa-color-green-20: #073b14 /* oklch(30.947% 0.0845 147.2) */;
+  --wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
+  --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-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
-  --wa-color-cyan-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
-  --wa-color-cyan-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
-  --wa-color-cyan-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
-  --wa-color-cyan-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
-  --wa-color-cyan-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
-  --wa-color-cyan-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
-  --wa-color-cyan-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
-  --wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
-  --wa-color-cyan-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
-  --wa-color-cyan: var(--wa-color-cyan-40);
-  --wa-color-cyan-key: 40;
+  --wa-color-cyan-95: #ccfaff /* oklch(95.468% 0.04738 204.53) */;
+  --wa-color-cyan-90: #b4efff /* oklch(91.73% 0.06334 216.28) */;
+  --wa-color-cyan-80: #8ed4e9 /* oklch(83.085% 0.07588 218.68) */;
+  --wa-color-cyan-70: #6bbad0 /* oklch(74.634% 0.08383 217.83) */;
+  --wa-color-cyan-60: #4ca0b6 /* oklch(66.234% 0.08708 217.43) */;
+  --wa-color-cyan-50: #238094 /* oklch(55.617% 0.08818 215.68) */;
+  --wa-color-cyan-40: #006274 /* oklch(45.709% 0.0812 216.04) */;
+  --wa-color-cyan-30: #004c5c /* oklch(38.451% 0.06912 218.07) */;
+  --wa-color-cyan-20: #003845 /* oklch(31.48% 0.05692 218.99) */;
+  --wa-color-cyan-10: #00212a /* oklch(22.908% 0.04161 219.65) */;
+  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
+  --wa-color-cyan: var(--wa-color-cyan-50);
+  --wa-color-cyan-key: 50;
 
-  --wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
-  --wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
-  --wa-color-blue-80: #b5cced /* oklch(83.888% 0.05268 257.37) */;
-  --wa-color-blue-70: #95b1d7 /* oklch(75.273% 0.06312 256.12) */;
-  --wa-color-blue-60: #7697c1 /* oklch(66.758% 0.07287 254.73) */;
-  --wa-color-blue-50: #5078a5 /* oklch(56.23% 0.08347 252.2) */;
-  --wa-color-blue-40: #305b88 /* oklch(46.183% 0.08806 251.23) */;
-  --wa-color-blue-30: #1b4771 /* oklch(38.952% 0.0863 250.15) */;
-  --wa-color-blue-20: #0a3458 /* oklch(31.794% 0.07822 249.27) */;
-  --wa-color-blue-10: #011f39 /* oklch(23.373% 0.0615 248.28) */;
+  --wa-color-blue-95: #edf3ff /* oklch(96.312% 0.01733 264.49) */;
+  --wa-color-blue-90: #d8e7ff /* oklch(92.413% 0.03649 259.81) */;
+  --wa-color-blue-80: #a9cdfd /* oklch(83.898% 0.07789 255.74) */;
+  --wa-color-blue-70: #88b2e4 /* oklch(75.191% 0.08558 253.21) */;
+  --wa-color-blue-60: #6d98ca /* oklch(66.832% 0.08839 252.8) */;
+  --wa-color-blue-50: #4c78a8 /* oklch(56.163% 0.0895 251.64) */;
+  --wa-color-blue-40: #2e5b89 /* oklch(46.149% 0.09035 250.84) */;
+  --wa-color-blue-30: #1c4772 /* oklch(39.053% 0.08729 251.07) */;
+  --wa-color-blue-20: #02345b /* oklch(31.798% 0.08493 248.65) */;
+  --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-90: #ede1ff /* oklch(92.831% 0.04213 303.7) */;
-  --wa-color-indigo-80: #d3c0ff /* oklch(84.487% 0.08877 298.31) */;
-  --wa-color-indigo-70: #baa1f9 /* oklch(76.409% 0.12586 296.37) */;
-  --wa-color-indigo-60: #9f86e0 /* oklch(67.937% 0.13169 295.47) */;
-  --wa-color-indigo-50: #7f67bd /* oklch(57.508% 0.13016 294.83) */;
-  --wa-color-indigo-40: #624a9e /* oklch(47.598% 0.13133 294.01) */;
-  --wa-color-indigo-30: #4e3589 /* oklch(40.435% 0.13395 293.19) */;
-  --wa-color-indigo-20: #3a2074 /* oklch(33.206% 0.1353 291.46) */;
-  --wa-color-indigo-10: #24045f /* oklch(25.226% 0.1388 287.21) */;
-  --wa-color-indigo-05: #180044 /* oklch(19.806% 0.11332 288.23) */;
+  --wa-color-indigo-95: #f1f1ff /* oklch(96.222% 0.01867 286.04) */;
+  --wa-color-indigo-90: #e2e4ff /* oklch(92.556% 0.03662 282.29) */;
+  --wa-color-indigo-80: #bec7ff /* oklch(84.198% 0.07895 277.45) */;
+  --wa-color-indigo-70: #a1abe9 /* oklch(75.618% 0.0899 276.95) */;
+  --wa-color-indigo-60: #8791d0 /* oklch(67.33% 0.09401 276.64) */;
+  --wa-color-indigo-50: #6871af /* oklch(56.77% 0.09626 276.58) */;
+  --wa-color-indigo-40: #4c5491 /* oklch(46.823% 0.09882 276.24) */;
+  --wa-color-indigo-30: #39417a /* oklch(39.802% 0.09591 275.16) */;
+  --wa-color-indigo-20: #262e62 /* oklch(32.442% 0.09163 273.61) */;
+  --wa-color-indigo-10: #151a3e /* oklch(23.597% 0.06843 274) */;
+  --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-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
-  --wa-color-purple-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
-  --wa-color-purple-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
-  --wa-color-purple-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
-  --wa-color-purple-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
-  --wa-color-purple-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
-  --wa-color-purple-30: #5d366c /* oklch(40.395% 0.09808 316) */;
-  --wa-color-purple-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
-  --wa-color-purple-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
-  --wa-color-purple-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
+  --wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
+  --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
+  --wa-color-purple-80: #d4bfff /* oklch(84.383% 0.09054 299.5) */;
+  --wa-color-purple-70: #b9a4e9 /* oklch(76.164% 0.09954 297.97) */;
+  --wa-color-purple-60: #9f89d0 /* oklch(67.711% 0.10516 297.78) */;
+  --wa-color-purple-50: #7f69b0 /* oklch(57.166% 0.10893 297.1) */;
+  --wa-color-purple-40: #624c92 /* oklch(47.204% 0.11139 296.38) */;
+  --wa-color-purple-30: #4e3a77 /* oklch(40.061% 0.10079 296.72) */;
+  --wa-color-purple-20: #3a2761 /* oklch(32.781% 0.09892 295.54) */;
+  --wa-color-purple-10: #23163e /* oklch(24.121% 0.07355 295.33) */;
+  --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

@@ -1,29 +1,45 @@
+@import url('base.css');
+
 :where(:root),
 :host,
 :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-80: #e8bfb5 /* oklch(83.775% 0.0493 33.987) */;
-  --wa-color-red-70: #dba294 /* oklch(76.229% 0.07115 34.235) */;
-  --wa-color-red-60: #c98373 /* oklch(67.81% 0.09043 33.504) */;
-  --wa-color-red-50: #ae6150 /* oklch(57.709% 0.10386 33.445) */;
-  --wa-color-red-40: #8c4434 /* oklch(47.455% 0.10187 33.787) */;
-  --wa-color-red-30: #713225 /* oklch(40.002% 0.09248 33.14) */;
+  --wa-color-red-90: #f5e1dc /* oklch(92.449% 0.0231 34.298) */;
+  --wa-color-red-80: #e9c1b7 /* oklch(84.299% 0.04808 34.353) */;
+  --wa-color-red-70: #daa193 /* oklch(75.915% 0.07123 34.238) */;
+  --wa-color-red-60: #c48576 /* oklch(67.655% 0.08143 33.955) */;
+  --wa-color-red-50: #a86252 /* oklch(57.121% 0.09478 33.75) */;
+  --wa-color-red-40: #864839 /* oklch(47.352% 0.08833 34.595) */;
+  --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-yellow-90: #ede4d5 /* oklch(92.192% 0.0223 80.684) */;
-  --wa-color-yellow-80: #dac6a4 /* oklch(83.455% 0.05079 80.939) */;
+  --wa-color-orange-95: #f9f2ed /* oklch(96.52% 0.01008 58.217) */;
+  --wa-color-orange-90: #f4e3d6 /* oklch(92.595% 0.02556 59.903) */;
+  --wa-color-orange-80: #e6c3aa /* oklch(84.087% 0.05242 57.474) */;
+  --wa-color-orange-70: #d3a685 /* oklch(75.824% 0.06976 57.703) */;
+  --wa-color-orange-60: #bf8962 /* oklch(67.428% 0.08515 56.553) */;
+  --wa-color-orange-50: #a26839 /* oklch(57.025% 0.09733 58.071) */;
+  --wa-color-orange-40: #824b20 /* oklch(46.959% 0.09366 55.634) */;
+  --wa-color-orange-30: #683a17 /* oklch(39.855% 0.08077 54.814) */;
+  --wa-color-orange-20: #4d2a0e /* oklch(32.469% 0.06563 55.984) */;
+  --wa-color-orange-10: #301705 /* oklch(23.621% 0.04968 54.306) */;
+  --wa-color-orange-05: #1f0e03 /* oklch(18.572% 0.03671 56.067) */;
+  --wa-color-orange: var(--wa-color-orange-50);
+  --wa-color-orange-key: 50;
+
+  --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-50: #94702b /* oklch(56.778% 0.09671 80.65) */;
-  --wa-color-yellow-40: #735310 /* oklch(46.47% 0.08924 80.445) */;
-  --wa-color-yellow-30: #5c4003 /* oklch(39.286% 0.07968 79.822) */;
+  --wa-color-yellow-60: #af905b /* oklch(66.983% 0.07981 80.152) */;
+  --wa-color-yellow-50: #8f703a /* oklch(56.392% 0.08172 79.742) */;
+  --wa-color-yellow-40: #71541d /* oklch(46.546% 0.08061 80.169) */;
+  --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 +62,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-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
-  --wa-color-cyan-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
-  --wa-color-cyan-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
-  --wa-color-cyan-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
-  --wa-color-cyan-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
-  --wa-color-cyan-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
+  --wa-color-cyan-80: #b8cdd1 /* oklch(83.375% 0.02342 210.4) */;
+  --wa-color-cyan-70: #96b4ba /* oklch(74.946% 0.03385 211.12) */;
+  --wa-color-cyan-60: #759ba2 /* oklch(66.386% 0.0429 210.11) */;
+  --wa-color-cyan-50: #4a7d86 /* oklch(55.736% 0.05643 209.98) */;
+  --wa-color-cyan-40: #2f6067 /* oklch(45.783% 0.05405 207.62) */;
+  --wa-color-cyan-30: #1e4c52 /* oklch(38.743% 0.05069 206.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-key: 40;
+  --wa-color-cyan: var(--wa-color-cyan-50);
+  --wa-color-cyan-key: 50;
 
-  --wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
-  --wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
-  --wa-color-blue-80: #bdc9dc /* oklch(83.261% 0.0297 259.59) */;
+  --wa-color-blue-95: #f0f2f6 /* oklch(96.077% 0.00576 264.53) */;
+  --wa-color-blue-90: #e0e5ef /* oklch(92.101% 0.0146 264.5) */;
+  --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-40: #415981 /* oklch(46.262% 0.07185 260.29) */;
+  --wa-color-blue-50: #5c76a0 /* oklch(56.262% 0.07235 259.79) */;
+  --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: var(--wa-color-blue-40);
-  --wa-color-blue-key: 40;
+  --wa-color-blue-05: #081224 /* oklch(18.37% 0.04003 261.12) */;
+  --wa-color-blue: var(--wa-color-blue-50);
+  --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 +107,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-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
+  --wa-color-purple-50: #866a99 /* oklch(56.923% 0.07763 311.15) */;
+  --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-key: 40;
+  --wa-color-purple: var(--wa-color-purple-50);
+  --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

@@ -1,105 +1,135 @@
+@import url('base.css');
+
 :where(:root),
 :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-70: #fb9191 /* oklch(76.892% 0.12835 20.456) */;
-  --wa-color-red-60: #f16b5e /* oklch(68.899% 0.16784 27.833) */;
-  --wa-color-red-50: #da3c06 /* oklch(58.891% 0.20155 35.469) */;
-  --wa-color-red-40: #a62c00 /* oklch(48.117% 0.16441 36.104) */;
-  --wa-color-red-30: #812500 /* oklch(40.578% 0.1326 38.082) */;
-  --wa-color-red-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
-  --wa-color-red-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
-  --wa-color-red-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
+  --wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
+  --wa-color-red-70: #fe8f8a /* oklch(76.793% 0.13503 23.416) */;
+  --wa-color-red-60: #f6665e /* oklch(68.97% 0.17859 26.005) */;
+  --wa-color-red-50: #e32720 /* oklch(58.995% 0.22134 28.631) */;
+  --wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
+  --wa-color-red-30: #910101 /* oklch(41.281% 0.16874 29.146) */;
+  --wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
+  --wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
+  --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
   --wa-color-red: var(--wa-color-red-50);
   --wa-color-red-key: 50;
 
-  --wa-color-yellow-95: #fff497 /* oklch(95.586% 0.11473 102.45) */;
-  --wa-color-yellow-90: #ffe571 /* oklch(92.08% 0.13847 96.881) */;
-  --wa-color-yellow-80: #ffbd31 /* oklch(83.787% 0.16061 80.808) */;
-  --wa-color-yellow-70: #f09d27 /* oklch(76.177% 0.15513 69.241) */;
-  --wa-color-yellow-60: #d67f31 /* oklch(67.745% 0.13973 58.256) */;
-  --wa-color-yellow-50: #b1612d /* oklch(57.606% 0.12242 50.859) */;
-  --wa-color-yellow-40: #8b4527 /* oklch(47.274% 0.1046 42.804) */;
-  --wa-color-yellow-30: #703422 /* oklch(40.129% 0.09009 37.442) */;
-  --wa-color-yellow-20: #53251c /* oklch(32.68% 0.071 32.488) */;
-  --wa-color-yellow-10: #311613 /* oklch(23.859% 0.04441 27.497) */;
-  --wa-color-yellow-05: #1f0d0b /* oklch(18.561% 0.0315 27.209) */;
+  --wa-color-orange-95: #fff1e4 /* oklch(96.567% 0.02297 65.466) */;
+  --wa-color-orange-90: #ffdfc4 /* oklch(92.327% 0.0504 62.301) */;
+  --wa-color-orange-80: #ffbc80 /* oklch(84.418% 0.10871 62.363) */;
+  --wa-color-orange-70: #ff9427 /* oklch(76.467% 0.1689 59.353) */;
+  --wa-color-orange-60: #f16e00 /* oklch(68.563% 0.18516 48.551) */;
+  --wa-color-orange-50: #c75003 /* oklch(58.025% 0.16741 44.08) */;
+  --wa-color-orange-40: #9e3702 /* oklch(47.974% 0.14693 40.809) */;
+  --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
+  --wa-color-orange-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
+  --wa-color-orange-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
+  --wa-color-orange-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
+  --wa-color-orange: var(--wa-color-orange-60);
+  --wa-color-orange-key: 60;
+
+  --wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */;
+  --wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */;
+  --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-90: #b9f4bc /* oklch(91.261% 0.09639 146.02) */;
-  --wa-color-green-80: #64e177 /* oklch(81.419% 0.18348 146.66) */;
-  --wa-color-green-70: #2ec859 /* oklch(73.18% 0.19719 147.79) */;
-  --wa-color-green-60: #00ac4a /* oklch(64.995% 0.18331 149.02) */;
-  --wa-color-green-50: #008840 /* oklch(54.827% 0.14802 150.85) */;
-  --wa-color-green-40: #006734 /* oklch(45.037% 0.11628 152.87) */;
-  --wa-color-green-30: #005128 /* oklch(38.134% 0.09801 153.08) */;
-  --wa-color-green-20: #003b1c /* oklch(30.9% 0.07883 153.44) */;
-  --wa-color-green-10: #00230e /* oklch(22.462% 0.05754 153.24) */;
-  --wa-color-green-05: #001607 /* oklch(17.557% 0.04482 153.41) */;
-  --wa-color-green: var(--wa-color-green-70);
-  --wa-color-green-key: 70;
+  --wa-color-green-95: #d3fece /* oklch(95.448% 0.0775 142.18) */;
+  --wa-color-green-90: #a3fb9e /* oklch(91.005% 0.15051 143.02) */;
+  --wa-color-green-80: #55e557 /* oklch(81.532% 0.22113 143.41) */;
+  --wa-color-green-70: #35c83d /* oklch(73.012% 0.21608 143.61) */;
+  --wa-color-green-60: #21ac2c /* oklch(64.997% 0.20039 143.64) */;
+  --wa-color-green-50: #0f881d /* oklch(54.57% 0.17259 143.76) */;
+  --wa-color-green-40: #016810 /* oklch(44.912% 0.14592 143.81) */;
+  --wa-color-green-30: #005207 /* oklch(38.047% 0.12561 143.42) */;
+  --wa-color-green-20: #003c03 /* oklch(30.89% 0.10259 143.24) */;
+  --wa-color-green-10: #002401 /* oklch(22.574% 0.07524 143.13) */;
+  --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: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
-  --wa-color-cyan-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
-  --wa-color-cyan-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
-  --wa-color-cyan-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
-  --wa-color-cyan-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
-  --wa-color-cyan-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
-  --wa-color-cyan-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
-  --wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
-  --wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
-  --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
-  --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
-  --wa-color-cyan: var(--wa-color-cyan-70);
-  --wa-color-cyan-key: 70;
+  --wa-color-cyan-95: #bffdfd /* oklch(95.254% 0.06191 196.16) */;
+  --wa-color-cyan-90: #87f8f6 /* oklch(91.191% 0.10384 193.98) */;
+  --wa-color-cyan-80: #11e0e1 /* oklch(82.2% 0.13867 195.37) */;
+  --wa-color-cyan-70: #00c1cc /* oklch(73.822% 0.12561 202.07) */;
+  --wa-color-cyan-60: #00a4b6 /* oklch(65.766% 0.11321 208.52) */;
+  --wa-color-cyan-50: #008098 /* oklch(55.318% 0.09882 217.04) */;
+  --wa-color-cyan-40: #016177 /* oklch(45.597% 0.08301 220.49) */;
+  --wa-color-cyan-30: #014c5f /* oklch(38.623% 0.07093 221.97) */;
+  --wa-color-cyan-20: #003746 /* oklch(31.239% 0.05795 222.52) */;
+  --wa-color-cyan-10: #00212c /* oklch(23.027% 0.04335 224.27) */;
+  --wa-color-cyan-05: #00141c /* oklch(17.778% 0.0335 224.39) */;
+  --wa-color-cyan: var(--wa-color-cyan-80);
+  --wa-color-cyan-key: 80;
 
-  --wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
-  --wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
-  --wa-color-blue-80: #87d1ff /* oklch(82.911% 0.09817 236.93) */;
-  --wa-color-blue-70: #4cb8ff /* oklch(75.061% 0.14167 241.25) */;
-  --wa-color-blue-60: #09f /* oklch(66.905% 0.18368 248.81) */;
-  --wa-color-blue-50: #0072ed /* oklch(57.257% 0.20469 257.18) */;
-  --wa-color-blue-40: #0053be /* oklch(47.006% 0.18201 258.98) */;
-  --wa-color-blue-30: #00409b /* oklch(39.927% 0.15956 259.61) */;
-  --wa-color-blue-20: #002e76 /* oklch(32.56% 0.13217 259.91) */;
-  --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
-  --wa-color-blue-05: #000f36 /* oklch(18.68% 0.08063 260.98) */;
+  --wa-color-blue-95: #e5f6fe /* oklch(96.294% 0.02094 227.52) */;
+  --wa-color-blue-90: #c5ebff /* oklch(91.932% 0.04809 230.9) */;
+  --wa-color-blue-80: #8bd2ff /* oklch(83.326% 0.09527 237.31) */;
+  --wa-color-blue-70: #55b6ff /* oklch(74.905% 0.13947 244.06) */;
+  --wa-color-blue-60: #2a97ff /* oklch(66.922% 0.18057 251.94) */;
+  --wa-color-blue-50: #146bff /* oklch(57.485% 0.23344 261.04) */;
+  --wa-color-blue-40: #0e48de /* oklch(48.043% 0.23341 263.63) */;
+  --wa-color-blue-30: #0038b0 /* oklch(40.387% 0.19651 262.63) */;
+  --wa-color-blue-20: #002887 /* oklch(33.083% 0.16285 262.76) */;
+  --wa-color-blue-10: #001658 /* oklch(24.241% 0.12149 262.95) */;
+  --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-90: #e7e3ff /* oklch(92.744% 0.03793 292.2) */;
-  --wa-color-indigo-80: #cbc1ff /* oklch(84.027% 0.08632 291.82) */;
-  --wa-color-indigo-70: #b3a3ff /* oklch(76.472% 0.13034 290.97) */;
-  --wa-color-indigo-60: #9b81ff /* oklch(68.426% 0.17995 290.32) */;
-  --wa-color-indigo-50: #7f56f9 /* oklch(58.841% 0.22979 288.88) */;
-  --wa-color-indigo-40: #6427e7 /* oklch(49.439% 0.25627 286.93) */;
-  --wa-color-indigo-30: #5102ca /* oklch(42.528% 0.24562 286.08) */;
-  --wa-color-indigo-20: #3a009b /* oklch(34.649% 0.20256 284.92) */;
-  --wa-color-indigo-10: #220064 /* oklch(25.227% 0.14791 284.49) */;
-  --wa-color-indigo-05: #160046 /* oklch(19.835% 0.11578 285.15) */;
+  --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
+  --wa-color-indigo-90: #e1e4ff /* oklch(92.481% 0.03674 280.62) */;
+  --wa-color-indigo-80: #c0c6ff /* oklch(84.148% 0.07987 279.84) */;
+  --wa-color-indigo-70: #a2a7ff /* oklch(75.911% 0.12582 280.46) */;
+  --wa-color-indigo-60: #8a87ff /* oklch(68.133% 0.17285 281.91) */;
+  --wa-color-indigo-50: #6f5aff /* oklch(58.566% 0.23371 282.19) */;
+  --wa-color-indigo-40: #5823f7 /* oklch(49.739% 0.27634 280.94) */;
+  --wa-color-indigo-30: #4600d4 /* oklch(42.607% 0.25731 280.24) */;
+  --wa-color-indigo-20: #3200a1 /* oklch(34.632% 0.20991 279.75) */;
+  --wa-color-indigo-10: #1d0069 /* oklch(25.391% 0.1543 279.39) */;
+  --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-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
-  --wa-color-purple-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
-  --wa-color-purple-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
-  --wa-color-purple-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
-  --wa-color-purple-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
-  --wa-color-purple-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
-  --wa-color-purple-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
-  --wa-color-purple-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
-  --wa-color-purple-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
-  --wa-color-purple-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
+  --wa-color-purple-95: #f9f0ff /* oklch(96.646% 0.02199 312.19) */;
+  --wa-color-purple-90: #f2dfff /* oklch(92.855% 0.04724 311.73) */;
+  --wa-color-purple-80: #e5b9fe /* oklch(84.736% 0.10475 313.02) */;
+  --wa-color-purple-70: #d794fc /* oklch(77.031% 0.15876 312.74) */;
+  --wa-color-purple-60: #c86df6 /* oklch(69.308% 0.20786 312.9) */;
+  --wa-color-purple-50: #b334e8 /* oklch(59.685% 0.25757 313.29) */;
+  --wa-color-purple-40: #9200c2 /* oklch(49.816% 0.24738 313.46) */;
+  --wa-color-purple-30: #720a97 /* oklch(41.936% 0.20122 313.63) */;
+  --wa-color-purple-20: #550373 /* oklch(34.13% 0.16667 313.17) */;
+  --wa-color-purple-10: #350149 /* oklch(24.929% 0.12192 313.39) */;
+  --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) */;