@phcdevworks/spectre-tokens 3.0.0 → 3.1.0

package/dist/index.cjs

@@ -929,7 +929,11 @@ var coreTokens = {
         "md": "1.5rem",
         "lg": "2rem"
       },
-      "maxWidth": "72rem"
+      "maxWidth": "72rem",
+      "maxWidthProse": "65ch"
+    },
+    "sidebar": {
+      "width": "16rem"
     }
   },
   "font": {
@@ -1231,6 +1235,13 @@ var createCssVariableMap = (tokens2, options = {}) => {
     if (container?.maxWidth) {
       assign(toVariableName(prefix, "layout", "container", "max-width"), container.maxWidth);
     }
+    if (container?.maxWidthProse) {
+      assign(toVariableName(prefix, "layout", "container", "max-width-prose"), container.maxWidthProse);
+    }
+    const sidebar = layout.sidebar;
+    if (sidebar?.width) {
+      assign(toVariableName(prefix, "layout", "sidebar", "width"), sidebar.width);
+    }
   }
   const border = baseTokens.border;
   if (border?.width) {
@@ -1332,6 +1343,7 @@ var generateCssVariables = (tokens2, options = {}) => {
   const surfaceAliases = tokens2.surface ?? {};
   const textAliases = tokens2.text ?? {};
   const componentAliases = tokens2.component ?? {};
+  const linkTokens = tokens2.link ?? {};
   const semanticEntries = [
     { varParts: ["surface", "page"], modePath: ["surface", "page"], aliasSrc: surfaceAliases, aliasPath: ["page"] },
     { varParts: ["surface", "card"], modePath: ["surface", "card"], aliasSrc: surfaceAliases, aliasPath: ["card"] },
@@ -1339,6 +1351,10 @@ var generateCssVariables = (tokens2, options = {}) => {
     { varParts: ["surface", "overlay"], modePath: ["surface", "overlay"], aliasSrc: surfaceAliases, aliasPath: ["overlay"] },
     { varParts: ["surface", "subtle"], modePath: ["surface", "subtle"] },
     { varParts: ["surface", "hero"], modePath: ["surface", "hero"], aliasSrc: surfaceAliases, aliasPath: ["hero"] },
+    { varParts: ["surface", "hover"], modePath: ["surface", "hover"], aliasSrc: surfaceAliases, aliasPath: ["hover"] },
+    { varParts: ["surface", "selected"], modePath: ["surface", "selected"], aliasSrc: surfaceAliases, aliasPath: ["selected"] },
+    { varParts: ["surface", "active"], modePath: ["surface", "active"], aliasSrc: surfaceAliases, aliasPath: ["active"] },
+    { varParts: ["surface", "divider"], modePath: ["surface", "divider"], aliasSrc: surfaceAliases, aliasPath: ["divider"] },
     { varParts: ["text", "on", "page", "default"], modePath: ["text", "onPage", "default"], aliasSrc: textAliases, aliasPath: ["onPage", "default"] },
     { varParts: ["text", "on", "page", "muted"], modePath: ["text", "onPage", "muted"], aliasSrc: textAliases, aliasPath: ["onPage", "muted"] },
     { varParts: ["text", "on", "page", "subtle"], modePath: ["text", "onPage", "subtle"], aliasSrc: textAliases, aliasPath: ["onPage", "subtle"] },
@@ -1410,6 +1426,12 @@ var generateCssVariables = (tokens2, options = {}) => {
     addBase(varName, pickSemantic(tokens2, getPath(defaultMode, modePath), ...aliasCandidate));
     addDark(varName, pickSemantic(tokens2, getPath(darkMode, modePath), getPath(defaultMode, modePath), ...aliasCandidate));
   });
+  Object.entries(linkTokens).forEach(([key, value]) => {
+    const varName = toVariableName(prefix, "link", key);
+    const resolved = pickSemantic(tokens2, value);
+    addBase(varName, resolved);
+    addDark(varName, resolved);
+  });
   const rootBlock = `${selector} {
 ${[...baseLines, ...mapLines].join("\n")}
 }`;
@@ -1461,7 +1483,11 @@ var createTailwindTheme = (source = tokens) => {
     transitionTimingFunction: { ...source.transitions.easing },
     opacity: { ...source.opacity },
     maxWidth: {
-      container: source.layout?.container?.maxWidth
+      container: source.layout?.container?.maxWidth,
+      prose: source.layout?.container?.maxWidthProse
+    },
+    width: {
+      sidebar: source.layout?.sidebar?.width
     },
     borderWidth: {
       DEFAULT: source.border?.width.base,