GUI consistency: no density token scope and no part contracts, so views hand-roll spacing and reach into primitive internals #17564

Part of #12730. Two mechanisms the shared primitives do not expose, both of which push views into hand-rolling the thing the umbrella wants standardised.

Problem 1 — there is no density scope

autobot-frontend has a large token layer (src/assets/css/design-tokens.css, 698 custom properties) but spacing density is not part of it. --card-padding is declared once; there is no --table-row-height, no --table-cell-py, and no density scope class. So every table and card carries literal spacing, and a user-facing compact/comfortable/spacious control is not expressible without touching every component.

The mechanism that avoids per-component size props entirely is a scope class on an ancestor that redefines a handful of spacing tokens — four is enough (--table-row-height, --table-cell-py, --card-padding, --spacing-unit). Components consume var(--…) and never learn density exists.

Problem 2 — composite primitives have no addressable parts

Cards, tables and panels expose no named internal parts. A view that must restyle a card header or a table cell therefore reaches in with its own class — and each reach is a fresh divergence that no linter sees, because the class is locally valid.

A part-contract convention (a stable data-slot="card-header"-style attribute on each internal region, targeted by the stylesheet) makes the internals a declared API instead of an accident of DOM shape.

Both are cheap once the primitives are single-sourced, and both are wasted effort before that — hence the dependency below.

Approach

1. Add the four density tokens to design-tokens.css with the current values as the comfortable default, so nothing moves on landing.
2. Add .density-compact / .density-comfortable / .density-spacious scope classes that redefine only those tokens.
3. Make the kit's card and table primitives consume the tokens instead of literal spacing.
4. Define the part-name convention in the kit's docs, apply it to the primitives merged by Retire the local Base* component forks in autobot-frontend into the shared kit #14776/Promote BaseInput, BasePanel and BaseTable into the shared kit #14778, and state that a part name is a public API — renaming one is a breaking change.
5. Do not retrofit part names ad hoc onto unmerged forks; that is how a third namespace starts.

Acceptance criteria

• --table-row-height, --table-cell-py, --card-padding, --spacing-unit declared in design-tokens.css, with the comfortable values equal to today's rendering (no visual diff).
• Three density scope classes exist and redefine only those tokens.
• The kit's card and table primitives reference the tokens, with no literal padding or row height remaining.
• Switching the scope class on an ancestor visibly changes table row height and card padding, with zero component prop changes (test or story).
• The part-name convention is documented in the kit, and every primitive merged by Retire the local Base* component forks in autobot-frontend into the shared kit #14776/Promote BaseInput, BasePanel and BaseTable into the shared kit #14778 carries part names on its internal regions.

Implementation Order

Wave: 3
Depends on: #14776, #14778, #14785
Unblocks: —

Evidence

src/assets/css/design-tokens.css — 698 --var: declarations, --card-padding declared once, no row-height or cell-padding token · no part-name attribute convention anywhere in libs/autobot-ui or autobot-frontend/src/components.

Found during a comparative GUI-standardisation audit — see docs/research/dashboard-shell-and-component-standardisation.md, gaps G3 and G4.