feat(system): use colors from design system in Button
This commit is contained in:
parent
1671da13bf
commit
b662c253f3
|
@ -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: {
|
||||||
|
|
Loading…
Reference in New Issue