# a11y Color-Contrast Report > **Generated**: 2026-05-19 via `pnpm exec node scripts/a11y-contrast-inspector.mjs` > **Coverage**: 30 pages × 2 themes (dark + light); axe rule `color-contrast` only. > **Total findings**: 2120 node-level violations grouped into 148 unique (fg, bg, theme) tuples. ## How to read this Each section below is a failing color pair. Designer review per section: 1. **改 Figma token 值** — if the pair belongs to the public token system and should meet WCAG AA, update token in Figma → next `pnpm sync:figma-library` brings new value into code. 2. **标"组件特有"** — if pair is a component-internal style not meant as public token, designer can override it at component level in Figma; no public token change needed. 3. **不改 (accept)** — only if the contrast is intentional and the surface is decorative / non-textual. Per user 1a decision (2026-05-19), this option is discouraged: clean v1.0 means clean. WCAG AA bar: - 4.5:1 for normal text - 3:1 for large text (≥18px or ≥14px bold) and UI components ## Findings by scope | Scope | Failing nodes | Unique pairs | Owner | |---|---:|---:|---| | **library** — Library components (src/canonical + src/components) | 215 | 44 | **设计师** review — 改 Figma token 或标 component-internal | | **docs-chrome** — Docs site chrome (.docs-* — sidebar / topnav / pager / meta) | 478 | 31 | **开发** review — docs site 外壳样式，不走 Figma；直接改 playground/docs/ | | **demo-local** — Demo-page-local helpers (playground/docs/pages/*.vue ad-hoc styles) | 1427 | 73 | **开发** review — demo 页内联样式，多数应改用 token / library 组件 | > **设计师只需 review `library` 段**——其余两段是 docs site 自身样式问题（开发处理）。 --- ## Scope: `library` — Library components (src/canonical + src/components) Owner: **设计师** review — 改 Figma token 或标 component-internal ### 1. `#7b7b7b` on `#353535` (dark) - **Scope**: `library` - **Contrast ratio**: 2.89:1 | **Required**: 4.5:1:1 - **Occurrences**: 19 nodes - **Foreground token candidates**: `--color-grey-7`, `--text-placeholder`, `--text-grey-dis`, `--icon-placeholder`, `--icon-grey-dis` - **Background token candidates**: `--color-grey-10`, `--msg-bg-grey`, `--bg-layer4`, `--line-deep` - **Sample selectors** (first 5): - `select: .docs-subsection:nth-child(3) > .docs-demo > .docs-demo-grid > .docs-demo-card:nth-child(3) > .select-wrap--filled[data-figma-status="default"][data-figma-ux="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(3) > .select-wrap--error[data-figma-ux="error"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .select-wrap--filled[data-figma-ux="hover"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(3) > .select-wrap--interactive[data-figma-ux="click"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(3) > .select-wrap--editable[data-figma-ux="editable"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - _…and 14 more_ **Action**: - [ ] (a) bump `--color-grey-7` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 2. `#9e9e9e` on `#4c4c4c` (light) - **Scope**: `library` - **Contrast ratio**: 3.20:1 | **Required**: 4.5:1:1 - **Occurrences**: 19 nodes - **Foreground token candidates**: `--color-grey-6`, `--text-placeholder`, `--text-grey-dis`, `--icon-placeholder`, `--icon-grey-dis` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `select: .docs-subsection:nth-child(3) > .docs-demo > .docs-demo-grid > .docs-demo-card:nth-child(3) > .select-wrap--filled[data-figma-status="default"][data-figma-ux="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(3) > .select-wrap--error[data-figma-ux="error"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .select-wrap--filled[data-figma-ux="hover"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(3) > .select-wrap--interactive[data-figma-ux="click"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(3) > .select-wrap--editable[data-figma-ux="editable"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - _…and 14 more_ **Action**: - [ ] (a) bump `--color-grey-6` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 3. `#ffffff` on `#2fb54e` (dark) - **Scope**: `library` - **Contrast ratio**: 2.67:1 | **Required**: 4.5:1:1 - **Occurrences**: 17 nodes - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--brand`, `--prompt-success-text` - **Sample selectors** (first 5): - `button: .btn--radius-round.btn--status-default.btn--fill-green` - `button: .review-demo__row:nth-child(2) > .review-demo__samples > .review-sample:nth-child(2) > .btn--fixed-yes.btn--status-default.btn--fill-green` - `button: .btn--icon-left.btn--fixed-yes.btn--status-default` - `button: .btn--icon-right.btn--fixed-yes.btn--status-default` - `tabs: .tab--filled[data-figma-property2="Green"][data-figma-type="Filled"] > .tab-item--active-green[data-figma-property1="Active"][data-figma-property2="Green"]` - _…and 12 more_ **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 4. `#7b7b7b` on `#262626` (dark) - **Scope**: `library` - **Contrast ratio**: 3.57:1 | **Required**: 4.5:1:1 - **Occurrences**: 15 nodes - **Foreground token candidates**: `--color-grey-7`, `--text-placeholder`, `--text-grey-dis`, `--icon-placeholder`, `--icon-grey-dis` - **Background token candidates**: `--color-grey-11`, `--bg-layer3` - **Sample selectors** (first 5): - `select: .docs-subsection:nth-child(3) > .docs-demo > .docs-demo-grid > .docs-demo-card:nth-child(1) > .select-wrap--line[data-figma-status="default"][data-figma-ux="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(1) > .select-wrap--error[data-figma-ux="error"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .select-wrap--line[data-figma-ux="hover"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(1) > .select-wrap--interactive[data-figma-ux="click"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(1) > .select-wrap--editable[data-figma-ux="editable"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - _…and 10 more_ **Action**: - [ ] (a) bump `--color-grey-7` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 5. `#9e9e9e` on `#f0f0f0` (light) - **Scope**: `library` - **Contrast ratio**: 2.35:1 | **Required**: 4.5:1:1 - **Occurrences**: 15 nodes - **Foreground token candidates**: `--color-grey-6`, `--text-placeholder`, `--text-grey-dis`, `--icon-placeholder`, `--icon-grey-dis` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `select: .docs-subsection:nth-child(3) > .docs-demo > .docs-demo-grid > .docs-demo-card:nth-child(1) > .select-wrap--line[data-figma-status="default"][data-figma-ux="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(1) > .select-wrap--error[data-figma-ux="error"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .select-wrap--line[data-figma-ux="hover"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(1) > .select-wrap--interactive[data-figma-ux="click"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(1) > .select-wrap--editable[data-figma-ux="editable"][data-figma-status="default"] > .select-trigger > .select-value--placeholder.select-value[data-v-30f64729=""]` - _…and 10 more_ **Action**: - [ ] (a) bump `--color-grey-6` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 6. `#141414` on `#4c4c4c` (light) - **Scope**: `library` - **Contrast ratio**: 2.14:1 | **Required**: 4.5:1:1 - **Occurrences**: 13 nodes - **Foreground token candidates**: `--color-grey-13`, `--text-body` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `select: .docs-subsection:nth-child(3) > .docs-demo > .docs-demo-grid > .docs-demo-card:nth-child(4) > .select-wrap--filled[data-figma-status="normal"][data-figma-ux="default"] > .select-trigger > .select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(4) > .select-wrap--error[data-figma-ux="error"][data-figma-status="normal"] > .select-trigger > .select-value[data-v-30f64729=""]` - `select: .select-wrap--filled[data-figma-ux="hover"][data-figma-status="normal"] > .select-trigger > .select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(4) > .select-wrap--interactive[data-figma-ux="click"][data-figma-status="normal"] > .select-trigger > .select-value[data-v-30f64729=""]` - `select: .docs-demo-card:nth-child(4) > .select-wrap--editable[data-figma-ux="editable"][data-figma-status="normal"] > .select-trigger > .select-value[data-v-30f64729=""]` - _…and 8 more_ **Action**: - [ ] (a) bump `--color-grey-13` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 7. `#595959` on `#141414` (light) - **Scope**: `library` - **Contrast ratio**: 2.63:1 | **Required**: 4.5:1:1 - **Occurrences**: 12 nodes - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: `--color-grey-13`, `--text-body` - **Sample selectors** (first 5): - `pagination: .pagination--classic[data-figma-type="Classic"][data-figma-member="4884:7181"] > .pg-total` - `pagination: .pagination--classic[data-figma-type="Classic"][data-figma-member="4884:7181"] > .pg-content > .pg-jumper > .pg-jumper__label` - `pagination: .pagination--small[data-figma-type="Small"][data-figma-member="4907:6738"] > .pg-total` - `pagination: .pagination--small[data-figma-type="Small"][data-figma-member="4907:6738"] > .pg-content > .pg-jumper > .pg-jumper__label` - `pagination: .pagination--simple[data-figma-type="Simple"][data-figma-member="4894:7211"] > .pg-total` - _…and 7 more_ **Action**: - [ ] (a) bump `--color-grey-8` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 8. `#ffffff` on `#299f45` (light) - **Scope**: `library` - **Contrast ratio**: 3.42:1 | **Required**: 4.5:1:1 - **Occurrences**: 12 nodes - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: `--brand` - **Sample selectors** (first 5): - `notification: .notif--warning[data-figma-status="warning"][data-figma-member="1408:17129"] > .notif__actions > .notif__button--confirm.notif__button` - `notification: .notif--secondary-warning[data-figma-status="secondary warning"][data-figma-member="1539:31691"] > .notif__actions > .notif__button--confirm.notif__button` - `notification: .notif--error[data-figma-status="error"][data-figma-member="1408:17131"] > .notif__actions > .notif__button--confirm.notif__button` - `notification: .notif--info[data-figma-status="info"][data-figma-member="1408:17130"] > .notif__actions > .notif__button--confirm.notif__button` - `notification: .notification-member:nth-child(1) > .notif--warning.notif[data-figma-status="warning"] > .notif__actions > .notif__button--confirm.notif__button` - _…and 7 more_ **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 9. `#299f45` on `#f1fbf3` (light) - **Scope**: `library` - **Contrast ratio**: 3.23:1 | **Required**: 4.5:1:1 - **Occurrences**: 8 nodes - **Foreground token candidates**: `--brand` - **Background token candidates**: `--brand-match` - **Sample selectors** (first 5): - `select: .dropdown-select--radio.dropdown-select--on[data-figma-type="Radio"] > .dropdown-item--active.dropdown-item[data-v-4c9aee0c=""] > .dropdown-item__label[data-v-4c9aee0c=""]` - `select: .dropdown-select--multi.dropdown-select--on[data-figma-type="Multi"] > .dropdown-item--active.dropdown-item[data-v-4c9aee0c=""]:nth-child(1) > .dropdown-item__label[data-v-4c9aee0c=""]` - `select: .dropdown-select--multi.dropdown-select--on[data-figma-type="Multi"] > .dropdown-item--active.dropdown-item[data-v-4c9aee0c=""]:nth-child(3) > .dropdown-item__label[data-v-4c9aee0c=""]` - `select: .dropdown-select--sort-by.dropdown-select--on[data-figma-type="Sort By"] > .dropdown-item--active.dropdown-item[data-v-4c9aee0c=""] > .dropdown-item__label[data-v-4c9aee0c=""]` - `select: .dropdown-select--radio.dropdown-select--off[data-figma-type="Radio"] > .dropdown-item--active.dropdown-item[data-v-4c9aee0c=""] > .dropdown-item__label[data-v-4c9aee0c=""]` - _…and 3 more_ **Action**: - [ ] (a) bump `--brand` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 10. `#9e9e9e` on `#f8f8f8` (light) - **Scope**: `library` - **Contrast ratio**: 2.52:1 | **Required**: 4.5:1:1 - **Occurrences**: 8 nodes - **Foreground token candidates**: `--color-grey-6`, `--text-placeholder`, `--text-grey-dis`, `--icon-placeholder`, `--icon-grey-dis` - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `tabs: .tab-item--line.tab-item--normal[data-v-da3358a1=""]:nth-child(2)` - `tabs: .tab-item--line.tab-item--normal[data-v-da3358a1=""]:nth-child(3)` - `tabs: .tab-item--text.tab-item--normal[data-v-da3358a1=""]:nth-child(2)` - `tabs: .tab-item--text.tab-item--normal[data-v-da3358a1=""]:nth-child(3)` - `tabs: .item-preview--line.item-preview > .tab--line.tab[data-v-d558e1c2=""] > .tab-item--line[data-figma-property1="Normal"][data-figma-component="TabItem"]` - _…and 3 more_ **Action**: - [ ] (a) bump `--color-grey-6` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 11. `#000000` on `#141414` (light) - **Scope**: `library` - **Contrast ratio**: 1.13:1 | **Required**: 4.5:1:1 - **Occurrences**: 6 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: `--color-grey-13`, `--text-body` - **Sample selectors** (first 5): - `steps: .example-section:nth-child(2) > .example-preview > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--active.step-item--number.step-item--horizontal > .step-title` - `steps: .example-section:nth-child(3) > .example-preview > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--active.step-item--number.step-item--horizontal > .step-title` - `steps: .example-preview--centered > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--active.step-item--number.step-item--horizontal > .step-title` - `steps: .example-section:nth-child(5) > .example-preview > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--active.step-item--number.step-item--horizontal > .step-title` - `steps: .example-preview > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--icon.step-item--active.step-item--horizontal > .step-title` - _…and 1 more_ **Action**: - [ ] (a) bump `--color-grey-14` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 12. `#ffffff` on `#ea4233` (dark) - **Scope**: `library` - **Contrast ratio**: 3.94:1 | **Required**: 4.5:1:1 - **Occurrences**: 6 nodes - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--red`, `--prompt-error-text` - **Sample selectors** (first 5): - `notification: .notif--pop-confirm[data-figma-status="pop confirm"][data-figma-member="1408:17126"] > .notif__actions > .notif__button--danger.notif__button` - `notification: .figma-members-grid__preview[data-v-653cff92=""] > .notif--quick-confirm.notif--compact[data-figma-status="quick confirm"] > .notif__actions > .notif__button--danger.notif__button` - `notification: .notification-member:nth-child(4) > .notif--pop-confirm.notif[data-figma-status="pop confirm"] > .notif__actions > .notif__button--danger.notif__button` - `notification: .notification-member:nth-child(5) > .notif--quick-confirm.notif--compact[data-figma-status="quick confirm"] > .notif__actions > .notif__button--danger.notif__button` - `badge: .canonical-badge--rectangle[data-figma-member="4821:1666"][data-figma-color="Red"]` - _…and 1 more_ **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 13. `#ea4233` on `#262626` (dark) - **Scope**: `library` - **Contrast ratio**: 3.83:1 | **Required**: 4.5:1:1 - **Occurrences**: 5 nodes - **Foreground token candidates**: `--red`, `--prompt-error-text` - **Background token candidates**: `--color-grey-11`, `--bg-layer3` - **Sample selectors** (first 5): - `form-item: .form-item--error[data-figma-status="Error"][data-figma-type="Label & Input"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` - `form-item: .form-item--error[data-figma-status="Error"][data-figma-type="Label & Selector"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` - `form-item: .form-item--error[data-figma-type="Label & Radio"][data-figma-status="Error"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` - `form-item: .form-item--error[data-figma-type="Label & checkbox"][data-figma-status="Error"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` - `form-item: .form-item--error[data-figma-type="Label & Switch"][data-figma-status="Error"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` **Action**: - [ ] (a) bump `--red` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 14. `#dc2717` on `#f0f0f0` (light) - **Scope**: `library` - **Contrast ratio**: 4.24:1 | **Required**: 4.5:1:1 - **Occurrences**: 5 nodes - **Foreground token candidates**: `--red` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `form-item: .form-item--error[data-figma-status="Error"][data-figma-type="Label & Input"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` - `form-item: .form-item--error[data-figma-status="Error"][data-figma-type="Label & Selector"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` - `form-item: .form-item--error[data-figma-type="Label & Radio"][data-figma-status="Error"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` - `form-item: .form-item--error[data-figma-type="Label & checkbox"][data-figma-status="Error"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` - `form-item: .form-item--error[data-figma-type="Label & Switch"][data-figma-status="Error"] > .form-item__main[data-v-ff92dbaf=""] > .form-item__content[data-v-ff92dbaf=""] > .form-item__message.form-item__message--error` **Action**: - [ ] (a) bump `--red` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 15. `#7b7b7b` on `#141414` (dark) - **Scope**: `library` - **Contrast ratio**: 4.35:1 | **Required**: 4.5:1:1 - **Occurrences**: 5 nodes - **Foreground token candidates**: `--color-grey-7`, `--text-placeholder`, `--text-grey-dis`, `--icon-placeholder`, `--icon-grey-dis` - **Background token candidates**: `--color-grey-13`, `--bg-layer1` - **Sample selectors** (first 5): - `steps: .example-section:nth-child(2) > .example-preview > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--pending.step-item--number.step-item--horizontal > .step-title` - `steps: .example-section:nth-child(3) > .example-preview > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--pending.step-item--number.step-item--horizontal > .step-title` - `steps: .example-section:nth-child(5) > .example-preview > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--pending.step-item--number.step-item--horizontal > .step-title` - `steps: .example-preview > .steps--horizontal.steps[data-figma-direction="horizontal"] > .step-item--icon.step-item--pending.step-item--horizontal > .step-title` - `steps: .step-item--vertical.step-item--pending.step-item--number > .step-vertical > .step-vertical__content > .step-title` **Action**: - [ ] (a) bump `--color-grey-7` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 16. `#ffffff` on `#2eb24d` (light) - **Scope**: `library` - **Contrast ratio**: 2.76:1 | **Required**: 4.5:1:1 - **Occurrences**: 4 nodes - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `button: .btn--radius-round.btn--status-default.btn--fill-green` - `button: .review-demo__row:nth-child(2) > .review-demo__samples > .review-sample:nth-child(2) > .btn--fixed-yes.btn--status-default.btn--fill-green` - `button: .btn--icon-left.btn--fixed-yes.btn--status-default` - `button: .btn--icon-right.btn--fixed-yes.btn--status-default` **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 17. `#3892f3` on `#e1eefd` (dark) - **Scope**: `library` - **Contrast ratio**: 2.71:1 | **Required**: 4.5:1:1 - **Occurrences**: 4 nodes - **Foreground token candidates**: `--blue`, `--prompt-info-text` - **Background token candidates**: `--blue-bg` - **Sample selectors** (first 5): - `prompt-message: .prompt-row:nth-child(1) > .prompt-message--info.prompt-message--L[data-figma-status="info"] > .prompt-message__copy` - `prompt-message: article > .prompt-message--info.prompt-message--L[data-figma-status="info"] > .prompt-message__copy` - `prompt-message: .prompt-row:nth-child(1) > .prompt-message--info.prompt-message--M[data-figma-status="info"] > .prompt-message__copy` - `prompt-message: article > .prompt-message--info.prompt-message--M[data-figma-status="info"] > .prompt-message__copy` **Action**: - [ ] (a) bump `--blue` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 18. `#3892f3` on `#e1eefd` (light) - **Scope**: `library` - **Contrast ratio**: 2.71:1 | **Required**: 4.5:1:1 - **Occurrences**: 4 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--blue-bg` - **Sample selectors** (first 5): - `prompt-message: .prompt-row:nth-child(1) > .prompt-message--info.prompt-message--L[data-figma-status="info"] > .prompt-message__copy` - `prompt-message: article > .prompt-message--info.prompt-message--L[data-figma-status="info"] > .prompt-message__copy` - `prompt-message: .prompt-row:nth-child(1) > .prompt-message--info.prompt-message--M[data-figma-status="info"] > .prompt-message__copy` - `prompt-message: article > .prompt-message--info.prompt-message--M[data-figma-status="info"] > .prompt-message__copy` **Action**: - [ ] (a) bump `#3892f3` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 19. `#434343` on `#1f1f1f` (light) - **Scope**: `library` - **Contrast ratio**: 1.66:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: `--color-grey-12` - **Sample selectors** (first 5): - `slider: .slider--dark.slider--m[data-figma-size="M"] > .slider__value[data-v-a68df002=""]` - `slider: .slider--dark.slider--s[data-figma-size="S"] > .slider__value[data-v-a68df002=""]` **Action**: - [ ] (a) bump `--color-grey-9` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 20. `#2fb54e` on `#f8f8f8` (light) - **Scope**: `library` - **Contrast ratio**: 2.52:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `breadcrumb: .docs-demo-card.docs-demo-card--wide.docs-demo-card--dark:nth-child(1) > .breadcrumb-stage[aria-label="breadcrumb"][data-figma-capability="Breadcrumb"] > ol > .breadcrumb-item--current[data-figma-state="current"] > .breadcrumb-item__label[aria-current="page"][data-v-b6d0f1e5=""]` - `tabs: .tab--line.tab[data-figma-property2="Green"] > .tab-item--active-green[data-figma-property1="Active"][data-figma-property2="Green"]` **Action**: - [ ] (a) bump `#2fb54e` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 21. `#299f45` on `#f0f0f0` (light) - **Scope**: `library` - **Contrast ratio**: 3.00:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--brand` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `steps: .steps-stage--simple.steps--horizontal[data-figma-direction="horizontal"]:nth-child(1) > .step-item--icon.step-item--completed.step-item--horizontal > .step-title` - `steps: .steps-stage--simple.steps--horizontal[data-figma-direction="horizontal"]:nth-child(2) > .step-item--completed.step-item--number.step-item--horizontal > .step-title` **Action**: - [ ] (a) bump `--brand` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 22. `#ea4233` on `#fff1f0` (dark) - **Scope**: `library` - **Contrast ratio**: 3.58:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--red`, `--prompt-error-text` - **Background token candidates**: `--red-bg` - **Sample selectors** (first 5): - `prompt-message: .prompt-message--error.prompt-message--L[data-figma-status="error"] > .prompt-message__copy` - `prompt-message: .prompt-message--error.prompt-message--M[data-figma-status="error"] > .prompt-message__copy` **Action**: - [ ] (a) bump `--red` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 23. `#f68512` on `#fff3db` (dark) - **Scope**: `library` - **Contrast ratio**: 2.30:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--orange`, `--prompt-warning-text` - **Background token candidates**: `--orange-bg` - **Sample selectors** (first 5): - `prompt-message: .prompt-message--warning.prompt-message--L[data-figma-status="warning"] > .prompt-message__copy` - `prompt-message: .prompt-message--warning.prompt-message--M[data-figma-status="warning"] > .prompt-message__copy` **Action**: - [ ] (a) bump `--orange` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 24. `#2fb54e` on `#f1fbf3` (dark) - **Scope**: `library` - **Contrast ratio**: 2.52:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--brand`, `--prompt-success-text` - **Background token candidates**: `--prompt-success-bg` - **Sample selectors** (first 5): - `prompt-message: .prompt-message--success.prompt-message--L[data-figma-status="success"] > .prompt-message__copy` - `prompt-message: .prompt-message--success.prompt-message--M[data-figma-status="success"] > .prompt-message__copy` **Action**: - [ ] (a) bump `--brand` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 25. `#ea4233` on `#fff1f0` (light) - **Scope**: `library` - **Contrast ratio**: 3.58:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--red-bg` - **Sample selectors** (first 5): - `prompt-message: .prompt-message--error.prompt-message--L[data-figma-status="error"] > .prompt-message__copy` - `prompt-message: .prompt-message--error.prompt-message--M[data-figma-status="error"] > .prompt-message__copy` **Action**: - [ ] (a) bump `#ea4233` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 26. `#f68512` on `#fff3db` (light) - **Scope**: `library` - **Contrast ratio**: 2.30:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--orange-bg` - **Sample selectors** (first 5): - `prompt-message: .prompt-message--warning.prompt-message--L[data-figma-status="warning"] > .prompt-message__copy` - `prompt-message: .prompt-message--warning.prompt-message--M[data-figma-status="warning"] > .prompt-message__copy` **Action**: - [ ] (a) bump `#f68512` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 27. `#2fb54e` on `#f1fbf3` (light) - **Scope**: `library` - **Contrast ratio**: 2.52:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--brand-match` - **Sample selectors** (first 5): - `prompt-message: .prompt-message--success.prompt-message--L[data-figma-status="success"] > .prompt-message__copy` - `prompt-message: .prompt-message--success.prompt-message--M[data-figma-status="success"] > .prompt-message__copy` **Action**: - [ ] (a) bump `#2fb54e` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 28. `#ffffff` on `#3892f3` (dark) - **Scope**: `library` - **Contrast ratio**: 3.19:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--blue`, `--prompt-info-text` - **Sample selectors** (first 5): - `badge: .canonical-badge--rectangle[data-figma-member="4821:1669"][data-figma-color="Blue"]` - `badge: .docs-demo-card:nth-child(2) > .canonical-badge--rectangle[data-figma-color="Blue"][data-figma-type="Rectangle"]` **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 29. `#ffffff` on `#f68512` (dark) - **Scope**: `library` - **Contrast ratio**: 2.53:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--orange`, `--prompt-warning-text` - **Sample selectors** (first 5): - `badge: .canonical-badge--rectangle[data-figma-member="4821:1667"][data-figma-color="Orange"]` - `badge: .docs-demo-card:nth-child(3) > .canonical-badge--rectangle[data-figma-color="Orange"][data-figma-type="Rectangle"]` **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 30. `#ffffff` on `#e26601` (light) - **Scope**: `library` - **Contrast ratio**: 3.42:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: `--orange` - **Sample selectors** (first 5): - `badge: .canonical-badge--rectangle[data-figma-member="4821:1667"][data-figma-color="Orange"]` - `badge: .docs-demo-card:nth-child(3) > .canonical-badge--rectangle[data-figma-color="Orange"][data-figma-type="Rectangle"]` **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 31. `#ffffff` on `#41c760` (dark) - **Scope**: `library` - **Contrast ratio**: 2.19:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--brand-hover` - **Sample selectors** (first 5): - `button: .btn--status-hover` **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 32. `#ffffff` on `#3ac45c` (light) - **Scope**: `library` - **Contrast ratio**: 2.27:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `button: .btn--status-hover` **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 33. `#2eb24d` on `#f8f8f8` (light) - **Scope**: `library` - **Contrast ratio**: 2.60:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `button: .btn--ghost-green.btn--radius-round.btn--status-default` **Action**: - [ ] (a) bump `#2eb24d` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 34. `#595959` on `#353535` (dark) - **Scope**: `library` - **Contrast ratio**: 1.75:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-8`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-border` - **Background token candidates**: `--color-grey-10`, `--msg-bg-grey`, `--bg-layer4`, `--line-deep` - **Sample selectors** (first 5): - `select: .dropdown-select--operation-list.dropdown-select--on[data-figma-type="Operation List"] > .dropdown-item--disabled.dropdown-item[data-v-4c9aee0c=""] > .dropdown-item__label[data-v-4c9aee0c=""]` **Action**: - [ ] (a) bump `--color-grey-8` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 35. `#595959` on `#141414` (dark) - **Scope**: `library` - **Contrast ratio**: 2.63:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-8`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-border` - **Background token candidates**: `--color-grey-13`, `--bg-layer1` - **Sample selectors** (first 5): - `select: .dropdown-select--operation-list.dropdown-select--off[data-figma-type="Operation List"] > .dropdown-item--disabled.dropdown-item[data-v-4c9aee0c=""] > .dropdown-item__label[data-v-4c9aee0c=""]` **Action**: - [ ] (a) bump `--color-grey-8` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 36. `#cccccc` on `#dbdbdb` (light) - **Scope**: `library` - **Contrast ratio**: 1.15:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-5`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-light`, `--control-disabled-text` - **Background token candidates**: `--color-grey-4`, `--bg-layer4`, `--bg-grey-btn-en`, `--bg-grey-btn-dis`, `--line-deep`, `--control-disabled-bg`, `--radio-disabled-off-border` - **Sample selectors** (first 5): - `select: .dropdown-select--operation-list.dropdown-select--on[data-figma-type="Operation List"] > .dropdown-item--disabled.dropdown-item[data-v-4c9aee0c=""] > .dropdown-item__label[data-v-4c9aee0c=""]` **Action**: - [ ] (a) bump `--color-grey-5` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 37. `#cccccc` on `#ffffff` (light) - **Scope**: `library` - **Contrast ratio**: 1.60:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-5`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-light`, `--control-disabled-text` - **Background token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Sample selectors** (first 5): - `select: .dropdown-select--operation-list.dropdown-select--off[data-figma-type="Operation List"] > .dropdown-item--disabled.dropdown-item[data-v-4c9aee0c=""] > .dropdown-item__label[data-v-4c9aee0c=""]` **Action**: - [ ] (a) bump `--color-grey-5` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 38. `#595959` on `#262626` (dark) - **Scope**: `library` - **Contrast ratio**: 2.16:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-8`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-border` - **Background token candidates**: `--color-grey-11`, `--bg-layer3` - **Sample selectors** (first 5): - `breadcrumb: .breadcrumb-member-card.docs-demo-card--dark:nth-child(4) > .breadcrumb-stage[aria-label="breadcrumb"][data-figma-capability="Breadcrumb"] > ol > .breadcrumb-item--disabled[data-figma-state="disabled"] > .breadcrumb-item__label[data-v-b6d0f1e5=""]` **Action**: - [ ] (a) bump `--color-grey-8` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 39. `#595959` on `#1f1f1f` (dark) - **Scope**: `library` - **Contrast ratio**: 2.35:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-8`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-border` - **Background token candidates**: `--color-grey-12`, `--bg-layer2` - **Sample selectors** (first 5): - `breadcrumb: .docs-demo-card.docs-demo-card--wide.docs-demo-card--dark:nth-child(2) > .breadcrumb-stage[aria-label="breadcrumb"][data-figma-capability="Breadcrumb"] > ol > .breadcrumb-item--disabled[data-figma-state="disabled"] > .breadcrumb-item__label[data-v-b6d0f1e5=""]` **Action**: - [ ] (a) bump `--color-grey-8` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 40. `#cccccc` on `#f0f0f0` (light) - **Scope**: `library` - **Contrast ratio**: 1.40:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-5`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-light`, `--control-disabled-text` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `breadcrumb: .breadcrumb-member-card.docs-demo-card--dark:nth-child(1) > .breadcrumb-stage[aria-label="breadcrumb"][data-figma-capability="Breadcrumb"] > ol > .breadcrumb-item--Default[data-figma-state="Default"] > .breadcrumb-item__label[data-v-b6d0f1e5=""]` **Action**: - [ ] (a) bump `--color-grey-5` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 41. `#f8f8f8` on `#f0f0f0` (light) - **Scope**: `library` - **Contrast ratio**: 1.07:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-2`, `--bg-layer2` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `breadcrumb: .breadcrumb-member-card.docs-demo-card--dark:nth-child(2) > .breadcrumb-stage[aria-label="breadcrumb"][data-figma-capability="Breadcrumb"] > ol > .breadcrumb-item--hover[data-figma-state="hover"] > .breadcrumb-item__label[data-v-b6d0f1e5=""]` **Action**: - [ ] (a) bump `--color-grey-2` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 42. `#2fb54e` on `#f0f0f0` (light) - **Scope**: `library` - **Contrast ratio**: 2.35:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `breadcrumb: .breadcrumb-member-card.docs-demo-card--dark:nth-child(3) > .breadcrumb-stage[aria-label="breadcrumb"][data-figma-capability="Breadcrumb"] > ol > .breadcrumb-item--current[data-figma-state="current"] > .breadcrumb-item__label[aria-current="page"][data-v-b6d0f1e5=""]` **Action**: - [ ] (a) bump `#2fb54e` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 43. `#cccccc` on `#f8f8f8` (light) - **Scope**: `library` - **Contrast ratio**: 1.51:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-5`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-light`, `--control-disabled-text` - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `breadcrumb: .docs-demo-card.docs-demo-card--wide.docs-demo-card--dark:nth-child(2) > .breadcrumb-stage[aria-label="breadcrumb"][data-figma-capability="Breadcrumb"] > ol > .breadcrumb-item--without-separator.breadcrumb-item--Default[data-figma-state="Default"] > .breadcrumb-item__label[data-v-b6d0f1e5=""]` **Action**: - [ ] (a) bump `--color-grey-5` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ### 44. `#ffffff` on `#2fb54e` (light) - **Scope**: `library` - **Contrast ratio**: 2.67:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `tabs: .tab--filled[data-figma-property2="Green"][data-figma-type="Filled"] > .tab-item--active-green[data-figma-property1="Active"][data-figma-property2="Green"]` **Action**: - [ ] (a) bump `--color-white` → ? (darken/lighten for ratio ≥ 4.5:1:1) - [ ] (b) mark as component-internal (not public token) - [ ] (c) accept — _discouraged per 1a_ --- ## Scope: `docs-chrome` — Docs site chrome (.docs-* — sidebar / topnav / pager / meta) Owner: **开发** review — docs site 外壳样式，不走 Figma；直接改 playground/docs/ ### 45. `#000000` on `#141414` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.13:1 | **Required**: 4.5:1:1 - **Occurrences**: 129 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: `--color-grey-13`, `--text-body` - **Sample selectors** (first 5): - `typography: .docs-sidebar__block:nth-child(1) > .docs-sidebar__title` - `typography: .docs-sidebar__block:nth-child(2) > .docs-sidebar__title` - `typography: .docs-sidebar__block:nth-child(3) > .docs-sidebar__title` - `typography: .docs-sidebar__block:nth-child(4) > .docs-sidebar__title` - `typography: .docs-sidebar__block:nth-child(5) > .docs-sidebar__title` - _…and 124 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 46. `#000000` on `#252525` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.37:1 | **Required**: 4.5:1:1 - **Occurrences**: 80 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .docs-sidebar__block:nth-child(1) > .docs-sidebar__title` - `color: .docs-sidebar__block:nth-child(2) > .docs-sidebar__title` - `color: .docs-sidebar__block:nth-child(3) > .docs-sidebar__title` - `color: .docs-sidebar__block:nth-child(4) > .docs-sidebar__title` - `color: .docs-sidebar__block:nth-child(5) > .docs-sidebar__title` - _…and 75 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 47. `#434343` on `#141414` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.86:1 | **Required**: 4.5:1:1 - **Occurrences**: 64 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: `--color-grey-13`, `--text-body` - **Sample selectors** (first 5): - `typography: .docs-sidebar__link[href="/"]` - `typography: .docs-sidebar__link[href$="color"]` - `typography: .docs-sidebar__link[href$="border"]` - `typography: .docs-sidebar__link[href$="button"]` - `border: .docs-sidebar__link[href="/"]` - _…and 59 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 48. `#434343` on `#252525` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.54:1 | **Required**: 4.5:1:1 - **Occurrences**: 37 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .docs-sidebar__link[href="/"]` - `color: .docs-sidebar__link[href$="typography"]` - `color: .docs-sidebar__link[href$="button"]` - `button: .docs-sidebar__link[href="/"]` - `button: .docs-sidebar__link[href$="effect"]` - _…and 32 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 49. `#000000` on `#1f1f1f` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.27:1 | **Required**: 4.5:1:1 - **Occurrences**: 32 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: `--color-grey-12` - **Sample selectors** (first 5): - `typography: a[aria-label="Previous: Color"] > .docs-pager__title` - `typography: .docs-pager__link--next > .docs-pager__title` - `border: a[aria-label="Previous: Typography"] > .docs-pager__title` - `border: .docs-pager__link--next > .docs-pager__title` - `effect: a[aria-label="Previous: Border"] > .docs-pager__title` - _…and 27 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 50. `#cccccc` on `#e6e6e6` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.28:1 | **Required**: 4.5:1:1 - **Occurrences**: 16 nodes - **Foreground token candidates**: `--color-grey-5`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-light`, `--control-disabled-text` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `typography: .docs-topnav__link[href="/"]` - `border: .docs-topnav__link[href="/"]` - `effect: .docs-topnav__link[href="/"]` - `input-number: .docs-topnav__link[href="/"]` - `radio: .docs-topnav__link[href="/"]` - _…and 11 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 51. `#595959` on `#262626` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 2.16:1 | **Required**: 4.5:1:1 - **Occurrences**: 16 nodes - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: `--color-grey-11` - **Sample selectors** (first 5): - `typography: .docs-meta-pill__label` - `border: .docs-meta-pill__label` - `effect: .docs-meta-pill__label` - `input-number: .docs-meta-pill__label` - `radio: .docs-meta-pill__label` - _…and 11 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 52. `#000000` on `#232323` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.33:1 | **Required**: 4.5:1:1 - **Occurrences**: 16 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `chart: .docs-sidebar__block:nth-child(1) > .docs-sidebar__title` - `chart: .docs-sidebar__block:nth-child(2) > .docs-sidebar__title` - `chart: .docs-sidebar__block:nth-child(3) > .docs-sidebar__title` - `chart: .docs-sidebar__block:nth-child(4) > .docs-sidebar__title` - `chart: .docs-sidebar__block:nth-child(5) > .docs-sidebar__title` - _…and 11 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 53. `#000000` on `#383838` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.79:1 | **Required**: 4.5:1:1 - **Occurrences**: 15 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: a[aria-label="Previous: Overview"] > .docs-pager__title` - `color: .docs-pager__link--next > .docs-pager__title` - `button: a[aria-label="Previous: Effect"] > .docs-pager__title` - `button: .docs-pager__link--next > .docs-pager__title` - `input: a[aria-label="Previous: Icon"] > .docs-pager__title` - _…and 10 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 54. `#c2c2c2` on `#e7e7e7` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.44:1 | **Required**: 4.5:1:1 - **Occurrences**: 10 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .docs-topnav__link[href="/"]` - `button: .docs-topnav__link[href="/"]` - `input: .docs-topnav__link[href="/"]` - `select: .docs-topnav__link[href="/"]` - `datetime: .docs-topnav__link[href="/"]` - _…and 5 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 55. `#595959` on `#343434` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.77:1 | **Required**: 4.5:1:1 - **Occurrences**: 9 nodes - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .docs-meta-pill__label` - `button: .docs-meta-pill__label` - `input: .docs-meta-pill__label` - `select: .docs-meta-pill__label` - `datetime: .docs-meta-pill__label` - _…and 4 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 56. `#000000` on `#484848` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 2.29:1 | **Required**: 4.5:1:1 - **Occurrences**: 8 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .docs-sidebar__block:nth-child(1) > .docs-sidebar__title` - `overview: .docs-sidebar__block:nth-child(2) > .docs-sidebar__title` - `overview: .docs-sidebar__block:nth-child(3) > .docs-sidebar__title` - `overview: .docs-sidebar__block:nth-child(4) > .docs-sidebar__title` - `overview: .docs-sidebar__block:nth-child(5) > .docs-sidebar__title` - _…and 3 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 57. `#000000` on `#727272` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 4.36:1 | **Required**: 4.5:1:1 - **Occurrences**: 8 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-sidebar__block:nth-child(1) > .docs-sidebar__title` - `icon: .docs-sidebar__block:nth-child(2) > .docs-sidebar__title` - `icon: .docs-sidebar__block:nth-child(3) > .docs-sidebar__title` - `icon: .docs-sidebar__block:nth-child(4) > .docs-sidebar__title` - `icon: .docs-sidebar__block:nth-child(5) > .docs-sidebar__title` - _…and 3 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 58. `#434343` on `#232323` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.58:1 | **Required**: 4.5:1:1 - **Occurrences**: 8 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `chart: .docs-sidebar__link[href="/"]` - `chart: .docs-sidebar__link[href$="button"]` - `chart: .docs-sidebar__link[href$="pagination"]` - `chart: .docs-sidebar__link[href$="breadcrumb"]` - `progress: .docs-sidebar__link[href="/"]` - _…and 3 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 59. `#000000` on `#373737` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.76:1 | **Required**: 4.5:1:1 - **Occurrences**: 4 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `select: a[aria-label="Previous: InputNumber"] > .docs-pager__title` - `select: .docs-pager__link--next > .docs-pager__title` - `checkbox: a[aria-label="Previous: DateTime"] > .docs-pager__title` - `checkbox: .docs-pager__link--next > .docs-pager__title` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 60. `#000000` on `#353535` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.71:1 | **Required**: 4.5:1:1 - **Occurrences**: 4 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: `--color-grey-10` - **Sample selectors** (first 5): - `chart: a[aria-label="Previous: Pagination"] > .docs-pager__title` - `chart: .docs-pager__link--next > .docs-pager__title` - `progress: a[aria-label="Previous: PopupBox"] > .docs-pager__title` - `progress: .docs-pager__link--next > .docs-pager__title` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 61. `#434343` on `#727272` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 2.05:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-sidebar__link[href="/"]` - `icon: .docs-sidebar__link[href$="button"]` - `icon: .docs-sidebar__link[href$="input"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 62. `#299f45` on `#f8f8f8` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 3.22:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: `--brand` - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `icon: .docs-example-block:nth-child(1) > .docs-example-block__header > .docs-example-block__heading > .docs-example-block__eyebrow` - `icon: .docs-example-block:nth-child(2) > .docs-example-block__header > .docs-example-block__heading > .docs-example-block__eyebrow` - `icon: .docs-example-block:nth-child(3) > .docs-example-block__header > .docs-example-block__heading > .docs-example-block__eyebrow` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 63. `#434343` on `#484848` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.08:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .docs-sidebar__link[href$="color"]` - `overview: .docs-sidebar__link[href$="button"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 64. `#c3c3c3` on `#e7e7e7` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.42:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `chart: .docs-topnav__link[href="/"]` - `progress: .docs-topnav__link[href="/"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 65. `#595959` on `#333333` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.80:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `chart: .docs-meta-pill__label` - `progress: .docs-meta-pill__label` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 66. `#2eb04c` on `#525252` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 2.76:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .docs-version-chip` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 67. `#595959` on `#525252` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.11:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .docs-meta-pill__label` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 68. `#aeaeae` on `#525252` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 3.52:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .docs-utility-link` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 69. `#000000` on `#6a6a6a` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 3.88:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .docs-pager__title` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 70. `#2dac4a` on `#767676` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.53:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-version-chip` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 71. `#959595` on `#ededed` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 2.55:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-topnav__link[href="/"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 72. `#595959` on `#767676` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.54:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-meta-pill__label` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 73. `#959595` on `#767676` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.51:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-utility-link` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 74. `#2fb34d` on `#353535` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 4.48:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-10` - **Sample selectors** (first 5): - `switch: .docs-version-chip` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 75. `#595959` on `#353535` (light) - **Scope**: `docs-chrome` - **Contrast ratio**: 1.75:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: `--color-grey-10` - **Sample selectors** (first 5): - `switch: .docs-meta-pill__label` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ## Scope: `demo-local` — Demo-page-local helpers (playground/docs/pages/*.vue ad-hoc styles) Owner: **开发** review — demo 页内联样式，多数应改用 token / library 组件 ### 76. `#434343` on `#141414` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.86:1 | **Required**: 4.5:1:1 - **Occurrences**: 436 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: `--color-grey-13`, `--text-body` - **Sample selectors** (first 5): - `typography: a[href$="effect"]` - `typography: a[href$="icon"]` - `typography: a[href$="input"]` - `typography: a[href$="input-number"]` - `typography: a[href$="select"]` - _…and 431 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 77. `#434343` on `#252525` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.54:1 | **Required**: 4.5:1:1 - **Occurrences**: 263 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: a[href$="border"]` - `color: a[href$="effect"]` - `color: a[href$="icon"]` - `color: a[href$="input"]` - `color: a[href$="input-number"]` - _…and 258 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 78. `#e8e8e8` on `#f8f8f8` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.15:1 | **Required**: 4.5:1:1 - **Occurrences**: 168 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `button: .loading-review__group:nth-child(2) > .loading-review__group-header > .loading-review__group-title` - `button: .loading-review__group:nth-child(3) > .loading-review__group-header > .loading-review__group-title` - `button: .api-table-wrap:nth-child(1) > .api-table-wrap__title` - `button: .api-table-wrap:nth-child(1) > table > tbody > tr:nth-child(1) > td:nth-child(1) > code` - `button: .api-table-wrap:nth-child(1) > table > tbody > tr:nth-child(1) > td:nth-child(2)` - _…and 163 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 79. `#e8e8e8` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.07:1 | **Required**: 4.5:1:1 - **Occurrences**: 64 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `button: .coverage-grid__item:nth-child(1) > .coverage-grid__axis` - `button: .coverage-grid__item:nth-child(2) > .coverage-grid__axis` - `button: .coverage-grid__item:nth-child(3) > .coverage-grid__axis` - `button: .coverage-grid__item:nth-child(4) > .coverage-grid__axis` - `button: .coverage-grid__item:nth-child(5) > .coverage-grid__axis` - _…and 59 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 80. `#434343` on `#989898` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.42:1 | **Required**: 4.5:1:1 - **Occurrences**: 62 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-section:nth-child(1) > .docs-demo > .stats-grid > .stats-card:nth-child(1) > .stats-note` - `icon: .docs-section:nth-child(1) > .docs-demo > .stats-grid > .stats-card:nth-child(2) > .stats-note` - `icon: .docs-section:nth-child(1) > .docs-demo > .stats-grid > .stats-card:nth-child(3) > .stats-note` - `icon: .stats-card:nth-child(5) > .stats-note` - `icon: .source-card:nth-child(1) > .stats-note` - _…and 57 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 81. `#595959` on `#989898` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.42:1 | **Required**: 4.5:1:1 - **Occurrences**: 60 nodes - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-section:nth-child(1) > .docs-demo > .stats-grid > .stats-card:nth-child(1) > .stats-label` - `icon: .docs-section:nth-child(1) > .docs-demo > .stats-grid > .stats-card:nth-child(2) > .stats-label` - `icon: .docs-section:nth-child(1) > .docs-demo > .stats-grid > .stats-card:nth-child(3) > .stats-label` - `icon: .stats-card:nth-child(4) > .stats-label` - `icon: .stats-card:nth-child(5) > .stats-label` - _…and 55 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 82. `#434343` on `#232323` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.58:1 | **Required**: 4.5:1:1 - **Occurrences**: 52 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `chart: a[href$="color"]` - `chart: a[href$="typography"]` - `chart: a[href$="border"]` - `chart: a[href$="effect"]` - `chart: a[href$="icon"]` - _…and 47 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 83. `#000000` on `#141414` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.13:1 | **Required**: 3:1:1 - **Occurrences**: 31 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: `--color-grey-13`, `--text-body` - **Sample selectors** (first 5): - `typography: h1` - `border: h1` - `effect: h1` - `input-number: h1` - `radio: h1` - _…and 26 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 84. `#434343` on `#484848` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.08:1 | **Required**: 4.5:1:1 - **Occurrences**: 28 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: a[href$="typography"]` - `overview: a[href$="border"]` - `overview: a[href$="effect"]` - `overview: a[href$="icon"]` - `overview: a[href$="input"]` - _…and 23 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 85. `#434343` on `#727272` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.05:1 | **Required**: 4.5:1:1 - **Occurrences**: 27 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: a[href$="color"]` - `icon: a[href$="typography"]` - `icon: a[href$="border"]` - `icon: a[href$="effect"]` - `icon: a[href$="input-number"]` - _…and 22 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 86. `#434343` on `#2f2f2f` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.35:1 | **Required**: 4.5:1:1 - **Occurrences**: 20 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `badge: .figma-members-grid__cell[data-figma-member="4821:1662"] > .figma-members-grid__label` - `badge: .figma-members-grid__cell[data-figma-member="4895:1363"] > .figma-members-grid__label` - `badge: .figma-members-grid__cell[data-figma-member="4821:1663"] > .figma-members-grid__label` - `badge: .figma-members-grid__cell[data-figma-member="4895:1365"] > .figma-members-grid__label` - `badge: .figma-members-grid__cell[data-figma-member="4821:1661"] > .figma-members-grid__label` - _…and 15 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 87. `#e7e7e7` on `#f8f8f8` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.16:1 | **Required**: 4.5:1:1 - **Occurrences**: 17 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `switch: .api-table-wrap__title` - `switch: tr:nth-child(1) > td:nth-child(1) > code` - `switch: tr:nth-child(1) > td:nth-child(2)` - `switch: tr:nth-child(1) > td:nth-child(3) > code` - `switch: tr:nth-child(1) > td:nth-child(4) > code` - _…and 12 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 88. `#ffffff` on `#2fb54e` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 2.67:1 | **Required**: 3:1:1 - **Occurrences**: 16 nodes - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--brand`, `--prompt-success-text` - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(3) > .pairing-card__title` - `color: .pairing-card:nth-child(3) > .pairing-card__copy` - `button: .docs-section:nth-child(3) > .docs-demo > .review-demo > .review-demo__row > .review-demo__samples > .review-sample:nth-child(1) > .btn--status-default.btn--fill-green.btn--icon-no` - `button: .docs-section:nth-child(4) > .docs-demo > .review-demo > .review-demo__row > .review-demo__samples > .review-sample:nth-child(2) > .btn--status-default.btn--fill-green.btn--icon-no` - `button: .docs-section:nth-child(5) > .docs-demo > .review-demo > .review-demo__row:nth-child(2) > .review-demo__samples > .review-sample:nth-child(1) > .btn--status-default.btn--fill-green.btn--icon-no` - _…and 11 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 89. `#cccccc` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.40:1 | **Required**: 4.5:1:1 - **Occurrences**: 16 nodes - **Foreground token candidates**: `--color-grey-5`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-light`, `--control-disabled-text` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `typography: .locale-switch__button:nth-child(2)` - `border: .locale-switch__button:nth-child(2)` - `effect: .locale-switch__button:nth-child(2)` - `input-number: .locale-switch__button[type="button"]:nth-child(2)` - `radio: .locale-switch__button:nth-child(2)` - _…and 11 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 90. `#ffffff` on `#2eb24d` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.76:1 | **Required**: 4.5:1:1 - **Occurrences**: 14 nodes - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `button: .docs-section:nth-child(3) > .docs-demo > .review-demo > .review-demo__row > .review-demo__samples > .review-sample:nth-child(1) > .btn--status-default.btn--fill-green.btn--icon-no` - `button: .docs-section:nth-child(4) > .docs-demo > .review-demo > .review-demo__row > .review-demo__samples > .review-sample:nth-child(2) > .btn--status-default.btn--fill-green.btn--icon-no` - `button: .docs-section:nth-child(5) > .docs-demo > .review-demo > .review-demo__row:nth-child(2) > .review-demo__samples > .review-sample:nth-child(1) > .btn--status-default.btn--fill-green.btn--icon-no` - `button: .docs-section:nth-child(7) > .docs-demo > .review-demo > .review-demo__row > .review-demo__samples > .review-sample:nth-child(1) > .btn--status-default.btn--fill-green.btn--icon-no` - `button: .docs-section:nth-child(7) > .docs-demo > .review-demo > .review-demo__row > .review-demo__samples > .review-sample:nth-child(2) > .btn--icon-left.btn--status-default.btn--fill-green` - _…and 9 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 91. `#f8f8f8` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.07:1 | **Required**: 4.5:1:1 - **Occurrences**: 12 nodes - **Foreground token candidates**: `--color-grey-2`, `--bg-layer2` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `typography: .type-card:nth-child(1) > .type-preview[lang="en"]` - `typography: .type-card:nth-child(2) > .type-preview[lang="en"]` - `typography: .type-card:nth-child(3) > .type-preview[lang="en"]` - `pagination: .figma-members-grid__title` - `pagination: .figma-members-grid__axis-name` - _…and 7 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 92. `#595959` on `#141414` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.63:1 | **Required**: 4.5:1:1 - **Occurrences**: 12 nodes - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: `--color-grey-13`, `--text-body` - **Sample selectors** (first 5): - `steps: .figma-source` - `steps: .example-section:nth-child(2) > .example-description` - `steps: .example-section:nth-child(2) > .example-toolbar > span:nth-child(2)` - `steps: .example-section:nth-child(3) > .example-description` - `steps: .example-section:nth-child(3) > .example-toolbar > span:nth-child(2)` - _…and 7 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 93. `#c2c2c2` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.56:1 | **Required**: 4.5:1:1 - **Occurrences**: 10 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `color: .locale-switch__button:nth-child(2)` - `button: .locale-switch__button[type="button"]:nth-child(2)` - `input: .locale-switch__button:nth-child(2)` - `select: .locale-switch__button:nth-child(2)` - `datetime: .locale-switch__button:nth-child(2)` - _…and 5 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 94. `#299f45` on `#252525` (light) - **Scope**: `demo-local` - **Contrast ratio**: 4.48:1 | **Required**: 4.5:1:1 - **Occurrences**: 10 nodes - **Foreground token candidates**: `--brand` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .eyebrow` - `button: .eyebrow` - `input: .eyebrow` - `select: .eyebrow` - `datetime: .eyebrow` - _…and 5 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 95. `#000000` on `#252525` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.37:1 | **Required**: 3:1:1 - **Occurrences**: 10 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: h1` - `button: h1` - `input: h1` - `select: h1` - `datetime: h1` - _…and 5 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 96. `#ffffff` on `#3892f3` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 3.19:1 | **Required**: 4.5:1:1 - **Occurrences**: 7 nodes - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--blue`, `--prompt-info-text` - **Sample selectors** (first 5): - `steps: .example-section:nth-child(2) > .example-toolbar > span:nth-child(1)` - `steps: .example-section:nth-child(3) > .example-toolbar > span:nth-child(1)` - `steps: .example-section:nth-child(4) > .example-toolbar > span:nth-child(1)` - `steps: .example-section:nth-child(5) > .example-toolbar > span:nth-child(1)` - `steps: .example-section:nth-child(6) > .example-toolbar > span:nth-child(1)` - _…and 2 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 97. `#000000` on `#0473d5` (light) - **Scope**: `demo-local` - **Contrast ratio**: 4.41:1 | **Required**: 4.5:1:1 - **Occurrences**: 7 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: `--blue` - **Sample selectors** (first 5): - `steps: .example-section:nth-child(2) > .example-toolbar > span:nth-child(1)` - `steps: .example-section:nth-child(3) > .example-toolbar > span:nth-child(1)` - `steps: .example-section:nth-child(4) > .example-toolbar > span:nth-child(1)` - `steps: .example-section:nth-child(5) > .example-toolbar > span:nth-child(1)` - `steps: .example-section:nth-child(6) > .example-toolbar > span:nth-child(1)` - _…and 2 more_ **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 98. `#e7e7e7` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.08:1 | **Required**: 4.5:1:1 - **Occurrences**: 5 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `switch: .coverage-grid__item:nth-child(1) > .coverage-grid__axis` - `switch: .coverage-grid__item:nth-child(2) > .coverage-grid__axis` - `switch: .coverage-grid__item:nth-child(3) > .coverage-grid__axis` - `switch: .coverage-grid__item:nth-child(4) > .coverage-grid__axis` - `switch: pre > code` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 99. `#595959` on `#1f1f1f` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.35:1 | **Required**: 4.5:1:1 - **Occurrences**: 4 nodes - **Foreground token candidates**: `--color-grey-8`, `--text-tips`, `--icon-default` - **Background token candidates**: `--color-grey-12` - **Sample selectors** (first 5): - `slider: .slider-member-card--dark.slider-member-card:nth-child(1) > .slider-member-card__meta > strong` - `slider: .slider-member-card--dark.slider-member-card:nth-child(1) > .slider-member-card__meta > span` - `slider: .slider-member-card--dark.slider-member-card:nth-child(2) > .slider-member-card__meta > strong` - `slider: .slider-member-card--dark.slider-member-card:nth-child(2) > .slider-member-card__meta > span` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 100. `#e9e9e9` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.06:1 | **Required**: 4.5:1:1 - **Occurrences**: 4 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `progress: .figma-members-grid__title` - `progress: .figma-members-grid__axis[data-v-653cff92=""]:nth-child(1) > .figma-members-grid__axis-name[data-v-653cff92=""]` - `progress: .figma-members-grid__axis[data-v-653cff92=""]:nth-child(2) > .figma-members-grid__axis-name[data-v-653cff92=""]` - `progress: .figma-members-grid__axis[data-v-653cff92=""]:nth-child(3) > .figma-members-grid__axis-name[data-v-653cff92=""]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 101. `#aeaeae` on `#525252` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.52:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .docs-search > span:nth-child(2)` - `overview: .docs-meta-link > span:nth-child(2)` - `overview: .docs-meta-pill > span:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 102. `#2eb24d` on `#f8f8f8` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.60:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `button: .review-sample:nth-child(2) > .btn--ghost-green.btn--status-default.btn--icon-no` - `button: .btn--text-green.btn--status-default.btn--icon-no` - `button: .review-sample:nth-child(3) > .btn--ghost-green.btn--status-default.btn--icon-no` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 103. `#959595` on `#767676` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.51:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .docs-search > span:nth-child(2)` - `icon: .docs-meta-link > span:nth-child(2)` - `icon: .docs-meta-pill > span:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 104. `#434343` on `#999999` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.47:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: `--color-grey-9`, `--text-2`, `--text-grey-en`, `--icon-active`, `--text-grey-hv` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .tone-card:nth-child(1) > .stats-note` - `icon: .tone-card:nth-child(2) > .stats-note` - `icon: .tone-card:nth-child(3) > .stats-note` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 105. `#141414` on `#474747` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.98:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: `--color-grey-13`, `--text-body` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `table: .tbl-row:nth-child(2) > .tbl-cell--left.tbl-cell:nth-child(1) > .tbl-cell__content > span` - `table: .tbl-row:nth-child(2) > .tbl-cell--left.tbl-cell:nth-child(2) > .tbl-cell__content > span` - `table: .tbl-row:nth-child(2) > .tbl-cell--left.tbl-cell:nth-child(3) > .tbl-cell__content > span` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 106. `#cccccc` on `#f8f8f8` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.51:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: `--color-grey-5`, `--text-disabled`, `--icon-disabled`, `--bg-grey-btn-hv`, `--line-light`, `--control-disabled-text` - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `pagination: .pagination-member:nth-child(2) > .pagination--small.pagination[data-figma-type="Small"] > .pg-content > .pg-nav-row--small.pg-nav-row > .btn--text-gray[data-figma-style="rimless"][data-figma-color="gray 1"]:nth-child(8)` - `breadcrumb: a[href$="workspace"]` - `breadcrumb: a[href$="project"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 107. `#299f45` on `#ffffff` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.42:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: `--brand` - **Background token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Sample selectors** (first 5): - `topbar: .docs-demo-card--full:nth-child(1) > .topbar--after-login.topbar[data-figma-tag="After Login"] > .topbar-brand[data-v-96a8c926=""] > .brand-pill` - `topbar: .topbar--before-login > .topbar-brand[data-v-96a8c926=""] > .brand-pill` - `topbar: .docs-demo-card--wide > .topbar--after-login.topbar[data-figma-tag="After Login"] > .topbar-brand[data-v-96a8c926=""] > .brand-pill` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 108. `#299f45` on `#f8f8f8` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.22:1 | **Required**: 4.5:1:1 - **Occurrences**: 3 nodes - **Foreground token candidates**: `--brand` - **Background token candidates**: `--color-grey-2`, `--bg-layer2` - **Sample selectors** (first 5): - `prompt-message: .docs-section:nth-child(3) > .docs-demo > .prompt-stack > article > .try-controls > .try-button--active.try-button` - `prompt-message: .docs-section:nth-child(4) > .docs-demo > .prompt-stack > article > .try-controls > .try-button--active.try-button` - `badge: .try-button--active` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 109. `#ffffff` on `#40bb5c` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 2.47:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(3) > .pairing-card__meta > .pairing-meta-chip:nth-child(1)` - `color: .pairing-card:nth-child(3) > .pairing-card__meta > .pairing-meta-chip:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 110. `#3892f3` on `#e1eefd` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 2.71:1 | **Required**: 3:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--blue`, `--prompt-info-text` - **Background token candidates**: `--blue-bg` - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(4) > .pairing-card__title` - `color: .pairing-card:nth-child(4) > .pairing-card__copy` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 111. `#3892f3` on `#d3e7fc` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 2.52:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--blue`, `--prompt-info-text` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(4) > .pairing-card__meta > .pairing-meta-chip:nth-child(1)` - `color: .pairing-card:nth-child(4) > .pairing-card__meta > .pairing-meta-chip:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 112. `#ffffff` on `#3aa754` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.07:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(3) > .pairing-card__meta > .pairing-meta-chip:nth-child(1)` - `color: .pairing-card:nth-child(3) > .pairing-card__meta > .pairing-meta-chip:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 113. `#0473d5` on `#cfe4fa` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.65:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--blue` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(4) > .pairing-card__meta > .pairing-meta-chip:nth-child(1)` - `color: .pairing-card:nth-child(4) > .pairing-card__meta > .pairing-meta-chip:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 114. `#141414` on `#1f1f1f` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.11:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-grey-13`, `--text-body` - **Background token candidates**: `--color-grey-12` - **Sample selectors** (first 5): - `slider: .slider-member-card--dark.slider-member-card:nth-child(1) > .slider-member-card__summary` - `slider: .slider-member-card--dark.slider-member-card:nth-child(2) > .slider-member-card__summary` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 115. `#c3c3c3` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.54:1 | **Required**: 4.5:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `chart: .locale-switch__button:nth-child(2)` - `progress: .locale-switch__button:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 116. `#000000` on `#232323` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.33:1 | **Required**: 3:1:1 - **Occurrences**: 2 nodes - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `chart: h1` - `progress: h1` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 117. `#2fb54e` on `#273d2c` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 4.37:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--brand`, `--prompt-success-text` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .status-chip--done` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 118. `#3892f3` on `#293747` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 3.79:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--blue`, `--prompt-info-text` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .status-chip--todo` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 119. `#aeaeae` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.94:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `overview: .locale-switch__button:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 120. `#9f9f9f` on `#525252` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.95:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .canonical-toggle` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 121. `#299f45` on `#484848` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.67:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--brand` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .eyebrow` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 122. `#000000` on `#484848` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.29:1 | **Required**: 3:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-14`, `--text-heading` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: h1` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 123. `#299f45` on `#d0e3d5` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.54:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--brand` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .status-chip--done` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 124. `#e26601` on `#eedaca` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.52:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--orange` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .status-chip--working` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 125. `#0473d5` on `#cadcec` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.38:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--blue` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `overview: .status-chip--todo` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 126. `#cbedd3` on `#2fb54e` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 2.11:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--brand`, `--prompt-success-text` - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(3) > .pairing-card__eyebrow` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 127. `#62a9f6` on `#e1eefd` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 2.09:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--blue-hover` - **Background token candidates**: `--blue-bg` - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(4) > .pairing-card__eyebrow` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 128. `#cae7d1` on `#299f45` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.58:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--brand` - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(3) > .pairing-card__eyebrow` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 129. `#ffffff` on `#299f45` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.42:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: `--brand` - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(3) > .pairing-card__copy` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 130. `#3b92df` on `#e1eefd` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.80:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--blue-bg` - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(4) > .pairing-card__eyebrow` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 131. `#0473d5` on `#e1eefd` (light) - **Scope**: `demo-local` - **Contrast ratio**: 4.03:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--blue` - **Background token candidates**: `--blue-bg` - **Sample selectors** (first 5): - `color: .pairing-card:nth-child(4) > .pairing-card__copy` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 132. `#ffffff` on `#f68512` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 2.53:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--orange`, `--prompt-warning-text` - **Sample selectors** (first 5): - `button: .btn--fill-orange.btn--status-default.btn--icon-no` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 133. `#ffffff` on `#ea4233` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 3.94:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-white`, `--text-heading`, `--text-primary-btn` - **Background token candidates**: `--red`, `--prompt-error-text` - **Sample selectors** (first 5): - `button: .btn--fill-red.btn--status-default.btn--icon-no` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 134. `#bcbcbc` on `#545454` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.98:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `button: .btn--fill-gray.btn--status-default.btn--icon-no` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 135. `#ffffff` on `#f48110` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.62:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `button: .btn--fill-orange.btn--status-default.btn--icon-no` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 136. `#ffffff` on `#e83f30` (light) - **Scope**: `demo-local` - **Contrast ratio**: 4.05:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-white`, `--bg-layer1`, `--bg-topbar`, `--text-primary-btn` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `button: .btn--fill-red.btn--status-default.btn--icon-no` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 137. `#9a9a9a` on `#757575` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.63:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .locale-switch__button--active` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 138. `#959595` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.62:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `icon: .locale-switch__button:nth-child(2)` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 139. `#9a9a9a` on `#767676` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.61:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: _(no exact match in src/tokens/variables.css; possibly inline hex, derived color, or third-party)_ - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .canonical-toggle` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 140. `#299f45` on `#727272` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.40:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--brand` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `icon: .eyebrow` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 141. `#7b7b7b` on `#262626` (dark) - **Scope**: `demo-local` - **Contrast ratio**: 3.57:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-7`, `--text-placeholder`, `--text-grey-dis`, `--icon-placeholder`, `--icon-grey-dis` - **Background token candidates**: `--color-grey-11`, `--bg-layer3` - **Sample selectors** (first 5): - `input-number: input[readonly=""]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 142. `#9e9e9e` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.35:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-6`, `--text-placeholder`, `--text-grey-dis`, `--icon-placeholder`, `--icon-grey-dis` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `input-number: input[readonly=""]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 143. `#e26601` on `#f0f0f0` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.00:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--orange` - **Background token candidates**: `--color-grey-3`, `--bg-layer3`, `--line-border`, `--control-disabled-border`, `--radio-disabled-off-bg` - **Sample selectors** (first 5): - `form-item: .label-required-note` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 144. `#299f45` on `#2f2f2f` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.91:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--brand` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `badge: .canonical-badge--line[data-figma-member="4895:1371"][data-figma-color="Green"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 145. `#0473d5` on `#2f2f2f` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.81:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--blue` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `badge: .canonical-badge--line[data-figma-member="4895:1373"][data-figma-color="Blue"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 146. `#e26601` on `#2f2f2f` (light) - **Scope**: `demo-local` - **Contrast ratio**: 3.91:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--orange` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `badge: .canonical-badge--line[data-figma-member="4895:1375"][data-figma-color="Orange"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 147. `#dc2717` on `#2f2f2f` (light) - **Scope**: `demo-local` - **Contrast ratio**: 2.77:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--red` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `badge: .canonical-badge--line[data-figma-member="4895:1377"][data-figma-color="Red"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ### 148. `#141414` on `#2f2f2f` (light) - **Scope**: `demo-local` - **Contrast ratio**: 1.37:1 | **Required**: 4.5:1:1 - **Occurrences**: 1 node - **Foreground token candidates**: `--color-grey-13`, `--text-body` - **Background token candidates**: _(no exact match)_ - **Sample selectors** (first 5): - `badge: .canonical-badge--line[data-figma-member="4993:1553"][data-figma-color="Neutral"]` **Action**: - [ ] (a) rewire selector to use `var(--token)` from src/tokens/variables.css - [ ] (b) replace ad-hoc demo styling with library component - [ ] (c) accept — docs chrome decorative, not WCAG-bound --- ## Summary by token (most-impacted) | Token | Total failing nodes | |---|---| | `--color-grey-9` | 1007 | | `--text-2` | 1007 | | `--text-grey-en` | 1007 | | `--icon-active` | 1007 | | `--text-grey-hv` | 1007 | | `--color-grey-13` | 715 | | `--text-body` | 709 | | `--text-heading` | 409 | | `--color-grey-14` | 354 | | `--bg-layer2` | 223 | | `--color-grey-2` | 222 | | `--bg-layer3` | 164 | | `--line-border` | 146 | | `--color-grey-3` | 142 | | `--control-disabled-border` | 142 | | `--radio-disabled-off-bg` | 142 | | `--color-grey-8` | 122 | | `--text-tips` | 118 | | `--icon-default` | 118 | | `--color-white` | 98 | | `--text-primary-btn` | 98 | | `--brand` | 84 | | `--text-placeholder` | 83 | | `--text-grey-dis` | 83 | | `--icon-placeholder` | 83 | | `--icon-grey-dis` | 83 | | `--bg-layer1` | 49 | | `--color-grey-6` | 43 | | `--text-disabled` | 43 | | `--icon-disabled` | 43 |