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

Remove lightest and dark themes and add core types and utils for themes
This commit is contained in:
Andrew Kingston 2024-10-25 16:01:44 +01:00 committed by GitHub
commit c110cb628d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 189 additions and 118 deletions

View File

@ -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
}),
})),

View File

@ -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)

View File

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

View File

@ -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}
on:click={() => onChangeTheme(theme.class)}
class:selected={themeMeta.id === $themeStore.theme}
on:click={() => onChangeTheme(themeMeta.id)}
>
<div
style="background: {theme.preview}"
class="color spectrum--{theme.class}"
/>
{theme.name}
<div class="color {getThemeClassNames(themeMeta.id)}" />
{themeMeta.name}
</div>
{/each}
</div>

View File

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

View File

@ -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
class={`loadingThemeWrapper ${getBaseTheme(app.theme)} ${app.theme}`}
>
<div class="loadingThemeWrapper {getThemeClassNames(app.theme)}">
<ClientAppSkeleton
noAnimation
hideDevTools={app?.status === "published"}

View File

@ -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 = {
theme: "",
customTheme: {},
}
export const themes = () => {
export const createThemeStore = () => {
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()

View File

@ -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 => {
// Handle any old local storage values - this can be removed after the update
if (state.darkMode !== undefined) {
store.set(initialValue)
return
}
// 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
)
derivedStore.subscribe(({ theme }) => {
const classNames = getThemeClassNames(theme).split(" ")
ThemeOptions.forEach(option => {
const className = `${ThemeClassPrefix}${option.id}`
themeElement.classList.toggle(className, classNames.includes(className))
})
})
// Add base theme if required
const selectedTheme = Constants.Themes.find(x => x.class === state.theme)
if (selectedTheme?.base) {
themeElement.classList.add(`spectrum--${selectedTheme.base}`)
return {
...store,
subscribe: derivedStore.subscribe,
}
})
return store
}
// ?? confusion
export const themeStore = getThemeStore()

View File

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

View File

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

View File

@ -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,
}

View File

@ -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",
}

View File

@ -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"

View File

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

View File

@ -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",
},

View File

@ -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%;

View File

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

View File

@ -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,
},
]

View File

@ -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"

View File

@ -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)
})
})

View File

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

View File

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

View File

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