@northstar-js/tokens 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@northstar-js/tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Northstar design tokens: Night and Day themes as CSS variables, a Tailwind v4 theme, JSON and typed TS.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./tailwind.css": "./dist/tailwind.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ali-amaan/northstar-design-system.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://ali-amaan.github.io/northstar-design-system/",
+  "bugs": {
+    "url": "https://github.com/ali-amaan/northstar-design-system/issues"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
 }

package/src/component.json

@@ -0,0 +1,11 @@
+{
+  "$description": "Component layer: overrides where a component needs its own value. References resolve per theme.",
+  "button": {
+    "primary": {
+      "$type": "color",
+      "bg": { "$value": "{color.signal.fill}" },
+      "fg": { "$value": "{gray.8}", "$description": "Text on the glacier fill, in both themes." },
+      "hover": { "$value": "{glacier.200}", "$description": "Primary fill on hover." }
+    }
+  }
+}

package/src/primitive.json

@@ -0,0 +1,39 @@
+{
+  "$description": "Primitive layer: raw values. Never used by components; only semantic and component tokens reference them.",
+  "gray": {
+    "$type": "color",
+    "$description": "Day neutrals, light to dark.",
+    "0": { "$value": "#FFFFFF" },
+    "1": { "$value": "#F8F9FA" },
+    "pale": { "$value": "#F4F6F8", "$description": "The pale Day ground behind star backdrops." },
+    "2": { "$value": "#F1F3F5" },
+    "3": { "$value": "#E9ECEF" },
+    "4": { "$value": "#E6E8EB" },
+    "5": { "$value": "#D4D8DD" },
+    "6": { "$value": "#656A75" },
+    "7": { "$value": "#464C56" },
+    "8": { "$value": "#06080C" }
+  },
+  "night": {
+    "$type": "color",
+    "$description": "Night neutrals, dark to light.",
+    "0": { "$value": "#08090C" },
+    "1": { "$value": "#0D0F13" },
+    "2": { "$value": "#14161B" },
+    "3": { "$value": "#1B1E24" },
+    "4": { "$value": "#1E2128" },
+    "5": { "$value": "#2B2F38" },
+    "6": { "$value": "#848A94" },
+    "7": { "$value": "#A9AEB8" },
+    "8": { "$value": "#E8EAEE" }
+  },
+  "glacier": {
+    "$type": "color",
+    "100": { "$value": "#EDF3FB" },
+    "200": { "$value": "#B9CEEA" },
+    "300": { "$value": "#93B4E0" },
+    "700": { "$value": "#2F5D9A" },
+    "alpha-12": { "$value": "rgba(147, 180, 224, 0.12)" },
+    "alpha-35": { "$value": "rgba(147, 180, 224, 0.35)" }
+  }
+}