apphouse/dist/themes/presets/apphouseLight.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 { setAlpha } from '../../utils/color/setAlpha';
import { commonColors } from './commonColors';
import { ApphouseThemeTokens } from '../../styles/defaults/app.token.values';
import { getBaseStylesWithTokens } from '../../styles/getBaseStylesWithTokens';

const Colors = {
  ACQUA_BLUE: 'rgb(0, 113, 227)',
  BLACK: '#1E1C1D',
  GREEN: '#00B324',
  GREY: 'rgb(68 66 66)',
  GREY_ALT: '#3f3b3b',
  GREY_ALT_50: '#2d2d2d',
  GREY_ALT_75: '#363333',
  LIGHT_GRAY: '#d3d3d3',
  MONTANA: '#39393B',
  NERO: '#272627',
  PURE_BLACK: '#000000',
  PURE_WHITE: '#FFFFFF',
  RED: '#B20000',
  WHITE: '#ececec',
  WHITEISH: '#e6e6e6',
  YELLOW: '#ffa500',
  BLACK_10: '#c6c6c6',
  BLACK_40: '#666666',
  BLACK_50: '#828282',
  BLACK_75: '#3C3B3B',
  BLACK_90: '#2C2B2B',
  BLACK_95: '#1C1B1B',
  WHITE_10: '#424242',
  WHITE_30: '#dddddd',
  WHITE_40: '#435058',
  WHITE_50: '#848C8E',
  WHITE_75: '#FFFFFF',
  WHITE_90: '#BFB7B6',
  WHITE_95: '#F1F2EE',
  WHITE_100: '#d8d6d6'
};

export const ApphouseLightThemeColors: ThemeColors = {
  ...commonColors,
  background: Colors.WHITE,
  onBackground: Colors.BLACK,
  borderOnPrimary: Colors.GREY_ALT,
  borderOnPrimaryInverse: Colors.GREY_ALT,
  borderOnSurface10: Colors.GREY_ALT,
  borderOnSurface: Colors.GREY_ALT,
  focusRingInset: Colors.PURE_WHITE,
  focusRingOutline: Colors.PURE_BLACK,
  onPrimary: Colors.BLACK,
  onPrimaryInverse: Colors.WHITE,
  onPrimaryInverse_70: Colors.BLACK_40,
  onPrimary_10: Colors.BLACK_10,
  onPrimary_20: Colors.BLACK_40,
  onPrimary_40: Colors.BLACK_40,
  onPrimary_50: Colors.BLACK_50,
  onPrimary_90: Colors.BLACK_90,
  onPrimary_95: Colors.BLACK_95,
  onSelection: Colors.BLACK,

  overlay: setAlpha(Colors.BLACK, 0.9),
  primary: Colors.WHITE,
  primaryInverse: Colors.BLACK,
  selection: Colors.LIGHT_GRAY,
  surface10: Colors.WHITE,
  surface20: Colors.WHITEISH,
  surface30: Colors.WHITE_30,
  surface40: Colors.WHITE_100,
  surface: Colors.PURE_WHITE,

  onSurface10: Colors.BLACK,
  onSurface20: Colors.BLACK,
  onSurface30: Colors.BLACK,
  onSurface40: Colors.BLACK,
  onSurface: Colors.BLACK
};

const styles = getBaseStylesWithTokens({
  colors: ApphouseLightThemeColors,
  tokens: ApphouseThemeTokens
});
/**
 * Defines the Apphouse Light Theme
 */
export const ApphouseLightTheme: ApphouseTheme = {
  id: 'APPHOUSE_LIGHT',
  colors: ApphouseLightThemeColors,
  tokens: ApphouseThemeTokens,
  styles
};