@phcdevworks/spectre-tokens 3.0.0 → 3.2.0

package/README.md

@@ -7,7 +7,7 @@
 | Project team           | `project-design`                 |
 | Repository role        | Spectre L1 design-token contract |
 | Package/artifact       | `@phcdevworks/spectre-tokens`    |
-| Current version/status | 2.9.0                            |
+| Current version/status | 3.1.0                            |
 
 ## Standard Workflow
 
@@ -136,6 +136,7 @@ import tokens from '@phcdevworks/spectre-tokens'
 const card = {
   background: tokens.surface.page,
   color: tokens.text.onPage.default,
+  maxWidth: tokens.layout.container.maxWidthProse,
   padding: tokens.space['16'],
   borderRadius: tokens.radii.md
 }
@@ -219,6 +220,7 @@ const card = {
   background: tokens.surface.card,
   color: tokens.text.onSurface.default,
   borderColor: tokens.component.iconBox.border,
+  maxWidth: tokens.layout.container.maxWidthProse,
   padding: tokens.space['16']
 }
 ```
@@ -246,6 +248,11 @@ CSS variable contract.
 .card {
   background: var(--sp-surface-card);
   color: var(--sp-text-on-surface-default);
+  max-width: var(--sp-layout-container-max-width-prose);
+}
+
+.app-shell {
+  width: var(--sp-layout-sidebar-width);
 }
 ```
 
@@ -268,6 +275,21 @@ export default {
 Use `tailwindTheme` directly only when a consumer needs the generated theme
 object outside the preset shape.
 
+The generated Tailwind theme includes the layout width mappings
+`maxWidth.container`, `maxWidth.prose`, and `width.sidebar`, derived from
+`layout.container.maxWidth`, `layout.container.maxWidthProse`, and
+`layout.sidebar.width`.
+
+```tsx
+export function ArticleShell() {
+  return (
+    <main className="mx-auto max-w-prose">
+      <aside className="w-sidebar" />
+    </main>
+  )
+}
+```
+
 ### Token model
 
 The generated token object includes these namespaces:
@@ -300,6 +322,11 @@ The exported runtime token object is a flattened string-based tree generated
 from `tokens/`. Source-only wrapper fields such as `value` and `metadata` are
 internal generation details and are not part of the public package contract.
 
+The `layout` namespace includes section, stack, and container spacing tokens,
+plus fixed layout width tokens for common consumer shells:
+`layout.container.maxWidth`, `layout.container.maxWidthProse`, and
+`layout.sidebar.width`.
+
 ## Public contract guarantees
 
 `contract.manifest.json` is the machine-readable contract authority for this

package/dist/index.cjs

@@ -147,6 +147,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": {
@@ -401,6 +446,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}"
         }
       }
     },
@@ -550,6 +640,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}"
         }
       }
     }
@@ -929,7 +1064,11 @@ var coreTokens = {
         "md": "1.5rem",
         "lg": "2rem"
       },
-      "maxWidth": "72rem"
+      "maxWidth": "72rem",
+      "maxWidthProse": "65ch"
+    },
+    "sidebar": {
+      "width": "16rem"
     }
   },
   "font": {
@@ -1124,6 +1263,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;
@@ -1231,6 +1406,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 +1514,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 +1522,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"] },
@@ -1394,6 +1581,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 = [];
@@ -1410,6 +1633,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 +1690,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,