Preview theme with different palettes

docs/_includes/palette.njk

@@ -0,0 +1,41 @@
+<div class="color-palette">
+  <template shadowrootmode="open">
+    <link href="/assets/styles/docs.css" rel="stylesheet" />
+    <link id="theme" href="/dist/styles/themes/{{ themeId }}.css" rel="stylesheet" />
+    <link id="palette" href="/dist/styles/color/{{ palette }}.css" rel="stylesheet" />
+    <ul class="color-group">
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div>
+      </li>
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div>
+      </li>
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div>
+      </li>
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div>
+      </li>
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div>
+      </li>
+    </ul>
+    <ul class="color-group">
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div>
+      </li>
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div>
+      </li>
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div>
+      </li>
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div>
+      </li>
+      <li class="color-preview">
+        <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div>
+      </li>
+    </ul>
+  </template>
+</div>

docs/_layouts/theme.njk

@@ -4,8 +4,25 @@
 
 {% extends '../_includes/base.njk' %}
 
+{% set themeId = page.fileSlug %}
+{% set palette = defaultPalette %}
+{% set palettes = ['default', 'classic', 'rudimentary', 'bright', 'anodized', 'elegant', 'vogue'] %}
+
 {% block header %}
-<iframe src='{{ page.url }}demo.html'></iframe>
+
+<iframe id="theme-demo" src='{{ page.url }}demo.html'></iframe>
+
+<p>
+  <wa-select label="Color palette:" value="{{ defaultPalette }}" id="palette-picker">
+  {% for p in palettes -%}
+    <wa-option value="{{ p }}">{{ p | capitalize }}</wa-option>
+  {%- endfor %}
+  </wa-select>
+  <script type="module" src="/docs/themes/palette-picker.js"></script>
+</p>
+{% include 'palette.njk' %}
+
+<br>
 {% endblock %}
 
 {% block afterContent %}

docs/assets/styles/docs.css

@@ -384,7 +384,8 @@ wa-page > main:has(> .index-grid) {
 .swatch {
   position: relative;
   background-color: transparent;
-  border-color: var(--wa-color-neutral-border-normal);
+  /* border-color: var(--wa-color-neutral-border-normal); */
+  border-color: transparent;
   border-style: var(--wa-border-style);
   border-width: var(--wa-border-width-s);
   border-radius: var(--wa-border-radius-m);
@@ -421,6 +422,35 @@ wa-page > main:has(> .index-grid) {
   }
 }
 
+.color-name {
+  font-weight: var(--wa-font-weight-semibold);
+  margin-block-end: var(--wa-space-2xs);
+}
+
+.color-group {
+  align-items: start;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.25em;
+
+  &:where(ul) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  + * {
+    margin-block-start: var(--wa-space-xl);
+  }
+
+  + & {
+    margin-block-start: var(--wa-space-2xs);
+  }
+}
+.color-preview {
+  flex: 1 1 auto;
+}
+
 /* Layout Examples */
 .layout-example-boundary {
   border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);

docs/docs/themes/demo.njk

@@ -17,7 +17,7 @@ eleventyComputed:
   document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
 </script>
 
-<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
+<link id="theme" rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
 <link rel="stylesheet" href="/docs/themes/showcase.css" />
 
 {% set content %}

docs/docs/themes/palette-picker.js

@@ -0,0 +1,18 @@
+let palettePicker = document.getElementById('palette-picker');
+let paletteDisplay = palettePicker.parentNode.nextElementSibling;
+let themeDemo = document.getElementById('theme-demo');
+
+palettePicker.addEventListener('wa-change', function () {
+  let palette = palettePicker.value;
+  let paletteStylesheet = paletteDisplay.shadowRoot.getElementById('palette');
+  paletteStylesheet.href = paletteStylesheet.href.replace(/[a-z-]+.css/, palette + '.css');
+  let demoPaletteStylesheet = themeDemo.contentDocument.getElementById('palette');
+  let paletteUrl = `/dist/styles/color/${palette}.css`;
+
+  if (demoPaletteStylesheet) {
+    demoPaletteStylesheet.href = paletteUrl;
+  } else {
+    let themeStylesheet = themeDemo.contentDocument.getElementById('theme');
+    themeStylesheet.insertAdjacentHTML('afterend', `<link id="palette" rel="stylesheet" href="${paletteUrl}">`);
+  }
+});

docs/docs/tokens/color.md

@@ -6,30 +6,6 @@ description: Ensure consistent use of color and readable contrast with Web Aweso
 <style>
   td { vertical-align: middle; }
 
-  .color-name {
-    font-weight: var(--wa-font-weight-semibold);
-    margin-block-end: var(--wa-space-2xs);
-  }
-  ul.color-group {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .color-group {
-    align-items: start;
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 0.25em;
-  }
-  .color-group + * {
-    margin-block-start: var(--wa-space-xl);
-  }
-  .color-preview {
-    flex: 1 1 auto;
-  }
-  .swatch {
-    border-color: transparent;
-  }
   .color-mix-example {
     background-image:
       linear-gradient(to right,