mercury-design-systemlisted

# Mercury Design System Apply Mercury Design System styling to UIs built with Chameleon web components. This skill covers Mercury-specific usage: `ch-theme`, `getBundles`, CSS bundles, CSS classes, design tokens, typography, color, spacing, and design patterns. Use the Chameleon skill to build the component tree; then use this skill to add Mercury styling ## Workflow > **CRITICAL — Chameleon skill required:** Before writing any component code, you **MUST** invoke the **chameleon-controls-library** skill (via the `Skill` tool). Mercury only handles styling (CSS bundles, classes, tokens) — component APIs (properties, events, slots, model shapes) are documented exclusively in the Chameleon skill. Skipping it leads to wrong prop names, missing events, and broken component wiring Choose the path that matches the user's request: ### Path A: Implement from a Figma design (image or frame provided) 1. **Detect the theme variant (FIRST)** — Look at the primary action color in the design (buttons, links, focus indicators). Blue → Mercury (default). Green → Globant (`theme: "globant"`). See [How to detect the variant](#how-to-detect-the-variant-from-a-figma-design-or-image). **This determines the `theme` value in `vite-plugin-mercury` and must be resolved before writing any code** 2. **Set up the project with the correct theme** — If scaffolding a new project or the project doesn't exist yet, configure `vite-plugin-mercury` with the detected theme: `mercury({ theme: "mercury" })` o