UI Theming

Overview

The frontend uses semantic theme tokens backed by CSS variables and Tailwind mappings.

Token Sources

1. Base semantic tokens from global styles (background, foreground, primary, accent, etc.)
2. Runtime brand overrides from Brand Identity
3. Theme widget overrides persisted in local storage

Runtime Behavior

• Theme state is provided through ThemeProvider.
• Brand palette overrides are applied via applyBrandThemeTokens.
• Theme widget supports:
  • light/dark mode toggle
  • direct token overrides
  • reset to defaults
  • apply brand colors

Design Guidance

• Use semantic utility classes (bg-background, text-foreground, border-border).
• Avoid hardcoded grayscale classes for functional UI surfaces.
• Ensure selected states are visibly distinct from neutral outline controls.