From 30256bbb8dc8f139a3739cf078f09dd827a3eb01 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 27 Jul 2022 16:37:35 +0100
Subject: [PATCH] Add groundwork for custom themes based off other themes

---
 .../builder/src/builderStore/store/theme.js   | 17 ++++++----
 .../builder/portal/settings/theming.svelte    |  6 ++--
 packages/frontend-core/src/constants.js       | 34 +++++++++++++++----
 3 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js
index 54323ba55f..fe89757111 100644
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/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}`,
-        option === state.theme
+        `spectrum--${option.class}`,
+        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
diff --git a/packages/builder/src/pages/builder/portal/settings/theming.svelte b/packages/builder/src/pages/builder/portal/settings/theming.svelte
index 2a8e82f0e5..ac5398a032 100644
--- a/packages/builder/src/pages/builder/portal/settings/theming.svelte
+++ b/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>
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index 011c0041e9..74ce6ae881 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -99,11 +99,31 @@ export const SqlNumberTypeRangeMap = {
   },
 }
 
-export const ThemeOptions = [
-  "lightest",
-  "light",
-  "dark",
-  "darkest",
-  "nord",
-  "midnight",
+export const Themes = [
+  {
+    class: "lightest",
+    name: "Lightest",
+  },
+  {
+    class: "light",
+    name: "Light",
+  },
+  {
+    class: "dark",
+    name: "Dark",
+  },
+  {
+    class: "darkest",
+    name: "Darkest",
+  },
+  {
+    class: "nord",
+    name: "Nord",
+    base: "darkest",
+  },
+  {
+    class: "midnight",
+    name: "Midnight",
+    base: "darkest",
+  },
 ]