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

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

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

const colors: ThemeColors = {
  background: '#FFFFFF',
  onBackground: '#212121',
  brand: '#FF9800',
  brandAlt: '#FFB74D',
  error: '#F44336',
  info: '#2196F3',
  onBrand: '#FFFFFF',
  onBrandAlt: '#212121',
  onError: '#FFFFFF',
  onInfo: '#FFFFFF',
  onSuccess: '#FFFFFF',
  onWarning: '#212121',
  required: '#FF5252',
  success: '#4CAF50',
  toggleOn: '#FFD54F',
  warning: '#FF9800',
  borderOnPrimary: '#FF9800',
  borderOnPrimaryInverse: '#FFFFFF',
  borderOnSurface10: '#D9D9D9',
  borderOnSurface: '#CCCCCC',
  focusRingInset: '#FF9800',
  focusRingOutline: '#FFD299',
  onPrimary: '#FFFFFF',
  onPrimaryInverse: '#FF9800',
  onPrimaryInverse_70: 'rgba(255, 152, 0, 0.7)',
  onPrimary_10: '#FFF3E0',
  onPrimary_20: '#FFE0B2',
  onPrimary_40: '#FFC107',
  onPrimary_50: '#FFB300',
  onPrimary_90: '#1E1E1E',
  onPrimary_95: '#121212',
  onSelection: '#FFFFFF',
  onSurface10: '#FFFFFF',
  onSurface20: '#FFFFFF',
  onSurface30: '#FFFFFF',
  onSurface40: '#FFFFFF',
  onSurface: '#FFFFFF',
  overlay: 'rgba(0,0,0,0.5)',
  primary: 'rgb(21 21 21)',
  primaryInverse: '#FFFFFF',
  selection: '#FF9800',
  surface10: '#1C1C1C',
  surface20: '#2F2F2F',
  surface30: '#444444',
  surface40: '#5C5C5C',
  surface: 'black',
  lightColor: '#FFFFFF',
  darkColor: '#000000'
};
/**
 * Defines the theme
 */
export const theme: ApphouseTheme = {
  id: 'BEE',
  colors: colors,
  tokens: ApphouseThemeTokens,
  styles: getBaseStylesWithTokens({
    colors: colors,
    tokens: ApphouseThemeTokens
  })
};