apphouse
Version:
Component library for React that uses observable state management and theme-able components.
274 lines (266 loc) • 6.64 kB
text/typescript
import { ThemeColors } from '../../styles/defaults/themes.interface';
const BLOODYMARY: ThemeColors = {
background: '#FFEB3B',
onBackground: '#212121',
brand: '#E53E45',
brandAlt: '#E65100',
error: '#B71C1C',
info: '#5C6BC0',
onBrand: '#FFF',
onBrandAlt: '#FFF',
onError: '#FFF',
onInfo: '#FFF',
onSuccess: '#FFF',
onWarning: '#FFF',
required: '#B71C1C',
success: '#4CAF50',
toggleOn: '#E65100',
warning: '#FF9800',
lightColor: '#FFF',
darkColor: '#1A1A1A',
borderOnPrimary: '#7F1616',
borderOnPrimaryInverse: '#7F1616',
borderOnSurface10: '#7F1616',
borderOnSurface: '#7F1616',
focusRingInset: '#FFF',
focusRingOutline: '#000',
onPrimary: '#1A1A1A',
onPrimaryInverse: '#FFF',
onPrimaryInverse_70: '#999',
onPrimary_10: '#CCC',
onPrimary_20: '#AAA',
onPrimary_40: '#999',
onPrimary_50: '#888',
onPrimary_90: '#2B2B2B',
onPrimary_95: '#1D1D1D',
onSelection: '#1A1A1A',
overlay: 'rgba(26, 26, 26, 0.9)',
primary: '#FFF',
primaryInverse: '#1A1A1A',
selection: '#D9D9D9',
surface10: '#333',
surface20: '#252525',
surface30: '#1a1a1a',
surface40: '#0d0d0d',
surface: '#000',
onSurface10: '#FFF',
onSurface20: '#FFF',
onSurface30: '#FFF',
onSurface40: '#FFF',
onSurface: '#FFF'
};
const AVOCADO: ThemeColors = {
background: '#FFEB3B',
onBackground: '#212121',
brand: '#FFC107',
brandAlt: '#CDDC39',
error: '#F44336',
info: '#03A9F4',
onBrand: '#333333',
onBrandAlt: '#333333',
onError: '#FFFFFF',
onInfo: '#FFFFFF',
onSuccess: '#FFFFFF',
onWarning: '#333333',
required: '#F44336',
success: '#4CAF50',
toggleOn: '#FFC107',
warning: '#FF9800',
borderOnPrimary: '#000000',
borderOnPrimaryInverse: '#EEEEEE',
borderOnSurface10: '#9E9E9E',
borderOnSurface: '#CCCCCC',
focusRingInset: '#000000',
focusRingOutline: '#FFFFFF',
onPrimary: '#FFFFFF',
onPrimaryInverse: '#4CAF50',
onPrimaryInverse_70: '#333333',
onPrimary_10: '#886A08',
onPrimary_20: '#FFEB3B',
onPrimary_40: '#FFEB3B',
onPrimary_50: '#FFDB58',
onPrimary_90: '#333333',
onPrimary_95: '#FFFFFF',
onSelection: '#333333',
onSurface10: '#9d9494',
onSurface20: '#b9b5b5',
onSurface30: '#c7e15f',
onSurface40: '#333333',
onSurface: '#FFFFFF',
overlay: 'rgba(128, 128, 128, 0.9)',
primary: '#CDDC39',
primaryInverse: '#333333',
selection: '#CDDC39',
surface10: '#424242',
surface20: '#303030',
surface30: '#1F1F1F',
surface40: '#0D0D0D',
surface: '#000000',
lightColor: '#FFFFFF',
darkColor: '#000000'
};
const ROYAL: ThemeColors = {
background: '#FFEB3B',
onBackground: '#212121',
brand: '#2196F3',
brandAlt: '#3F51B5',
error: '#F44336',
info: '#00BCD4',
onBrand: '#FFFFFF',
onBrandAlt: '#FFFFFF',
onError: '#FFFFFF',
onInfo: '#FFFFFF',
onSuccess: '#FFFFFF',
onWarning: '#333333',
required: '#F44336',
success: '#4CAF50',
toggleOn: '#2196F3',
warning: '#FF9800',
borderOnPrimary: '#000000',
borderOnPrimaryInverse: '#EEEEEE',
borderOnSurface10: '#9E9E9E',
borderOnSurface: '#CCCCCC',
focusRingInset: '#000000',
focusRingOutline: '#FFFFFF',
onPrimary: '#FFFFFF',
onPrimaryInverse: '#4CAF50',
onPrimaryInverse_70: '#333333',
onPrimary_10: '#B3E5FC',
onPrimary_20: '#FFEB3B',
onPrimary_40: '#2979FF',
onPrimary_50: '#3F51B5',
onPrimary_90: '#333333',
onPrimary_95: '#FFFFFF',
onSelection: '#FFFFFF',
onSurface10: '#333333',
onSurface20: '#333333',
onSurface30: '#333333',
onSurface40: '#333333',
onSurface: '#FFFFFF',
overlay: 'rgba(128, 128, 128, 0.9)',
primary: '#3F51B5',
primaryInverse: '#FFFFFF',
selection: '#3F51B5',
surface10: '#E0E0E0',
surface20: '#BDBDBD',
surface30: '#9E9E9E',
surface40: '#757575',
surface: '#333333',
lightColor: '#FFFFFF',
darkColor: '#000000'
};
const PEACH: ThemeColors = {
background: '#FFEB3B',
onBackground: '#212121',
brand: '#FF6B6B',
brandAlt: '#FFE66D',
error: '#D32F2F',
info: '#2979FF',
onBrand: '#FFFFFF',
onBrandAlt: '#3A3A3A',
onError: '#FFFFFF',
onInfo: '#FFFFFF',
onSuccess: '#FFFFFF',
onWarning: '#3A3A3A',
required: '#D32F2F',
success: '#4CAF50',
toggleOn: '#FFC107',
warning: '#FFA726',
borderOnPrimary: '#FF6B6B',
borderOnPrimaryInverse: '#FFFFFF',
borderOnSurface10: '#E6E6E6',
borderOnSurface: '#CCCCCC',
focusRingInset: '#FF6B6B',
focusRingOutline: '#FFC8C8',
onPrimary: '#FFFFFF',
onPrimaryInverse: '#FF6B6B',
onPrimaryInverse_70: 'rgba(255, 107, 107, 0.7)',
onPrimary_10: '#FFE6E6',
onPrimary_20: '#FFEB3B',
onPrimary_40: '#FFA5A5',
onPrimary_50: '#FF8A8A',
onPrimary_90: '#3A3A3A',
onPrimary_95: '#212121',
onSelection: '#FFFFFF',
onSurface10: '#212121',
onSurface20: '#424242',
onSurface30: '#616161',
onSurface40: '#9E9E9E',
onSurface: '#ED7470',
overlay: 'rgba(0,0,0,0.5)',
primary: '#FF6B6B',
primaryInverse: '#FFFFFF',
selection: '#FF6B6B',
surface10: '#F2F2F2',
surface20: '#E5E5E5',
surface30: '#D9D9D9',
surface40: '#CCCCCC',
surface: '#FFFFFF',
lightColor: '#FFFFFF',
darkColor: '#000000'
};
const BUMBLEBEE: ThemeColors = {
background: '#FFEB3B',
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: '#FFEB3B',
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'
};
export const PresetIds = [
'BLOODYMARY',
'AVOCADO',
'ROYAL',
'PEACH',
'BUMBLEBEE'
] as const;
type Presets = (typeof PresetIds)[number] | string;
export const colors: { [key: Presets]: ThemeColors } = {
BLOODYMARY,
AVOCADO,
ROYAL,
PEACH,
BUMBLEBEE
};