From 9987ce8d4fdb7b797cd7656f37c03ee4907d8382 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Mon, 8 Jan 2024 22:49:48 -0500
Subject: [PATCH] simplify themer logic

---
 docs/_includes/default.njk        |   3 +-
 docs/pages/experimental/themer.md |  33 ++---
 src/themes/chic.css               | 220 +++++++++++++++---------------
 3 files changed, 125 insertions(+), 131 deletions(-)

diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk
index 3076475bc..9055d0c55 100644
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -51,8 +51,7 @@
     {# Web Fonts #}
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600&family=Inter:wght@300;400;500;600&family=Lora:wght@400;500;600&family=Noto+Sans+Display:wght@300;400;500;600&family=Noto+Sans+Mono:wght@300;400;500;600&family=Noto+Sans:wght@300;400;500;600&family=Noto+Serif:wght@300;400;500;600&family=Open+Sans:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300;400;500;600&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300;400;500;600&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Inter:wght@100..900&family=Lora:wght@400..700&family=Noto+Sans+Display:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Serif:wght@100..900&family=Open+Sans:wght@300..800&family=Playfair+Display:wght@400..900&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300..700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300..700&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300..700&display=swap" rel="stylesheet">
 
     {# Turbo + Scroll positioning #}
     <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md
index 00d5a664e..fb9389237 100644
--- a/docs/pages/experimental/themer.md
+++ b/docs/pages/experimental/themer.md
@@ -574,12 +574,7 @@ toc: false
             if (darkModeSelect.checked === true) {
               // darkModeSelect.checked = false
               document.documentElement.className = "flavor-html"
-
-              if(theme === 'chic') {
-                document.documentElement.classList.toggle(`wa-theme-${theme}-light`);
-              } else {
-                document.documentElement.classList.toggle(`wa-theme-${theme}-dark`);
-              }
+              document.documentElement.classList.toggle(`wa-theme-${theme}-dark`);
             }
           }, 100)
         })
@@ -694,7 +689,8 @@ toc: false
         fontFamily = `'inter', sans-serif`;
         break;
       case 'lora':
-        fontFamily = `'Lora', serif`
+        fontFamily = `'Lora', serif`;
+        break;
       case 'noto-sans':
           fontFamily = `'Noto Sans', sans-serif`;
           break;
@@ -748,7 +744,8 @@ toc: false
         fontFamily = `'inter', sans-serif`;
         break;
       case 'lora':
-        fontFamily = `'Lora', serif`
+        fontFamily = `'Lora', serif`;
+        break;
       case 'noto-sans':
           fontFamily = `'Noto Sans', sans-serif`;
           break;
@@ -829,11 +826,8 @@ toc: false
   darkModeSelect.addEventListener('wa-change', event => {
     const el = document.documentElement
     const theme = themeSelect.value
-    if(theme === 'chic') {
-      el.classList.toggle(`wa-theme-${theme}-light`);
-    } else {
-      el.classList.toggle(`wa-theme-${theme}-dark`);
-    }
+
+    el.classList.toggle(`wa-theme-${theme}-dark`);
 
   });
 </script>
@@ -927,8 +921,8 @@ toc: false
       <wa-card>
         <div class="space-vertically" style="height: 100%;">
           <wa-alert variant="success" open>
-            <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
-            This is the way.
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            This is the Way.
           </wa-alert>
           <wa-select label="Signet" help-text="This identifies your clan. You can change this later.">
             <wa-option>Mudhorn</wa-option>
@@ -940,7 +934,7 @@ toc: false
       <wa-card>
         <div class="space-vertically" style="height: 100%;">
           <wa-alert variant="warning" open>
-            <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
+            <wa-icon slot="icon" name="triangle-exclamation"></wa-icon>
             It's a trap!
           </wa-alert>
           <wa-radio-group label="Faction" value="2">
@@ -954,7 +948,7 @@ toc: false
       <wa-card>
         <div class="space-vertically" style="height: 100%;">
           <wa-alert variant="danger" open>
-            <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             That's no moon.
           </wa-alert>
           <wa-input label="Destination" value="Alderaan"></wa-input>
@@ -967,8 +961,9 @@ toc: false
 
 <style>
   html {
-    background: white;
-    background-image: radial-gradient(rgb(0 0 0 / .1) 1.5px, transparent 0);
+    background: var(--wa-color-surface-default);
+    background-attachment: fixed;
+    background-image: radial-gradient(var(--wa-color-surface-lowered) 1.5px, transparent 0);
     background-size: 28px 28px;
     background-position: -19px -19px;
     min-height: 100vh;
diff --git a/src/themes/chic.css b/src/themes/chic.css
index 6d1ecc7d1..230d50cc9 100644
--- a/src/themes/chic.css
+++ b/src/themes/chic.css
@@ -4,8 +4,8 @@
 
 :root,
 :host,
-.wa-theme-chic-dark {
-  color-scheme: dark;
+.wa-theme-chic-light {
+  color-scheme: light;
 
   /**
    * Primitive colors
@@ -81,36 +81,40 @@
 
   /* Surfaces are background layers that UI components and other content rest on.
    * Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
-  --wa-color-surface-raised: var(--wa-color-base-10);
-  --wa-color-surface-default: var(--wa-color-base-05);
-  --wa-color-surface-lowered: black;
-  --wa-color-surface-border: var(--wa-color-base-20);
+  --wa-color-surface-raised: white;
+  --wa-color-surface-default: white;
+  --wa-color-surface-lowered: var(--wa-color-base-95);
+  --wa-color-surface-border: var(--wa-color-base-90);
 
   /* Text colors are used for standard text elements.
    * Text should have a minimum 4.5:1 contrast ratio against surfaces.
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-95);
-  --wa-color-text-quiet: var(--wa-color-base-60);
+  --wa-color-text-normal: var(--wa-color-base-05);
+  --wa-color-text-quiet: var(--wa-color-base-40);
   --wa-color-text-link: var(--wa-color-brand-text-on-surface);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
-  --wa-color-selection-background: var(--wa-color-lime-40);
-  --wa-color-selection-text: white;
+  --wa-color-selection-background: var(--wa-color-lime-80);
+  --wa-color-selection-text: black;
 
   /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
    * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 90%, transparent);
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 96%, transparent);
 
   /* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
-  --wa-color-overlay: color-mix(in oklab, black 50%, transparent);
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-base-10) 25%, transparent);
 
   /* Shadow specifies the default color for box shadows that indicate elevation. */
-  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-base) * 32% + 40%), transparent);
+  --wa-color-shadow: color-mix(
+    in oklab,
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
+    transparent
+  );
 
   /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
+  --wa-color-mix-hover: white 10%;
+  --wa-color-mix-active: black 5%;
 
   /**
    * Semantic theme colors
@@ -126,55 +130,55 @@
    * Subtle colors have no contrast requirements.
    * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
   */
-  --wa-color-brand-spot: var(--wa-color-lime-80);
-  --wa-color-brand-spot-darker: var(--wa-color-lime-70);
-  --wa-color-brand-fill-subtle: var(--wa-color-lime-10);
-  --wa-color-brand-fill-highlight: var(--wa-color-lime-20);
-  --wa-color-brand-border-subtle: var(--wa-color-lime-20);
-  --wa-color-brand-border-highlight: var(--wa-color-lime-30);
+  --wa-color-brand-spot: var(--wa-color-lime-70);
+  --wa-color-brand-spot-darker: var(--wa-color-lime-60);
+  --wa-color-brand-fill-subtle: var(--wa-color-lime-95);
+  --wa-color-brand-fill-highlight: var(--wa-color-lime-90);
+  --wa-color-brand-border-subtle: var(--wa-color-lime-90);
+  --wa-color-brand-border-highlight: var(--wa-color-lime-80);
   --wa-color-brand-text-on-spot: black;
-  --wa-color-brand-text-on-fill: var(--wa-color-lime-90);
-  --wa-color-brand-text-on-surface: var(--wa-color-lime-80);
+  --wa-color-brand-text-on-fill: var(--wa-color-lime-40);
+  --wa-color-brand-text-on-surface: var(--wa-color-lime-50);
 
-  --wa-color-success-spot: var(--wa-color-green-80);
-  --wa-color-success-spot-darker: var(--wa-color-green-70);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: var(--wa-color-green-20);
-  --wa-color-success-border-highlight: var(--wa-color-green-30);
+  --wa-color-success-spot: var(--wa-color-green-70);
+  --wa-color-success-spot-darker: var(--wa-color-green-60);
+  --wa-color-success-fill-subtle: var(--wa-color-green-95);
+  --wa-color-success-fill-highlight: var(--wa-color-green-90);
+  --wa-color-success-border-subtle: var(--wa-color-green-90);
+  --wa-color-success-border-highlight: var(--wa-color-green-80);
   --wa-color-success-text-on-spot: black;
-  --wa-color-success-text-on-fill: var(--wa-color-green-90);
-  --wa-color-success-text-on-surface: var(--wa-color-green-80);
+  --wa-color-success-text-on-fill: var(--wa-color-green-40);
+  --wa-color-success-text-on-surface: var(--wa-color-green-50);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-80);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-70);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
+  --wa-color-warning-spot: var(--wa-color-yellow-70);
+  --wa-color-warning-spot-darker: var(--wa-color-yellow-60);
+  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
+  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
+  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
   --wa-color-warning-text-on-spot: black;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
+  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
 
   --wa-color-danger-spot: var(--wa-color-red-70);
   --wa-color-danger-spot-darker: var(--wa-color-red-60);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: var(--wa-color-red-20);
-  --wa-color-danger-border-highlight: var(--wa-color-red-30);
+  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
+  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
+  --wa-color-danger-border-subtle: var(--wa-color-red-90);
+  --wa-color-danger-border-highlight: var(--wa-color-red-80);
   --wa-color-danger-text-on-spot: black;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-80);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-70);
+  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
 
-  --wa-color-neutral-spot: var(--wa-color-base-80);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-70);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
+  --wa-color-neutral-spot: var(--wa-color-base-70);
+  --wa-color-neutral-spot-darker: var(--wa-color-base-60);
+  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
+  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
+  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
+  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
   --wa-color-neutral-text-on-spot: black;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-70);
+  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
+  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
 
   /**
    * Typography
@@ -322,90 +326,86 @@
   --wa-tooltip-arrow-size: 0.375rem;
 }
 
-.wa-theme-chic-light,
-.wa-theme-chic-light :host {
+.wa-theme-chic-dark,
+.wa-theme-chic-dark :host {
   color-scheme: dark;
 
   /**
    * Base theme colors
    */
-  --wa-color-surface-raised: white;
-  --wa-color-surface-default: white;
-  --wa-color-surface-lowered: var(--wa-color-base-95);
-  --wa-color-surface-border: var(--wa-color-base-90);
+  --wa-color-surface-raised: var(--wa-color-base-10);
+  --wa-color-surface-default: var(--wa-color-base-05);
+  --wa-color-surface-lowered: black;
+  --wa-color-surface-border: var(--wa-color-base-20);
 
-  --wa-color-text-normal: var(--wa-color-base-05);
-  --wa-color-text-quiet: var(--wa-color-base-40);
+  --wa-color-text-normal: var(--wa-color-base-95);
+  --wa-color-text-quiet: var(--wa-color-base-60);
   --wa-color-text-link: var(--wa-color-brand-text-on-surface);
 
-  --wa-color-selection-background: var(--wa-color-lime-80);
-  --wa-color-selection-text: black;
+  --wa-color-selection-background: var(--wa-color-lime-40);
+  --wa-color-selection-text: white;
 
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 96%, transparent);
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 90%, transparent);
 
-  --wa-color-overlay: color-mix(in oklab, var(--wa-color-base-10) 25%, transparent);
+  --wa-color-overlay: color-mix(in oklab, black 50%, transparent);
 
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
-    transparent
-  );
+  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-base) * 32% + 40%), transparent);
 
-  --wa-color-mix-hover: white 10%;
-  --wa-color-mix-active: black 5%;
+  --wa-color-mix-hover: black 8%;
+  --wa-color-mix-active: black 16%;
 
   /**
     * Semantic theme colors
     */
-  --wa-color-brand-spot: var(--wa-color-lime-70);
-  --wa-color-brand-spot-darker: var(--wa-color-lime-60);
-  --wa-color-brand-fill-subtle: var(--wa-color-lime-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-lime-90);
-  --wa-color-brand-border-subtle: var(--wa-color-lime-90);
-  --wa-color-brand-border-highlight: var(--wa-color-lime-80);
+  --wa-color-brand-spot: var(--wa-color-lime-80);
+  --wa-color-brand-spot-darker: var(--wa-color-lime-70);
+  --wa-color-brand-fill-subtle: var(--wa-color-lime-10);
+  --wa-color-brand-fill-highlight: var(--wa-color-lime-20);
+  --wa-color-brand-border-subtle: var(--wa-color-lime-20);
+  --wa-color-brand-border-highlight: var(--wa-color-lime-30);
   --wa-color-brand-text-on-spot: black;
-  --wa-color-brand-text-on-fill: var(--wa-color-lime-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-lime-50);
+  --wa-color-brand-text-on-fill: var(--wa-color-lime-90);
+  --wa-color-brand-text-on-surface: var(--wa-color-lime-80);
 
-  --wa-color-success-spot: var(--wa-color-green-70);
-  --wa-color-success-spot-darker: var(--wa-color-green-60);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-90);
-  --wa-color-success-border-highlight: var(--wa-color-green-80);
+  --wa-color-success-spot: var(--wa-color-green-80);
+  --wa-color-success-spot-darker: var(--wa-color-green-70);
+  --wa-color-success-fill-subtle: var(--wa-color-green-10);
+  --wa-color-success-fill-highlight: var(--wa-color-green-20);
+  --wa-color-success-border-subtle: var(--wa-color-green-20);
+  --wa-color-success-border-highlight: var(--wa-color-green-30);
   --wa-color-success-text-on-spot: black;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-text-on-fill: var(--wa-color-green-90);
+  --wa-color-success-text-on-surface: var(--wa-color-green-80);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-70);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-60);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
+  --wa-color-warning-spot: var(--wa-color-yellow-80);
+  --wa-color-warning-spot-darker: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
+  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
+  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
   --wa-color-warning-text-on-spot: black;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
 
   --wa-color-danger-spot: var(--wa-color-red-70);
   --wa-color-danger-spot-darker: var(--wa-color-red-60);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-90);
-  --wa-color-danger-border-highlight: var(--wa-color-red-80);
+  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
+  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
+  --wa-color-danger-border-subtle: var(--wa-color-red-20);
+  --wa-color-danger-border-highlight: var(--wa-color-red-30);
   --wa-color-danger-text-on-spot: black;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-text-on-fill: var(--wa-color-red-80);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-70);
 
-  --wa-color-neutral-spot: var(--wa-color-base-70);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-60);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
+  --wa-color-neutral-spot: var(--wa-color-base-80);
+  --wa-color-neutral-spot-darker: var(--wa-color-base-70);
+  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
+  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
+  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
+  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
   --wa-color-neutral-text-on-spot: black;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-text-on-fill: var(--wa-color-base-80);
+  --wa-color-neutral-text-on-surface: var(--wa-color-base-70);
 }
 
 /* _utility.css */