UNPKG

apphouse

Version:

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

274 lines (266 loc) 6.64 kB
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 };