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 |