Update to use new shared-core location for theme utils

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

@@ -23,6 +23,7 @@
   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 +142,13 @@
       icon: "ShareAndroid",
       action: () => $goto(`./automation/${automation._id}`),
     })) ?? []),
-    ...Constants.ThemeOptions.map(theme => ({
+    ...ThemeOptions.map(themeMeta => ({
       type: "Change Builder Theme",
-      name: theme.name,
+      name: themeMeta.name,
       icon: "ColorPalette",
       action: () =>
         themeStore.update(state => {
-          state.theme = theme.id
+          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,12 +1,12 @@
 <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.ThemeOptions}
+    options={ThemeOptions}
     bind:value={$themeStore.theme}
     placeholder={null}
     getOptionLabel={x => x.name}

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

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

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

@@ -18,13 +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 {
-    ClientAppSkeleton,
-    getThemeClassNames,
-  } from "@budibase/frontend-core"
+  import { ClientAppSkeleton } from "@budibase/frontend-core"
   import { contextMenuStore } from "stores/builder"
 
   $: app = $enrichedApps.find(app => app.appId === $params.appId)

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

@@ -1,16 +1,11 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
-import { Constants, ensureValidTheme } from "@budibase/frontend-core"
-
-const DefaultAppTheme = Constants.Themes.Light
-const INITIAL_THEMES_STATE = {
-  theme: DefaultAppTheme,
-  customTheme: {},
-}
+import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
 
 export const createThemeStore = () => {
   const store = writable({
-    ...INITIAL_THEMES_STATE,
+    theme: DefaultAppTheme,
+    customTheme: {},
   })
 
   const syncAppTheme = app => {

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

@@ -1,28 +1,29 @@
+import { createLocalStorageStore } from "@budibase/frontend-core"
+import { derived } from "svelte/store"
 import {
-  Constants,
-  createLocalStorageStore,
+  DefaultBuilderTheme,
   ensureValidTheme,
   getThemeClassNames,
-} from "@budibase/frontend-core"
-import { derived } from "svelte/store"
+  ThemeOptions,
+  ThemeClassPrefix,
+} from "@budibase/shared-core"
 
 export const getThemeStore = () => {
-  const defaultBuilderTheme = Constants.Themes.Darkest
   const themeElement = document.documentElement
   const initialValue = {
-    theme: defaultBuilderTheme,
+    theme: DefaultBuilderTheme,
   }
   const store = createLocalStorageStore("bb-theme", initialValue)
   const derivedStore = derived(store, $store => ({
     ...$store,
-    theme: ensureValidTheme($store.theme, defaultBuilderTheme),
+    theme: ensureValidTheme($store.theme, DefaultBuilderTheme),
   }))
 
   // Update theme class when store changes
   derivedStore.subscribe(({ theme }) => {
     const classNames = getThemeClassNames(theme).split(" ")
-    Constants.ThemeOptions.forEach(option => {
-      const className = `${Constants.ThemeClassPrefix}${option.id}`
+    ThemeOptions.forEach(option => {
+      const className = `${ThemeClassPrefix}${option.id}`
       themeElement.classList.toggle(className, classNames.includes(className))
     })
   })

packages/client/src/components/ClientApp.svelte

@@ -3,11 +3,8 @@
   import { setContext, onMount } from "svelte"
   import { Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
-  import {
-    Constants,
-    CookieUtils,
-    getThemeClassNames,
-  } from "@budibase/frontend-core"
+  import { Constants, CookieUtils } from "@budibase/frontend-core"
+  import { getThemeClassNames } from "@budibase/shared-core"
   import Component from "./Component.svelte"
   import SDK from "sdk"
   import {

packages/client/src/stores/theme.js

@@ -1,12 +1,11 @@
 import { derived } from "svelte/store"
 import { appStore } from "./app"
 import { builderStore } from "./builder"
-import { Constants, ensureValidTheme } 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 = Constants.Themes.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 = ensureValidTheme(theme, defaultTheme)
+      theme = ensureValidTheme(theme, DefaultAppTheme)
 
       // Delete and nullish keys from the custom theme
       if (customTheme) {

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/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

@@ -1,5 +1,10 @@
 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,
@@ -21,5 +26,3 @@ export const ThemeOptions: ThemeMeta[] = [
     base: Theme.DARKEST,
   },
 ]
-
-export const ThemeClassPrefix = "spectrum--"