123 lines
6.9 KiB
Gherkin
123 lines
6.9 KiB
Gherkin
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 |
|