# Theme Consistency Tests

## Overview

This directory contains property-based tests for the Admin UI Modernization feature, specifically testing theme consistency across dark and light modes.

## Test Files

### 1. `verify_theme.js` (Node.js)
A command-line verification script that checks:
- All required CSS custom properties are defined in dark theme
- All required overrides are defined in light theme
- Property naming consistency

**Run with:**
```bash
npm run test:theme
```

or directly:
```bash
node tests/verify_theme.js
```

### 2. `test_theme_consistency.html` (Browser-based)
An interactive HTML test page that performs comprehensive testing:
- Required CSS custom properties verification
- WCAG AA contrast ratio testing (4.5:1 for normal text)
- Property-based theme switching simulation (100 iterations)
- Visual color swatches and contrast demonstrations

**Run with:**
Open the file in a web browser:
```
file:///path/to/tests/test_theme_consistency.html
```

Or serve it with a local server:
```bash
python -m http.server 8888
# Then open: http://localhost:8888/tests/test_theme_consistency.html
```

## Property Being Tested

**Property 1: Theme consistency**

*For any* theme mode (light/dark), all CSS custom properties should be defined and color contrast ratios should meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text)

**Validates:** Requirements 1.4, 5.3, 14.3

## Required Properties

The tests verify that the following CSS custom properties are defined:

### Colors
- `color-primary`, `color-accent`, `color-success`, `color-warning`, `color-error`
- `bg-primary`, `bg-secondary`
- `text-primary`, `text-secondary`
- `glass-bg`, `glass-border`, `border-color`

### Gradients
- `gradient-primary`, `gradient-glass`

### Typography
- `font-family-primary`, `font-size-base`, `font-weight-normal`
- `line-height-normal`, `letter-spacing-normal`

### Spacing
- `spacing-xs`, `spacing-sm`, `spacing-md`, `spacing-lg`, `spacing-xl`

### Shadows
- `shadow-sm`, `shadow-md`, `shadow-lg`

### Blur
- `blur-sm`, `blur-md`, `blur-lg`

### Transitions
- `transition-fast`, `transition-base`, `ease-in-out`

## Light Theme Overrides

The light theme must override these properties:
- `bg-primary`, `bg-secondary`
- `text-primary`, `text-secondary`
- `glass-bg`, `glass-border`, `border-color`

## WCAG AA Contrast Requirements

- **Normal text:** 4.5:1 minimum contrast ratio
- **Large text:** 3.0:1 minimum contrast ratio

The tests verify these combinations:
- Primary text on primary background
- Secondary text on primary background
- Primary text on secondary background

## Test Results

✓ **PASSED** - All tests passed successfully
- All required CSS custom properties are defined
- Light theme overrides are properly configured
- Contrast ratios meet WCAG AA standards

## Implementation Details

The design tokens are defined in:
```
static/css/design-tokens.css
```

This file contains:
- `:root` selector for dark theme (default)
- `[data-theme="light"]` selector for light theme overrides