@phcdevworks/spectre-tokens 2.5.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phcdevworks/spectre-tokens",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "@phcdevworks/spectre-tokens is the design-token package of the Spectre system for downstream Spectre packages and compatible applications.",
   "keywords": [
     "phcdevworks",
@@ -33,12 +33,17 @@
     "url": "https://github.com/phcdevworks/spectre-tokens/issues"
   },
   "homepage": "https://github.com/phcdevworks/spectre-tokens#readme",
+  "engines": {
+    "node": "^22.12.0 || >=24.0.0"
+  },
   "type": "module",
+  "packageManager": "npm@11.16.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
@@ -59,19 +64,22 @@
     "build:css": "tsx scripts/build-css.ts",
     "check:manifest": "tsx scripts/check-contract-manifest.ts",
     "check:docs": "tsx scripts/check-doc-contract.ts",
-    "check:dist": "node scripts/check-dist-sync.js",
+    "check:dist": "tsx scripts/check-dist-sync.ts",
     "check:structure": "tsx scripts/assert-core-tokens.ts",
     "check:locked": "tsx scripts/check-locked-color-contracts.ts",
     "check:contrast": "tsx scripts/check-contrast.ts",
     "check:regression": "tsx scripts/check-tokens-regression.ts",
-    "check:exports": "node scripts/check-public-exports.mjs",
+    "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:consumer": "tsx scripts/check-consumer-smoke.ts",
+    "check:integration": "tsx scripts/check-integration.ts",
     "check:classification": "tsx scripts/check-change-classification.ts",
+    "check:deprecation": "tsx scripts/check-deprecation.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:classification && 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:consumer && npm run check:integration && npm run check:classification && npm run check:deprecation && npm run check:dist && npm run lint",
     "check:all": "npm run check",
     "test": "npm run check",
     "prepublishOnly": "npm run check"
@@ -83,17 +91,17 @@
     "typescript": "^5.9 || ^6.0"
   },
   "devDependencies": {
-    "@types/node": "^25.6.0",
-    "@typescript-eslint/eslint-plugin": "^8.59.1",
-    "@typescript-eslint/parser": "^8.59.1",
+    "@types/node": "^25.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.60.1",
+    "@typescript-eslint/parser": "^8.60.1",
     "colord": "^2.9.3",
-    "eslint": "^10.3.0",
-    "jiti": "^2.6.1",
+    "eslint": "^10.4.1",
+    "jiti": "^2.7.0",
     "prettier": "^3.8.3",
     "ts-node": "^10.9.2",
     "tsup": "^8.5.1",
-    "tsx": "^4.21.0",
+    "tsx": "^4.22.4",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.1"
+    "typescript-eslint": "^8.60.1"
   }
 }

package/tokens/components.json

@@ -211,7 +211,9 @@
       },
       "featuredText": {
         "value": "{colors.white}",
-        "metadata": {}
+        "metadata": {
+          "pair": "component.pricingCard.featuredBg"
+        }
       },
       "featuredBadgeBg": {
         "value": "{colors.warning.500}",
@@ -221,7 +223,9 @@
       },
       "featuredBadgeText": {
         "value": "{colors.neutral.900}",
-        "metadata": {}
+        "metadata": {
+          "pair": "component.pricingCard.featuredBadgeBg"
+        }
       },
       "price": {
         "value": "{colors.neutral.900}",
@@ -275,7 +279,10 @@
         "value": "{colors.neutral.200}"
       },
       "text": {
-        "value": "{colors.white}"
+        "value": "{colors.white}",
+        "metadata": {
+          "pair": "buttons.primary.bg"
+        }
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"
@@ -310,7 +317,10 @@
         "value": "{colors.neutral.50}"
       },
       "text": {
-        "value": "{colors.info.700}"
+        "value": "{colors.info.700}",
+        "metadata": {
+          "pair": "buttons.secondary.bg"
+        }
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"
@@ -348,7 +358,10 @@
         "value": "transparent"
       },
       "text": {
-        "value": "{colors.info.700}"
+        "value": "{colors.info.700}",
+        "metadata": {
+          "pair": "buttons.ghost.bgHover"
+        }
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"
@@ -482,7 +495,10 @@
         "value": "{colors.accent.200}"
       },
       "text": {
-        "value": "{colors.white}"
+        "value": "{colors.white}",
+        "metadata": {
+          "pair": "buttons.accent.bg"
+        }
       },
       "textDisabled": {
         "value": "{colors.neutral.400}"

package/tokens/modes.json

@@ -21,7 +21,7 @@
           }
         },
         "overlay": {
-          "value": "{colors.neutral.900} / 0.6"
+          "value": "{colors.black} / 0.6"
         },
         "alternate": {
           "value": "{colors.neutral.100}",
@@ -303,7 +303,9 @@
           },
           "featuredText": {
             "value": "{colors.white}",
-            "metadata": {}
+            "metadata": {
+              "pair": "modes.default.component.pricingCard.featuredBg"
+            }
           },
           "featuredBadgeBg": {
             "value": "{colors.warning.500}",
@@ -313,7 +315,9 @@
           },
           "featuredBadgeText": {
             "value": "{colors.neutral.900}",
-            "metadata": {}
+            "metadata": {
+              "pair": "modes.default.component.pricingCard.featuredBadgeBg"
+            }
           },
           "price": {
             "value": "{colors.neutral.900}",
@@ -496,7 +500,7 @@
             }
           },
           "neutralText": {
-            "value": "{colors.neutral.100}",
+            "value": "{colors.neutral.50}",
             "metadata": {
               "pair": "modes.dark.component.badge.neutralBgHover"
             }
@@ -671,7 +675,9 @@
           },
           "featuredText": {
             "value": "{colors.white}",
-            "metadata": {}
+            "metadata": {
+              "pair": "modes.dark.component.pricingCard.featuredBg"
+            }
           },
           "featuredBadgeBg": {
             "value": "{colors.warning.500}",
@@ -681,7 +687,9 @@
           },
           "featuredBadgeText": {
             "value": "{colors.neutral.900}",
-            "metadata": {}
+            "metadata": {
+              "pair": "modes.dark.component.pricingCard.featuredBadgeBg"
+            }
           },
           "price": {
             "value": "{colors.neutral.100}",

package/tokens/primitives.json

@@ -20,13 +20,17 @@
     "sm": "2px",
     "md": "4px",
     "lg": "8px",
+    "xl": "12px",
+    "2xl": "16px",
     "pill": "999px"
   },
   "shadows": {
     "none": "none",
     "sm": "0 1px 2px 0 {colors.black} / 0.06",
     "md": "0 2px 6px -1px {colors.black} / 0.08",
-    "lg": "0 6px 16px -4px {colors.black} / 0.12"
+    "lg": "0 6px 16px -4px {colors.black} / 0.12",
+    "xl": "0 12px 24px -6px {colors.black} / 0.15",
+    "2xl": "0 20px 48px -12px {colors.black} / 0.20"
   },
   "breakpoints": {
     "sm": "640px",
@@ -43,64 +47,69 @@
     "overlay": "1300",
     "modal": "1400",
     "popover": "1500",
-    "tooltip": "1600"
+    "tooltip": "1600",
+    "toast": "1700"
   },
   "transitions": {
     "duration": {
       "instant": "75ms",
       "fast": "150ms",
       "base": "200ms",
+      "relaxed": "250ms",
       "moderate": "300ms",
       "slow": "500ms",
-      "slower": "700ms"
+      "slower": "700ms",
+      "long": "1000ms",
+      "slowest": "1200ms"
     },
     "easing": {
       "linear": "linear",
       "in": "cubic-bezier(0.4, 0, 1, 1)",
       "out": "cubic-bezier(0, 0, 0.2, 1)",
       "inOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-      "spring": "cubic-bezier(0.4, 0, 0.2, 1)"
+      "spring": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "overshoot": "cubic-bezier(0.34, 1.56, 0.64, 1)"
     }
   },
   "animations": {
     "fadeIn": {
-      "duration": "200ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "duration": "{transitions.duration.base}",
+      "easing": "{transitions.easing.out}",
       "keyframes": "fade-in"
     },
     "fadeOut": {
-      "duration": "150ms",
-      "easing": "cubic-bezier(0.4, 0, 1, 1)",
+      "duration": "{transitions.duration.fast}",
+      "easing": "{transitions.easing.in}",
       "keyframes": "fade-out"
     },
     "slideUp": {
-      "duration": "300ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "duration": "{transitions.duration.moderate}",
+      "easing": "{transitions.easing.out}",
       "keyframes": "slide-up"
     },
     "slideDown": {
-      "duration": "300ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "duration": "{transitions.duration.moderate}",
+      "easing": "{transitions.easing.out}",
       "keyframes": "slide-down"
     },
     "scaleIn": {
-      "duration": "200ms",
-      "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "duration": "{transitions.duration.base}",
+      "easing": "{transitions.easing.overshoot}",
       "keyframes": "scale-in"
     },
     "bounce": {
-      "duration": "300ms",
-      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "duration": "{transitions.duration.moderate}",
+      "easing": "{transitions.easing.spring}",
       "keyframes": "bounce"
     },
     "shake": {
-      "duration": "250ms",
-      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "duration": "{transitions.duration.relaxed}",
+      "easing": "{transitions.easing.spring}",
       "keyframes": "shake"
     },
     "pulse": {
-      "duration": "1200ms",
-      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "duration": "{transitions.duration.slowest}",
+      "easing": "{transitions.easing.spring}",
       "keyframes": "pulse"
     }
   },
@@ -108,6 +117,7 @@
     "disabled": "0.38",
     "hover": "0.92",
     "active": "0.84",
+    "loading": "0.6",
     "focus": "1",
     "overlay": "0.5",
     "tooltip": "0.95"
@@ -115,6 +125,7 @@
   "aspectRatios": {
     "square": "1/1",
     "video": "16/9",
+    "classic": "3/2",
     "portrait": "3/4",
     "landscape": "4/3",
     "ultrawide": "21/9",
@@ -142,6 +153,10 @@
     "width": {
       "base": "1px",
       "thick": "2px"
+    },
+    "style": {
+      "none": "none",
+      "solid": "solid"
     }
   }
 }

package/tokens/semantic-roles.json

@@ -2,34 +2,91 @@
   "surface": {
     "page": {
       "value": "{colors.neutral.50}",
-      "description": "primary app background"
+      "description": "primary app background",
+      "metadata": {
+        "pair": "text.onPage.default"
+      }
     },
     "card": {
       "value": "{colors.white}",
-      "description": "containers and tiles"
+      "description": "containers and tiles",
+      "metadata": {
+        "pair": "text.onSurface.default"
+      }
     },
     "input": {
       "value": "{colors.white}",
-      "description": "form inputs, textareas"
+      "description": "form inputs, textareas",
+      "metadata": {
+        "pair": "text.onSurface.default"
+      }
     },
     "overlay": {
-      "value": "{colors.neutral.900} / 0.6",
+      "value": "{colors.black} / 0.6",
       "description": "modals, dropdowns, flyouts"
     }
   },
   "text": {
     "onPage": {
-      "default": "{colors.neutral.900}",
-      "muted": "{colors.neutral.600}",
-      "subtle": "{colors.neutral.500}",
-      "meta": "{colors.neutral.500}",
+      "default": {
+        "value": "{colors.neutral.900}",
+        "description": "base text on page background",
+        "metadata": {
+          "pair": "surface.page"
+        }
+      },
+      "muted": {
+        "value": "{colors.neutral.600}",
+        "description": "muted text for de-emphasized content",
+        "metadata": {
+          "pair": "surface.page"
+        }
+      },
+      "subtle": {
+        "value": "{colors.neutral.500}",
+        "description": "subtle text for secondary labels",
+        "metadata": {
+          "pair": "surface.page"
+        }
+      },
+      "meta": {
+        "value": "{colors.neutral.500}",
+        "description": "meta text for smallest labels and timestamps",
+        "metadata": {
+          "pair": "surface.page"
+        }
+      },
       "brand": "{colors.brand.600}"
     },
     "onSurface": {
-      "default": "{colors.neutral.900}",
-      "muted": "{colors.neutral.600}",
-      "subtle": "{colors.neutral.500}",
-      "meta": "{colors.neutral.500}",
+      "default": {
+        "value": "{colors.neutral.900}",
+        "description": "base text on surface containers",
+        "metadata": {
+          "pair": "surface.card"
+        }
+      },
+      "muted": {
+        "value": "{colors.neutral.600}",
+        "description": "muted text on surfaces",
+        "metadata": {
+          "pair": "surface.card"
+        }
+      },
+      "subtle": {
+        "value": "{colors.neutral.500}",
+        "description": "subtle text on surfaces",
+        "metadata": {
+          "pair": "surface.card"
+        }
+      },
+      "meta": {
+        "value": "{colors.neutral.500}",
+        "description": "meta text on surfaces",
+        "metadata": {
+          "pair": "surface.card"
+        }
+      },
       "brand": "{colors.brand.600}"
     }
   },

package/tokens/typography.json

@@ -9,47 +9,56 @@
     "sm": {
       "size": "0.875rem",
       "lineHeight": "1.5rem",
-      "weight": 400
+      "weight": 400,
+      "letterSpacing": "0em"
     },
     "md": {
       "size": "1rem",
       "lineHeight": "1.75rem",
-      "weight": 500
+      "weight": 500,
+      "letterSpacing": "0em"
     },
     "lg": {
       "size": "1.25rem",
       "lineHeight": "2rem",
-      "weight": 600
+      "weight": 600,
+      "letterSpacing": "0em"
     },
     "xl": {
       "size": "1.5rem",
       "lineHeight": "2.125rem",
-      "weight": 600
+      "weight": 600,
+      "letterSpacing": "0em"
     },
     "2xl": {
       "size": "1.875rem",
       "lineHeight": "2.5rem",
-      "weight": 700
+      "weight": 700,
+      "letterSpacing": "0em"
     },
     "3xl": {
       "size": "2.25rem",
       "lineHeight": "2.75rem",
-      "weight": 700
+      "weight": 700,
+      "letterSpacing": "0em"
     },
     "4xl": {
       "size": "3rem",
       "lineHeight": "3.5rem",
-      "weight": 800
+      "weight": 800,
+      "letterSpacing": "0em"
     },
     "5xl": {
       "size": "3.75rem",
       "lineHeight": "4.25rem",
-      "weight": 800
+      "weight": 800,
+      "letterSpacing": "0em"
     },
     "6xl": {
       "size": "4.5rem",
       "lineHeight": "5rem",
-      "weight": 900
+      "weight": 900,
+      "letterSpacing": "0em"
     }
   },
   "typography": {
@@ -68,47 +77,56 @@
       "sm": {
         "fontSize": "0.875rem",
         "lineHeight": "1.5rem",
-        "fontWeight": 400
+        "fontWeight": 400,
+        "letterSpacing": "0em"
       },
       "md": {
         "fontSize": "1rem",
         "lineHeight": "1.75rem",
-        "fontWeight": 500
+        "fontWeight": 500,
+        "letterSpacing": "0em"
       },
       "lg": {
         "fontSize": "1.25rem",
         "lineHeight": "2rem",
-        "fontWeight": 600
+        "fontWeight": 600,
+        "letterSpacing": "0em"
       },
       "xl": {
         "fontSize": "1.5rem",
         "lineHeight": "2.125rem",
-        "fontWeight": 600
+        "fontWeight": 600,
+        "letterSpacing": "0em"
       },
       "2xl": {
         "fontSize": "1.875rem",
         "lineHeight": "2.5rem",
-        "fontWeight": 700
+        "fontWeight": 700,
+        "letterSpacing": "0em"
       },
       "3xl": {
         "fontSize": "2.25rem",
         "lineHeight": "2.75rem",
-        "fontWeight": 700
+        "fontWeight": 700,
+        "letterSpacing": "0em"
       },
       "4xl": {
         "fontSize": "3rem",
         "lineHeight": "3.5rem",
-        "fontWeight": 800
+        "fontWeight": 800,
+        "letterSpacing": "0em"
       },
       "5xl": {
         "fontSize": "3.75rem",
         "lineHeight": "4.25rem",
-        "fontWeight": 800
+        "fontWeight": 800,
+        "letterSpacing": "0em"
       },
       "6xl": {
         "fontSize": "4.5rem",
         "lineHeight": "5rem",
-        "fontWeight": 900
+        "fontWeight": 900,
+        "letterSpacing": "0em"
       }
     }
   }