@beehexa/design-rules 2611.3.3 → 2611.4.1

package/dist/docs/src/content-vi/foundations/styles/elevation.mdx

@@ -0,0 +1,75 @@
+---
+title: Đổ bóng
+description: "Một bề mặt trông như nằm cao bao nhiêu so với trang. Đổ bóng tách các mục khỏi trang, cho biết thứ gì chỉ hiện tạm thời và hướng sự chú ý vào điều quan trọng lúc này."
+order: 8
+---
+import ElevationDemo from '../../../components/ElevationDemo.astro';
+import TokenTable from '../../../components/TokenTable.astro';
+
+Elevation là khoảng cách mà một bề mặt trông như có so với trang, thể hiện bằng bóng đổ và ở dark mode thì thêm nền sáng hơn. Nó cho người dùng biết phần nào tách khỏi trang, phần nào chỉ hiện tạm thời, và phần nào cần chú ý trước.
+
+<ElevationDemo kind="hero" />
+
+## Cách hoạt động
+
+- **Mỗi mức là một cặp: một màu nền và một bóng.** Luôn dùng hai token của cùng một mức đi với nhau.
+- **Càng xa trang, bóng càng lớn và mềm.** Card có bóng rất nhẹ, dialog có bóng đậm.
+- **Chỉ có ba mức.** Khi thứ gì cũng nổi thì không còn gì nổi bật.
+
+Đổ bóng cho thấy bề mặt trông cao bao nhiêu. [Z-index](/vi/foundations/styles/z-index/) quyết định bề mặt nào được vẽ lên trên.
+
+| Mức | Nền | Bóng | Dùng cho |
+|---|---|---|---|
+| Page | `color.surface.page`, `color.surface.subtle` | không có | Trang, panel, bảng, menu bên trái, header |
+| Raised | `color.surface` | `elevation.shadow.raised` | Card |
+| Overlay | `color.surface.overlay` | `elevation.shadow.overlay` | Menu, danh sách của select, popover, bộ chọn ngày, toast |
+| Modal | `color.surface.overlay` | `elevation.shadow.modal` | Dialog, drawer, sheet toàn màn hình |
+
+## Page
+
+Phần lớn màn hình nằm ngay trên trang, không có bóng. Tách panel và bảng bằng đường viền `color.border`. Menu bên trái và header của bảng dùng nền `color.surface.subtle`.
+
+<ElevationDemo kind="level" item="page" />
+
+## Raised
+
+Dành cho một mục mà người dùng xem như một khối: một sync job, một kết nối, một widget trên dashboard. Card giữ đường viền, vì bóng nhẹ có thể mất hẳn trên màn hình quá sáng hoặc ở chế độ tương phản cao.
+
+<ElevationDemo kind="level" item="raised" />
+
+## Overlay
+
+Dành cho những thứ mở ra từ một control rồi đóng lại: menu, danh sách của select, popover. Toast cũng dùng nền và bóng này.
+
+<ElevationDemo kind="level" item="overlay" />
+
+## Modal
+
+Dành cho dialog và drawer chặn trang cho tới khi người dùng làm xong hoặc huỷ. Modal luôn nằm trên lớp phủ mờ `color.surface.scrim`, lớp này làm tối trang và cho thấy trang đang tạm khoá.
+
+<ElevationDemo kind="level" item="modal" />
+
+## Dark mode
+
+**Bề mặt càng cao thì nền càng sáng.** Bóng tối gần như không thấy trên nền tối, nên mỗi mức có thêm nền sáng hơn: trang graphite 1, card graphite 2, menu và dialog graphite 3. Tên token giống nhau ở cả hai theme.
+
+<ElevationDemo kind="dark" />
+
+## Bên trong menu và dialog
+
+Các dòng bên trong lớp nổi dùng màu trạng thái của overlay, ví dụ `color.surface.overlay.hover`. Màu hover của trang sẽ trùng với nền menu ở dark mode và biến mất. Dòng đang chọn cần có dấu check, không chỉ dựa vào màu.
+
+<ElevationDemo kind="states" />
+
+## Nên và không nên
+
+<ElevationDemo kind="dodont" item="pair" />
+<ElevationDemo kind="dodont" item="flat" />
+<ElevationDemo kind="dodont" item="own" />
+<ElevationDemo kind="dodont" item="border" />
+
+## Token
+
+<TokenTable prefix="elevation" />
+
+<TokenTable prefix="color.surface.overlay" />

package/dist/docs/src/content-vi/foundations/styles/icons/usage.mdx

@@ -12,15 +12,18 @@ import ColorDemo from '../../../../components/ColorDemo.astro';
 
 **Chọn cỡ theo chữ đứng cạnh icon.**
 
-| Cỡ | Dùng cho |
-|---|---|
-| 16 px | Mặc định. Nút, menu, bảng, ô nhập, cạnh chữ 14 px. |
-| 20 px | Cạnh chữ 16 px, trong thanh công cụ và page header. |
-| 24 px | Icon đứng riêng, như trạng thái trong card hoặc trạng thái trống nhỏ. |
-| 32 px | Chỉ cho trạng thái trống. |
+| Cỡ | Token | Dùng cho |
+|---|---|---|
+| 16 px | `size.icon.default` | Mặc định. Nút, menu, bảng, ô nhập, cạnh chữ 14 px. |
+| 20 px | `size.icon.medium` | Cạnh chữ 16 px, trong thanh công cụ và page header. |
+| 24 px | `size.icon.large` | Icon đứng riêng, như trạng thái trong card hoặc trạng thái trống nhỏ. |
+| 32 px | `size.icon.empty` | Chỉ cho trạng thái trống. |
 
 Không dùng cỡ khác. Không phóng to thu nhỏ icon cho vừa khung: hãy đổi khung.
 
+Bind các role này bằng CSS variable hoặc chuyển đổi tại API icon nhận số;
+kích thước pixel trong bảng không phải hằng số riêng để chép vào ứng dụng.
+
 <IconDemo kind="dodont" item="size" />
 
 ## Nét

package/dist/docs/src/content-vi/foundations/styles/layout/app-frame.mdx

@@ -7,6 +7,16 @@ import LayoutDemo from '../../../../components/LayoutDemo.astro';
 
 **Header, menu bên và page header lặp lại trên mọi trang, ở cùng vị trí và cùng kích thước.**
 
+Header toàn cục và menu bên là một bề mặt khung ứng dụng liên tục: cả hai dùng
+`surface.subtle` (`--bh-color-surface-subtle`) ở giao diện sáng và tối. Drawer menu
+trên mobile, gồm cả hàng logo, cũng dùng bề mặt này. Không dùng `surface` cho header
+trong khi menu bên dùng `surface.subtle`. Page header thuộc bề mặt nội dung, không
+phải bề mặt khung ứng dụng toàn cục này.
+
+Trong drawer điều hướng mobile, hàng logo không bị co lại. Menu chiếm chiều cao
+còn lại và chỉ cuộn khi nội dung không vừa. Không đặt `min-height: 100%` cho menu
+bên dưới hàng logo: cách đó cộng chiều cao logo vào một menu đã cao bằng drawer.
+
 ## Header
 
 **Cao 48 px, trải hết chiều ngang. Chứa những gì thuộc về cả sản phẩm.**

package/dist/docs/src/content-vi/foundations/styles/opacity.mdx

@@ -1,9 +1,47 @@
 ---
 title: "Độ mờ"
-description: "Khi nào được dùng độ trong suốt, và vì sao trạng thái và control disabled dùng màu thay vì độ mờ."
+description: "Một thành phần trong suốt tới mức nào. Chỉ dùng cho hình ảnh của thứ đã bị tắt và lớp phủ mờ phía sau dialog. Control thể hiện trạng thái bằng màu."
 order: 10.5
-planned:
-  - "Chỗ được dùng độ trong suốt: lớp phủ sau dialog, lớp phủ trên ảnh"
-  - "Vì sao hover, pressed và disabled dùng bậc màu, không dùng độ mờ"
-  - "Token độ mờ, nếu cần"
 ---
+import OpacityDemo from '../../../components/OpacityDemo.astro';
+import TokenTable from '../../../components/TokenTable.astro';
+
+Độ mờ (opacity) quyết định một thành phần trong suốt tới mức nào. Thành phần bị làm mờ sẽ để lộ nền phía sau, nên màu của nó thay đổi theo từng màn hình. Beehexa chỉ dùng độ mờ ở hai chỗ: hình ảnh của thứ đã bị tắt, và lớp phủ mờ phía sau dialog.
+
+## Vì sao control dùng màu
+
+- **Nền phía sau lộ ra.** Cùng một nút bị làm mờ nhưng trên card trắng, banner vàng hay dòng đang chọn thì trông mỗi chỗ một khác.
+- **Không còn kiểm tra được tương phản.** Màu bị làm mờ là một màu mới, chữ trên đó có thể không đọc được.
+- **Độ mờ nhân lên.** Một mục mờ 40% nằm trong card mờ 40% thì chỉ còn 16%.
+
+Các token màu disabled như `color.text.disabled` trông giống nhau trên mọi nền. Xem [Trạng thái tương tác](/vi/foundations/styles/interaction-states/).
+
+| Tôi cần | Dùng |
+|---|---|
+| Làm mờ logo, avatar hay hình minh hoạ của thứ đã bị tắt | `opacity.disabled` (0.4) trên hình ảnh |
+| Tắt một nút, ô nhập, chữ hay icon | Các token màu disabled |
+| Làm tối trang phía sau dialog hoặc drawer | `color.surface.scrim` |
+| Làm một thứ hiện dần hoặc mờ dần | Độ mờ 0 và 1 trong hiệu ứng chuyển động |
+
+## Hình ảnh của thứ đã bị tắt
+
+Hình ảnh có màu riêng nên không token màu nào đổi được. Làm mờ hình ảnh; chữ dùng `color.text.disabled`; card giữ nguyên viền. Luôn ghi thêm bằng chữ, ví dụ "Đã tắt".
+
+<OpacityDemo kind="tile" />
+
+<OpacityDemo kind="screen" />
+
+## Lớp phủ mờ
+
+Lớp phủ mờ làm tối trang phía sau dialog hoặc drawer, để dialog là thứ được chú ý và người dùng thấy trang đang tạm khoá. Đây là một màu có sẵn độ trong suốt: graphite 40% ở light mode, đen 60% ở dark mode, vì trang tối cần làm tối mạnh hơn mới thấy rõ. Dùng nguyên như vậy.
+
+<OpacityDemo kind="scrim" />
+
+## Nên và không nên
+
+<OpacityDemo kind="dodont" item="container" />
+<OpacityDemo kind="dodont" item="controls" />
+
+## Token
+
+<TokenTable prefix="opacity" />

package/dist/docs/src/content-vi/foundations/styles/size-and-density.mdx

@@ -21,6 +21,13 @@ Control là những thứ người dùng bấm vào hoặc gõ vào: nút, ô nh
 - Giữ các control cùng chiều cao trên cùng một hàng. Nút 24 px cạnh ô nhập 32 px trông bị lệch.
 - Đặt chiều cao bằng token kích thước, không dùng padding. Chữ nằm giữa chiều cao.
 
+Hai thành phần khác có kích thước cố định:
+
+| Thành phần | Kích thước |
+|---|---|
+| Switch | Cao 20 px, rộng 36 px; núm 16 px |
+| Avatar | 32 px; 24 px trong bảng và danh sách dày |
+
 ## Vùng bấm
 
 **Mọi control đều bấm được trong vùng ít nhất 24 × 24 px, và chạm được trong vùng 44 × 44 px trên màn hình cảm ứng.**

package/dist/docs/src/content-vi/foundations/styles/typography/code.mdx

@@ -37,7 +37,7 @@ Noto Sans là font dự phòng vì có đủ chữ tiếng Việt và ký hiệu
 
 <TypeDemo kind="features" />
 
-Mọi text style được áp dụng bằng thuộc tính rút gọn `font`, và thuộc tính này đặt lại `font-feature-settings`. Vì vậy các tính năng được đặt trên mọi thành phần từ một biến, `--bh-font-features`; muốn thêm tính năng, hãy đổi biến, không đổi thuộc tính.
+Mọi text style dùng thuộc tính rút gọn `font`, vốn đặt lại `font-feature-settings`. Token nguồn `font.features` sở hữu `"cv05", "cv08"`; CSS token sinh tự động áp dụng `--bh-font-features` trên mọi phần tử với `!important`. Ứng dụng import CSS này, không sao chép quy tắc cơ sở bên dưới. Thêm tính năng bằng biến, không bằng thuộc tính cạnh tranh. Giữ root 16px và vai trò `font.body.default` 14px cho body.
 
 ```css
 /* Base: on every element */

package/dist/docs/src/content-vi/foundations/styles/z-index.mdx

@@ -1,9 +1,67 @@
 ---
 title: "Z-index"
-description: "Thứ tự các lớp chồng lên nhau: cái gì nằm trên cái gì, từ header dính đầu trang tới dialog và toast."
+description: "Khi hai thành phần chồng lên nhau, cái nào được vẽ lên trên. Bảy lớp cơ sở và vai trò toàn màn hình/chờ chặn giữ thứ tự thống nhất."
 order: 8.5
-planned:
-  - "Tên các lớp và thứ tự"
-  - "Mỗi lớp phủ dùng lớp nào: dropdown, popover, tooltip, dialog, drawer, toast"
-  - "Lớp và đổ bóng đi cùng nhau thế nào"
 ---
+import ZIndexDemo from '../../../components/ZIndexDemo.astro';
+import TokenTable from '../../../components/TokenTable.astro';
+
+Z-index quyết định thành phần nào được vẽ lên trên khi hai thành phần chồng lên nhau. Beehexa dùng bảy lớp cơ sở có tên thay vì tự đặt số, để menu không bao giờ mở ra sau dialog và toast không bao giờ bị lớp phủ mờ che mất.
+
+<ZIndexDemo kind="stack" />
+
+## Cách hoạt động
+
+- **Lớp cao hơn che lớp thấp hơn.** Giá trị cơ sở từ 100 tới 700, mỗi bậc cách nhau 100, chừa chỗ cho vai trò toàn màn hình và chờ chặn rõ ràng.
+- **Chọn lớp theo việc thành phần làm**, không theo con số cần cao bao nhiêu.
+- **Một lớp chỉ so với các thành phần bên cạnh.** Thành phần có z-index riêng, transform, filter hoặc opacity nhỏ hơn 1 sẽ tạo ra một ngữ cảnh chồng lớp mới; không thứ gì bên trong vượt lên trên nó được. Vì vậy danh sách trong dialog được đặt luôn bên trong dialog.
+
+[Đổ bóng](/vi/foundations/styles/elevation/) cho thấy bề mặt trông cao bao nhiêu; z-index bảo đảm nó được vẽ lên trên. Một menu cần cả hai.
+
+| Lớp | Token | Giá trị | Mức đổ bóng | Dùng cho |
+|---|---|---|---|---|
+| Sticky | `z-index.sticky` | 100 | Page | Header của bảng và thanh công cụ dính khi cuộn |
+| Navigation | `z-index.navigation` | 200 | Page | Header của app, menu bên trái |
+| Overlay | `z-index.overlay` | 300 | Overlay | Menu, danh sách của select, popover |
+| Modal | `z-index.modal` | 400 | Modal | Dialog, drawer và lớp phủ mờ phía sau |
+| Spotlight | `z-index.spotlight` | 500 | Modal | Tour hướng dẫn, vùng làm nổi bật khi onboarding |
+| Tooltip | `z-index.tooltip` | 600 | không có | Tooltip |
+| Toast | `z-index.toast` | 700 | Overlay | Toast, skip link |
+
+## Vì sao theo thứ tự này
+
+- Menu đè lên thanh điều hướng mà nó mở ra từ đó.
+- Modal chặn cả trang, kể cả menu.
+- Tour cần chỉ được vào thứ nằm trong dialog.
+- Tooltip giải thích một control, dù control đó nằm ở đâu.
+- Toast báo về cả ứng dụng, nên không gì được che nó.
+
+## Ví dụ trên một màn hình
+
+<ZIndexDemo kind="screen" />
+
+Bên trong một component, số từ 1 tới 9 không cần token, ví dụ để nút đang focus trong nhóm nút nằm trên các nút bên cạnh.
+
+## Nên và không nên
+
+<ZIndexDemo kind="dodont" item="toast" />
+<ZIndexDemo kind="dodont" item="inside" />
+<ZIndexDemo kind="dodont" item="scrim" />
+
+## Token
+
+<TokenTable prefix="z-index" />
+
+## Toàn màn hình và tích hợp framework
+
+Hai vai trò mở rộng `z-index.fullscreen` (450) và `z-index.loading` (650) dành cho trình sửa mã/xem mã/ảnh toàn màn hình và màn hình chờ chặn ứng dụng. Toàn màn hình vẫn nằm dưới spotlight, tooltip và toast; màn hình chờ che thành phần tương tác và tooltip, còn toast và skip link luôn trên cùng ở mức 700.
+
+Đồ thị vận hành toàn màn hình dùng `z-index.modal` trong stacking context cục bộ có `isolation`, không dùng lớp trình sửa mã. Chrome con chỉ dùng thứ tự cục bộ để inspector toàn cục vẫn xuất hiện phía trên.
+
+Adapter Ant Design Vue sở hữu thứ tự lớp native: menu và select dùng overlay, dialog và drawer dùng modal, tooltip dùng tooltip, thông báo dùng toast. Gắn `getPopupContainer` theo ngữ cảnh từ adapter vào ConfigProvider gốc để popup trong dialog, drawer hoặc màn hình toàn màn hình nằm trong chủ sở hữu, phía trên scrim. Không nâng mọi popup toàn cục để bù container sai. Đánh dấu bề mặt toàn màn hình tùy chỉnh bằng `data-bh-overlay-owner`.
+
+Modal/Drawer native gốc vẫn đặt trong document body để giữ hình học viewport. Đặt zIndex mặc định của modal bằng `getAntDesignVueModalZIndex()` tại thời điểm gọi (giữ giá trị tường minh của bên gọi), và truyền lớp cha đang hoạt động vào `getAntDesignVueOverlayZIndex(fullscreen, ownerZIndex)` cho drawer lồng nhau. Lớp con dùng giới hạn chủ sở hữu cao nhất cộng một, không cộng dồn z-index của tổ tiên; nhờ vậy xác nhận native nằm trên trình sửa mã toàn màn hình nhưng dưới spotlight và thông báo.
+
+Hover, completion và parameter hint tách rời của Monaco dùng `z-index.tooltip`. Cô lập trình sửa mã toàn màn hình để chrome con không che thông báo toàn cục. Chỉ dùng một `color.surface.scrim` sau modal hoặc trình xem ảnh, không chồng nhiều lớp bán trong suốt.
+
+Giữ focus containment, trả focus, Escape và khóa cuộn. Kiểm tra trực tiếp đồ thị, gợi ý trình sửa mã, menu lồng nhau, inspector và màn hình chờ; con số không tự chứng minh hiển thị hay khả năng truy cập.

package/dist/docs/src/lib/token-descriptions-vi.ts

@@ -12,13 +12,13 @@ export const tokenDescriptionsVi: Record<string, string> = {
   'size.target.touch': '44 px. Vùng phản hồi khi chạm trên màn hình cảm ứng. Mở rộng vùng bấm quanh control nhỏ hơn; chiều cao nhìn thấy giữ nguyên.',
   'space.0': '0. Các phần tử dính liền, như các nút trong một segmented group.',
   'space.025': '2 px. Badge trên icon, chấm trạng thái cạnh chữ. Không dùng giữa các control hay làm padding.',
-  'space.050': '4 px. Giữa icon và chữ 14 px; giữa tiêu đề và mô tả.',
+  'space.050': '4 px. Giữa icon và chữ 14 px; giữa tiêu đề và mô tả; trên và dưới chữ của tooltip và của ô bảng gọn.',
   'space.075': '6 px. Chỉ dùng bên trong component: trên và dưới nhãn của control 32 px, và hai bên tooltip. Không dùng cho bố cục, khoảng cách giữa các phần hay padding của card.',
-  'space.100': '8 px. Giữa icon và chữ 16 px; giữa các nút; giữa nhãn và ô nhập; padding ngang của control 24 px.',
-  'space.150': '12 px. Padding ngang của control 32 px, như ô nhập và nút.',
+  'space.100': '8 px. Giữa icon và chữ 16 px; giữa các nút; giữa nhãn và ô nhập; padding ngang của control 24 px; trên và dưới chữ trong ô bảng.',
+  'space.150': '12 px. Padding ngang của control 32 px, như ô nhập và nút, và của ô bảng.',
   'space.200': '16 px. Giữa các phần tử liên quan: ô nhập, mục danh sách, card. Lề trang và gutter lưới dưới 768 px.',
   'space.250': '20 px. Giữa tiêu đề phần và nội dung của nó. Mép của logo và icon menu bên.',
-  'space.300': '24 px. Bên trong card, panel và dialog. Lề trang và gutter lưới từ 768 px.',
+  'space.300': '24 px. Bên trong card, panel và dialog. Giữa các tab. Lề trang và gutter lưới từ 768 px.',
   'space.400': '32 px. Giữa các nhóm, như các phần của form. Lề trang từ 1440 px.',
   'space.500': '40 px. Quanh trạng thái trống.',
   'space.600': '48 px. Giữa các phần của trang.',
@@ -32,9 +32,25 @@ export const tokenDescriptionsVi: Record<string, string> = {
   'radius.150': '12 px. Card, và nhóm control có padding 4 px.',
   'radius.200': '16 px. Dialog, drawer, và nhóm control có padding 8 px.',
   'radius.full': 'Viên thuốc và hình tròn. Avatar, switch và chip dạng viên thuốc.',
+  'elevation.shadow.raised': 'Card, kể cả card chỉ để xem nội dung, và card đang được kéo thả. Ở dark mode bóng đậm hơn.',
+  'elevation.shadow.overlay': 'Dropdown, menu, popover, danh sách xổ xuống của select và toast. Dùng kèm nền color.surface.overlay.',
+  'elevation.shadow.modal': 'Dialog, drawer và sheet toàn màn hình nằm trên lớp phủ mờ. Dùng kèm nền color.surface.overlay.',
+  'color.surface.overlay': 'Nền của menu, popover, danh sách xổ xuống, toast, dialog và drawer. Ở dark mode sáng hơn nền card (color.surface) một bậc, để người dùng thấy chúng nằm trên card.',
+  'color.surface.overlay.hover': 'Mục trong menu hoặc danh sách khi rê chuột qua.',
+  'color.surface.overlay.pressed': 'Mục trong menu hoặc danh sách khi đang nhấn.',
+  'color.surface.overlay.selected': 'Mục đang được chọn trong menu hoặc danh sách. Luôn kèm thêm một dấu hiệu khác như dấu check hoặc chữ đậm.',
+  'color.surface.overlay.selected.hover': 'Mục đang được chọn khi rê chuột qua. Ở dark mode giữ graphite 5 (bằng màu đang chọn), vì graphite 6 làm chữ phụ và viền không đủ tương phản; dấu check cho biết mục đang được chọn.',
+  'z-index.sticky': 'Header của bảng và thanh công cụ dính lại khi cuộn trang.',
+  'z-index.navigation': 'Header của app và menu bên trái.',
+  'z-index.overlay': 'Dropdown, menu, popover và danh sách xổ xuống của select.',
+  'z-index.modal': 'Dialog, drawer và lớp phủ mờ phía sau chúng.',
+  'z-index.spotlight': 'Tour hướng dẫn và vùng làm nổi bật khi onboarding, nằm trên dialog.',
+  'z-index.tooltip': 'Tooltip, nằm trên mọi thành phần người dùng thao tác được.',
+  'z-index.toast': 'Toast và skip link: luôn nằm trên cùng.',
+  'opacity.disabled': 'Ảnh, logo, avatar và hình minh hoạ nằm trong thứ đang bị tắt. Không dùng cho button, ô nhập, chữ hay icon: chúng dùng token màu disabled.',
   'border.width.default': '1 px. Ô nhập, button phụ, card, bảng và đường phân cách.',
   'border.width.selected': '2 px. Thanh dưới tab đang chọn hoặc cạnh mục side nav đang chọn, và viền card đang chọn. Đi cùng color.border.selected.',
   'border.width.focused': '2 px. Focus ring. Đi cùng color.border.focus và state.focus.offset.',
-  'border.width.accent': '4 px. Thanh trạng thái hoặc nhấn mạnh ở một cạnh: alert, banner, dòng bị lỗi, callout và trích dẫn. Đi cùng màu viền trạng thái hoặc màu brand.',
+  'border.width.accent': '4 px. Thanh trạng thái hoặc nhấn mạnh ở một cạnh: dòng bị lỗi, callout và trích dẫn. Đi cùng màu viền trạng thái hoặc màu brand.',
   'state.focus.offset': '2 px. Khoảng giữa control và focus ring. Ring vẽ ra ngoài; trong khung cắt mất ring (mục menu, ô bảng, tab trong vùng cuộn) thì dùng giá trị âm.',
 };

package/dist/docs/src/styles/chrome.css

@@ -37,7 +37,7 @@
 :root[data-theme="dark"] { background: var(--c-bg); }
 body.docs { color: var(--c-ink); background: var(--c-bg); }
 
-.site-header { position: sticky; z-index: 100; top: 0; container-type: inline-size; box-sizing: content-box; height: var(--header-h); border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
+.site-header { position: sticky; z-index: var(--bh-z-index-navigation); top: 0; container-type: inline-size; box-sizing: content-box; height: var(--header-h); border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
 /* The logo sits 20 px from the window edge, in line with the side navigation icons and labels
    (8 px inset + 12 px item padding); the tools end at the page margin. */
 .header-inner { position: relative; display: flex; align-items: center; gap: var(--bh-space-150); height: 100%; padding: 0 var(--page-margin) 0 var(--bh-space-250); }
@@ -59,39 +59,39 @@ body.docs { color: var(--c-ink); background: var(--c-bg); }
 .header-nav a { position: relative; display: flex; align-items: center; color: var(--c-muted); text-decoration: none; white-space: nowrap; font: var(--bh-font-label-default); }
 .header-nav a:hover { color: var(--c-ink); }
 .header-nav a[aria-current='page'] { color: var(--c-ink); }
-.header-nav a[aria-current='page']::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--c-gold); }
+.header-nav a[aria-current='page']::after { content: ''; position: absolute; inset: auto 0 -1px; height: var(--bh-border-width-selected); background: var(--c-gold); }
 
 .header-tools { display: flex; align-items: center; gap: var(--bh-space-100); margin-left: auto; }
 
-.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--c-bg); cursor: pointer; list-style: none; }
+.icon-button { list-style: none; }
 .icon-button:hover { background: var(--c-hover); }
 .icon-button::-webkit-details-marker { display: none; }
 .theme-sun { display: none; }
 :root[data-theme='dark'] .theme-sun { display: block; }
 :root[data-theme='dark'] .theme-moon { display: none; }
 
-.search { position: relative; display: none; align-items: center; width: 240px; height: 32px; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); background: var(--c-surf); }
-.search:focus-within { border-color: var(--c-muted); background: var(--c-bg); }
-.search-icon { flex: none; margin-left: calc(var(--bh-space-150) - 1px); color: var(--c-muted); } /* 12 px from the outer edge, border included */
+.search { position: relative; display: none; align-items: center; width: 240px; height: var(--bh-size-control-default); border: var(--bh-border-width-default) solid var(--bh-color-border-bold); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); }
+.search:focus-within { border-color: var(--bh-color-border-focus); }
+.search-icon { flex: none; margin-left: calc(var(--bh-space-150) - var(--bh-border-width-default)); color: var(--bh-color-icon-subtle); } /* 12 px from the outer edge, border included */
 .search input { flex: 1; min-width: 0; height: 100%; padding: 0 var(--bh-space-100) 0 var(--bh-space-050); border: 0; outline: 0; color: var(--c-ink); background: transparent; font: var(--bh-font-body-default); }
-.search input::placeholder { color: var(--c-muted); }
+.search input::placeholder { color: var(--bh-color-text-subtlest); }
 .search input::-webkit-search-cancel-button { display: none; }
-.search-hint { margin-right: calc(var(--bh-space-100) - 1px); padding: 0 var(--bh-space-050); border: 1px solid var(--c-line); border-radius: var(--bh-radius-050); color: var(--c-muted); background: var(--c-bg); white-space: nowrap; font: var(--bh-font-label-small); }
+.search-hint { margin-right: calc(var(--bh-space-100) - var(--bh-border-width-default)); padding: 0 var(--bh-space-050); border: 1px solid var(--c-line); border-radius: var(--bh-radius-050); color: var(--c-muted); background: var(--c-bg); white-space: nowrap; font: var(--bh-font-label-small); }
 .search:focus-within .search-hint { display: none; }
-.search-results { position: absolute; z-index: 10; top: calc(100% + var(--bh-space-050)); right: 0; width: 360px; max-width: calc(100vw - 2 * var(--page-margin)); margin: 0; padding: var(--bh-space-100); border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); background: var(--c-bg); box-shadow: var(--c-shadow); list-style: none; }
+.search-results { position: absolute; z-index: var(--bh-z-index-overlay); top: calc(100% + var(--bh-space-050)); right: 0; width: 360px; max-width: calc(100vw - 2 * var(--page-margin)); margin: 0; padding: var(--bh-space-050); border-radius: var(--bh-radius-100); background: var(--bh-color-surface-overlay); box-shadow: var(--c-shadow); list-style: none; }
 .search-results a { display: grid; gap: var(--bh-space-050); padding: var(--bh-space-100) var(--bh-space-150); border-radius: var(--bh-radius-050); color: var(--c-ink); text-decoration: none; }
 .search-results b { font: var(--bh-font-label-default); }
 .search-results span { color: var(--c-muted); font: var(--bh-font-body-small); }
-.search-results [aria-selected='true'] a, .search-results a:hover { background: var(--c-hover); }
+.search-results [aria-selected='true'] a, .search-results a:hover { background: var(--bh-color-surface-overlay-hover); }
 .search-empty { padding: var(--bh-space-100) var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-body-default); }
 .search-open { display: inline-grid; }
 
 .header-menu { position: relative; display: block; }
-.header-menu nav { position: absolute; top: calc(100% + var(--bh-space-050)); right: 0; display: grid; gap: var(--bh-space-050); width: 220px; padding: var(--bh-space-100); border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); background: var(--c-bg); box-shadow: var(--c-shadow); }
+.header-menu nav { position: absolute; top: calc(100% + var(--bh-space-050)); right: 0; display: grid; gap: var(--bh-space-050); width: 220px; padding: var(--bh-space-050); border-radius: var(--bh-radius-100); background: var(--bh-color-surface-overlay); box-shadow: var(--c-shadow); }
 .header-menu nav a { display: flex; align-items: center; min-height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-050); color: var(--c-ink); text-decoration: none; font: var(--bh-font-label-default); }
-.header-menu nav a:hover { background: var(--c-hover); }
-.header-menu nav a[aria-current='page'] { background: linear-gradient(to right, var(--c-gold) var(--bh-border-width-selected), var(--c-selected) 0); }
-.header-menu nav a[aria-current='page']:hover { background: var(--c-selected-hover); }
+.header-menu nav a:hover { background: var(--bh-color-surface-overlay-hover); }
+.header-menu nav a[aria-current='page'] { background: var(--bh-color-surface-overlay-selected); box-shadow: inset var(--bh-border-width-selected) 0 0 var(--c-gold); }
+.header-menu nav a[aria-current='page']:hover { background: var(--bh-color-surface-overlay-selected-hover); }
 
 /* Footer: one 48 px line, on the same edges as the header. Muted until hover, so it never
    competes with the page. */

package/dist/docs/src/styles/color.css

@@ -22,7 +22,7 @@
 .prose .c-scale-table { width: 100%; min-width: 640px; table-layout: fixed; margin: 0; }
 .prose .c-scale-table th, .prose .c-scale-table td { padding: var(--bh-space-050) var(--bh-space-025); border: 0; text-align: center; vertical-align: top; }
 .prose .c-scale-table th[scope='row'] { width: 48px; text-align: left; }
-.c-chip { display: block; height: 40px; margin-bottom: var(--bh-space-050); border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 18%); }
+.c-chip { display: block; height: var(--bh-space-500); margin-bottom: var(--bh-space-050); border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 var(--bh-border-width-default) var(--bh-color-border); }
 .c-scale-table .c-num { color: var(--c-muted); font: var(--bh-font-body-small); font-variant-numeric: tabular-nums; }
 .prose .c-steps { display: flex; flex-wrap: wrap; gap: var(--bh-space-050) var(--bh-space-250); margin: 0; padding: 0; list-style: none; color: var(--c-muted); font: var(--bh-font-body-small); }
 .prose .c-steps li { margin: 0; }
@@ -31,7 +31,7 @@
 /* Role and status tables */
 .c-cell { display: inline-flex; align-items: center; gap: var(--bh-space-100); white-space: nowrap; }
 .c-cell > .c-num { align-self: baseline; font: var(--bh-font-code-default); }
-.c-dot { flex: none; width: 16px; height: 16px; border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 25%); }
+.c-dot { flex: none; width: 16px; height: 16px; border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 var(--bh-border-width-default) var(--bh-color-border); }
 .c-check { display: block; color: var(--c-muted); font: var(--bh-font-body-small); font-variant-numeric: tabular-nums; }
 .c-from { color: var(--c-muted); font: var(--bh-font-body-small); }
 .prose .c-status td.c-num { font: var(--bh-font-body-small); font-variant-numeric: tabular-nums; }
@@ -42,9 +42,6 @@
 .c-action-stage { display: grid; place-items: center; height: 96px; background: var(--bh-color-surface-subtle); }
 .c-action figcaption { display: grid; gap: var(--bh-space-050); padding: var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-default); }
 .c-action figcaption code { color: var(--c-ink); }
-.c-button { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); font: var(--bh-font-label-default); }
-.c-button.is-primary { color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); }
-.c-button.is-danger { color: var(--bh-color-text-on-bold); background: var(--bh-color-background-danger-bold); }
 @container prose (min-width: 640px) { .c-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 
 /* Labels */
@@ -80,9 +77,9 @@
 .c-dd-panel p { margin: 0; padding: var(--bh-space-150) var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-default); }
 .c-dd-row { display: inline-flex; flex-wrap: wrap; gap: var(--bh-space-100); }
 .c-dd-code { font: var(--bh-font-code-default); }
-.c-dd-tabs { display: flex; gap: var(--bh-space-250); border-bottom: 1px solid var(--bh-color-border); }
+.c-dd-tabs { display: flex; gap: var(--bh-space-300); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); }
 .c-dd-tab { padding: var(--bh-space-100) 0; color: var(--bh-color-text-subtle); font: var(--bh-font-label-default); }
-.c-dd-tab.is-current { color: var(--bh-color-text); box-shadow: inset 0 -2px 0 var(--bh-color-border-selected); }
+.c-dd-tab.is-current { color: var(--bh-color-text); box-shadow: inset 0 calc(-1 * var(--bh-border-width-selected)) 0 var(--bh-color-border-selected); }
 /* The Don't examples show colours used wrongly on purpose, so they read the scale directly. */
 .c-dd-yellow-text { color: var(--bh-color-brand-yellow); font: var(--bh-font-label-default); text-decoration: underline; }
 .c-dd-yellow-button { display: inline-flex; align-items: center; padding: var(--bh-space-100) var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-brand-white); background: var(--bh-color-brand-yellow); font: var(--bh-font-label-default); }
@@ -113,7 +110,7 @@
 
 /* Balance bar */
 .c-balance { margin: 0 0 var(--bh-space-300); }
-.c-balance-bar { display: flex; height: 40px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); }
+.c-balance-bar { display: flex; height: var(--bh-space-500); overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); }
 .c-balance figcaption { margin-top: var(--bh-space-100); color: var(--c-muted); font: var(--bh-font-body-default); }
 
 /* Token name anatomy */
@@ -137,14 +134,13 @@
 .c-surf-page { position: relative; display: grid; grid-template-columns: 42% 1fr; gap: var(--bh-space-150); min-height: 180px; padding: var(--bh-space-300) var(--bh-space-150) var(--bh-space-150); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); background: var(--bh-color-surface-page); }
 .c-surf-page > .c-tag { position: absolute; top: 6px; left: 12px; }
 .c-surf-side { padding: var(--bh-space-100); border-radius: var(--bh-radius-100); background: var(--bh-color-surface-subtle); }
-.c-surf-card { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--bh-space-050); padding: var(--bh-space-100); border: 1px solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); }
+.c-surf-card { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--bh-space-050); }
 .c-surf-tip { position: absolute; right: 8px; bottom: 8px; padding: var(--bh-space-050) var(--bh-space-100); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); font: var(--bh-font-body-small); }
-.c-tag { display: inline-block; padding: 1px var(--bh-space-075); border-radius: var(--bh-radius-050); color: var(--bh-color-text-subtle); background: var(--bh-color-background-neutral); font: var(--bh-font-code-default); font-size: 12px; }
+.c-tag { display: inline-block; padding: 0 var(--bh-space-075); border-radius: var(--bh-radius-050); color: var(--bh-color-text-subtle); background: var(--bh-color-background-neutral); font: var(--bh-font-code-default); }
 .c-tag.is-on-dark { color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); }
 .c-surf-page.is-dimmed { display: grid; place-items: center; grid-template-columns: 1fr; padding: var(--bh-space-500) var(--bh-space-150) var(--bh-space-200); overflow: hidden; }
 .c-surf-scrim { position: absolute; inset: 0; padding: var(--bh-space-075) var(--bh-space-150); background: var(--bh-color-surface-scrim); }
-.c-surf-dialog { position: relative; display: grid; gap: var(--bh-space-100); max-width: 280px; padding: var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-text-subtle); background: var(--bh-color-surface); box-shadow: var(--bh-elevation-shadow-overlay); font: var(--bh-font-body-default); }
-.c-surf-dialog b { color: var(--bh-color-text); font: var(--bh-font-heading-xsmall); }
+.c-surf-dialog { position: relative; max-width: 20rem; }
 @container prose (min-width: 640px) { .c-surf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 
 /* States */
@@ -154,20 +150,11 @@
 .c-focus { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: var(--bh-state-focus-offset); }
 .c-disabled { border-color: var(--bh-color-border-disabled) !important; color: var(--bh-color-text-disabled) !important; background: var(--bh-color-background-disabled) !important; }
 .c-state-row { display: block; min-width: 88px; padding: var(--bh-space-100) var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--bh-color-text); text-align: left; white-space: nowrap; font: var(--bh-font-body-default); }
-.c-state-row.is-selected { background: linear-gradient(to right, var(--bh-color-border-selected) var(--bh-border-width-selected), var(--bh-color-background-selected) 0); }
+.c-state-row.is-selected { background: var(--bh-color-background-selected); box-shadow: inset var(--bh-border-width-selected) 0 0 var(--bh-color-border-selected); }
 
 /* Banners */
 .c-banners { display: grid; gap: var(--bh-space-100); margin: 0 0 var(--bh-space-300); }
-.c-banner { display: flex; align-items: center; gap: var(--bh-space-100); padding: calc(var(--bh-space-100) - 1px) calc(var(--bh-space-150) - 1px); border: 1px solid; border-radius: var(--bh-radius-100); color: var(--bh-color-text); font: var(--bh-font-body-default); }
 .c-banner-icon { display: inline-flex; }
-.c-banner.is-info { border-color: var(--bh-color-border-info-subtle); background: var(--bh-color-background-info-subtle); }
-.c-banner.is-info .c-banner-icon { color: var(--bh-color-icon-info); }
-.c-banner.is-success { border-color: var(--bh-color-border-success-subtle); background: var(--bh-color-background-success-subtle); }
-.c-banner.is-success .c-banner-icon { color: var(--bh-color-icon-success); }
-.c-banner.is-warning { border-color: var(--bh-color-border-warning-subtle); background: var(--bh-color-background-warning-subtle); }
-.c-banner.is-warning .c-banner-icon { color: var(--bh-color-icon-warning); }
-.c-banner.is-danger { border-color: var(--bh-color-border-danger-subtle); background: var(--bh-color-background-danger-subtle); }
-.c-banner.is-danger .c-banner-icon { color: var(--bh-color-icon-danger); }
 
 /* Step jobs */
 .c-steps-ill { display: grid; gap: var(--bh-space-150); margin: 0 0 var(--bh-space-300); padding: var(--bh-space-200); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
@@ -178,11 +165,11 @@
 .c-steps-row > b { align-self: center; font: var(--bh-font-label-default); }
 .c-step-cell { display: grid; justify-items: center; gap: var(--bh-space-050); }
 .c-step-cell small { color: var(--c-muted); font: var(--bh-font-body-small); }
-.c-step-bg { width: 100%; height: 32px; border: 1px solid var(--c-line); border-radius: var(--bh-radius-050); }
-.c-step-pill, .c-step-fill { display: grid; place-items: center; overflow: hidden; width: 100%; height: 32px; border-radius: var(--bh-radius-100); color: var(--bh-color-text); font: var(--bh-font-label-small); }
+.c-step-bg { width: 100%; height: var(--bh-size-control-default); border: 1px solid var(--c-line); border-radius: var(--bh-radius-050); }
+.c-step-pill, .c-step-fill { display: grid; place-items: center; overflow: hidden; width: 100%; height: var(--bh-size-control-default); border-radius: var(--bh-radius-100); color: var(--bh-color-text); font: var(--bh-font-label-small); }
 .c-step-fill { color: var(--bh-color-text-on-bold); }
-.c-step-line { width: 100%; height: 32px; border: 2px solid; border-radius: var(--bh-radius-100); }
-.c-step-text { display: grid; place-items: center; height: 32px; font: var(--bh-font-heading-small); }
+.c-step-line { width: 100%; height: var(--bh-size-control-default); border: 2px solid; border-radius: var(--bh-radius-100); }
+.c-step-text { display: grid; place-items: center; height: var(--bh-size-control-default); font: var(--bh-font-heading-small); }
 .c-steps-ill figcaption { color: var(--c-muted); font: var(--bh-font-body-small); }
 
 /* Themes */
@@ -219,7 +206,7 @@
 .c-pal-sw:last-of-type { border-radius: var(--bh-radius-050) var(--bh-radius-050) var(--bh-radius-100) var(--bh-radius-100); }
 .c-pal-sw .c-num { font: var(--bh-font-label-small); font-family: var(--bh-font-family-mono); opacity: .9; }
 .c-pal-sw em { margin-left: var(--bh-space-050); font-style: normal; font-weight: var(--bh-font-weight-semibold); text-transform: lowercase; }
-.c-pal.is-light .c-pal-sw:is(:nth-of-type(1), :nth-of-type(2)) { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); }
+.c-pal.is-light .c-pal-sw:is(:nth-of-type(1), :nth-of-type(2)) { box-shadow: inset 0 0 0 var(--bh-border-width-default) var(--bh-color-border); }
 @container prose (width < 640px) { .c-pal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--bh-space-200); } }
 
 /* Ramps on the overview */
@@ -237,7 +224,7 @@
 .c-roles td { vertical-align: top; overflow-wrap: anywhere; }
 .c-roles .c-check { margin-top: var(--bh-space-050); }
 @container prose (width < 560px) { .c-roles { table-layout: auto; } .c-roles .c-spec { display: inline-grid; margin: 0 var(--bh-space-100) 0 0; vertical-align: middle; } .c-roles .c-num { display: inline; } }
-.c-spec { display: grid; place-items: center; width: 72px; height: 44px; margin-bottom: var(--bh-space-075); border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 25%); font: var(--bh-font-heading-small); }
+.c-spec { display: grid; place-items: center; width: 72px; height: 44px; margin-bottom: var(--bh-space-075); border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 var(--bh-border-width-default) var(--bh-color-border); font: var(--bh-font-heading-small); }
 .c-spec.is-border { box-shadow: none; }
 .c-spec-fill { width: 52px; height: 28px; border-radius: var(--bh-radius-050); background: var(--fill); box-shadow: inset 0 0 0 1px var(--edge); }
 .c-roles .c-num { display: block; font: var(--bh-font-code-default); }
@@ -248,7 +235,7 @@
 .c-pair-stage { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--bh-space-050) var(--bh-space-150); min-height: 96px; padding: var(--bh-space-200); font: var(--bh-font-body-default); }
 .c-pair-text { font: var(--bh-font-code-default); }
 .c-pair-marks { display: flex; flex-basis: 100%; gap: var(--bh-space-100); margin-top: var(--bh-space-050); }
-.c-pair-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--bh-radius-050); }
+.c-pair-mark { display: grid; place-items: center; width: var(--bh-space-300); height: var(--bh-space-300); border-radius: var(--bh-radius-050); }
 .c-pair figcaption { padding: var(--bh-space-150) var(--bh-space-200); border-top: 1px solid var(--c-line); font: var(--bh-font-body-small); }
 .c-pair figcaption b { margin-right: var(--bh-space-050); }
 .c-pair figcaption .c-from { display: block; margin-top: var(--bh-space-050); }
@@ -262,9 +249,9 @@
 /* Emphasis */
 .c-emph { margin: 0 0 var(--bh-space-300); padding: var(--bh-space-200); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
 .c-emph-grid { display: grid; grid-template-columns: 80px repeat(3, minmax(0, 1fr)); gap: var(--bh-space-100); align-items: center; font: var(--bh-font-body-small); }
-.c-emph-fill { display: flex; align-items: center; min-height: 40px; padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); font: var(--bh-font-body-default); overflow-wrap: anywhere; }
+.c-emph-fill { display: flex; align-items: center; min-height: var(--bh-space-500); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); font: var(--bh-font-body-default); overflow-wrap: anywhere; }
 .c-emph-none { color: var(--c-muted); text-align: center; }
 .c-emph figcaption { margin-top: var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-body-default); }
-.c-emph-fill { box-shadow: inset 0 0 0 1px rgb(127 127 127 / 18%); }
-.c-status .c-dot { width: 32px; height: 32px; border-radius: var(--bh-radius-050); }
+.c-emph-fill { box-shadow: inset 0 0 0 var(--bh-border-width-default) var(--bh-color-border); }
+.c-status .c-dot { width: var(--bh-space-400); height: var(--bh-space-400); border-radius: var(--bh-radius-050); }
 .c-pair-warn { margin-left: var(--bh-space-025); color: var(--c-ink); font-family: var(--bh-font-family-sans); }