@phcdevworks/spectre-tokens 3.0.0 → 3.2.0

package/dist/index.js

@@ -117,6 +117,51 @@ var coreTokens = {
         "active": "{colors.info.50}",
         "text": "{colors.neutral.900}"
       }
+    },
+    "checkbox": {
+      "bg": "{colors.white}",
+      "border": "{colors.neutral.300}",
+      "checkedBg": "{colors.info.600}",
+      "checkedBorder": "{colors.info.600}",
+      "text": "{colors.white}",
+      "disabledBg": "{colors.neutral.50}",
+      "disabledBorder": "{colors.neutral.200}"
+    },
+    "radio": {
+      "bg": "{colors.white}",
+      "border": "{colors.neutral.300}",
+      "checkedBg": "{colors.info.600}",
+      "checkedBorder": "{colors.info.600}",
+      "text": "{colors.white}",
+      "disabledBg": "{colors.neutral.50}",
+      "disabledBorder": "{colors.neutral.200}"
+    },
+    "select": {
+      "bg": "{colors.white}",
+      "border": "{colors.neutral.300}",
+      "text": "{colors.neutral.900}",
+      "placeholderText": "{colors.neutral.500}",
+      "disabledBg": "{colors.neutral.50}",
+      "disabledBorder": "{colors.neutral.200}",
+      "focusBorder": "{colors.info.500}"
+    },
+    "textarea": {
+      "bg": "{colors.white}",
+      "border": "{colors.neutral.300}",
+      "text": "{colors.neutral.900}",
+      "placeholder": "{colors.neutral.500}",
+      "disabledBg": "{colors.neutral.50}",
+      "disabledBorder": "{colors.neutral.200}",
+      "focusBorder": "{colors.info.500}"
+    },
+    "fieldset": {
+      "border": "{colors.neutral.200}",
+      "legendText": "{colors.neutral.900}"
+    },
+    "label": {
+      "text": "{colors.neutral.900}",
+      "disabledText": "{colors.neutral.400}",
+      "requiredIndicatorText": "{colors.error.600}"
     }
   },
   "buttons": {
@@ -371,6 +416,51 @@ var coreTokens = {
             "active": "{colors.info.50}",
             "text": "{colors.neutral.900}"
           }
+        },
+        "checkbox": {
+          "bg": "{colors.white}",
+          "border": "{colors.neutral.300}",
+          "checkedBg": "{colors.info.600}",
+          "checkedBorder": "{colors.info.600}",
+          "text": "{colors.white}",
+          "disabledBg": "{colors.neutral.50}",
+          "disabledBorder": "{colors.neutral.200}"
+        },
+        "radio": {
+          "bg": "{colors.white}",
+          "border": "{colors.neutral.300}",
+          "checkedBg": "{colors.info.600}",
+          "checkedBorder": "{colors.info.600}",
+          "text": "{colors.white}",
+          "disabledBg": "{colors.neutral.50}",
+          "disabledBorder": "{colors.neutral.200}"
+        },
+        "select": {
+          "bg": "{colors.white}",
+          "border": "{colors.neutral.300}",
+          "text": "{colors.neutral.900}",
+          "placeholderText": "{colors.neutral.500}",
+          "disabledBg": "{colors.neutral.50}",
+          "disabledBorder": "{colors.neutral.200}",
+          "focusBorder": "{colors.info.500}"
+        },
+        "textarea": {
+          "bg": "{colors.white}",
+          "border": "{colors.neutral.300}",
+          "text": "{colors.neutral.900}",
+          "placeholder": "{colors.neutral.500}",
+          "disabledBg": "{colors.neutral.50}",
+          "disabledBorder": "{colors.neutral.200}",
+          "focusBorder": "{colors.info.500}"
+        },
+        "fieldset": {
+          "border": "{colors.neutral.200}",
+          "legendText": "{colors.neutral.900}"
+        },
+        "label": {
+          "text": "{colors.neutral.900}",
+          "disabledText": "{colors.neutral.400}",
+          "requiredIndicatorText": "{colors.error.600}"
         }
       }
     },
@@ -520,6 +610,51 @@ var coreTokens = {
             "active": "{colors.info.900}",
             "text": "{colors.neutral.100}"
           }
+        },
+        "checkbox": {
+          "bg": "{colors.neutral.800}",
+          "border": "{colors.neutral.600}",
+          "checkedBg": "{colors.info.600}",
+          "checkedBorder": "{colors.info.600}",
+          "text": "{colors.white}",
+          "disabledBg": "{colors.neutral.900}",
+          "disabledBorder": "{colors.neutral.700}"
+        },
+        "radio": {
+          "bg": "{colors.neutral.800}",
+          "border": "{colors.neutral.600}",
+          "checkedBg": "{colors.info.600}",
+          "checkedBorder": "{colors.info.600}",
+          "text": "{colors.white}",
+          "disabledBg": "{colors.neutral.900}",
+          "disabledBorder": "{colors.neutral.700}"
+        },
+        "select": {
+          "bg": "{colors.neutral.800}",
+          "border": "{colors.neutral.600}",
+          "text": "{colors.neutral.50}",
+          "placeholderText": "{colors.neutral.400}",
+          "disabledBg": "{colors.neutral.900}",
+          "disabledBorder": "{colors.neutral.700}",
+          "focusBorder": "{colors.info.400}"
+        },
+        "textarea": {
+          "bg": "{colors.neutral.800}",
+          "border": "{colors.neutral.600}",
+          "text": "{colors.neutral.50}",
+          "placeholder": "{colors.neutral.400}",
+          "disabledBg": "{colors.neutral.900}",
+          "disabledBorder": "{colors.neutral.700}",
+          "focusBorder": "{colors.info.400}"
+        },
+        "fieldset": {
+          "border": "{colors.neutral.700}",
+          "legendText": "{colors.neutral.50}"
+        },
+        "label": {
+          "text": "{colors.neutral.50}",
+          "disabledText": "{colors.neutral.600}",
+          "requiredIndicatorText": "{colors.error.400}"
         }
       }
     }
@@ -899,7 +1034,11 @@ var coreTokens = {
         "md": "1.5rem",
         "lg": "2rem"
       },
-      "maxWidth": "72rem"
+      "maxWidth": "72rem",
+      "maxWidthProse": "65ch"
+    },
+    "sidebar": {
+      "width": "16rem"
     }
   },
   "font": {
@@ -1094,6 +1233,42 @@ var DROPDOWN_FIELDS = [
   { name: "item-active", modePath: ["item", "active"], aliasPath: ["item", "active"] },
   { name: "item-text", modePath: ["item", "text"], aliasPath: ["item", "text"] }
 ];
+var SELECTION_CONTROL_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "border", tokenKey: "border" },
+  { name: "checked-bg", tokenKey: "checkedBg" },
+  { name: "checked-border", tokenKey: "checkedBorder" },
+  { name: "text", tokenKey: "text" },
+  { name: "disabled-bg", tokenKey: "disabledBg" },
+  { name: "disabled-border", tokenKey: "disabledBorder" }
+];
+var SELECT_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "border", tokenKey: "border" },
+  { name: "text", tokenKey: "text" },
+  { name: "placeholder-text", tokenKey: "placeholderText" },
+  { name: "disabled-bg", tokenKey: "disabledBg" },
+  { name: "disabled-border", tokenKey: "disabledBorder" },
+  { name: "focus-border", tokenKey: "focusBorder" }
+];
+var TEXTAREA_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "border", tokenKey: "border" },
+  { name: "text", tokenKey: "text" },
+  { name: "placeholder", tokenKey: "placeholder" },
+  { name: "disabled-bg", tokenKey: "disabledBg" },
+  { name: "disabled-border", tokenKey: "disabledBorder" },
+  { name: "focus-border", tokenKey: "focusBorder" }
+];
+var FIELDSET_FIELDS = [
+  { name: "border", tokenKey: "border" },
+  { name: "legend-text", tokenKey: "legendText" }
+];
+var LABEL_FIELDS = [
+  { name: "text", tokenKey: "text" },
+  { name: "disabled-text", tokenKey: "disabledText" },
+  { name: "required-indicator-text", tokenKey: "requiredIndicatorText" }
+];
 var resolveTokenReference = (tokens2, reference) => {
   const path = reference.slice(1, -1).split(".");
   let current = tokens2;
@@ -1201,6 +1376,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) {
@@ -1302,6 +1484,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"] },
@@ -1309,6 +1492,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"] },
@@ -1364,6 +1551,42 @@ var generateCssVariables = (tokens2, options = {}) => {
       modePath: ["component", "dropdown", ...modePath],
       aliasSrc: componentAliases,
       aliasPath: ["dropdown", ...aliasPath]
+    })),
+    ...SELECTION_CONTROL_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["checkbox", name],
+      modePath: ["component", "checkbox", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["checkbox", tokenKey]
+    })),
+    ...SELECTION_CONTROL_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["radio", name],
+      modePath: ["component", "radio", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["radio", tokenKey]
+    })),
+    ...SELECT_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["select", name],
+      modePath: ["component", "select", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["select", tokenKey]
+    })),
+    ...TEXTAREA_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["textarea", name],
+      modePath: ["component", "textarea", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["textarea", tokenKey]
+    })),
+    ...FIELDSET_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["fieldset", name],
+      modePath: ["component", "fieldset", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["fieldset", tokenKey]
+    })),
+    ...LABEL_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["label", name],
+      modePath: ["component", "label", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["label", tokenKey]
     }))
   ];
   const baseLines = [];
@@ -1380,6 +1603,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")}
 }`;
@@ -1431,7 +1660,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,