apphouse/dist/themes/presets/purplemagic.theme.ts

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

import { ApphouseTheme } from '../../styles/defaults/themes.interface';
import { ThemeColors } from '../../styles/defaults/themes.interface';
import { ApphouseThemeTokens } from '../../styles/defaults/app.token.values';
import { getBaseStylesWithTokens } from '../../styles/getBaseStylesWithTokens';

const colors: ThemeColors = {
  background: '#000000',
  onBackground: '#F0FFF0',
  brand: '#9370DB',
  brandAlt: '#9370DB',
  error: '#8B008B',
  info: '#808080',
  onBrand: '#F0FFF0',
  onBrandAlt: '#F0FFF0',
  onError: '#F0FFF0',
  onInfo: '#F0FFF0',
  onSuccess: '#6A5ACD',
  onWarning: '#6A5ACD',
  required: '#8B008B',
  success: '#BA55D3',
  toggleOn: '#9370DB',
  warning: '#DAA520',
  borderOnPrimary: '#000000',
  borderOnPrimaryInverse: '#808080',
  borderOnSurface10: '#808080',
  borderOnSurface: '#808080',
  focusRingInset: '#000000',
  focusRingOutline: '#F0FFF0',
  onPrimary: '#F0FFF0',
  onPrimaryInverse: '#6A5ACD',
  onPrimaryInverse_70: '#666666',
  onPrimary_10: '#808080',
  onPrimary_20: '#808080',
  onPrimary_40: '#8A2BE2',
  onPrimary_50: '#8968CD',
  onPrimary_90: '#F0FFF0',
  onPrimary_95: '#F0FFF0',
  onSelection: '#F0FFF0',
  onSurface10: '#F0FFF0',
  onSurface20: '#F0FFF0',
  onSurface30: '#F0FFF0',
  onSurface40: '#F0FFF0',
  onSurface: '#F0FFF0',
  overlay: 'rgba(128, 128, 128, 0.9)',
  primary: '#6A5ACD',
  primaryInverse: '#F0FFF0',
  selection: '#BA55D3',
  surface10: '#6E6E6E',
  surface20: '#585858',
  surface30: '#474747',
  surface40: '#363636',
  surface: '#222222',
  lightColor: '#F0FFF0',
  darkColor: '#808080'
};
/**
 * Defines the theme
 */
export const theme: ApphouseTheme = {
  id: 'PURPLEMAGIC', // This is used as a key for the theme in the theme service
  colors: colors,
  tokens: ApphouseThemeTokens,
  styles: getBaseStylesWithTokens({
    colors: colors,
    tokens: ApphouseThemeTokens
  })
};