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 | AaAa#ffffff / #0a0a0a |
| color-text-on-muted | AaAa#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.
| Sắc | color-* | color-background-* | color-text-* | color-border-* | color-text-on-* |
|---|---|---|---|---|---|
| orange | #e26a00 / #ec6f00 | #ffeade / #341a0b | #9d4800 / #ff9d64 | #bf7e5a / #925531 | AaAa#0a0a0a / #0a0a0a |
| blue | #127eee / #127eee | #e4f0ff / #112238 | #0060bb / #82b9ff | #658fc6 / #3d669a | AaAa#0a0a0a / #0a0a0a |
| green | #06a24b / #17a750 | #dbf7e0 / #112716 | #007132 / #4dcd73 | #64996f / #3c7048 | AaAa#0a0a0a / #0a0a0a |
| pink | #e652a3 / #e652a3 | #ffe7f1 / #331725 | #b31a77 / #ff92c8 | #c0779a / #934f71 | AaAa#0a0a0a / #0a0a0a |
| yellow | #bc8d00 / #edb417 | #fbedd1 / #2a2009 | #7b5c00 / #edb417 | #a48a53 / #7a6129 | AaAa#0a0a0a / #0a0a0a |
| teal | #009d97 / #00a59e | #d9f5f3 / #0e2625 | #006d69 / #35c9c2 | #5e9793 / #356e6a | AaAa#0a0a0a / #0a0a0a |
| purple | #914de6 / #914de6 | #f1ebff / #251c36 | #7f37d0 / #c6a5ff | #9982c4 / #715998 | AaAa#ffffff / #ffffff |
| red | #e72c35 / #e72c35 | #ffe9e6 / #361715 | #c3001f / #ff9992 | #c77871 / #9a4f4a | AaAa#0a0a0a / #0a0a0a |
| gray | #747474 / #747474 | #eeeeee / #222222 | #606060 / #b6b6b6 | #8d8d8d / #656565 | AaAa#ffffff / #ffffff |
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.
| Trạng thái | color-* | color-background-* | color-text-* | color-border-* | color-text-on-* | color-icon-on-* |
|---|---|---|---|---|---|---|
| danger | #e42732 / #e42732 | #ffe9e6 / #361715 | #c3001f / #ff9992 | #c77871 / #9a4f4a | AaAa#ffffff / #ffffff | #ffffff / #ffffff |
| success | #06a24b / #17a750 | #dbf7e0 / #112716 | #007132 / #4dcd73 | #64996f / #3c7048 | AaAa#0a0a0a / #0a0a0a | #0a0a0a / #0a0a0a |
| warning | #bc8d00 / #edb417 | #fbedd1 / #2a2009 | #7b5c00 / #edb417 | #a48a53 / #7a6129 | AaAa#0a0a0a / #0a0a0a | #0a0a0a / #0a0a0a |
| info | #0075e2 / #0075e2 | #e4f0ff / #112238 | #0060bb / #82b9ff | #658fc6 / #3d669a | AaAa#ffffff / #ffffff | #ffffff / #ffffff |