apphouse/dist/themes/presets/solarized.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: '#ffffff',
  brand: '#0077b3',
  brandAlt: '#0077b3',
  error: '#b20000',
  info: '#424242',
  onBrand: '#ffffff',
  onBrandAlt: '#ffffff',
  onError: '#ffffff',
  onInfo: '#ffffff',
  onSuccess: '#000000',
  onWarning: '#000000',
  required: '#b20000',
  success: '#00b324',
  toggleOn: '#00ff00',
  warning: '#ffa500',
  borderOnPrimary: '#000000',
  borderOnPrimaryInverse: '#8B6969',
  borderOnSurface10: '#8B6969',
  borderOnSurface: '#8B6969',
  focusRingInset: '#000000',
  focusRingOutline: '#F5DEB3',
  onPrimary: '#F5DEB3',
  onPrimaryInverse: '#8B4513',
  onPrimaryInverse_70: '#666666',
  onPrimary_10: '#8B6969',
  onPrimary_20: '#8B6969',
  onPrimary_40: '#CD5C5C',
  onPrimary_50: '#A0522D',
  onPrimary_90: '#F5DEB3',
  onPrimary_95: '#F5DEB3',
  onSelection: '#F5DEB3',
  onSurface10: '#F5DEB3',
  onSurface20: '#F5DEB3',
  onSurface30: '#F5DEB3',
  onSurface40: '#F5DEB3',
  onSurface: '#F5DEB3',
  overlay: 'rgba(139, 69, 19, 0.9)',
  primary: '#8B4513',
  primaryInverse: '#F5DEB3',
  selection: '#BDB76B',
  surface10: '#A38686',
  surface20: '#8B6969',
  surface30: '#704C4C',
  surface40: '#583636',
  surface: '#3F2020',
  lightColor: '#F5DEB3',
  darkColor: '#8B4513'
};

/**
 * Defines the theme
 */
export const theme: ApphouseTheme = {
  id: 'SOLARIZED',
  colors,
  tokens: ApphouseThemeTokens,
  styles: getBaseStylesWithTokens({ colors, tokens: ApphouseThemeTokens })
};