apphouse/dist/styles/extendTheme.ts

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

import {
  ApphouseTheme,
  ExtendedApphouseTheme,
  ThemedExtendedTokensType
} from './defaults/themes.interface';
import { THEMES } from '../themes/presets';
import { merge } from '../utils/obj/merge';
import { ApphouseThemeTokens } from './defaults/app.token.values';
import { getBaseStylesWithTokens } from './getBaseStylesWithTokens';

/**
 * Helper function to extend theme colors and tokens
 * @param theme the Theme to extend
 * @param options the options to extend the theme with
 * @returns ApphouseTheme the extended theme
 */
export function extendTheme(
  theme: ApphouseTheme,
  options: ExtendedApphouseTheme
): ApphouseTheme {
  const colors = merge({}, theme.colors, options.colors);
  const tokens = merge({}, theme.tokens, options.tokens);
  const styles = merge(
    {},
    getBaseStylesWithTokens({
      colors,
      tokens
    }),
    options.styles
  );
  return {
    colors,
    tokens,
    styles
  };
}

/**
 * Extends the Apphouse Dark Theme with the provided color tokens
 * @param colorTokens color tokens to extend the theme with
 * @returns ApphouseTheme
 */
export function extendApphouseDarkTheme(
  colorTokens: ThemedExtendedTokensType
): ApphouseTheme {
  const colors = merge({}, THEMES.APPHOUSE_DARK.colors, colorTokens);
  return {
    id: 'APPHOUSE_DARK',
    colors,
    tokens: ApphouseThemeTokens,
    styles: getBaseStylesWithTokens({
      colors,
      tokens: ApphouseThemeTokens
    })
  };
}

/**
 * Extends the Apphouse Light Theme with the provided color tokens
 * @param colorTokens color tokens to extend the theme with
 * @returns ApphouseTheme
 */
export function extendApphouseLightTheme(
  colorTokens: ThemedExtendedTokensType
): ApphouseTheme {
  const colors = merge({}, THEMES.APPHOUSE_LIGHT.colors, colorTokens);
  return {
    id: 'APPHOUSE_LIGHT',
    colors,
    tokens: ApphouseThemeTokens,
    styles: getBaseStylesWithTokens({
      colors,
      tokens: ApphouseThemeTokens
    })
  };
}