Component Variants Pattern Create matching light and dark variants of UI components using a systematic color token approach. Pattern Overview 1. Create paired components: and 2. Mirror the structure exactly between variants 3. Map colors systematically using the token table below 4. Export a unified component that renders both or accepts a prop Color Token Mapping Basic Tokens | Semantic Use | Light Mode | Dark Mode | |-------------|------------|-----------| | Card background | | | | Card border | | | | Content area | | | | Primary text | | | | Secondary text | | | | Muted text | | | | Icon c…