@handamade/psi-tokens 0.9.0 → 0.10.0

package/dist/base.css

@@ -81,6 +81,7 @@
 
     --psi-container-max: 82rem;
     --psi-gutter: 2.5rem;
+    --psi-z-sticky: 1;
     --psi-z-nav: 100;
     --psi-z-overlay: 1000;
     --psi-z-tooltip: 1100;
@@ -89,5 +90,7 @@
     --psi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
     --psi-font-serif: Georgia, "Times New Roman", Times, serif;
     --psi-font-display: var(--psi-font-sans);
+
+    --psi-font-variant-numeric: tabular-nums;
   }
 }

package/dist/components/table.vars.css

@@ -0,0 +1,21 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-table-bg: var(--psi-surface-bg);
+    --psi-table-border: var(--psi-surface-border);
+    --psi-table-radius: var(--psi-surface-radius);
+    --psi-table-fg: var(--psi-fg-primary);
+    --psi-table-header-fg: var(--psi-fg-secondary);
+    --psi-table-cell-border: var(--psi-border-faint);
+    --psi-table-row-bg: transparent;
+    --psi-table-row-bg-hover: var(--psi-fill-neutral3);
+    --psi-table-row-bg-selected: var(--psi-fill-tint-accent);
+    --psi-table-sort-indicator-fg: var(--psi-fg-accent);
+    --psi-table-focus-ring: var(--psi-border-focus);
+    --psi-table-32-row-height: var(--psi-control-32-height);
+    --psi-table-40-row-height: var(--psi-control-40-height);
+    --psi-table-48-row-height: var(--psi-control-48-height);
+    --psi-table-32-cell-padding-x: var(--psi-control-32-padding-inline);
+    --psi-table-40-cell-padding-x: var(--psi-control-40-padding-inline);
+    --psi-table-48-cell-padding-x: var(--psi-control-48-padding-inline);
+  }
+}

package/dist/components.css

@@ -257,6 +257,28 @@
   }
 }
 
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-table-bg: var(--psi-surface-bg);
+    --psi-table-border: var(--psi-surface-border);
+    --psi-table-radius: var(--psi-surface-radius);
+    --psi-table-fg: var(--psi-fg-primary);
+    --psi-table-header-fg: var(--psi-fg-secondary);
+    --psi-table-cell-border: var(--psi-border-faint);
+    --psi-table-row-bg: transparent;
+    --psi-table-row-bg-hover: var(--psi-fill-neutral3);
+    --psi-table-row-bg-selected: var(--psi-fill-tint-accent);
+    --psi-table-sort-indicator-fg: var(--psi-fg-accent);
+    --psi-table-focus-ring: var(--psi-border-focus);
+    --psi-table-32-row-height: var(--psi-control-32-height);
+    --psi-table-40-row-height: var(--psi-control-40-height);
+    --psi-table-48-row-height: var(--psi-control-48-height);
+    --psi-table-32-cell-padding-x: var(--psi-control-32-padding-inline);
+    --psi-table-40-cell-padding-x: var(--psi-control-40-padding-inline);
+    --psi-table-48-cell-padding-x: var(--psi-control-48-padding-inline);
+  }
+}
+
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-tag-neutral-bg: var(--psi-fill-neutral3);

package/dist/guidance.json

@@ -118,6 +118,7 @@
   },
   "recipes": {
     "mediaTint": "Apply .psi-media-tint to media elements; the brand defines --psi-media-tint (D35). Hover/focus reveals true color over --psi-duration-450 --psi-ease-soft.",
+    "tabularNumerals": "Apply .psi-tabular to numeric content for fixed-width digits; --psi-font-variant-numeric is tabular-nums (D62). Table's numeric columns bind the token directly rather than via the utility class.",
     "sectionHeader": "SectionHeader ships as a recipe, not a component (v1.2 non-goal): baseline-aligned flex row — mono annotation (--psi-text-mono-14-20-regular, --psi-fg-accent) + h2 (.psi-display-32-32-extrabold) + optional trailing meta, border-bottom 1px var(--psi-border-faint), padding-bottom var(--psi-space-20)."
   },
   "tags": {

package/dist/resolved/acme.json

@@ -568,6 +568,7 @@
         "gutterNarrow": 24
       },
       "zIndex": {
+        "sticky": 1,
         "nav": 100,
         "overlay": 1000,
         "tooltip": 1100

package/dist/resolved/dark.json

@@ -568,6 +568,7 @@
         "gutterNarrow": 24
       },
       "zIndex": {
+        "sticky": 1,
         "nav": 100,
         "overlay": 1000,
         "tooltip": 1100

package/dist/resolved/ember.json

@@ -568,6 +568,7 @@
         "gutterNarrow": 24
       },
       "zIndex": {
+        "sticky": 1,
         "nav": 100,
         "overlay": 1000,
         "tooltip": 1100

package/dist/resolved/light.json

@@ -568,6 +568,7 @@
         "gutterNarrow": 24
       },
       "zIndex": {
+        "sticky": 1,
         "nav": 100,
         "overlay": 1000,
         "tooltip": 1100

package/dist/scope-map.json

@@ -435,6 +435,33 @@
     "switch-thumb-bg": [
       "surface"
     ],
+    "table-bg": [
+      "surface"
+    ],
+    "table-border": [
+      "border"
+    ],
+    "table-fg": [
+      "text"
+    ],
+    "table-header-fg": [
+      "text"
+    ],
+    "table-cell-border": [
+      "border"
+    ],
+    "table-row-bg": [
+      "surface"
+    ],
+    "table-row-bg-hover": [
+      "surface"
+    ],
+    "table-row-bg-selected": [
+      "surface"
+    ],
+    "table-sort-indicator-fg": [
+      "text"
+    ],
     "tag-neutral-bg": [
       "surface"
     ],

package/dist/utilities.css

@@ -143,6 +143,8 @@
   .psi-text-mono-15-24-regular { font: var(--psi-text-mono-15-24-regular); }
   .psi-text-mono-15-24-medium { font: var(--psi-text-mono-15-24-medium); }
 
+  .psi-tabular { font-variant-numeric: var(--psi-font-variant-numeric); }
+
   .psi-display-56-128-black { font: var(--psi-display-56-128-black); letter-spacing: -0.02em; text-transform: uppercase; }
   .psi-display-36-64-black { font: var(--psi-display-36-64-black); letter-spacing: -0.02em; text-transform: uppercase; }
   .psi-display-32-32-extrabold { font: var(--psi-display-32-32-extrabold); letter-spacing: -0.01em; text-transform: uppercase; }

package/llms.txt

@@ -23,7 +23,7 @@ OKLCH formula-based design tokens. Code is the source of truth; all artifacts ge
 
 ## Layout (--psi-container-max, --psi-gutter, --psi-z-*)
 - .psi-container: max-width 1312px, gutter 40px stepping to 24px under the md breakpoint.
-- --psi-z-nav (100), --psi-z-overlay (1000), --psi-z-tooltip (1100).
+- --psi-z-sticky (1), --psi-z-nav (100), --psi-z-overlay (1000), --psi-z-tooltip (1100). sticky is for elements that stack within their own local scroll container (e.g. a sticky table header), not above page chrome.
 - Breakpoints (sm 560 / md 960) are build-time constants (D31), not CSS vars: `import { breakpoints } from "@handamade/psi-tokens/types"` for any @media-driven JS/CSS-in-JS.
 
 ## Typography: display, serif, mono
@@ -37,6 +37,9 @@ OKLCH formula-based design tokens. Code is the source of truth; all artifacts ge
 ## Media tint (--psi-media-tint, .psi-media-tint)
 - --psi-media-tint is a brand-defined filter chain (D35); apply the .psi-media-tint utility class to media elements to get a tinted-at-rest, true-color-on-hover/focus treatment, transitioning over --psi-duration-450 / --psi-ease-soft.
 
+## Tabular numerals (--psi-font-variant-numeric, .psi-tabular)
+- --psi-font-variant-numeric is tabular-nums (D62); apply the .psi-tabular utility class to numeric content for fixed-width digits that don't jitter between rows. Table's own numeric columns (TableCell/TableHeaderCell `numeric` prop) bind the token directly in CSS — reach for the utility class for numeric content outside Table.
+
 ## Dark-first brands
 - A brand theme can declare `base: "dark"` (see ember) so its formulas derive from the dark palette instead of light — use this for brands whose primary surface is a dark canvas rather than treating dark as an inverted afterthought.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handamade/psi-tokens",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "type": "module",
   "exports": {