Optics MCP Server

# {{themeName}} Theme ## Overview This theme was generated by Optics MCP and uses the Optics Design System tokens. ## Step 1: Install Optics Design System ### Option A: Via npm (Recommended) ```bash npm install @rolemodel/optics ``` Then import in your CSS: ```css @import "@rolemodel/optics/dist/optics.css"; ``` ### Option B: Via CDN (jsDelivr) ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@latest/dist/optics.css"> ``` ### Option C: Via unpkg ```html <link rel="stylesheet" href="https://unpkg.com/@rolemodel/optics@latest/dist/optics.css"> ``` ## Step 2: Add Your Custom Theme Overrides Create a `theme.css` file with the custom HSL color values below and load it AFTER Optics: ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@latest/dist/optics.css"> <link rel="stylesheet" href="./theme.css"> ``` ## Token Summary {{tokenSummary}} ## Step 3: Using Optics Components **IMPORTANT:** Optics has pre-built components with specific HTML structure and CSS classes. Do NOT make up CSS classes. Use the actual Optics components and their documentation: **Component Documentation:** https://docs.optics.rolemodel.design Your custom theme will automatically apply to all Optics components through the HSL base values. ### Example: Using an Optics Button Refer to the Optics documentation for the actual button HTML structure and CSS classes. Your theme colors will apply automatically through the `--op-color-primary-*` variables. ### Figma Variables Import the `figma-variables.json` file into Figma: 1. Open your Figma file 2. Go to Variables panel 3. Import → Select `figma-variables.json` ## Token Categories {{tokenCategories}}