shru-design-system 0.1.9 → 0.1.11

package/dist/index.mjs

@@ -735,6 +735,331 @@ async function getTheme(category, themeId) {
   return categories[category]?.themes[themeId] || null;
 }
 
+// src/tokens/base.json
+var base_default = {
+  _createdBy: "shru-design-system library",
+  color: {
+    primary: "{palette.blue.500}",
+    "primary-hover": "{palette.blue.600}",
+    "primary-foreground": "{palette.white}",
+    secondary: "{palette.gray.100}",
+    "secondary-foreground": "{palette.gray.900}",
+    background: "{palette.white}",
+    foreground: "{palette.gray.900}",
+    card: "{palette.white}",
+    "card-foreground": "{palette.gray.900}",
+    popover: "{palette.white}",
+    "popover-foreground": "{palette.gray.900}",
+    muted: "{palette.gray.100}",
+    "muted-foreground": "{palette.gray.500}",
+    accent: "{palette.gray.100}",
+    "accent-foreground": "{palette.gray.900}",
+    destructive: "{palette.red.500}",
+    "destructive-foreground": "{palette.white}",
+    border: "{palette.gray.200}",
+    input: "{palette.gray.200}",
+    ring: "{palette.gray.400}",
+    skeleton: "{palette.gray.200}"
+  },
+  spacing: {
+    component: {
+      xs: "0.25rem",
+      sm: "0.5rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem"
+    },
+    base: "0.25rem"
+  },
+  font: {
+    body: "var(--font-sans)",
+    sans: "var(--font-sans)",
+    mono: "var(--font-mono)"
+  },
+  radius: {
+    button: "0.375rem",
+    card: "0.5rem",
+    input: "0.375rem"
+  }
+};
+
+// src/tokens/palettes.json
+var palettes_default = {
+  _createdBy: "shru-design-system library",
+  palette: {
+    white: "#ffffff",
+    black: "#000000",
+    transparent: "transparent",
+    gray: {
+      "50": "#f9fafb",
+      "100": "#f3f4f6",
+      "200": "#e5e7eb",
+      "300": "#d1d5db",
+      "400": "#9ca3af",
+      "500": "#6b7280",
+      "600": "#4b5563",
+      "700": "#374151",
+      "800": "#1f2937",
+      "900": "#111827",
+      "950": "#030712"
+    },
+    blue: {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a",
+      "950": "#172554"
+    },
+    red: {
+      "50": "#fef2f2",
+      "100": "#fee2e2",
+      "200": "#fecaca",
+      "300": "#fca5a5",
+      "400": "#f87171",
+      "500": "#ef4444",
+      "600": "#dc2626",
+      "700": "#b91c1c",
+      "800": "#991b1b",
+      "900": "#7f1d1d",
+      "950": "#450a0a"
+    },
+    purple: {
+      "50": "#faf5ff",
+      "100": "#f3e8ff",
+      "200": "#e9d5ff",
+      "300": "#d8b4fe",
+      "400": "#c084fc",
+      "500": "#a855f7",
+      "600": "#9333ea",
+      "700": "#7e22ce",
+      "800": "#6b21a8",
+      "900": "#581c87",
+      "950": "#3b0764"
+    },
+    pink: {
+      "50": "#fdf2f8",
+      "100": "#fce7f3",
+      "200": "#fbcfe8",
+      "300": "#f9a8d4",
+      "400": "#f472b6",
+      "500": "#ec4899",
+      "600": "#db2777",
+      "700": "#be185d",
+      "800": "#9f1239",
+      "900": "#831843",
+      "950": "#500724"
+    }
+  }
+};
+
+// src/tokens/themes/color/dark.json
+var dark_default = {
+  _createdBy: "shru-design-system library",
+  color: {
+    primary: "{palette.blue.400}",
+    "primary-foreground": "{palette.gray.900}",
+    background: "{palette.gray.900}",
+    foreground: "{palette.gray.50}",
+    card: "{palette.gray.800}",
+    "card-foreground": "{palette.gray.50}",
+    popover: "{palette.gray.800}",
+    "popover-foreground": "{palette.gray.50}",
+    secondary: "{palette.gray.800}",
+    "secondary-foreground": "{palette.gray.50}",
+    muted: "{palette.gray.800}",
+    "muted-foreground": "{palette.gray.400}",
+    accent: "{palette.gray.800}",
+    "accent-foreground": "{palette.gray.50}",
+    destructive: "{palette.red.500}",
+    "destructive-foreground": "{palette.white}",
+    border: "{palette.gray.700}",
+    input: "{palette.gray.700}",
+    ring: "{palette.gray.600}",
+    skeleton: "{palette.gray.700}"
+  }
+};
+
+// src/tokens/themes/color/white.json
+var white_default = {
+  _createdBy: "shru-design-system library",
+  color: {
+    primary: "{palette.blue.500}",
+    "primary-foreground": "{palette.white}",
+    background: "{palette.white}",
+    foreground: "{palette.gray.900}",
+    card: "{palette.white}",
+    "card-foreground": "{palette.gray.900}",
+    popover: "{palette.white}",
+    "popover-foreground": "{palette.gray.900}",
+    secondary: "{palette.gray.100}",
+    "secondary-foreground": "{palette.gray.900}",
+    muted: "{palette.gray.100}",
+    "muted-foreground": "{palette.gray.500}",
+    accent: "{palette.gray.100}",
+    "accent-foreground": "{palette.gray.900}",
+    destructive: "{palette.red.500}",
+    "destructive-foreground": "{palette.white}",
+    border: "{palette.gray.200}",
+    input: "{palette.gray.200}",
+    ring: "{palette.gray.400}",
+    skeleton: "{palette.gray.200}"
+  }
+};
+
+// src/tokens/themes/typography/sans.json
+var sans_default = {
+  _createdBy: "shru-design-system library",
+  font: {
+    body: "system-ui, -apple-system, sans-serif",
+    sans: "system-ui, -apple-system, sans-serif"
+  }
+};
+
+// src/tokens/themes/typography/serif.json
+var serif_default = {
+  _createdBy: "shru-design-system library",
+  font: {
+    body: "Georgia, serif",
+    sans: "Georgia, serif"
+  }
+};
+
+// src/tokens/themes/shape/smooth.json
+var smooth_default = {
+  _createdBy: "shru-design-system library",
+  radius: {
+    button: "0.5rem",
+    card: "0.75rem",
+    input: "0.5rem"
+  }
+};
+
+// src/tokens/themes/shape/sharp.json
+var sharp_default = {
+  _createdBy: "shru-design-system library",
+  radius: {
+    button: "0",
+    card: "0",
+    input: "0"
+  }
+};
+
+// src/tokens/themes/density/comfortable.json
+var comfortable_default = {
+  _createdBy: "shru-design-system library",
+  spacing: {
+    component: {
+      xs: "0.5rem",
+      sm: "0.75rem",
+      md: "1.25rem",
+      lg: "2rem",
+      xl: "2.5rem"
+    }
+  }
+};
+
+// src/tokens/themes/density/compact.json
+var compact_default = {
+  _createdBy: "shru-design-system library",
+  spacing: {
+    component: {
+      xs: "0.25rem",
+      sm: "0.5rem",
+      md: "0.75rem",
+      lg: "1rem",
+      xl: "1.5rem"
+    }
+  }
+};
+
+// src/tokens/themes/animation/gentle.json
+var gentle_default = {
+  _createdBy: "shru-design-system library",
+  animation: {
+    duration: {
+      fast: "150ms",
+      normal: "300ms",
+      slow: "500ms"
+    }
+  }
+};
+
+// src/tokens/themes/animation/brisk.json
+var brisk_default = {
+  _createdBy: "shru-design-system library",
+  animation: {
+    duration: {
+      fast: "100ms",
+      normal: "200ms",
+      slow: "300ms"
+    }
+  }
+};
+
+// src/tokens/themes/custom/brand.json
+var brand_default = {
+  _createdBy: "shru-design-system library",
+  color: {
+    primary: "{palette.purple.600}",
+    "primary-foreground": "{palette.white}",
+    accent: "{palette.pink.500}",
+    "accent-foreground": "{palette.white}"
+  },
+  radius: {
+    button: "0.5rem",
+    card: "0.75rem"
+  }
+};
+
+// src/tokens/themes/custom/minimal.json
+var minimal_default = {
+  _createdBy: "shru-design-system library",
+  color: {
+    primary: "{palette.gray.700}",
+    "primary-foreground": "{palette.white}",
+    background: "{palette.white}",
+    foreground: "{palette.gray.900}"
+  },
+  spacing: {
+    component: {
+      xs: "0.375rem",
+      sm: "0.5rem",
+      md: "0.75rem"
+    }
+  }
+};
+
+// src/themes/tokenLoader.ts
+var EMBEDDED_TOKEN_BASE = "__EMBEDDED__";
+var EMBEDDED_TOKENS = {
+  "base.json": base_default,
+  "palettes.json": palettes_default,
+  "themes/color/dark.json": dark_default,
+  "themes/color/white.json": white_default,
+  "themes/typography/sans.json": sans_default,
+  "themes/typography/serif.json": serif_default,
+  "themes/shape/smooth.json": smooth_default,
+  "themes/shape/sharp.json": sharp_default,
+  "themes/density/comfortable.json": comfortable_default,
+  "themes/density/compact.json": compact_default,
+  "themes/animation/gentle.json": gentle_default,
+  "themes/animation/brisk.json": brisk_default,
+  "themes/custom/brand.json": brand_default,
+  "themes/custom/minimal.json": minimal_default
+};
+function normalizeTokenPath(path) {
+  return path.replace(/^\/?tokens\//, "");
+}
+function getEmbeddedToken(normalizedPath) {
+  return EMBEDDED_TOKENS[normalizedPath];
+}
+
 // src/themes/themeUtils.ts
 function getThemeName(selectedThemes) {
   const parts = [];
@@ -797,31 +1122,57 @@ function deepMerge(target, source) {
   return output;
 }
 var tokenCache = /* @__PURE__ */ new Map();
+function getTokenBaseCandidates() {
+  const bases = [];
+  if (typeof window !== "undefined" && window.__THEME_TOKENS_BASE__) {
+    bases.push(window.__THEME_TOKENS_BASE__);
+  }
+  const env = typeof globalThis !== "undefined" ? globalThis.process?.env : void 0;
+  if (env?.DESIGN_SYSTEM_TOKENS_BASE) {
+    bases.push(env.DESIGN_SYSTEM_TOKENS_BASE);
+  }
+  bases.push(EMBEDDED_TOKEN_BASE);
+  bases.push("/tokens");
+  return Array.from(new Set(bases.filter(Boolean)));
+}
 async function loadTokenFile(path) {
-  if (tokenCache.has(path)) {
-    return deepClone(tokenCache.get(path));
+  const normalizedPath = normalizeTokenPath(path);
+  if (tokenCache.has(normalizedPath)) {
+    return deepClone(tokenCache.get(normalizedPath));
   }
-  try {
-    const response = await fetch(path);
-    if (!response.ok) {
-      if (response.status === 404) {
-        return null;
+  const bases = getTokenBaseCandidates();
+  for (const base of bases) {
+    if (base === EMBEDDED_TOKEN_BASE) {
+      const embedded = getEmbeddedToken(normalizedPath);
+      if (embedded) {
+        tokenCache.set(normalizedPath, embedded);
+        return deepClone(embedded);
       }
-      throw new Error(`Failed to load ${path}: ${response.statusText}`);
-    }
-    const contentType = response.headers.get("content-type");
-    if (!contentType || !contentType.includes("application/json")) {
-      return null;
+      continue;
     }
-    const data = await response.json();
-    tokenCache.set(path, data);
-    return deepClone(data);
-  } catch (error) {
-    if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
-      console.warn(`Error loading token file ${path}:`, error);
+    const url = base.endsWith("/") ? `${base}${normalizedPath}` : `${base}/${normalizedPath}`;
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        if (response.status === 404) {
+          continue;
+        }
+        throw new Error(`Failed to load ${url}: ${response.statusText}`);
+      }
+      const contentType = response.headers.get("content-type");
+      if (!contentType || !contentType.includes("application/json")) {
+        continue;
+      }
+      const data = await response.json();
+      tokenCache.set(normalizedPath, data);
+      return deepClone(data);
+    } catch (error) {
+      if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+        console.warn(`Error loading token file ${url}:`, error);
+      }
     }
-    return null;
   }
+  return null;
 }
 function resolveReferences(tokens, palette) {
   const resolved = JSON.parse(JSON.stringify(tokens));
@@ -1468,10 +1819,24 @@ function ThemeRingAsync({
 
 // src/themes/applyThemeSync.ts
 var STORAGE_KEY2 = "design-system-theme";
+function getTokenBaseCandidatesSync() {
+  const bases = [];
+  if (typeof window !== "undefined" && window.__THEME_TOKENS_BASE__) {
+    bases.push(window.__THEME_TOKENS_BASE__);
+  }
+  const env = typeof globalThis !== "undefined" ? globalThis.process?.env : void 0;
+  if (env?.DESIGN_SYSTEM_TOKENS_BASE) {
+    bases.push(env.DESIGN_SYSTEM_TOKENS_BASE);
+  }
+  bases.push(EMBEDDED_TOKEN_BASE);
+  bases.push("/tokens");
+  return Array.from(new Set(bases.filter(Boolean)));
+}
 function applyThemeSync() {
   if (typeof window === "undefined" || typeof document === "undefined") {
     return;
   }
+  const tokenBases = getTokenBaseCandidatesSync();
   let selectedThemes = getDefaultThemes();
   try {
     const stored = localStorage.getItem(STORAGE_KEY2);
@@ -1481,17 +1846,17 @@ function applyThemeSync() {
   } catch {
   }
   try {
-    const base = loadJSONSync("/tokens/base.json");
+    const base = loadJSONSync("/tokens/base.json", tokenBases);
     if (!base) {
       return;
     }
-    const palettes = loadJSONSync("/tokens/palettes.json");
+    const palettes = loadJSONSync("/tokens/palettes.json", tokenBases);
     const palette = palettes?.palette || {};
     let merged = deepMergeSync(base, { palette });
     for (const category of THEME_CATEGORY_ORDER) {
       const themeId = selectedThemes[category];
       if (!themeId) continue;
-      const themeData = loadJSONSync(`/tokens/themes/${category}/${themeId}.json`);
+      const themeData = loadJSONSync(`/tokens/themes/${category}/${themeId}.json`, tokenBases);
       if (themeData) {
         merged = deepMergeSync(merged, themeData);
       }
@@ -1506,8 +1871,8 @@ ${Object.entries(mappedVars).map(([key, value]) => `  ${key}: ${value};`).join("
     if (!styleTag) {
       styleTag = document.createElement("style");
       styleTag.id = "dynamic-theme";
-      document.head.insertBefore(styleTag, document.head.firstChild);
     }
+    document.head.appendChild(styleTag);
     styleTag.textContent = css;
   } catch (error) {
     if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
@@ -1515,22 +1880,33 @@ ${Object.entries(mappedVars).map(([key, value]) => `  ${key}: ${value};`).join("
     }
   }
 }
-function loadJSONSync(path) {
-  try {
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", path, false);
-    xhr.send(null);
-    if (xhr.status === 404) {
-      return null;
-    }
-    if (xhr.status === 200 || xhr.status === 0) {
-      const contentType = xhr.getResponseHeader("content-type");
-      if (contentType && contentType.includes("application/json")) {
-        return JSON.parse(xhr.responseText);
+function loadJSONSync(path, bases) {
+  const normalizedPath = normalizeTokenPath(path);
+  for (const base of bases) {
+    if (base === EMBEDDED_TOKEN_BASE) {
+      const embedded = getEmbeddedToken(normalizedPath);
+      if (embedded) {
+        return deepCloneSync(embedded);
       }
-      return null;
+      continue;
+    }
+    try {
+      const xhr = new XMLHttpRequest();
+      const url = base.endsWith("/") ? `${base}${normalizedPath}` : `${base}/${normalizedPath}`;
+      xhr.open("GET", url, false);
+      xhr.send(null);
+      if (xhr.status === 404) {
+        continue;
+      }
+      if (xhr.status === 200 || xhr.status === 0) {
+        const contentType = xhr.getResponseHeader("content-type");
+        if (contentType && contentType.includes("application/json")) {
+          return JSON.parse(xhr.responseText);
+        }
+        continue;
+      }
+    } catch {
     }
-  } catch {
   }
   return null;
 }
@@ -1551,6 +1927,9 @@ function deepMergeSync(target, source) {
   }
   return output;
 }
+function deepCloneSync(value) {
+  return JSON.parse(JSON.stringify(value));
+}
 function isObjectSync(item) {
   return item && typeof item === "object" && !Array.isArray(item);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shru-design-system",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "A React component library with atoms and molecules built on Radix UI and Tailwind CSS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/scripts/apply-theme-sync.js

@@ -42,6 +42,20 @@
   // 2. scripts/themeConfig.js - THEME_CATEGORY_ORDER (JavaScript version)
   const THEME_CATEGORY_ORDER = ['color', 'typography', 'shape', 'density', 'animation', 'custom'];
 
+  // Token base resolution (standalone script cannot import helpers)
+  // Order: consumer override → env override → public fallback.
+  function getTokenBaseCandidates() {
+    var bases = [];
+    if (typeof window !== 'undefined' && window.__THEME_TOKENS_BASE__) {
+      bases.push(window.__THEME_TOKENS_BASE__);
+    }
+    if (typeof process !== 'undefined' && process.env && process.env.DESIGN_SYSTEM_TOKENS_BASE) {
+      bases.push(process.env.DESIGN_SYSTEM_TOKENS_BASE);
+    }
+    bases.push('/tokens');
+    return Array.from(new Set(bases.filter(Boolean)));
+  }
+
   // Get theme from localStorage (optimized - single read)
   var selectedThemes = DEFAULT_THEMES;
   try {
@@ -71,27 +85,33 @@
     return output;
   }
 
-  function loadJSONSync(path) {
-    try {
-      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) {
-        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);
+  function loadJSONSync(relativePath, bases) {
+    for (var i = 0; i < bases.length; i++) {
+      var base = bases[i];
+      try {
+        var url = base.endsWith('/') ? base + relativePath : base + '/' + relativePath;
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url, false);
+        xhr.send(null);
+        
+        // 404 means file doesn't exist - try next base
+        if (xhr.status === 404) {
+          continue;
+        }
+        
+        if (xhr.status === 200 || xhr.status === 0) {
+          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), try next base
+          continue;
         }
-        // If not JSON (likely HTML error page), return null
-        return null;
+      } catch (e) {
+        // Try next base
       }
-    } catch (e) {}
+    }
     return null;
   }
 
@@ -252,10 +272,11 @@
 
   // Apply theme synchronously (optimized)
   try {
-    var base = loadJSONSync('/tokens/base.json');
+    var tokenBases = getTokenBaseCandidates();
+    var base = loadJSONSync('base.json', tokenBases);
     if (!base) return;
 
-    var palettes = loadJSONSync('/tokens/palettes.json');
+    var palettes = loadJSONSync('palettes.json', tokenBases);
     var palette = (palettes && palettes.palette) || {};
     var merged = deepMerge(base, { palette: palette });
 
@@ -265,7 +286,7 @@
       var themeId = selectedThemes[category];
       if (!themeId) continue;
 
-      var themeData = loadJSONSync('/tokens/themes/' + category + '/' + themeId + '.json');
+      var themeData = loadJSONSync('themes/' + category + '/' + themeId + '.json', tokenBases);
       if (themeData) merged = deepMerge(merged, themeData);
       // If themeData is null, file doesn't exist - skip silently (custom themes are optional)
     }
@@ -287,8 +308,9 @@
     if (!styleTag) {
       styleTag = document.createElement('style');
       styleTag.id = 'dynamic-theme';
-      document.head.insertBefore(styleTag, document.head.firstChild);
     }
+    // Always append (moves it to the end) so vars win over earlier styles
+    document.head.appendChild(styleTag);
     styleTag.textContent = css;
   } catch (error) {
     // Silently fail - theme will apply via React hook