omgkit 2.30.0 → 2.32.0

package/lib/generators/index.js

@@ -0,0 +1,135 @@
+/**
+ * OMGKIT Theme Generator Factory
+ * Unified export interface for all theme formats
+ *
+ * @module lib/generators
+ */
+
+import { generateCSS } from './css.generator.js';
+import { generateSCSS } from './scss.generator.js';
+import { generateTailwindV2 } from './tailwind.generator.js';
+import { generateFigmaTokens } from './figma.generator.js';
+import { generateStyleDictionary } from './style-dictionary.generator.js';
+
+/**
+ * Available generator definitions
+ */
+export const GENERATORS = {
+  css: {
+    name: 'CSS',
+    description: 'CSS variables with @layer base',
+    fn: generateCSS,
+    ext: '.css',
+    mimeType: 'text/css'
+  },
+  scss: {
+    name: 'SCSS',
+    description: 'Sass variables and mixins',
+    fn: generateSCSS,
+    ext: '.scss',
+    mimeType: 'text/x-scss'
+  },
+  tailwind: {
+    name: 'Tailwind',
+    description: 'Tailwind CSS configuration',
+    fn: generateTailwindV2,
+    ext: '.js',
+    mimeType: 'application/javascript'
+  },
+  figma: {
+    name: 'Figma',
+    description: 'Figma design tokens',
+    fn: generateFigmaTokens,
+    ext: '.json',
+    mimeType: 'application/json'
+  },
+  'style-dictionary': {
+    name: 'Style Dictionary',
+    description: 'Style Dictionary design tokens',
+    fn: generateStyleDictionary,
+    ext: '.json',
+    mimeType: 'application/json'
+  }
+};
+
+/**
+ * Get list of available generator formats
+ * @returns {string[]} Array of format names
+ */
+export function getAvailableFormats() {
+  return Object.keys(GENERATORS);
+}
+
+/**
+ * Get generator info by format
+ * @param {string} format - Generator format name
+ * @returns {Object|null} Generator info or null
+ */
+export function getGeneratorInfo(format) {
+  return GENERATORS[format] || null;
+}
+
+/**
+ * Generate theme output in specified format
+ * @param {Object} theme - Theme object (v1 or v2)
+ * @param {string} format - Output format
+ * @param {Object} options - Generator-specific options
+ * @returns {string|Object} Generated output
+ * @throws {Error} If format is not supported
+ */
+export function generateTheme(theme, format, options = {}) {
+  const generator = GENERATORS[format];
+
+  if (!generator) {
+    const available = getAvailableFormats().join(', ');
+    throw new Error(`Unknown format: ${format}. Available: ${available}`);
+  }
+
+  return generator.fn(theme, options);
+}
+
+/**
+ * Generate theme in all available formats
+ * @param {Object} theme - Theme object (v1 or v2)
+ * @param {Object} options - Generator options
+ * @returns {Object} Map of format -> output
+ */
+export function generateAllFormats(theme, options = {}) {
+  const results = {};
+
+  for (const [format, generator] of Object.entries(GENERATORS)) {
+    try {
+      results[format] = {
+        content: generator.fn(theme, options),
+        ext: generator.ext,
+        mimeType: generator.mimeType,
+        success: true
+      };
+    } catch (error) {
+      results[format] = {
+        content: null,
+        ext: generator.ext,
+        error: error.message,
+        success: false
+      };
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Get file extension for format
+ * @param {string} format - Generator format
+ * @returns {string} File extension (with dot)
+ */
+export function getFormatExtension(format) {
+  return GENERATORS[format]?.ext || '.txt';
+}
+
+// Re-export individual generators
+export { generateCSS } from './css.generator.js';
+export { generateSCSS } from './scss.generator.js';
+export { generateTailwindV2 } from './tailwind.generator.js';
+export { generateFigmaTokens } from './figma.generator.js';
+export { generateStyleDictionary } from './style-dictionary.generator.js';

package/lib/generators/scss.generator.js

@@ -0,0 +1,249 @@
+/**
+ * SCSS Generator
+ * Generates Sass variables and mixins from theme
+ *
+ * @module lib/generators/scss
+ */
+
+import { detectThemeVersion } from '../theme.js';
+import { processTheme, processAnimations } from '../theme-v2.js';
+
+/**
+ * Convert kebab-case to camelCase
+ * @param {string} str - Kebab-case string
+ * @returns {string} camelCase string
+ */
+function toCamelCase(str) {
+  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
+/**
+ * Generate SCSS from theme
+ * @param {Object} theme - Theme object (v1 or v2)
+ * @param {Object} options - Generation options
+ * @param {boolean} options.useVariables - Use $variables (default: true)
+ * @param {boolean} options.useMaps - Generate Sass maps (default: true)
+ * @param {boolean} options.useMixins - Generate mixins (default: true)
+ * @param {string} options.prefix - Variable prefix (default: 'theme')
+ * @returns {string} SCSS content
+ */
+export function generateSCSS(theme, options = {}) {
+  const {
+    useVariables = true,
+    useMaps = true,
+    useMixins = true,
+    prefix = 'theme'
+  } = options;
+
+  const version = detectThemeVersion(theme);
+  const result = processTheme(theme);
+  const { light: lightVars, dark: darkVars } = result.variables;
+
+  let scss = `// OMGKIT Theme: ${theme.name}
+// Theme ID: ${theme.id}
+// Category: ${theme.category}
+// Version: ${version}
+// Generated by OMGKIT Design System
+
+`;
+
+  // Font variables
+  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';
+
+  // Generate Sass variables
+  if (useVariables) {
+    scss += `// ============================================
+// Sass Variables
+// ============================================
+
+// Typography
+$${prefix}-font-sans: ${fontSans};
+$${prefix}-font-mono: ${fontMono};
+$${prefix}-radius: ${radius};
+
+// Light Theme Variables
+`;
+
+    for (const [key, value] of Object.entries(lightVars)) {
+      const varName = toCamelCase(key);
+      scss += `$${prefix}-light-${varName}: ${value};\n`;
+    }
+
+    scss += `
+// Dark Theme Variables
+`;
+
+    for (const [key, value] of Object.entries(darkVars)) {
+      const varName = toCamelCase(key);
+      scss += `$${prefix}-dark-${varName}: ${value};\n`;
+    }
+  }
+
+  // Generate Sass maps
+  if (useMaps) {
+    scss += `
+// ============================================
+// Sass Maps
+// ============================================
+
+$${prefix}-colors-light: (
+`;
+    for (const [key, value] of Object.entries(lightVars)) {
+      scss += `  '${key}': ${value},\n`;
+    }
+    scss += `);\n`;
+
+    scss += `
+$${prefix}-colors-dark: (
+`;
+    for (const [key, value] of Object.entries(darkVars)) {
+      scss += `  '${key}': ${value},\n`;
+    }
+    scss += `);\n`;
+
+    // Semantic color map
+    scss += `
+// Semantic tokens map (for programmatic access)
+$${prefix}-semantic: (
+  'background': 'background',
+  'foreground': 'foreground',
+  'primary': 'primary',
+  'primary-foreground': 'primary-foreground',
+  'secondary': 'secondary',
+  'secondary-foreground': 'secondary-foreground',
+  'muted': 'muted',
+  'muted-foreground': 'muted-foreground',
+  'accent': 'accent',
+  'accent-foreground': 'accent-foreground',
+  'destructive': 'destructive',
+  'destructive-foreground': 'destructive-foreground',
+  'border': 'border',
+  'input': 'input',
+  'ring': 'ring',
+  'card': 'card',
+  'card-foreground': 'card-foreground',
+  'popover': 'popover',
+  'popover-foreground': 'popover-foreground',
+);
+`;
+  }
+
+  // Generate mixins
+  if (useMixins) {
+    scss += `
+// ============================================
+// Mixins
+// ============================================
+
+/// Get a theme color value
+/// @param {String} $color - Color name
+/// @param {String} $mode - 'light' or 'dark'
+/// @return {String} HSL value
+@function ${prefix}-color($color, $mode: 'light') {
+  @if $mode == 'dark' {
+    @return map-get($${prefix}-colors-dark, $color);
+  }
+  @return map-get($${prefix}-colors-light, $color);
+}
+
+/// Apply HSL color as CSS value
+/// @param {String} $color - Color name
+/// @return {Color} HSL color
+@function ${prefix}-hsl($color) {
+  @return hsl(var(--#{$color}));
+}
+
+/// Apply theme-aware background color
+@mixin ${prefix}-bg($color) {
+  background-color: hsl(var(--#{$color}));
+}
+
+/// Apply theme-aware text color
+@mixin ${prefix}-text($color) {
+  color: hsl(var(--#{$color}));
+}
+
+/// Apply theme-aware border color
+@mixin ${prefix}-border($color: 'border') {
+  border-color: hsl(var(--#{$color}));
+}
+
+/// Apply all CSS variables for light mode
+@mixin ${prefix}-light-mode {
+  @each $name, $value in $${prefix}-colors-light {
+    --#{$name}: #{$value};
+  }
+  --radius: #{$${prefix}-radius};
+  --font-sans: #{$${prefix}-font-sans};
+  --font-mono: #{$${prefix}-font-mono};
+}
+
+/// Apply all CSS variables for dark mode
+@mixin ${prefix}-dark-mode {
+  @each $name, $value in $${prefix}-colors-dark {
+    --#{$name}: #{$value};
+  }
+}
+
+/// Root setup with CSS variables
+@mixin ${prefix}-root {
+  :root {
+    @include ${prefix}-light-mode;
+  }
+
+  .dark {
+    @include ${prefix}-dark-mode;
+  }
+}
+
+/// Base styles
+@mixin ${prefix}-base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+  }
+}
+`;
+  }
+
+  // Add animation variables if present
+  if (theme.animations) {
+    const { animations } = processAnimations(theme.animations);
+
+    scss += `
+// ============================================
+// Animations
+// ============================================
+
+`;
+    for (const [name, value] of Object.entries(animations)) {
+      scss += `$${prefix}-animation-${name}: ${value};\n`;
+    }
+  }
+
+  return scss;
+}
+
+/**
+ * Generate SCSS partial (variables only, for @use)
+ * @param {Object} theme - Theme object
+ * @param {Object} options - Options
+ * @returns {string} SCSS partial content
+ */
+export function generateSCSSPartial(theme, options = {}) {
+  return generateSCSS(theme, {
+    ...options,
+    useMixins: false
+  });
+}