Move themes to shared core, add enum and type

packages/frontend-core/src/constants.js

@@ -108,37 +108,6 @@ export const Roles = {
   CREATOR: "CREATOR",
 }
 
-// Theming
-export const ThemeClassPrefix = "spectrum--"
-export const Themes = {
-  Lightest: "lightest",
-  Light: "light",
-  Dark: "dark",
-  Darkest: "darkest",
-  Nord: "nord",
-  Midnight: "midnight",
-}
-export const ThemeOptions = [
-  {
-    id: Themes.Light,
-    name: "Light",
-  },
-  {
-    id: Themes.Darkest,
-    name: "Dark",
-  },
-  {
-    id: Themes.Nord,
-    name: "Nord",
-    base: Themes.Darkest,
-  },
-  {
-    id: Themes.Midnight,
-    name: "Midnight",
-    base: Themes.Darkest,
-  },
-]
-
 export const EventPublishType = {
   ENV_VAR_UPGRADE_PANEL_OPENED: "environment_variable_upgrade_panel_opened",
 }

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

@@ -302,7 +302,7 @@ async function performAppCreate(ctx: UserCtx<CreateAppRequest, App>) {
         navBackground: "var(--spectrum-global-color-gray-100)",
         links: [],
       },
-      theme: "spectrum--light",
+      theme: "light",
       customTheme: {
         buttonBorderRadius: "16px",
       },

packages/server/src/constants/themes.ts

@@ -1,5 +1,9 @@
-export const getThemeVariables = (theme: string) => {
-  if (theme === "spectrum--lightest") {
+import { ensureValidTheme } from "@budibase/shared-core"
+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/themes.ts

@@ -0,0 +1,25 @@
+import { ThemeMeta, Theme } from "@budibase/types"
+
+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,
+  },
+]
+
+export const ThemeClassPrefix = "spectrum--"

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/themes.ts

@@ -1,7 +1,8 @@
-import { Themes, ThemeOptions, ThemeClassPrefix } from "../constants.js"
+import { ThemeOptions, ThemeClassPrefix } from "./constants/themes"
+import { Theme } from "@budibase/types"
 
 // Gets the CSS class names for the specified theme
-export const getThemeClassNames = theme => {
+export const getThemeClassNames = (theme: Theme): string => {
   theme = ensureValidTheme(theme)
   let classNames = `${ThemeClassPrefix}${theme}`
 
@@ -15,24 +16,26 @@ export const getThemeClassNames = theme => {
 }
 
 // Ensures a theme value is a valid option
-export const ensureValidTheme = (theme, fallback = Themes.Darkest) => {
-  // Default to darkest
+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]
+    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 === Themes.Lightest) {
-      return Themes.Light
-    } else if (theme === Themes.Dark) {
-      return Themes.Darkest
+    if (theme === Theme.LIGHTEST) {
+      return Theme.LIGHT
+    } else if (theme === Theme.DARK) {
+      return Theme.DARKEST
     } else {
       return fallback
     }

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
+}