shru-design-system 0.1.3 → 0.1.5

package/scripts/apply-theme-sync.js

@@ -139,21 +139,25 @@
       if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
         var enteringColor = key === 'color' && prefix === '';
         var inColorContext = isColorContext || enteringColor;
+        
         if (enteringColor) {
           flattenToCSS(value, '', result, true);
         } else if (inColorContext) {
           flattenToCSS(value, '', result, true);
         } else {
-          flattenToCSS(value, prefix ? prefix + '-' + key : key, result, false);
+          var newPrefix = prefix ? prefix + '-' + key : key;
+          flattenToCSS(value, newPrefix, result, false);
         }
       } else {
-        var cssKey = isColorContext || (prefix === '' && key === 'color')
-          ? '--' + key
-          : prefix === ''
-          ? '--' + key
-          : '--' + prefix + '-' + key;
+        var cssKey;
+        if (isColorContext || (prefix === '' && key === 'color')) {
+          cssKey = '--' + key;
+        } else if (prefix === '') {
+          cssKey = '--' + key;
+        } else {
+          cssKey = '--' + prefix + '-' + key;
+        }
         
-        // Convert hex colors to HSL format for Tailwind compatibility
         var finalValue = value;
         if (isColorContext && typeof value === 'string' && isHexColor(value)) {
           finalValue = hexToHSL(value);
@@ -176,6 +180,14 @@
     } else if (cssVars['--spacing-component-md']) {
       mapped['--spacing'] = cssVars['--spacing-component-md'];
     }
+    if (cssVars['--spacing-component-xs']) mapped['--spacing-component-xs'] = cssVars['--spacing-component-xs'];
+    if (cssVars['--spacing-component-sm']) mapped['--spacing-component-sm'] = cssVars['--spacing-component-sm'];
+    if (cssVars['--spacing-component-md']) mapped['--spacing-component-md'] = cssVars['--spacing-component-md'];
+    if (cssVars['--spacing-component-lg']) mapped['--spacing-component-lg'] = cssVars['--spacing-component-lg'];
+    if (cssVars['--spacing-component-xl']) mapped['--spacing-component-xl'] = cssVars['--spacing-component-xl'];
+    if (cssVars['--duration-fast']) mapped['--duration-fast'] = cssVars['--duration-fast'];
+    if (cssVars['--duration-normal']) mapped['--duration-normal'] = cssVars['--duration-normal'];
+    if (cssVars['--duration-slow']) mapped['--duration-slow'] = cssVars['--duration-slow'];
     return mapped;
   }
 

package/scripts/init.js

@@ -128,6 +128,18 @@ export default {
         sans: ["var(--font-sans)", "system-ui", "sans-serif"],
         body: ["var(--font-body)", "var(--font-sans)", "system-ui", "sans-serif"],
       },
+      spacing: {
+        'component-xs': "var(--spacing-component-xs, 0.25rem)",
+        'component-sm': "var(--spacing-component-sm, 0.5rem)",
+        'component-md': "var(--spacing-component-md, 1rem)",
+        'component-lg': "var(--spacing-component-lg, 1.5rem)",
+        'component-xl': "var(--spacing-component-xl, 2rem)",
+      },
+      transitionDuration: {
+        'fast': "var(--duration-fast, 150ms)",
+        'normal': "var(--duration-normal, 300ms)",
+        'slow': "var(--duration-slow, 500ms)",
+      },
     },
   },
   plugins: [],
@@ -276,9 +288,22 @@ function createTokenFiles() {
     fs.mkdirSync(themesDir, { recursive: true });
   }
   
-  // Create base.json
+  // Create base.json (or update if old structure exists)
   const basePath = path.join(tokensDir, 'base.json');
-  if (!fs.existsSync(basePath)) {
+  let needsUpdate = false;
+  if (fs.existsSync(basePath)) {
+    try {
+      const existing = JSON.parse(fs.readFileSync(basePath, 'utf8'));
+      // Check if it has old structure (typography.font or shape.radius instead of font/radius)
+      if ((existing.typography && existing.typography.font) || (existing.shape && existing.shape.radius)) {
+        needsUpdate = true;
+        log('Found old token structure in base.json, updating...', 'yellow');
+      }
+    } catch (e) {
+      needsUpdate = true;
+    }
+  }
+  if (!fs.existsSync(basePath) || needsUpdate) {
     const baseJson = {
       "_createdBy": LIBRARY_NAME,
       "color": {
@@ -314,25 +339,21 @@ function createTokenFiles() {
         },
         "base": "0.25rem"
       },
-      "typography": {
-        "font": {
-          "body": "var(--font-sans)",
-          "sans": "var(--font-sans)",
-          "mono": "var(--font-mono)"
-        }
+      "font": {
+        "body": "var(--font-sans)",
+        "sans": "var(--font-sans)",
+        "mono": "var(--font-mono)"
       },
-      "shape": {
-        "radius": {
-          "button": "0.375rem",
-          "card": "0.5rem",
-          "input": "0.375rem"
-        }
+      "radius": {
+        "button": "0.375rem",
+        "card": "0.5rem",
+        "input": "0.375rem"
       }
     };
     fs.writeFileSync(basePath, JSON.stringify(baseJson, null, 2));
-    log('Created public/tokens/base.json', 'green');
+    log('Created/Updated public/tokens/base.json', 'green');
   } else {
-    log('public/tokens/base.json already exists. Skipping...', 'yellow');
+    log('public/tokens/base.json already exists with correct structure. Skipping...', 'green');
   }
   
   // Create palettes.json
@@ -465,70 +486,111 @@ function createTokenFiles() {
     log('Created public/tokens/themes/color/dark.json', 'green');
   }
   
-  // Create typography/sans.json
+  // Create typography/sans.json (or update if old structure exists)
   const sansThemePath = path.join(themesDir, 'typography', 'sans.json');
-  if (!fs.existsSync(sansThemePath)) {
+  let needsUpdate = false;
+  if (fs.existsSync(sansThemePath)) {
+    try {
+      const existing = JSON.parse(fs.readFileSync(sansThemePath, 'utf8'));
+      // Check if it has old structure (typography.font instead of font)
+      if (existing.typography && existing.typography.font) {
+        needsUpdate = true;
+        log('Found old token structure in typography/sans.json, updating...', 'yellow');
+      }
+    } catch (e) {
+      needsUpdate = true;
+    }
+  }
+  if (!fs.existsSync(sansThemePath) || needsUpdate) {
     const sansTheme = {
       "_createdBy": LIBRARY_NAME,
-      "typography": {
-        "font": {
-          "body": "system-ui, -apple-system, sans-serif",
-          "sans": "system-ui, -apple-system, sans-serif"
-        }
+      "font": {
+        "body": "system-ui, -apple-system, sans-serif",
+        "sans": "system-ui, -apple-system, sans-serif"
       }
     };
     fs.writeFileSync(sansThemePath, JSON.stringify(sansTheme, null, 2));
-    log('Created public/tokens/themes/typography/sans.json', 'green');
+    log('Created/Updated public/tokens/themes/typography/sans.json', 'green');
   }
   
-  // Create typography/serif.json
+  // Create typography/serif.json (or update if old structure exists)
   const serifThemePath = path.join(themesDir, 'typography', 'serif.json');
-  if (!fs.existsSync(serifThemePath)) {
+  needsUpdate = false;
+  if (fs.existsSync(serifThemePath)) {
+    try {
+      const existing = JSON.parse(fs.readFileSync(serifThemePath, 'utf8'));
+      if (existing.typography && existing.typography.font) {
+        needsUpdate = true;
+        log('Found old token structure in typography/serif.json, updating...', 'yellow');
+      }
+    } catch (e) {
+      needsUpdate = true;
+    }
+  }
+  if (!fs.existsSync(serifThemePath) || needsUpdate) {
     const serifTheme = {
       "_createdBy": LIBRARY_NAME,
-      "typography": {
-        "font": {
-          "body": "Georgia, serif",
-          "sans": "Georgia, serif"
-        }
+      "font": {
+        "body": "Georgia, serif",
+        "sans": "Georgia, serif"
       }
     };
     fs.writeFileSync(serifThemePath, JSON.stringify(serifTheme, null, 2));
-    log('Created public/tokens/themes/typography/serif.json', 'green');
+    log('Created/Updated public/tokens/themes/typography/serif.json', 'green');
   }
   
-  // Create shape/smooth.json
+  // Create shape/smooth.json (or update if old structure exists)
   const smoothThemePath = path.join(themesDir, 'shape', 'smooth.json');
-  if (!fs.existsSync(smoothThemePath)) {
+  needsUpdate = false;
+  if (fs.existsSync(smoothThemePath)) {
+    try {
+      const existing = JSON.parse(fs.readFileSync(smoothThemePath, 'utf8'));
+      if (existing.shape && existing.shape.radius) {
+        needsUpdate = true;
+        log('Found old token structure in shape/smooth.json, updating...', 'yellow');
+      }
+    } catch (e) {
+      needsUpdate = true;
+    }
+  }
+  if (!fs.existsSync(smoothThemePath) || needsUpdate) {
     const smoothTheme = {
       "_createdBy": LIBRARY_NAME,
-      "shape": {
-        "radius": {
-          "button": "0.5rem",
-          "card": "0.75rem",
-          "input": "0.5rem"
-        }
+      "radius": {
+        "button": "0.5rem",
+        "card": "0.75rem",
+        "input": "0.5rem"
       }
     };
     fs.writeFileSync(smoothThemePath, JSON.stringify(smoothTheme, null, 2));
-    log('Created public/tokens/themes/shape/smooth.json', 'green');
+    log('Created/Updated public/tokens/themes/shape/smooth.json', 'green');
   }
   
-  // Create shape/sharp.json
+  // Create shape/sharp.json (or update if old structure exists)
   const sharpThemePath = path.join(themesDir, 'shape', 'sharp.json');
-  if (!fs.existsSync(sharpThemePath)) {
+  needsUpdate = false;
+  if (fs.existsSync(sharpThemePath)) {
+    try {
+      const existing = JSON.parse(fs.readFileSync(sharpThemePath, 'utf8'));
+      if (existing.shape && existing.shape.radius) {
+        needsUpdate = true;
+        log('Found old token structure in shape/sharp.json, updating...', 'yellow');
+      }
+    } catch (e) {
+      needsUpdate = true;
+    }
+  }
+  if (!fs.existsSync(sharpThemePath) || needsUpdate) {
     const sharpTheme = {
       "_createdBy": LIBRARY_NAME,
-      "shape": {
-        "radius": {
-          "button": "0",
-          "card": "0",
-          "input": "0"
-        }
+      "radius": {
+        "button": "0",
+        "card": "0",
+        "input": "0"
       }
     };
     fs.writeFileSync(sharpThemePath, JSON.stringify(sharpTheme, null, 2));
-    log('Created public/tokens/themes/shape/sharp.json', 'green');
+    log('Created/Updated public/tokens/themes/shape/sharp.json', 'green');
   }
   
   // Create density/comfortable.json