Merge pull request #14858 from Budibase/remove-lightest-and-dark-themes

Remove lightest and dark themes and add core types and utils for themes

packages/builder/src/components/commandPalette/CommandPalette.svelte

@@ -22,7 +22,7 @@
   } from "stores/builder"
   import { themeStore } from "stores/portal"
   import { getContext } from "svelte"
-  import { Constants } from "@budibase/frontend-core"
+  import { ThemeOptions } from "@budibase/shared-core"
 
   const modalContext = getContext(Context.Modal)
   const commands = [
@@ -141,13 +141,13 @@
       icon: "ShareAndroid",
       action: () => $goto(`./automation/${automation._id}`),
     })) ?? []),
-    ...Constants.Themes.map(theme => ({
+    ...ThemeOptions.map(themeMeta => ({
       type: "Change Builder Theme",
-      name: theme.name,
+      name: themeMeta.name,
       icon: "ColorPalette",
       action: () =>
         themeStore.update(state => {
-          state.theme = theme.class
+          state.theme = themeMeta.id
           return state
         }),
     })),

packages/builder/src/components/integration/QueryEditor.svelte

@@ -3,6 +3,7 @@
   import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { themeStore } from "stores/portal"
+  import { Theme } from "@budibase/types"
 
   const dispatch = createEventDispatcher()
 
@@ -116,7 +117,7 @@
       readOnly,
       autoCloseBrackets: true,
       autoCloseTags: true,
-      theme: $themeStore.theme.includes("light") ? THEMES.LIGHT : THEMES.DARK,
+      theme: $themeStore.theme === Theme.LIGHT ? THEMES.LIGHT : THEMES.DARK,
     }
 
     if (!tab)

packages/builder/src/components/settings/ThemeModal.svelte

@@ -1,15 +1,15 @@
 <script>
   import { ModalContent, Select } from "@budibase/bbui"
   import { themeStore } from "stores/portal"
-  import { Constants } from "@budibase/frontend-core"
+  import { ThemeOptions } from "@budibase/shared-core"
 </script>
 
 <ModalContent title="Theme">
   <Select
-    options={Constants.Themes}
+    options={ThemeOptions}
     bind:value={$themeStore.theme}
     placeholder={null}
     getOptionLabel={x => x.name}
-    getOptionValue={x => x.class}
+    getOptionValue={x => x.id}
   />
 </ModalContent>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte

@@ -1,11 +1,11 @@
 <script>
   import { notifications } from "@budibase/bbui"
   import { themeStore, appStore } from "stores/builder"
-  import { Constants } from "@budibase/frontend-core"
+  import { ThemeOptions, getThemeClassNames } from "@budibase/shared-core"
 
   const onChangeTheme = async theme => {
     try {
-      await themeStore.save(`spectrum--${theme}`, $appStore.appId)
+      await themeStore.save(theme, $appStore.appId)
     } catch (error) {
       notifications.error("Error updating theme")
     }
@@ -15,17 +15,14 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container">
-  {#each Constants.Themes as theme}
+  {#each ThemeOptions as themeMeta}
     <div
       class="theme"
-      class:selected={`spectrum--${theme.class}` === $themeStore.theme}
+      class:selected={themeMeta.id === $themeStore.theme}
-      on:click={() => onChangeTheme(theme.class)}
+      on:click={() => onChangeTheme(themeMeta.id)}
     >
-      <div
+      <div class="color {getThemeClassNames(themeMeta.id)}" />
-        style="background: {theme.preview}"
+      {themeMeta.name}
-        class="color spectrum--{theme.class}"
-      />
-      {theme.name}
     </div>
   {/each}
 </div>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -19,6 +19,7 @@
   import { findComponent, findComponentPath } from "helpers/components"
   import { isActive, goto } from "@roxi/routify"
   import { ClientAppSkeleton } from "@budibase/frontend-core"
+  import { getThemeClassNames, ThemeClassPrefix } from "@budibase/shared-core"
 
   let iframe
   let layout
@@ -47,7 +48,9 @@
     layout,
     screen,
     selectedComponentId,
-    theme: $themeStore.theme,
+    theme: $appStore.clientFeatures.unifiedThemes
+      ? $themeStore.theme
+      : `${ThemeClassPrefix}${$themeStore.theme}`,
     customTheme: $themeStore.customTheme,
     previewDevice: $previewStore.previewDevice,
     messagePassing: $appStore.clientFeatures.messagePassing,
@@ -257,7 +260,7 @@
   class:mobile={$previewStore.previewDevice === "mobile"}
 >
   {#if loading}
-    <div class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}>
+    <div class={`loading ${getThemeClassNames($themeStore.theme)}`}>
       <ClientAppSkeleton
         sideNav={$navigationStore?.navigation === "Left"}
         hideFooter

packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte

@@ -18,10 +18,10 @@
     TooltipPosition,
     TooltipType,
   } from "@budibase/bbui"
-  import { sdk } from "@budibase/shared-core"
+  import { sdk, getThemeClassNames } from "@budibase/shared-core"
   import { API } from "api"
   import ErrorSVG from "./ErrorSVG.svelte"
-  import { getBaseTheme, ClientAppSkeleton } from "@budibase/frontend-core"
+  import { ClientAppSkeleton } from "@budibase/frontend-core"
   import { contextMenuStore } from "stores/builder"
 
   $: app = $enrichedApps.find(app => app.appId === $params.appId)
@@ -163,9 +163,7 @@
       class:hide={!loading || !app?.features?.skeletonLoader}
       class="loading"
     >
-      <div
+      <div class="loadingThemeWrapper {getThemeClassNames(app.theme)}">
-        class={`loadingThemeWrapper ${getBaseTheme(app.theme)} ${app.theme}`}
-      >
         <ClientAppSkeleton
           noAnimation
           hideDevTools={app?.status === "published"}

packages/builder/src/stores/builder/theme.js

@@ -1,24 +1,19 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
-import { getBaseTheme } from "@budibase/frontend-core"
+import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
 
-const INITIAL_THEMES_STATE = {
+export const createThemeStore = () => {
-  theme: "",
-  customTheme: {},
-}
-
-export const themes = () => {
   const store = writable({
-    ...INITIAL_THEMES_STATE,
+    theme: DefaultAppTheme,
+    customTheme: {},
   })
 
   const syncAppTheme = app => {
     store.update(state => {
-      const theme = app.theme || "spectrum--light"
+      const theme = ensureValidTheme(app.theme, DefaultAppTheme)
       return {
         ...state,
         theme,
-        baseTheme: getBaseTheme(theme),
         customTheme: app.customTheme,
       }
     })
@@ -51,7 +46,7 @@ export const themes = () => {
     const { theme, customTheme } = metadata
     store.update(state => ({
       ...state,
-      theme,
+      theme: ensureValidTheme(theme, DefaultAppTheme),
       customTheme,
     }))
   }
@@ -66,4 +61,4 @@ export const themes = () => {
   }
 }
 
-export const themeStore = themes()
+export const themeStore = createThemeStore()

packages/builder/src/stores/portal/theme.js

@@ -1,38 +1,37 @@
-import { Constants, createLocalStorageStore } from "@budibase/frontend-core"
+import { createLocalStorageStore } from "@budibase/frontend-core"
+import { derived } from "svelte/store"
+import {
+  DefaultBuilderTheme,
+  ensureValidTheme,
+  getThemeClassNames,
+  ThemeOptions,
+  ThemeClassPrefix,
+} from "@budibase/shared-core"
 
 export const getThemeStore = () => {
   const themeElement = document.documentElement
-
   const initialValue = {
-    theme: "darkest",
+    theme: DefaultBuilderTheme,
   }
   const store = createLocalStorageStore("bb-theme", initialValue)
+  const derivedStore = derived(store, $store => ({
+    ...$store,
+    theme: ensureValidTheme($store.theme, DefaultBuilderTheme),
+  }))
 
   // Update theme class when store changes
-  store.subscribe(state => {
+  derivedStore.subscribe(({ theme }) => {
-    // Handle any old local storage values - this can be removed after the update
+    const classNames = getThemeClassNames(theme).split(" ")
-    if (state.darkMode !== undefined) {
+    ThemeOptions.forEach(option => {
-      store.set(initialValue)
+      const className = `${ThemeClassPrefix}${option.id}`
-      return
+      themeElement.classList.toggle(className, classNames.includes(className))
-    }
+    })
-
-    // Update global class names to use the new theme and remove others
-    Constants.Themes.forEach(option => {
-      themeElement.classList.toggle(
-        `spectrum--${option.class}`,
-        option.class === state.theme
-      )
   })
 
-    // Add base theme if required
+  return {
-    const selectedTheme = Constants.Themes.find(x => x.class === state.theme)
+    ...store,
-    if (selectedTheme?.base) {
+    subscribe: derivedStore.subscribe,
-      themeElement.classList.add(`spectrum--${selectedTheme.base}`)
   }
-  })
-
-  return store
 }
 
-// ?? confusion
 export const themeStore = getThemeStore()

packages/client/manifest.json

@@ -1,6 +1,7 @@
 {
   "features": {
     "spectrumThemes": true,
+    "unifiedTheme": true,
     "intelligentLoading": true,
     "deviceAwareness": true,
     "state": true,

packages/client/src/components/ClientApp.svelte

@@ -4,6 +4,7 @@
   import { Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
   import { Constants, CookieUtils } from "@budibase/frontend-core"
+  import { getThemeClassNames } from "@budibase/shared-core"
   import Component from "./Component.svelte"
   import SDK from "sdk"
   import {
@@ -154,7 +155,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
+    class="spectrum spectrum--medium {getThemeClassNames($themeStore.theme)}"
     class:builder={$builderStore.inBuilder}
     class:show={fontsLoaded && dataLoaded}
   >

packages/client/src/stores/theme.js

@@ -1,12 +1,11 @@
 import { derived } from "svelte/store"
 import { appStore } from "./app"
 import { builderStore } from "./builder"
-import { getBaseTheme } from "@budibase/frontend-core"
+import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
 
 // This is the good old acorn bug where having the word "g l o b a l" makes it
 // think that this is not ES6 compatible and starts throwing errors when using
 // optional chaining. Piss off acorn.
-const defaultTheme = "spectrum--light"
 const defaultCustomTheme = {
   primaryColor: "var(--spectrum-glo" + "bal-color-blue-600)",
   primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
@@ -27,7 +26,7 @@ const createThemeStore = () => {
       }
 
       // Ensure theme is set
-      theme = theme || defaultTheme
+      theme = ensureValidTheme(theme, DefaultAppTheme)
 
       // Delete and nullish keys from the custom theme
       if (customTheme) {
@@ -52,7 +51,6 @@ const createThemeStore = () => {
 
       return {
         theme,
-        baseTheme: getBaseTheme(theme),
         customTheme,
         customThemeCss,
       }

packages/frontend-core/src/constants.js

@@ -108,35 +108,6 @@ export const Roles = {
   CREATOR: "CREATOR",
 }
 
-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",
-  },
-]
-
 export const EventPublishType = {
   ENV_VAR_UPGRADE_PANEL_OPENED: "environment_variable_upgrade_panel_opened",
 }

packages/frontend-core/src/utils/index.js

@@ -9,7 +9,6 @@ export * as SchemaUtils from "./schema"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
-export * from "./theme"
 export * from "./settings"
 export * from "./relatedColumns"
 export * from "./table"

packages/frontend-core/src/utils/theme.js

@@ -1,12 +0,0 @@
-import { Themes } from "../constants.js"
-
-export const getBaseTheme = theme => {
-  if (!theme) {
-    return ""
-  }
-  let base = Themes.find(x => `spectrum--${x.class}` === theme)?.base || ""
-  if (base) {
-    base = `spectrum--${base}`
-  }
-  return base
-}

packages/server/src/api/controllers/application.ts

@@ -63,7 +63,7 @@ import {
 import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts"
 import sdk from "../../sdk"
 import { builderSocket } from "../../websockets"
-import { sdk as sharedCoreSDK } from "@budibase/shared-core"
+import { DefaultAppTheme, sdk as sharedCoreSDK } from "@budibase/shared-core"
 import * as appMigrations from "../../appMigrations"
 
 // utility function, need to do away with this
@@ -302,7 +302,7 @@ async function performAppCreate(ctx: UserCtx<CreateAppRequest, App>) {
         navBackground: "var(--spectrum-global-color-gray-100)",
         links: [],
       },
-      theme: "spectrum--light",
+      theme: DefaultAppTheme,
       customTheme: {
         buttonBorderRadius: "16px",
       },

packages/server/src/constants/themes.ts

@@ -1,5 +1,9 @@
-export const getThemeVariables = (theme: string) => {
+import { ensureValidTheme } from "@budibase/shared-core"
-  if (theme === "spectrum--lightest") {
+import { Theme } from "@budibase/types"
+
+export const getThemeVariables = (theme: Theme) => {
+  theme = ensureValidTheme(theme, Theme.LIGHT)
+  if (theme === Theme.LIGHTEST) {
     return `
       --spectrum-global-color-gray-50: rgb(255, 255, 255);
       --spectrum-global-color-gray-200: rgb(244, 244, 244);
@@ -7,16 +11,15 @@ export const getThemeVariables = (theme: string) => {
       --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
     `
   }
-  if (theme === "spectrum--light") {
+  if (theme === Theme.LIGHT) {
     return `
     --spectrum-global-color-gray-50: rgb(255, 255, 255);
     --spectrum-global-color-gray-200: rgb(234, 234, 234);
     --spectrum-global-color-gray-300: rgb(225, 225, 225);
     --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
-
     `
   }
-  if (theme === "spectrum--dark") {
+  if (theme === Theme.DARK) {
     return `
     --spectrum-global-color-gray-100: rgb(50, 50, 50);
     --spectrum-global-color-gray-200: rgb(62, 62, 62);
@@ -24,7 +27,7 @@ export const getThemeVariables = (theme: string) => {
     --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
     `
   }
-  if (theme === "spectrum--darkest") {
+  if (theme === Theme.DARKEST) {
     return `
   --spectrum-global-color-gray-100: rgb(30, 30, 30);
   --spectrum-global-color-gray-200: rgb(44, 44, 44);
@@ -32,7 +35,7 @@ export const getThemeVariables = (theme: string) => {
   --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
     `
   }
-  if (theme === "spectrum--nord") {
+  if (theme === Theme.NORD) {
     return `
     --spectrum-global-color-gray-100: #3b4252;
 
@@ -41,7 +44,7 @@ export const getThemeVariables = (theme: string) => {
   --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
     `
   }
-  if (theme === "spectrum--midnight") {
+  if (theme === Theme.MIDNIGHT) {
     return `
     --hue: 220;
     --sat: 10%;

packages/shared-core/src/constants/index.ts

@@ -3,6 +3,7 @@ export * from "./api"
 export * from "./fields"
 export * from "./rows"
 export * from "./colors"
+export * from "./themes"
 
 export const OperatorOptions = {
   Equals: {

packages/shared-core/src/constants/themes.ts

@@ -0,0 +1,28 @@
+import { ThemeMeta, Theme } from "@budibase/types"
+
+export const ThemeClassPrefix = "spectrum--"
+export const DefaultBuilderTheme = Theme.DARKEST
+export const DefaultAppTheme = Theme.LIGHT
+
+// Currently available theme options for builder and apps
+export const ThemeOptions: ThemeMeta[] = [
+  {
+    id: Theme.LIGHT,
+    name: "Light",
+  },
+  {
+    // We call this dark for simplicity, but we want to use the spectrum darkest style
+    id: Theme.DARKEST,
+    name: "Dark",
+  },
+  {
+    id: Theme.NORD,
+    name: "Nord",
+    base: Theme.DARKEST,
+  },
+  {
+    id: Theme.MIDNIGHT,
+    name: "Midnight",
+    base: Theme.DARKEST,
+  },
+]

packages/shared-core/src/index.ts

@@ -4,3 +4,4 @@ export * as helpers from "./helpers"
 export * as utils from "./utils"
 export * as sdk from "./sdk"
 export * from "./table"
+export * from "./themes"

packages/shared-core/src/tests/themes.ts

@@ -0,0 +1,28 @@
+import { getThemeClassNames, ensureValidTheme } from "../themes"
+import { Theme } from "@budibase/types"
+
+describe("theme class names", () => {
+  it("generates class names for a theme without base theme", () => {
+    expect(getThemeClassNames(Theme.LIGHT)).toStrictEqual("spectrum--light")
+  })
+  it("generates class names for a theme with base theme", () => {
+    expect(getThemeClassNames(Theme.NORD)).toStrictEqual(
+      "spectrum--darkest spectrum--nord"
+    )
+  })
+})
+
+describe("theme validity checking", () => {
+  it("handles no theme", () => {
+    expect(ensureValidTheme(undefined)).toStrictEqual(Theme.DARKEST)
+  })
+  it("allows specifiying a fallback", () => {
+    expect(ensureValidTheme(undefined, Theme.NORD)).toStrictEqual(Theme.NORD)
+  })
+  it("migrates lightest to light", () => {
+    expect(ensureValidTheme(Theme.LIGHTEST)).toStrictEqual(Theme.LIGHT)
+  })
+  it("migrates dark to darkest", () => {
+    expect(ensureValidTheme(Theme.DARK)).toStrictEqual(Theme.DARKEST)
+  })
+})

packages/shared-core/src/themes.ts

@@ -0,0 +1,44 @@
+import { ThemeOptions, ThemeClassPrefix } from "./constants/themes"
+import { Theme } from "@budibase/types"
+
+// Gets the CSS class names for the specified theme
+export const getThemeClassNames = (theme: Theme): string => {
+  theme = ensureValidTheme(theme)
+  let classNames = `${ThemeClassPrefix}${theme}`
+
+  // Prefix with base class if required
+  const base = ThemeOptions.find(x => x.id === theme)?.base
+  if (base) {
+    classNames = `${ThemeClassPrefix}${base} ${classNames}`
+  }
+
+  return classNames
+}
+
+// Ensures a theme value is a valid option
+export const ensureValidTheme = (
+  theme?: Theme,
+  fallback: Theme = Theme.DARKEST
+): Theme => {
+  if (!theme) {
+    return fallback
+  }
+
+  // Ensure we aren't using the spectrum prefix
+  if (theme.startsWith(ThemeClassPrefix)) {
+    theme = theme.split(ThemeClassPrefix)[1] as Theme
+  }
+
+  // Check we aren't using a deprecated theme, and migrate
+  // to the nearest valid theme if we are
+  if (!ThemeOptions.some(x => x.id === theme)) {
+    if (theme === Theme.LIGHTEST) {
+      return Theme.LIGHT
+    } else if (theme === Theme.DARK) {
+      return Theme.DARKEST
+    } else {
+      return fallback
+    }
+  }
+  return theme
+}

packages/types/src/documents/app/index.ts

@@ -17,3 +17,4 @@ export * from "./component"
 export * from "./sqlite"
 export * from "./snippet"
 export * from "./rowAction"
+export * from "./theme"

packages/types/src/documents/app/theme.ts

@@ -0,0 +1,14 @@
+export enum Theme {
+  LIGHTEST = "lightest",
+  LIGHT = "light",
+  DARK = "dark",
+  DARKEST = "darkest",
+  NORD = "nord",
+  MIDNIGHT = "midnight",
+}
+
+export type ThemeMeta = {
+  id: string
+  name: string
+  base?: Theme
+}