@phcdevworks/spectre-tokens 0.0.4 → 0.2.0

package/dist/index.js

@@ -113,12 +113,14 @@ var core_default = {
     onPage: {
       default: "#0f172a",
       muted: "#475569",
-      subtle: "#94a3b8"
+      subtle: "#94a3b8",
+      meta: "#94a3b8"
     },
     onSurface: {
       default: "#0f172a",
       muted: "#6b7280",
-      subtle: "#94a3b8"
+      subtle: "#94a3b8",
+      meta: "#94a3b8"
     }
   },
   component: {
@@ -133,6 +135,26 @@ var core_default = {
     button: {
       textDefault: "#0f172a",
       textOnPrimary: "#ffffff"
+    },
+    badge: {
+      neutralBg: "#f1f5f9",
+      neutralText: "#334155",
+      infoBg: "#dbeafe",
+      infoText: "#1d4ed8",
+      successBg: "#dcfce7",
+      successText: "#15803d",
+      warningBg: "#fef3c7",
+      warningText: "#b45309",
+      dangerBg: "#fee2e2",
+      dangerText: "#b91c1c"
+    },
+    iconBox: {
+      bg: "#ffffff",
+      border: "#e2e8f0",
+      iconDefault: "#6c32e6",
+      iconSuccess: "#16a34a",
+      iconWarning: "#d97706",
+      iconDanger: "#dc2626"
     }
   },
   modes: {
@@ -161,6 +183,9 @@ var core_default = {
           },
           subtle: {
             value: "#94a3b8"
+          },
+          meta: {
+            value: "#94a3b8"
           }
         },
         onSurface: {
@@ -172,6 +197,9 @@ var core_default = {
           },
           subtle: {
             value: "#94a3b8"
+          },
+          meta: {
+            value: "#94a3b8"
           }
         }
       },
@@ -199,6 +227,58 @@ var core_default = {
           textOnPrimary: {
             value: "#ffffff"
           }
+        },
+        badge: {
+          neutralBg: {
+            value: "#f1f5f9"
+          },
+          neutralText: {
+            value: "#334155"
+          },
+          infoBg: {
+            value: "#dbeafe"
+          },
+          infoText: {
+            value: "#1d4ed8"
+          },
+          successBg: {
+            value: "#dcfce7"
+          },
+          successText: {
+            value: "#15803d"
+          },
+          warningBg: {
+            value: "#fef3c7"
+          },
+          warningText: {
+            value: "#b45309"
+          },
+          dangerBg: {
+            value: "#fee2e2"
+          },
+          dangerText: {
+            value: "#b91c1c"
+          }
+        },
+        iconBox: {
+          bg: {
+            value: "#ffffff"
+          },
+          border: {
+            value: "#e2e8f0"
+          },
+          iconDefault: {
+            value: "#6c32e6"
+          },
+          iconSuccess: {
+            value: "#16a34a"
+          },
+          iconWarning: {
+            value: "#d97706"
+          },
+          iconDanger: {
+            value: "#dc2626"
+          }
         }
       }
     },
@@ -227,6 +307,9 @@ var core_default = {
           },
           subtle: {
             value: "#94a3b8"
+          },
+          meta: {
+            value: "#94a3b8"
           }
         },
         onSurface: {
@@ -238,6 +321,9 @@ var core_default = {
           },
           subtle: {
             value: "#94a3b8"
+          },
+          meta: {
+            value: "#94a3b8"
           }
         }
       },
@@ -265,6 +351,58 @@ var core_default = {
           textOnPrimary: {
             value: "#ffffff"
           }
+        },
+        badge: {
+          neutralBg: {
+            value: "#334155"
+          },
+          neutralText: {
+            value: "#f1f5f9"
+          },
+          infoBg: {
+            value: "#1e40af"
+          },
+          infoText: {
+            value: "#dbeafe"
+          },
+          successBg: {
+            value: "#166534"
+          },
+          successText: {
+            value: "#dcfce7"
+          },
+          warningBg: {
+            value: "#92400e"
+          },
+          warningText: {
+            value: "#fef3c7"
+          },
+          dangerBg: {
+            value: "#991b1b"
+          },
+          dangerText: {
+            value: "#fee2e2"
+          }
+        },
+        iconBox: {
+          bg: {
+            value: "#1e293b"
+          },
+          border: {
+            value: "#334155"
+          },
+          iconDefault: {
+            value: "#a37aff"
+          },
+          iconSuccess: {
+            value: "#4ade80"
+          },
+          iconWarning: {
+            value: "#fbbf24"
+          },
+          iconDanger: {
+            value: "#f87171"
+          }
         }
       }
     }
@@ -360,17 +498,49 @@ var core_default = {
       text: "#94a3b8"
     }
   },
-  spacing: {
-    none: "0rem",
-    "3xs": "0.125rem",
-    "2xs": "0.25rem",
-    xs: "0.5rem",
-    sm: "0.75rem",
-    md: "1rem",
-    lg: "1.5rem",
-    xl: "2rem",
-    "2xl": "3rem",
-    "3xl": "4rem"
+  layout: {
+    section: {
+      padding: {
+        sm: "1.5rem",
+        md: "2rem",
+        lg: "3rem"
+      },
+      gap: {
+        sm: "1rem",
+        md: "1.5rem",
+        lg: "2rem"
+      }
+    },
+    stack: {
+      gap: {
+        sm: "0.5rem",
+        md: "0.75rem",
+        lg: "1rem"
+      }
+    },
+    container: {
+      paddingInline: {
+        sm: "1rem",
+        md: "1.5rem",
+        lg: "2rem"
+      }
+    }
+  },
+  space: {
+    "0": "0rem",
+    "4": "0.25rem",
+    "8": "0.5rem",
+    "12": "0.75rem",
+    "16": "1rem",
+    "20": "1.25rem",
+    "24": "1.5rem",
+    "32": "2rem",
+    "40": "2.5rem",
+    "48": "3rem",
+    "56": "3.5rem",
+    "64": "4rem",
+    "80": "5rem",
+    "96": "6rem"
   },
   radii: {
     none: "0",
@@ -383,6 +553,38 @@ var core_default = {
     card: "#334155",
     input: "#cbd5f5"
   },
+  font: {
+    xs: {
+      size: "0.75rem",
+      lineHeight: "1.25rem",
+      weight: 400
+    },
+    sm: {
+      size: "0.875rem",
+      lineHeight: "1.5rem",
+      weight: 400
+    },
+    md: {
+      size: "1rem",
+      lineHeight: "1.75rem",
+      weight: 500
+    },
+    lg: {
+      size: "1.25rem",
+      lineHeight: "2rem",
+      weight: 500
+    },
+    xl: {
+      size: "1.5rem",
+      lineHeight: "2.125rem",
+      weight: 600
+    },
+    "2xl": {
+      size: "1.875rem",
+      lineHeight: "2.5rem",
+      weight: 600
+    }
+  },
   typography: {
     families: {
       sans: "'Inter', 'Helvetica Neue', Arial, sans-serif",
@@ -520,67 +722,143 @@ var toVariableName = (prefix, ...parts) => {
   const filtered = parts.filter(Boolean).map(formatKey);
   return `--${prefix}-${filtered.join("-")}`;
 };
+var BADGE_VARIANTS = [
+  { variant: "neutral", bgKey: "neutralBg", textKey: "neutralText" },
+  { variant: "info", bgKey: "infoBg", textKey: "infoText" },
+  { variant: "success", bgKey: "successBg", textKey: "successText" },
+  { variant: "warning", bgKey: "warningBg", textKey: "warningText" },
+  { variant: "danger", bgKey: "dangerBg", textKey: "dangerText" }
+];
+var ICON_BOX_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "border", tokenKey: "border" },
+  { name: "icon-default", tokenKey: "iconDefault" },
+  { name: "icon-success", tokenKey: "iconSuccess" },
+  { name: "icon-warning", tokenKey: "iconWarning" },
+  { name: "icon-danger", tokenKey: "iconDanger" }
+];
 var createCssVariableMap = (tokens2, options = {}) => {
   const prefix = options.prefix ?? DEFAULT_PREFIX;
   const map = {};
+  const baseTokens = tokens2;
   const assign = (name, value) => {
+    const resolved = resolveSemanticValue(value);
+    if (resolved !== void 0) {
+      map[name] = resolved;
+      return;
+    }
     if (value === void 0) return;
     map[name] = String(value);
   };
-  Object.entries(tokens2.colors).forEach(([group, scale]) => {
+  Object.entries(baseTokens.colors).forEach(([group, scale]) => {
     Object.entries(scale).forEach(([step, value]) => {
       assign(toVariableName(prefix, "color", group, step), value);
     });
   });
-  Object.entries(tokens2.spacing).forEach(([key, value]) => {
-    assign(toVariableName(prefix, "space", key), value);
-  });
-  Object.entries(tokens2.radii).forEach(([key, value]) => {
+  if (baseTokens.space) {
+    Object.entries(baseTokens.space).forEach(([key, value]) => {
+      assign(toVariableName(prefix, "space", key), value);
+    });
+  }
+  if (baseTokens.layout) {
+    const { section, stack, container } = baseTokens.layout;
+    if (section?.padding) {
+      Object.entries(section.padding).forEach(([key, value]) => {
+        assign(toVariableName(prefix, "layout", "section", "padding", key), value);
+      });
+    }
+    if (section?.gap) {
+      Object.entries(section.gap).forEach(([key, value]) => {
+        assign(toVariableName(prefix, "layout", "section", "gap", key), value);
+      });
+    }
+    if (stack?.gap) {
+      Object.entries(stack.gap).forEach(([key, value]) => {
+        assign(toVariableName(prefix, "layout", "stack", "gap", key), value);
+      });
+    }
+    if (container?.paddingInline) {
+      Object.entries(container.paddingInline).forEach(([key, value]) => {
+        assign(toVariableName(prefix, "layout", "container", "padding-inline", key), value);
+      });
+    }
+  }
+  Object.entries(baseTokens.radii).forEach(([key, value]) => {
     assign(toVariableName(prefix, "radius", key), value);
   });
-  Object.entries(tokens2.typography.families).forEach(([key, value]) => {
+  Object.entries(baseTokens.typography.families).forEach(([key, value]) => {
     assign(toVariableName(prefix, "font-family", key), value);
   });
-  Object.entries(tokens2.typography.scale).forEach(([key, entry]) => {
-    assign(toVariableName(prefix, "font", key, "size"), entry.fontSize);
-    assign(toVariableName(prefix, "font", key, "line-height"), entry.lineHeight);
-    assign(toVariableName(prefix, "font", key, "weight"), entry.fontWeight);
+  const typographyScale = baseTokens.typography?.scale ?? {};
+  const fontScale = baseTokens.font;
+  if (fontScale && Object.keys(fontScale).length > 0) {
+    Object.entries(fontScale).forEach(([key, entry]) => {
+      assign(toVariableName(prefix, "font", key, "size"), entry.size);
+      assign(toVariableName(prefix, "font", key, "line-height"), entry.lineHeight);
+      assign(toVariableName(prefix, "font", key, "weight"), entry.weight);
+    });
+  } else {
+    Object.entries(typographyScale).forEach(([key, entry]) => {
+      assign(toVariableName(prefix, "font", key, "size"), entry.fontSize);
+      assign(toVariableName(prefix, "font", key, "line-height"), entry.lineHeight);
+      assign(toVariableName(prefix, "font", key, "weight"), entry.fontWeight);
+    });
+  }
+  Object.entries(typographyScale).forEach(([key, entry]) => {
     assign(toVariableName(prefix, "font", key, "letter-spacing"), entry.letterSpacing);
   });
-  Object.entries(tokens2.shadows).forEach(([key, value]) => {
+  assign(toVariableName(prefix, "text", "on", "page", "default"), tokens2.text.onPage.default);
+  assign(toVariableName(prefix, "text", "on", "page", "muted"), tokens2.text.onPage.muted);
+  assign(toVariableName(prefix, "text", "on", "surface", "default"), tokens2.text.onSurface.default);
+  assign(toVariableName(prefix, "text", "on", "surface", "muted"), tokens2.text.onSurface.muted);
+  assign(toVariableName(prefix, "text", "on", "surface", "meta"), tokens2.text.onSurface.meta);
+  const badge = tokens2.component?.badge;
+  if (badge) {
+    BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
+      assign(toVariableName(prefix, "badge", variant, "bg"), badge[bgKey]);
+      assign(toVariableName(prefix, "badge", variant, "text"), badge[textKey]);
+    });
+  }
+  const iconBox = tokens2.component?.iconBox;
+  if (iconBox) {
+    ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
+      assign(toVariableName(prefix, "icon-box", name), iconBox[tokenKey]);
+    });
+  }
+  Object.entries(baseTokens.shadows).forEach(([key, value]) => {
     assign(toVariableName(prefix, "shadow", key), value);
   });
-  Object.entries(tokens2.breakpoints).forEach(([key, value]) => {
+  Object.entries(baseTokens.breakpoints).forEach(([key, value]) => {
     assign(toVariableName(prefix, "breakpoint", key), value);
   });
-  Object.entries(tokens2.zIndex).forEach(([key, value]) => {
+  Object.entries(baseTokens.zIndex).forEach(([key, value]) => {
     assign(toVariableName(prefix, "z-index", key), value);
   });
-  Object.entries(tokens2.transitions.duration).forEach(([key, value]) => {
+  Object.entries(baseTokens.transitions.duration).forEach(([key, value]) => {
     assign(toVariableName(prefix, "duration", key), value);
   });
-  Object.entries(tokens2.transitions.easing).forEach(([key, value]) => {
+  Object.entries(baseTokens.transitions.easing).forEach(([key, value]) => {
     assign(toVariableName(prefix, "easing", key), value);
   });
-  Object.entries(tokens2.opacity).forEach(([key, value]) => {
+  Object.entries(baseTokens.opacity).forEach(([key, value]) => {
     assign(toVariableName(prefix, "opacity", key), value);
   });
-  assign(toVariableName(prefix, "focus-ring-width"), tokens2.accessibility.focusRing.width);
-  assign(toVariableName(prefix, "focus-ring-offset"), tokens2.accessibility.focusRing.offset);
-  assign(toVariableName(prefix, "focus-ring-style"), tokens2.accessibility.focusRing.style);
-  assign(toVariableName(prefix, "min-touch-target"), tokens2.accessibility.minTouchTarget);
-  assign(toVariableName(prefix, "min-text-size"), tokens2.accessibility.minTextSize);
-  Object.entries(tokens2.buttons).forEach(([variant, states]) => {
+  assign(toVariableName(prefix, "focus-ring-width"), baseTokens.accessibility.focusRing.width);
+  assign(toVariableName(prefix, "focus-ring-offset"), baseTokens.accessibility.focusRing.offset);
+  assign(toVariableName(prefix, "focus-ring-style"), baseTokens.accessibility.focusRing.style);
+  assign(toVariableName(prefix, "min-touch-target"), baseTokens.accessibility.minTouchTarget);
+  assign(toVariableName(prefix, "min-text-size"), baseTokens.accessibility.minTextSize);
+  Object.entries(baseTokens.buttons).forEach(([variant, states]) => {
     Object.entries(states).forEach(([state, value]) => {
       assign(toVariableName(prefix, "button", variant, state), value);
     });
   });
-  Object.entries(tokens2.forms).forEach(([state, properties]) => {
+  Object.entries(baseTokens.forms).forEach(([state, properties]) => {
     Object.entries(properties).forEach(([prop, value]) => {
       if (value) assign(toVariableName(prefix, "form", state, prop), value);
     });
   });
-  Object.entries(tokens2.animations).forEach(([name, animation]) => {
+  Object.entries(baseTokens.animations).forEach(([name, animation]) => {
     assign(toVariableName(prefix, "animation", name, "duration"), animation.duration);
     assign(toVariableName(prefix, "animation", name, "easing"), animation.easing);
     assign(toVariableName(prefix, "animation", name, "keyframes"), animation.keyframes);
@@ -622,14 +900,32 @@ var generateCssVariables = (tokens2, options = {}) => {
   addBase(toVariableName(prefix, "surface", "overlay"), pickSemantic(getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"])));
   addBase(toVariableName(prefix, "text", "on", "page", "default"), pickSemantic(getPath(defaultMode, ["text", "onPage", "default"]), getPath(textAliases, ["onPage", "default"])));
   addBase(toVariableName(prefix, "text", "on", "page", "muted"), pickSemantic(getPath(defaultMode, ["text", "onPage", "muted"]), getPath(textAliases, ["onPage", "muted"])));
+  addBase(toVariableName(prefix, "text", "on", "page", "meta"), pickSemantic(getPath(defaultMode, ["text", "onPage", "meta"]), getPath(textAliases, ["onPage", "meta"])));
   addBase(toVariableName(prefix, "text", "on", "surface", "default"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "default"]), getPath(textAliases, ["onSurface", "default"])));
   addBase(toVariableName(prefix, "text", "on", "surface", "muted"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "muted"]), getPath(textAliases, ["onSurface", "muted"])));
+  addBase(toVariableName(prefix, "text", "on", "surface", "meta"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "meta"]), getPath(textAliases, ["onSurface", "meta"])));
   addBase(toVariableName(prefix, "component", "card", "text"), pickSemantic(getPath(defaultMode, ["component", "card", "text"]), getPath(componentAliases, ["card", "text"])));
   addBase(toVariableName(prefix, "component", "card", "text-muted"), pickSemantic(getPath(defaultMode, ["component", "card", "textMuted"]), getPath(componentAliases, ["card", "textMuted"])));
   addBase(toVariableName(prefix, "component", "input", "text"), pickSemantic(getPath(defaultMode, ["component", "input", "text"]), getPath(componentAliases, ["input", "text"])));
   addBase(toVariableName(prefix, "component", "input", "placeholder"), pickSemantic(getPath(defaultMode, ["component", "input", "placeholder"]), getPath(componentAliases, ["input", "placeholder"])));
   addBase(toVariableName(prefix, "button", "text", "default"), pickSemantic(getPath(defaultMode, ["component", "button", "textDefault"]), getPath(componentAliases, ["button", "textDefault"])));
   addBase(toVariableName(prefix, "button", "text", "on", "primary"), pickSemantic(getPath(defaultMode, ["component", "button", "textOnPrimary"]), getPath(componentAliases, ["button", "textOnPrimary"])));
+  BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
+    addBase(
+      toVariableName(prefix, "badge", variant, "bg"),
+      pickSemantic(getPath(defaultMode, ["component", "badge", bgKey]), getPath(componentAliases, ["badge", bgKey]))
+    );
+    addBase(
+      toVariableName(prefix, "badge", variant, "text"),
+      pickSemantic(getPath(defaultMode, ["component", "badge", textKey]), getPath(componentAliases, ["badge", textKey]))
+    );
+  });
+  ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
+    addBase(
+      toVariableName(prefix, "icon-box", name),
+      pickSemantic(getPath(defaultMode, ["component", "iconBox", tokenKey]), getPath(componentAliases, ["iconBox", tokenKey]))
+    );
+  });
   const rootLines = [...baseLines, ...mapLines];
   const darkLines = [];
   const addDark = (name, value) => {
@@ -667,6 +963,14 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(textAliases, ["onPage", "muted"])
     )
   );
+  addDark(
+    toVariableName(prefix, "text", "on", "page", "meta"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onPage", "meta"]),
+      getPath(defaultMode, ["text", "onPage", "meta"]),
+      getPath(textAliases, ["onPage", "meta"])
+    )
+  );
   addDark(
     toVariableName(prefix, "text", "on", "surface", "default"),
     pickSemantic(
@@ -683,6 +987,14 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(textAliases, ["onSurface", "muted"])
     )
   );
+  addDark(
+    toVariableName(prefix, "text", "on", "surface", "meta"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onSurface", "meta"]),
+      getPath(defaultMode, ["text", "onSurface", "meta"]),
+      getPath(textAliases, ["onSurface", "meta"])
+    )
+  );
   addDark(
     toVariableName(prefix, "component", "card", "text"),
     pickSemantic(
@@ -731,6 +1043,34 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(componentAliases, ["button", "textOnPrimary"])
     )
   );
+  BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
+    addDark(
+      toVariableName(prefix, "badge", variant, "bg"),
+      pickSemantic(
+        getPath(darkMode, ["component", "badge", bgKey]),
+        getPath(defaultMode, ["component", "badge", bgKey]),
+        getPath(componentAliases, ["badge", bgKey])
+      )
+    );
+    addDark(
+      toVariableName(prefix, "badge", variant, "text"),
+      pickSemantic(
+        getPath(darkMode, ["component", "badge", textKey]),
+        getPath(defaultMode, ["component", "badge", textKey]),
+        getPath(componentAliases, ["badge", textKey])
+      )
+    );
+  });
+  ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
+    addDark(
+      toVariableName(prefix, "icon-box", name),
+      pickSemantic(
+        getPath(darkMode, ["component", "iconBox", tokenKey]),
+        getPath(defaultMode, ["component", "iconBox", tokenKey]),
+        getPath(componentAliases, ["iconBox", tokenKey])
+      )
+    );
+  });
   const rootBlock = `${selector} {
 ${rootLines.join("\n")}
 }`;
@@ -767,7 +1107,7 @@ var createTailwindTheme = (source = tokens) => {
   }, {});
   return {
     colors,
-    spacing: { ...source.spacing },
+    spacing: { ...source.space ?? {} },
     borderRadius: { ...source.radii },
     fontFamily,
     fontSize,