# Colors
## Color System
The color system is the source of the colors that themes draw from. Each has a 
range of values from `0` (black `#000000`) to `150` (white `#ffffff`). Not all 
colors are or should be used in every theme, but the scales provide a chance to 
see the colors in a larger context and makes it easy to switch out colors as desired.

The number assigned to each estimates how light or dark that color is. For parts of 
an interface that are interactive, have text, or have any other important information, 
please use colors combinations that have at least a difference of 20 where colors 
overlap. Depending on the colors, you may need more contrast to create a theme that 
meets accessibility standards about contrast or color blindness.

### Gray
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | ![ ](https://user-images.githubusercontent.com/50221806/103318619-db43f580-49e3-11eb-9747-fa8f49890d4c.png) |
| B10 | `#19232D` | ![ ]() |
| B20 | `#262E38` | ![ ]() |
| B30 | `#37414F` | ![ ]() |
| B40 | `#455364` | ![ ]() |
| B50 | `#54687A` | ![ ]() |
| B60 | `#60798B` | ![ ]() |
| B70 | `#788D9C` | ![ ]() |
| B80 | `#9DA9B5` | ![ ]() | 
| B90 | `#CBCACA` | ![ ]() |
| B100 | `#D9D8D8` | ![ ]() |
| B110 | `#E1E1E1` | ![ ]() |
| B120 | `#EEEEEE` | ![ ]() |
| B130 | `#F5F5F5` | ![ ]() |
| B140 | `#FAFAFA` | ![ ]() |
| B150 | `#FFFFFF` | ![ ]() |

### Blue
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | |
| B10 | `#062647` | |
| B20 | `#26486B` | |
| B30 | `#375A7F` | |
| B40 | `#346792` | |
| B50 | `#1A72BB` | |
| B60 | `#057DCE` | |
| B70 | `#259AE9` | |
| B80 | `#37AEFE` | | 
| B90 | `#73C7FF` | |
| B100 | `#9FD9FF` | |
| B110 | `#C2E3FA` | |
| B120 | `#CEEBFF` | |
| B130 | `#DAF0FF` | |
| B140 | `#F5FBFF` | |
| B150 | `#FFFFFF` | |

### Green
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | |
| B10 | `#064738` | |
| B20 | `#055C49` | |
| B30 | `#007A5E` | |
| B40 | `#008760` | |
| B50 | `#019D70` | |
| B60 | `#02BA85` | |
| B70 | `#20C997` | |
| B80 | `#44DEB0` | | 
| B90 | `#3BEBB7` | |
| B100 | `#88F2D3` | |
| B110 | `#B0F5E1` | |
| B120 | `#D1FBEE` | |
| B130 | `#E4FFF7` | |
| B140 | `#F5FFFD` | |
| B150 | `#FFFFFF` | |

### Red
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | |
| B10 | `#470606` | |
| B20 | `#760B0B` | |
| B30 | `#AF0F0F` | |
| B40 | `#D4140B` | |
| B50 | `#DE321F` | |
| B60 | `#E24232` | |
| B70 | `#E74C3C` | |
| B80 | `#F66657` | | 
| B90 | `#F88478` | |
| B100 | `#FFACA4` | |
| B110 | `#FFC3BD` | |
| B120 | `#FEDDDA` | |
| B130 | `#FFEEEE` | |
| B140 | `#FFF5F5` | |
| B150 | `#FFFFFF` | |

### Orange
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | |
| B10 | `#471D06` | |
| B20 | `#692907` | |
| B30 | `#AB3E00` | |
| B40 | `#CE4B01` | |
| B50 | `#E05E15` | |
| B60 | `#E57004` | |
| B70 | `#F37E12` | |
| B80 | `#FF993B` | | 
| B90 | `#FFB950` | |
| B100 | `#FFCF84` | |
| B110 | `#FFC3BD` | |
| B120 | `#FFEACA` | |
| B130 | `#FFF3E2` | |
| B140 | `#FFFBF5` | |
| B150 | `#FFFFFF` | |

## Default Dark Mode
### Background
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| BACKGROUND_1 | B10 | `#19232D` | |
| BACKGROUND_2 | B20 | `#262E38` | |
| BACKGROUND_3 | B40 | `#455364` | |
| BACKGROUND_4 | B60 | `#60798B` | |
| BACKGROUND_5 | B60 | `#60798B` | |

### Text
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| TEXT_1 | B150 | `#FFFFFF` | |
| TEXT_2 | B140 | `#FAFAFA` | |
| TEXT_3 | B120 | `#EEEEEE` | |
| TEXT_4 | B100 | `#D9D8D8` | |

### Inverse Text
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| INVERSE_TEXT_1 | B150 | `#FFFFFF` | |
| INVERSE_TEXT_2 | B140 | `#FAFAFA` | |
| INVERSE_TEXT_3 | B120 | `#EEEEEE` | |
| INVERSE_TEXT_4 | B100 | `#D9D8D8` | |

### Accent
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| ACCENT_1 | B50 | `#1A72BB` | |
| ACCENT_2 | B70 | `#259AE9` | |
| ACCENT_3 | B90 | `#73C7FF` | |
| ACCENT_4 | B110 | `#C2E3FA` | |

### Border
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| BORDER_1 | B40 | `#455364` | |
| BORDER_2 | B50 | `#54687A` | |
| BORDER_3 | B60 | `#60798B` | |
| BORDER_4 | B70 | `#788D9C` | |

### Feedback
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| SUCCESS_1 | B40 | `#008760` | |
| SUCCESS_2 | B70 | `#20C997` | |
| SUCCESS_3 | B110 | `#B0F5E1` | |
| ERROR_1 | B40 | `#D4140B` | |
| ERROR_2 | B70 | `#E74C3C` | |
| ERROR_3 | B110 | `#FFC3BD` | |
| WARN_1 | B40 | `#CE4B01` | |
| WARN_2 | B70 | `#F37E12` | |
| WARN_3 | B110 | `#FFDDA7` | |

### Icon
ICON_1 = 'GRAY_140' `#FAFAFA`
ICON_2 = 'BLUE_70' `#259AE9`
ICON_3 = 'GREEN_70' `#20C997`
ICON_4 = 'RED_70' `#E74C3C`
ICON_5 = 'ORANGE_70' `#F37E12`
ICON_6 = 'GRAY_30' `#37414F`

| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| ICON_1 | B140 | `#FAFAFA` | |
| ICON_2 | B70 | `#259AE9` | |
| ICON_3 | B70 | `#20C997` | |
| ICON_4 | B70 | `#E74C3C` | |
| ICON_5 | B70 | `#F37E12` | |
| ICON_6 | B30 | `#37414F` | |

### Highlight
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| HIGHLIGHT_1 | B50 | `#54687A` | |
| HIGHLIGHT_2 | B60 | `#60798B` | |
| HIGHLIGHT_3 | B70 | `#788D9C` | |
| HIGHLIGHT_4 | B80 | `#9DA9B5` | |

### Find
FIND_1 = 'BLUE_50' #90% `#1A72BB` `rgba(26,114,187,0.9)`
FIND_2 = 'BLUE_60' #90% `#057DCE` `rgba(5,125,206,0.9)`
FIND_3 = 'BLUE_70' #90% `#259AE9` `rgba(37,154,233,0.9)`
FIND_4 = 'BLUE_80' #90% `#37AEFE` `rgba(55,174,254,0.9)`

| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| FIND_1 | B50 | `#1A72BB` | |
| FIND_2 | B60 | `#057DCE` | |
| FIND_3 | B70 | `#259AE9` | |
| FIND_4 | B80 | `#37AEFE` | |
    
## Default Light Mode
### Background
BACKGROUND_1 = 'GRAY_140' `#FAFAFA`
BACKGROUND_2 = 'GRAY_120' `#EEEEEE`
BACKGROUND_3 = 'GRAY_100' `#D9D8D8`
BACKGROUND_4 = 'GRAY_80' `#9DA9B5`
BACKGROUND_5 = 'GRAY_60' `#60798B`
### Text
TEXT_1 = 'GRAY_0' `#000000`
TEXT_2 = 'GRAY_10' `#19232D`
TEXT_3 = 'GRAY_20' `#262E38`
TEXT_4 = 'GRAY_40' `#455364`   
### Inverse Text
INVERSE_TEXT_1 = 'GRAY_150' `#FFFFFF`
INVERSE_TEXT_2 = 'GRAY_140' `#FAFAFA`
INVERSE_TEXT_3 = 'GRAY_120' `#EEEEEE`
INVERSE_TEXT_4 = 'GRAY_100' `#D9D8D8`
### Accent
ACCENT_1 = 'BLUE_50' `#1A72BB`
ACCENT_2 = 'BLUE_70' `##259AE9`
ACCENT_3 = 'BLUE_90' `#73C7FF`
ACCENT_4 = 'BLUE_110' `#C2E3FA`
### Border
BORDER_1 = 'GRAY_40' `#455364`
BORDER_2 = 'GRAY_50' `#54687A`
BORDER_3 = 'GRAY_60' `#60798B`
BORDER_4 = 'GRAY_70' `#788D9C`
<!--Below colors may belong only to Spyder?-->
### Feedback
SUCCESS_1 = 'GREEN_40' `#008760`
SUCCESS_2 = 'GREEN_70' `#20C997`
SUCCESS_3 = 'GREEN_110' `#B0F5E1`
ERROR_1 = 'RED_40' `#D4140B`
ERROR_2 = 'RED_70' `#E74C3C`
ERROR_3 = 'RED_110' `#FFC3BD`
WARN_1 = 'ORANGE_40' `#CE4B01`
WARN_2 = 'ORANGE_70' `#F37E12`
WARN_3 = 'ORANGE_110' `#FFDDA7`
### Icon
ICON_1 = 'GRAY_30' `#37414F`
ICON_2 = 'BLUE_70' `#259AE9`
ICON_3 = 'GREEN_70' `#20C997`
ICON_4 = 'RED_70' `#E74C3C`
ICON_5 = 'ORANGE_70' `#F37E12`
ICON_6 = 'GRAY_140' `#FAFAFA`
### Highlight
HIGHLIGHT_1 = 'GRAY_100' #90% `#E1E1E1` `rgba(225,225,225,0.9)`
HIGHLIGHT_2 = 'GRAY_90' #90% `#CBCACA` `rgba(203,202,202,0.9)`
HIGHLIGHT_3 = 'GRAY_80' #90% `#9DA9B5` `rgba(157,169,181,0.9)`
HIGHLIGHT_4 = 'GRAY_70' #90% `#788D9C` `rgba(120,141,156,0.9)`
### Find
FIND_1 = 'BLUE_80' #90% `#37AEFE` `rgba(55,174,254,0.9)`
FIND_2 = 'BLUE_70' #90% `#259AE9` `rgba(37,154,233,0.9)`
FIND_3 = 'BLUE_60' #90% `#057DCE` `rgba(5,125,206,0.9)`
FIND_4 = 'BLUE_50' #90% `#1A72BB` `rgba(26,114,187,0.9)`