42 lines
1.9 KiB
Markdown
42 lines
1.9 KiB
Markdown
# MI10 - Theme/Contrast Guidance (Light/Dark/HC Tokens)
|
|
|
|
## Module
|
|
Web
|
|
|
|
## Status
|
|
PARTIALLY_IMPLEMENTED
|
|
|
|
## Description
|
|
Color tokens and focus ring styles exist. Theme transition utilities are implemented. However, the specific theming doc `docs/modules/ui/micro-theme.md` and explicit HC (high-contrast) mode tokens with 4.5:1/3:1 contrast validation were not found as standalone artifacts.
|
|
|
|
## What's Implemented
|
|
- Color tokens and focus ring styles exist in the Angular codebase
|
|
- Theme transition utilities are implemented
|
|
- Dark mode support exists
|
|
|
|
## What's Missing
|
|
- **High-contrast (HC) mode tokens**: No dedicated HC theme with WCAG 4.5:1 (normal text) and 3:1 (large text/icons) validated contrast ratios
|
|
- **Theme specification document**: No `docs/modules/ui/micro-theme.md` formalizing the light/dark/HC token sets
|
|
- **Contrast validation tooling**: No automated CI check validating contrast ratios across all color tokens
|
|
- **HC mode toggle**: No user-facing toggle for high-contrast mode in settings
|
|
|
|
## Implementation Plan
|
|
- Create HC theme token set with WCAG-validated contrast ratios
|
|
- Add contrast ratio validation CI check using color-contrast tooling
|
|
- Add HC mode toggle to user settings
|
|
- Document theme tokens in `docs/modules/ui/micro-theme.md`
|
|
|
|
## E2E Test Plan
|
|
- **Setup**:
|
|
- [ ] Log in with a user that has appropriate permissions
|
|
- [ ] Navigate to the relevant page/section where this feature appears
|
|
- [ ] Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
|
|
- **Core verification**:
|
|
- [ ] Verify the component renders correctly with sample data
|
|
- [ ] Verify interactive elements respond to user input
|
|
- [ ] Verify data is fetched and displayed from the correct API endpoints
|
|
- **Edge cases**:
|
|
- [ ] Verify graceful handling when backend API is unavailable (error state)
|
|
- [ ] Verify responsive layout at different viewport sizes
|
|
- [ ] Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)
|