Merge pull request #6897 from Budibase/nord-theme

Nord theme + Midnight theme

packages/bbui/src/Tooltip/Tooltip.svelte

@@ -26,5 +26,9 @@
 <style>
   .tooltip {
     pointer-events: none;
+    background: var(--spectrum-global-color-gray-500);
+  }
+  .spectrum-Tooltip-tip {
+    border-top-color: var(--spectrum-global-color-gray-500);
   }
 </style>

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

@@ -1,11 +1,10 @@
-import { createLocalStorageStore } from "@budibase/frontend-core"
+import { Constants, createLocalStorageStore } from "@budibase/frontend-core"
 
 export const getThemeStore = () => {
   const themeElement = document.documentElement
 
   const initialValue = {
     theme: "darkest",
-    options: ["lightest", "light", "dark", "darkest", "nord"],
   }
   const store = createLocalStorageStore("bb-theme", initialValue)
 
@@ -17,11 +16,14 @@ export const getThemeStore = () => {
       return
     }
 
-    state.options.forEach(option => {
+    Constants.ThemeOptions.forEach(option => {
       themeElement.classList.toggle(
         `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/main.js

@@ -5,6 +5,8 @@ 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 "@budibase/frontend-core/src/themes/midnight.css"
 import "@spectrum-css/page/dist/index-vars.css"
 import "./global.css"
 import { suppressWarnings } from "./helpers/warnings"

packages/builder/src/pages/builder/portal/settings/theming.svelte

@@ -2,6 +2,7 @@
   import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui"
   import { themeStore } from "builderStore"
   import { capitalise } from "helpers"
+  import { Constants } from "@budibase/frontend-core"
 </script>
 
 <Layout noPadding>
@@ -14,7 +15,7 @@
     <div class="field">
       <Label size="L">Builder theme</Label>
       <Select
-        options={$themeStore.options}
+        options={Constants.ThemeOptions}
         bind:value={$themeStore.theme}
         placeholder={null}
         getOptionLabel={capitalise}

packages/client/src/components/ClientApp.svelte

@@ -92,7 +92,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium {$themeStore.theme}"
+    class="spectrum spectrum--medium spectrum--darkest {$themeStore.theme}"
   >
     <DeviceBindingsProvider>
       <UserBindingsProvider>

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

@@ -1,10 +1,10 @@
 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 "@spectrum-css/page/dist/index-vars.css"
 
 // Non user-facing components
@@ -35,6 +35,7 @@ export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"
+
 export * from "./blocks"
 export * from "./dynamic-filter"
 

packages/frontend-core/src/constants.js

@@ -98,3 +98,12 @@ export const SqlNumberTypeRangeMap = {
     min: -8388608,
   },
 }
+
+export const ThemeOptions = [
+  "lightest",
+  "light",
+  "dark",
+  "darkest",
+  "nord",
+  "midnight",
+]

packages/frontend-core/src/themes/midnight.css

@@ -0,0 +1,16 @@
+.spectrum--midnight {
+    --hue: 220;
+    --sat: 10%;
+    --spectrum-global-color-gray-50: hsl(var(--hue), var(--sat), 12%);
+    --spectrum-global-color-gray-75: hsl(var(--hue), var(--sat), 15%);
+    --spectrum-global-color-gray-100: hsl(var(--hue), var(--sat), 17%);
+    --spectrum-global-color-gray-200: hsl(var(--hue), var(--sat), 20%);
+    --spectrum-global-color-gray-300: hsl(var(--hue), var(--sat), 24%);
+    --spectrum-global-color-gray-400: hsl(var(--hue), var(--sat), 32%);
+    --spectrum-global-color-gray-500: hsl(var(--hue), var(--sat), 40%);
+    --spectrum-global-color-gray-600: hsl(var(--hue), var(--sat), 60%);
+    --spectrum-global-color-gray-700: hsl(var(--hue), var(--sat), 70%);
+    --spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 80%);
+    --spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%);
+}
+

packages/frontend-core/src/themes/nord.css

@@ -0,0 +1,46 @@
+.spectrum--nord {
+  --spectrum-global-color-red-400: #bf616a;
+  --spectrum-global-color-red-500: #c26971;
+  --spectrum-global-color-red-600: #c57179;
+  --spectrum-global-color-red-700: #c97980;
+  --spectrum-global-color-static-red-400: #bf616a;
+  --spectrum-global-color-static-red-500: #c26971;
+  --spectrum-global-color-static-red-600: #c57179;
+  --spectrum-global-color-static-red-700: #c97980;
+
+  --spectrum-global-color-green-400: #719453;
+  --spectrum-global-color-green-500: #789d58;
+  --spectrum-global-color-green-600: #7fa55e;
+  --spectrum-global-color-green-700: #86aa67;
+  --spectrum-global-color-static-green-400: #719453;
+  --spectrum-global-color-static-green-500: #789d58;
+  --spectrum-global-color-static-green-600: #7fa55e;
+  --spectrum-global-color-static-green-700: #86aa67;
+
+  --spectrum-global-color-blue-400: #5680b4;
+  --spectrum-global-color-blue-500: #5e86b8;
+  --spectrum-global-color-blue-600: #668dbb;
+  --spectrum-global-color-blue-700: #6f93bf;
+  --spectrum-global-color-static-blue-200: #7799c4;
+  --spectrum-global-color-static-blue-300: #6f93bf;
+  --spectrum-global-color-static-blue-400: #668dbb;
+  --spectrum-global-color-static-blue-500: #5e86b8;
+  --spectrum-global-color-static-blue-600: #5680b4;
+  --spectrum-global-color-static-blue-700: #4e79af;
+  --spectrum-global-color-static-blue-800: #4a73a6;
+
+  --spectrum-global-color-gray-50: #2e3440;
+  --spectrum-global-color-gray-75: #353b4a;
+  --spectrum-global-color-gray-100: #3b4252;
+  --spectrum-global-color-gray-200: #4a5367;
+  --spectrum-global-color-gray-300: #4c566a;
+  --spectrum-global-color-gray-400: #5a657d;
+  --spectrum-global-color-gray-500: #677590;
+  --spectrum-global-color-gray-600: #79869f;
+  --spectrum-global-color-gray-700: #a9b1c1;
+  --spectrum-global-color-gray-800: #bac1cd;
+  --spectrum-global-color-gray-900: #eceff4;
+
+  --spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.06);
+  --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
+}