From 9fd070639cc6b593b6303b2d4f247c73ebf73843 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 26 Sep 2023 16:37:56 -0400
Subject: [PATCH] more knobs

---
 docs/pages/experimental/themer.md  | 63 +++++++++++++++++++++++-------
 src/components/card/card.styles.ts |  7 ++--
 src/themes/default.css             | 37 +++++++++---------
 src/themes/mellow.css              | 39 +++++++++---------
 4 files changed, 93 insertions(+), 53 deletions(-)

diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md
index e24fe0b36..6e8b28263 100644
--- a/docs/pages/experimental/themer.md
+++ b/docs/pages/experimental/themer.md
@@ -13,7 +13,7 @@ toc: false
       <wa-option value="default">Default</wa-option>
       <wa-option value="mellow">Mellow</wa-option>
     </wa-select> 
-    <wa-select name="heading-text" label="Heading" value="serif">
+    <wa-select name="heading-text" label="Heading" value="sans-serif">
       <wa-option value="serif">Serif</wa-option>
       <wa-option value="sans-serif">Sans-serif</wa-option>
       <wa-option value="monospace">Monospace</wa-option>
@@ -26,29 +26,64 @@ toc: false
       <wa-option value="cursive">Cursive</wa-option>
     </wa-select>
     <h3>Borders</h3>
-    <wa-range name="corners" label="Corners" min="0" max="3" value="1"></wa-range>
-    <wa-range name="border-width" label="Width" min="1" max="3" value="1"></wa-range>
-    <wa-range name="border-style" label="Style" min="1" max="3" value="1"></wa-range>
+    <wa-range name="corners" label="Corners" min="0" max="2" value=".25" step=".125"></wa-range>
+    <wa-range name="border-width" label="Width" min="1" max="8" value="1" step="1"></wa-range>
+    <wa-select name="border-style" label="Style" value="solid">
+      <wa-option value="solid">Solid</wa-option>
+      <wa-option value="dashed">Dashed</wa-option>
+      <wa-option value="dotted">Dotted</wa-option>
+      <wa-option value="double">Double</wa-option>
+    </wa-select>
     <h3>Other</h3>
+    <wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125"></wa-range>
     <wa-range name="shadows" label="Shadows" min="0" max="3" value="1"></wa-range>
-    <wa-range name="shadows" label="Spacing" min="0" max="10" value="5"></wa-range>
   </div>
 </div>
 
 <script>
   const container = document.getElementById('knobs');
   const themeStylesheet = document.getElementById('theme-stylesheet');
-  const themeSelector = container.querySelector('[name="theme"]');
 
-  // Change theme
-  themeSelector.addEventListener('wa-change', () => {
-    themeStylesheet.href = `/dist/themes/${themeSelector.value}.css`;
+  // Theme
+  container.querySelector('[name="theme"]').addEventListener('wa-change', event => {
+    themeStylesheet.href = `/dist/themes/${event.target.value}.css`;
   });
+  
+  // Heading text
+  container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
+  });
+
+  // Body text
+  container.querySelector('[name="body-text"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-font-family-body', event.target.value);
+  });
+
+  // Corners
+  container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-corners-base', `${event.target.value}rem`);
+  });
+
+  // Border width
+  container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-border-width-base', `${event.target.value / 16}rem`);
+  });
+
+  // Border style
+  container.querySelector('[name="border-style"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-border-style', event.target.value);
+  });
+
+  // Spacing style
+  container.querySelector('[name="spacing"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-space-base', `${event.target.value}rem`);
+  });
+
 </script>
 
 <style>
   :root {
-    --knobs-width: 400px;
+    --knobs-width: 300px;
   }
 
   #knobs {
@@ -60,7 +95,7 @@ toc: false
     border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
     border-radius: var(--wa-corners-2x);
     box-shadow: var(--wa-shadow-level-2);
-    max-width: var(--knobs-width);
+    width: var(--knobs-width);
     padding: 2rem;
     margin-inline: auto;
     margin-block: 0 4rem;
@@ -259,8 +294,8 @@ toc: false
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 1fr;
-    gap: var(--wa-space-m);
-    margin-block-start: var(--wa-space-m);
+    gap: 1rem;
+    margin-block-start: 1rem;
   }
 
   .cards wa-card::part(base) {
@@ -270,7 +305,7 @@ toc: false
   .space-vertically {
     display: flex;
     flex-direction: column;
-    gap: var(--wa-space-xl);
+    gap: 1.25rem;
   }
 
   @media screen and (max-width: 670px) {
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index 26086a512..5cc2bc001 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -7,6 +7,7 @@ export default css`
   :host {
     --border-color: var(--wa-color-surface-outline);
     --border-radius: var(--wa-panel-corners);
+    --border-style: var(--wa-border-style);
     --border-width: var(--wa-panel-border-width);
     --padding: var(--wa-space-l);
 
@@ -18,7 +19,7 @@ export default css`
     flex-direction: column;
     background-color: var(--wa-color-surface-raised);
     box-shadow: var(--wa-shadow-level-1);
-    border: solid var(--border-width) var(--border-color);
+    border: var(--border-style) var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
   }
 
@@ -41,7 +42,7 @@ export default css`
 
   .card__header {
     display: block;
-    border-bottom: solid var(--border-width) var(--border-color);
+    border-bottom: var(--border-style) var(--border-width) var(--border-color);
     padding: calc(var(--padding) / 2) var(--padding);
   }
 
@@ -61,7 +62,7 @@ export default css`
 
   .card--has-footer .card__footer {
     display: block;
-    border-top: solid var(--border-width) var(--border-color);
+    border-top: var(--border-style) var(--border-width) var(--border-color);
     padding: var(--padding);
   }
 
diff --git a/src/themes/default.css b/src/themes/default.css
index c100b4bb6..6d0807913 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -190,16 +190,16 @@
   /**
    * Spacing
    */
-
-  --wa-space-3xs: 0.125rem; /* 2 */
-  --wa-space-2xs: 0.25rem; /* 4 */
-  --wa-space-xs: 0.5rem; /* 8 */
-  --wa-space-s: 0.75rem; /* 12 */
-  --wa-space-m: 1rem; /* 16 */
-  --wa-space-l: 1.25rem; /* 20 */
-  --wa-space-xl: 1.5rem; /* 24 */
-  --wa-space-2xl: 2rem; /* 32 */
-  --wa-space-3xl: 3rem; /* 48 */
+  --wa-space-base: 1rem;
+  --wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
+  --wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
+  --wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
+  --wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
+  --wa-space-m: var(--wa-space-base); /* 16 */
+  --wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
+  --wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
+  --wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
+  --wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
 
   --wa-space-square-xs: var(--wa-space-xs);
   --wa-space-square-s: var(--wa-space-s);
@@ -222,17 +222,18 @@
   /**
    * Borders & corners
    */
-  --wa-border-width-thin: 0.0625rem; /* 1px */
-  --wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
-  --wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
+  --wa-border-width-base: 0.0625rem; /* 1px */
+  --wa-border-width-thin: var(--wa-border-width-base);
+  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
 
   --wa-border-style: solid;
 
-  /* TODO - add base tokens and make scales relative to those  */
-  --wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
-  --wa-corners-1x: 0.25rem;
-  --wa-corners-2x: calc(var(--wa-corners-1x) * 2);
-  --wa-corners-3x: calc(var(--wa-corners-1x) * 3);
+  --wa-corners-base: 0.25rem;
+  --wa-corners-half: calc(var(--wa-corners-base) * 0.5);
+  --wa-corners-1x: var(--wa-corners-base);
+  --wa-corners-2x: calc(var(--wa-corners-base) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-base) * 3);
 
   --wa-corners-pill: 9999px;
   --wa-corners-circle: 50%;
diff --git a/src/themes/mellow.css b/src/themes/mellow.css
index 5e754088f..657f8ab34 100644
--- a/src/themes/mellow.css
+++ b/src/themes/mellow.css
@@ -192,15 +192,16 @@
   /**
    * Spacing
    */
-  --wa-space-3xs: 0.125rem; /* 2 */
-  --wa-space-2xs: 0.25rem; /* 4 */
-  --wa-space-xs: 0.5rem; /* 8 */
-  --wa-space-s: 0.75rem; /* 12 */
-  --wa-space-m: 1rem; /* 16 */
-  --wa-space-l: 1.25rem; /* 20 */
-  --wa-space-xl: 1.5rem; /* 24 */
-  --wa-space-2xl: 2rem; /* 32 */
-  --wa-space-3xl: 3rem; /* 48 */
+  --wa-space-base: 1rem;
+  --wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
+  --wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
+  --wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
+  --wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
+  --wa-space-m: var(--wa-space-base); /* 16 */
+  --wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
+  --wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
+  --wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
+  --wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
 
   --wa-space-square-xs: var(--wa-space-xs);
   --wa-space-square-s: var(--wa-space-s);
@@ -223,16 +224,18 @@
   /**
    * Borders & corners
    */
-  --wa-border-width-thin: 0.0625rem; /* 1px */
-  --wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
-  --wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
+  --wa-border-width-base: 0.0625rem; /* 1px */
+  --wa-border-width-thin: var(--wa-border-width-base);
+  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
 
   --wa-border-style: solid;
 
-  --wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
-  --wa-corners-1x: 0.125rem;
-  --wa-corners-2x: calc(var(--wa-corners-1x) * 2);
-  --wa-corners-3x: calc(var(--wa-corners-1x) * 3);
+  --wa-corners-base: 0.125rem;
+  --wa-corners-half: calc(var(--wa-corners-base) * 0.5);
+  --wa-corners-1x: var(--wa-corners-base);
+  --wa-corners-2x: calc(var(--wa-corners-base) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-base) * 3);
 
   --wa-corners-pill: 9999px;
   --wa-corners-circle: 50%;
@@ -306,8 +309,8 @@
   --wa-flow-spacing: 1.5rem;
 }
 
-:host,
-.wa-theme-mellow-dark {
+.wa-theme-mellow-dark,
+.wa-theme-mellow-dark :host {
   color-scheme: dark;
 
   /**