From 4c112d51e6de83c12ca23767fce0ebd819e99745 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 24 Oct 2024 09:24:11 +0100 Subject: [PATCH] Move themes to shared core, add enum and type --- packages/frontend-core/src/constants.js | 31 ------------------- .../server/src/api/controllers/application.ts | 2 +- packages/server/src/constants/themes.ts | 19 +++++++----- packages/shared-core/src/constants/themes.ts | 25 +++++++++++++++ packages/shared-core/src/index.ts | 1 + .../theme.js => shared-core/src/themes.ts} | 21 +++++++------ packages/types/src/documents/app/index.ts | 1 + packages/types/src/documents/app/theme.ts | 14 +++++++++ 8 files changed, 65 insertions(+), 49 deletions(-) create mode 100644 packages/shared-core/src/constants/themes.ts rename packages/{frontend-core/src/utils/theme.js => shared-core/src/themes.ts} (61%) create mode 100644 packages/types/src/documents/app/theme.ts diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js index 976eab0534..662b086915 100644 --- a/packages/frontend-core/src/constants.js +++ b/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", } diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts index d8d9d75336..0d811208cd 100644 --- a/packages/server/src/api/controllers/application.ts +++ b/packages/server/src/api/controllers/application.ts @@ -302,7 +302,7 @@ async function performAppCreate(ctx: UserCtx) { navBackground: "var(--spectrum-global-color-gray-100)", links: [], }, - theme: "spectrum--light", + theme: "light", customTheme: { buttonBorderRadius: "16px", }, diff --git a/packages/server/src/constants/themes.ts b/packages/server/src/constants/themes.ts index 942d67f100..cc73e85621 100644 --- a/packages/server/src/constants/themes.ts +++ b/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%; diff --git a/packages/shared-core/src/constants/themes.ts b/packages/shared-core/src/constants/themes.ts new file mode 100644 index 0000000000..208700f1af --- /dev/null +++ b/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--" diff --git a/packages/shared-core/src/index.ts b/packages/shared-core/src/index.ts index a26c76cd96..0833f999ee 100644 --- a/packages/shared-core/src/index.ts +++ b/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" diff --git a/packages/frontend-core/src/utils/theme.js b/packages/shared-core/src/themes.ts similarity index 61% rename from packages/frontend-core/src/utils/theme.js rename to packages/shared-core/src/themes.ts index 309e6ab4a8..1d1875d4e9 100644 --- a/packages/frontend-core/src/utils/theme.js +++ b/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 } diff --git a/packages/types/src/documents/app/index.ts b/packages/types/src/documents/app/index.ts index 2b13676ba1..bb94c3b4da 100644 --- a/packages/types/src/documents/app/index.ts +++ b/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" diff --git a/packages/types/src/documents/app/theme.ts b/packages/types/src/documents/app/theme.ts new file mode 100644 index 0000000000..ca5d429b5b --- /dev/null +++ b/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 +}