RenewCMS/features/shell_tokens_and_nav_contrast.qa.md

QA: Shell design tokens and selected nav contrast (SPA only)

No /v1 behaviour changes. There is no httptest part.

Automated (Vitest + Vue Test Utils, task test:web)

Mount DashboardShell with a test router and a resolved session (role "owner"). Mock the /v1 calls the shell issues (/v1/auth/me, and the update-check call if the shell makes one) so none go unmocked. Do not freeze the system date.

1. Token declarations: read web/src/assets/main.css as text; assert each token/theme/value row of the Examples table is declared in :root (light) or .dark (dark), and that --rc-canvas is absent.
2. Parent selected (N1): route /settings; the Settings link has aria-current="page" and the sand and on-sand classes (bg-(--rc-sand), text-(--rc-on-sand), or the equivalent in navUi); the Variants and Cache links have neither.
3. Child selected (N2, N3): routes /settings/media/variants and /settings/media/cache; the child link has the sand classes and aria-current; the Settings link has no sand class, no aria-current, the text-highlighted and font-medium classes, and the chevron open state (rotate-90).
4. Selected-row interaction classes: for the selected link, assert the class list includes the sand and on-sand variants for hover:, focus-visible: and active:, and includes no text-muted, text-white or text-inverted for the active state. Assert the leading icon inherits the on-sand colour.
5. Dark and light: repeat 2 and 3 with the dark class on the document root; assert the same class contract, since the tokens carry the theme.
6. Mobile drawer (N4, N5): open the drawer; assert 44 px row height classes and the same selected contract for /settings and /settings/media/variants.
7. Other routes: /home, /users, /activity selected links have the sand contract.

Visual (task visual:check, gate: every capture within 10 %)

Each state's mocks reuse the board's own sample data from the "Settings navigation" frame in RenewCMS Screens Back-office.dc.html.

• task visual:check -- settings (the Settings screen states in docs/design/screens/settings.md and states.md)
• task visual:check -- image-variants for the nav states N1 to N5 (docs/design/screens/image-variants.md, "Settings navigation"; the screen key in web/visual/states.ts is image-variants).

Each capture is desktop 1440x900 and mobile 390x844, in light and dark. N4 and N5 are the mobile drawer states. None of these states are clock-sensitive.

State	Route / trigger	Must show
N1	/settings	Settings filled in sand, Media group visible, children unselected
N2	/settings/media/variants	Settings unfilled and bold, Variants filled
N3	/settings/media/cache	Settings unfilled and bold, Cache filled
N4	Menu button on /settings	Drawer, 44 px rows, Settings filled
N5	Menu button on /settings/media/variants	Drawer, Variants filled

Manual checks (screenshots cannot cover)

• Keyboard: Tab through the sidebar. The focus ring is 2 px --ui-primary on a selected row, and the sand fill stays.
• Hover and pressed on a selected row in dark mode: the label and icon never turn white or muted.