T-7O6M-focus-ring-and-panel-radius

State: planning/proposed · Impact: medium · Complexity: small

Goal

The pane focus ring paints at full accent strength today and every pane corner is square. The shell-chrome direction wants both softened: a subdued ring that still reads as focus, and rounded panel corners as an explicit theme choice rather than a fixed zero.

Today

Location	Role today
packages/ts/ui/app/assets/css/tokens.css	--d-focus-ring-color: var(--d-accent) at full strength; --d-radius-* chrome tokens ride the data-radius axis (sharp/soft/round), with nothing analogous for pane corners
packages/ts/panes/src/Pane.vue	.pane::after paints the focus ring from var(--pane-focus-ring, rgba(59, 130, 246, 0.5)); no radius token on the pane surface
packages/ts/panes/src/tokens.css	Defines --pane-focus-ring and --pane-focus-ring-z; no --pane-radius
packages/ts/app-frame/app/layouts/default.vue	.pane-host bridges --pane-* tokens from --d-* (--pane-bg, --pane-border, --pane-focus-ring: var(--d-focus-ring-color), …); no --pane-radius bridge
packages/ts/ui/app/composables/useAppearance.ts	The panels axis (DPanelIndicator, an open string, default 'auto') drives data-panels, today the collapsed-pane indicator style, not corner rounding
packages/ts/panes/scripts/capture-focus-ring-screenshots.ts	Captures PaneGroup.stories.ts’s focus-ring regression stories to docs/screenshots/focus-ring/, light and dark, from a built Storybook

Proposed

--d-focus-ring-color becomes a reduced-opacity mix of the accent color for the pane ring, while focus-visible keeps full accent strength everywhere else. packages/ts/panes/src/tokens.css gains --pane-radius (default 0, so nothing changes until a host opts in), consumed by Pane.vue’s surface; layouts/default.vue’s .pane-host bridges it from --d-radius-surface under a rounded-corners theme choice. capture-focus-ring-screenshots.ts covers both states, light and dark.

Approach

1. Change --d-focus-ring-color to color-mix(in oklab, var(--d-accent) 45%, transparent) for the pane ring; grep every existing consumer first to confirm none assumes the old full-strength value.
2. packages/ts/panes/src/tokens.css: add --pane-radius: 0 and apply it to the pane surface’s border-radius in Pane.vue.
3. layouts/default.vue’s .pane-host: bridge --pane-radius: var(--d-radius-surface) under the rounded-corners condition.
4. Settle which axis carries the rounded-corners choice: the milestone names a new value on the existing panels axis, but that axis today drives the collapsed-pane indicator style, not corner radius — reusing it overloads one attribute with two unrelated meanings. Resolve before implementing, either as a documented dual-purpose value on panels or as a new, separate appearance axis for pane-corner rounding.
5. Extend capture-focus-ring-screenshots.ts to cover the subdued ring and, once the radius axis is settled, the rounded-corner variant, light and dark.
6. Run the capture script against a built Storybook and commit the new screenshots.

Areas

Area	Note
packages/ts/ui/app/assets/css/tokens.css	--d-focus-ring-color to the subdued color-mix formula
packages/ts/panes/src/tokens.css	Add --pane-radius
packages/ts/panes/src/Pane.vue	Apply --pane-radius to the pane surface
packages/ts/app-frame/app/layouts/default.vue	Bridge --pane-radius from --d-radius-surface
packages/ts/ui/app/composables/useAppearance.ts	The rounded-corners axis or value, per the Approach’s open decision
packages/ts/panes/scripts/capture-focus-ring-screenshots.ts	Cover the new ring and radius variants

Acceptance criteria

• AC-1: The pane focus ring renders at reduced opacity against the accent color; focus-visible elsewhere is unchanged.
• AC-2: A pane’s corners render rounded when the new theme choice is set, and square, unchanged, when it is not.
• AC-3: capture-focus-ring-screenshots.ts produces light and dark screenshots of both the subdued ring and the rounded-corner variant under docs/screenshots/focus-ring/.
• AC-4: No existing consumer of --d-focus-ring-color regresses, checked by grep and the package’s own tests and stories.

Out of scope

• The --d-radius-xs…lg component scale or the existing data-radius chrome axis; only the pane surface gains a new token.
• Restyling the collapsed-indicator styles the panels axis already drives.

Dependencies

• T-PL39-stories-shell-chrome-directions mocks the subdued ring and rounded corners as a theme variant.
• S-0010-design-language-consumption: tokens only, no per-experience palette.

Discovery context

From the user’s planning request of 2026-09-07.

---

← Back to Tasks