@phcdevworks/spectre-tokens 3.3.0 → 3.4.0

package/dist/tokens.dtcg.json

@@ -232,8 +232,14 @@
         "$type": "color"
       },
       "shadow": {
-        "$value": "0 20px 48px -12px {colors.black} / 0.20",
-        "$type": "string"
+        "$value": {
+          "color": "{colors.black} / 0.20",
+          "offsetX": "0",
+          "offsetY": "20px",
+          "blur": "48px",
+          "spread": "-12px"
+        },
+        "$type": "shadow"
       },
       "border": {
         "$value": "{colors.neutral.200}",
@@ -742,8 +748,14 @@
         "$type": "color"
       },
       "shadow": {
-        "$value": "0 4px 14px 0 {colors.brand.500} / 0.39",
-        "$type": "string"
+        "$value": {
+          "color": "{colors.brand.500} / 0.39",
+          "offsetX": "0",
+          "offsetY": "4px",
+          "blur": "14px",
+          "spread": "0"
+        },
+        "$type": "shadow"
       },
       "focusRing": {
         "$value": "{colors.brand.500} / 0.4",
@@ -898,8 +910,17 @@
           "$description": "slightly recessed background for zebra rows, section bands, and inset panels — one step below surface.page"
         },
         "hero": {
-          "$value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)",
-          "$type": "string",
+          "$value": [
+            {
+              "color": "{colors.indigo.500}",
+              "position": 0
+            },
+            {
+              "color": "{colors.violet.600}",
+              "position": 1
+            }
+          ],
+          "$type": "gradient",
           "$description": "full-bleed gradient background for hero and marketing sections only — not a general surface; pair with light text tokens explicitly"
         },
         "hover": {
@@ -1186,8 +1207,14 @@
             "$type": "color"
           },
           "shadow": {
-            "$value": "0 20px 48px -12px {colors.black} / 0.20",
-            "$type": "string"
+            "$value": {
+              "color": "{colors.black} / 0.20",
+              "offsetX": "0",
+              "offsetY": "20px",
+              "blur": "48px",
+              "spread": "-12px"
+            },
+            "$type": "shadow"
           },
           "border": {
             "$value": "{colors.neutral.200}",
@@ -1484,8 +1511,17 @@
           "$description": "slightly recessed background for zebra rows, section bands, and inset panels — one step below surface.page"
         },
         "hero": {
-          "$value": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)",
-          "$type": "string",
+          "$value": [
+            {
+              "color": "{colors.accent.700}",
+              "position": 0
+            },
+            {
+              "color": "{colors.accent.900}",
+              "position": 1
+            }
+          ],
+          "$type": "gradient",
           "$description": "full-bleed gradient background for hero and marketing sections only — not a general surface; pair with light text tokens explicitly"
         },
         "hover": {
@@ -1784,8 +1820,14 @@
             "$type": "color"
           },
           "shadow": {
-            "$value": "0 20px 48px -12px {colors.black} / 0.20",
-            "$type": "string"
+            "$value": {
+              "color": "{colors.black} / 0.20",
+              "offsetX": "0",
+              "offsetY": "20px",
+              "blur": "48px",
+              "spread": "-12px"
+            },
+            "$type": "shadow"
           },
           "border": {
             "$value": "{colors.neutral.700}",
@@ -2523,24 +2565,54 @@
       "$type": "string"
     },
     "sm": {
-      "$value": "0 1px 2px 0 {colors.black} / 0.06",
-      "$type": "string"
+      "$value": {
+        "color": "{colors.black} / 0.06",
+        "offsetX": "0",
+        "offsetY": "1px",
+        "blur": "2px",
+        "spread": "0"
+      },
+      "$type": "shadow"
     },
     "md": {
-      "$value": "0 2px 6px -1px {colors.black} / 0.08",
-      "$type": "string"
+      "$value": {
+        "color": "{colors.black} / 0.08",
+        "offsetX": "0",
+        "offsetY": "2px",
+        "blur": "6px",
+        "spread": "-1px"
+      },
+      "$type": "shadow"
     },
     "lg": {
-      "$value": "0 6px 16px -4px {colors.black} / 0.12",
-      "$type": "string"
+      "$value": {
+        "color": "{colors.black} / 0.12",
+        "offsetX": "0",
+        "offsetY": "6px",
+        "blur": "16px",
+        "spread": "-4px"
+      },
+      "$type": "shadow"
     },
     "xl": {
-      "$value": "0 12px 24px -6px {colors.black} / 0.15",
-      "$type": "string"
+      "$value": {
+        "color": "{colors.black} / 0.15",
+        "offsetX": "0",
+        "offsetY": "12px",
+        "blur": "24px",
+        "spread": "-6px"
+      },
+      "$type": "shadow"
     },
     "2xl": {
-      "$value": "0 20px 48px -12px {colors.black} / 0.20",
-      "$type": "string"
+      "$value": {
+        "color": "{colors.black} / 0.20",
+        "offsetX": "0",
+        "offsetY": "20px",
+        "blur": "48px",
+        "spread": "-12px"
+      },
+      "$type": "shadow"
     }
   },
   "breakpoints": {
@@ -2567,39 +2639,39 @@
   },
   "zIndex": {
     "base": {
-      "$value": "0",
+      "$value": 0,
       "$type": "number"
     },
     "dropdown": {
-      "$value": "1000",
+      "$value": 1000,
       "$type": "number"
     },
     "sticky": {
-      "$value": "1100",
+      "$value": 1100,
       "$type": "number"
     },
     "fixed": {
-      "$value": "1200",
+      "$value": 1200,
       "$type": "number"
     },
     "overlay": {
-      "$value": "1300",
+      "$value": 1300,
       "$type": "number"
     },
     "modal": {
-      "$value": "1400",
+      "$value": 1400,
       "$type": "number"
     },
     "popover": {
-      "$value": "1500",
+      "$value": 1500,
       "$type": "number"
     },
     "tooltip": {
-      "$value": "1600",
+      "$value": 1600,
       "$type": "number"
     },
     "toast": {
-      "$value": "1700",
+      "$value": 1700,
       "$type": "number"
     }
   },
@@ -2648,27 +2720,57 @@
     },
     "easing": {
       "linear": {
-        "$value": "linear",
+        "$value": [
+          0,
+          0,
+          1,
+          1
+        ],
         "$type": "cubicBezier"
       },
       "in": {
-        "$value": "cubic-bezier(0.4, 0, 1, 1)",
+        "$value": [
+          0.4,
+          0,
+          1,
+          1
+        ],
         "$type": "cubicBezier"
       },
       "out": {
-        "$value": "cubic-bezier(0, 0, 0.2, 1)",
+        "$value": [
+          0,
+          0,
+          0.2,
+          1
+        ],
         "$type": "cubicBezier"
       },
       "inOut": {
-        "$value": "cubic-bezier(0.4, 0, 0.2, 1)",
+        "$value": [
+          0.4,
+          0,
+          0.2,
+          1
+        ],
         "$type": "cubicBezier"
       },
       "spring": {
-        "$value": "cubic-bezier(0.4, 0, 0.2, 1)",
+        "$value": [
+          0.4,
+          0,
+          0.2,
+          1
+        ],
         "$type": "cubicBezier"
       },
       "overshoot": {
-        "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "$value": [
+          0.34,
+          1.56,
+          0.64,
+          1
+        ],
         "$type": "cubicBezier"
       }
     }
@@ -2677,11 +2779,11 @@
     "fadeIn": {
       "duration": {
         "$value": "{transitions.duration.base}",
-        "$type": "string"
+        "$type": "duration"
       },
       "easing": {
         "$value": "{transitions.easing.out}",
-        "$type": "string"
+        "$type": "cubicBezier"
       },
       "keyframes": {
         "$value": "fade-in",
@@ -2691,11 +2793,11 @@
     "fadeOut": {
       "duration": {
         "$value": "{transitions.duration.fast}",
-        "$type": "string"
+        "$type": "duration"
       },
       "easing": {
         "$value": "{transitions.easing.in}",
-        "$type": "string"
+        "$type": "cubicBezier"
       },
       "keyframes": {
         "$value": "fade-out",
@@ -2705,11 +2807,11 @@
     "slideUp": {
       "duration": {
         "$value": "{transitions.duration.moderate}",
-        "$type": "string"
+        "$type": "duration"
       },
       "easing": {
         "$value": "{transitions.easing.out}",
-        "$type": "string"
+        "$type": "cubicBezier"
       },
       "keyframes": {
         "$value": "slide-up",
@@ -2719,11 +2821,11 @@
     "slideDown": {
       "duration": {
         "$value": "{transitions.duration.moderate}",
-        "$type": "string"
+        "$type": "duration"
       },
       "easing": {
         "$value": "{transitions.easing.out}",
-        "$type": "string"
+        "$type": "cubicBezier"
       },
       "keyframes": {
         "$value": "slide-down",
@@ -2733,11 +2835,11 @@
     "scaleIn": {
       "duration": {
         "$value": "{transitions.duration.base}",
-        "$type": "string"
+        "$type": "duration"
       },
       "easing": {
         "$value": "{transitions.easing.overshoot}",
-        "$type": "string"
+        "$type": "cubicBezier"
       },
       "keyframes": {
         "$value": "scale-in",
@@ -2747,11 +2849,11 @@
     "bounce": {
       "duration": {
         "$value": "{transitions.duration.moderate}",
-        "$type": "string"
+        "$type": "duration"
       },
       "easing": {
         "$value": "{transitions.easing.spring}",
-        "$type": "string"
+        "$type": "cubicBezier"
       },
       "keyframes": {
         "$value": "bounce",
@@ -2761,11 +2863,11 @@
     "shake": {
       "duration": {
         "$value": "{transitions.duration.relaxed}",
-        "$type": "string"
+        "$type": "duration"
       },
       "easing": {
         "$value": "{transitions.easing.spring}",
-        "$type": "string"
+        "$type": "cubicBezier"
       },
       "keyframes": {
         "$value": "shake",
@@ -2775,11 +2877,11 @@
     "pulse": {
       "duration": {
         "$value": "{transitions.duration.slowest}",
-        "$type": "string"
+        "$type": "duration"
       },
       "easing": {
         "$value": "{transitions.easing.spring}",
-        "$type": "string"
+        "$type": "cubicBezier"
       },
       "keyframes": {
         "$value": "pulse",
@@ -2790,11 +2892,11 @@
       "fadeIn": {
         "duration": {
           "$value": "{transitions.duration.reduced}",
-          "$type": "string"
+          "$type": "duration"
         },
         "easing": {
           "$value": "{transitions.easing.linear}",
-          "$type": "string"
+          "$type": "cubicBezier"
         },
         "keyframes": {
           "$value": "fade-in",
@@ -2804,11 +2906,11 @@
       "fadeOut": {
         "duration": {
           "$value": "{transitions.duration.reduced}",
-          "$type": "string"
+          "$type": "duration"
         },
         "easing": {
           "$value": "{transitions.easing.linear}",
-          "$type": "string"
+          "$type": "cubicBezier"
         },
         "keyframes": {
           "$value": "fade-out",
@@ -2818,11 +2920,11 @@
       "slideUp": {
         "duration": {
           "$value": "{transitions.duration.reduced}",
-          "$type": "string"
+          "$type": "duration"
         },
         "easing": {
           "$value": "{transitions.easing.linear}",
-          "$type": "string"
+          "$type": "cubicBezier"
         },
         "keyframes": {
           "$value": "slide-up",
@@ -2832,11 +2934,11 @@
       "slideDown": {
         "duration": {
           "$value": "{transitions.duration.reduced}",
-          "$type": "string"
+          "$type": "duration"
         },
         "easing": {
           "$value": "{transitions.easing.linear}",
-          "$type": "string"
+          "$type": "cubicBezier"
         },
         "keyframes": {
           "$value": "slide-down",
@@ -2846,11 +2948,11 @@
       "scaleIn": {
         "duration": {
           "$value": "{transitions.duration.reduced}",
-          "$type": "string"
+          "$type": "duration"
         },
         "easing": {
           "$value": "{transitions.easing.linear}",
-          "$type": "string"
+          "$type": "cubicBezier"
         },
         "keyframes": {
           "$value": "scale-in",
@@ -2860,11 +2962,11 @@
       "bounce": {
         "duration": {
           "$value": "{transitions.duration.reduced}",
-          "$type": "string"
+          "$type": "duration"
         },
         "easing": {
           "$value": "{transitions.easing.linear}",
-          "$type": "string"
+          "$type": "cubicBezier"
         },
         "keyframes": {
           "$value": "bounce",
@@ -2874,11 +2976,11 @@
       "shake": {
         "duration": {
           "$value": "{transitions.duration.reduced}",
-          "$type": "string"
+          "$type": "duration"
         },
         "easing": {
           "$value": "{transitions.easing.linear}",
-          "$type": "string"
+          "$type": "cubicBezier"
         },
         "keyframes": {
           "$value": "shake",
@@ -2888,11 +2990,11 @@
       "pulse": {
         "duration": {
           "$value": "{transitions.duration.reduced}",
-          "$type": "string"
+          "$type": "duration"
         },
         "easing": {
           "$value": "{transitions.easing.linear}",
-          "$type": "string"
+          "$type": "cubicBezier"
         },
         "keyframes": {
           "$value": "pulse",
@@ -2903,31 +3005,31 @@
   },
   "opacity": {
     "disabled": {
-      "$value": "0.38",
+      "$value": 0.38,
       "$type": "number"
     },
     "hover": {
-      "$value": "0.92",
+      "$value": 0.92,
       "$type": "number"
     },
     "active": {
-      "$value": "0.84",
+      "$value": 0.84,
       "$type": "number"
     },
     "loading": {
-      "$value": "0.6",
+      "$value": 0.6,
       "$type": "number"
     },
     "focus": {
-      "$value": "1",
+      "$value": 1,
       "$type": "number"
     },
     "overlay": {
-      "$value": "0.5",
+      "$value": 0.5,
       "$type": "number"
     },
     "tooltip": {
-      "$value": "0.95",
+      "$value": 0.95,
       "$type": "number"
     }
   },
@@ -3008,7 +3110,7 @@
     },
     "reducedMotion": {
       "$value": "{transitions.duration.reduced}",
-      "$type": "string"
+      "$type": "duration"
     },
     "forcedColors": {
       "$value": "auto",
@@ -3438,15 +3540,33 @@
   "typography": {
     "families": {
       "sans": {
-        "$value": "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+        "$value": [
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "sans-serif"
+        ],
         "$type": "fontFamily"
       },
       "serif": {
-        "$value": "'Times New Roman', Times, serif",
+        "$value": [
+          "Times New Roman",
+          "Times",
+          "serif"
+        ],
         "$type": "fontFamily"
       },
       "mono": {
-        "$value": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+        "$value": [
+          "SFMono-Regular",
+          "Consolas",
+          "Liberation Mono",
+          "Menlo",
+          "monospace"
+        ],
         "$type": "fontFamily"
       }
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phcdevworks/spectre-tokens",
-  "version": "3.3.0",
-  "description": "@phcdevworks/spectre-tokens is the design-token package of the Spectre system for downstream Spectre packages and compatible applications.",
+  "version": "3.4.0",
+  "description": "@phcdevworks/spectre-tokens is the design-token package of the Spectre system. It provides a complete, UI-ready token surface for downstream Spectre packages and compatible applications.",
   "keywords": [
     "phcdevworks",
     "spectre",
@@ -37,7 +37,7 @@
     "node": "^22.12.0 || >=24.0.0"
   },
   "type": "module",
-  "packageManager": "npm@11.18.0",
+  "packageManager": "npm@12.0.1",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -74,15 +74,19 @@
     "check:exports": "tsx scripts/check-public-exports.ts",
     "check:css": "tsx scripts/check-css-contract.ts",
     "check:tailwind": "tsx scripts/check-tailwind-contract.ts",
+    "check:parity": "tsx scripts/check-output-parity.ts",
+    "check:dtcg": "tsx scripts/check-dtcg-conformance.ts",
+    "check:dtcg-roundtrip": "tsx scripts/check-dtcg-style-dictionary.ts",
     "check:consumer": "tsx scripts/check-consumer-smoke.ts",
     "check:integration": "tsx scripts/check-integration.ts",
     "check:ecosystem": "spectre-manifest-validate spectre.manifest.json && spectre-manifest-check spectre.manifest.json .",
     "check:classification": "tsx scripts/check-change-classification.ts",
     "check:deprecation": "tsx scripts/check-deprecation.ts",
+    "check:downstream": "tsx scripts/check-downstream-compat.ts",
     "release:propose": "tsx scripts/propose-version.ts",
     "lint": "eslint .",
     "format": "prettier --write .",
-    "check": "npm run build && npm run check:manifest && npm run check:structure && npm run check:locked && npm run check:contrast && npm run check:regression && npm run check:docs && npm run check:exports && npm run check:css && npm run check:tailwind && npm run check:consumer && npm run check:integration && npm run check:ecosystem && npm run check:classification && npm run check:deprecation && npm run check:dist && npm run lint",
+    "check": "npm run build && npm run check:manifest && npm run check:structure && npm run check:locked && npm run check:contrast && npm run check:regression && npm run check:docs && npm run check:exports && npm run check:css && npm run check:tailwind && npm run check:parity && npm run check:dtcg && npm run check:dtcg-roundtrip && npm run check:consumer && npm run check:integration && npm run check:ecosystem && npm run check:classification && npm run check:deprecation && npm run check:dist && npm run lint",
     "check:all": "npm run check",
     "test:unit": "vitest run",
     "test": "npm run test:unit && npm run check",
@@ -95,20 +99,21 @@
     "typescript": "^5.9 || ^6.0"
   },
   "devDependencies": {
-    "@phcdevworks/spectre-manifest": "^1.0.0",
-    "@types/node": "^26.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.62.1",
-    "@typescript-eslint/parser": "^8.62.1",
+    "@phcdevworks/spectre-manifest": "^1.1.0",
+    "@types/node": "^26.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.64.0",
+    "@typescript-eslint/parser": "^8.64.0",
     "colord": "^2.9.3",
-    "eslint": "^10.6.0",
+    "eslint": "^10.7.0",
     "jiti": "^2.7.0",
-    "prettier": "^3.9.4",
+    "prettier": "^3.9.5",
+    "style-dictionary": "^5.5.0",
     "ts-node": "^10.9.2",
     "tsup": "^8.5.1",
-    "tsx": "^4.22.4",
+    "tsx": "^4.23.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.1",
-    "vitest": "^4.1.9"
+    "typescript-eslint": "^8.64.0",
+    "vitest": "^4.1.10"
   },
   "overrides": {
     "esbuild": "0.28.1"