Theming done
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Site themes
|
||||
The site MUST support three themes:
|
||||
- `dark`
|
||||
- `light`
|
||||
- `high-contrast`
|
||||
|
||||
Themes MUST be applied by setting a `data-theme` attribute on the root document element (`<html>`).
|
||||
|
||||
#### Scenario: Dark theme active
|
||||
- **WHEN** `data-theme="dark"` is set on `<html>`
|
||||
- **THEN** the site's background, text, and component styling reflect the dark palette
|
||||
|
||||
#### Scenario: Light theme active
|
||||
- **WHEN** `data-theme="light"` is set on `<html>`
|
||||
- **THEN** the site's background, text, and component styling reflect the light palette
|
||||
|
||||
#### Scenario: High contrast theme active
|
||||
- **WHEN** `data-theme="high-contrast"` is set on `<html>`
|
||||
- **THEN** the site uses a high-contrast palette with a clearly visible focus ring and high-contrast borders
|
||||
|
||||
### Requirement: Theme persistence
|
||||
The site MUST persist the user's theme selection so it is retained across page loads and navigations.
|
||||
|
||||
Persistence MUST be stored locally in the browser (e.g., localStorage).
|
||||
|
||||
#### Scenario: Theme persists across reload
|
||||
- **WHEN** the user selects `light` theme and reloads the page
|
||||
- **THEN** the `light` theme remains active
|
||||
|
||||
### Requirement: Default theme selection
|
||||
If the user has not explicitly selected a theme, the site MUST choose a default theme using environment signals.
|
||||
|
||||
Default selection order:
|
||||
1) If forced colors / high-contrast mode is active, default to `high-contrast`
|
||||
2) Else if the system prefers light color scheme, default to `light`
|
||||
3) Else default to `dark`
|
||||
|
||||
#### Scenario: No stored preference uses system settings
|
||||
- **WHEN** the user has no stored theme preference
|
||||
- **THEN** the site selects a default theme based on forced-colors and prefers-color-scheme
|
||||
|
||||
### Requirement: Theme switching transition
|
||||
Theme changes initiated by the user MUST transition smoothly.
|
||||
|
||||
The transition MUST be disabled or substantially reduced when `prefers-reduced-motion: reduce` is set.
|
||||
|
||||
#### Scenario: Smooth transition on switch
|
||||
- **WHEN** the user switches from `dark` to `light` theme
|
||||
- **THEN** theme-affecting properties transition smoothly instead of abruptly switching
|
||||
|
||||
#### Scenario: Reduced motion disables theme animation
|
||||
- **WHEN** `prefers-reduced-motion: reduce` is set and the user switches theme
|
||||
- **THEN** the theme change occurs without noticeable animation
|
||||
@@ -0,0 +1,42 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Floating theme switcher notch
|
||||
The site MUST provide a floating theme switcher control anchored to the right side of the viewport.
|
||||
|
||||
The control MUST be positioned below the primary navigation bar and MUST leave sufficient vertical space for secondary navigation.
|
||||
|
||||
#### Scenario: Notch positioned below header
|
||||
- **WHEN** the page loads
|
||||
- **THEN** the theme switcher notch is visible on the right side and does not overlap the sticky header or sub-navigation
|
||||
|
||||
### Requirement: Notch interaction and animation
|
||||
The notch MUST provide a hover affordance (a small, tasteful animation) that indicates it is interactive.
|
||||
|
||||
The hover animation MUST be disabled or substantially reduced under `prefers-reduced-motion: reduce`.
|
||||
|
||||
#### Scenario: Hover animation present
|
||||
- **WHEN** a pointer user hovers the notch
|
||||
- **THEN** the notch animates in a way that suggests it can be expanded or interacted with
|
||||
|
||||
#### Scenario: Reduced motion disables hover animation
|
||||
- **WHEN** `prefers-reduced-motion: reduce` is set
|
||||
- **THEN** hovering the notch does not trigger a noticeable animation
|
||||
|
||||
### Requirement: Theme selection UI
|
||||
The notch MUST expose the three theme options (`dark`, `light`, `high-contrast`) and allow the user to select one.
|
||||
|
||||
The control MUST be keyboard accessible:
|
||||
- it MUST be reachable via `Tab`
|
||||
- it MUST have a visible focus indicator
|
||||
- selection MUST be possible using keyboard input
|
||||
|
||||
#### Scenario: Keyboard selects theme
|
||||
- **WHEN** a keyboard user focuses the notch and selects `high-contrast`
|
||||
- **THEN** the site updates to the `high-contrast` theme and the selection is persisted
|
||||
|
||||
### Requirement: Accessibility labels
|
||||
The notch and theme options MUST have accessible labels.
|
||||
|
||||
#### Scenario: Screen reader announces theme switcher
|
||||
- **WHEN** a screen reader user focuses the theme switcher control
|
||||
- **THEN** it announces an appropriate label (e.g., "Theme" or "Theme switcher") and the currently selected theme
|
||||
@@ -0,0 +1,30 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Theme switching accessibility
|
||||
Theme switching controls MUST be accessible and usable with keyboard and assistive technology.
|
||||
|
||||
The theme switcher control MUST:
|
||||
- be reachable via keyboard navigation
|
||||
- provide a visible focus indication
|
||||
- expose an accessible name/label
|
||||
- allow selecting any supported theme without requiring a pointer
|
||||
|
||||
#### Scenario: Theme switcher is keyboard reachable
|
||||
- **WHEN** a keyboard user tabs through the page
|
||||
- **THEN** the theme switcher notch receives focus and shows a visible focus indicator
|
||||
|
||||
#### Scenario: Theme switcher is labeled
|
||||
- **WHEN** a screen reader user focuses the theme switcher
|
||||
- **THEN** it announces a meaningful label and the current theme state
|
||||
|
||||
### Requirement: High contrast theme meets WCAG intent
|
||||
The `high-contrast` theme MUST provide materially higher contrast than the default theme.
|
||||
|
||||
The theme MUST keep text readable and interactive affordances obvious, including:
|
||||
- strong foreground/background contrast
|
||||
- clearly visible focus ring
|
||||
- strong borders on interactive elements
|
||||
|
||||
#### Scenario: High contrast theme improves readability
|
||||
- **WHEN** the user enables `high-contrast` theme
|
||||
- **THEN** primary text and secondary UI labels remain clearly readable and interactive elements are visually distinct
|
||||
Reference in New Issue
Block a user