@wise/components-theming/src/const.ts

Provides theming support for the Wise Design system components

// 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;
};