Separate meaningful theme parts out

src/styles/color/anodized.css

@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-anodized {
   --wa-color-red-95: #fbeeeb;
   --wa-color-red-90: #f8e0d9;
   --wa-color-red-80: #efbdb1;

src/styles/color/bright.css

@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-bright {
   --wa-color-red-95: #ffefef;
   --wa-color-red-90: #ffdddd;
   --wa-color-red-80: #ffb7b7;

src/styles/color/classic.css

@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-classic {
   --wa-color-red-95: #feeeee;
   --wa-color-red-90: #fedede;
   --wa-color-red-80: #fdb8b8;

src/styles/color/default.css

@@ -7,7 +7,9 @@
  * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
  */
 :where(:root),
-:host {
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-default {
   --wa-color-red-95: #ffefef;
   --wa-color-red-90: #ffdddc;
   --wa-color-red-80: #ffb7b6;

src/styles/color/elegant.css

@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-elegant {
   --wa-color-red-95: #fdeeef;
   --wa-color-red-90: #fcdfe0;
   --wa-color-red-80: #f8b9bc;

src/styles/color/natural.css

@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-natural {
   --wa-color-red-95: #f9f0ee;
   --wa-color-red-90: #f5e2dd;
   --wa-color-red-80: #e8bfb5;

src/styles/color/rudimentary.css

@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-rudimentary {
   --wa-color-red-95: #ffeeee;
   --wa-color-red-90: #ffdddd;
   --wa-color-red-80: #ffb6b8;

src/styles/color/vogue.css

@@ -1,5 +1,7 @@
-:root,
-:host {
+:where(:root),
+:host,
+:where([class^='wa-theme-'], [class*=' wa-theme-']),
+.wa-palette-vogue {
   --wa-color-red-95: #feeeee;
   --wa-color-red-90: #fedddd;
   --wa-color-red-80: #fdb8b8;

src/styles/themes/active.css

@@ -1,94 +1,19 @@
-@import url('../color/rudimentary.css');
-@import url('default/color.css');
+@import url('active/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
-@import url('default/typography.css');
+@import url('active/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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('active/overrides.css');
 
 :where(:root),
 :host,
 .wa-theme-active,
+.wa-dark,
 .wa-light,
-.wa-dark .wa-invert {
-  color-scheme: light;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-text-normal: var(--wa-color-gray-05);
-  --wa-color-text-link: var(--wa-color-green-40);
-
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  --wa-color-mix-hover: white 10%;
-  --wa-color-mix-active: black 5%;
-
-  /**
-   * Semantic Colors
-   */
-  --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-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);
-  --wa-color-brand-on-quiet: var(--wa-color-green-40);
-  --wa-color-brand-on-normal: var(--wa-color-green-30);
-  --wa-color-brand-on-loud: black;
-
-  --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-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);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: black;
-
-  --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-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);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: black;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-70);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-70);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: black;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: black;
-
-  /**
-   * Typography
-   */
-  --wa-font-family-body: 'Inter', sans-serif;
-
-  --wa-font-weight-semibold: 550;
-  --wa-font-weight-bold: 650;
-
+.wa-invert {
   /**
    * Rounding
    */
@@ -99,147 +24,3 @@
    */
   --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
 }
-
-.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: black;
-  --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-green-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-blue-60);
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
-  --wa-color-brand-fill-normal: var(--wa-color-green-20);
-  --wa-color-brand-fill-loud: var(--wa-color-green-80);
-  --wa-color-brand-border-quiet: var(--wa-color-green-20);
-  --wa-color-brand-border-normal: var(--wa-color-green-30);
-  --wa-color-brand-border-loud: var(--wa-color-green-60);
-  --wa-color-brand-on-quiet: var(--wa-color-green-80);
-  --wa-color-brand-on-normal: var(--wa-color-green-90);
-  --wa-color-brand-on-loud: black;
-
-  --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-80);
-  --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-80);
-  --wa-color-success-on-normal: var(--wa-color-green-90);
-  --wa-color-success-on-loud: black;
-
-  --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-80);
-  --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-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-on-loud: black;
-
-  --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-70);
-  --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-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-80);
-  --wa-color-danger-on-normal: var(--wa-color-red-90);
-  --wa-color-danger-on-loud: black;
-
-  --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-80);
-  --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-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-on-loud: black;
-}
-
-/**
- * Component Styles
- */
-:where(:root),
-:host,
-.wa-theme-active {
-  --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
-    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
-  --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
-    inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
-    inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
-
-  :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
-      [appearance='plain'],
-      .wa-plain
-    ) {
-    box-shadow: var(--wa-theme-active-shadow-pop-out);
-
-    &:not([disabled], [loading]):active {
-      box-shadow: var(--wa-theme-active-shadow-punch-in);
-    }
-  }
-
-  wa-card {
-    box-shadow: var(--wa-theme-active-shadow-pop-out);
-  }
-
-  input:not([type='button'], [type='reset'], [type='submit'], :checked),
-  select,
-  textarea,
-  :is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
-  wa-input,
-  wa-select,
-  wa-textarea {
-    &:not([appearance='filled']):not([disabled]) {
-      --box-shadow: inset var(--wa-shadow-s);
-    }
-  }
-
-  input[type='radio'],
-  wa-radio {
-    --background-color-checked: var(--wa-form-control-activated-color);
-    --checked-icon-color: var(--wa-color-brand-on-loud);
-    --checked-icon-scale: 0.4;
-  }
-
-  input[type='range'],
-  wa-slider,
-  wa-switch {
-    --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
-  }
-
-  wa-progress-bar {
-    box-shadow: inset var(--wa-shadow-s);
-
-    &::part(indicator) {
-      box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
-    }
-  }
-}