From dfed2c26c7dd73bf48cd78c5e6b8f66d9a9639bd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Dec 2022 15:33:16 +0000
Subject: [PATCH] Update font styles to allow for easy customisation

---
 packages/bbui/src/Drawer/DrawerContent.svelte            | 1 -
 packages/bbui/src/Form/Core/DatePicker.svelte            | 2 +-
 packages/bbui/src/Modal/CustomContent.svelte             | 1 -
 packages/bbui/src/Modal/Modal.svench                     | 1 -
 packages/bbui/src/Modal/ModalContent.svelte              | 3 ++-
 packages/bbui/src/Modal/QuizModal.svelte                 | 1 -
 packages/bbui/src/Popover/Popover.svench                 | 1 -
 packages/bbui/src/Typography/Heading.svelte              | 6 ++++++
 packages/bbui/src/bbui.css                               | 9 ++++++---
 .../src/components/common/CodeMirrorEditor.svelte        | 2 +-
 .../src/components/common/bindings/BindingPanel.svelte   | 2 +-
 .../src/components/integration/QueryEditor.svelte        | 2 +-
 packages/builder/src/global.css                          | 1 -
 packages/builder/src/pages/builder/portal/_layout.svelte | 1 -
 .../src/pages/builder/portal/settings/email/index.svelte | 1 +
 15 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 28e0975d82..944a3f4313 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -34,7 +34,6 @@
     display: none;
   }
   .main {
-    font-family: var(--font-sans);
     padding: var(--spacing-xl);
   }
   .main :global(textarea) {
diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index 6996525a76..10aae67ec6 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -264,7 +264,7 @@
     max-height: 100%;
   }
   :global(.flatpickr-calendar) {
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: var(--font-sans);
   }
   .is-disabled {
     pointer-events: none !important;
diff --git a/packages/bbui/src/Modal/CustomContent.svelte b/packages/bbui/src/Modal/CustomContent.svelte
index 6eca00cc5c..218224146c 100644
--- a/packages/bbui/src/Modal/CustomContent.svelte
+++ b/packages/bbui/src/Modal/CustomContent.svelte
@@ -26,7 +26,6 @@
     padding: 40px;
     background-color: var(--purple);
     color: white;
-    font-family: var(--font-sans);
     font-weight: bold;
     text-align: center;
     user-select: none;
diff --git a/packages/bbui/src/Modal/Modal.svench b/packages/bbui/src/Modal/Modal.svench
index 2b7006bf37..93ed959125 100644
--- a/packages/bbui/src/Modal/Modal.svench
+++ b/packages/bbui/src/Modal/Modal.svench
@@ -19,7 +19,6 @@
 
 <style>
   p, span {
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
 
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index eb73e255d5..91b7c26d03 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -151,7 +151,8 @@
     overflow: visible;
   }
   .spectrum-Dialog-heading {
-    font-family: var(--font-sans);
+    font-family: var(--font-accent);
+    font-weight: 600;
   }
   .spectrum-Dialog-heading.noDivider {
     margin-bottom: 12px;
diff --git a/packages/bbui/src/Modal/QuizModal.svelte b/packages/bbui/src/Modal/QuizModal.svelte
index 203a4256db..add5cb776b 100644
--- a/packages/bbui/src/Modal/QuizModal.svelte
+++ b/packages/bbui/src/Modal/QuizModal.svelte
@@ -42,7 +42,6 @@
 <style>
   p {
     margin: 0;
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
   p.error {
diff --git a/packages/bbui/src/Popover/Popover.svench b/packages/bbui/src/Popover/Popover.svench
index 4d48d7f121..21ca0c66e8 100644
--- a/packages/bbui/src/Popover/Popover.svench
+++ b/packages/bbui/src/Popover/Popover.svench
@@ -29,7 +29,6 @@
     font-size: var(--font-size-m);
     margin: 0 0 var(--spacing-l) 0;
     font-weight: 600;
-    font-family: var(--font-sans);
   }
 
   .input-group-column {
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
index 077c0a4878..5f243ad5a6 100644
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -15,3 +15,9 @@
 >
   <slot />
 </h1>
+
+<style>
+  h1 {
+    font-family: var(--font-accent);
+  }
+</style>
diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index f98f27bf58..b3213ef694 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -40,12 +40,15 @@
   --rounded-medium: 8px;
   --rounded-large: 16px;
 
-  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
+  --spectrum-alias-body-text-font-family: var(--font-sans);
 
   font-size: 16px;
   --font-size-xs: 0.75rem;
diff --git a/packages/builder/src/components/common/CodeMirrorEditor.svelte b/packages/builder/src/components/common/CodeMirrorEditor.svelte
index 9d036e21ce..9986b9824c 100644
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@@ -135,7 +135,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height);
     min-height: var(--code-mirror-height);
-    font-family: monospace;
+    font-family: var(--font-mono);
     line-height: 1.3;
     border: var(--spectrum-alias-border-size-thin) solid;
     border-color: var(--spectrum-alias-border-color);
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 83fc19f388..d995bd507b 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -469,7 +469,7 @@
   }
 
   .binding__type {
-    font-family: monospace;
+    font-family: var(--font-mono);
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: var(--border-radius-s);
     padding: 2px 4px;
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index b44477da9a..3b4f1af96e 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -185,7 +185,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
-    font-family: monospace !important;
+    font-family: var(--font-mono);
     line-height: 1.3;
   }
 </style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index e0ebecedf9..5e9a35706e 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -23,7 +23,6 @@ body {
   --grey-8: var(--spectrum-global-color-gray-800);
   --grey-9: var(--spectrum-global-color-gray-900);
 
-  font-family: var(--font-sans);
   color: var(--ink);
   background-color: var(--background-alt);
 }
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 336867f5de..6272b29185 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -184,7 +184,6 @@
         </div>
         {#if !$adminStore.cloud && $auth.isAdmin}
           <Button
-            size="S"
             cta
             on:click={() => $goto("/builder/portal/settings/upgrade")}
           >
diff --git a/packages/builder/src/pages/builder/portal/settings/email/index.svelte b/packages/builder/src/pages/builder/portal/settings/email/index.svelte
index 71687bcc70..940686605b 100644
--- a/packages/builder/src/pages/builder/portal/settings/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/email/index.svelte
@@ -178,6 +178,7 @@
     <div class="spectrum-ButtonGroup spectrum-Settings-buttonGroup">
       <Button cta on:click={saveSmtp}>Save</Button>
       <Button
+        newStyles
         secondary
         on:click={deleteSmtp}
         disabled={!$admin.checklist.smtp.checked}