@shohojdhara/atomix 0.4.7 → 0.4.9

package/scripts/cli/templates/token-templates.js

@@ -435,13 +435,349 @@ $easing-ease-in: $custom-ease-in !default;
 }
 
 /**
- * Token templates export object
+ * Animation tokens generation function
+ */
+export function generateBreakpointTokens() {
+  return `// Custom Breakpoint Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Breakpoint definitions (mobile-first approach)
+$custom-breakpoint-sm: 640px !default;   // Small devices (landscape phones)
+$custom-breakpoint-md: 768px !default;   // Medium devices (tablets)
+$custom-breakpoint-lg: 1024px !default;  // Large devices (desktops)
+$custom-breakpoint-xl: 1280px !default;  // Extra large devices (large desktops)
+$custom-breakpoint-2xl: 1536px !default; // 2X large devices (extra large desktops)
+
+// Container max widths per breakpoint
+$custom-container-sm: $custom-breakpoint-sm !default;
+$custom-container-md: $custom-breakpoint-md !default;
+$custom-container-lg: $custom-breakpoint-lg !default;
+$custom-container-xl: $custom-breakpoint-xl !default;
+$custom-container-2xl: $custom-breakpoint-2xl !default;
+
+// Export to override defaults
+$breakpoints: (
+  sm: $custom-breakpoint-sm,
+  md: $custom-breakpoint-md,
+  lg: $custom-breakpoint-lg,
+  xl: $custom-breakpoint-xl,
+  '2xl': $custom-breakpoint-2xl,
+) !default;
+`;
+}
+
+/**
+ * Z-index tokens generation function
+ */
+export function generateZIndexTokens() {
+  return `// Custom Z-Index Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Z-Index scale (keep this organized to avoid stacking conflicts)
+$custom-z-index-hidden: -1 !default;
+$custom-z-index-auto: auto !default;
+$custom-z-index-base: 0 !default;
+$custom-z-index-dropdown: 100 !default;
+$custom-z-index-sticky: 200 !default;
+$custom-z-index-fixed: 300 !default;
+$custom-z-index-overlay-backdrop: 400 !default;
+$custom-z-index-overlay: 500 !default;
+$custom-z-index-modal: 600 !default;
+$custom-z-index-popover: 700 !default;
+$custom-z-index-tooltip: 800 !default;
+$custom-z-index-toast: 900 !default;
+
+// Component-specific z-index values
+$custom-button-z-index: $custom-z-index-base !default;
+$custom-dropdown-z-index: $custom-z-index-dropdown !default;
+$custom-modal-z-index: $custom-z-index-modal !default;
+$custom-toast-z-index: $custom-z-index-toast !default;
+$custom-tooltip-z-index: $custom-z-index-tooltip !default;
+$custom-popover-z-index: $custom-z-index-popover !default;
+
+// Export to override defaults
+$z-index-dropdown: $custom-z-index-dropdown !default;
+$z-index-sticky: $custom-z-index-sticky !default;
+$z-index-fixed: $custom-z-index-fixed !default;
+$z-index-modal-backdrop: $custom-z-index-overlay-backdrop !default;
+$z-index-modal: $custom-z-index-modal !default;
+$z-index-popover: $custom-z-index-popover !default;
+$z-index-tooltip: $custom-z-index-tooltip !default;
+$z-index-toast: $custom-z-index-toast !default;
+`;
+}
+
+/**
+ * Generate design tokens in JSON format for multi-platform support
+ * @param {Object} options - Generation options
+ * @returns {Object} JSON tokens in W3C DTCG format
+ */
+export function generateJSONTokens(options = {}) {
+  const { prefix = 'atomix' } = options;
+  
+  return {
+    $schema: 'https://design-tokens.org/schema.json',
+    [prefix]: {
+      color: {
+        primary: {
+          50: { value: '#fff9e6', type: 'color' },
+          100: { value: '#fff4cc', type: 'color' },
+          200: { value: '#ffe699', type: 'color' },
+          300: { value: '#ffd966', type: 'color' },
+          400: { value: '#ffcc33', type: 'color' },
+          500: { value: '#ffb800', type: 'color' },
+          600: { value: '#e6a600', type: 'color' },
+          700: { value: '#cc9400', type: 'color' },
+          800: { value: '#b38200', type: 'color' },
+          900: { value: '#997000', type: 'color' },
+        },
+        semantic: {
+          success: { value: '#22c55e', type: 'color' },
+          warning: { value: '#eab308', type: 'color' },
+          error: { value: '#ef4444', type: 'color' },
+          info: { value: '#3b82f6', type: 'color' },
+        },
+        neutral: {
+          50: { value: '#f9fafb', type: 'color' },
+          100: { value: '#f3f4f6', type: 'color' },
+          200: { value: '#e5e7eb', type: 'color' },
+          300: { value: '#d1d5db', type: 'color' },
+          400: { value: '#9ca3af', type: 'color' },
+          500: { value: '#6b7280', type: 'color' },
+          600: { value: '#4b5563', type: 'color' },
+          700: { value: '#374151', type: 'color' },
+          800: { value: '#1f2937', type: 'color' },
+          900: { value: '#111827', type: 'color' },
+        },
+      },
+      spacing: {
+        0: { value: '0rem', type: 'dimension' },
+        1: { value: '0.25rem', type: 'dimension' },
+        2: { value: '0.5rem', type: 'dimension' },
+        3: { value: '0.75rem', type: 'dimension' },
+        4: { value: '1rem', type: 'dimension' },
+        5: { value: '1.25rem', type: 'dimension' },
+        6: { value: '1.5rem', type: 'dimension' },
+        8: { value: '2rem', type: 'dimension' },
+        10: { value: '2.5rem', type: 'dimension' },
+        12: { value: '3rem', type: 'dimension' },
+        16: { value: '4rem', type: 'dimension' },
+        20: { value: '5rem', type: 'dimension' },
+        24: { value: '6rem', type: 'dimension' },
+      },
+      typography: {
+        fontFamily: {
+          sans: { value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', type: 'fontFamily' },
+          mono: { value: 'SFMono-Regular, Menlo, Monaco, Consolas, monospace', type: 'fontFamily' },
+        },
+        fontSize: {
+          xs: { value: '0.75rem', type: 'fontSize' },
+          sm: { value: '0.875rem', type: 'fontSize' },
+          base: { value: '1rem', type: 'fontSize' },
+          lg: { value: '1.125rem', type: 'fontSize' },
+          xl: { value: '1.25rem', type: 'fontSize' },
+          '2xl': { value: '1.5rem', type: 'fontSize' },
+          '3xl': { value: '1.875rem', type: 'fontSize' },
+          '4xl': { value: '2.25rem', type: 'fontSize' },
+        },
+        fontWeight: {
+          light: { value: '300', type: 'fontWeight' },
+          normal: { value: '400', type: 'fontWeight' },
+          medium: { value: '500', type: 'fontWeight' },
+          semibold: { value: '600', type: 'fontWeight' },
+          bold: { value: '700', type: 'fontWeight' },
+        },
+      },
+      shadow: {
+        none: { value: 'none', type: 'shadow' },
+        xs: { value: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', type: 'shadow' },
+        sm: { value: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', type: 'shadow' },
+        base: { value: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', type: 'shadow' },
+        md: { value: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', type: 'shadow' },
+        lg: { value: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', type: 'shadow' },
+        xl: { value: '0 25px 50px -12px rgba(0, 0, 0, 0.25)', type: 'shadow' },
+        '2xl': { value: '0 35px 60px -15px rgba(0, 0, 0, 0.3)', type: 'shadow' },
+      },
+      borderRadius: {
+        none: { value: '0rem', type: 'dimension' },
+        sm: { value: '0.125rem', type: 'dimension' },
+        base: { value: '0.25rem', type: 'dimension' },
+        md: { value: '0.375rem', type: 'dimension' },
+        lg: { value: '0.5rem', type: 'dimension' },
+        xl: { value: '0.75rem', type: 'dimension' },
+        '2xl': { value: '1rem', type: 'dimension' },
+        '3xl': { value: '1.5rem', type: 'dimension' },
+        full: { value: '9999px', type: 'dimension' },
+      },
+      duration: {
+        instant: { value: '0s', type: 'duration' },
+        fast: { value: '0.15s', type: 'duration' },
+        base: { value: '0.3s', type: 'duration' },
+        slow: { value: '0.5s', type: 'duration' },
+        slower: { value: '0.7s', type: 'duration' },
+        slowest: { value: '1s', type: 'duration' },
+      },
+      easing: {
+        linear: { value: 'linear', type: 'cubicBezier' },
+        easeIn: { value: 'cubic-bezier(0.4, 0, 1, 1)', type: 'cubicBezier' },
+        easeOut: { value: 'cubic-bezier(0, 0, 0.2, 1)', type: 'cubicBezier' },
+        easeInOut: { value: 'cubic-bezier(0.4, 0, 0.2, 1)', type: 'cubicBezier' },
+        smooth: { value: 'cubic-bezier(0.23, 1, 0.32, 1)', type: 'cubicBezier' },
+      },
+    },
+  };
+}
+
+/**
+ * Generate CSS custom properties from tokens
+ * @param {Object} options - Generation options
+ * @returns {string} CSS custom properties
+ */
+export function generateCSSTokens(options = {}) {
+  const { selector = ':root', prefix = '' } = options;
+  
+  return `/* Design Tokens - CSS Custom Properties */
+/* Generated by Atomix CLI */
+
+${selector} {
+  /* Color Tokens */
+  --${prefix}color-primary-50: #fff9e6;
+  --${prefix}color-primary-100: #fff4cc;
+  --${prefix}color-primary-200: #ffe699;
+  --${prefix}color-primary-300: #ffd966;
+  --${prefix}color-primary-400: #ffcc33;
+  --${prefix}color-primary-500: #ffb800;
+  --${prefix}color-primary-600: #e6a600;
+  --${prefix}color-primary-700: #cc9400;
+  --${prefix}color-primary-800: #b38200;
+  --${prefix}color-primary-900: #997000;
+
+  /* Semantic Colors */
+  --${prefix}color-success: #22c55e;
+  --${prefix}color-warning: #eab308;
+  --${prefix}color-error: #ef4444;
+  --${prefix}color-info: #3b82f6;
+
+  /* Neutral Colors */
+  --${prefix}color-neutral-50: #f9fafb;
+  --${prefix}color-neutral-100: #f3f4f6;
+  --${prefix}color-neutral-200: #e5e7eb;
+  --${prefix}color-neutral-300: #d1d5db;
+  --${prefix}color-neutral-400: #9ca3af;
+  --${prefix}color-neutral-500: #6b7280;
+  --${prefix}color-neutral-600: #4b5563;
+  --${prefix}color-neutral-700: #374151;
+  --${prefix}color-neutral-800: #1f2937;
+  --${prefix}color-neutral-900: #111827;
+
+  /* Spacing Tokens */
+  --${prefix}spacing-0: 0rem;
+  --${prefix}spacing-1: 0.25rem;
+  --${prefix}spacing-2: 0.5rem;
+  --${prefix}spacing-3: 0.75rem;
+  --${prefix}spacing-4: 1rem;
+  --${prefix}spacing-5: 1.25rem;
+  --${prefix}spacing-6: 1.5rem;
+  --${prefix}spacing-8: 2rem;
+  --${prefix}spacing-10: 2.5rem;
+  --${prefix}spacing-12: 3rem;
+  --${prefix}spacing-16: 4rem;
+  --${prefix}spacing-20: 5rem;
+  --${prefix}spacing-24: 6rem;
+
+  /* Typography Tokens */
+  --${prefix}font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --${prefix}font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --${prefix}font-size-xs: 0.75rem;
+  --${prefix}font-size-sm: 0.875rem;
+  --${prefix}font-size-base: 1rem;
+  --${prefix}font-size-lg: 1.125rem;
+  --${prefix}font-size-xl: 1.25rem;
+  --${prefix}font-size-2xl: 1.5rem;
+  --${prefix}font-size-3xl: 1.875rem;
+  --${prefix}font-size-4xl: 2.25rem;
+  --${prefix}font-weight-light: 300;
+  --${prefix}font-weight-normal: 400;
+  --${prefix}font-weight-medium: 500;
+  --${prefix}font-weight-semibold: 600;
+  --${prefix}font-weight-bold: 700;
+
+  /* Shadow Tokens */
+  --${prefix}shadow-none: none;
+  --${prefix}shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --${prefix}shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --${prefix}shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --${prefix}shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --${prefix}shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --${prefix}shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --${prefix}shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
+
+  /* Border Radius Tokens */
+  --${prefix}radius-none: 0rem;
+  --${prefix}radius-sm: 0.125rem;
+  --${prefix}radius-base: 0.25rem;
+  --${prefix}radius-md: 0.375rem;
+  --${prefix}radius-lg: 0.5rem;
+  --${prefix}radius-xl: 0.75rem;
+  --${prefix}radius-2xl: 1rem;
+  --${prefix}radius-3xl: 1.5rem;
+  --${prefix}radius-full: 9999px;
+
+  /* Animation Tokens */
+  --${prefix}duration-instant: 0s;
+  --${prefix}duration-fast: 0.15s;
+  --${prefix}duration-base: 0.3s;
+  --${prefix}duration-slow: 0.5s;
+  --${prefix}duration-slower: 0.7s;
+  --${prefix}duration-slowest: 1s;
+  --${prefix}easing-linear: linear;
+  --${prefix}easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --${prefix}easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --${prefix}easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --${prefix}easing-smooth: cubic-bezier(0.23, 1, 0.32, 1);
+
+  /* Breakpoint Tokens */
+  --${prefix}breakpoint-sm: 640px;
+  --${prefix}breakpoint-md: 768px;
+  --${prefix}breakpoint-lg: 1024px;
+  --${prefix}breakpoint-xl: 1280px;
+  --${prefix}breakpoint-2xl: 1536px;
+
+  /* Z-Index Tokens */
+  --${prefix}z-index-hidden: -1;
+  --${prefix}z-index-auto: auto;
+  --${prefix}z-index-base: 0;
+  --${prefix}z-index-dropdown: 100;
+  --${prefix}z-index-sticky: 200;
+  --${prefix}z-index-fixed: 300;
+  --${prefix}z-index-overlay: 500;
+  --${prefix}z-index-modal: 600;
+  --${prefix}z-index-popover: 700;
+  --${prefix}z-index-tooltip: 800;
+  --${prefix}z-index-toast: 900;
+}
+`;
+}
+
+/**
+ * Token templates export object - Enhanced with multi-format support
  */
 export const tokenTemplates = {
+  // SCSS generators (legacy)
   generateColorTokens,
   generateSpacingTokens,
   generateTypographyTokens,
   generateShadowTokens,
   generateRadiusTokens,
   generateAnimationTokens,
+  
+  // New token generators
+  generateBreakpointTokens,
+  generateZIndexTokens,
+  
+  // Multi-format exporters
+  generateJSONTokens,
+  generateCSSTokens,
 };