Style Kit — Design Canvas Plugin

Token-aware design tuning for Fluent UI applications. Explore token scales, override values live, save variations, prompt Copilot for adjustments, and ship changes via GitHub Issues or PRs.

Features

• Token Detection — Automatically identifies the token framework in use (Fluent UI, Material Design, Spectrum, Chakra UI, or custom tokens) and maps element styles to their corresponding design tokens.

• Live Override Engine — Adjust spacing, typography, colors, border radius, shadows, stroke widths, and motion tokens in real time. Changes are applied instantly via CSS custom property overrides.

• Scope Control — Three levels of override targeting:

  | Scope | Target | Example | |-------|--------|---------| | Global | .fui-FluentProvider | Every element using that token | | Component | .fui-Card (all instances) | Every Card on the page | | Element | Specific CSS selector | One particular element |

  Pick any element on the canvas to inspect and tune its specific token usage, then choose the scope level for your override.

• Variations — Save named sets of overrides as variations. Switch between Base and saved variations to compare different design directions.

• Copilot Integration — Natural language prompt bar for AI-powered style adjustments (e.g., "make it more compact" or "darker background"). Copilot suggests token changes based on your description.

• Search & Filter — Browse all available tokens with search and category filter pills (Spacing, Typography, Colors, Shape, Motion).

• Handoff & Export — Copy CSS overrides, theme partials, or generate a full fix prompt for Copilot. Create GitHub Issues with context screenshots and assign Copilot for automated fixes.

• Light/Dark Mode — Full dark mode support with a dedicated token system (--sk-* custom properties) that adapts to the host application's theme.

• Accessibility — ARIA attributes, keyboard navigation, screen reader labels, and semantic roles throughout the panel UI.

Installation

npm install design-canvas-plugin-style-kit

Peer Dependencies

• @design-canvas/toolbox >= 0.1.0

Usage

Register the plugin with your Design Canvas instance:

import plugin from 'design-canvas-plugin-style-kit';

// In your Design Canvas setup:
canvas.registerPlugin(plugin);

The plugin exposes the standard Design Canvas plugin interface:

plugin.meta       // { id, name, icon, description, panel }
plugin.activate(ctx)   // Mount the panel, start detection
plugin.deactivate()    // Clean up listeners and DOM
plugin.getAPI()        // { getOverrides, serializeOverrides, applyOverride, clearAll }
plugin.getHandoffContext()  // { overrides, css, themePartial }

Keyboard Shortcut

| Shortcut | Action | |----------|--------| | Ctrl+Shift+K | Toggle Style Kit panel |

Development

# Install dependencies
npm install

# Start dev harness (Vite + HMR)
npm run dev:ui

# Build for production
npm run build

# Watch mode (library output)
npm run dev

# Validate plugin structure
npm run validate

# Full verification (structure + types + patterns)
npm run verify

Dev Harness

The dev/ folder contains a standalone test harness that simulates the Design Canvas panel shell. It provides:

• Light/dark theme toggle
• Sample DOM elements for token detection testing
• Panel open/close simulation
• Full HMR via Vite

Open http://localhost:5174 after running npm run dev:ui.

Architecture

src/
├── index.ts            # Plugin entry — meta, activate/deactivate, API
├── panel.ts            # Panel DOM renderer (imperative, no framework)
├── panel-styles.ts     # All CSS as a template literal with --sk-* tokens
├── token-registry.ts   # Static token scale definitions + framework detection
├── token-detector.ts   # Maps element computed styles → token matches
├── override-engine.ts  # Applies/tracks CSS custom property overrides
└── variations.ts       # Persistence layer for named override sets

Token System

The panel uses its own --sk-* CSS custom property system for theming:

| Token | Purpose | |-------|---------| | --sk-bg | Panel background | | --sk-bg-subtle | Section backgrounds | | --sk-bg-accent | Interactive accents | | --sk-fg | Primary text | | --sk-fg-secondary | Secondary text | | --sk-border | Borders | | --sk-success | Success states | | --sk-pulse-color | Animation highlight |

Light and dark values are defined on .sk and .sk.sk--dark respectively.

API

getOverrides(): TokenOverride[]

Returns the current list of active token overrides.

serializeOverrides(): { overrides, css, themePartial }

Serializes all active overrides into exportable formats:

• overrides — Structured array with token names, old/new values, scope
• css — Ready-to-paste CSS custom property declarations
• themePartial — Framework-specific theme object partial

applyOverride(tokenName, value, scope): void

Programmatically apply a token override.

clearAll(): void

Remove all active overrides and reset to base values.

License

MIT