# Component Attributes Audit

> Generated by `pnpm audit:component-attributes`.
> Scope: published-vs-code matched components only. This is an audit-only baseline; it is not a strict release gate.

## Summary

| Metric | Value |
|---|---:|
| Checked at | 2026-05-19T06:33:29.947Z |
| Components checked | 38 |
| Variants checked | 4037 |
| Total findings | 6515 |
| Non-allowlisted findings | 2626 |
| Allowlisted findings | 3889 |

## By Category

- size-drift: 695
- padding-drift: 224
- gap-drift: 144
- opacity-drift: 288
- color-token-missing: 1857
- size-mode-mismatch: 162
- color-token-mismatch: 758 (exact 0, theme-asymmetric 152, non-equivalent 606)

## By Severity

- blocker: 4344
- drift: 2171

## Top 20 Findings

| Severity | Category | Component | Variant | Selector | Figma | Code |
|---|---|---|---|---|---|---|
| blocker | color-token-mismatch | Drop down List/Cascading | Dark Theme=on, Type=Multi | .dropdown-item__check--checked | --color-grey-10 | --brand |
| blocker | size-drift | Drop down List/Cascading | Dark Theme=off, Type=Multi | .dropdown-select | 480 | 240px |
| blocker | size-drift | Drop down List/Cascading | Dark Theme=off, Type=Multi | .dropdown-item__check | 160 | 14px |
| blocker | size-drift | Drop down List/Cascading | Dark Theme=off, Type=Radio | .dropdown-select | 480 | 240px |
| blocker | size-drift | Drop down List/Cascading | Dark Theme=off, Type=Radio | .dropdown-item__check | 160 | 14px |
| blocker | size-drift | Drop down List/Cascading | Dark Theme=on, Type=Multi | .dropdown-select | 482 | 240px |
| blocker | size-drift | Drop down List/Cascading | Dark Theme=on, Type=Multi | .dropdown-item__check | 160 | 14px |
| blocker | size-drift | Drop down List/Cascading | Dark Theme=on, Type=Radio | .dropdown-select | 482 | 240px |
| blocker | size-drift | Drop down List/Cascading | Dark Theme=on, Type=Radio | .dropdown-item__check | 160 | 14px |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=Yes | .dropdown-item__check--checked | --brand-match | --brand |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No | .dropdown-item--disabled | --text-disabled | --control-disabled-text |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=Yes | .dropdown-item__check--checked | --brand-match | --brand |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No | .dropdown-item__check--checked | --text-disabled | --text-primary-btn |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=Yes | .dropdown-item__check--checked | --brand-match | --brand |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=Yes | .dropdown-item__check--checked | --text-disabled | --text-primary-btn |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=Yes, Disabled=No, Hover=Yes | .dropdown-item__check--checked | --brand-match | --brand |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=No, Hover=Yes | .dropdown-item__check--checked | --brand-match | --brand |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=Yes, Checked=No, Active=No, Disabled=Yes, Hover=No | .dropdown-item--disabled | --text-disabled | --control-disabled-text |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=No, Hover=Yes | .dropdown-item__check--checked | --brand-match | --brand |
| blocker | color-token-mismatch | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=Yes, Checked=Yes, Active=No, Disabled=Yes, Hover=No | .dropdown-item__check--checked | --text-disabled | --text-primary-btn |


## Allowlisted Findings

| Severity | Category | Component | Variant | Selector | Figma | Code |
|---|---|---|---|---|---|---|
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=default, radius=round, fixed width=no | .btn | --color-grey-9 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=default, radius=round, fixed width=no | .btn | --color-grey-5 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=default, radius=round, fixed width=yes | .btn | --color-grey-9 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=default, radius=round, fixed width=yes | .btn | --color-grey-5 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=default, radius=square, fixed width=no | .btn | --color-grey-9 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=default, radius=square, fixed width=no | .btn | --color-grey-5 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=default, radius=square, fixed width=yes | .btn | --color-grey-9 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=default, radius=square, fixed width=yes | .btn | --color-grey-5 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=disable, radius=round, fixed width=no | .btn | --color-grey-9 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=disable, radius=round, fixed width=no | .btn | --color-grey-7 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=disable, radius=round, fixed width=yes | .btn | --color-grey-9 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=disable, radius=round, fixed width=yes | .btn | --color-grey-7 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=disable, radius=square, fixed width=no | .btn | --color-grey-9 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=disable, radius=square, fixed width=no | .btn | --color-grey-7 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=disable, radius=square, fixed width=yes | .btn | --color-grey-9 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=disable, radius=square, fixed width=yes | .btn | --color-grey-7 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=hover, radius=round, fixed width=no | .btn | --color-grey-8 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=hover, radius=round, fixed width=no | .btn | --color-grey-5 | --btn-color |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=hover, radius=round, fixed width=yes | .btn | --color-grey-8 | --btn-bg |
| blocker | color-token-mismatch | Button/dark L | icon=left, style=filling, color=gray 1, status=hover, radius=round, fixed width=yes | .btn | --color-grey-5 | --btn-color |


## Color Token Mismatch — by equivalence (R1)

| Equivalence | Count | Severity |
|---|---:|---|
| exact (audit sanity, expect 0) | 0 | info |
| theme-asymmetric | 152 | drift |
| non-equivalent | 606 | blocker |


### Top 30 non-equivalent (R1 真 fix 目标清单)

| Count | Component | Variant | Selector | Figma | Code | Resolved (dark/light) |
|---:|---|---|---|---|---|---|
| 72 | select box/filled | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | .select-wrap--filled .select-chip | --color-white | --bg-layer3 | --bg-layer3: light=#f0f0f0 |
| 72 | select box/filled | dark theme=on, status=default, enable=off, UX=default, size=L, feature=date | .select-wrap--filled .select-chip | --color-grey-10 | --bg-layer3 | --bg-layer3: dark=#262626 |
| 38 | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=Yes | .dropdown-item__check--checked | --brand-match | --brand | --brand: dark=#2fb54e |
| 18 | select box/filled | dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default | .dropdown-item--disabled | --color-grey-13 | --control-disabled-text | --control-disabled-text: light=#cccccc |
| 18 | select box/filled | dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default | .dropdown-item--disabled | --color-grey-2 | --control-disabled-text | --control-disabled-text: dark=#595959 |
| 18 | select box/line | dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default | .dropdown-item--disabled | --color-grey-13 | --control-disabled-text | --control-disabled-text: light=#cccccc |
| 18 | select box/line | dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default | .dropdown-item--disabled | --color-grey-2 | --control-disabled-text | --control-disabled-text: dark=#595959 |
| 16 | input box/filled | dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no | .input-clear-icon | --color-grey-13 | --text-tips | --text-tips: light=#595959 |
| 16 | input box/line | dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no | .input-clear-icon | --color-grey-13 | --text-tips | --text-tips: light=#595959 |
| 16 | input box/line | dark theme=on, status=default, enable=on, UX=click, size=L, feature=no | .input-clear-icon | --color-grey-7 | --text-tips | --text-tips: dark=#9e9e9e |
| 16 | input box/line | dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no | .input-clear-icon | --color-grey-2 | --text-tips | --text-tips: dark=#9e9e9e |
| 14 | select box/line | dark theme=on, status=default, enable=off, UX=default, size=L, feature=date | .select-wrap--error .select-trigger | --color-grey-8 | --red | --red: dark=#ea4233 |
| 14 | select box/line | dark theme=on, status=default, enable=off, UX=default, size=M, feature=date | .dropdown-item__check--checked | --color-grey-8 | --brand | --brand: dark=#2fb54e |
| 13 | select box/line | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | .select-wrap--error .select-trigger | --color-grey-5 | --red | --red: light=#dc2717 |
| 13 | select box/line | dark theme=off, status=default, enable=off, UX=default, size=M, feature=date | .dropdown-item__check--checked | --color-grey-5 | --brand | --brand: light=#299f45 |
| 12 | Drop down List/Item | Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No | .dropdown-item--disabled | --text-disabled | --control-disabled-text | --control-disabled-text: dark=#595959 |
| 12 | input box/filled | dark theme=on, status=default, enable=on, UX=click, size=L, feature=no | .input-clear-icon | --color-grey-7 | --text-tips | --text-tips: dark=#9e9e9e |
| 12 | input box/filled | dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no | .input-clear-icon | --color-grey-2 | --text-tips | --text-tips: dark=#9e9e9e |
| 11 | select box/filled | dark theme=off, status=default, enable=on, UX=click, size=L, feature=default | .dropdown-item--disabled | --color-grey-6 | --control-disabled-text | --control-disabled-text: light=#cccccc |
| 11 | select box/filled | dark theme=off, status=default, enable=on, UX=click, size=M, feature=default | .dropdown-item | --color-grey-6 | --text-body | --text-body: light=#141414 |
| 11 | select box/filled | dark theme=on, status=default, enable=on, UX=click, size=L, feature=default | .dropdown-item--disabled | --color-grey-7 | --control-disabled-text | --control-disabled-text: dark=#595959 |
| 11 | select box/line | dark theme=off, status=default, enable=on, UX=click, size=L, feature=default | .dropdown-item--disabled | --color-grey-6 | --control-disabled-text | --control-disabled-text: light=#cccccc |
| 11 | select box/line | dark theme=off, status=default, enable=on, UX=click, size=M, feature=default | .dropdown-item | --color-grey-6 | --text-body | --text-body: light=#141414 |
| 9 | input box/line | dark theme=off, status=normal, enable=off, UX=default, size=XL, feature=text count | .input-feature-icon | --color-grey-13 | --text-tips | --text-tips: light=#595959 |
| 9 | select box/filled | dark theme=on, status=default, enable=on, UX=default, size=M, feature=date | .dropdown-item | --color-grey-7 | --text-body | --text-body: dark=#f8f8f8 |
| 9 | select box/line | dark theme=on, status=default, enable=on, UX=default, size=L, feature=date | .dropdown-item--disabled | --color-grey-7 | --control-disabled-text | --control-disabled-text: dark=#595959 |
| 9 | select box/line | dark theme=on, status=default, enable=on, UX=default, size=M, feature=date | .dropdown-item | --color-grey-7 | --text-body | --text-body: dark=#f8f8f8 |
| 8 | input box/filled | dark theme=off, status=normal, enable=on, UX=click, size=M, feature=yes | .input-feature-icon | --color-grey-13 | --text-tips | --text-tips: light=#595959 |
| 8 | input box/line | dark theme=on, status=default, enable=on, UX=click, size=M, feature=yes | .input-feature-icon | --color-grey-7 | --text-tips | --text-tips: dark=#9e9e9e |
| 8 | input box/line | dark theme=on, status=normal, enable=on, UX=click, size=M, feature=yes | .input-feature-icon | --color-grey-2 | --text-tips | --text-tips: dark=#9e9e9e |


### Theme-asymmetric (需要拍板：Figma 漏绑某 theme，或 code 引用过宽)

| Count | Component | Variant | Selector | Figma | Code | Resolved (dark/light) | Equivalent Theme |
|---:|---|---|---|---|---|---|---|
| 18 | select box/filled | dark theme=off, status=multi select, enable=on, UX=click, size=M, feature=default | .dropdown-item | --color-grey-13 | --text-body | --text-body: light=#141414 | light |
| 18 | select box/filled | dark theme=on, status=multi select, enable=on, UX=click, size=M, feature=default | .dropdown-item | --color-grey-2 | --text-body | --text-body: dark=#f8f8f8 | dark |
| 18 | select box/line | dark theme=off, status=multi select, enable=on, UX=click, size=M, feature=default | .dropdown-item | --color-grey-13 | --text-body | --text-body: light=#141414 | light |
| 18 | select box/line | dark theme=on, status=multi select, enable=on, UX=click, size=M, feature=default | .dropdown-item | --color-grey-2 | --text-body | --text-body: dark=#f8f8f8 | dark |
| 16 | input box/line | dark theme=off, status=default, enable=on, UX=click, size=L, feature=no | .input-clear-icon | --color-grey-6 | --text-tips | --text-tips: light=#595959 | dark |
| 15 | input box/filled | dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes | .input-clear-icon | --color-grey-6 | --text-tips | --text-tips: light=#595959 | dark |
| 9 | Drop down List/Item | Theme=Light, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No | .dropdown-item | --color-grey-13 | --text-body | --text-body: light=#141414 | light |
| 8 | input box/filled | dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes | .input-feature-icon | --color-grey-6 | --text-tips | --text-tips: light=#595959 | dark |
| 8 | input box/line | dark theme=off, status=default, enable=on, UX=click, size=M, feature=yes | .input-feature-icon | --color-grey-6 | --text-tips | --text-tips: light=#595959 | dark |
| 5 | select box/line | dark theme=on, status=default, enable=off, UX=default, size=L, feature=date | .dropdown-item--disabled | --color-grey-8 | --control-disabled-text | --control-disabled-text: dark=#595959 | dark |
| 4 | input box/line | dark theme=on, status=default, enable=off, UX=default, size=L, feature=no | .input-clear-icon | --color-grey-8 | --text-tips | --text-tips: dark=#9e9e9e | light |
| 3 | select box/filled | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | .dropdown-item--disabled | --color-grey-5 | --control-disabled-text | --control-disabled-text: light=#cccccc | light |
| 3 | select box/filled | dark theme=on, status=default, enable=off, UX=default, size=L, feature=date | .dropdown-item--disabled | --color-grey-8 | --control-disabled-text | --control-disabled-text: dark=#595959 | dark |
| 2 | Drop down List/Cascading | Dark Theme=off, Type=Multi | .dropdown-item | --color-grey-13 | --text-body | --text-body: light=#141414 | light |
| 2 | input box/filled | dark theme=on, status=default, enable=off, UX=default, size=L, feature=no | .input-clear-icon | --color-grey-8 | --text-tips | --text-tips: dark=#9e9e9e | light |
| 2 | input box/line | dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count | .input-feature-icon | --color-grey-8 | --text-tips | --text-tips: dark=#9e9e9e | light |
| 2 | select box/line | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | .dropdown-item--disabled | --color-grey-5 | --control-disabled-text | --control-disabled-text: light=#cccccc | light |
| 1 | input box/filled | dark theme=on, status=default, enable=off, UX=default, size=XL, feature=text count | .input-feature-icon | --color-grey-8 | --text-tips | --text-tips: dark=#9e9e9e | light |


## Boundary Notes

- Current components-tokenized extracts are variant-root centric. Nested subnodes such as Select multi-select chips are not present as first-class nodes, so chip-level findings depend on CSS selector heuristics and cannot be treated as exhaustive.
- Selector to variant matching is heuristic. It scores selectors by role words, variant axis values, pseudo-state hints, and family modifiers such as --filled/--line.
- Semantic code tokens that resolve to the same hex as primitive Figma tokens are still reported when the token name is not an explicit token-aliases match, because this audit is intended to catch wrong token references.
- Dimension checks skip auto, percent, max-content, and unresolved calculated values; these are candidates for future manual review rather than hard findings in this baseline.