# 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)