✨ Features

• 🟦 Inline color swatches for CSS custom properties (var(--token)) in your editor
• 🔍 Scans your entire workspace for color token definitions
• 🎨 Supports hex, rgb(a), hsl(a), and named CSS colors
• 🖱️ Hover for a tooltip with color value and a one-click "Copy Color" action
• 🧹 Swatches update live as you type or save, and disappear if the token is removed
• ⚡ Optimized for large workspaces (parallel parsing, only relevant files)
• 🛡️ No intrusive UI—just clean, fast, and modern color previews

📥 Installation

1. Open the Extensions view in Visual Studio Code (Cmd+Shift+X or Ctrl+Shift+X)
2. Search for TokenSwatch and click Install
3. Start editing your CSS/SCSS/LESS files and enjoy instant color previews!

⚙️ Configuration

{
  // Enable or disable the color swatch preview
  "tokenSwatch.enabled": true,
  // Size of the color swatch in pixels
  "tokenSwatch.swatchSize": 10
}

🚀 Usage

• View color swatches:
  • Open any CSS/SCSS/LESS file using custom properties (e.g., var(--color-primary))
  • See a color box before each recognized token
• Hover for details:
  • Hover over the color box to see a tooltip with the color value and a "Copy Color" link
  • Click "Copy Color" to copy the value to your clipboard (the tooltip will close automatically)
• Live updates:
  • Swatches update instantly as you type or save
  • If a token is removed or changed to a non-color, the swatch disappears

🏗️ Project Structure

token-swatch/
├── src/
│   ├── extension.ts      # Main extension code
│   ├── __tests__/        # Test files
│   └── __mocks__/        # Test mocks
├── package.json          # Extension manifest
├── tsconfig.json         # TypeScript configuration
└── README.md             # This file

🧪 Testing

Run the test suite:

npm test

The test suite covers:

• Color token parsing and workspace scanning
• Decoration and hover logic
• Command registration (copy to clipboard)
• Configuration changes

📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.