@phcdevworks/spectre-tokens 0.1.0 → 0.2.1

package/dist/index.js

@@ -137,22 +137,24 @@ var core_default = {
       textOnPrimary: "#ffffff"
     },
     badge: {
-      primary: {
-        bg: "#8652ff",
-        text: "#0f172a"
-      },
-      success: {
-        bg: "#22c55e",
-        text: "#0f172a"
-      },
-      warning: {
-        bg: "#f59e0b",
-        text: "#0f172a"
-      },
-      danger: {
-        bg: "#ef4444",
-        text: "#0f172a"
-      }
+      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: {
@@ -227,37 +229,55 @@ var core_default = {
           }
         },
         badge: {
-          primary: {
-            bg: {
-              value: "#8652ff"
-            },
-            text: {
-              value: "#0f172a"
-            }
+          neutralBg: {
+            value: "#f1f5f9"
+          },
+          neutralText: {
+            value: "#334155"
+          },
+          infoBg: {
+            value: "#dbeafe"
+          },
+          infoText: {
+            value: "#1d4ed8"
+          },
+          successBg: {
+            value: "#dcfce7"
+          },
+          successText: {
+            value: "#15803d"
+          },
+          warningBg: {
+            value: "#fef3c7"
           },
-          success: {
-            bg: {
-              value: "#22c55e"
-            },
-            text: {
-              value: "#0f172a"
-            }
+          warningText: {
+            value: "#b45309"
           },
-          warning: {
-            bg: {
-              value: "#f59e0b"
-            },
-            text: {
-              value: "#0f172a"
-            }
+          dangerBg: {
+            value: "#fee2e2"
           },
-          danger: {
-            bg: {
-              value: "#ef4444"
-            },
-            text: {
-              value: "#0f172a"
-            }
+          dangerText: {
+            value: "#b91c1c"
+          }
+        },
+        iconBox: {
+          bg: {
+            value: "#ffffff"
+          },
+          border: {
+            value: "#e2e8f0"
+          },
+          iconDefault: {
+            value: "#6c32e6"
+          },
+          iconSuccess: {
+            value: "#16a34a"
+          },
+          iconWarning: {
+            value: "#d97706"
+          },
+          iconDanger: {
+            value: "#dc2626"
           }
         }
       }
@@ -333,37 +353,55 @@ var core_default = {
           }
         },
         badge: {
-          primary: {
-            bg: {
-              value: "#8652ff"
-            },
-            text: {
-              value: "#f1f5f9"
-            }
+          neutralBg: {
+            value: "#334155"
+          },
+          neutralText: {
+            value: "#f1f5f9"
+          },
+          infoBg: {
+            value: "#1e40af"
+          },
+          infoText: {
+            value: "#dbeafe"
+          },
+          successBg: {
+            value: "#166534"
           },
-          success: {
-            bg: {
-              value: "#22c55e"
-            },
-            text: {
-              value: "#f1f5f9"
-            }
+          successText: {
+            value: "#dcfce7"
           },
-          warning: {
-            bg: {
-              value: "#f59e0b"
-            },
-            text: {
-              value: "#f1f5f9"
-            }
+          warningBg: {
+            value: "#92400e"
           },
-          danger: {
-            bg: {
-              value: "#ef4444"
-            },
-            text: {
-              value: "#f1f5f9"
-            }
+          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"
           }
         }
       }
@@ -460,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",
@@ -652,11 +722,31 @@ 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);
   };
@@ -665,9 +755,34 @@ var createCssVariableMap = (tokens2, options = {}) => {
       assign(toVariableName(prefix, "color", group, step), value);
     });
   });
-  Object.entries(baseTokens.spacing).forEach(([key, value]) => {
-    assign(toVariableName(prefix, "space", 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);
   });
@@ -694,19 +809,24 @@ var createCssVariableMap = (tokens2, options = {}) => {
   });
   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", "page", "subtle"), tokens2.text.onPage.subtle);
+  assign(toVariableName(prefix, "text", "on", "page", "meta"), tokens2.text.onPage.meta);
   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", "subtle"), tokens2.text.onSurface.subtle);
   assign(toVariableName(prefix, "text", "on", "surface", "meta"), tokens2.text.onSurface.meta);
   const badge = tokens2.component?.badge;
   if (badge) {
-    assign(toVariableName(prefix, "badge", "primary", "bg"), badge.primary.bg);
-    assign(toVariableName(prefix, "badge", "primary", "text"), badge.primary.text);
-    assign(toVariableName(prefix, "badge", "success", "bg"), badge.success.bg);
-    assign(toVariableName(prefix, "badge", "success", "text"), badge.success.text);
-    assign(toVariableName(prefix, "badge", "warning", "bg"), badge.warning.bg);
-    assign(toVariableName(prefix, "badge", "warning", "text"), badge.warning.text);
-    assign(toVariableName(prefix, "badge", "danger", "bg"), badge.danger.bg);
-    assign(toVariableName(prefix, "badge", "danger", "text"), badge.danger.text);
+    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);
@@ -783,9 +903,11 @@ 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", "subtle"), pickSemantic(getPath(defaultMode, ["text", "onPage", "subtle"]), getPath(textAliases, ["onPage", "subtle"])));
   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", "subtle"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "subtle"]), getPath(textAliases, ["onSurface", "subtle"])));
   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"])));
@@ -793,38 +915,22 @@ var generateCssVariables = (tokens2, options = {}) => {
   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"])));
-  addBase(
-    toVariableName(prefix, "badge", "primary", "bg"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "primary", "bg"]), getPath(componentAliases, ["badge", "primary", "bg"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "primary", "text"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "primary", "text"]), getPath(componentAliases, ["badge", "primary", "text"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "success", "bg"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "success", "bg"]), getPath(componentAliases, ["badge", "success", "bg"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "success", "text"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "success", "text"]), getPath(componentAliases, ["badge", "success", "text"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "warning", "bg"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "warning", "bg"]), getPath(componentAliases, ["badge", "warning", "bg"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "warning", "text"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "warning", "text"]), getPath(componentAliases, ["badge", "warning", "text"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "danger", "bg"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "danger", "bg"]), getPath(componentAliases, ["badge", "danger", "bg"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "danger", "text"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "danger", "text"]), getPath(componentAliases, ["badge", "danger", "text"]))
-  );
+  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) => {
@@ -862,6 +968,14 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(textAliases, ["onPage", "muted"])
     )
   );
+  addDark(
+    toVariableName(prefix, "text", "on", "page", "subtle"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onPage", "subtle"]),
+      getPath(defaultMode, ["text", "onPage", "subtle"]),
+      getPath(textAliases, ["onPage", "subtle"])
+    )
+  );
   addDark(
     toVariableName(prefix, "text", "on", "page", "meta"),
     pickSemantic(
@@ -886,6 +1000,14 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(textAliases, ["onSurface", "muted"])
     )
   );
+  addDark(
+    toVariableName(prefix, "text", "on", "surface", "subtle"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onSurface", "subtle"]),
+      getPath(defaultMode, ["text", "onSurface", "subtle"]),
+      getPath(textAliases, ["onSurface", "subtle"])
+    )
+  );
   addDark(
     toVariableName(prefix, "text", "on", "surface", "meta"),
     pickSemantic(
@@ -942,70 +1064,34 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(componentAliases, ["button", "textOnPrimary"])
     )
   );
-  addDark(
-    toVariableName(prefix, "badge", "primary", "bg"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "primary", "bg"]),
-      getPath(defaultMode, ["component", "badge", "primary", "bg"]),
-      getPath(componentAliases, ["badge", "primary", "bg"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "primary", "text"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "primary", "text"]),
-      getPath(defaultMode, ["component", "badge", "primary", "text"]),
-      getPath(componentAliases, ["badge", "primary", "text"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "success", "bg"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "success", "bg"]),
-      getPath(defaultMode, ["component", "badge", "success", "bg"]),
-      getPath(componentAliases, ["badge", "success", "bg"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "success", "text"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "success", "text"]),
-      getPath(defaultMode, ["component", "badge", "success", "text"]),
-      getPath(componentAliases, ["badge", "success", "text"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "warning", "bg"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "warning", "bg"]),
-      getPath(defaultMode, ["component", "badge", "warning", "bg"]),
-      getPath(componentAliases, ["badge", "warning", "bg"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "warning", "text"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "warning", "text"]),
-      getPath(defaultMode, ["component", "badge", "warning", "text"]),
-      getPath(componentAliases, ["badge", "warning", "text"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "danger", "bg"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "danger", "bg"]),
-      getPath(defaultMode, ["component", "badge", "danger", "bg"]),
-      getPath(componentAliases, ["badge", "danger", "bg"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "danger", "text"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "danger", "text"]),
-      getPath(defaultMode, ["component", "badge", "danger", "text"]),
-      getPath(componentAliases, ["badge", "danger", "text"])
-    )
-  );
+  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")}
 }`;
@@ -1042,7 +1128,7 @@ var createTailwindTheme = (source = tokens) => {
   }, {});
   return {
     colors,
-    spacing: { ...source.spacing },
+    spacing: { ...source.space ?? {} },
     borderRadius: { ...source.radii },
     fontFamily,
     fontSize,