| 1 | import styled from 'styled-components'
|
| 2 |
|
| 3 |
|
| 4 | export default styled.div`
|
| 5 | width: 180px;
|
| 6 | height: 180px;
|
| 7 | border-radius: 10px;
|
| 8 | background-color: ${props => colors[props.color]};
|
| 9 | border: 1px solid #333;
|
| 10 | `
|
| 11 |
|
| 12 | const brandColors = {
|
| 13 | rocketBlue: '#0073D1',
|
| 14 | rocketBlueHover: '#0073EB',
|
| 15 | navy: '#00003C',
|
| 16 | yellow: '#F0FF02',
|
| 17 | yellowHover: '#D8E320',
|
| 18 | lightBlue0: '#EEFCFF',
|
| 19 | lightBlue1: '#BCE1F7',
|
| 20 | lightBlue2: '#76C2F3',
|
| 21 | lightBlue: ['#EEFCFF', '#BCE1F7', '#76C2F3'],
|
| 22 | electricBlue: '#080CF1',
|
| 23 | lightPink: '#FBDDE4',
|
| 24 | pink: '#FEACBE',
|
| 25 | white: '#FFFFFF',
|
| 26 | flameOrange: '#FF511C'
|
| 27 | }
|
| 28 |
|
| 29 | const supportingColors = {
|
| 30 | black: '#000000',
|
| 31 | gray0: '#F3F3F3',
|
| 32 | gray1: '#F5F5F5',
|
| 33 | gray2: '#F8F8F8',
|
| 34 | gray3: '#E6E6E6',
|
| 35 | gray4: '#D5D5D5',
|
| 36 | gray5: '#CFCFCF',
|
| 37 | gray6: '#979797',
|
| 38 | gray: [
|
| 39 | '#F3F3F3',
|
| 40 | '#F5F5F5',
|
| 41 | '#F8F8F8',
|
| 42 | '#E6E6E6',
|
| 43 | '#D5D5D5',
|
| 44 | '#CFCFCF',
|
| 45 | '#979797'
|
| 46 | ],
|
| 47 | shadyLady: '#979797',
|
| 48 | red: '#FF511C',
|
| 49 | loading: '#BFBFBF'
|
| 50 | }
|
| 51 |
|
| 52 | const colors = { ...brandColors, ...supportingColors }
|
| 53 | export { colors }
|