Update font styles to allow for easy customisation

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) {

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;

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;

packages/bbui/src/Modal/Modal.svench

@@ -19,7 +19,6 @@
 
 <style>
   p, span {
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
 

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;

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 {

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 {

packages/bbui/src/Typography/Heading.svelte

@@ -15,3 +15,9 @@
 >
   <slot />
 </h1>
+
+<style>
+  h1 {
+    font-family: var(--font-accent);
+  }
+</style>

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;

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);

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;

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>

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);
 }

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")}
           >

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}