apphouse/dist/themes/presets/sleek.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: '#292929',
  onBackground: '#FFFFFF',
  brand: '#FF4081',
  brandAlt: '#FF4081',
  error: '#B00020',
  info: '#6D6875',
  onBrand: '#FFF',
  onBrandAlt: '#FFF',
  onError: '#FFF',
  onInfo: '#FFF',
  onSuccess: '#292929',
  onWarning: '#292929',
  required: '#B00020',
  success: '#00A152',
  toggleOn: '#FF4081',
  warning: '#FF9900',
  lightColor: '#FFF',
  darkColor: '#292929',
  borderOnPrimary: '#4F3447',
  borderOnPrimaryInverse: '#4F3447',
  borderOnSurface10: '#4F3447',
  borderOnSurface: '#4F3447',
  focusRingInset: '#FFF',
  focusRingOutline: '#000',
  onPrimary: '#292929',
  onPrimaryInverse: '#FFF',
  onPrimaryInverse_70: '#999',
  onPrimary_10: '#CCC',
  onPrimary_20: '#AAA',
  onPrimary_40: '#999',
  onPrimary_50: '#888',
  onPrimary_90: '#2B2B2B',
  onPrimary_95: '#1D1D1D',
  onSelection: '#292929',
  overlay: 'rgba(41, 41, 41, 0.9)',
  primary: '#FFF',
  primaryInverse: '#292929',
  selection: '#D9D9D9',
  surface10: '#FFF',
  surface20: '#F5F5F5',
  surface30: '#E8E8E8',
  surface40: '#DCDCDC',
  surface: '#FFF',
  onSurface10: '#292929',
  onSurface20: '#292929',
  onSurface30: '#292929',
  onSurface40: '#292929',
  onSurface: '#292929'
};
/**
 * Defines the theme
 */
export const theme: ApphouseTheme = {
  id: 'ROMANCE', // This is used as a key for the theme in the theme service
  colors,
  tokens: ApphouseThemeTokens,
  styles: getBaseStylesWithTokens({ colors, tokens: ApphouseThemeTokens })
};