theme-compliance

name	theme-compliance
description	Audit and fix theme compliance issues in HTML and JS files — raw Tailwind color utilities, hardcoded hex/RGB values, inline styles, and incorrect getCssVar usage. Use this when asked to "audit colors", "check theme compliance", "fix raw Tailwind", "fix hardcoded colors", or when lint:js-colors reports violations.

Theme Compliance Audit & Fix

Goal

Ensure all papers, questions, and site-wide HTML/JS files use the semantic design system tokens (CSS custom properties, panel/chip/toggle classes) instead of raw Tailwind color utilities or hardcoded hex/RGB/HSL values. This enables consistent dark-mode support and theme switching.

When to use

• After creating or editing a paper/question with colored UI (bars, charts, badges, conditional styling)
• When npm run lint:js-colors reports violations
• When performing a bulk housekeeping pass
• When a visual regression appears in dark mode

Quick check

# Run the JS color linter to find violations
npm run lint:js-colors

# Run full lint (includes HTML, CSS, JS colors, and repo validation)
npm run lint

The two violation categories

1. HTML: Raw Tailwind color utilities and hardcoded colors

Problem: Classes like bg-indigo-50, border-blue-200, text-red-600 or inline style="color: #ef4444" break theme switching.

Solution: Replace with semantic theme classes:

Instead of	Use
bg-indigo-50, bg-blue-50	or tokens