42 lines
1.6 KiB
Markdown
42 lines
1.6 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: Theme tokens meet contrast intent
|
|
For each supported theme (`dark`, `light`, `high-contrast`), the theme token pairs used for primary text and primary surfaces MUST meet WCAG 2.2 AA contrast intent.
|
|
|
|
At minimum:
|
|
|
|
- primary body text on the primary background MUST be high-contrast
|
|
- link text on the primary background MUST be distinguishable and meet contrast intent
|
|
- secondary labels on the primary background MUST remain readable
|
|
|
|
#### Scenario: Dark theme text is readable
|
|
- **WHEN** `data-theme="dark"` is active
|
|
- **THEN** primary text remains readable against primary surfaces without low-contrast combinations
|
|
|
|
#### Scenario: Dark theme links are readable
|
|
- **WHEN** `data-theme="dark"` is active
|
|
- **THEN** links in common surfaces are readable against their background
|
|
|
|
## MODIFIED 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
|