Add nord theme

packages/builder/src/builderStore/store/theme.js

@@ -21,6 +21,10 @@ export const getThemeStore = () => {
         `spectrum--${option}`,
         option === state.theme
       )
+
+      // Ensure darkest is always added as this is the base class for custom
+      // themes
+      themeElement.classList.add("spectrum--darkest")
     })
   })
 

packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte

@@ -20,6 +20,10 @@
       label: "Darkest",
       value: "spectrum--darkest",
     },
+    {
+      label: "Nord",
+      value: "spectrum--nord",
+    },
   ]
 
   const onChangeTheme = async theme => {

packages/builder/src/main.js

@@ -5,6 +5,7 @@ import "@spectrum-css/vars/dist/spectrum-darkest.css"
 import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-lightest.css"
+import "@budibase/frontend-core/src/themes/nord.css"
 import "@spectrum-css/page/dist/index-vars.css"
 import "./global.css"
 import { suppressWarnings } from "./helpers/warnings"

packages/client/src/components/ClientApp.svelte

@@ -77,7 +77,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium {$themeStore.theme}"
+    class="spectrum spectrum--medium spectrum--darkest {$themeStore.theme}"
   >
     {#if permissionError}
       <div class="error">

packages/client/src/components/app/index.js

@@ -1,10 +1,11 @@
 import "@spectrum-css/vars/dist/spectrum-global.css"
 import "@spectrum-css/vars/dist/spectrum-medium.css"
 import "@spectrum-css/vars/dist/spectrum-large.css"
-import "@spectrum-css/vars/dist/spectrum-lightest.css"
-import "@spectrum-css/vars/dist/spectrum-light.css"
-import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-darkest.css"
+import "@spectrum-css/vars/dist/spectrum-dark.css"
+import "@spectrum-css/vars/dist/spectrum-light.css"
+import "@spectrum-css/vars/dist/spectrum-lightest.css"
+import "@budibase/frontend-core/src/themes/nord.css"
 import "@spectrum-css/page/dist/index-vars.css"
 
 // Non user-facing components
@@ -34,6 +35,7 @@ export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"
+
 export * from "./blocks"
 export * from "./dynamic-filter"