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,
@@ -66,12 +42,10 @@ Lightness values on this scale have a strong correlation to [relative luminance]
 
 Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
 
-{% set hues = ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] %}
-{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
-{% for hue in hues -%}
+{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
 <div class="color-name">{{ hue | capitalize }}</div>
 <ul class="color-group">
-  {% for tint in tints -%}
+  {% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
     <li class="color-preview">
       <div class="swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})"></div>
       <small>{{ tint }}</small>
@@ -80,18 +54,6 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
 </ul>
 {%- endfor %}
 
-You can also omit the lightness value to get the brightest, most intense color for each hue:
-
-<div class="color-name">Accent colors</div>
-<ul class="color-group">
-  {% for hue in hues -%}
-    <li class="color-preview">
-      <div class="swatch" style="background-color: var(--wa-color-{{ hue }})"></div>
-      <small>{{ hue }}</small>
-    </li>
-  {%- endfor %}
-</ul>
-
 ## Foundational Colors
 
 Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.

src/styles/color/anodized.css

@@ -11,7 +11,6 @@
   --wa-color-red-20: #562317;
   --wa-color-red-10: #36130a;
   --wa-color-red-05: #240a05;
-  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fff2b8;
   --wa-color-yellow-90: #ffe578;
@@ -24,7 +23,6 @@
   --wa-color-yellow-20: #482b21;
   --wa-color-yellow-10: #2c1912;
   --wa-color-yellow-05: #1d0e0a;
-  --wa-color-yellow: var(--wa-color-yellow-90);
 
   --wa-color-green-95: #dcf8ea;
   --wa-color-green-90: #bcf1d8;
@@ -37,7 +35,6 @@
   --wa-color-green-20: #003a2d;
   --wa-color-green-10: #00231b;
   --wa-color-green-05: #001610;
-  --wa-color-green: var(--wa-color-green-60);
 
   --wa-color-teal-95: #cbfaf9;
   --wa-color-teal-90: #9ff4f3;
@@ -50,7 +47,6 @@
   --wa-color-teal-20: #083936;
   --wa-color-teal-10: #04221f;
   --wa-color-teal-05: #021513;
-  --wa-color-teal: var(--wa-color-teal-80);
 
   --wa-color-blue-95: #ecf3ff;
   --wa-color-blue-90: #d9e7ff;
@@ -63,7 +59,6 @@
   --wa-color-blue-20: #1b325b;
   --wa-color-blue-10: #101d35;
   --wa-color-blue-05: #0a1222;
-  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #f5efff;
   --wa-color-indigo-90: #ede0ff;
@@ -76,7 +71,6 @@
   --wa-color-indigo-20: #381d7f;
   --wa-color-indigo-10: #210e53;
   --wa-color-indigo-05: #150739;
-  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #fbedfd;
   --wa-color-violet-90: #f7defa;
@@ -89,7 +83,6 @@
   --wa-color-violet-20: #561658;
   --wa-color-violet-10: #340d36;
   --wa-color-violet-05: #210822;
-  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e2e5e8;
@@ -102,5 +95,4 @@
   --wa-color-gray-20: #18354a;
   --wa-color-gray-10: #012034;
   --wa-color-gray-05: #001421;
-  --wa-color-gray: var(--wa-color-gray-10);
 }

src/styles/color/bright.css

@@ -11,7 +11,6 @@
   --wa-color-red-20: #6d0000;
   --wa-color-red-10: #450000;
   --wa-color-red-05: #300000;
-  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef3c1;
   --wa-color-yellow-90: #fee682;
@@ -24,7 +23,6 @@
   --wa-color-yellow-20: #532600;
   --wa-color-yellow-10: #341500;
   --wa-color-yellow-05: #220c00;
-  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #e0fae4;
   --wa-color-green-90: #baf4c2;
@@ -37,7 +35,6 @@
   --wa-color-green-20: #123a1a;
   --wa-color-green-10: #0b2210;
   --wa-color-green-05: #07150a;
-  --wa-color-green: var(--wa-color-green-70);
 
   --wa-color-teal-95: #cafae6;
   --wa-color-teal-90: #aaf3d7;
@@ -50,7 +47,6 @@
   --wa-color-teal-20: #00483d;
   --wa-color-teal-10: #00312b;
   --wa-color-teal-05: #001613;
-  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e7f5ff;
   --wa-color-blue-90: #ceeaff;
@@ -63,7 +59,6 @@
   --wa-color-blue-20: #0d3459;
   --wa-color-blue-10: #071f35;
   --wa-color-blue-05: #051321;
-  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #edf2ff;
   --wa-color-indigo-90: #dce5ff;
@@ -76,7 +71,6 @@
   --wa-color-indigo-20: #1e2c70;
   --wa-color-indigo-10: #121a43;
   --wa-color-indigo-05: #0b102a;
-  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #f3f0ff;
   --wa-color-violet-90: #eae2ff;
@@ -89,7 +83,6 @@
   --wa-color-violet-20: #372372;
   --wa-color-violet-10: #211544;
   --wa-color-violet-05: #150d2a;
-  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e3e5ea;
@@ -102,5 +95,4 @@
   --wa-color-gray-20: #1a3356;
   --wa-color-gray-10: #0e1e35;
   --wa-color-gray-05: #081220;
-  --wa-color-gray: var(--wa-color-gray-20);
 }

src/styles/color/classic.css

@@ -11,7 +11,6 @@
   --wa-color-red-20: #631111;
   --wa-color-red-10: #3b0d0d;
   --wa-color-red-05: #260606;
-  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef2c4;
   --wa-color-yellow-90: #fde494;
@@ -24,7 +23,6 @@
   --wa-color-yellow-20: #532408;
   --wa-color-yellow-10: #321606;
   --wa-color-yellow-05: #1f0c01;
-  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #e9f5ed;
   --wa-color-green-90: #cfedd9;
@@ -37,7 +35,6 @@
   --wa-color-green-20: #0c391d;
   --wa-color-green-10: #082213;
   --wa-color-green-05: #02140a;
-  --wa-color-green: var(--wa-color-green-60);
 
   --wa-color-teal-95: #d0fbf3;
   --wa-color-teal-90: #a9f4e8;
@@ -50,7 +47,6 @@
   --wa-color-teal-20: #0a3835;
   --wa-color-teal-10: #082120;
   --wa-color-teal-05: #021413;
-  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e5f4fe;
   --wa-color-blue-90: #c8ebfd;
@@ -63,7 +59,6 @@
   --wa-color-blue-20: #04354f;
   --wa-color-blue-10: #05202f;
   --wa-color-blue-05: #04121b;
-  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #eef2ff;
   --wa-color-indigo-90: #dee5fd;
@@ -76,7 +71,6 @@
   --wa-color-indigo-20: #29247a;
   --wa-color-indigo-10: #191843;
   --wa-color-indigo-05: #0f0e26;
-  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f7efff;
   --wa-color-violet-90: #efe0ff;
@@ -89,7 +83,6 @@
   --wa-color-violet-20: #48176e;
   --wa-color-violet-10: #2e054e;
   --wa-color-violet-05: #1d0331;
-  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f2f2f3;
   --wa-color-gray-90: #e5e5e8;
@@ -102,5 +95,4 @@
   --wa-color-gray-20: #313134;
   --wa-color-gray-10: #1d1d20;
   --wa-color-gray-05: #101113;
-  --wa-color-gray: var(--wa-color-gray-40);
 }

src/styles/color/default.css

@@ -19,7 +19,6 @@
   --wa-color-red-20: #641122;
   --wa-color-red-10: #400712;
   --wa-color-red-05: #2a030a;
-  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fdf3ba;
   --wa-color-yellow-90: #fee590;
@@ -32,7 +31,6 @@
   --wa-color-yellow-20: #572300;
   --wa-color-yellow-10: #361300;
   --wa-color-yellow-05: #240b00;
-  --wa-color-yellow: var(--wa-color-yellow-70);
 
   --wa-color-green-95: #e2f9e2;
   --wa-color-green-90: #c2f2c1;
@@ -45,7 +43,6 @@
   --wa-color-green-20: #003c00;
   --wa-color-green-10: #002400;
   --wa-color-green-05: #001700;
-  --wa-color-green: var(--wa-color-green-60);
 
   --wa-color-teal-95: #e3f7f5;
   --wa-color-teal-90: #c6eeeb;
@@ -58,7 +55,6 @@
   --wa-color-teal-20: #003935;
   --wa-color-teal-10: #002220;
   --wa-color-teal-05: #001513;
-  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #ebf4ff;
   --wa-color-blue-90: #d4e7ff;
@@ -71,7 +67,6 @@
   --wa-color-blue-20: #00306c;
   --wa-color-blue-10: #001c45;
   --wa-color-blue-05: #00112f;
-  --wa-color-blue: var(--wa-color-blue-50);
 
   --wa-color-indigo-95: #f0f2fe;
   --wa-color-indigo-90: #e2e4fc;
@@ -84,7 +79,6 @@
   --wa-color-indigo-20: #321393;
   --wa-color-indigo-10: #1c006a;
   --wa-color-indigo-05: #130049;
-  --wa-color-indigo: var(--wa-color-indigo-30);
 
   --wa-color-violet-95: #f9effd;
   --wa-color-violet-90: #f4defb;
@@ -97,7 +91,6 @@
   --wa-color-violet-20: #521564;
   --wa-color-violet-10: #330940;
   --wa-color-violet-05: #22042b;
-  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f3;
   --wa-color-gray-90: #e4e5e9;
@@ -110,5 +103,4 @@
   --wa-color-gray-20: #2f323f;
   --wa-color-gray-10: #1b1d26;
   --wa-color-gray-05: #101219;
-  --wa-color-gray: var(--wa-color-gray-40);
 }

src/styles/color/elegant.css

@@ -11,7 +11,6 @@
   --wa-color-red-20: #6b001c;
   --wa-color-red-10: #44000d;
   --wa-color-red-05: #2e0006;
-  --wa-color-red: var(--wa-color-red-40);
 
   --wa-color-yellow-95: #f5f2e5;
   --wa-color-yellow-90: #ece6cc;
@@ -24,7 +23,6 @@
   --wa-color-yellow-20: #492c05;
   --wa-color-yellow-10: #2b1a02;
   --wa-color-yellow-05: #191008;
-  --wa-color-yellow: var(--wa-color-yellow-60);
 
   --wa-color-green-95: #ecf4f1;
   --wa-color-green-90: #dae9e3;
@@ -37,7 +35,6 @@
   --wa-color-green-20: #003b24;
   --wa-color-green-10: #002316;
   --wa-color-green-05: #00160d;
-  --wa-color-green: var(--wa-color-green-40);
 
   --wa-color-teal-95: #ebf4f4;
   --wa-color-teal-90: #d9e9e9;
@@ -50,7 +47,6 @@
   --wa-color-teal-20: #00393b;
   --wa-color-teal-10: #002223;
   --wa-color-teal-05: #001415;
-  --wa-color-teal: var(--wa-color-teal-50);
 
   --wa-color-blue-95: #ebf3fa;
   --wa-color-blue-90: #d8e8f5;
@@ -63,7 +59,6 @@
   --wa-color-blue-20: #00345d;
   --wa-color-blue-10: #001f37;
   --wa-color-blue-05: #001221;
-  --wa-color-blue: var(--wa-color-blue-50);
 
   --wa-color-indigo-95: #f1f1fa;
   --wa-color-indigo-90: #e4e4f6;
@@ -76,7 +71,6 @@
   --wa-color-indigo-20: #272972;
   --wa-color-indigo-10: #171844;
   --wa-color-indigo-05: #0d0e27;
-  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f6f0f9;
   --wa-color-violet-90: #eee2f2;
@@ -89,7 +83,6 @@
   --wa-color-violet-20: #501862;
   --wa-color-violet-10: #300e3b;
   --wa-color-violet-05: #1c0823;
-  --wa-color-violet: var(--wa-color-violet-40);
 
   --wa-color-gray-95: #f2f2f3;
   --wa-color-gray-90: #e6e5e8;
@@ -102,5 +95,4 @@
   --wa-color-gray-20: #35313c;
   --wa-color-gray-10: #1f1c23;
   --wa-color-gray-05: #131115;
-  --wa-color-gray: var(--wa-color-gray-40);
 }

src/styles/color/natural.css

@@ -11,7 +11,6 @@
   --wa-color-red-20: #562318;
   --wa-color-red-10: #36130b;
   --wa-color-red-05: #240a05;
-  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #f5f0e8;
   --wa-color-yellow-90: #ede4d5;
@@ -24,7 +23,6 @@
   --wa-color-yellow-20: #442f00;
   --wa-color-yellow-10: #2a1b00;
   --wa-color-yellow-05: #1b1000;
-  --wa-color-yellow: var(--wa-color-yellow-50);
 
   --wa-color-green-95: #edf2ee;
   --wa-color-green-90: #dde8df;
@@ -37,7 +35,6 @@
   --wa-color-green-20: #193922;
   --wa-color-green-10: #0c2212;
   --wa-color-green-05: #051509;
-  --wa-color-green: var(--wa-color-green-50);
 
   --wa-color-teal-95: #eff3f4;
   --wa-color-teal-90: #dee7e9;
@@ -50,7 +47,6 @@
   --wa-color-teal-20: #0a383e;
   --wa-color-teal-10: #022125;
   --wa-color-teal-05: #011518;
-  --wa-color-teal: var(--wa-color-teal-40);
 
   --wa-color-blue-95: #eef1f5;
   --wa-color-blue-90: #e1e6ef;
@@ -63,7 +59,6 @@
   --wa-color-blue-20: #203351;
   --wa-color-blue-10: #101e34;
   --wa-color-blue-05: #081223;
-  --wa-color-blue: var(--wa-color-blue-40);
 
   --wa-color-indigo-95: #f2f2f7;
   --wa-color-indigo-90: #e6e5f1;
@@ -76,7 +71,6 @@
   --wa-color-indigo-20: #332e50;
   --wa-color-indigo-10: #1e1a32;
   --wa-color-indigo-05: #121021;
-  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #f4f1f6;
   --wa-color-violet-90: #eae4ef;
@@ -89,7 +83,6 @@
   --wa-color-violet-20: #3e2b4b;
   --wa-color-violet-10: #26182f;
   --wa-color-violet-05: #180e1f;
-  --wa-color-violet: var(--wa-color-violet-40);
 
   --wa-color-gray-95: #f1f1f0;
   --wa-color-gray-90: #e7e6e4;
@@ -102,5 +95,4 @@
   --wa-color-gray-20: #35322d;
   --wa-color-gray-10: #1f1d1a;
   --wa-color-gray-05: #131210;
-  --wa-color-gray: var(--wa-color-gray-50);
 }

src/styles/color/rudimentary.css

@@ -11,7 +11,6 @@
   --wa-color-red-20: #601a00;
   --wa-color-red-10: #3d0d00;
   --wa-color-red-05: #290600;
-  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fff497;
   --wa-color-yellow-90: #ffe571;
@@ -24,7 +23,6 @@
   --wa-color-yellow-20: #53251c;
   --wa-color-yellow-10: #311613;
   --wa-color-yellow-05: #1f0d0b;
-  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #dafadc;
   --wa-color-green-90: #b9f4bc;
@@ -37,7 +35,6 @@
   --wa-color-green-20: #003b1c;
   --wa-color-green-10: #00230e;
   --wa-color-green-05: #001607;
-  --wa-color-green: var(--wa-color-green-80);
 
   --wa-color-teal-95: #d1f9f1;
   --wa-color-teal-90: #a9f4e6;
@@ -50,7 +47,6 @@
   --wa-color-teal-20: #003843;
   --wa-color-teal-10: #002129;
   --wa-color-teal-05: #00151b;
-  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e1f4ff;
   --wa-color-blue-90: #caebff;
@@ -63,7 +59,6 @@
   --wa-color-blue-20: #002e76;
   --wa-color-blue-10: #001a4e;
   --wa-color-blue-05: #000f36;
-  --wa-color-blue: var(--wa-color-blue-50);
 
   --wa-color-indigo-95: #f1efff;
   --wa-color-indigo-90: #e7e3ff;
@@ -76,7 +71,6 @@
   --wa-color-indigo-20: #3a009b;
   --wa-color-indigo-10: #220064;
   --wa-color-indigo-05: #160046;
-  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f8edfd;
   --wa-color-violet-90: #f2e0fc;
@@ -89,7 +83,6 @@
   --wa-color-violet-20: #4f1568;
   --wa-color-violet-10: #310a42;
   --wa-color-violet-05: #20052d;
-  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f2f2f2;
   --wa-color-gray-90: #e6e6e6;
@@ -102,5 +95,4 @@
   --wa-color-gray-20: #313131;
   --wa-color-gray-10: #1d1d1d;
   --wa-color-gray-05: #131313;
-  --wa-color-gray: var(--wa-color-gray-95);
 }

src/styles/color/vogue.css

@@ -11,7 +11,6 @@
   --wa-color-red-20: #641414;
   --wa-color-red-10: #400809;
   --wa-color-red-05: #2b0404;
-  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef6ab;
   --wa-color-yellow-90: #ffe759;
@@ -24,7 +23,6 @@
   --wa-color-yellow-20: #502809;
   --wa-color-yellow-10: #311704;
   --wa-color-yellow-05: #1f0e02;
-  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #d6fbe3;
   --wa-color-green-90: #acf5c6;
@@ -37,7 +35,6 @@
   --wa-color-green-20: #093a1d;
   --wa-color-green-10: #032311;
   --wa-color-green-05: #02160a;
-  --wa-color-green: var(--wa-color-green-70);
 
   --wa-color-teal-95: #d1fbf2;
   --wa-color-teal-90: #9bf6e4;
@@ -50,7 +47,6 @@
   --wa-color-teal-20: #073938;
   --wa-color-teal-10: #022222;
   --wa-color-teal-05: #011515;
-  --wa-color-teal: var(--wa-color-teal-80);
 
   --wa-color-blue-95: #ebf3ff;
   --wa-color-blue-90: #d6e7fe;
@@ -63,7 +59,6 @@
   --wa-color-blue-20: #1c2e69;
   --wa-color-blue-10: #101b41;
   --wa-color-blue-05: #09102c;
-  --wa-color-blue: var(--wa-color-blue-40);
 
   --wa-color-indigo-95: #eef2ff;
   --wa-color-indigo-90: #dde5ff;
@@ -76,7 +71,6 @@
   --wa-color-indigo-20: #2b2871;
   --wa-color-indigo-10: #1b1842;
   --wa-color-indigo-05: #100f29;
-  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f7efff;
   --wa-color-violet-90: #efe0ff;
@@ -89,7 +83,6 @@
   --wa-color-violet-20: #4b1079;
   --wa-color-violet-10: #2f0451;
   --wa-color-violet-05: #1e0238;
-  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e3e5e9;
@@ -102,5 +95,4 @@
   --wa-color-gray-20: #293342;
   --wa-color-gray-10: #161e2d;
   --wa-color-gray-05: #0c1220;
-  --wa-color-gray: var(--wa-color-gray-10);
 }

src/styles/themes/active.css

@@ -33,7 +33,7 @@
    */
   --wa-color-brand-fill-quiet: var(--wa-color-green-95);
   --wa-color-brand-fill-normal: var(--wa-color-green-90);
-  --wa-color-brand-fill-loud: var(--wa-color-green);
+  --wa-color-brand-fill-loud: var(--wa-color-green-80);
   --wa-color-brand-border-quiet: var(--wa-color-green-90);
   --wa-color-brand-border-normal: var(--wa-color-green-80);
   --wa-color-brand-border-loud: var(--wa-color-green-70);
@@ -43,7 +43,7 @@
 
   --wa-color-success-fill-quiet: var(--wa-color-green-95);
   --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green);
+  --wa-color-success-fill-loud: var(--wa-color-green-80);
   --wa-color-success-border-quiet: var(--wa-color-green-90);
   --wa-color-success-border-normal: var(--wa-color-green-80);
   --wa-color-success-border-loud: var(--wa-color-green-70);
@@ -53,7 +53,7 @@
 
   --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
   --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
   --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
   --wa-color-warning-border-normal: var(--wa-color-yellow-80);
   --wa-color-warning-border-loud: var(--wa-color-yellow-70);

src/styles/themes/awesome.css

@@ -47,7 +47,7 @@
 
   --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
   --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
   --wa-color-warning-border-quiet: var(--wa-color-yellow-70);
   --wa-color-warning-border-normal: var(--wa-color-yellow-50);
   --wa-color-warning-border-loud: var(--wa-color-yellow-30);

src/styles/themes/tailspin.css

@@ -34,7 +34,7 @@
    */
   --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-95) 85%, transparent);
   --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
   --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-80), transparent);
   --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-70) 60%, transparent);
   --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-60) 70%, transparent);