# Colors

Each token is named for its job, like `background-surface` or `text-secondary`. It has one value for light mode and one for dark, so a component that uses it follows the theme on its own.

## Background

App canvas, cards, popovers and menus, inputs and wells, inverted blocks. Disabled and material are pending review: disabled controls, and the see-through fills of the material levels, used only through the material-* utilities.

| Token | Light | Dark |
| --- | --- | --- |
| `color-background-page` | `#ffffff` | `#0a0a0a` |
| `color-background-surface` | `#fafafa` | `#111111` |
| `color-background-raised` | `#ffffff` | `#181818` |
| `color-background-sunken` | `#f4f4f4` | `#060606` |
| `color-background-inverse` | `#171717` | `#f5f5f5` |
| `color-background-disabled` | `#ededed` | `#1e1e1e` |
| `color-background-material-thin` | `#fafafae6` | `#111111d9` |
| `color-background-material-thick` | `#ffffffd9` | `#181818e6` |
| `color-background-material-refract` | `#ffffffd9` | `#181818e6` |

## Text

Body and headings, supporting text, hints, disabled labels, text on inverse.

| Token | Light | Dark |
| --- | --- | --- |
| `color-text-primary` | `#171717` | `#f5f5f5` |
| `color-text-secondary` | `#5d5d5d` | `#a4a4a4` |
| `color-text-tertiary` | `#868686` | `#747474` |
| `color-text-disabled` | `#b7b7b7` | `#484848` |
| `color-text-inverse` | `#fafafa` | `#171717` |

## Icon

Icons next to primary or secondary text, icons in disabled controls.

| Token | Light | Dark |
| --- | --- | --- |
| `color-icon-primary` | `#171717` | `#f5f5f5` |
| `color-icon-secondary` | `#5d5d5d` | `#a4a4a4` |
| `color-icon-disabled` | `#b7b7b7` | `#484848` |

## Border

Dividers and outlines, emphasized outlines, form control edges (3:1), the material edge highlight, keyboard focus.

| Token | Light | Dark |
| --- | --- | --- |
| `color-border` | `#e5e5e5` | `#262626` |
| `color-border-strong` | `#d4d4d4` | `#404040` |
| `color-border-control` | `#8d8d8d` | `#656565` |
| `color-border-material-edge` | `#ffffff99` | `#ffffff1f` |
| `color-focus-ring` | `#111111` | `#f5f5f5` |

## Overlay

Hover and pressed states on neutral fills, dimming behind dialogs. The on-solid layers are pending review: hover and pressed on accent, danger, success, warning and info, and the material top highlight.

| Token | Light | Dark |
| --- | --- | --- |
| `color-overlay-hover` | `#0000000a` | `#ffffff0f` |
| `color-overlay-pressed` | `#00000014` | `#ffffff1a` |
| `color-overlay-scrim` | `#00000066` | `#00000099` |
| `color-overlay-hover-on-accent` | `#ffffff0d` | `#00000012` |
| `color-overlay-pressed-on-accent` | `#ffffff1a` | `#00000024` |
| `color-overlay-hover-on-danger` | `#0000001f` | `#0000001f` |
| `color-overlay-pressed-on-danger` | `#0000003b` | `#0000003b` |
| `color-overlay-hover-on-success` | `#ffffff2b` | `#ffffff2b` |
| `color-overlay-pressed-on-success` | `#ffffff52` | `#ffffff52` |
| `color-overlay-hover-on-warning` | `#ffffff29` | `#00000017` |
| `color-overlay-pressed-on-warning` | `#ffffff52` | `#0000002b` |
| `color-overlay-hover-on-info` | `#0000001f` | `#0000001f` |
| `color-overlay-pressed-on-info` | `#0000003d` | `#0000003d` |
| `color-overlay-highlight-on-accent` | `#ffffff33` | `#ffffff33` |
| `color-overlay-shade-on-accent` | `#00000033` | `#00000033` |
| `color-overlay-highlight-on-danger` | `#ffffff00` | `#ffffff00` |
| `color-overlay-shade-on-danger` | `#00000033` | `#00000033` |
| `color-overlay-highlight-on-material` | `#ffffffcc` | `#ffffff29` |

## Accent

Primary actions, selected states, links.

| Token | Light | Dark |
| --- | --- | --- |
| `color-text-accent` | `#111111` | `#f5f5f5` |
| `color-text-on-accent` | `#ffffff` | `#0a0a0a` |
| `color-text-on-muted` | `#111111` | `#f5f5f5` |
| `color-icon-accent` | `#111111` | `#f5f5f5` |
| `color-icon-on-accent` | `#ffffff` | `#0a0a0a` |
| `color-accent` | `#111111` | `#f5f5f5` |
| `color-accent-muted` | `#eeeeee` | `#222222` |

## Hues

Nine hues, five tokens each: the solid for chart series, status dots and avatars, a soft background and a border for badges, banners and tags, text on the soft background, and text on the solid.

| Token | Light | Dark |
| --- | --- | --- |
| `color-background-gray` | `#eeeeee` | `#222222` |
| `color-text-gray` | `#606060` | `#b6b6b6` |
| `color-text-on-gray` | `#ffffff` | `#ffffff` |
| `color-border-gray` | `#8d8d8d` | `#656565` |
| `color-gray` | `#747474` | `#747474` |
| `color-background-red` | `#ffe9e6` | `#361715` |
| `color-text-red` | `#c3001f` | `#ff9992` |
| `color-text-on-red` | `#0a0a0a` | `#0a0a0a` |
| `color-border-red` | `#c77871` | `#9a4f4a` |
| `color-red` | `#e72c35` | `#e72c35` |
| `color-background-orange` | `#ffeade` | `#341a0b` |
| `color-text-orange` | `#9d4800` | `#ff9d64` |
| `color-text-on-orange` | `#0a0a0a` | `#0a0a0a` |
| `color-border-orange` | `#bf7e5a` | `#925531` |
| `color-orange` | `#ec6f00` | `#ec6f00` |
| `color-background-yellow` | `#fbedd1` | `#2a2009` |
| `color-text-yellow` | `#7b5c00` | `#edb417` |
| `color-text-on-yellow` | `#0a0a0a` | `#0a0a0a` |
| `color-border-yellow` | `#a48a53` | `#7a6129` |
| `color-yellow` | `#bc8d00` | `#edb417` |
| `color-background-green` | `#dbf7e0` | `#112716` |
| `color-text-green` | `#007132` | `#4dcd73` |
| `color-text-on-green` | `#0a0a0a` | `#0a0a0a` |
| `color-border-green` | `#64996f` | `#3c7048` |
| `color-green` | `#17a750` | `#17a750` |
| `color-background-teal` | `#d9f5f3` | `#0e2625` |
| `color-text-teal` | `#006d69` | `#35c9c2` |
| `color-text-on-teal` | `#0a0a0a` | `#0a0a0a` |
| `color-border-teal` | `#5e9793` | `#356e6a` |
| `color-teal` | `#00a59e` | `#00a59e` |
| `color-background-blue` | `#e4f0ff` | `#112238` |
| `color-text-blue` | `#0060bb` | `#82b9ff` |
| `color-text-on-blue` | `#0a0a0a` | `#0a0a0a` |
| `color-border-blue` | `#658fc6` | `#3d669a` |
| `color-blue` | `#127eee` | `#127eee` |
| `color-background-purple` | `#f1ebff` | `#251c36` |
| `color-text-purple` | `#7f37d0` | `#c6a5ff` |
| `color-text-on-purple` | `#ffffff` | `#ffffff` |
| `color-border-purple` | `#9982c4` | `#715998` |
| `color-purple` | `#914de6` | `#914de6` |
| `color-background-pink` | `#ffe7f1` | `#331725` |
| `color-text-pink` | `#b31a77` | `#ff92c8` |
| `color-text-on-pink` | `#0a0a0a` | `#0a0a0a` |
| `color-border-pink` | `#c0779a` | `#934f71` |
| `color-pink` | `#e652a3` | `#e652a3` |

## Status

Danger, success, warning and info come from red, green, yellow and blue. Success and warning are aliases of their hue. The danger and info solids are their hue darkened just enough for white text; their soft fill, text and border are aliases of the hue. They are the only solids that take text and icons, and only with their own on-* tokens.

| Token | Light | Dark |
| --- | --- | --- |
| `color-background-danger` | `#ffe9e6` | `#361715` |
| `color-text-danger` | `#c3001f` | `#ff9992` |
| `color-text-on-danger` | `#ffffff` | `#ffffff` |
| `color-icon-on-danger` | `#ffffff` | `#ffffff` |
| `color-border-danger` | `#c77871` | `#9a4f4a` |
| `color-danger` | `#e42732` | `#e42732` |
| `color-background-success` | `#dbf7e0` | `#112716` |
| `color-text-success` | `#007132` | `#4dcd73` |
| `color-text-on-success` | `#0a0a0a` | `#0a0a0a` |
| `color-icon-on-success` | `#0a0a0a` | `#0a0a0a` |
| `color-border-success` | `#64996f` | `#3c7048` |
| `color-success` | `#17a750` | `#17a750` |
| `color-background-warning` | `#fbedd1` | `#2a2009` |
| `color-text-warning` | `#7b5c00` | `#edb417` |
| `color-text-on-warning` | `#0a0a0a` | `#0a0a0a` |
| `color-icon-on-warning` | `#0a0a0a` | `#0a0a0a` |
| `color-border-warning` | `#a48a53` | `#7a6129` |
| `color-warning` | `#bc8d00` | `#edb417` |
| `color-background-info` | `#e4f0ff` | `#112238` |
| `color-text-info` | `#0060bb` | `#82b9ff` |
| `color-text-on-info` | `#ffffff` | `#ffffff` |
| `color-icon-on-info` | `#ffffff` | `#ffffff` |
| `color-border-info` | `#658fc6` | `#3d669a` |
| `color-info` | `#0075e2` | `#0075e2` |