# Màu sắc

Mỗi token đặt tên theo việc nó làm, như `background-surface` hay `text-secondary`. Mỗi token có một giá trị cho chế độ sáng và một cho chế độ tối, nên component dùng nó sẽ tự theo theme.

## Nền

Nền trang, card, popover và menu, input và vùng lõm, khối đảo màu. Disabled và material đang chờ duyệt: control bị tắt, và nền trong của các mức material, chỉ dùng qua tiện ích material-*.

| Token | Sáng | Tối |
| --- | --- | --- |
| `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` |
| `color-background-chart-1` | `#ffeade` | `#341a0b` |
| `color-background-chart-2` | `#e4f0ff` | `#112238` |
| `color-background-chart-3` | `#dbf7e0` | `#112716` |
| `color-background-chart-4` | `#ffe7f1` | `#331725` |
| `color-background-chart-5` | `#fbedd1` | `#2a2009` |
| `color-background-chart-6` | `#d9f5f3` | `#0e2625` |
| `color-background-chart-7` | `#f1ebff` | `#251c36` |
| `color-background-chart-8` | `#ffe9e6` | `#361715` |

## Chữ

Đoạn văn và tiêu đề, chữ phụ, gợi ý, nhãn bị tắt, chữ trên nền đảo.

| Token | Sáng | Tối |
| --- | --- | --- |
| `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

Icon cạnh chữ chính hoặc chữ phụ, icon trong control bị tắt.

| Token | Sáng | Tối |
| --- | --- | --- |
| `color-icon-primary` | `#171717` | `#f5f5f5` |
| `color-icon-secondary` | `#5d5d5d` | `#a4a4a4` |
| `color-icon-disabled` | `#b7b7b7` | `#484848` |

## Viền

Đường chia và viền, viền nhấn, cạnh control form (3:1), viền sáng của material, focus bàn phím.

| Token | Sáng | Tối |
| --- | --- | --- |
| `color-border-chart-marker` | `#ffffff` | `#ffffff` |
| `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

Trạng thái hover và pressed trên nền trung tính, lớp làm mờ phía sau dialog. Các lớp on-solid đang chờ duyệt: hover và pressed trên accent, danger, success, warning và info, cùng viền sáng trên của material.

| Token | Sáng | Tối |
| --- | --- | --- |
| `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` | `#ffffff29` | `#ffffff2b` |
| `color-overlay-pressed-on-success` | `#ffffff4f` | `#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

Hành động chính, trạng thái được chọn, liên kết.

| Token | Sáng | Tối |
| --- | --- | --- |
| `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` |

## Chart

Tám alias vai trò cho chuỗi chart. Mỗi cái theo hue ở cùng vị trí trong chartPalette. Chuỗi 1 đạt 3:1 trên page và surface ở cả hai chế độ. Gray dành cho Other và No data.

| Token | Sáng | Tối |
| --- | --- | --- |
| `color-chart-1` | `#e26a00` | `#ec6f00` |
| `color-chart-2` | `#127eee` | `#127eee` |
| `color-chart-3` | `#06a24b` | `#17a750` |
| `color-chart-4` | `#e652a3` | `#e652a3` |
| `color-chart-5` | `#bc8d00` | `#edb417` |
| `color-chart-6` | `#009d97` | `#00a59e` |
| `color-chart-7` | `#914de6` | `#914de6` |
| `color-chart-8` | `#e72c35` | `#e72c35` |

## Sắc màu

Chín hue, mỗi hue năm token: màu đặc cho chấm trạng thái và avatar, nền mềm và viền cho badge, banner và tag, chữ trên nền mềm, và chữ trên màu đặc.

| Token | Sáng | Tối |
| --- | --- | --- |
| `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` | `#e26a00` | `#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` | `#06a24b` | `#17a750` |
| `color-background-teal` | `#d9f5f3` | `#0e2625` |
| `color-text-teal` | `#006d69` | `#35c9c2` |
| `color-text-on-teal` | `#0a0a0a` | `#0a0a0a` |
| `color-border-teal` | `#5e9793` | `#356e6a` |
| `color-teal` | `#009d97` | `#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` |

## Trạng thái

Danger, success, warning và info lấy từ red, green, yellow và blue. Success và warning là alias của hue đó. Màu đặc của danger và info là hue được làm tối vừa đủ để chữ trắng đọc được. Nền mềm, chữ và viền của chúng là alias của hue. Đây là các màu đặc duy nhất nhận chữ và icon, và chỉ với token on-* của chính chúng.

| Token | Sáng | Tối |
| --- | --- | --- |
| `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` | `#06a24b` | `#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` |