omgkit 2.30.0 → 2.31.0

package/README.md

@@ -37,11 +37,11 @@ All coordinated through **Omega-level thinking** - a framework for finding break
 | Component | Count | Description |
 |-----------|-------|-------------|
 | **Agents** | 41 | Specialized AI team members with distinct roles |
-| **Commands** | 169 | Slash commands for every development task |
+| **Commands** | 174 | Slash commands for every development task |
 | **Workflows** | 69 | Complete development processes from idea to deploy |
-| **Skills** | 161 | Domain expertise modules across 24 categories |
+| **Skills** | 162 | Domain expertise modules across 24 categories |
 | **Modes** | 10 | Behavioral configurations for different contexts |
-| **Themes** | 30 | Curated design system themes for shadcn/ui |
+| **Themes** | 31 | Curated design system themes (V1 + V2 schemas) |
 | **Archetypes** | 14 | Project templates for autonomous development |
 
 ---
@@ -166,23 +166,38 @@ testing:
       target: 85
 ```
 
-### 6. Design System (New in 2.29.0)
+### 6. Design System (Enhanced in 2.30.0)
 
-OMGKIT includes a complete design system with 30 curated themes for shadcn/ui integration:
+OMGKIT includes a complete design system with 31 curated themes for shadcn/ui integration. Now supports both **V1** (flat colors) and **V2** (color scales, effects, animations) theme schemas.
 
 ```bash
 # Initialize with a theme (opt-in)
 omgkit init --theme neo-tokyo
 
+# Or use a V2 theme with advanced features
+omgkit init --theme electric-cyan-v2
+
 # Or explore themes first
 omgkit init --with-design
 ```
 
+#### Theme Schema Versions
+
+| Feature | V1 | V2 |
+|---------|----|----|
+| Flat colors | ✓ | ✓ |
+| 12-step color scales | - | ✓ |
+| $ref token references | - | ✓ |
+| Status colors (success/warning/info) | - | ✓ |
+| Effects (glass, glow, gradient) | - | ✓ |
+| Animations (keyframes) | - | ✓ |
+| Alpha variants | - | ✓ |
+
 #### 5 Theme Categories
 
 | Category | Themes | Description |
 |----------|--------|-------------|
-| **Tech & AI** | neo-tokyo, electric-cyan, neural-dark, matrix-green, quantum-purple, hologram | Futuristic, cyberpunk-inspired |
+| **Tech & AI** | neo-tokyo, electric-cyan, electric-cyan-v2, neural-dark, matrix-green, quantum-purple, hologram | Futuristic, cyberpunk-inspired |
 | **Minimal & Clean** | minimal-slate, paper, mono, zen, nordic, swiss | Simple, elegant, distraction-free |
 | **Corporate** | ocean-blue, corporate-indigo, finance, legal, healthcare, consulting | Professional, trustworthy |
 | **Creative & Bold** | coral-sunset, candy, neon, gradient-dream, retro, studio | Vibrant, expressive |
@@ -192,7 +207,7 @@ omgkit init --with-design
 
 | Command | Description |
 |---------|-------------|
-| `/design:themes` | List all 30 curated themes |
+| `/design:themes` | List all 31 curated themes |
 | `/design:theme <id>` | Apply a theme to your project |
 | `/design:preview` | Preview current theme colors |
 | `/design:builder` | Build custom theme interactively |
@@ -203,6 +218,25 @@ omgkit init --with-design
 | `/design:rebuild <id>` | Rebuild entire project with new theme |
 | `/design:scan` | Scan for non-compliant colors |
 | `/design:rollback` | Rollback to previous theme |
+| `/design:export <format>` | Export to CSS, SCSS, Tailwind, Figma, Style Dictionary |
+| `/design:validate` | Validate theme structure |
+
+#### Theme Export (New in 2.30.0)
+
+Export your theme to various design tools and framework formats:
+
+```bash
+# Export CSS
+/design:export css
+
+# Export Figma tokens
+/design:export figma --output ./tokens/
+
+# Export all formats
+/design:export --all
+```
+
+Supported formats: `css`, `scss`, `tailwind`, `figma`, `style-dictionary`
 
 #### Theme Rebuild
 
@@ -212,6 +246,9 @@ Rebuild your entire project's UI with a single command:
 # Rebuild with new theme (scans and fixes hardcoded colors)
 omgkit design:rebuild neo-tokyo
 
+# Use V2 theme for advanced features
+omgkit design:rebuild electric-cyan-v2
+
 # Scan for non-compliant colors
 omgkit design:scan
 
@@ -224,6 +261,27 @@ The rebuild feature:
 - Scans `app/`, `components/`, `src/`, `pages/` directories
 - Replaces hardcoded colors (`bg-blue-500`) with theme variables (`bg-primary`)
 - Reports unfixable patterns for manual review
+- V2 themes generate 12-step color scales and status colors
+
+#### V2 Theme Features
+
+V2 themes provide additional CSS variables:
+
+```css
+/* 12-step color scales */
+--cyan-1 through --cyan-12
+--cyan-a1 through --cyan-a12  /* Alpha variants */
+
+/* Status colors */
+--success, --warning, --info
+
+/* Effects */
+--glass-blur, --glow
+
+/* Animations */
+@keyframes shimmer { ... }
+--animation-shimmer
+```
 
 #### How It Works
 
@@ -370,7 +428,7 @@ Agents are specialized AI team members, each with distinct expertise and respons
 
 ---
 
-## Commands (160)
+## Commands (174)
 
 Commands are slash-prefixed actions organized by namespace.
 
@@ -635,7 +693,7 @@ Workflows are orchestrated sequences of agents, commands, and skills.
 
 ---
 
-## Skills (161)
+## Skills (162)
 
 Skills are domain expertise modules organized in 24 categories.
 
@@ -987,7 +1045,7 @@ If any sync issue is detected (missing pages, wrong counts, broken links), the v
 
 ## Validation & Testing
 
-OMGKIT has 7300+ automated tests ensuring system integrity.
+OMGKIT has 8200+ automated tests ensuring system integrity.
 
 ### Run Tests
 

package/lib/generators/css.generator.js

@@ -0,0 +1,151 @@
+/**
+ * CSS Generator
+ * Generates CSS variables from theme (v1 and v2 compatible)
+ *
+ * @module lib/generators/css
+ */
+
+import { detectThemeVersion, isV2Theme } from '../theme.js';
+import {
+  processTheme,
+  processAnimations,
+  generateKeyframesCSS
+} from '../theme-v2.js';
+
+/**
+ * Generate CSS from theme
+ * @param {Object} theme - Theme object (v1 or v2)
+ * @param {Object} options - Generation options
+ * @param {boolean} options.includeBase - Include @layer base wrapper (default: true)
+ * @param {boolean} options.includeReset - Include border-box reset (default: true)
+ * @param {boolean} options.includeAnimations - Include keyframes (default: true)
+ * @returns {string} CSS content
+ */
+export function generateCSS(theme, options = {}) {
+  const {
+    includeBase = true,
+    includeReset = true,
+    includeAnimations = true
+  } = options;
+
+  const result = processTheme(theme);
+  const { light: lightVars, dark: darkVars } = result.variables;
+
+  // Generate variable declarations
+  const generateVars = (vars) => {
+    return Object.entries(vars)
+      .map(([key, value]) => `  --${key}: ${value};`)
+      .join('\n');
+  };
+
+  const lightCSS = generateVars(lightVars);
+  const darkCSS = generateVars(darkVars);
+
+  // Typography
+  const fontSans = theme.typography?.fontFamily?.sans ||
+                   theme.fontFamily?.sans ||
+                   'Inter, system-ui, sans-serif';
+  const fontMono = theme.typography?.fontFamily?.mono ||
+                   theme.fontFamily?.mono ||
+                   'JetBrains Mono, monospace';
+  const radius = theme.spacing?.radius || theme.radius || '0.5rem';
+
+  // Animations
+  let keyframesCSS = '';
+  let animationVars = '';
+
+  if (includeAnimations && theme.animations) {
+    const { keyframes, animations } = processAnimations(theme.animations);
+    keyframesCSS = generateKeyframesCSS(keyframes);
+    animationVars = Object.entries(animations)
+      .map(([name, value]) => `  --animation-${name}: ${value};`)
+      .join('\n');
+  }
+
+  // Build CSS
+  const version = detectThemeVersion(theme);
+  let css = `/* OMGKIT Theme: ${theme.name} */
+/* Theme ID: ${theme.id} */
+/* Category: ${theme.category} */
+/* Version: ${version} */
+/* Generated by OMGKIT Design System */
+
+`;
+
+  // Add keyframes
+  if (keyframesCSS) {
+    css += keyframesCSS + '\n';
+  }
+
+  // Root variables
+  if (includeBase) {
+    css += `@layer base {
+  :root {
+${lightCSS}
+  --radius: ${radius};
+  --font-sans: ${fontSans};
+  --font-mono: ${fontMono};
+${animationVars ? animationVars + '\n' : ''}}
+
+  .dark {
+${darkCSS}
+  }
+}
+`;
+  } else {
+    css += `:root {
+${lightCSS}
+  --radius: ${radius};
+  --font-sans: ${fontSans};
+  --font-mono: ${fontMono};
+${animationVars ? animationVars + '\n' : ''}}
+
+.dark {
+${darkCSS}
+}
+`;
+  }
+
+  // Reset styles
+  if (includeReset && includeBase) {
+    css += `
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+  }
+}
+`;
+  } else if (includeReset) {
+    css += `
+* {
+  border-color: hsl(var(--border));
+}
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+}
+`;
+  }
+
+  return css;
+}
+
+/**
+ * Generate CSS for a specific mode only
+ * @param {Object} theme - Theme object
+ * @param {string} mode - 'light' or 'dark'
+ * @returns {string} CSS content for that mode
+ */
+export function generateCSSForMode(theme, mode = 'light') {
+  const result = processTheme(theme, { mode });
+  const vars = result.variables[mode] || {};
+
+  return Object.entries(vars)
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join('\n');
+}

package/lib/generators/figma.generator.js

@@ -0,0 +1,311 @@
+/**
+ * Figma Tokens Generator
+ * Generates Figma design tokens format
+ *
+ * @module lib/generators/figma
+ */
+
+import { detectThemeVersion } from '../theme.js';
+import { processTheme, hslToHex } from '../theme-v2.js';
+
+// Import hex converter from theme.js
+import { hslToHex as themeHslToHex } from '../theme.js';
+
+/**
+ * Convert HSL string to hex
+ * @param {string} hsl - HSL string (e.g., '220 14.3% 95.9%')
+ * @returns {string} Hex color
+ */
+function convertHslToHex(hsl) {
+  if (!hsl || typeof hsl !== 'string') return '#000000';
+
+  try {
+    // Handle HSL with alpha
+    if (hsl.includes('/')) {
+      const [hslPart] = hsl.split('/');
+      return themeHslToHex(hslPart.trim());
+    }
+    return themeHslToHex(hsl);
+  } catch {
+    return '#000000';
+  }
+}
+
+/**
+ * Generate Figma design tokens
+ * @param {Object} theme - Theme object (v1 or v2)
+ * @param {Object} options - Generation options
+ * @param {string} options.format - 'figma' or 'tokens-studio' (default: 'figma')
+ * @param {boolean} options.includeHex - Include hex values (default: true)
+ * @param {boolean} options.includeMeta - Include metadata (default: true)
+ * @returns {string} JSON string of Figma tokens
+ */
+export function generateFigmaTokens(theme, options = {}) {
+  const {
+    format = 'figma',
+    includeHex = true,
+    includeMeta = true
+  } = options;
+
+  const version = detectThemeVersion(theme);
+  const result = processTheme(theme);
+  const { light: lightVars, dark: darkVars } = result.variables;
+
+  const tokens = {
+    $themes: [],
+    $metadata: includeMeta ? {
+      tokenSetOrder: ['global', 'light', 'dark'],
+      generator: 'OMGKIT Design System',
+      themeId: theme.id,
+      themeName: theme.name,
+      version: version
+    } : undefined
+  };
+
+  // Global tokens
+  tokens.global = {
+    typography: buildTypographyTokens(theme),
+    spacing: buildSpacingTokens(theme),
+    borderRadius: buildRadiusTokens(theme)
+  };
+
+  // Light mode tokens
+  tokens.light = {
+    colors: buildColorTokens(lightVars, includeHex)
+  };
+
+  // Dark mode tokens
+  tokens.dark = {
+    colors: buildColorTokens(darkVars, includeHex)
+  };
+
+  // Add effects if present
+  if (theme.effects) {
+    tokens.global.effects = buildEffectTokens(theme.effects);
+  }
+
+  // Theme sets for Figma
+  tokens.$themes = [
+    {
+      id: `${theme.id}-light`,
+      name: `${theme.name} Light`,
+      selectedTokenSets: { global: 'enabled', light: 'enabled' }
+    },
+    {
+      id: `${theme.id}-dark`,
+      name: `${theme.name} Dark`,
+      selectedTokenSets: { global: 'enabled', dark: 'enabled' }
+    }
+  ];
+
+  // Remove undefined values
+  if (!includeMeta) {
+    delete tokens.$metadata;
+  }
+
+  return JSON.stringify(tokens, null, 2);
+}
+
+/**
+ * Build color tokens from variables
+ * @param {Object} vars - Color variables
+ * @param {boolean} includeHex - Include hex conversion
+ * @returns {Object} Color tokens
+ */
+function buildColorTokens(vars, includeHex) {
+  const tokens = {};
+
+  for (const [name, value] of Object.entries(vars)) {
+    const token = {
+      value: value,
+      type: 'color'
+    };
+
+    if (includeHex) {
+      token.$extensions = {
+        'figma': {
+          hexValue: convertHslToHex(value)
+        }
+      };
+    }
+
+    // Organize by category
+    const category = getColorCategory(name);
+    if (!tokens[category]) {
+      tokens[category] = {};
+    }
+
+    // Clean name for token path
+    const cleanName = name.replace(category + '-', '').replace('-', '.');
+
+    if (cleanName === category || cleanName === '') {
+      tokens[category].DEFAULT = token;
+    } else {
+      tokens[category][cleanName] = token;
+    }
+  }
+
+  return tokens;
+}
+
+/**
+ * Get color category from token name
+ * @param {string} name - Token name
+ * @returns {string} Category
+ */
+function getColorCategory(name) {
+  const categories = [
+    'background', 'foreground', 'primary', 'secondary',
+    'muted', 'accent', 'destructive', 'border', 'input',
+    'ring', 'card', 'popover', 'sidebar', 'chart',
+    'success', 'warning', 'info', 'surface', 'panel', 'overlay'
+  ];
+
+  for (const cat of categories) {
+    if (name.startsWith(cat)) return cat;
+  }
+
+  // Color scales (e.g., teal-1, teal-9)
+  const scaleMatch = name.match(/^([a-z]+)-\d+$/);
+  if (scaleMatch) {
+    return scaleMatch[1];
+  }
+
+  return 'other';
+}
+
+/**
+ * Build typography tokens
+ * @param {Object} theme - Theme object
+ * @returns {Object} Typography tokens
+ */
+function buildTypographyTokens(theme) {
+  const fontSans = theme.typography?.fontFamily?.sans ||
+                   theme.fontFamily?.sans ||
+                   'Inter, system-ui, sans-serif';
+  const fontMono = theme.typography?.fontFamily?.mono ||
+                   theme.fontFamily?.mono ||
+                   'JetBrains Mono, monospace';
+
+  return {
+    fontFamily: {
+      sans: {
+        value: fontSans,
+        type: 'fontFamilies'
+      },
+      mono: {
+        value: fontMono,
+        type: 'fontFamilies'
+      }
+    },
+    fontSize: {
+      xs: { value: '0.75rem', type: 'fontSizes' },
+      sm: { value: '0.875rem', type: 'fontSizes' },
+      base: { value: '1rem', type: 'fontSizes' },
+      lg: { value: '1.125rem', type: 'fontSizes' },
+      xl: { value: '1.25rem', type: 'fontSizes' },
+      '2xl': { value: '1.5rem', type: 'fontSizes' },
+      '3xl': { value: '1.875rem', type: 'fontSizes' },
+      '4xl': { value: '2.25rem', type: 'fontSizes' }
+    },
+    fontWeight: {
+      normal: { value: '400', type: 'fontWeights' },
+      medium: { value: '500', type: 'fontWeights' },
+      semibold: { value: '600', type: 'fontWeights' },
+      bold: { value: '700', type: 'fontWeights' }
+    },
+    lineHeight: {
+      none: { value: '1', type: 'lineHeights' },
+      tight: { value: '1.25', type: 'lineHeights' },
+      snug: { value: '1.375', type: 'lineHeights' },
+      normal: { value: '1.5', type: 'lineHeights' },
+      relaxed: { value: '1.625', type: 'lineHeights' },
+      loose: { value: '2', type: 'lineHeights' }
+    }
+  };
+}
+
+/**
+ * Build spacing tokens
+ * @param {Object} theme - Theme object
+ * @returns {Object} Spacing tokens
+ */
+function buildSpacingTokens(theme) {
+  return {
+    '0': { value: '0', type: 'spacing' },
+    '1': { value: '0.25rem', type: 'spacing' },
+    '2': { value: '0.5rem', type: 'spacing' },
+    '3': { value: '0.75rem', type: 'spacing' },
+    '4': { value: '1rem', type: 'spacing' },
+    '5': { value: '1.25rem', type: 'spacing' },
+    '6': { value: '1.5rem', type: 'spacing' },
+    '8': { value: '2rem', type: 'spacing' },
+    '10': { value: '2.5rem', type: 'spacing' },
+    '12': { value: '3rem', type: 'spacing' },
+    '16': { value: '4rem', type: 'spacing' },
+    '20': { value: '5rem', type: 'spacing' },
+    '24': { value: '6rem', type: 'spacing' }
+  };
+}
+
+/**
+ * Build border radius tokens
+ * @param {Object} theme - Theme object
+ * @returns {Object} Radius tokens
+ */
+function buildRadiusTokens(theme) {
+  const radius = theme.spacing?.radius || theme.radius || '0.5rem';
+
+  return {
+    none: { value: '0', type: 'borderRadius' },
+    sm: { value: `calc(${radius} - 4px)`, type: 'borderRadius' },
+    md: { value: `calc(${radius} - 2px)`, type: 'borderRadius' },
+    DEFAULT: { value: radius, type: 'borderRadius' },
+    lg: { value: radius, type: 'borderRadius' },
+    xl: { value: `calc(${radius} + 4px)`, type: 'borderRadius' },
+    '2xl': { value: `calc(${radius} + 8px)`, type: 'borderRadius' },
+    full: { value: '9999px', type: 'borderRadius' }
+  };
+}
+
+/**
+ * Build effect tokens
+ * @param {Object} effects - Theme effects
+ * @returns {Object} Effect tokens
+ */
+function buildEffectTokens(effects) {
+  const tokens = {};
+
+  if (effects.glassMorphism) {
+    tokens.glass = {
+      blur: {
+        value: effects.glassMorphism.backdropBlur || '12px',
+        type: 'dimension'
+      }
+    };
+  }
+
+  if (effects.glow) {
+    tokens.glow = {
+      DEFAULT: {
+        value: effects.glow.default || '0 0 20px',
+        type: 'boxShadow'
+      },
+      lg: {
+        value: effects.glow.lg || '0 0 40px',
+        type: 'boxShadow'
+      }
+    };
+  }
+
+  return tokens;
+}
+
+/**
+ * Generate Tokens Studio format (alternative Figma plugin)
+ * @param {Object} theme - Theme object
+ * @returns {string} JSON string
+ */
+export function generateTokensStudio(theme) {
+  return generateFigmaTokens(theme, { format: 'tokens-studio' });
+}