@northstar-js/tokens 0.0.0-stage → 0.1.0

package/dist/tailwind.css

@@ -0,0 +1,80 @@
+/* @northstar-js/tokens — Tailwind v4 theme. Generated. */
+@import "./tokens.css";
+
+@theme inline {
+  --color-ground: var(--ns-color-ground);
+  --color-surface-1: var(--ns-color-surface-1);
+  --color-surface-2: var(--ns-color-surface-2);
+  --color-surface-3: var(--ns-color-surface-3);
+  --color-line-1: var(--ns-color-line-1);
+  --color-line-2: var(--ns-color-line-2);
+  --color-text-1: var(--ns-color-text-1);
+  --color-text-2: var(--ns-color-text-2);
+  --color-text-3: var(--ns-color-text-3);
+  --color-signal: var(--ns-color-signal);
+  --color-signal-fill: var(--ns-color-signal-fill);
+  --color-signal-wash: var(--ns-color-signal-wash);
+  --color-signal-edge: var(--ns-color-signal-edge);
+  --color-focus: var(--ns-color-focus);
+  --color-focus-halo: var(--ns-color-focus-halo);
+  --color-data-star: var(--ns-color-data-star);
+  --color-data-node: var(--ns-color-data-node);
+  --color-data-band: var(--ns-color-data-band);
+  --color-data-horizon: var(--ns-color-data-horizon);
+  --color-data-meridian: var(--ns-color-data-meridian);
+  --color-data-graticule: var(--ns-color-data-graticule);
+  --color-data-likert-1: var(--ns-color-data-likert-1);
+  --color-data-likert-2: var(--ns-color-data-likert-2);
+  --color-data-likert-3: var(--ns-color-data-likert-3);
+  --color-data-likert-4: var(--ns-color-data-likert-4);
+  --color-data-likert-5: var(--ns-color-data-likert-5);
+  --shadow-1: var(--ns-elevation-1);
+  --shadow-2: var(--ns-elevation-2);
+  --shadow-3: var(--ns-elevation-3);
+  --color-button-primary-bg: var(--ns-button-primary-bg);
+  --color-button-primary-fg: var(--ns-button-primary-fg);
+  --font-ui: var(--ns-font-family-ui);
+  --font-mono: var(--ns-font-family-mono);
+  --font-weight-regular: var(--ns-font-weight-regular);
+  --font-weight-medium: var(--ns-font-weight-medium);
+  --font-weight-semibold: var(--ns-font-weight-semibold);
+  --text-11: var(--ns-font-size-11);
+  --text-11--line-height: var(--ns-font-line-height-11);
+  --text-12: var(--ns-font-size-12);
+  --text-12--line-height: var(--ns-font-line-height-12);
+  --text-13: var(--ns-font-size-13);
+  --text-13--line-height: var(--ns-font-line-height-13);
+  --text-15: var(--ns-font-size-15);
+  --text-15--line-height: var(--ns-font-line-height-15);
+  --text-18: var(--ns-font-size-18);
+  --text-18--line-height: var(--ns-font-line-height-18);
+  --text-24: var(--ns-font-size-24);
+  --text-24--line-height: var(--ns-font-line-height-24);
+  --text-32: var(--ns-font-size-32);
+  --text-32--line-height: var(--ns-font-line-height-32);
+  --text-48: var(--ns-font-size-48);
+  --text-48--line-height: var(--ns-font-line-height-48);
+  --text-base: var(--ns-font-size-base);
+  --text-base--line-height: var(--ns-font-line-height-13);
+  --spacing-2: var(--ns-space-2);
+  --spacing-4: var(--ns-space-4);
+  --spacing-6: var(--ns-space-6);
+  --spacing-8: var(--ns-space-8);
+  --spacing-12: var(--ns-space-12);
+  --spacing-16: var(--ns-space-16);
+  --spacing-20: var(--ns-space-20);
+  --spacing-24: var(--ns-space-24);
+  --spacing-32: var(--ns-space-32);
+  --spacing-40: var(--ns-space-40);
+  --spacing-48: var(--ns-space-48);
+  --spacing-64: var(--ns-space-64);
+  --radius-4: var(--ns-radius-4);
+  --radius-6: var(--ns-radius-6);
+  --radius-8: var(--ns-radius-8);
+  --radius-12: var(--ns-radius-12);
+  --radius-full: var(--ns-radius-full);
+  --ease-settle: var(--ns-motion-easing-settle);
+  --ease-enter: var(--ns-motion-easing-enter);
+  --ease-travel: var(--ns-motion-easing-travel);
+  --ease-exit: var(--ns-motion-easing-exit);
+}

package/dist/tokens.css

@@ -0,0 +1,216 @@
+/* @northstar-js/tokens — generated from src/*.json. Do not edit. */
+:root,
+[data-theme="night"] {
+  color-scheme: dark;
+  --ns-gray-0: #FFFFFF;
+  --ns-gray-1: #F8F9FA;
+  --ns-gray-2: #F1F3F5;
+  --ns-gray-3: #E9ECEF;
+  --ns-gray-4: #E6E8EB;
+  --ns-gray-5: #D4D8DD;
+  --ns-gray-6: #656A75;
+  --ns-gray-7: #464C56;
+  --ns-gray-8: #06080C;
+  --ns-night-0: #08090C;
+  --ns-night-1: #0D0F13;
+  --ns-night-2: #14161B;
+  --ns-night-3: #1B1E24;
+  --ns-night-4: #1E2128;
+  --ns-night-5: #2B2F38;
+  --ns-night-6: #848A94;
+  --ns-night-7: #A9AEB8;
+  --ns-night-8: #E8EAEE;
+  --ns-glacier-100: #EDF3FB;
+  --ns-glacier-200: #B9CEEA;
+  --ns-glacier-300: #93B4E0;
+  --ns-glacier-700: #2F5D9A;
+  --ns-glacier-alpha-12: rgba(147, 180, 224, 0.12);
+  --ns-glacier-alpha-35: rgba(147, 180, 224, 0.35);
+  --ns-font-family-ui: Inter, ui-sans-serif, system-ui, sans-serif;
+  --ns-font-family-mono: 'IBM Plex Mono', ui-monospace, monospace;
+  --ns-font-weight-regular: 400;
+  --ns-font-weight-medium: 500;
+  --ns-font-weight-semibold: 600;
+  --ns-font-size-11: 11px;
+  --ns-font-size-12: 12px;
+  --ns-font-size-13: 13px;
+  --ns-font-size-15: 15px;
+  --ns-font-size-18: 18px;
+  --ns-font-size-24: 24px;
+  --ns-font-size-32: 32px;
+  --ns-font-size-48: 48px;
+  --ns-font-size-base: 13px;
+  --ns-font-line-height-11: 16px;
+  --ns-font-line-height-12: 18px;
+  --ns-font-line-height-13: 20px;
+  --ns-font-line-height-15: 22px;
+  --ns-font-line-height-18: 26px;
+  --ns-font-line-height-24: 32px;
+  --ns-font-line-height-32: 40px;
+  --ns-font-line-height-48: 52px;
+  --ns-font-numeric-figures: tabular-nums;
+  --ns-space-2: 2px;
+  --ns-space-4: 4px;
+  --ns-space-6: 6px;
+  --ns-space-8: 8px;
+  --ns-space-12: 12px;
+  --ns-space-16: 16px;
+  --ns-space-20: 20px;
+  --ns-space-24: 24px;
+  --ns-space-32: 32px;
+  --ns-space-40: 40px;
+  --ns-space-48: 48px;
+  --ns-space-64: 64px;
+  --ns-size-control-sm: 28px;
+  --ns-size-control-md: 32px;
+  --ns-size-control-lg: 36px;
+  --ns-size-control-xl: 44px;
+  --ns-size-row-sm: 32px;
+  --ns-size-row-md: 36px;
+  --ns-size-row-lg: 40px;
+  --ns-size-icon-sm: 16px;
+  --ns-size-icon-md: 20px;
+  --ns-size-icon-lg: 24px;
+  --ns-size-target-coarse: 44px;
+  --ns-density-compact-control-height: 28px;
+  --ns-density-compact-row-height: 32px;
+  --ns-density-compact-row-padding: 4px;
+  --ns-density-control-height: 32px;
+  --ns-density-row-height: 36px;
+  --ns-density-row-padding: 6px;
+  --ns-density-comfortable-control-height: 36px;
+  --ns-density-comfortable-row-height: 40px;
+  --ns-density-comfortable-row-padding: 8px;
+  --ns-radius-4: 4px;
+  --ns-radius-6: 6px;
+  --ns-radius-8: 8px;
+  --ns-radius-12: 12px;
+  --ns-radius-full: 9999px;
+  --ns-z-banner: 30;
+  --ns-z-dropdown: 40;
+  --ns-z-popover: 50;
+  --ns-z-sheet: 60;
+  --ns-z-dialog: 70;
+  --ns-z-toast: 80;
+  --ns-z-tooltip: 90;
+  --ns-motion-duration-120: 120ms;
+  --ns-motion-duration-200: 200ms;
+  --ns-motion-duration-320: 320ms;
+  --ns-motion-duration-600: 600ms;
+  --ns-motion-easing-settle: cubic-bezier(0.2, 0, 0, 1);
+  --ns-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ns-motion-easing-travel: cubic-bezier(0.4, 0, 0.2, 1);
+  --ns-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ns-color-ground: #08090C;
+  --ns-color-surface-1: #0D0F13;
+  --ns-color-surface-2: #14161B;
+  --ns-color-surface-3: #1B1E24;
+  --ns-color-line-1: #1E2128;
+  --ns-color-line-2: #2B2F38;
+  --ns-color-text-1: #E8EAEE;
+  --ns-color-text-2: #A9AEB8;
+  --ns-color-text-3: #848A94;
+  --ns-color-signal: #93B4E0;
+  --ns-color-signal-fill: #93B4E0;
+  --ns-color-signal-wash: rgba(147, 180, 224, 0.12);
+  --ns-color-signal-edge: #93B4E0;
+  --ns-color-focus: #93B4E0;
+  --ns-color-focus-halo: transparent;
+  --ns-color-data-star: #E8EAEE;
+  --ns-color-data-node: #93B4E0;
+  --ns-color-data-band: rgba(147, 180, 224, 0.35);
+  --ns-color-data-horizon: #93B4E0;
+  --ns-color-data-meridian: #2B2F38;
+  --ns-color-data-graticule: #1E2128;
+  --ns-color-data-likert-1: #2B2F38;
+  --ns-color-data-likert-2: #848A94;
+  --ns-color-data-likert-3: #A9AEB8;
+  --ns-color-data-likert-4: #93B4E0;
+  --ns-color-data-likert-5: #EDF3FB;
+  --ns-elevation-1: none;
+  --ns-elevation-2: none;
+  --ns-elevation-3: none;
+  --ns-button-primary-bg: #93B4E0;
+  --ns-button-primary-fg: #06080C;
+}
+
+[data-theme="day"] {
+  color-scheme: light;
+  --ns-color-ground: #FFFFFF;
+  --ns-color-surface-1: #F8F9FA;
+  --ns-color-surface-2: #F1F3F5;
+  --ns-color-surface-3: #E9ECEF;
+  --ns-color-line-1: #E6E8EB;
+  --ns-color-line-2: #D4D8DD;
+  --ns-color-text-1: #06080C;
+  --ns-color-text-2: #464C56;
+  --ns-color-text-3: #656A75;
+  --ns-color-signal: #2F5D9A;
+  --ns-color-signal-fill: #93B4E0;
+  --ns-color-signal-wash: #EDF3FB;
+  --ns-color-signal-edge: #B9CEEA;
+  --ns-color-focus: #2F5D9A;
+  --ns-color-focus-halo: rgba(147, 180, 224, 0.35);
+  --ns-color-data-star: #06080C;
+  --ns-color-data-node: #2F5D9A;
+  --ns-color-data-band: rgba(147, 180, 224, 0.35);
+  --ns-color-data-horizon: #2F5D9A;
+  --ns-color-data-meridian: #D4D8DD;
+  --ns-color-data-graticule: #E6E8EB;
+  --ns-color-data-likert-1: #E6E8EB;
+  --ns-color-data-likert-2: #D4D8DD;
+  --ns-color-data-likert-3: #B9CEEA;
+  --ns-color-data-likert-4: #93B4E0;
+  --ns-color-data-likert-5: #2F5D9A;
+  --ns-elevation-1: 0 1px 2px rgba(6, 8, 12, 0.06);
+  --ns-elevation-2: 0 4px 12px rgba(6, 8, 12, 0.08);
+  --ns-elevation-3: 0 12px 32px rgba(6, 8, 12, 0.12);
+  --ns-button-primary-bg: #93B4E0;
+  --ns-button-primary-fg: #06080C;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    color-scheme: light;
+    --ns-color-ground: #FFFFFF;
+    --ns-color-surface-1: #F8F9FA;
+    --ns-color-surface-2: #F1F3F5;
+    --ns-color-surface-3: #E9ECEF;
+    --ns-color-line-1: #E6E8EB;
+    --ns-color-line-2: #D4D8DD;
+    --ns-color-text-1: #06080C;
+    --ns-color-text-2: #464C56;
+    --ns-color-text-3: #656A75;
+    --ns-color-signal: #2F5D9A;
+    --ns-color-signal-fill: #93B4E0;
+    --ns-color-signal-wash: #EDF3FB;
+    --ns-color-signal-edge: #B9CEEA;
+    --ns-color-focus: #2F5D9A;
+    --ns-color-focus-halo: rgba(147, 180, 224, 0.35);
+    --ns-color-data-star: #06080C;
+    --ns-color-data-node: #2F5D9A;
+    --ns-color-data-band: rgba(147, 180, 224, 0.35);
+    --ns-color-data-horizon: #2F5D9A;
+    --ns-color-data-meridian: #D4D8DD;
+    --ns-color-data-graticule: #E6E8EB;
+    --ns-color-data-likert-1: #E6E8EB;
+    --ns-color-data-likert-2: #D4D8DD;
+    --ns-color-data-likert-3: #B9CEEA;
+    --ns-color-data-likert-4: #93B4E0;
+    --ns-color-data-likert-5: #2F5D9A;
+    --ns-elevation-1: 0 1px 2px rgba(6, 8, 12, 0.06);
+    --ns-elevation-2: 0 4px 12px rgba(6, 8, 12, 0.08);
+    --ns-elevation-3: 0 12px 32px rgba(6, 8, 12, 0.12);
+    --ns-button-primary-bg: #93B4E0;
+    --ns-button-primary-fg: #06080C;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ns-motion-duration-120: 0ms;
+    --ns-motion-duration-200: 0ms;
+    --ns-motion-duration-320: 0ms;
+    --ns-motion-duration-600: 0ms;
+  }
+}

package/dist/tokens.json

@@ -0,0 +1,305 @@
+{
+  "primitive": {
+    "gray.0": "#FFFFFF",
+    "gray.1": "#F8F9FA",
+    "gray.2": "#F1F3F5",
+    "gray.3": "#E9ECEF",
+    "gray.4": "#E6E8EB",
+    "gray.5": "#D4D8DD",
+    "gray.6": "#656A75",
+    "gray.7": "#464C56",
+    "gray.8": "#06080C",
+    "night.0": "#08090C",
+    "night.1": "#0D0F13",
+    "night.2": "#14161B",
+    "night.3": "#1B1E24",
+    "night.4": "#1E2128",
+    "night.5": "#2B2F38",
+    "night.6": "#848A94",
+    "night.7": "#A9AEB8",
+    "night.8": "#E8EAEE",
+    "glacier.100": "#EDF3FB",
+    "glacier.200": "#B9CEEA",
+    "glacier.300": "#93B4E0",
+    "glacier.700": "#2F5D9A",
+    "glacier.alpha-12": "rgba(147, 180, 224, 0.12)",
+    "glacier.alpha-35": "rgba(147, 180, 224, 0.35)"
+  },
+  "scales": {
+    "font.family.ui": "Inter, ui-sans-serif, system-ui, sans-serif",
+    "font.family.mono": "'IBM Plex Mono', ui-monospace, monospace",
+    "font.weight.regular": "400",
+    "font.weight.medium": "500",
+    "font.weight.semibold": "600",
+    "font.size.11": "11px",
+    "font.size.12": "12px",
+    "font.size.13": "13px",
+    "font.size.15": "15px",
+    "font.size.18": "18px",
+    "font.size.24": "24px",
+    "font.size.32": "32px",
+    "font.size.48": "48px",
+    "font.size.base": "13px",
+    "font.line-height.11": "16px",
+    "font.line-height.12": "18px",
+    "font.line-height.13": "20px",
+    "font.line-height.15": "22px",
+    "font.line-height.18": "26px",
+    "font.line-height.24": "32px",
+    "font.line-height.32": "40px",
+    "font.line-height.48": "52px",
+    "font.numeric.figures": "tabular-nums",
+    "space.2": "2px",
+    "space.4": "4px",
+    "space.6": "6px",
+    "space.8": "8px",
+    "space.12": "12px",
+    "space.16": "16px",
+    "space.20": "20px",
+    "space.24": "24px",
+    "space.32": "32px",
+    "space.40": "40px",
+    "space.48": "48px",
+    "space.64": "64px",
+    "size.control.sm": "28px",
+    "size.control.md": "32px",
+    "size.control.lg": "36px",
+    "size.control.xl": "44px",
+    "size.row.sm": "32px",
+    "size.row.md": "36px",
+    "size.row.lg": "40px",
+    "size.icon.sm": "16px",
+    "size.icon.md": "20px",
+    "size.icon.lg": "24px",
+    "size.target.coarse": "44px",
+    "density.compact.control-height": "28px",
+    "density.compact.row-height": "32px",
+    "density.compact.row-padding": "4px",
+    "density.default.control-height": "32px",
+    "density.default.row-height": "36px",
+    "density.default.row-padding": "6px",
+    "density.comfortable.control-height": "36px",
+    "density.comfortable.row-height": "40px",
+    "density.comfortable.row-padding": "8px",
+    "radius.4": "4px",
+    "radius.6": "6px",
+    "radius.8": "8px",
+    "radius.12": "12px",
+    "radius.full": "9999px",
+    "z.banner": "30",
+    "z.dropdown": "40",
+    "z.popover": "50",
+    "z.sheet": "60",
+    "z.dialog": "70",
+    "z.toast": "80",
+    "z.tooltip": "90",
+    "motion.duration.120": "120ms",
+    "motion.duration.200": "200ms",
+    "motion.duration.320": "320ms",
+    "motion.duration.600": "600ms",
+    "motion.easing.settle": "cubic-bezier(0.2, 0, 0, 1)",
+    "motion.easing.enter": "cubic-bezier(0, 0, 0.2, 1)",
+    "motion.easing.travel": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "motion.easing.exit": "cubic-bezier(0.4, 0, 1, 1)"
+  },
+  "themes": {
+    "night": {
+      "color.ground": "#08090C",
+      "color.surface.1": "#0D0F13",
+      "color.surface.2": "#14161B",
+      "color.surface.3": "#1B1E24",
+      "color.line.1": "#1E2128",
+      "color.line.2": "#2B2F38",
+      "color.text.1": "#E8EAEE",
+      "color.text.2": "#A9AEB8",
+      "color.text.3": "#848A94",
+      "color.signal.default": "#93B4E0",
+      "color.signal.fill": "#93B4E0",
+      "color.signal.wash": "rgba(147, 180, 224, 0.12)",
+      "color.signal.edge": "#93B4E0",
+      "color.focus.default": "#93B4E0",
+      "color.focus.halo": "transparent",
+      "color.data.star": "#E8EAEE",
+      "color.data.node": "#93B4E0",
+      "color.data.band": "rgba(147, 180, 224, 0.35)",
+      "color.data.horizon": "#93B4E0",
+      "color.data.meridian": "#2B2F38",
+      "color.data.graticule": "#1E2128",
+      "color.data.likert.1": "#2B2F38",
+      "color.data.likert.2": "#848A94",
+      "color.data.likert.3": "#A9AEB8",
+      "color.data.likert.4": "#93B4E0",
+      "color.data.likert.5": "#EDF3FB",
+      "elevation.1": "none",
+      "elevation.2": "none",
+      "elevation.3": "none",
+      "button.primary.bg": "#93B4E0",
+      "button.primary.fg": "#06080C"
+    },
+    "day": {
+      "color.ground": "#FFFFFF",
+      "color.surface.1": "#F8F9FA",
+      "color.surface.2": "#F1F3F5",
+      "color.surface.3": "#E9ECEF",
+      "color.line.1": "#E6E8EB",
+      "color.line.2": "#D4D8DD",
+      "color.text.1": "#06080C",
+      "color.text.2": "#464C56",
+      "color.text.3": "#656A75",
+      "color.signal.default": "#2F5D9A",
+      "color.signal.fill": "#93B4E0",
+      "color.signal.wash": "#EDF3FB",
+      "color.signal.edge": "#B9CEEA",
+      "color.focus.default": "#2F5D9A",
+      "color.focus.halo": "rgba(147, 180, 224, 0.35)",
+      "color.data.star": "#06080C",
+      "color.data.node": "#2F5D9A",
+      "color.data.band": "rgba(147, 180, 224, 0.35)",
+      "color.data.horizon": "#2F5D9A",
+      "color.data.meridian": "#D4D8DD",
+      "color.data.graticule": "#E6E8EB",
+      "color.data.likert.1": "#E6E8EB",
+      "color.data.likert.2": "#D4D8DD",
+      "color.data.likert.3": "#B9CEEA",
+      "color.data.likert.4": "#93B4E0",
+      "color.data.likert.5": "#2F5D9A",
+      "elevation.1": "0 1px 2px rgba(6, 8, 12, 0.06)",
+      "elevation.2": "0 4px 12px rgba(6, 8, 12, 0.08)",
+      "elevation.3": "0 12px 32px rgba(6, 8, 12, 0.12)",
+      "button.primary.bg": "#93B4E0",
+      "button.primary.fg": "#06080C"
+    }
+  },
+  "cssVar": {
+    "gray.0": "--ns-gray-0",
+    "gray.1": "--ns-gray-1",
+    "gray.2": "--ns-gray-2",
+    "gray.3": "--ns-gray-3",
+    "gray.4": "--ns-gray-4",
+    "gray.5": "--ns-gray-5",
+    "gray.6": "--ns-gray-6",
+    "gray.7": "--ns-gray-7",
+    "gray.8": "--ns-gray-8",
+    "night.0": "--ns-night-0",
+    "night.1": "--ns-night-1",
+    "night.2": "--ns-night-2",
+    "night.3": "--ns-night-3",
+    "night.4": "--ns-night-4",
+    "night.5": "--ns-night-5",
+    "night.6": "--ns-night-6",
+    "night.7": "--ns-night-7",
+    "night.8": "--ns-night-8",
+    "glacier.100": "--ns-glacier-100",
+    "glacier.200": "--ns-glacier-200",
+    "glacier.300": "--ns-glacier-300",
+    "glacier.700": "--ns-glacier-700",
+    "glacier.alpha-12": "--ns-glacier-alpha-12",
+    "glacier.alpha-35": "--ns-glacier-alpha-35",
+    "font.family.ui": "--ns-font-family-ui",
+    "font.family.mono": "--ns-font-family-mono",
+    "font.weight.regular": "--ns-font-weight-regular",
+    "font.weight.medium": "--ns-font-weight-medium",
+    "font.weight.semibold": "--ns-font-weight-semibold",
+    "font.size.11": "--ns-font-size-11",
+    "font.size.12": "--ns-font-size-12",
+    "font.size.13": "--ns-font-size-13",
+    "font.size.15": "--ns-font-size-15",
+    "font.size.18": "--ns-font-size-18",
+    "font.size.24": "--ns-font-size-24",
+    "font.size.32": "--ns-font-size-32",
+    "font.size.48": "--ns-font-size-48",
+    "font.size.base": "--ns-font-size-base",
+    "font.line-height.11": "--ns-font-line-height-11",
+    "font.line-height.12": "--ns-font-line-height-12",
+    "font.line-height.13": "--ns-font-line-height-13",
+    "font.line-height.15": "--ns-font-line-height-15",
+    "font.line-height.18": "--ns-font-line-height-18",
+    "font.line-height.24": "--ns-font-line-height-24",
+    "font.line-height.32": "--ns-font-line-height-32",
+    "font.line-height.48": "--ns-font-line-height-48",
+    "font.numeric.figures": "--ns-font-numeric-figures",
+    "space.2": "--ns-space-2",
+    "space.4": "--ns-space-4",
+    "space.6": "--ns-space-6",
+    "space.8": "--ns-space-8",
+    "space.12": "--ns-space-12",
+    "space.16": "--ns-space-16",
+    "space.20": "--ns-space-20",
+    "space.24": "--ns-space-24",
+    "space.32": "--ns-space-32",
+    "space.40": "--ns-space-40",
+    "space.48": "--ns-space-48",
+    "space.64": "--ns-space-64",
+    "size.control.sm": "--ns-size-control-sm",
+    "size.control.md": "--ns-size-control-md",
+    "size.control.lg": "--ns-size-control-lg",
+    "size.control.xl": "--ns-size-control-xl",
+    "size.row.sm": "--ns-size-row-sm",
+    "size.row.md": "--ns-size-row-md",
+    "size.row.lg": "--ns-size-row-lg",
+    "size.icon.sm": "--ns-size-icon-sm",
+    "size.icon.md": "--ns-size-icon-md",
+    "size.icon.lg": "--ns-size-icon-lg",
+    "size.target.coarse": "--ns-size-target-coarse",
+    "density.compact.control-height": "--ns-density-compact-control-height",
+    "density.compact.row-height": "--ns-density-compact-row-height",
+    "density.compact.row-padding": "--ns-density-compact-row-padding",
+    "density.default.control-height": "--ns-density-control-height",
+    "density.default.row-height": "--ns-density-row-height",
+    "density.default.row-padding": "--ns-density-row-padding",
+    "density.comfortable.control-height": "--ns-density-comfortable-control-height",
+    "density.comfortable.row-height": "--ns-density-comfortable-row-height",
+    "density.comfortable.row-padding": "--ns-density-comfortable-row-padding",
+    "radius.4": "--ns-radius-4",
+    "radius.6": "--ns-radius-6",
+    "radius.8": "--ns-radius-8",
+    "radius.12": "--ns-radius-12",
+    "radius.full": "--ns-radius-full",
+    "z.banner": "--ns-z-banner",
+    "z.dropdown": "--ns-z-dropdown",
+    "z.popover": "--ns-z-popover",
+    "z.sheet": "--ns-z-sheet",
+    "z.dialog": "--ns-z-dialog",
+    "z.toast": "--ns-z-toast",
+    "z.tooltip": "--ns-z-tooltip",
+    "motion.duration.120": "--ns-motion-duration-120",
+    "motion.duration.200": "--ns-motion-duration-200",
+    "motion.duration.320": "--ns-motion-duration-320",
+    "motion.duration.600": "--ns-motion-duration-600",
+    "motion.easing.settle": "--ns-motion-easing-settle",
+    "motion.easing.enter": "--ns-motion-easing-enter",
+    "motion.easing.travel": "--ns-motion-easing-travel",
+    "motion.easing.exit": "--ns-motion-easing-exit",
+    "color.ground": "--ns-color-ground",
+    "color.surface.1": "--ns-color-surface-1",
+    "color.surface.2": "--ns-color-surface-2",
+    "color.surface.3": "--ns-color-surface-3",
+    "color.line.1": "--ns-color-line-1",
+    "color.line.2": "--ns-color-line-2",
+    "color.text.1": "--ns-color-text-1",
+    "color.text.2": "--ns-color-text-2",
+    "color.text.3": "--ns-color-text-3",
+    "color.signal.default": "--ns-color-signal",
+    "color.signal.fill": "--ns-color-signal-fill",
+    "color.signal.wash": "--ns-color-signal-wash",
+    "color.signal.edge": "--ns-color-signal-edge",
+    "color.focus.default": "--ns-color-focus",
+    "color.focus.halo": "--ns-color-focus-halo",
+    "color.data.star": "--ns-color-data-star",
+    "color.data.node": "--ns-color-data-node",
+    "color.data.band": "--ns-color-data-band",
+    "color.data.horizon": "--ns-color-data-horizon",
+    "color.data.meridian": "--ns-color-data-meridian",
+    "color.data.graticule": "--ns-color-data-graticule",
+    "color.data.likert.1": "--ns-color-data-likert-1",
+    "color.data.likert.2": "--ns-color-data-likert-2",
+    "color.data.likert.3": "--ns-color-data-likert-3",
+    "color.data.likert.4": "--ns-color-data-likert-4",
+    "color.data.likert.5": "--ns-color-data-likert-5",
+    "elevation.1": "--ns-elevation-1",
+    "elevation.2": "--ns-elevation-2",
+    "elevation.3": "--ns-elevation-3",
+    "button.primary.bg": "--ns-button-primary-bg",
+    "button.primary.fg": "--ns-button-primary-fg"
+  }
+}

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.1.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,10 @@
+{
+  "$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." }
+    }
+  }
+}