Implement .wa-invert, closes #497 (#508)

docs/assets/scripts/theme-picker.js

@@ -91,11 +91,6 @@ const colorScheme = new ThemeAspect({
     domChange(() => {
       let dark = this.computedValue === 'dark';
       document.documentElement.classList.toggle(`wa-dark`, dark);
-
-      for (let el of document.querySelectorAll('.wa-invert')) {
-        el.classList.toggle('wa-dark', !dark);
-        el.classList.toggle('wa-light', dark);
-      }
     });
   },
 });

docs/docs/themes/creating.md

@@ -21,7 +21,8 @@ If you're customizing the default light styles, scope your styles to the followi
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   /* your custom styles here */
 }
 ```
@@ -30,6 +31,7 @@ If you're customizing the default dark styles, scope your styles to the followin
 
 ```css
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   /* your custom styles here */
 }

docs/docs/themes/index.njk

@@ -22,6 +22,7 @@ Please note that if you import multiple themes, the last one will be the default
 
 Each theme may also include both light and dark color schemes with the classes `wa-light` and `wa-dark`.
 You can use these classes to apply a specific color scheme to an entire page or just a section.
+You can also use `wa-invert` which behaves like `wa-dark` in light mode, and like `wa-light` in dark mode.
 In pre-made themes, we use a light color scheme by default.
 
 
@@ -36,11 +37,13 @@ For example, the default theme is set up like this:
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   /* all CSS custom properties for color, typography, space, etc. */
 }
 
 .wa-dark,
+.wa-invert,
 :host-context(.wa-dark) {
   /* subset of CSS custom properties for a dark color scheme */
 }

src/styles/themes/active.css

@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-active,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -100,6 +101,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/awesome.css

@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-awesome,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -143,6 +144,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/brutalist.css

@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-brutalist,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -124,6 +125,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/classic.css

@@ -11,7 +11,8 @@
 :where(:root),
 :host,
 .wa-theme-classic,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
 
   /**
@@ -118,6 +119,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/default.css

@@ -11,12 +11,14 @@
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/default/color-semantic.css

@@ -4,7 +4,8 @@
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   /**
    * Foundational Colors
    */
@@ -105,6 +106,7 @@
 
 /** need to wrap :host-context() in an :is() selector for unsupported browsers */
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   /**
    * Foundational Colors

src/styles/themes/default/groups.css

@@ -4,7 +4,8 @@
 :where(:root),
 :host,
 .wa-theme-default,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   /* Form controls */
   --wa-form-control-background-color: var(--wa-color-surface-default);
 
@@ -48,6 +49,7 @@
 
 /** need to wrap :host-context() in an :is() selector for unsupported browsers */
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   /* Form controls */
   --wa-form-control-background-color: var(--wa-color-surface-default);

src/styles/themes/glassy.css

@@ -11,7 +11,8 @@
 :where(:root),
 :host,
 .wa-theme-glassy,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -35,6 +36,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/mellow.css

@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-mellow,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -121,6 +122,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/playful.css

@@ -11,7 +11,8 @@
 :where(:root),
 :host,
 .wa-theme-playful,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -205,6 +206,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/premium.css

@@ -13,7 +13,8 @@
 :where(:root),
 :host,
 .wa-theme-premium,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -106,6 +107,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);

src/styles/themes/tailspin.css

@@ -12,7 +12,8 @@
 :where(:root),
 :host,
 .wa-theme-tailspin,
-.wa-light {
+.wa-light,
+.wa-dark .wa-invert {
   color-scheme: light;
   color: var(--wa-color-text-normal);
 
@@ -126,6 +127,7 @@
 }
 
 .wa-dark,
+.wa-invert,
 :is(:host-context(.wa-dark)) {
   color-scheme: dark;
   color: var(--wa-color-text-normal);