@beehexa/design-rules 0.0.0-stage → 2611.3.2

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

@@ -0,0 +1,9 @@
+---
+title: "Z-index"
+description: "The stacking order of layers: what sits above what, from sticky headers to dialogs and toasts."
+order: 8.5
+planned:
+  - "Layer names and their order"
+  - "Which layer each overlay uses: dropdown, popover, tooltip, dialog, drawer, toast"
+  - "How layering pairs with elevation"
+---

package/dist/docs/src/content/foundations/tokens/all-tokens.mdx

@@ -0,0 +1,36 @@
+---
+title: All design tokens
+description: Every Beehexa design token, its value and when to use it.
+order: 2
+---
+import TokenTable from '../../../components/TokenTable.astro';
+
+## Color
+<TokenTable prefix="color" />
+
+## Typography
+<TokenTable prefix="font" />
+
+## Spacing
+<TokenTable prefix="space" />
+
+## Size
+<TokenTable prefix="size" />
+
+## Radius
+<TokenTable prefix="radius" />
+
+## Border
+<TokenTable prefix="border" />
+
+## Elevation
+<TokenTable prefix="elevation" />
+
+## Motion
+<TokenTable prefix="motion" />
+
+## Breakpoints
+<TokenTable prefix="breakpoint" />
+
+## Interaction states
+<TokenTable prefix="state" />

package/dist/docs/src/content/foundations/tokens/index.mdx

@@ -0,0 +1,27 @@
+---
+title: Tokens overview
+description: Design tokens are named design decisions, such as a color or a spacing step, shared by design and code.
+order: 1
+---
+
+## Why tokens
+
+A token gives a design decision a name. Design files and code both use the name, so a change to the value reaches every product at once and nothing drifts.
+
+## Naming
+
+Tokens are named from general to specific, separated by dots in the source and by dashes in CSS:
+
+| Source name | CSS custom property |
+| --- | --- |
+| `color.text` | `--bh-color-text` |
+| `space.200` | `--bh-space-200` |
+| `color.border.focus` | `--bh-color-border-focus` |
+
+## Where tokens live
+
+Every token has one value, kept in one place. The token tables on this site and the CSS variables in products come from that same source, so they never drift apart.
+
+A token can point at another token, for example `{color.graphite.12}`. Use the role token (`color.text`) in products rather than the raw palette token (`color.graphite.12`) when one exists.
+
+See [All design tokens](/foundations/tokens/all-tokens/) for the full list.

package/dist/docs/src/content/get-started/content.mdx

@@ -0,0 +1,14 @@
+---
+title: Content
+description: How writers keep product copy clear, concise and consistent.
+order: 3
+---
+
+Product copy is part of the interface. Read the [content guidelines](/foundations/guidelines/content/) before writing labels, messages or empty states.
+
+## Quick rules
+
+- Write in sentence case: "Create order", not "Create Order".
+- Lead with the action or the outcome.
+- Name things the same way everywhere.
+- Say what went wrong and how to fix it in error messages.

package/dist/docs/src/content/get-started/design.mdx

@@ -0,0 +1,30 @@
+---
+title: Design
+description: How designers use tokens, styles and components to build Beehexa interfaces.
+order: 1
+---
+
+## Start from tokens
+
+Every color, size, radius and duration in a design should be a [design token](/foundations/tokens/). If a value you need is missing, ask for a new token rather than adding a one-off value.
+
+## Use existing components
+
+Check [Components](/components/) before drawing a new control. Each component page has Usage guidance on when to use it and when to pick something else.
+
+## Design for every state
+
+Specify hover, focus, pressed, selected and disabled for every interactive element. See [Interaction states](/foundations/styles/interaction-states/).
+
+## Check accessibility early
+
+Beehexa products meet WCAG 2.2 AA. Read the [accessibility guidelines](/foundations/guidelines/accessibility/) and the Accessibility tab of every component you use.
+
+## Check colour before handoff
+
+- Every colour is a role token; no hex values or scale steps.
+- Text and icons sit only on backgrounds they are [paired](/foundations/styles/color/accessibility/#pairing) with.
+- Yellow only for the logo, the current-page bar, highlights and brand notes.
+- One primary button per view.
+- Every status is written in words; every selected item has a second cue.
+- Checked in light and in dark.

package/dist/docs/src/content/get-started/develop.mdx

@@ -0,0 +1,59 @@
+---
+title: Develop
+description: How developers use the token CSS, the Ant Design Vue theme and the lint rules.
+order: 2
+---
+
+## Install local design packages
+
+`beehexa.design` owns `@beehexa/design-tokens` and `@beehexa/design-rules`.
+Build them locally with `npm ci && npm run build:packages` in this repository.
+Until managers authorize a real release, consumers use local package references, not guessed
+registry versions. For a sibling Yarn consumer such as dashboard-v2:
+
+```json
+{
+  "dependencies": {
+    "@beehexa/design-tokens": "portal:../beehexa.design/packages/design-tokens",
+    "@beehexa/design-rules": "portal:../beehexa.design/packages/design-rules"
+  }
+}
+```
+
+Install the consumer dependencies, then import `@beehexa/design-tokens/css` once in its entrypoint.
+Use the typed `tokens` and `tokenInfo` exports when an API needs resolved values instead of CSS.
+The explicit `/css/pixels` variant supports nominal-size migration in apps with a nonstandard root;
+it does not satisfy user-default-font scaling. Do not copy generated files into consumers.
+
+No release, deploy or CI execution is a prerequisite for local development. Publishing, release
+tags, deployment, release-CI dispatch and consumer version bumps require explicit manager approval.
+Only an actual authorized published version may replace local references.
+CI is single-repository and uses real published dependency versions. Do not checkout/build sibling
+repos or pass local references into CI. Until an authorized release exists, continue local work
+without running consumer CI or asking for a release to unblock local implementation.
+
+## Use the tokens
+
+Tokens ship as CSS custom properties with the `--bh-` prefix:
+
+```css
+.panel {
+  padding: var(--bh-space-300);
+  border: var(--bh-border-width-default) solid var(--bh-color-border);
+  border-radius: var(--bh-radius-150);
+}
+```
+
+Do not write raw hex colors, arbitrary sizes or durations. Choose installed tokens by semantic role and read their usage rules. The [Stylelint](/tools/stylelint/) and [ESLint](/tools/eslint/) integrations are planned; their documentation is not proof that enforcement is installed.
+
+## Theme Ant Design Vue
+
+Beehexa apps are built on Ant Design Vue. Apply the [Beehexa theme](/tools/ant-design-vue-theme/) so its components use the same tokens.
+
+## Working with AI agents
+
+Start with `@beehexa/design-rules/agent` (installed `dist/AGENTS.md`), then use the package's
+`listRules`, `readRule` and `searchRules` APIs to read the complete matching documents offline.
+Planned stubs stay explicitly planned; they are not permission to invent component values.
+Website [`/llms.txt`](/llms.txt) is a supplementary browsing index, not a replacement for the
+installed rules. See [Docs for AI agents](/tools/ai-agents/).

package/dist/docs/src/content/get-started/get-help.mdx

@@ -0,0 +1,19 @@
+---
+title: Get help
+description: Ask a question, report a problem or propose a change to the design system.
+order: 3
+sidebarGroup: Reference
+---
+import HelpOptions from '../../components/HelpOptions.astro';
+
+The design system team looks after this site, the tokens and the component guidance.
+
+## Ways to reach us
+
+<HelpOptions />
+
+## What to include
+
+- The page or component, with a link.
+- What you were trying to do.
+- A screenshot if something looks wrong.

package/dist/docs/src/content/get-started/index.mdx

@@ -0,0 +1,50 @@
+---
+title: Get started
+description: Start designing, building and writing Beehexa products with shared foundations, components and standards.
+order: 0
+sidebarLabel: Overview
+audience: Designers, developers, writers
+---
+import RoleGuides from '../../components/RoleGuides.astro';
+import SystemAreas from '../../components/SystemAreas.astro';
+import PhaseTable from '../../components/PhaseTable.astro';
+import HelpOptions from '../../components/HelpOptions.astro';
+
+<div class="callout">
+  <p class="callout-title">Working proposal</p>
+  <p>Token values and the component catalog are not final. Check the [release phase](/release-phases/) of anything before you rely on it.</p>
+</div>
+
+The Beehexa Design System is the shared language for every Beehexa web product. It holds the design tokens, guidelines and components that keep interfaces consistent as the team ships about twice a week.
+
+## Pick your guide
+
+<RoleGuides />
+
+## What is in the system
+
+<SystemAreas />
+
+## Your first change
+
+Use tokens instead of raw values. Tokens ship as CSS custom properties with the `--bh-` prefix:
+
+```css
+.panel {
+  padding: var(--bh-space-300);
+  border: var(--bh-border-width-default) solid var(--bh-color-border);
+  border-radius: var(--bh-radius-150);
+}
+```
+
+The [Stylelint](/tools/stylelint/) and [ESLint](/tools/eslint/) rules flag raw hex colors, pixel sizes and durations.
+
+## Release phases
+
+Every page and component shows how stable it is.
+
+<PhaseTable />
+
+## Get help
+
+<HelpOptions />

package/dist/docs/src/content/news/2026-10-16-site-structure.md

@@ -0,0 +1,15 @@
+---
+title: Site structure proposal published
+description: The design system site is organised as Get started, Foundations, Components, Tools, Release phases and News.
+date: 2026-10-16
+---
+
+The site is organised as Get started, Foundations, Components, Tools, Release phases and News.
+
+Three parts get their own place:
+
+- an Accessibility tab on every component page,
+- a dedicated [Interaction states](/foundations/styles/interaction-states/) page,
+- a dedicated [Breakpoints](/foundations/styles/layout/breakpoints/) page.
+
+Token values are a separate decision and are still open.

package/dist/docs/src/content/news/2026-10-20-docs-site.md

@@ -0,0 +1,13 @@
+---
+title: Docs site structure is live
+description: Foundations, Button and Tools pages are published as Early Access.
+date: 2026-10-20
+---
+
+The documentation site now follows the proposed structure. Design tokens live in one place, `tokens/`, and feed both the CSS and the token tables on this site.
+
+What is new:
+
+- [Foundations](/foundations/) with provisional tokens.
+- [Button](/components/button/), the first component page, with all five tabs.
+- [`/llms.txt`](/llms.txt) for AI coding agents.

package/dist/docs/src/content/release-phases/index.mdx

@@ -0,0 +1,12 @@
+---
+title: Release phases
+description: Components and foundations go through release phases that tell you how stable they are.
+order: 1
+sidebarGroup: Reference
+---
+import PhaseTable from '../../components/PhaseTable.astro';
+
+
+<PhaseTable />
+
+Every page and component shows its phase in a chip. When every page in a section shares one phase, the sidebar says so once instead. Changes are recorded in each component's Changelog tab and in [News](/news/).

package/dist/docs/src/content/tools/ai-agents.mdx

@@ -0,0 +1,49 @@
+---
+title: Docs for AI agents
+description: How AI coding agents read the Beehexa Design System.
+order: 4
+---
+
+Coding agents must read the same installed tokens and complete usage rules as people.
+
+## Package entrypoint and rule discovery
+
+`@beehexa/design-rules/agent` resolves to the installed package's `dist/AGENTS.md`.
+The package includes complete source documents plus a typed catalog with stable IDs, source paths,
+locale, titles, raw/body content and explicit active/planned status.
+
+```js
+import { listRules, readRule, searchRules } from '@beehexa/design-rules';
+
+const matching = searchRules('typography');
+for (const rule of matching) console.log(rule.id, rule.status, rule.title);
+// Read a complete document selected by its stable catalog ID.
+const document = matching[0] && readRule(matching[0].id);
+```
+
+Active means authored guidance is present, not a final release or compliance certification.
+A planned stub is not a defined rule. Read full usage/accessibility/state/layout documents for the
+actual task; a matching token value or a short search result is not sufficient.
+
+## Consumer hard rules
+
+Keep these requirements in the consumer's canonical `AGENTS.md`; `CODEX.md` and `CLAUDE.md`
+reference that entrypoint rather than creating competing policies:
+
+- Install local references to `@beehexa/design-tokens` and `@beehexa/design-rules` until
+  managers explicitly authorize a release. Do not copy JSON/CSS/TS/rule bodies or generators.
+- No release, deployment or CI execution is required for local development. Publishing,
+  release tags, deployment, release-CI dispatch and consumer version bumps require manager approval.
+  Replace local references only with a real authorized published version.
+- CI is single-repository and consumer dependencies must be actual published versions.
+  Never add sibling checkouts/builds or local references to CI. Unreleased local work stays local.
+- Before every UI change, read the installed agent entrypoint and complete matching package rules.
+  Use semantic tokens, not nearest values. Missing reusable roles/rules must be authored in the
+  producer package first.
+- There are no exceptions for business colours, canvas geometry, charts, editors, SVG/Mermaid
+  or exports. Package availability does not prove actual consumer adoption or accessibility.
+
+## Website browsing index
+
+[`/llms.txt`](/llms.txt) lists website pages for browsing. The installed package is the offline
+rules contract; do not require website availability or another source checkout to read it.

package/dist/docs/src/content/tools/ant-design-vue-theme.mdx

@@ -0,0 +1,138 @@
+---
+title: Ant Design Vue theme
+description: Make Ant Design Vue components use Beehexa design tokens, breakpoints, grid, control heights and app frame.
+order: 3
+---
+
+Tokens and full rules are available as local `@beehexa/design-tokens` and `@beehexa/design-rules` packages. They are not released to npm yet. There is no exported `/antdv` theme subpath: keep a framework adapter in your application and derive its values from the installed token package.
+
+**Beehexa tokens are the source of truth. Ant Design Vue only reads them.**
+
+This page is the only place where the Beehexa foundations meet Ant Design Vue. The foundation pages stay the same whatever the product is built with.
+
+## Usage
+
+```vue
+<script setup>
+import { tokens } from '@beehexa/design-tokens';
+import '@beehexa/design-tokens/css';
+
+// The framework adapter selects semantic roles, not a new application palette.
+const theme = {
+  token: {
+    colorPrimary: tokens.light['color.background.neutral.bold'],
+    colorText: tokens.light['color.text'],
+    colorBorder: tokens.light['color.border'],
+    fontFamily: tokens.light['font.family.sans'],
+  },
+};
+</script>
+
+<template>
+  <a-config-provider :theme="theme">
+    <App />
+  </a-config-provider>
+</template>
+```
+
+This light-mode colour/font example is not the complete theme recipe. Apply the mappings below
+in your adapter, resolve `rem` to pixels at numeric API boundaries, and recompute from
+`{ ...tokens.light, ...tokens.dark }` for dark mode and the `tokens.vi` typography alternatives
+for Vietnamese. Read the installed rule documents before implementing states or components.
+
+## Token mapping
+
+| Ant Design token | Beehexa token |
+| --- | --- |
+| `colorPrimary` | `color.background.neutral.bold` |
+| `colorText` | `color.text` |
+| `colorBorder` | `color.border` |
+| `borderRadius` | `radius.100` |
+| `fontFamily` | `font.family.sans` |
+
+## Spacing
+
+Ant Design Vue sizes come from `sizeUnit` and `sizeStep`. Keep both at 4, so `size` is 16 px. The theme then sets each size from a [spacing](/foundations/styles/spacing/) token.
+
+| Beehexa token | Value | Ant Design Vue tokens |
+|---|---|---|
+| `space.050` | 4 px | `sizeXXS, paddingXXS, marginXXS` |
+| `space.100` | 8 px | `sizeXS, paddingXS, marginXS` |
+| `space.150` | 12 px | `sizeSM, paddingSM, marginSM` |
+| `space.200` | 16 px | `size, sizeMS, padding, margin` |
+| `space.250` | 20 px | `sizeMD, paddingMD, marginMD` |
+| `space.300` | 24 px | `sizeLG, paddingLG, marginLG` |
+| `space.400` | 32 px | `sizeXL, paddingXL, marginXL` |
+| `space.600` | 48 px | `sizeXXL, marginXXL` |
+
+`space.0`, `space.025`, `space.075`, `space.500`, `space.800` and `space.1000` have no Ant Design Vue token. Use their CSS variables in your own styles.
+
+Props that take a number, such as `size` on `a-space` and `gutter` on `a-row`, take pixels. Use a value from the scale: `<a-space :size="8">`.
+
+## Control height
+
+| Beehexa token | Height | Ant Design Vue token | Component prop |
+|---|---|---|---|
+| `size.control.small` | 24 px | `controlHeightSM` | `size="small"` |
+| `size.control.default` | 32 px | `controlHeight` | None |
+| `size.control.large` | 40 px | `controlHeightLG` | `size="large"` |
+
+These are Ant Design Vue’s own heights. The theme still sets each one from its size token, so a change to the token reaches the components. See [Size and density](/foundations/styles/size-and-density/).
+
+## Breakpoints
+
+**Override the `screen*` tokens with the Beehexa [breakpoints](/foundations/styles/layout/breakpoints/).** The default Ant Design Vue values are different (576, 992, 1200 and 1600 px).
+
+The `Min` and `Max` tokens are computed from the defaults, not from your overrides. Set them too: each `Max` is the next breakpoint minus 1.
+
+| Beehexa | Value | Ant Design Vue tokens |
+|---|---|---|
+| `breakpoint.xs` | 0 | `screenXSMax: 767` |
+| `breakpoint.md` | 768 px | `screenSM`, `screenSMMin`, `screenMD`, `screenMDMin`: 768; `screenSMMax`, `screenMDMax`: 1023 |
+| `breakpoint.lg` | 1024 px | `screenLG`, `screenLGMin`: 1024; `screenLGMax`: 1439 |
+| `breakpoint.xl` | 1440 px | `screenXL`, `screenXLMin`, `screenXXL`, `screenXXLMin`: 1440 |
+
+Ant Design Vue has six breakpoints and Beehexa has four, so `sm` switches with `md`, and `xxl` with `xl`. Use the `xs`, `md`, `lg` and `xl` props of `a-col`.
+
+The props of `a-col` and the responsive `gutter` of `a-row` then switch at the Beehexa widths. Do not use `xxxl`: its media query is malformed in Ant Design Vue 4.2.6 and never matches.
+
+## Grid
+
+Ant Design Vue divides a row into 24 parts. The Beehexa [grid](/foundations/styles/layout/grid/) has 4, 8 or 12 columns, and each one fits 24 exactly.
+
+| Beehexa grid | Window | `a-col` span |
+|---|---|---|
+| 4 columns | Below 768 px | Beehexa span × 6 |
+| 8 columns | 768 to 1023 px | Beehexa span × 3 |
+| 12 columns | 1024 px and up | Beehexa span × 2 |
+
+| Layout | Beehexa spans (4 / 8 / 12 / 12) | Props of each `a-col` |
+|---|---|---|
+| Cards, 1 to 4 a row | 4 / 4 / 4 / 3 | `:xs="24" :md="12" :lg="8" :xl="6"` |
+| Main panel | 4 / 8 / 8 / 9 | `:xs="24" :lg="16" :xl="18"` |
+| Side panel | 4 / 8 / 4 / 3 | `:xs="24" :lg="8" :xl="6"` |
+| Summary tile | 2 / 2 / 3 / 2 | `:xs="12" :md="6" :xl="4"` |
+
+Ant Design Vue rows have no gutter by default. Set it from the spacing tokens, and set the page margin on the content area.
+
+```vue
+<a-row :gutter="[{ xs: 16, md: 24 }, { xs: 16, md: 24 }]">
+  <a-col :xs="24" :md="12" :lg="8" :xl="6">
+    <OrderSummary />
+  </a-col>
+</a-row>
+```
+
+## App frame
+
+| Region | Beehexa | Ant Design Vue |
+|---|---|---|
+| Header | 48 px | `<a-layout-header style="height: 48px; line-height: 48px">` |
+| Side navigation, open | 280 px | `<a-layout-sider :width="280">` |
+| Side navigation, collapsed | 64 px | `<a-layout-sider :collapsed-width="64">` |
+
+The header is 64 px by default and has no token for its height, so set it in the header’s style.
+
+The `breakpoint` prop of `a-layout-sider` uses fixed widths that ignore the `screen*` tokens. Do not use it. Set `collapsed` from your own media query and the user’s choice: open from 1024 px, collapsed to the rail when the user asks, and the choice remembered. Below 1024 px, hide the sider and show the menu in `a-drawer`.
+
+See [Layout](/foundations/styles/layout/) for the frame.

package/dist/docs/src/content/tools/eslint.mdx

@@ -0,0 +1,15 @@
+---
+title: ESLint rules
+description: ESLint rules for Vue templates and scripts that use the design system.
+order: 2
+---
+
+> Planned. The plugin is not published yet; this page describes the rules it will ship.
+
+## Rules
+
+| Rule | Flags |
+| --- | --- |
+| `beehexa/no-inline-style-values` | Raw colors and sizes in `style` bindings. |
+| `beehexa/no-deprecated-components` | Components in the Deprecated release phase. |
+| `beehexa/icon-button-label` | Icon-only `a-button` without `aria-label`. |

package/dist/docs/src/content/tools/index.mdx

@@ -0,0 +1,7 @@
+---
+title: Tools
+description: Lint rules, the Ant Design Vue theme and docs for AI agents that keep products on the system.
+order: 0
+---
+
+These tools stop products drifting away from the design system: lint rules catch raw values, the theme makes Ant Design Vue use our tokens, and AI agents get docs they can read.

package/dist/docs/src/content/tools/stylelint.mdx

@@ -0,0 +1,19 @@
+---
+title: Stylelint rules
+description: Stylelint rules that flag raw values where a design token exists.
+order: 1
+---
+
+> Planned. The plugin is not published yet; this page describes the rules it will ship.
+
+## Rules
+
+| Rule | Flags |
+| --- | --- |
+| `beehexa/no-raw-color` | Hex, `rgb()` and named colors. Use a `--bh-color-*` token. |
+| `beehexa/no-color-scale` | Scale, brand and static colour tokens (`--bh-color-graphite-9`, `--bh-color-brand-yellow`). Use a role token. |
+| `beehexa/no-state-opacity` | `opacity`, `filter` or a transparent overlay on `:hover`, `:active` or `:disabled`. Use the state's colour token. |
+| `beehexa/no-raw-spacing` | Pixel and rem values in `margin`, `padding` and `gap`. Use `--bh-space-*`. |
+| `beehexa/no-raw-radius` | Raw values in `border-radius`. Use `--bh-radius-*`. |
+| `beehexa/known-tokens` | `--bh-*` properties that do not exist. |
+

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

@@ -0,0 +1,89 @@
+---
+title: Viền
+description: Bốn độ dày viền, màu đi cùng mỗi độ dày, và cách vẽ focus ring.
+order: 7
+---
+import ShapeDemo from '../../../components/ShapeDemo.astro';
+import TokenTable from '../../../components/TokenTable.astro';
+
+**Phần lớn viền là 1 px. Viền dày hơn mang ý nghĩa: đang chọn, đang focus, hoặc một trạng thái cần chú ý.**
+
+Màu viền là token màu: `color.border` cho đường phân cách và card, `color.border.bold` cho mép ô nhập, checkbox và select. Xem [Token](/vi/foundations/styles/color/tokens/#borders).
+
+## Các độ dày
+
+<ShapeDemo kind="border-scale" />
+
+## Ví dụ
+
+### `border.width.default` · 1 px
+
+Ô nhập, button phụ, card, bảng và đường phân cách.
+
+<ShapeDemo kind="border-use" item="default" />
+
+### `border.width.selected` · 2 px
+
+Thanh dưới tab đang chọn, thanh cạnh mục side nav đang chọn, và viền card đang chọn. Luôn đi cùng `color.border.selected`.
+
+<ShapeDemo kind="border-use" item="selected" />
+
+### `border.width.focused` · 2 px
+
+Focus ring, màu `color.border.focus`, vẽ cách phần tử 2 px về phía ngoài (`state.focus.offset`). Vẽ vào trong, ở −2 px, khi khung bao quanh sẽ cắt mất ring: mục menu, ô bảng và tab trong vùng cuộn.
+
+<ShapeDemo kind="border-use" item="focused" />
+
+### `border.width.accent` · 4 px
+
+Thanh trạng thái hoặc nhấn mạnh ở một cạnh: alert và banner, dòng bảng bị lỗi, callout và trích dẫn. Hộp vẫn bo đủ bốn góc và thanh chạy theo đường cong.
+
+<ShapeDemo kind="border-use" item="accent" />
+
+## Độ dày đi cùng màu
+
+| Độ dày | Màu | Dùng cho |
+|---|---|---|
+| `border.width.default` | `color.border` hoặc `color.border.bold` | Mép và đường phân cách |
+| `border.width.selected` | `color.border.selected` | Tab, mục side nav hoặc card đang chọn |
+| `border.width.focused` | `color.border.focus` | Focus bằng bàn phím |
+| `border.width.accent` | `color.border.danger`, `.warning`, `.success`, `.info` hoặc `.brand` | Thanh trạng thái và nhấn mạnh |
+
+Không báo trạng thái chỉ bằng màu. Đang chọn và đang focus còn đổi cả độ dày.
+
+## Nên và không nên
+
+<ShapeDemo kind="dodont" item="selected" />
+<ShapeDemo kind="dodont" item="accent" />
+<ShapeDemo kind="dodont" item="cards" />
+
+## Code
+
+```css
+.alert {
+  position: relative;
+  overflow: hidden;
+  border: var(--bh-border-width-default) solid var(--bh-color-border);
+  border-radius: var(--bh-radius-100);
+}
+.alert::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--bh-border-width-accent);
+  background: var(--bh-color-border-danger);
+}
+:focus-visible {
+  outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus);
+  outline-offset: var(--bh-state-focus-offset);
+}
+```
+
+## Token
+
+<TokenTable prefix="border" />
+
+## Liên quan
+
+- [Bo góc](/vi/foundations/styles/radius/): các bậc bo góc và quy tắc lồng nhau.
+- [Trạng thái tương tác](/vi/foundations/styles/interaction-states/): hover, nhấn, đang chọn và vô hiệu.

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

@@ -0,0 +1,32 @@
+---
+title: Khả năng tiếp cận
+description: Độ tương phản mà mọi cặp màu đạt được, chữ nào được đặt trên nền nào, và cách kiểm tra.
+order: 6
+---
+import ColorDemo from '../../../../components/ColorDemo.astro';
+
+**Mọi token chữ và icon đều đạt WCAG 2.2 AA trên mọi nền đi cùng nó, ở cả giao diện sáng và tối: đủ cả 386 cặp.**
+
+## Độ tương phản
+
+| Thành phần | Tối thiểu | WCAG 2.2 |
+|---|---|---|
+| Chữ | 4.5:1 | 1.4.3 |
+| Icon, viền control, viền focus | 3:1 | 1.4.11 |
+| Control bị vô hiệu, vạch chỉ báo màu vàng, logo | Không có mức tối thiểu | Ngoại lệ của 1.4.3 |
+
+<ColorDemo kind="contrast" />
+
+Màu không bao giờ là tín hiệu duy nhất (WCAG 1.4.1): trạng thái được ghi bằng chữ, mục được chọn có thêm dấu hiệu thứ hai.
+
+## Ghép cặp
+
+**Chữ, icon và viền chỉ được đặt trên các nền ghi cùng với chúng.** Mọi cặp ở đây đều đạt độ tương phản ở giao diện sáng và tối, và được kiểm tra ở mỗi lần build.
+
+<ColorDemo kind="pairing" />
+
+<ColorDemo kind="dodont" item="pairing" />
+
+## Được kiểm tra tự động
+
+Mọi cặp trong phần [Ghép cặp](#ghép-cặp) được kiểm tra tự động, ở giao diện sáng và tối. Token chữ, icon hoặc viền nào thấp hơn mức tối thiểu trên bất kỳ nền nào của nó sẽ không được phát hành.