Rename violet to purple, fixes #656

lindsaym-fa · LeaVerou · commit f7e088c8dfdd · 2025-02-03T18:47:03.000-05:00
diff --git a/docs/_data/hues.json b/docs/_data/hues.json
@@ -1 +1 @@
-["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
+["red", "yellow", "green", "teal", "blue", "indigo", "purple", "gray"]
diff --git a/docs/_includes/svgs/tokens/color.njk b/docs/_includes/svgs/tokens/color.njk
@@ -2,7 +2,7 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-purple-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
 </svg>
diff --git a/docs/docs/components/page/demo-page.css b/docs/docs/components/page/demo-page.css
@@ -52,8 +52,8 @@ wa-page {
   }
 
   &[slot^='navigation'] {
-    background: var(--wa-color-violet-80);
-    color: var(--wa-color-violet-20);
+    background: var(--wa-color-purple-80);
+    color: var(--wa-color-purple-20);
   }
 
   strong {
diff --git a/docs/docs/customizing.md b/docs/docs/customizing.md
@@ -16,21 +16,21 @@ To use a theme, simply add a link to the theme's stylesheet to the `<head>` of y
 <link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
 ```
 
-You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to violet in light mode:
+You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
 
 ```css
 :where(:root),
 :host,
 .wa-light,
 .wa-dark .wa-invert {
-  --wa-color-brand-fill-quiet: var(--wa-color-violet-95);
-  --wa-color-brand-fill-normal: var(--wa-color-violet-90);
-  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
-  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
-  --wa-color-brand-border-normal: var(--wa-color-violet-80);
-  --wa-color-brand-border-loud: var(--wa-color-violet-60);
-  --wa-color-brand-on-quiet: var(--wa-color-violet-40);
-  --wa-color-brand-on-normal: var(--wa-color-violet-30);
+  --wa-color-brand-fill-quiet: var(--wa-color-purple-95);
+  --wa-color-brand-fill-normal: var(--wa-color-purple-90);
+  --wa-color-brand-fill-loud: var(--wa-color-purple-50);
+  --wa-color-brand-border-quiet: var(--wa-color-purple-90);
+  --wa-color-brand-border-normal: var(--wa-color-purple-80);
+  --wa-color-brand-border-loud: var(--wa-color-purple-60);
+  --wa-color-brand-on-quiet: var(--wa-color-purple-40);
+  --wa-color-brand-on-normal: var(--wa-color-purple-30);
   --wa-color-brand-on-loud: white;
 }
 ```
@@ -99,8 +99,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
 
 <style>
   .gradient-button::part(base) {
-    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-violet-50), var(--wa-color-red-50));
-    border: solid 1px var(--wa-color-violet-50);
+    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
+    border: solid 1px var(--wa-color-purple-50);
     transition: transform 100ms, box-shadow 100ms;
   }
 
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
@@ -579,7 +579,7 @@ hasOutline: false
       <wa-radio value="teal"><span style="background-color:var(--wa-color-teal-60);"></span></wa-radio>
       <wa-radio value="blue"><span style="background-color:var(--wa-color-blue-60);"></span></wa-radio>
       <wa-radio value="indigo"><span style="background-color:var(--wa-color-indigo-60);"></span></wa-radio>
-      <wa-radio value="violet"><span style="background-color:var(--wa-color-violet-60);"></span></wa-radio>
+      <wa-radio value="purple"><span style="background-color:var(--wa-color-purple-60);"></span></wa-radio>
       <wa-radio value="gray"><span style="background-color:var(--wa-color-gray-60);"></span></wa-radio>
     </wa-radio-group>
   </wa-details>
diff --git a/docs/docs/tokens/color.md b/docs/docs/tokens/color.md
@@ -66,7 +66,7 @@ You can use these numbers to ensure accessible color contrast per [WCAG 2.1 succ
 
 Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
 
-{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
+{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "purple", "gray"] -%}
 <div class="color-name">{{ hue | capitalize }}</div>
 <ul class="color-group">
   {% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
diff --git a/src/styles/brand/purple.css b/src/styles/brand/purple.css
@@ -0,0 +1,17 @@
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+:where([class^='wa-palette-'], [class*=' wa-palette-']) {
+  --wa-color-brand-95: var(--wa-color-purple-95);
+  --wa-color-brand-90: var(--wa-color-purple-90);
+  --wa-color-brand-80: var(--wa-color-purple-80);
+  --wa-color-brand-70: var(--wa-color-purple-70);
+  --wa-color-brand-60: var(--wa-color-purple-60);
+  --wa-color-brand-50: var(--wa-color-purple-50);
+  --wa-color-brand-40: var(--wa-color-purple-40);
+  --wa-color-brand-30: var(--wa-color-purple-30);
+  --wa-color-brand-20: var(--wa-color-purple-20);
+  --wa-color-brand-10: var(--wa-color-purple-10);
+  --wa-color-brand-05: var(--wa-color-purple-05);
+  --wa-color-brand: var(--wa-color-purple);
+}
diff --git a/src/styles/brand/violet.css b/src/styles/brand/violet.css
diff --git a/src/styles/color/anodized.css b/src/styles/color/anodized.css
@@ -80,18 +80,18 @@
   --wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
   --wa-color-indigo: var(--wa-color-indigo-50);
 
-  --wa-color-violet-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
-  --wa-color-violet-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
-  --wa-color-violet-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
-  --wa-color-violet-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
-  --wa-color-violet-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
-  --wa-color-violet-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
-  --wa-color-violet-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
-  --wa-color-violet-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
-  --wa-color-violet-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
-  --wa-color-violet-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
-  --wa-color-violet-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
+  --wa-color-purple-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
+  --wa-color-purple-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
+  --wa-color-purple-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
+  --wa-color-purple-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
+  --wa-color-purple-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
+  --wa-color-purple-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
+  --wa-color-purple-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
+  --wa-color-purple-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
+  --wa-color-purple-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
+  --wa-color-purple-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
+  --wa-color-purple: var(--wa-color-purple-50);
 
   --wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
   --wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
diff --git a/src/styles/color/bright.css b/src/styles/color/bright.css
@@ -80,18 +80,18 @@
   --wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
   --wa-color-indigo: var(--wa-color-indigo-50);
 
-  --wa-color-violet-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
-  --wa-color-violet-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
-  --wa-color-violet-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
-  --wa-color-violet-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
-  --wa-color-violet-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
-  --wa-color-violet-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
-  --wa-color-violet-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
-  --wa-color-violet-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
-  --wa-color-violet-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
-  --wa-color-violet-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
-  --wa-color-violet-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-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-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
   --wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
diff --git a/src/styles/color/classic.css b/src/styles/color/classic.css
@@ -80,18 +80,18 @@
   --wa-color-indigo-05: #0f0e26 /* oklch(18.064% 0.04799 282.35) */;
   --wa-color-indigo: var(--wa-color-indigo-40);
 
-  --wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
-  --wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
-  --wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
-  --wa-color-violet-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
-  --wa-color-violet-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
-  --wa-color-violet-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
-  --wa-color-violet-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
-  --wa-color-violet-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
-  --wa-color-violet-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
-  --wa-color-violet-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
-  --wa-color-violet-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
+  --wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
+  --wa-color-purple-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
+  --wa-color-purple-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
+  --wa-color-purple-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
+  --wa-color-purple-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
+  --wa-color-purple-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
+  --wa-color-purple-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
+  --wa-color-purple-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
+  --wa-color-purple-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
+  --wa-color-purple-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
+  --wa-color-purple: var(--wa-color-purple-50);
 
   --wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
   --wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
diff --git a/src/styles/color/default.css b/src/styles/color/default.css
@@ -80,18 +80,18 @@
   --wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
   --wa-color-indigo: var(--wa-color-indigo-40);
 
-  --wa-color-violet-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
-  --wa-color-violet-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
-  --wa-color-violet-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
-  --wa-color-violet-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
-  --wa-color-violet-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
-  --wa-color-violet-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
-  --wa-color-violet-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
-  --wa-color-violet-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
-  --wa-color-violet-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
-  --wa-color-violet-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
-  --wa-color-violet-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
-  --wa-color-violet: var(--wa-color-violet-50);
+  --wa-color-purple-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
+  --wa-color-purple-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
+  --wa-color-purple-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
+  --wa-color-purple-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
+  --wa-color-purple-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
+  --wa-color-purple-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
+  --wa-color-purple-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
+  --wa-color-purple-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
+  --wa-color-purple-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
+  --wa-color-purple-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
+  --wa-color-purple-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
+  --wa-color-purple: var(--wa-color-purple-50);
 
   --wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
   --wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
diff --git a/src/styles/color/elegant.css b/src/styles/color/elegant.css
@@ -80,18 +80,18 @@
   --wa-color-indigo-05: #0d0e27 /* oklch(17.951% 0.0503 278.32) */;
   --wa-color-indigo: var(--wa-color-indigo-40);
 
-  --wa-color-violet-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
-  --wa-color-violet-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
-  --wa-color-violet-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
-  --wa-color-violet-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
-  --wa-color-violet-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
-  --wa-color-violet-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
-  --wa-color-violet-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
-  --wa-color-violet-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
-  --wa-color-violet-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
-  --wa-color-violet-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
-  --wa-color-violet-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
-  --wa-color-violet: var(--wa-color-violet-40);
+  --wa-color-purple-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
+  --wa-color-purple-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
+  --wa-color-purple-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
+  --wa-color-purple-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
+  --wa-color-purple-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
+  --wa-color-purple-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
+  --wa-color-purple-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
+  --wa-color-purple-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
+  --wa-color-purple-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
+  --wa-color-purple-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
+  --wa-color-purple-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
+  --wa-color-purple: var(--wa-color-purple-40);
 
   --wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
   --wa-color-gray-90: #e6e5e8 /* oklch(92.354% 0.00415 301.42) */;
diff --git a/src/styles/color/mild.css b/src/styles/color/mild.css
@@ -80,18 +80,18 @@
   --wa-color-indigo-05: #180044 /* oklch(19.806% 0.11332 288.23) */;
   --wa-color-indigo: var(--wa-color-indigo-40);
 
-  --wa-color-violet-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
-  --wa-color-violet-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
-  --wa-color-violet-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
-  --wa-color-violet-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
-  --wa-color-violet-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
-  --wa-color-violet-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
-  --wa-color-violet-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
-  --wa-color-violet-30: #5d366c /* oklch(40.395% 0.09808 316) */;
-  --wa-color-violet-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
-  --wa-color-violet-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
-  --wa-color-violet-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
-  --wa-color-violet: var(--wa-color-violet-40);
+  --wa-color-purple-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
+  --wa-color-purple-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
+  --wa-color-purple-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
+  --wa-color-purple-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
+  --wa-color-purple-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
+  --wa-color-purple-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
+  --wa-color-purple-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
+  --wa-color-purple-30: #5d366c /* oklch(40.395% 0.09808 316) */;
+  --wa-color-purple-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
+  --wa-color-purple-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
+  --wa-color-purple-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
+  --wa-color-purple: var(--wa-color-purple-40);
 
   --wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
   --wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
diff --git a/src/styles/color/natural.css b/src/styles/color/natural.css
diff --git a/src/styles/color/rudimentary.css b/src/styles/color/rudimentary.css
diff --git a/src/styles/color/tintless.js b/src/styles/color/tintless.js
diff --git a/src/styles/color/vogue.css b/src/styles/color/vogue.css
diff --git a/src/styles/themes/playful/color.css b/src/styles/themes/playful/color.css

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]`
	`1`	`+["red", "yellow", "green", "teal", "blue", "indigo", "purple", "gray"]`
Original file line number	Diff line number	Diff line change
`@@ -52,8 +52,8 @@ wa-page {`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`&[slot^='navigation'] {`
`55`		`- background: var(--wa-color-violet-80);`
`56`		`- color: var(--wa-color-violet-20);`
	`55`	`+ background: var(--wa-color-purple-80);`
	`56`	`+ color: var(--wa-color-purple-20);`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`strong {`