Component Variants Pattern

Create matching light and dark variants of UI components using a systematic color token approach.

Pattern Overview

1. Create paired components: ComponentLight and ComponentDark
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 variant prop

Color Token Mapping

Basic Tokens