shru-design-system 0.1.3 → 0.1.4

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: [],
@@ -314,19 +326,15 @@ 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));
@@ -470,11 +478,9 @@ function createTokenFiles() {
   if (!fs.existsSync(sansThemePath)) {
     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));
@@ -486,11 +492,9 @@ function createTokenFiles() {
   if (!fs.existsSync(serifThemePath)) {
     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));
@@ -502,12 +506,10 @@ function createTokenFiles() {
   if (!fs.existsSync(smoothThemePath)) {
     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));
@@ -519,12 +521,10 @@ function createTokenFiles() {
   if (!fs.existsSync(sharpThemePath)) {
     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));