fsylvain/RenewCMS
1
1 Fork 0
Code Issues Pull Requests Packages Projects Releases 19 Wiki Activity

fix: small design harmonization and overhaul

Browse Source
This commit is contained in:
Florian Sylvain committed 2026-10-11 17:17:22 +02:00
1 parent d6566743a7
commit a2d224240c
9 files changed
+612 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

features/shell_tokens_and_nav_contrast.feature
+122
View File
@@ -0,0 +1,122 @@
Feature: Shell design tokens and selected nav contrast
As the maintainer of RenewCMS
I want the new --rc-* tokens in the SPA and every selected nav item drawn in sand with on-sand text
So that the sidebar and drawer stay readable in both themes and match docs/design
Background:
Given web/src/assets/main.css declares the --rc-* tokens of docs/design/foundations.md
"New tokens", light values in :root and dark values in .dark
And DashboardShell renders the nav from web/src/components/DashboardShell.vue, with "Settings"
as the parent row (/settings) and a "Media" group holding "Variants"
(/settings/media/variants) and "Cache" (/settings/media/cache)
And the session role is "owner", so the Settings children are present
And a selected row is a link whose route is current, carrying aria-current="page"
Scenario Outline: The new tokens exist with the values given in foundations.md
When web/src/assets/main.css is loaded in the <theme> theme
Then <token> resolves to <value>
Examples:
| token | theme | value |
| --rc-sand | light | #e8dfd1 |
| --rc-sand | dark | #d4c5b0 |
| --rc-on-sand | light | #111111 |
| --rc-on-sand | dark | #111111 |
| --rc-success-soft | light | #eaefea |
| --rc-success-soft | dark | #1f241f |
| --rc-info-soft | light | #ebeef0 |
| --rc-info-soft | dark | #202428 |
| --rc-warning-soft | light | #f0ede6 |
| --rc-warning-soft | dark | #2a251e |
| --rc-error-soft | light | #f3eae9 |
| --rc-error-soft | dark | #2c201f |
| --rc-overlay | light | rgb(10 10 10 / 0.4) |
| --rc-overlay | dark | rgb(0 0 0 / 0.6) |
| --rc-shadow-pop | light | 0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06) |
| --rc-shadow-pop | dark | 0 4px 16px rgb(0 0 0 / 0.5) |
| --rc-shadow-modal | light | 0 16px 48px rgb(17 17 17 / 0.18) |
| --rc-shadow-modal | dark | 0 16px 48px rgb(0 0 0 / 0.6) |
Scenario: No --ui-* token and no --rc-canvas are introduced
When web/src/assets/main.css is compared with docs/design/foundations.md
Then no --ui-* token value is changed
And --rc-canvas is not declared
Scenario Outline: N1 Parent selected: Settings is filled in sand with on-sand text and icon
Given the current route is /settings
And the theme is <theme>
When DashboardShell renders the desktop sidebar
Then the "Settings" row has aria-current="page"
And its background is --rc-sand and its label and icon colour are --rc-on-sand
And the "Media" group is visible with "Variants" and "Cache" unselected
And neither child row uses --rc-sand
Examples:
| theme |
| light |
| dark |
Scenario Outline: N2 and N3 Child selected: the child is filled and the parent is unfilled and bold
Given the current route is <path>
And the theme is <theme>
When DashboardShell renders the desktop sidebar
Then the "<child>" row has aria-current="page", background --rc-sand and label and icon colour --rc-on-sand
And the "Settings" row is not filled, has no aria-current, uses --ui-text-highlighted at weight 500 and shows the chevron pointing down
And the other child row is not filled
Examples:
| path | child | theme |
| /settings/media/variants | Variants | light |
| /settings/media/variants | Variants | dark |
| /settings/media/cache | Cache | light |
| /settings/media/cache | Cache | dark |
Scenario Outline: Hover, focus and active on a selected row keep sand and on-sand
Given the "<row>" row is selected on <path>
And the theme is <theme>
When the row is <interaction>
Then its background stays --rc-sand and its label and icon colour stay --rc-on-sand
And no white or --ui-text-muted colour is applied to its label or icon
Examples:
| row | path | interaction | theme |
| Settings | /settings | hovered | dark |
| Settings | /settings | focus-visible | dark |
| Settings | /settings | pressed | dark |
| Settings | /settings | hovered | light |
| Variants | /settings/media/variants | hovered | dark |
| Variants | /settings/media/variants | pressed | light |
| Cache | /settings/media/cache | focus-visible | dark |
Scenario: Focus on a selected row adds a 2 px --ui-primary outline
Given the "Settings" row is selected on /settings
When the row receives keyboard focus
Then it has a 2 px --ui-primary focus outline
And its background is still --rc-sand
Scenario Outline: N4 and N5 The mobile drawer uses the same selected treatment
Given the viewport is 390 x 844 and the theme is <theme>
And the current route is <path>
When the Menu button is activated
Then the drawer rows are 44 px tall
And the "<selected>" row has aria-current="page", background --rc-sand and label and icon colour --rc-on-sand
And <parent_state>
Examples:
| path | selected | parent_state | theme |
| /settings | Settings | the Media group lists Variants and Cache, unselected | light |
| /settings | Settings | the Media group lists Variants and Cache, unselected | dark |
| /settings/media/variants | Variants | the "Settings" row is unfilled and bold | light |
| /settings/media/variants | Variants | the "Settings" row is unfilled and bold | dark |
Scenario Outline: Other selected nav items use the same pairing
Given the current route is <path> and the theme is dark
When DashboardShell renders
Then the "<row>" row has background --rc-sand and label and icon colour --rc-on-sand
Examples:
| path | row |
| /home | Home |
| /users | Users |
| /activity | Activity |
features/shell_tokens_and_nav_contrast.qa.md
+37
View File
@@ -0,0 +1,37 @@
# 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.