apphouse/dist/themes/utils/theme.conversion.utils.ts

Component library for React that uses observable state management and theme-able components.

import { ThemeFull } from '../../styles/defaults/themes.interface';
import { Palette } from '../Palette';
import { Style } from '../Style';
import { Token } from '../Token';
import { StyleType } from '../style.interface';
import { TokenType } from '../token.interface';
import { PaletteType, ThemeModeType } from '../palette.interface';

export const objTokensToTokens = (
  tokens: TokenType[]
): Record<string, Token> => {
  const tkns: Record<string, Token> = {};
  tokens.forEach((token) => {
    const tokenId = `${token.type}.${token.key}`;
    if (!tkns[tokenId]) {
      tkns[tokenId] = objTokenToToken(token);
    }
  });
  return tkns;
};

export const objStylesToStyles = (
  styles: StyleType[]
): Record<string, Style> => {
  const s: Record<string, Style> = {};
  styles.forEach((style) => {
    const id = style.id;
    s[id] = objStyleToStyle(style);
  });
  return s;
};

export const objThemeToTheme = (
  themeObj: ThemeFull
): {
  palette: Record<string, Palette>;
  tokens: Record<string, Token>;
  styles: Record<string, Style>;
} => {
  const theme = {
    palette: PaletteUtils.objPaletteToPalettes(themeObj.colors),
    tokens: objTokensToTokens(themeObj.tokens),
    styles: objStylesToStyles(themeObj.styles)
  };
  return theme;
};

export const objTokenToToken = (token: TokenType): Token => {
  return new Token(token);
};

export const objStyleToStyle = (style: StyleType): Style => {
  return new Style(style);
};

export class PaletteUtils {
  static objPaletteToPalettes = (
    palette: PaletteType[]
  ): { [paletteId: string]: Palette } => {
    const colors: { [paletteId: string]: Palette } = {};
    palette?.forEach((p) => {
      if (colors && p.id && !colors[p.id]) {
        colors[p.id] = PaletteUtils.objPaletteToPalette(p);
      }
    });
    return colors;
  };
  static objPaletteToPalette = (palette: PaletteType): Palette => {
    return new Palette({
      title: palette.title,
      id: palette.id,
      description: palette.description,
      mode: palette.mode as ThemeModeType,
      referenceThemeId: palette.referenceThemeId || '',
      themeId: palette.themeId || '',
      colors: palette.colors
    });
  };
}