status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(system): use colors from design system in Button

This commit is contained in:
Pavel Prichodko 2022-03-31 15:13:22 +02:00
parent 1671da13bf
commit b662c253f3
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/status-react/src/system/button/styles.tsx
View File

@ -14,31 +14,35 @@ export const Base = styled('button', {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
padding: '11px 24px', padding: '11px 24px',
borderRadius: 8, borderRadius: '$8',
transitionProperty: 'background-color, border-color, color, fill, stroke', transitionProperty: 'background-color, border-color, color, fill, stroke',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionDuration: '150ms', transitionDuration: '150ms',
'&:disabled': { '&:disabled': {
background: '#EEF2F5', color: '$gray-1',
color: '#939BA1', background: '$gray-2',
cursor: 'not-allowed', cursor: 'not-allowed',
'&:hover': {
background: '$gray-2',
},
}, },
variants: { variants: {
variant: { variant: {
default: { default: {
background: 'rgba(67, 96, 223, 0.1)', background: '$primary-3',
color: '#4360DF', color: '$primary-1',
'&:hover': {}, '&:hover': {
background: '$primary-2',
}, },
minimal: {
'&:hover': {},
}, },
danger: { danger: {
background: 'rgba(255, 45, 85, 0.1)', background: '$danger-3',
color: '#FF2D55', color: '$danger-1',
'&:hover': {}, '&:hover': {
background: '$danger-2',
},
}, },
}, },
loading: { loading: {