stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 12 Releases Wiki Activity
Files
8768c27f30d4849b4f983ee6121d710c5eba9992
git.stella-ops.org/docs/modules/ui/micro-theme.md
StellaOps Bot 8768c27f30
Some checks failed
Docs CI / lint-and-preview (push) Has been cancelled
Details
Signals DSSE Sign & Evidence Locker / sign-signals-artifacts (push) Has been cancelled
Details
Signals DSSE Sign & Evidence Locker / verify-signatures (push) Has been cancelled
Details
Add signal contracts for reachability, exploitability, trust, and unknown symbols 
- Introduced `ReachabilityState`, `RuntimeHit`, `ExploitabilitySignal`, `ReachabilitySignal`, `SignalEnvelope`, `SignalType`, `TrustSignal`, and `UnknownSymbolSignal` records to define various signal types and their properties.
- Implemented JSON serialization attributes for proper data interchange.
- Created project files for the new signal contracts library and corresponding test projects.
- Added deterministic test fixtures for micro-interaction testing.
- Included cryptographic keys for secure operations with cosign.
2025-12-05 00:27:00 +02:00

4.0 KiB
Raw Blame History

UI Micro-Interaction Theme & Contrast Guidance (MI10)

This document defines theme tokens and contrast requirements for micro-interactions across light, dark, and high-contrast modes.

Color Contrast Requirements

Element Type Minimum Contrast Ratio WCAG Level
Normal text (< 18px) 4.5:1 AA
Large text (>= 18px bold or >= 24px) 3:1 AA
UI components (borders, icons) 3:1 AA
Focus indicators 3:1 AA
Status colors on background 3:1 AA

Theme Token Reference

Light Theme (Default)

:root {
  /* Backgrounds */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8fafc;
  --theme-bg-elevated: #ffffff;
  --theme-bg-overlay: rgba(15, 23, 42, 0.5);

  /* Text */
  --theme-text-primary: #0f172a;     /* 15.42:1 on white */
  --theme-text-secondary: #475569;   /* 7.05:1 on white */
  --theme-text-muted: #94a3b8;       /* 3.21:1 on white - decorative only */
  --theme-text-inverse: #ffffff;

  /* Borders */
  --theme-border-default: #e2e8f0;
  --theme-border-focus: #3b82f6;     /* 4.5:1 on white */
  --theme-border-error: #ef4444;

  /* Status Colors */
  --theme-status-success: #16a34a;   /* 4.52:1 on white */
  --theme-status-warning: #d97706;   /* 4.51:1 on white */
  --theme-status-error: #dc2626;     /* 5.92:1 on white */
  --theme-status-info: #2563eb;      /* 5.28:1 on white */

  /* Focus Ring */
  --theme-focus-ring-color: #3b82f6;
  --theme-focus-ring-width: 2px;
  --theme-focus-ring-offset: 2px;
}

Dark Theme

[data-theme='dark'] {
  /* Backgrounds */
  --theme-bg-primary: #0f172a;
  --theme-bg-secondary: #1e293b;
  --theme-bg-elevated: #334155;
  --theme-bg-overlay: rgba(0, 0, 0, 0.7);

  /* Text */
  --theme-text-primary: #f8fafc;     /* 15.42:1 on dark bg */
  --theme-text-secondary: #cbd5e1;   /* 8.12:1 on dark bg */
  --theme-text-muted: #64748b;
  --theme-text-inverse: #0f172a;

  /* Borders */
  --theme-border-default: #334155;
  --theme-border-focus: #60a5fa;
  --theme-border-error: #f87171;

  /* Status Colors */
  --theme-status-success: #4ade80;
  --theme-status-warning: #fbbf24;
  --theme-status-error: #f87171;
  --theme-status-info: #60a5fa;

  /* Focus Ring */
  --theme-focus-ring-color: #60a5fa;
}

High Contrast Theme

[data-theme='high-contrast'] {
  /* Backgrounds */
  --theme-bg-primary: #000000;
  --theme-bg-secondary: #000000;
  --theme-bg-elevated: #1a1a1a;
  --theme-bg-overlay: rgba(0, 0, 0, 0.9);

  /* Text */
  --theme-text-primary: #ffffff;     /* 21:1 on black */
  --theme-text-secondary: #ffffff;
  --theme-text-muted: #e5e5e5;
  --theme-text-inverse: #000000;

  /* Borders - thicker and higher contrast */
  --theme-border-default: #ffffff;
  --theme-border-focus: #ffff00;     /* Yellow for maximum visibility */
  --theme-border-error: #ff0000;

  /* Status Colors - bold, saturated */
  --theme-status-success: #00ff00;
  --theme-status-warning: #ffff00;
  --theme-status-error: #ff0000;
  --theme-status-info: #00ffff;

  /* Focus Ring - extra visible */
  --theme-focus-ring-color: #ffff00;
  --theme-focus-ring-width: 3px;
  --theme-focus-ring-offset: 3px;
}

Focus Indicator Requirements

  1. Focus ring must be visible in all themes (never outline: none without replacement)
  2. Minimum 2px width, 3:1 contrast with adjacent colors
  3. In high-contrast mode: 3px width, yellow (#ffff00) color
  4. Focus must be visible when using keyboard navigation only

Validation Checklist

  • All text passes 4.5:1 contrast ratio (use axe DevTools)
  • All UI elements pass 3:1 contrast ratio
  • Focus indicators visible in all themes
  • No reliance on color alone for state indication
  • Theme toggle persists user preference
  • Reduced motion settings respected across themes

Testing

Run axe accessibility tests in Storybook:

npm run test:a11y

Run contrast checks in Playwright:

npx playwright test --project=a11y

Evidence

  • Storybook: Theme toggle available in toolbar
  • Playwright: tests/e2e/theme-contrast.spec.ts
  • axe reports: tests/a11y/reports/