Attempt to use tintless variables

(definition only for now)

docs/docs/experimental/themer.md

@@ -506,7 +506,7 @@ hasOutline: false
       <wa-option data-alpha="remove" value="playful">Playful</wa-option>
       <wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
       <wa-option data-alpha="remove" value="tailspin">Tailspin</wa-option>
-      <wa-option data-alpha="remove" value="glossy">Glossy</wa-option>
+      <wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
       <wa-option data-alpha="remove" value="active">Active</wa-option>
       <wa-option value="classic">Classic</wa-option>
     </wa-select>
@@ -886,7 +886,7 @@ hasOutline: false
       case 'active':
         colorPalette = 'rudimentary';
         break;
-      case 'glossy':
+      case 'glassy':
         colorPalette = 'elegant';
         break;
       case 'premium':
@@ -1049,7 +1049,7 @@ hasOutline: false
       case 'brutalist':
       case 'classic':
       case 'awesome':
-      case 'glossy':
+      case 'glassy':
       case 'active':
         assetFolder = themeSelect.value;
         break;
@@ -1259,7 +1259,7 @@ hasOutline: false
       case 'tailspin':
         presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
         break;
-      case 'glossy':
+      case 'glassy':
         presetLogoIcons = ['raindrops', 'citrus-slice', 'lighthouse', 'kiwi-bird'];
         break;
       case 'active':

docs/docs/resources/changelog.md

@@ -17,7 +17,6 @@ During the alpha period, things might break! We take breaking changes very serio
 
 - Added `.wa-callout` utility class
 - Added new themes:
-  - Glossy
   - Premium
 
 ## 3.0.0-alpha.8

docs/docs/themes/glassy.md

@@ -0,0 +1,8 @@
+---
+title: Glassy
+description: Smooth, sleek, and reflective.
+isPro: true
+tags: pro
+noAlpha: true
+defaultPalette: elegant
+---

docs/docs/themes/glossy.md

@@ -1,7 +0,0 @@
----
-title: Glossy
-description: Bustling with plenty of luster and shine.
-isPro: true
-tags: pro
-defaultPalette: elegant
----

docs/docs/tokens/color.md

@@ -66,10 +66,12 @@ 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}`.
 
-{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
+{% 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 -%}
 <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"] -%}
+  {% for tint in tints -%}
     <li class="color-preview">
       <div class="swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})"></div>
       <small>{{ tint }}</small>
@@ -78,6 +80,18 @@ 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.

scripts/build.js

@@ -126,9 +126,7 @@ async function generateStyles() {
         file.includes('themes/default') ||
         file.includes('themes/awesome') ||
         file.includes('themes/active') ||
-        file.includes('themes/glossy') ||
         file.includes('themes/mellow') ||
-        file.includes('themes/premium') ||
         file.includes('themes/tailspin') ||
         file.includes('themes/brutalist')
       ) {

src/components/card/card.css

@@ -1,36 +1,29 @@
 :host {
   --spacing: var(--wa-space-xl);
-  --border-width: var(--wa-card-border-width, var(--wa-panel-border-width));
-  --border-radius: var(--wa-card-border-radius, var(--wa-panel-border-radius));
-
-  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
 
   display: flex;
   flex-direction: column;
-  background-color: var(--wa-card-background-color, var(--wa-color-surface-default));
-  border-color: var(--wa-card-border-color, var(--wa-color-surface-border));
-  border-radius: var(--border-radius);
+  background-color: var(--wa-color-surface-default);
+  border-color: var(--wa-color-surface-border);
+  border-radius: var(--wa-panel-border-radius);
   border-style: var(--wa-panel-border-style);
-  border-width: var(--border-width);
-  box-shadow: var(--wa-card-shadow, var(--wa-shadow-s));
+  border-width: var(--wa-panel-border-width);
+  box-shadow: var(--wa-shadow-s);
   color: var(--wa-color-text-normal);
 }
 
-.image,
-:host(:not([with-image])) .header {
-  border-start-start-radius: var(--inner-border-radius);
-  border-start-end-radius: var(--inner-border-radius);
-}
-
 .image {
   display: flex;
-  background-color: var(--wa-card-image-background-color, transparent);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  margin: calc(-1 * var(--border-width));
+  overflow: hidden;
 
   &::slotted(img) {
     display: block;
     width: 100%;
-    border-start-start-radius: inherit !important;
-    border-start-end-radius: inherit !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
   }
 }
 
@@ -38,7 +31,11 @@
   display: block;
   border-bottom: inherit;
   padding: calc(var(--spacing) / 2) var(--spacing);
-  background-color: var(--wa-card-header-background-color, transparent);
+}
+
+:host(:not([with-image])) .header {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
 .body {
@@ -49,10 +46,9 @@
 .footer {
   display: block;
   border-top: inherit;
-  border-end-start-radius: var(--inner-border-radius);
-  border-end-end-radius: var(--inner-border-radius);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
   padding: var(--spacing);
-  background-color: var(--wa-card-footer-background-color, transparent);
 }
 
 :host(:not([with-header])) .header,

src/components/card/card.ts

@@ -19,17 +19,7 @@ import styles from './card.css';
  * @csspart body - The container that wraps the card's main content.
  * @csspart footer - The container that wraps the card's footer.
  *
- * @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
- * @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
  * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value.
- * @cssproperty --wa-card-border-radius - The default radius for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single value.
- * @cssproperty --wa-card-border-color - The default border color for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single color.
- * @cssproperty --wa-card-border-width - The default border width for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single value.
- * @cssproperty --wa-card-background-color - The default background color for all cards, typically set on an ancestor element (e.g. by a theme).
- * @cssproperty --wa-card-shadow - The default shadow for all cards, typically set on an ancestor element (e.g. by a theme).
- * @cssproperty --wa-card-header-background-color - The default background color for card headers, typically set on an ancestor element (e.g. by a theme).
- * @cssproperty --wa-card-footer-background-color - The default background color for card footers, typically set on an ancestor element (e.g. by a theme).
- * @cssproperty --wa-card-image-background-color - The default background color for card images, typically set on an ancestor element (e.g. by a theme).
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {

src/styles/color/anodized.css

@@ -11,6 +11,7 @@
   --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;
@@ -23,6 +24,7 @@
   --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;
@@ -35,6 +37,7 @@
   --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;
@@ -47,6 +50,7 @@
   --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;
@@ -59,6 +63,7 @@
   --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;
@@ -71,6 +76,7 @@
   --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;
@@ -83,6 +89,7 @@
   --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;
@@ -95,4 +102,5 @@
   --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,6 +11,7 @@
   --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;
@@ -23,6 +24,7 @@
   --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;
@@ -35,6 +37,7 @@
   --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;
@@ -47,6 +50,7 @@
   --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;
@@ -59,6 +63,7 @@
   --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;
@@ -71,6 +76,7 @@
   --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;
@@ -83,6 +89,7 @@
   --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;
@@ -95,4 +102,5 @@
   --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,6 +11,7 @@
   --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;
@@ -23,6 +24,7 @@
   --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;
@@ -35,6 +37,7 @@
   --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;
@@ -47,6 +50,7 @@
   --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;
@@ -59,6 +63,7 @@
   --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;
@@ -71,6 +76,7 @@
   --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;
@@ -83,6 +89,7 @@
   --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;
@@ -95,4 +102,5 @@
   --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,6 +19,7 @@
   --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;
@@ -31,6 +32,7 @@
   --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;
@@ -43,6 +45,7 @@
   --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;
@@ -55,6 +58,7 @@
   --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;
@@ -67,6 +71,7 @@
   --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;
@@ -79,6 +84,7 @@
   --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;
@@ -91,6 +97,7 @@
   --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;
@@ -103,4 +110,5 @@
   --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,6 +11,7 @@
   --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;
@@ -23,6 +24,7 @@
   --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;
@@ -35,6 +37,7 @@
   --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;
@@ -47,6 +50,7 @@
   --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;
@@ -59,6 +63,7 @@
   --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;
@@ -71,6 +76,7 @@
   --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;
@@ -83,6 +89,7 @@
   --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;
@@ -95,4 +102,5 @@
   --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,6 +11,7 @@
   --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;
@@ -23,6 +24,7 @@
   --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;
@@ -35,6 +37,7 @@
   --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;
@@ -47,6 +50,7 @@
   --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;
@@ -59,6 +63,7 @@
   --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;
@@ -71,6 +76,7 @@
   --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;
@@ -83,6 +89,7 @@
   --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;
@@ -95,4 +102,5 @@
   --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,6 +11,7 @@
   --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;
@@ -23,6 +24,7 @@
   --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;
@@ -35,6 +37,7 @@
   --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;
@@ -47,6 +50,7 @@
   --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;
@@ -59,6 +63,7 @@
   --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;
@@ -71,6 +76,7 @@
   --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;
@@ -83,6 +89,7 @@
   --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;
@@ -95,4 +102,5 @@
   --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,6 +11,7 @@
   --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;
@@ -23,6 +24,7 @@
   --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;
@@ -35,6 +37,7 @@
   --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;
@@ -47,6 +50,7 @@
   --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;
@@ -59,6 +63,7 @@
   --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;
@@ -71,6 +76,7 @@
   --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;
@@ -83,6 +89,7 @@
   --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;
@@ -95,4 +102,5 @@
   --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/native/slider.css

@@ -96,7 +96,7 @@ input[type='range'] {
     border-radius: 50%;
     background-color: var(--thumb-color);
     box-shadow:
-      var(--thumb-shadow, 0 0 transparent),
+      var(--thumb-shadow),
       0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
     transition-property: background-color, border-color, box-shadow, color;
     transition-duration: var(--wa-transition-normal);

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-80);
+  --wa-color-brand-fill-loud: var(--wa-color-green);
   --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-80);
+  --wa-color-success-fill-loud: var(--wa-color-green);
   --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-80);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow);
   --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-80);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow);
   --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/glassy.css

@@ -0,0 +1,206 @@
+@import url('../color/elegant.css');
+@import url('default/color.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
+
+:where(:root),
+:host,
+.wa-theme-glassy,
+.wa-light,
+.wa-dark .wa-invert {
+  color-scheme: light;
+  color: var(--wa-color-text-normal);
+
+  /**
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-teal-95);
+  --wa-color-brand-fill-normal: var(--wa-color-teal-90);
+  --wa-color-brand-fill-loud: var(--wa-color-teal-50);
+  --wa-color-brand-border-quiet: var(--wa-color-teal-90);
+  --wa-color-brand-border-normal: var(--wa-color-teal-80);
+  --wa-color-brand-border-loud: var(--wa-color-teal-60);
+  --wa-color-brand-on-quiet: var(--wa-color-teal-40);
+  --wa-color-brand-on-normal: var(--wa-color-teal-30);
+  --wa-color-brand-on-loud: white;
+
+  /**
+   * Shadows
+   */
+  --wa-shadow-blur-scale: 3;
+}
+
+.wa-dark,
+.wa-invert,
+:is(:host-context(.wa-dark)) {
+  color-scheme: dark;
+  color: var(--wa-color-text-normal);
+
+  /**
+   * Foundational Colors
+   */
+  --wa-color-surface-raised: var(--wa-color-gray-10);
+  --wa-color-surface-default: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
+  --wa-color-surface-border: var(--wa-color-gray-20);
+
+  --wa-color-text-normal: var(--wa-color-gray-95);
+  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-link: var(--wa-color-teal-70);
+
+  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
+
+  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
+
+  --wa-color-focus: var(--wa-color-teal-60);
+
+  --wa-color-mix-hover: black 8%;
+  --wa-color-mix-active: black 16%;
+
+  /**
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-teal-10);
+  --wa-color-brand-fill-normal: var(--wa-color-teal-20);
+  --wa-color-brand-fill-loud: var(--wa-color-teal-50);
+  --wa-color-brand-border-quiet: var(--wa-color-teal-20);
+  --wa-color-brand-border-normal: var(--wa-color-teal-30);
+  --wa-color-brand-border-loud: var(--wa-color-teal-40);
+  --wa-color-brand-on-quiet: var(--wa-color-teal-60);
+  --wa-color-brand-on-normal: var(--wa-color-teal-70);
+  --wa-color-brand-on-loud: white;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-border-loud: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-60);
+  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-on-loud: white;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-loud: white;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-border-loud: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-60);
+  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-loud: white;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
+  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+}
+
+/**
+ * Component Styles
+ */
+:where(:root),
+:host,
+.wa-theme-glassy {
+  wa-button:not([appearance='plain']) {
+    box-shadow:
+      inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+      inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+      inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
+      var(--wa-shadow-s) /* outer shadow */;
+
+    margin-bottom: var(--wa-shadow-offset-y-s);
+    transition: transform var(--wa-transition-fast);
+
+    &:not([disabled]) {
+      &:hover {
+        box-shadow:
+          inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+          inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+          inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+          inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
+          var(--wa-shadow-m) /* outer shadow */;
+      }
+
+      &:active {
+        box-shadow:
+          inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
+          inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
+          inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
+          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+          inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
+          0 0 0 0 transparent /* outer shadow */;
+
+        transform: translateY(var(--wa-shadow-offset-y-s));
+      }
+    }
+  }
+
+  wa-checkbox,
+  wa-input:not(:focus),
+  wa-radio,
+  wa-select {
+    --box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
+      inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
+  }
+
+  wa-checkbox:state(checked),
+  wa-radio:state(checked) {
+    --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
+  }
+
+  wa-textarea:not(:focus) {
+    &:not([appearance='filled']):not([disabled]) {
+      --box-shadow: var(--wa-shadow-s);
+    }
+  }
+
+  wa-switch {
+    --box-shadow: inset var(--wa-shadow-s);
+    --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+      inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
+      inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
+  }
+
+  wa-progress-bar {
+    box-shadow: inset var(--wa-shadow-s);
+
+    &::part(indicator) {
+      box-shadow:
+        inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+        inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+        inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
+        var(--wa-shadow-s) /* outer shadow */;
+    }
+  }
+}

src/styles/themes/glossy.css

@@ -1,229 +0,0 @@
-@import url('../color/elegant.css');
-@import url('default/color.css');
-@import url('default/space.css');
-@import url('default/outlines.css');
-@import url('default/typography.css');
-@import url('default/rounding.css');
-@import url('default/shadows.css');
-@import url('default/transitions.css');
-@import url('default/groups.css');
-@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
-
-:where(:root),
-:host,
-.wa-theme-glossy,
-.wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-link: var(--wa-color-indigo-40);
-
-  --wa-color-focus: var(--wa-color-indigo-60);
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-90);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-90);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-80);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-60);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-40);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-30);
-  --wa-color-brand-on-loud: white;
-
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
-
-  /**
-   * Typography
-   */
-  --wa-font-family-body: 'Figtree', sans-serif;
-  --wa-font-family-heading: var(--wa-font-family-body);
-  --wa-font-family-code: ui-monospace, monospace;
-  --wa-font-family-longform: ui-serif, serif;
-
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 600;
-  --wa-font-weight-bold: 800;
-
-  --wa-line-height-condensed: 1.35;
-  --wa-line-height-normal: 1.8;
-  --wa-line-height-expanded: 2.25;
-
-  /**
-   * Spacing
-   */
-  --wa-space-scale: 1.125;
-
-  /**
-   * Rounding
-   */
-  --wa-border-radius-scale: 1.33;
-
-  /**
-   * Shadows
-   */
-  --wa-shadow-blur-scale: 3;
-}
-
-.wa-dark,
-.wa-invert,
-:is(:host-context(.wa-dark)) {
-  color-scheme: dark;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-link: var(--wa-color-indigo-70);
-
-  --wa-color-focus: var(--wa-color-indigo-60);
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
-  --wa-color-brand-fill-normal: var(--wa-color-indigo-20);
-  --wa-color-brand-fill-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-border-quiet: var(--wa-color-indigo-20);
-  --wa-color-brand-border-normal: var(--wa-color-indigo-30);
-  --wa-color-brand-border-loud: var(--wa-color-indigo-40);
-  --wa-color-brand-on-quiet: var(--wa-color-indigo-60);
-  --wa-color-brand-on-normal: var(--wa-color-indigo-70);
-  --wa-color-brand-on-loud: white;
-
-  --wa-color-success-fill-loud: var(--wa-color-green-40);
-
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-40);
-
-  --wa-color-danger-fill-loud: var(--wa-color-red-40);
-}
-
-/**
- * Component Styles
- */
-:where(:root),
-:host,
-.wa-theme-glossy {
-  --wa-theme-glossy-inner-shine: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.4);
-  --wa-theme-glossy-top-highlight: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.2);
-  --wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
-  --wa-theme-glossy-lower-shade: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.03);
-  --wa-theme-glossy-bottom-shadow: inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.15);
-
-  --wa-theme-glossy-inner-shine-active: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1);
-  --wa-theme-glossy-top-highlight-active: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.04);
-  --wa-theme-glossy-upper-tint-active: inset 0 1.25em 0 0 rgb(0 0 0 / 0.04);
-  --wa-theme-glossy-lower-shade-active: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02);
-  --wa-theme-glossy-bottom-shadow-active: inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04);
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    letter-spacing: -0.02em;
-  }
-  :is(
-      button,
-      input:where([type='button'], [type='reset'], [type='submit']),
-      wa-button,
-      wa-radio-button,
-      .wa-button
-    ):not([appearance='plain'], .wa-plain) {
-    box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
-      var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade), var(--wa-theme-glossy-bottom-shadow);
-
-    margin-bottom: var(--wa-shadow-offset-y-s);
-    transition: all var(--wa-transition-fast);
-
-    &:not([disabled]):active {
-      box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
-        var(--wa-theme-glossy-upper-tint-active), var(--wa-theme-glossy-lower-shade-active),
-        var(--wa-theme-glossy-bottom-shadow-active);
-
-      transform: scale(0.98);
-    }
-  }
-
-  input:where(
-      :not(
-        [type='button'],
-        [type='checkbox'],
-        [type='color'],
-        [type='file'],
-        [type='hidden'],
-        [type='image'],
-        [type='radio'],
-        [type='range'],
-        [type='reset'],
-        [type='submit']
-      )
-    ),
-  select,
-  textarea,
-  wa-input,
-  wa-select,
-  wa-textarea,
-  .wa-text-field {
-    --box-shadow: var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade);
-    transition: all var(--wa-transition-fast);
-
-    &:focus {
-      --box-shadow: 0 0 transparent, 0 0 transparent;
-    }
-  }
-
-  input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
-  wa-checkbox:is(:state(checked), :state(indeterminate)),
-  wa-radio:state(checked) {
-    --box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
-      var(--wa-theme-glossy-bottom-shadow);
-
-    &:active {
-      --box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
-        var(--wa-theme-glossy-bottom-shadow-active);
-    }
-  }
-
-  input[type='radio'],
-  wa-radio {
-    --background-color-checked: var(--border-color-checked);
-    --checked-icon-color: var(--wa-color-surface-default);
-    --checked-icon-scale: 0.4;
-  }
-
-  input[type='range'],
-  wa-slider,
-  wa-switch {
-    --thumb-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
-      var(--wa-theme-glossy-bottom-shadow);
-  }
-
-  progress,
-  wa-progress-bar {
-    box-shadow: inset var(--wa-shadow-s);
-
-    &::part(indicator) {
-      box-shadow:
-        var(--wa-theme-glossy-inner-shine),
-        var(--wa-theme-glossy-top-highlight),
-        inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-        inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        var(--wa-theme-glossy-bottom-shadow);
-    }
-  }
-}

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-40);
+  --wa-color-brand-fill-loud: var(--wa-color-indigo);
   --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);