vytal-redux/src/theme.ts
2022-10-29 21:28:15 -04:00

73 lines
1.4 KiB
TypeScript

import type { Theme } from 'theme-ui'
export const theme: Theme = {
colors: {
text: '#333333',
background: '#FDFDFD',
// primary: '#B77EEE',
// primaryDark: '#a55eea',
primary: '#a55eea',
primaryDark: '#9454d2',
red: '#fc5c65',
redDark: '#e2525a',
green: '#26de81',
greenDark: '#22c774',
grey: '#989898',
},
styles: {
root: {
backgroundColor: 'background',
color: 'text',
fontSize: '18px',
lineHeight: '22px',
margin: '0',
},
},
forms: {
label: { width: 'auto', alignItems: 'center' },
input: {
// border: '2px solid',
p: '4px 8px',
mb: '8px',
borderColor: 'grey',
'&:focus': {
borderColor: 'primaryDark',
outline: 'none',
},
},
select: {
// border: '2px solid',
cursor: 'pointer',
p: '4px 8px',
borderColor: 'grey',
'&:focus': {
borderColor: 'primaryDark',
outline: 'none',
},
},
radio: {
cursor: 'pointer',
},
},
buttons: {
primary: {
color: 'background',
bg: 'primary',
py: '6px',
px: '8px',
cursor: 'pointer',
borderRadius: '0',
width: '100%',
display: 'block',
'&:hover': {
bg: 'primaryDark',
},
},
close: {
cursor: 'pointer',
color: 'text',
p: 0,
m: 0,
},
},
}