From fe23a7ddb8b18cc4c00f09c734578815a13d0e37 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Mon, 11 Dec 2023 11:51:53 -0600
Subject: [PATCH 1/2] add list of curated fonts

---
 docs/_includes/default.njk        |   1 +
 docs/pages/experimental/themer.md | 144 ++++++++++++++++++++++++++----
 2 files changed, 129 insertions(+), 16 deletions(-)

diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk
index a34f47bbb..cb4b4de39 100644
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -52,6 +52,7 @@
     <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">
 
     {# 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 8af13ad08..f51ad6884 100644
--- a/docs/pages/experimental/themer.md
+++ b/docs/pages/experimental/themer.md
@@ -17,19 +17,39 @@ toc: false
       <wa-option value="playful">Playful</wa-option>
       <wa-option value="chic">Chic</wa-option>
     </wa-select>
-    <wa-select name="heading-text" label="Heading" value="">
-      <wa-option value="">Theme default</wa-option>
-      <wa-option value="serif">Serif</wa-option>
-      <wa-option value="sans-serif">Sans-serif</wa-option>
-      <wa-option value="monospace">Monospace</wa-option>
-      <wa-option value="cursive">Cursive</wa-option>
+    <wa-select name="heading-text" label="Heading" value="default">
+      <wa-option value="default">Theme default</wa-option>
+      <wa-option value="assistant">Assistant</wa-option>
+      <wa-option value="inter">Inter</wa-option>
+      <wa-option value="lora">Lora</wa-option>
+      <wa-option value="noto-sans">Noto Sans</wa-option>
+      <wa-option value="noto-sans-display">Noto Sans Display</wa-option>
+      <wa-option value="noto-sans-mono">Noto Sans Mono</wa-option>
+      <wa-option value="noto-serif">Noto Serif</wa-option>
+      <wa-option value="open-sans">Open Sans</wa-option>
+      <wa-option value="playfair">Playfair</wa-option>
+      <wa-option value="playfair-display">Playfair Display</wa-option>
+      <wa-option value="quicksand">Quicksand</wa-option>
+      <wa-option value="roboto-flex">Roboto Flex</wa-option>
+      <wa-option value="roboto-mono">Roboto Mono</wa-option>
+      <wa-option value="roboto-serif">Roboto Serif</wa-option>
+      <wa-option value="roboto-slab">Roboto Slab</wa-option>
     </wa-select>
-    <wa-select name="body-text" label="Body" value="">
-      <wa-option value="">Theme default</wa-option>
-      <wa-option value="serif">Serif</wa-option>
-      <wa-option value="sans-serif">Sans-serif</wa-option>
-      <wa-option value="monospace">Monospace</wa-option>
-      <wa-option value="cursive">Cursive</wa-option>
+    <wa-select name="body-text" label="Body" value="default">
+      <wa-option value="default">Theme default</wa-option>
+      <wa-option value="assistant">Assistant</wa-option>
+      <wa-option value="inter">Inter</wa-option>
+      <wa-option value="lora">Lora</wa-option>
+      <wa-option value="noto-sans">Noto Sans</wa-option>
+      <wa-option value="noto-sans-mono">Noto Sans Mono</wa-option>
+      <wa-option value="noto-serif">Noto Serif</wa-option>
+      <wa-option value="open-sans">Open Sans</wa-option>
+      <wa-option value="playfair">Playfair</wa-option>
+      <wa-option value="quicksand">Quicksand</wa-option>
+      <wa-option value="roboto-flex">Roboto Flex</wa-option>
+      <wa-option value="roboto-mono">Roboto Mono</wa-option>
+      <wa-option value="roboto-serif">Roboto Serif</wa-option>
+      <wa-option value="roboto-slab">Roboto Slab</wa-option>
     </wa-select>
     <wa-select name="border-style" label="Border Style" value="solid">
       <wa-option value="solid">Solid</wa-option>
@@ -53,13 +73,105 @@ toc: false
   });
   
   // Heading text
-  container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
-    document.documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
+  container.querySelector('[name="heading-text"]').addEventListener('wa-change', event => {
+    let fontFamily;
+    switch(event.target.value) {
+      case 'assistant':
+        fontFamily = `'Assistant', sans-serif`;
+        break;
+      case 'inter':
+        fontFamily = `'inter', sans-serif`;
+        break;
+      case 'lora':
+        fontFamily = `'Lora', serif`  
+      case 'noto-sans':
+          fontFamily = `'Noto Sans', sans-serif`;
+          break;
+      case 'noto-sans-display':
+          fontFamily = `'Noto Sans Display', sans-serif`;
+          break;
+      case 'noto-sans-mono':
+          fontFamily = `'Noto Sans Mono', monospace`;
+          break;
+      case 'noto-serif':
+          fontFamily = `'Noto Serif', serif`;
+          break;
+      case 'open-sans':
+          fontFamily = `'Open Sans', sans-serif`;
+          break;
+      case 'playfair':
+          fontFamily = `'Playfair', serif`;
+          break;
+      case 'playfair-display':
+          fontFamily = `'Playfair Display', serif`;
+          break;
+      case 'quicksand':
+          fontFamily = `'Quicksand', sans-serif`;
+          break;
+      case 'roboto-flex':
+          fontFamily = `'Roboto Flex', sans-serif`;
+          break;
+      case 'roboto-mono':
+          fontFamily = `'Roboto Mono', monospace`;
+          break;
+      case 'roboto-serif':
+          fontFamily = `'Roboto Serif', serif`;
+          break;
+      case 'roboto-slab':
+          fontFamily = `'Roboto Slab', serif`;
+          break;
+      default:
+        fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    }
+    document.documentElement.style.setProperty('--wa-font-family-heading', fontFamily);
   });
 
   // Body text
-  container.querySelector('[name="body-text"]').addEventListener('wa-input', event => {
-    document.documentElement.style.setProperty('--wa-font-family-body', event.target.value);
+  container.querySelector('[name="body-text"]').addEventListener('wa-change', event => {
+    let fontFamily;
+    switch(event.target.value) {
+      case 'assistant':
+        fontFamily = `'Assistant', sans-serif`;
+        break;
+      case 'inter':
+        fontFamily = `'inter', sans-serif`;
+        break;
+      case 'lora':
+        fontFamily = `'Lora', serif`  
+      case 'noto-sans':
+          fontFamily = `'Noto Sans', sans-serif`;
+          break;
+      case 'noto-sans-mono':
+          fontFamily = `'Noto Sans Mono', monospace`;
+          break;
+      case 'noto-serif':
+          fontFamily = `'Noto Serif', serif`;
+          break;
+      case 'open-sans':
+          fontFamily = `'Open Sans', sans-serif`;
+          break;
+      case 'playfair':
+          fontFamily = `'Playfair', serif`;
+          break;
+      case 'quicksand':
+          fontFamily = `'Quicksand', sans-serif`;
+          break;
+      case 'roboto-flex':
+          fontFamily = `'Roboto Flex', sans-serif`;
+          break;
+      case 'roboto-mono':
+          fontFamily = `'Roboto Mono', monospace`;
+          break;
+      case 'roboto-serif':
+          fontFamily = `'Roboto Serif', serif`;
+          break;
+      case 'roboto-slab':
+          fontFamily = `'Roboto Slab', serif`;
+          break;
+      default:
+        fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    }
+    document.documentElement.style.setProperty('--wa-font-family-body', fontFamily);
   });
 
   // Corners

From 0c95c701921895f95cc8cafdb2664c6381882f5a Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Wed, 3 Jan 2024 11:30:16 -0600
Subject: [PATCH 2/2] updated spacing issue

---
 docs/pages/experimental/themer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md
index d81ebc925..d9dd7bf42 100644
--- a/docs/pages/experimental/themer.md
+++ b/docs/pages/experimental/themer.md
@@ -116,7 +116,7 @@ toc: false
           break;
       case 'roboto-serif':
           fontFamily = `'Roboto Serif', serif`;
-          break;
+          break; 
       case 'roboto-slab':
           fontFamily = `'Roboto Slab', serif`;
           break;