Merge pull request #13355 from Budibase/fix/skeleton-colours

Fix issues with colours in app skeletons

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

@@ -249,7 +249,7 @@
 <div class="component-container">
   {#if loading}
     <div
-      class={`loading ${$themeStore.theme}`}
+      class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}
       class:tablet={$previewStore.previewDevice === "tablet"}
       class:mobile={$previewStore.previewDevice === "mobile"}
     >

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

@@ -20,7 +20,7 @@
   import { sdk } from "@budibase/shared-core"
   import { API } from "api"
   import ErrorSVG from "./ErrorSVG.svelte"
-  import { ClientAppSkeleton } from "@budibase/frontend-core"
+  import { getBaseTheme, ClientAppSkeleton } from "@budibase/frontend-core"
 
   $: app = $enrichedApps.find(app => app.appId === $params.appId)
   $: iframeUrl = getIframeURL(app)
@@ -137,7 +137,9 @@
       class:hide={!loading || !app?.features?.skeletonLoader}
       class="loading"
     >
-      <div class={`loadingThemeWrapper ${app.theme}`}>
+      <div
+        class={`loadingThemeWrapper ${getBaseTheme(app.theme)} ${app.theme}`}
+      >
         <ClientAppSkeleton
           noAnimation
           hideDevTools={app?.status === "published"}

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

@@ -1,5 +1,6 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
+import { getBaseTheme } from "@budibase/frontend-core"
 
 const INITIAL_THEMES_STATE = {
   theme: "",
@@ -12,11 +13,15 @@ export const themes = () => {
   })
 
   const syncAppTheme = app => {
-    store.update(state => ({
+    store.update(state => {
-      ...state,
+      const theme = app.theme || "spectrum--light"
-      theme: app.theme || "spectrum--light",
+      return {
-      customTheme: app.customTheme,
+        ...state,
-    }))
+        theme,
+        baseTheme: getBaseTheme(theme),
+        customTheme: app.customTheme,
+      }
+    })
   }
 
   const save = async (theme, appId) => {

packages/client/src/stores/theme.js

@@ -1,7 +1,7 @@
 import { derived } from "svelte/store"
 import { appStore } from "./app"
 import { builderStore } from "./builder"
-import { Constants } from "@budibase/frontend-core"
+import { getBaseTheme } from "@budibase/frontend-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
@@ -29,13 +29,6 @@ const createThemeStore = () => {
       // Ensure theme is set
       theme = theme || defaultTheme
 
-      // Get base theme
-      let base =
-        Constants.Themes.find(x => `spectrum--${x.class}` === theme)?.base || ""
-      if (base) {
-        base = `spectrum--${base}`
-      }
-
       // Delete and nullish keys from the custom theme
       if (customTheme) {
         Object.entries(customTheme).forEach(([key, value]) => {
@@ -59,7 +52,7 @@ const createThemeStore = () => {
 
       return {
         theme,
-        baseTheme: base,
+        baseTheme: getBaseTheme(theme),
         customTheme,
         customThemeCss,
       }

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

@@ -7,3 +7,4 @@ export * as RowUtils from "./rows"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
+export * from "./theme"

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

@@ -0,0 +1,12 @@
+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
+}