create-rivas-react
Version:
Boilerplate for create react with atomic design
64 lines (57 loc) • 1.18 kB
text/typescript
const colorsLight = {
primary: '#127dff',
secondary: '#ff9800',
accent: '#9c27b0',
error: '#f44336',
warning: '#ffeb3b',
info: '#2196f3',
success: '#4caf50',
black: '#000',
white: '#fff',
transparent: 'transparent',
background: '#ffffff',
bgCard: 'rgba(100, 100, 200, .2)',
text: '#000000',
nav: 'rgba(255, 255, 255, 0.8)',
modal: 'rgba(0, 0, 0, 0.1)',
bgModal: 'white',
input: '#F5F5F5',
borderColor: '#F5F5F5',
shadowInput: 'rgb(224, 224, 224)',
icon: '#BBBBBB',
};
const colorsDark = {
...colorsLight,
background: '#000000',
text: '#ffffff',
bgCard: 'rgba(100, 100, 200, 0.3)',
nav: 'rgba(0, 0, 0, .5)',
bgModal: '#161616',
input: '#161616',
borderColor: '#313538',
shadowInput: 'rgb(77, 77, 77)',
};
export type ColorType = keyof typeof colorsLight;
const zIndex = {
min: -1,
one: 1,
two: 2,
three: 3,
four: 4,
five: 5,
max: 10,
nav: 20,
modal: 30,
};
export const themeLight = {
colors: colorsLight,
zIndex,
};
export const themeDark = {
...themeLight,
colors: colorsDark,
};
export const mediaQueries = {
tablet: '@media (min-width: 768px)',
desktop: '@media (min-width: 1200px)',
};