@phcdevworks/spectre-tokens 2.7.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phcdevworks/spectre-tokens",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "@phcdevworks/spectre-tokens is the design-token package of the Spectre system for downstream Spectre packages and compatible applications.",
   "keywords": [
     "phcdevworks",
@@ -59,9 +59,10 @@
   "scripts": {
     "generate": "tsx scripts/generate-types.ts",
     "prebuild": "npm run generate",
-    "build": "npm run build:ts && npm run build:css",
+    "build": "npm run build:ts && npm run build:css && npm run build:design",
     "build:ts": "tsup --config tsup.config.ts",
     "build:css": "tsx scripts/build-css.ts",
+    "build:design": "tsx scripts/build-dtcg.ts",
     "check:manifest": "tsx scripts/check-contract-manifest.ts",
     "check:docs": "tsx scripts/check-doc-contract.ts",
     "check:dist": "tsx scripts/check-dist-sync.ts",
@@ -74,14 +75,16 @@
     "check:tailwind": "tsx scripts/check-tailwind-contract.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",
     "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: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: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": "npm run check",
+    "test:unit": "vitest run",
+    "test": "npm run test:unit && npm run check",
     "prepublishOnly": "npm run check"
   },
   "publishConfig": {
@@ -91,17 +94,23 @@
     "typescript": "^5.9 || ^6.0"
   },
   "devDependencies": {
-    "@types/node": "^25.9.1",
-    "@typescript-eslint/eslint-plugin": "^8.60.1",
-    "@typescript-eslint/parser": "^8.60.1",
+    "@phcdevworks/spectre-manifest": "^1.0.0",
+    "@types/node": "^25.9.2",
+    "@typescript-eslint/eslint-plugin": "^8.61.0",
+    "@typescript-eslint/parser": "^8.61.0",
     "colord": "^2.9.3",
     "eslint": "^10.4.1",
     "jiti": "^2.7.0",
-    "prettier": "^3.8.3",
+    "prettier": "^3.8.4",
     "ts-node": "^10.9.2",
     "tsup": "^8.5.1",
     "tsx": "^4.22.4",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.60.1"
+    "typescript-eslint": "^8.61.0",
+    "vitest": "^4.1.8"
+  },
+  "allowScripts": {
+    "esbuild@0.27.7": true,
+    "esbuild@0.28.0": true
   }
 }

package/tokens/components.json

@@ -253,6 +253,173 @@
           "pair": "surface.card"
         }
       }
+    },
+    "nav": {
+      "bg": {
+        "value": "{colors.white}",
+        "metadata": {
+          "pair": "component.nav.text"
+        }
+      },
+      "text": {
+        "value": "{colors.neutral.900}",
+        "metadata": {
+          "pair": "component.nav.bg"
+        }
+      },
+      "link": {
+        "value": "{colors.neutral.700}"
+      },
+      "linkHover": {
+        "value": "{colors.brand.600}"
+      },
+      "linkActive": {
+        "value": "{colors.brand.700}"
+      },
+      "border": {
+        "value": "{colors.neutral.200}"
+      }
+    },
+    "modal": {
+      "bg": {
+        "value": "{colors.white}"
+      },
+      "shadow": {
+        "value": "0 20px 48px -12px {colors.black} / 0.20"
+      },
+      "border": {
+        "value": "{colors.neutral.200}"
+      },
+      "overlay": {
+        "value": "{colors.black} / 0.6"
+      }
+    },
+    "toast": {
+      "success": {
+        "bg": {
+          "value": "{colors.success.50}",
+          "metadata": {
+            "pair": "component.toast.success.text"
+          }
+        },
+        "text": {
+          "value": "{colors.success.800}",
+          "metadata": {
+            "pair": "component.toast.success.bg"
+          }
+        },
+        "border": {
+          "value": "{colors.success.200}"
+        },
+        "icon": {
+          "value": "{colors.success.600}"
+        }
+      },
+      "warning": {
+        "bg": {
+          "value": "{colors.warning.50}",
+          "metadata": {
+            "pair": "component.toast.warning.text"
+          }
+        },
+        "text": {
+          "value": "{colors.warning.800}",
+          "metadata": {
+            "pair": "component.toast.warning.bg"
+          }
+        },
+        "border": {
+          "value": "{colors.warning.200}"
+        },
+        "icon": {
+          "value": "{colors.warning.600}"
+        }
+      },
+      "danger": {
+        "bg": {
+          "value": "{colors.error.50}",
+          "metadata": {
+            "pair": "component.toast.danger.text"
+          }
+        },
+        "text": {
+          "value": "{colors.error.800}",
+          "metadata": {
+            "pair": "component.toast.danger.bg"
+          }
+        },
+        "border": {
+          "value": "{colors.error.200}"
+        },
+        "icon": {
+          "value": "{colors.error.600}"
+        }
+      },
+      "info": {
+        "bg": {
+          "value": "{colors.info.50}",
+          "metadata": {
+            "pair": "component.toast.info.text"
+          }
+        },
+        "text": {
+          "value": "{colors.info.800}",
+          "metadata": {
+            "pair": "component.toast.info.bg"
+          }
+        },
+        "border": {
+          "value": "{colors.info.200}"
+        },
+        "icon": {
+          "value": "{colors.info.600}"
+        }
+      }
+    },
+    "tooltip": {
+      "bg": {
+        "value": "{colors.neutral.900}",
+        "metadata": {
+          "pair": "component.tooltip.text"
+        }
+      },
+      "text": {
+        "value": "{colors.white}",
+        "metadata": {
+          "pair": "component.tooltip.bg"
+        }
+      },
+      "border": {
+        "value": "{colors.neutral.700}"
+      }
+    },
+    "dropdown": {
+      "bg": {
+        "value": "{colors.white}",
+        "metadata": {
+          "pair": "component.dropdown.item.text"
+        }
+      },
+      "border": {
+        "value": "{colors.neutral.200}"
+      },
+      "item": {
+        "default": {
+          "value": "transparent"
+        },
+        "hover": {
+          "value": "{colors.neutral.100}"
+        },
+        "active": {
+          "value": "{colors.info.50}"
+        },
+        "text": {
+          "value": "{colors.neutral.900}",
+          "metadata": {
+            "pair": "component.dropdown.bg"
+          }
+        }
+      }
     }
   },
   "buttons": {
@@ -403,6 +570,9 @@
       },
       "focusRing": {
         "value": "{colors.error.500} / 0.4"
+      },
+      "focusVisible": {
+        "value": "{colors.error.500} / 0.4"
       }
     },
     "success": {
@@ -435,6 +605,9 @@
       },
       "focusRing": {
         "value": "{colors.success.500} / 0.4"
+      },
+      "focusVisible": {
+        "value": "{colors.success.500} / 0.4"
       }
     },
     "cta": {

package/tokens/modes.json

@@ -31,6 +31,18 @@
         },
         "hero": {
           "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
+        },
+        "hover": {
+          "value": "{colors.neutral.100}"
+        },
+        "selected": {
+          "value": "{colors.info.50}"
+        },
+        "active": {
+          "value": "{colors.neutral.200}"
+        },
+        "divider": {
+          "value": "{colors.neutral.200}"
         }
       },
       "text": {
@@ -347,6 +359,194 @@
               "pair": "modes.default.surface.card"
             }
           }
+        },
+        "nav": {
+          "bg": {
+            "value": "{colors.white}",
+            "metadata": {
+              "pair": "modes.default.component.nav.text"
+            }
+          },
+          "text": {
+            "value": "{colors.neutral.900}",
+            "metadata": {
+              "pair": "modes.default.component.nav.bg"
+            }
+          },
+          "link": {
+            "value": "{colors.neutral.700}",
+            "metadata": {}
+          },
+          "linkHover": {
+            "value": "{colors.brand.600}",
+            "metadata": {}
+          },
+          "linkActive": {
+            "value": "{colors.brand.700}",
+            "metadata": {}
+          },
+          "border": {
+            "value": "{colors.neutral.200}",
+            "metadata": {}
+          }
+        },
+        "modal": {
+          "bg": {
+            "value": "{colors.white}",
+            "metadata": {}
+          },
+          "shadow": {
+            "value": "0 20px 48px -12px {colors.black} / 0.20",
+            "metadata": {}
+          },
+          "border": {
+            "value": "{colors.neutral.200}",
+            "metadata": {}
+          },
+          "overlay": {
+            "value": "{colors.black} / 0.6",
+            "metadata": {}
+          }
+        },
+        "toast": {
+          "success": {
+            "bg": {
+              "value": "{colors.success.50}",
+              "metadata": {
+                "pair": "modes.default.component.toast.success.text"
+              }
+            },
+            "text": {
+              "value": "{colors.success.800}",
+              "metadata": {
+                "pair": "modes.default.component.toast.success.bg"
+              }
+            },
+            "border": {
+              "value": "{colors.success.200}",
+              "metadata": {}
+            },
+            "icon": {
+              "value": "{colors.success.600}",
+              "metadata": {}
+            }
+          },
+          "warning": {
+            "bg": {
+              "value": "{colors.warning.50}",
+              "metadata": {
+                "pair": "modes.default.component.toast.warning.text"
+              }
+            },
+            "text": {
+              "value": "{colors.warning.800}",
+              "metadata": {
+                "pair": "modes.default.component.toast.warning.bg"
+              }
+            },
+            "border": {
+              "value": "{colors.warning.200}",
+              "metadata": {}
+            },
+            "icon": {
+              "value": "{colors.warning.600}",
+              "metadata": {}
+            }
+          },
+          "danger": {
+            "bg": {
+              "value": "{colors.error.50}",
+              "metadata": {
+                "pair": "modes.default.component.toast.danger.text"
+              }
+            },
+            "text": {
+              "value": "{colors.error.800}",
+              "metadata": {
+                "pair": "modes.default.component.toast.danger.bg"
+              }
+            },
+            "border": {
+              "value": "{colors.error.200}",
+              "metadata": {}
+            },
+            "icon": {
+              "value": "{colors.error.600}",
+              "metadata": {}
+            }
+          },
+          "info": {
+            "bg": {
+              "value": "{colors.info.50}",
+              "metadata": {
+                "pair": "modes.default.component.toast.info.text"
+              }
+            },
+            "text": {
+              "value": "{colors.info.800}",
+              "metadata": {
+                "pair": "modes.default.component.toast.info.bg"
+              }
+            },
+            "border": {
+              "value": "{colors.info.200}",
+              "metadata": {}
+            },
+            "icon": {
+              "value": "{colors.info.600}",
+              "metadata": {}
+            }
+          }
+        },
+        "tooltip": {
+          "bg": {
+            "value": "{colors.neutral.900}",
+            "metadata": {
+              "pair": "modes.default.component.tooltip.text"
+            }
+          },
+          "text": {
+            "value": "{colors.white}",
+            "metadata": {
+              "pair": "modes.default.component.tooltip.bg"
+            }
+          },
+          "border": {
+            "value": "{colors.neutral.700}",
+            "metadata": {}
+          }
+        },
+        "dropdown": {
+          "bg": {
+            "value": "{colors.white}",
+            "metadata": {
+              "pair": "modes.default.component.dropdown.item.text"
+            }
+          },
+          "border": {
+            "value": "{colors.neutral.200}",
+            "metadata": {}
+          },
+          "item": {
+            "default": {
+              "value": "transparent",
+              "metadata": {}
+            },
+            "hover": {
+              "value": "{colors.neutral.100}",
+              "metadata": {}
+            },
+            "active": {
+              "value": "{colors.info.50}",
+              "metadata": {}
+            },
+            "text": {
+              "value": "{colors.neutral.900}",
+              "metadata": {
+                "pair": "modes.default.component.dropdown.bg"
+              }
+            }
+          }
         }
       }
     },
@@ -381,6 +581,18 @@
         },
         "hero": {
           "value": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)"
+        },
+        "hover": {
+          "value": "{colors.neutral.700}"
+        },
+        "selected": {
+          "value": "{colors.info.900}"
+        },
+        "active": {
+          "value": "{colors.neutral.600}"
+        },
+        "divider": {
+          "value": "{colors.neutral.700}"
         }
       },
       "text": {
@@ -719,6 +931,194 @@
               "pair": "modes.dark.surface.card"
             }
           }
+        },
+        "nav": {
+          "bg": {
+            "value": "{colors.neutral.900}",
+            "metadata": {
+              "pair": "modes.dark.component.nav.text"
+            }
+          },
+          "text": {
+            "value": "{colors.neutral.50}",
+            "metadata": {
+              "pair": "modes.dark.component.nav.bg"
+            }
+          },
+          "link": {
+            "value": "{colors.neutral.300}",
+            "metadata": {}
+          },
+          "linkHover": {
+            "value": "{colors.brand.400}",
+            "metadata": {}
+          },
+          "linkActive": {
+            "value": "{colors.brand.300}",
+            "metadata": {}
+          },
+          "border": {
+            "value": "{colors.neutral.700}",
+            "metadata": {}
+          }
+        },
+        "modal": {
+          "bg": {
+            "value": "{colors.neutral.800}",
+            "metadata": {}
+          },
+          "shadow": {
+            "value": "0 20px 48px -12px {colors.black} / 0.20",
+            "metadata": {}
+          },
+          "border": {
+            "value": "{colors.neutral.700}",
+            "metadata": {}
+          },
+          "overlay": {
+            "value": "{colors.black} / 0.6",
+            "metadata": {}
+          }
+        },
+        "toast": {
+          "success": {
+            "bg": {
+              "value": "{colors.success.900}",
+              "metadata": {
+                "pair": "modes.dark.component.toast.success.text"
+              }
+            },
+            "text": {
+              "value": "{colors.success.100}",
+              "metadata": {
+                "pair": "modes.dark.component.toast.success.bg"
+              }
+            },
+            "border": {
+              "value": "{colors.success.700}",
+              "metadata": {}
+            },
+            "icon": {
+              "value": "{colors.success.400}",
+              "metadata": {}
+            }
+          },
+          "warning": {
+            "bg": {
+              "value": "{colors.warning.900}",
+              "metadata": {
+                "pair": "modes.dark.component.toast.warning.text"
+              }
+            },
+            "text": {
+              "value": "{colors.warning.100}",
+              "metadata": {
+                "pair": "modes.dark.component.toast.warning.bg"
+              }
+            },
+            "border": {
+              "value": "{colors.warning.700}",
+              "metadata": {}
+            },
+            "icon": {
+              "value": "{colors.warning.400}",
+              "metadata": {}
+            }
+          },
+          "danger": {
+            "bg": {
+              "value": "{colors.error.900}",
+              "metadata": {
+                "pair": "modes.dark.component.toast.danger.text"
+              }
+            },
+            "text": {
+              "value": "{colors.error.100}",
+              "metadata": {
+                "pair": "modes.dark.component.toast.danger.bg"
+              }
+            },
+            "border": {
+              "value": "{colors.error.700}",
+              "metadata": {}
+            },
+            "icon": {
+              "value": "{colors.error.400}",
+              "metadata": {}
+            }
+          },
+          "info": {
+            "bg": {
+              "value": "{colors.info.900}",
+              "metadata": {
+                "pair": "modes.dark.component.toast.info.text"
+              }
+            },
+            "text": {
+              "value": "{colors.info.100}",
+              "metadata": {
+                "pair": "modes.dark.component.toast.info.bg"
+              }
+            },
+            "border": {
+              "value": "{colors.info.700}",
+              "metadata": {}
+            },
+            "icon": {
+              "value": "{colors.info.400}",
+              "metadata": {}
+            }
+          }
+        },
+        "tooltip": {
+          "bg": {
+            "value": "{colors.neutral.50}",
+            "metadata": {
+              "pair": "modes.dark.component.tooltip.text"
+            }
+          },
+          "text": {
+            "value": "{colors.neutral.900}",
+            "metadata": {
+              "pair": "modes.dark.component.tooltip.bg"
+            }
+          },
+          "border": {
+            "value": "{colors.neutral.300}",
+            "metadata": {}
+          }
+        },
+        "dropdown": {
+          "bg": {
+            "value": "{colors.neutral.800}",
+            "metadata": {
+              "pair": "modes.dark.component.dropdown.item.text"
+            }
+          },
+          "border": {
+            "value": "{colors.neutral.700}",
+            "metadata": {}
+          },
+          "item": {
+            "default": {
+              "value": "transparent",
+              "metadata": {}
+            },
+            "hover": {
+              "value": "{colors.neutral.700}",
+              "metadata": {}
+            },
+            "active": {
+              "value": "{colors.info.900}",
+              "metadata": {}
+            },
+            "text": {
+              "value": "{colors.neutral.100}",
+              "metadata": {
+                "pair": "modes.dark.component.dropdown.bg"
+              }
+            }
+          }
         }
       }
     }

package/tokens/palette.json

@@ -92,9 +92,9 @@
       "600": "#6f3fd7"
     },
     "focus": {
-      "primary": "#336df4",
-      "error": "#ef4444",
-      "info": "#0369a1"
+      "primary": "{colors.brand.500}",
+      "error": "{colors.error.500}",
+      "info": "{colors.info.600}"
     },
     "white": "#ffffff",
     "black": "#000000"