import { DarkTheme, Theme as NavigationTheme } from '@react-navigation/native'; import { Color } from '@emotion/react'; export const COLOR_VALUES: ColorValuesType = { white: '#FFFFFF', 'underlay-primary': 'rgba(124, 107, 255, .3)', 'underlay-success': 'rgba(68, 186, 115, 0.5)', 'underlay-dark': 'rgba(16, 16, 34, 0.3)', 'underlay-dark-04': 'rgba(16, 16, 34, 0.4)', 'underlay-dark-05': 'rgba(16, 16, 34, 0.5)', 'underlay-dark-06': 'rgba(16, 16, 34, 0.6)', primary: '#7C6BFF', 'primary-hover': '#6658DA', 'primary-01': 'rgba(124, 107, 255, .1)', 'primary-02': 'rgba(124, 107, 255, .2)', 'primary-03': 'rgba(124, 107, 255, .3)', 'primary-08': 'rgba(124, 107, 255, .8)', //Secondary secondary: '#FE6F4A', 'secondary-hover': '#DA6049', 'secondary-01': 'rgba(254, 111, 74, .1)', 'secondary-02': 'rgba(254, 111, 74, .2)', 'secondary-08': 'rgba(254, 111, 74, .8)', success: '#44BA73', 'success-01': 'rgba(68, 186, 115, 0.1)', 'success-02': 'rgba(68, 186, 115, 0.2)', 'success-08': 'rgba(68, 186, 115, 0.8)', //status 'status-alert': '#FE6F4A', 'status-success': '#44BA73', light: { base: '#F0F0F4', 'base-opacity-05': 'rgba(240,240,244,0.5)', 'base-opacity-06': 'rgba(240,240,244,0.6)', 'base-hover': 'rgba(240, 240, 244,.5)', 'base-06': '#3D3B6B', 'base-03': '#CFCEDA', 'base-03-hover': 'rgba(207,206,218,.5)', 'base-02': '#E7E7EC', 'base-02-hover': 'rgba(231, 231, 236,0.5)', 'base-01': '#FFFFFF', 'base-01-hover': 'rgba(240, 240, 244,0.5)', divider: '#CFCEDA', 'divider-01': '#F0F0F4', 'divider-02': '#E7E7EC', 'grey-08': '#0D0A46', 'grey-07': '#252258', 'grey-06': '#3D3B6B', 'grey-05': '#6E6C90', 'grey-04': '#9E9DB5', 'grey-03': '#CFCEDA', 'grey-02': '#E7E7EC', 'grey-01': '#F0F0F4', }, dark: { base: '#29293B', 'base-opacity-05': 'rgba(44,44,56,0.5)', 'base-opacity-06': 'rgba(44,44,56,0.6)', 'base-hover': '#3F3F51', 'base-02': '#3F3F51', 'base-02-hover': 'rgba(63,63,81,0.5)', 'base-06': '#E7E7EC', 'base-03': '#6F6F81', 'base-03-hover': 'rgba(111,111,129,.5)', 'base-01': '#20202D', 'base-01-hover': 'rgba(16, 16, 34,.5)', divider: '#3F3F51', 'divider-01': '#272739', 'divider-02': '#3F3F51', 'grey-08': '#FFFFFF', 'grey-07': '#F0F0F4', 'grey-06': '#E7E7EC', 'grey-05': '#CFCEDA', 'grey-04': '#9E9EB0', 'grey-03': '#6F6F81', 'grey-02': '#3F3F51', 'grey-01': '#272739', }, }; const COLOR_COMMON = { transparent: 'transparent', white: COLOR_VALUES.white, 'button-primary': COLOR_VALUES.light['base-01'], 'underlay-primary': COLOR_VALUES['underlay-primary'], //primary primary: COLOR_VALUES.primary, 'primary-hover': COLOR_VALUES['primary-hover'], 'primary-01': COLOR_VALUES['primary-01'], 'primary-02': COLOR_VALUES['primary-02'], 'primary-03': COLOR_VALUES['primary-03'], 'primary-08': COLOR_VALUES['primary-08'], //Secondary secondary: COLOR_VALUES.secondary, 'secondary-hover': COLOR_VALUES['secondary-hover'], 'secondary-01': COLOR_VALUES['secondary-01'], 'secondary-02': COLOR_VALUES['secondary-02'], 'secondary-08': COLOR_VALUES['secondary-08'], success: COLOR_VALUES.success, 'success-01': COLOR_VALUES['success-01'], 'success-02': COLOR_VALUES['success-02'], 'success-08': COLOR_VALUES['success-08'], //status 'status-alert': COLOR_VALUES['status-alert'], 'status-success': COLOR_VALUES['status-success'], }; export const COLOR_DARK: Color = { ...COLOR_COMMON, ...COLOR_VALUES.dark, white: COLOR_VALUES.white, // text heading: COLOR_VALUES.dark['grey-08'], title: COLOR_VALUES.dark['grey-08'], body: COLOR_VALUES.dark['grey-05'], caption: COLOR_VALUES.dark['grey-04'], label: COLOR_VALUES.dark['grey-04'], 'caption-bold': COLOR_VALUES.dark['grey-08'], 'caption-01': COLOR_VALUES.dark['grey-03'], }; export const COLOR_LIGHT: Color = { ...COLOR_COMMON, ...COLOR_VALUES.light, // text heading: COLOR_VALUES.light['grey-08'], title: COLOR_VALUES.light['grey-08'], body: COLOR_VALUES.light['grey-05'], caption: COLOR_VALUES.light['grey-05'], label: COLOR_VALUES.light['grey-05'], 'caption-bold': COLOR_VALUES.light['grey-08'], 'caption-01': COLOR_VALUES.light['grey-04'], }; export const navigatorTheme: NavigationTheme = { dark: true, colors: { ...DarkTheme.colors, primary: COLOR_DARK.primary, background: COLOR_DARK.base, text: COLOR_DARK['grey-08'], card: COLOR_DARK['base-01'], border: COLOR_DARK['base-01'], }, }; export interface ColorValuesType { white: string; // button-underlay 'underlay-primary': string; 'underlay-success': string; 'underlay-dark': string; 'underlay-dark-04': string; 'underlay-dark-05': string; 'underlay-dark-06': string; // primary primary: string; 'primary-hover': string; 'primary-01': string; 'primary-02': string; 'primary-03': string; 'primary-08': string; //Secondary secondary: string; 'secondary-hover': string; 'secondary-01': string; 'secondary-02': string; 'secondary-08': string; success: string; 'success-01': string; 'success-02': string; 'success-08': string; //status 'status-alert': string; 'status-success': string; light: LightDarkColor; dark: LightDarkColor; } type LightDarkColor = { // grey 'grey-08': string; 'grey-07': string; 'grey-06': string; 'grey-05': string; 'grey-04': string; 'grey-03': string; 'grey-02': string; 'grey-01': string; base: string; 'base-opacity-05': string; 'base-opacity-06': string; 'base-hover': string; 'base-01': string; 'base-01-hover': string; 'base-02': string; 'base-02-hover': string; 'base-03': string; 'base-03-hover': string; 'base-06': string; /** * will be used on base */ divider: string; /** * will be used on base-01 */ 'divider-01': string; 'divider-02': string; }; export const colors = [ 'transparent', 'white', 'button-primary', 'underlay-primary', 'base', 'base-opacity-05', 'base-opacity-06', 'base-hover', 'base-02', 'base-02-hover', 'base-06', 'base-03', 'base-03-hover', 'base-01', 'base-01-hover', 'divider', // brand 'primary', 'primary-01', 'primary-02', 'primary-03', 'primary-hover', 'secondary', 'secondary-01', 'secondary-hover', 'success', 'success-01', // grey 'grey-08', 'grey-07', 'grey-06', 'grey-05', 'grey-04', 'grey-03', 'grey-02', 'grey-01', // text 'heading', 'title', 'body', 'caption', 'caption-bold', 'caption-01', 'label', // status 'status-alert', 'status-success', ];