Token
Mọi token trừ màu, nhóm theo việc nó đặt. Giá trị theo theme và màu accent ở đầu trang. Màu có trang riêng, Màu sắc. Màu của trạng thái và material cũng hiện ở đây, cạnh phần minh họa. Bảng chỉ hiện sáng và tối khi hai giá trị khác nhau.
Khoảng cách
Thang khoảng cách là 2, 4, 8, 12, 16, 24, 32, 48, 64 và 96px. Hai đầu thang là spacing-2xs và spacing-5xl. Bốn token spacing-safe-* là vùng an toàn của màn hình (env(safe-area-inset-*, 0px)). Chúng bằng 0, trừ trên thiết bị có tai thỏ hoặc thanh home khi trang đặt viewport-fit=cover. Cộng chúng vào padding của component ở cạnh màn hình mà component chạm vào, như Sheet và Toast: pb-[calc(var(--spacing-xl)+var(--spacing-safe-bottom))]. Chỉ dùng cho web.
p-2xs2pxp-xs4pxp-sm8pxp-md12pxp-lg16pxp-xl24pxp-2xl32pxp-3xl48pxp-4xl64pxp-5xl96pxp-safe-topenv(safe-area-inset-top, 0px)p-safe-rightenv(safe-area-inset-right, 0px)p-safe-bottomenv(safe-area-inset-bottom, 0px)p-safe-leftenv(safe-area-inset-left, 0px)Kích thước
Chiều cao control, một thang bốn bậc, dùng như h-element-md, và vùng chạm nhỏ nhất. md là control mặc định. Vùng dày đặc thì đặt size="sm" trên các control của vùng đó. Trên màn hình cảm ứng size-element-md tăng lên 36px, size-element-lg lên 44px, size-element-xl lên 48px và size-target-min lên 44px, nên các giá trị bên dưới đổi trên màn cảm ứng. size-element-sm giữ 28px.
Chiều rộng panel theo vai trò: size-panel-sidebar 256px (Sidebar), size-panel-popover 288px (Popover, Sidebar trên di động), size-panel-sm 320px (Tooltip tối đa, HoverCard, Sheet nhỏ), size-panel-md 384px (Toast), size-panel-lg 448px (Sheet vừa). Dùng dưới dạng w-panel-sidebar, max-w-panel-sm hoặc min-w-panel-md. Dialog vẫn dùng chiều rộng container (max-w-md).
w-panel-sidebar256pxw-panel-popover288pxw-panel-sm320pxw-panel-md384pxw-panel-lg448pxBo góc
Đặt bởi seed.radius-base. Bo nhỏ nằm trong bo lớn: inner trong element, element trong container. Hàng trong menu có padding dùng item, để góc hàng thẳng với góc menu.
rounded-none0pxrounded-inner4pxrounded-item7pxrounded-element8pxrounded-container12pxrounded-page16pxrounded-full9999pxViền và vòng focus
Viền 2px cách phần tử 2px, với khoảng trống tô bằng --ring-offset-color, mặc định là nền trang. Bề mặt nổi đặt màu riêng; chất liệu dùng nền đặc dự phòng. Bóng của khoảng trống kết hợp với bóng độ cao. Chế độ màu bắt buộc chỉ giữ viền. Tương phản vòng focus đạt ít nhất 3:1 ở cả hai chế độ.
| token | tối | sáng |
|---|---|---|
| color-focus-ring | #f5f5f5 | #111111 |
| border-width | 1px | 1px |
| outline-width-focus-ring | 2px | 2px |
| outline-offset-focus-ring | 2px | 2px |
Kiểu chữ
Geist cho giao diện, JetBrains Mono cho code. Cỡ chữ/chiều cao dòng: xs 12/16, sm 14/20, md 16/24, lg 18/28, xl 20/28px. Mỗi cỡ chữ có token chiều cao dòng tương ứng. Đoạn văn giữ 14/20px. Tiêu đề: h3 20/28, h2 24/32, h1 32/40px. Input giữ 14px với chuột và 16px trên cảm ứng.
text-heading-1Mời mọi người vào workspacetext-heading-2Mời mọi người vào workspacetext-heading-3Mời mọi người vào workspacetext-bodyMời mọi người vào workspace| token | giá trị |
|---|---|
| font-family-sans | Geist, ui-sans-serif, system-ui, sans-serif |
| font-family-mono | 'JetBrains Mono', ui-monospace, monospace |
| font-size-xs | 12px |
| font-size-sm | 14px |
| font-size-md | 16px |
| font-size-lg | 18px |
| font-size-xl | 20px |
| font-size-input | 14px |
| font-weight-regular | 400 |
| font-weight-medium | 500 |
| font-weight-semibold | 600 |
| heading-1-size | 32px |
| heading-1-weight | 500 |
| heading-1-leading | 40px |
| heading-2-size | 24px |
| heading-2-weight | 500 |
| heading-2-leading | 32px |
| heading-3-size | 20px |
| heading-3-weight | 500 |
| heading-3-leading | 28px |
| body-size | 14px |
| body-weight | 400 |
| body-leading | 20px |
| line-height-xs | 16px |
| line-height-sm | 20px |
| line-height-md | 24px |
| line-height-lg | 28px |
| line-height-xl | 28px |
| line-height-input | 20px |
Chuyển động
duration-fast cho thay đổi trạng thái tại chỗ, duration-medium cho menu và popover, duration-slow cho dialog và sheet. ease-enter cho thứ đang xuất hiện, ease-exit cho thứ đang rời đi.
| ease-standard | ease-enter | ease-exit | |
|---|---|---|---|
| duration-fast | |||
| duration-medium | |||
| duration-slow |
| token | giá trị |
|---|---|
| duration-fast | 160ms |
| duration-medium | 250ms |
| duration-slow | 400ms |
| duration-loop | 2000ms |
| ease-standard | cubic-bezier(0.2, 0, 0, 1) |
| ease-enter | cubic-bezier(0.05, 0.7, 0.1, 1) |
| ease-exit | cubic-bezier(0.3, 0, 0.8, 0.15) |
| scale-pressed | 0.96 |
Bóng đổ
Chỉ dùng cho lớp nổi. Bóng sáng kết hợp một lớp tiếp xúc gọn và một lớp lan mềm. Bóng tối giữ lớp đổ và viền sáng bên trong hiện có. Card trên trang dùng viền.
| token | tối | sáng |
|---|---|---|
| shadow-low | 0px 1px 3px 0px #00000066, inset 0px 1px 0px 0px #ffffff1a | 0px 1px 2px 0px #0000000f, 0px 1px 3px 0px #0000001a |
| shadow-med | 0px 4px 16px 0px #00000080, inset 0px 1px 0px 0px #ffffff1a | 0px 2px 4px 0px #0000000f, 0px 8px 16px 0px #0000001a |
| shadow-high | 0px 16px 40px 0px #00000099, inset 0px 1px 0px 0px #ffffff1a | 0px 4px 8px 0px #00000014, 0px 24px 48px 0px #00000029 |
Độ mờ và chất liệu
Độ mờ chất liệu: thin 8px, thick 16px, refract 20px. Độ bão hòa: 1.2, 1.4 và 1.8. Mỗi tiện ích chất liệu gồm màu nền, độ mờ, viền sáng và nền đặc dự phòng. Lớp kính có ba mức, mỗi mức một class: material-thin cho thanh, material-thick cho sheet, popover, dialog và menu, material-refract chỉ cho phần tử kích thước cố định. Class vẽ nền, backdrop blur và độ bão hòa, viền sáng 1px và dải sáng trên cùng, rồi chuyển đặc khi không có backdrop blur, khi giảm độ trong suốt và ở chế độ màu bắt buộc. Mỗi nền được tính để chữ chính và chữ phụ giữ 4.5:1 trên mọi nền phía sau, không tính blur, nên nó ít trong hơn kính trang trí. Một màn hình tối đa hai lớp kính, không dùng trên hàng danh sách, card hay nền trang.
material-thin
Thanh
backdrop-blur-smbackdrop-blur-mdbackdrop-blur-lgmaterial-thin
Thanh
backdrop-blur-smbackdrop-blur-mdbackdrop-blur-lg| token | tối | sáng |
|---|---|---|
| color-background-material-thin | #111111d9 | #fafafae6 |
| color-background-material-thick | #181818e6 | #ffffffd9 |
| color-background-material-refract | #181818e6 | #ffffffd9 |
| color-border-material-edge | #ffffff1f | #ffffff99 |
| color-overlay-highlight-on-material | #ffffff29 | #ffffffcc |
| blur-sm | 4px | 4px |
| blur-md | 12px | 12px |
| blur-lg | 24px | 24px |
| blur-material-thin | 8px | 8px |
| blur-material-thick | 16px | 16px |
| blur-material-refract | 20px | 20px |
| saturate-material-thin | 1.2 | 1.2 |
| saturate-material-thick | 1.4 | 1.4 |
| saturate-material-refract | 1.8 | 1.8 |
Độ đục
Ba vai trò, không có thang tự do: opacity-pending trên nội dung vẫn giữ trên màn hình khi nội dung tiếp theo đang tải, opacity-disabled trên phần không phải chữ trong control bị tắt (một ô màu, một ảnh), opacity-subtle trên hình trang trí. Không dùng opacity để làm chữ nhạt hơn. Chữ phụ dùng color-text-secondary, vốn giữ nguyên độ tương phản.
| token | giá trị |
|---|---|
| opacity-disabled | 0.4 |
| opacity-pending | 0.6 |
| opacity-subtle | 0.3 |
Z-index
Sáu bậc xếp lớp, cách nhau 10. Lớp nào mở được từ bên trong lớp khác thì nằm trên lớp đó: Popover và menu trên Dialog và Sheet, Toast trên lớp modal, Tooltip trên tất cả. Dùng dưới dạng z-sticky, z-overlay, z-popover, z-toast và z-tooltip, không dùng số như z-50. Skip link khi focus dùng z-tooltip. Chỉ dùng cho web.
| token | giá trị |
|---|---|
| z-index-base | 0 |
| z-index-sticky | 10 |
| z-index-overlay | 20 |
| z-index-popover | 30 |
| z-index-toast | 40 |
| z-index-tooltip | 50 |
Hover, pressed và disabled
Màu đặc accent và status có lớp hover và pressed riêng (overlay-hover-on-accent, ...). Nền trung tính dùng overlay-hover và overlay-pressed.
| nền | mặc định | hover | pressed |
|---|---|---|---|
| accent | Mặc định | ||
| danger | Mặc định | ||
| success | Mặc định | ||
| warning | Mặc định | ||
| info | Mặc định | ||
| surface | Mặc định | ||
| danger mềm | Mặc định | ||
| disabled | Tắt | ||
| nền | mặc định | hover | pressed |
|---|---|---|---|
| accent | Mặc định | ||
| danger | Mặc định | ||
| success | Mặc định | ||
| warning | Mặc định | ||
| info | Mặc định | ||
| surface | Mặc định | ||
| danger mềm | Mặc định | ||
| disabled | Tắt | ||
| token | tối | sáng |
|---|---|---|
| color-background-disabled | #1e1e1e | #ededed |
| color-text-disabled | #484848 | #b7b7b7 |
| color-icon-disabled | #484848 | #b7b7b7 |
| color-overlay-hover | #ffffff0f | #0000000a |
| color-overlay-pressed | #ffffff1a | #00000014 |
| color-overlay-hover-on-accent | #00000012 | #ffffff0d |
| color-overlay-pressed-on-accent | #00000024 | #ffffff1a |
| color-overlay-hover-on-danger | #0000001f | #0000001f |
| color-overlay-pressed-on-danger | #0000003b | #0000003b |
| color-overlay-hover-on-success | #ffffff2b | #ffffff29 |
| color-overlay-pressed-on-success | #ffffff52 | #ffffff4f |
| color-overlay-hover-on-warning | #00000017 | #ffffff29 |
| color-overlay-pressed-on-warning | #0000002b | #ffffff52 |
| color-overlay-hover-on-info | #0000001f | #0000001f |
| color-overlay-pressed-on-info | #0000003d | #0000003d |