shru-design-system 0.1.4 → 0.1.6

package/scripts/apply-theme-sync.js

@@ -54,8 +54,20 @@
       var xhr = new XMLHttpRequest();
       xhr.open('GET', path, false);
       xhr.send(null);
+      
+      // 404 means file doesn't exist - return null
+      if (xhr.status === 404) {
+        return null;
+      }
+      
       if (xhr.status === 200 || xhr.status === 0) {
-        return JSON.parse(xhr.responseText);
+        var contentType = xhr.getResponseHeader('content-type');
+        // Check if response is actually JSON (not HTML error page)
+        if (contentType && contentType.includes('application/json')) {
+          return JSON.parse(xhr.responseText);
+        }
+        // If not JSON (likely HTML error page), return null
+        return null;
       }
     } catch (e) {}
     return null;
@@ -170,24 +182,26 @@
   }
 
   function mapToTailwindVars(cssVars) {
+    // Start with all generated variables - they're all valid CSS variables
     var mapped = {};
     for (var key in cssVars) mapped[key] = cssVars[key];
-    if (cssVars['--radius-button']) mapped['--radius'] = cssVars['--radius-button'];
-    if (cssVars['--radius-card']) mapped['--radius-lg'] = cssVars['--radius-card'];
-    if (cssVars['--font-body']) mapped['--font-sans'] = cssVars['--font-body'];
-    if (cssVars['--spacing-base']) {
+    
+    // Only add convenience mappings for Tailwind's expected variable names
+    if (cssVars['--radius-button'] && !cssVars['--radius']) {
+      mapped['--radius'] = cssVars['--radius-button'];
+    }
+    if (cssVars['--radius-card'] && !cssVars['--radius-lg']) {
+      mapped['--radius-lg'] = cssVars['--radius-card'];
+    }
+    if (cssVars['--font-body'] && !cssVars['--font-sans']) {
+      mapped['--font-sans'] = cssVars['--font-body'];
+    }
+    if (cssVars['--spacing-base'] && !cssVars['--spacing']) {
       mapped['--spacing'] = cssVars['--spacing-base'];
-    } else if (cssVars['--spacing-component-md']) {
+    } else if (cssVars['--spacing-component-md'] && !cssVars['--spacing']) {
       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

@@ -288,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": {
@@ -338,9 +351,9 @@ function createTokenFiles() {
       }
     };
     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
@@ -473,9 +486,22 @@ 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,
       "font": {
@@ -484,12 +510,24 @@ function createTokenFiles() {
       }
     };
     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,
       "font": {
@@ -498,12 +536,24 @@ function createTokenFiles() {
       }
     };
     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,
       "radius": {
@@ -513,12 +563,24 @@ function createTokenFiles() {
       }
     };
     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,
       "radius": {
@@ -528,7 +590,7 @@ function createTokenFiles() {
       }
     };
     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