@phcdevworks/spectre-tokens 3.1.0 → 3.3.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.3.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,59 @@ 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}",
+      "borderInvalid": "{colors.error.500}",
+      "bgInvalid": "{colors.error.50}",
+      "borderSuccess": "{colors.success.500}",
+      "bgSuccess": "{colors.success.50}"
+    },
+    "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}",
+      "borderInvalid": "{colors.error.500}",
+      "bgInvalid": "{colors.error.50}",
+      "borderSuccess": "{colors.success.500}",
+      "bgSuccess": "{colors.success.50}"
+    },
+    "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 +454,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 +648,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}"
         }
       }
     }
@@ -1128,6 +1271,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;
@@ -1410,6 +1589,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 = [];