Add colors from design system
This commit is contained in:
parent
8590951786
commit
da9beccd76
|
@ -19,7 +19,50 @@ export const { styled, css, keyframes, theme, createTheme, config } =
|
||||||
600: '600',
|
600: '600',
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
white: '#fff',
|
white: 'rgb(255, 255, 255)',
|
||||||
|
black: 'rgb(0, 0, 0)',
|
||||||
|
current: 'currentColor',
|
||||||
|
transparent: 'transparent',
|
||||||
|
|
||||||
|
'primary-1': 'rgba(67, 96, 223, 1)',
|
||||||
|
'primary-2': 'rgba(67, 96, 223, 0.2)',
|
||||||
|
'primary-3': 'rgba(67, 96, 223, 0.1)',
|
||||||
|
|
||||||
|
'gray-1': 'rgba(147, 155, 161, 1)',
|
||||||
|
'gray-2': 'rgba(238, 242, 245, 1)',
|
||||||
|
'gray-3': 'rgba(233, 237, 241, 1)',
|
||||||
|
'gray-4': 'rgba(246, 248, 250, 1)',
|
||||||
|
'gray-5': 'rgba(240, 242, 245, 1)',
|
||||||
|
|
||||||
|
'danger-1': 'rgba(255, 45, 85, 1)',
|
||||||
|
'danger-2': 'rgba(255, 45, 85, 0.2)',
|
||||||
|
'danger-3': 'rgba(255, 45, 85, 0.1)',
|
||||||
|
|
||||||
|
'success-1': 'rgba(78, 188, 96, 1)',
|
||||||
|
'success-2': 'rgba(78, 188, 96, 0.1)',
|
||||||
|
|
||||||
|
'accent-1': 'rgba(0, 0, 0, 1)',
|
||||||
|
'accent-2': 'rgba(0, 0, 0, 0.9)',
|
||||||
|
'accent-3': 'rgba(0, 0, 0, 0.8)',
|
||||||
|
'accent-4': 'rgba(0, 0, 0, 0.7)',
|
||||||
|
'accent-5': 'rgba(0, 0, 0, 0.4)',
|
||||||
|
'accent-6': 'rgba(0, 0, 0, 0.2)',
|
||||||
|
'accent-7': 'rgba(0, 0, 0, 0.1)',
|
||||||
|
'accent-8': 'rgba(0, 0, 0, 0.05)',
|
||||||
|
'accent-9': 'rgba(255, 255, 255, 0.4)',
|
||||||
|
'accent-10': 'rgba(255, 255, 255, 0.7)',
|
||||||
|
'accent-11': 'rgba(255, 255, 255, 1)',
|
||||||
|
|
||||||
|
blue: 'rgba(41, 70, 196, 1)',
|
||||||
|
purple: 'rgba(136, 122, 249, 1)',
|
||||||
|
cyan: 'rgba(81, 208, 240, 1)',
|
||||||
|
violet: 'rgba(211, 126, 244, 1)',
|
||||||
|
grep: 'rgba(250, 101, 101, 1)',
|
||||||
|
yellow: 'rgba(255, 202, 15, 1)',
|
||||||
|
grass: 'rgba(124, 218, 0, 1)',
|
||||||
|
moss: 'rgba(38, 166, 154, 1)',
|
||||||
|
vintage: 'rgba(139, 49, 49, 1)',
|
||||||
|
kaki: 'rgba(155, 131, 47, 1)',
|
||||||
},
|
},
|
||||||
space: {
|
space: {
|
||||||
1: '4px',
|
1: '4px',
|
||||||
|
@ -37,11 +80,53 @@ export const { styled, css, keyframes, theme, createTheme, config } =
|
||||||
full: '100%',
|
full: '100%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
media: {
|
media: {
|
||||||
medium: '(min-width: 500px)',
|
medium: '(min-width: 500px)',
|
||||||
large: '(min-width: 736px)',
|
large: '(min-width: 736px)',
|
||||||
|
|
||||||
motion: '(prefers-reduced-motion: no-preference)',
|
motion: '(prefers-reduced-motion: no-preference)',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const darkTheme = createTheme({
|
||||||
|
colors: {
|
||||||
|
'primary-1': 'rgba(136, 176, 255, 1)',
|
||||||
|
'primary-2': 'rgba(134, 158, 255, 0.3)',
|
||||||
|
'primary-3': 'rgba(134, 158, 255, 0.2)',
|
||||||
|
|
||||||
|
'gray-1': 'rgba(144, 144, 144, 1)',
|
||||||
|
'gray-2': 'rgba(55, 55, 55, 1)',
|
||||||
|
'gray-3': 'rgba(44, 44, 44, 1)',
|
||||||
|
'gray-4': 'rgba(37, 37, 37, 1)',
|
||||||
|
'gray-5': 'rgba(33, 33, 33, 1)',
|
||||||
|
|
||||||
|
'danger-1': 'rgba(255, 92, 123, 1)',
|
||||||
|
'danger-2': 'rgba(255, 92, 123, 0.3)',
|
||||||
|
'danger-3': 'rgba(255, 92, 123, 0.2)',
|
||||||
|
|
||||||
|
'success-1': 'rgba(96, 195, 112, 1)',
|
||||||
|
'success-2': 'rgba(96, 195, 112, 0.2)',
|
||||||
|
|
||||||
|
'accent-1': 'rgba(255, 255, 255, 1)',
|
||||||
|
'accent-2': 'rgba(255, 255, 255, 0.9)',
|
||||||
|
'accent-3': 'rgba(255, 255, 255, 0.8)',
|
||||||
|
'accent-4': 'rgba(255, 255, 255, 0.7)',
|
||||||
|
'accent-5': 'rgba(255, 255, 255, 0.4)',
|
||||||
|
'accent-6': 'rgba(255, 255, 255, 0.2)',
|
||||||
|
'accent-7': 'rgba(255, 255, 255, 0.1)',
|
||||||
|
'accent-8': 'rgba(255, 255, 255, 0.05)',
|
||||||
|
'accent-9': 'rgba(0, 0, 0, 0.4)',
|
||||||
|
'accent-10': 'rgba(0, 0, 0, 0.7)',
|
||||||
|
'accent-11': 'rgba(0, 0, 0, 1)',
|
||||||
|
|
||||||
|
blue: 'rgba(170, 198, 255, 1)',
|
||||||
|
purple: 'rgba(136, 122, 249, 1)',
|
||||||
|
cyan: 'rgba(81, 208, 240, 1)',
|
||||||
|
violet: 'rgba(211, 126, 244, 1)',
|
||||||
|
grep: 'rgba(250, 101, 101, 1)',
|
||||||
|
yellow: 'rgba(255, 202, 15, 1)',
|
||||||
|
grass: 'rgba(147, 219, 51, 1)',
|
||||||
|
moss: 'rgba(16, 168, 142, 1)',
|
||||||
|
vintage: 'rgba(173, 67, 67, 1)',
|
||||||
|
kaki: 'rgba(234, 210, 123, 1)',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
Loading…
Reference in New Issue