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

/**
 * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
 */
export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;

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 => screenModes[1] === screenMode;

export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {
  // Personal light is always there by default
  const themeClasses = ['np-theme-personal'];

  /* eslint-disable functional/immutable-data */
  // Personal dark theme
  if (theme === 'personal' && screenMode === 'dark') {
    themeClasses.push(`np-theme-personal--${screenMode}`);
  }

  // Personal forest-green and bright-green themes
  else if (['forest-green', 'bright-green'].includes(theme)) {
    themeClasses.push(`np-theme-personal--${theme}`);
  }

  // Business light
  else if (theme === 'business') {
    themeClasses.push(`np-theme-business`);
    // Business dark theme
    if (screenMode === 'dark') {
      themeClasses.push(`np-theme-business--${screenMode}`);
    }
  }

  // Business forest-green and bright-green themes
  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {
    themeClasses.push(`np-theme-${theme}`);
  }

  // Platform themes
  else if (theme.startsWith('platform')) {
    themeClasses.push(`np-theme-${theme}`);
  }
  /* eslint-enable functional/immutable-data */
  return themeClasses.join(' ');
};

export const normalizeTheme = (
  theme: NonNullable<Theming['theme']>,
): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);