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

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

import { ApphouseThemeTokens } from '../../styles/defaults/app.token.values';

import {
  ApphouseTheme,
  ThemeColors
} from '../../styles/defaults/themes.interface';
import { getBaseStylesWithTokens } from '../../styles/getBaseStylesWithTokens';
import { setAlpha } from '../../utils/color/setAlpha';
import { commonColors } from './commonColors';

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 ApphouseDarkThemeColors: ThemeColors = {
  ...commonColors,
  background: Colors.BLACK,
  onBackground: Colors.WHITE,
  borderOnPrimary: Colors.PURE_BLACK,
  borderOnPrimaryInverse: Colors.GREY,
  borderOnSurface10: Colors.GREY,
  borderOnSurface: Colors.GREY,
  focusRingInset: Colors.PURE_BLACK,
  focusRingOutline: Colors.PURE_WHITE,
  onPrimary: Colors.WHITE,
  onPrimaryInverse: Colors.BLACK,
  onPrimaryInverse_70: Colors.BLACK_40,
  onPrimary_10: Colors.WHITE_10,
  onPrimary_20: Colors.WHITE_30,
  onPrimary_40: Colors.WHITE_40,
  onPrimary_50: Colors.WHITE_50,
  onPrimary_90: Colors.WHITE_90,
  onPrimary_95: Colors.WHITE_95,
  onSelection: Colors.WHITE,
  onSurface10: Colors.WHITE,
  onSurface20: Colors.WHITE,
  onSurface30: Colors.WHITE,
  onSurface40: Colors.WHITE,
  onSurface: Colors.WHITE,
  overlay: setAlpha(Colors.BLACK, 0.9),
  primary: Colors.BLACK,
  primaryInverse: Colors.WHITE,
  selection: Colors.MONTANA,
  surface10: Colors.GREY_ALT_50,
  surface20: Colors.GREY_ALT_75,
  surface30: Colors.GREY_ALT,
  surface40: Colors.GREY,
  surface: Colors.NERO
};
/**
 * Defines the Apphouse Dark Theme
 */
export const ApphouseDarkTheme: ApphouseTheme = {
  id: 'APPHOUSE_DARK',
  colors: ApphouseDarkThemeColors,
  tokens: ApphouseThemeTokens,
  styles: getBaseStylesWithTokens({
    colors: ApphouseDarkThemeColors,
    tokens: ApphouseThemeTokens
  })
};