# Colors

1. Generate a theme with Color generator: https://colors.eva.design/
2. Add generated colors as override to `createTheme([], { baseColors: { ...yourGeneratedColorsHere } })`

## Default colors

```typescript
const COLOR_PRIMARY_100 = '#f2f6ff'
const COLOR_PRIMARY_200 = '#d9e4ff'
const COLOR_PRIMARY_300 = '#a6c1ff'
const COLOR_PRIMARY_400 = '#598bff'
const COLOR_PRIMARY_500 = '#3366ff'
const COLOR_PRIMARY_600 = '#274bdb'
const COLOR_PRIMARY_700 = '#1a34b8'
const COLOR_PRIMARY_800 = '#102694'
const COLOR_PRIMARY_900 = '#091c7a'

const COLOR_PRIMARY_TRANSPARENT_100 = 'rgba(51, 102, 255, 0.08)'
const COLOR_PRIMARY_TRANSPARENT_200 = 'rgba(51, 102, 255, 0.16)'
const COLOR_PRIMARY_TRANSPARENT_300 = 'rgba(51, 102, 255, 0.24)'
const COLOR_PRIMARY_TRANSPARENT_400 = 'rgba(51, 102, 255, 0.32)'
const COLOR_PRIMARY_TRANSPARENT_500 = 'rgba(51, 102, 255, 0.4)'
const COLOR_PRIMARY_TRANSPARENT_600 = 'rgba(51, 102, 255, 0.48)'

const COLOR_SUCCESS_100 = '#f0fff5'
const COLOR_SUCCESS_200 = '#ccfce3'
const COLOR_SUCCESS_300 = '#8cfac7'
const COLOR_SUCCESS_400 = '#2ce69b'
const COLOR_SUCCESS_500 = '#00d68f'
const COLOR_SUCCESS_600 = '#00b887'
const COLOR_SUCCESS_700 = '#00997a'
const COLOR_SUCCESS_800 = '#007d6c'
const COLOR_SUCCESS_900 = '#004a45'

const COLOR_SUCCESS_TRANSPARENT_100 = 'rgba(0, 214, 143, 0.08)'
const COLOR_SUCCESS_TRANSPARENT_200 = 'rgba(0, 214, 143, 0.16)'
const COLOR_SUCCESS_TRANSPARENT_300 = 'rgba(0, 214, 143, 0.24)'
const COLOR_SUCCESS_TRANSPARENT_400 = 'rgba(0, 214, 143, 0.32)'
const COLOR_SUCCESS_TRANSPARENT_500 = 'rgba(0, 214, 143, 0.4)'
const COLOR_SUCCESS_TRANSPARENT_600 = 'rgba(0, 214, 143, 0.48)'

const COLOR_INFO_100 = '#f2f8ff'
const COLOR_INFO_200 = '#c7e2ff'
const COLOR_INFO_300 = '#94cbff'
const COLOR_INFO_400 = '#42aaff'
const COLOR_INFO_500 = '#0095ff'
const COLOR_INFO_600 = '#006fd6'
const COLOR_INFO_700 = '#0057c2'
const COLOR_INFO_800 = '#0041a8'
const COLOR_INFO_900 = '#002885'

const COLOR_INFO_TRANSPARENT_100 = 'rgba(0, 149, 255, 0.08)'
const COLOR_INFO_TRANSPARENT_200 = 'rgba(0, 149, 255, 0.16)'
const COLOR_INFO_TRANSPARENT_300 = 'rgba(0, 149, 255, 0.24)'
const COLOR_INFO_TRANSPARENT_400 = 'rgba(0, 149, 255, 0.32)'
const COLOR_INFO_TRANSPARENT_500 = 'rgba(0, 149, 255, 0.4)'
const COLOR_INFO_TRANSPARENT_600 = 'rgba(0, 149, 255, 0.48)'

const COLOR_WARNING_100 = '#fffdf2'
const COLOR_WARNING_200 = '#fff1c2'
const COLOR_WARNING_300 = '#ffe59e'
const COLOR_WARNING_400 = '#ffc94d'
const COLOR_WARNING_500 = '#ffaa00'
const COLOR_WARNING_600 = '#db8b00'
const COLOR_WARNING_700 = '#b86e00'
const COLOR_WARNING_800 = '#945400'
const COLOR_WARNING_900 = '#703c00'

const COLOR_WARNING_TRANSPARENT_100 = 'rgba(255, 170, 0, 0.08)'
const COLOR_WARNING_TRANSPARENT_200 = 'rgba(255, 170, 0, 0.16)'
const COLOR_WARNING_TRANSPARENT_300 = 'rgba(255, 170, 0, 0.24)'
const COLOR_WARNING_TRANSPARENT_400 = 'rgba(255, 170, 0, 0.32)'
const COLOR_WARNING_TRANSPARENT_500 = 'rgba(255, 170, 0, 0.4)'
const COLOR_WARNING_TRANSPARENT_600 = 'rgba(255, 170, 0, 0.48)'

const COLOR_DANGER_100 = '#fff2f2'
const COLOR_DANGER_200 = '#ffd6d9'
const COLOR_DANGER_300 = '#ffa8b4'
const COLOR_DANGER_400 = '#ff708d'
const COLOR_DANGER_500 = '#ff3d71'
const COLOR_DANGER_600 = '#db2c66'
const COLOR_DANGER_700 = '#b81d5b'
const COLOR_DANGER_800 = '#94124e'
const COLOR_DANGER_900 = '#700940'

const COLOR_DANGER_TRANSPARENT_100 = 'rgba(255, 61, 113, 0.08)'
const COLOR_DANGER_TRANSPARENT_200 = 'rgba(255, 61, 113, 0.16)'
const COLOR_DANGER_TRANSPARENT_300 = 'rgba(255, 61, 113, 0.24)'
const COLOR_DANGER_TRANSPARENT_400 = 'rgba(255, 61, 113, 0.32)'
const COLOR_DANGER_TRANSPARENT_500 = 'rgba(255, 61, 113, 0.4)'
const COLOR_DANGER_TRANSPARENT_600 = 'rgba(255, 61, 113, 0.48)'

const COLOR_BASIC_100 = '#ffffff'
const COLOR_BASIC_200 = '#f7f9fc'
const COLOR_BASIC_300 = '#edf1f7'
const COLOR_BASIC_400 = '#e4e9f2'
const COLOR_BASIC_500 = '#c5cee0'
const COLOR_BASIC_600 = '#8f9bb3'
const COLOR_BASIC_700 = '#2e3a59'
const COLOR_BASIC_800 = '#222b45'
const COLOR_BASIC_900 = '#192038'
const COLOR_BASIC_1000 = '#151a30'
const COLOR_BASIC_1100 = '#101426'

const COLOR_BASIC_TRANSPARENT_100 = 'rgba(143, 155, 179, 0.08)'
const COLOR_BASIC_TRANSPARENT_200 = 'rgba(143, 155, 179, 0.16)'
const COLOR_BASIC_TRANSPARENT_300 = 'rgba(143, 155, 179, 0.24)'
const COLOR_BASIC_TRANSPARENT_400 = 'rgba(143, 155, 179, 0.32)'
const COLOR_BASIC_TRANSPARENT_500 = 'rgba(143, 155, 179, 0.4)'
const COLOR_BASIC_TRANSPARENT_600 = 'rgba(143, 155, 179, 0.48)'

const COLOR_BASIC_CONTROL_TRANSPARENT_100 = 'rgba(255, 255, 255, 0.08)'
const COLOR_BASIC_CONTROL_TRANSPARENT_200 = 'rgba(255, 255, 255, 0.16)'
const COLOR_BASIC_CONTROL_TRANSPARENT_300 = 'rgba(255, 255, 255, 0.24)'
const COLOR_BASIC_CONTROL_TRANSPARENT_400 = 'rgba(255, 255, 255, 0.32)'
const COLOR_BASIC_CONTROL_TRANSPARENT_500 = 'rgba(255, 255, 255, 0.4)'
const COLOR_BASIC_CONTROL_TRANSPARENT_600 = 'rgba(255, 255, 255, 0.48)'
```