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

Provides theming support for the Wise Design system components

import type {
  ModernTheme,
  ExtraTheme,
  ForestGreenTheme,
  ScreenMode,
  ScreenModeDark,
  Theming,
} from './const';
import { extraThemes, screenModes, modernThemes } from './const';

export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>
  modernThemes.includes(theme as ModernTheme);

export const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>
  extraThemes.includes(theme as ExtraTheme);

export const isForestGreenTheme = (
  theme: NonNullable<Theming['theme']>,
): theme is ForestGreenTheme => theme === extraThemes[0];

export const isScreenModeDark = (
  theme: NonNullable<Theming['theme']>,
  screenMode: ScreenMode,
): screenMode is ScreenModeDark =>
  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;

export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {
  if (!isThemeModern(theme)) {
    return `np-theme-${theme || 'personal'}`;
  }

  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;

  if (isExtraTheme(theme)) {
    classes += ` ${classes}--${theme}`;
  } else if (screenModes[1] === screenMode) {
    classes += ` ${classes}--${screenMode}`;
  }

  return classes;
};