// TODO: Change 'light' with 'legacy' in the future export const baseThemes = ['light', 'personal', 'business'] as const; export const extraThemes = ['forest-green', 'bright-green'] as const; export const screenModes = ['light', 'dark'] as const; /** * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore */ export const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const; export const businessThemes = [ 'business', 'business--forest-green', 'business--bright-green', ] as const; export const platformThemes = ['platform', 'platform--forest-green'] as const; // TODO: componentThemes returned back for backward compatibility, refactor this place in the future export type ComponentTheme = (typeof baseThemes)[number]; /** * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore */ export type ModernTheme = (typeof modernThemes)[number]; export type BaseTheme = (typeof baseThemes)[number]; export type ExtraTheme = (typeof extraThemes)[number]; export type ForestGreenTheme = (typeof extraThemes)[0]; export type ScreenMode = (typeof screenModes)[number]; export type ScreenModeDark = (typeof screenModes)[1]; export type PlatformTheme = (typeof platformThemes)[0]; export type PlatformForestGreenTheme = (typeof platformThemes)[1]; export type BusinessTheme = (typeof businessThemes)[0]; export type BusinessForestGreenTheme = (typeof businessThemes)[1]; export type BusinessBrightGreenTheme = (typeof businessThemes)[2]; export const DEFAULT_BASE_THEME = 'personal'; export const DEFAULT_SCREEN_MODE = 'light'; export type Theming = { theme?: | ComponentTheme | BaseTheme | ExtraTheme | BusinessTheme | BusinessForestGreenTheme | BusinessBrightGreenTheme | PlatformTheme | PlatformForestGreenTheme; screenMode?: ScreenMode; /** * **global / root theme provider** - one that sets theming globally (at `html` element) + locally (over children); * * **not root provider / local provider** - one that sets theming only locally (over children) * * note: in most cases you won't need this property * * use this property to explicitly define local themes when components in components package set local themes * while their global theme provider in defined somewhere far / or even unknown (e.g in another consumer package or different repos) * so to avoid global theming misconfiguration you can protect it with this property */ isNotRootProvider?: boolean | undefined; };