Add groundwork for custom themes based off other themes

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

@@ -16,16 +16,19 @@ export const getThemeStore = () => {
       return
     }
 
-    Constants.ThemeOptions.forEach(option => {
+    // Update global class names to use the new theme and remove others
+    Constants.Themes.forEach(option => {
       themeElement.classList.toggle(
-        `spectrum--${option}`,
+        `spectrum--${option.class}`,
-        option === state.theme
+        option.class === state.theme
       )
-
-      // Ensure darkest is always added as this is the base class for custom
-      // themes
-      themeElement.classList.add("spectrum--darkest")
     })
+
+    // Add base theme if required
+    const selectedTheme = Constants.Themes.find(x => x.class === state.theme)
+    if (selectedTheme?.base) {
+      themeElement.classList.add(`spectrum--${selectedTheme.base}`)
+    }
   })
 
   return store

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

@@ -1,7 +1,6 @@
 <script>
   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>
 
@@ -15,10 +14,11 @@
     <div class="field">
       <Label size="L">Builder theme</Label>
       <Select
-        options={Constants.ThemeOptions}
+        options={Constants.Themes}
         bind:value={$themeStore.theme}
         placeholder={null}
-        getOptionLabel={capitalise}
+        getOptionLabel={x => x.name}
+        getOptionValue={x => x.class}
       />
     </div>
   </div>

packages/frontend-core/src/constants.js

@@ -99,11 +99,31 @@ export const SqlNumberTypeRangeMap = {
   },
 }
 
-export const ThemeOptions = [
+export const Themes = [
-  "lightest",
+  {
-  "light",
+    class: "lightest",
-  "dark",
+    name: "Lightest",
-  "darkest",
+  },
-  "nord",
+  {
-  "midnight",
+    class: "light",
+    name: "Light",
+  },
+  {
+    class: "dark",
+    name: "Dark",
+  },
+  {
+    class: "darkest",
+    name: "Darkest",
+  },
+  {
+    class: "nord",
+    name: "Nord",
+    base: "darkest",
+  },
+  {
+    class: "midnight",
+    name: "Midnight",
+    base: "darkest",
+  },
 ]