@tensor_1/tokens

UIx v2 design tokens — the --uix-* contract (colors, typography, spacing, radii, motion, light/dark) for the house products. One DTCG source generates CSS variables, a Tailwind theme, and typed TS constants.

Stack-neutral. Drop the CSS into any project (HTML, React, Vue, Tailwind, server-rendered). The --uix-* names are the contract — override values, never names.

Install

npm i @tensor_1/tokens

Use

Tailwind / shadcn:

@import "@tensor_1/tokens/css";            /* the --uix-* contract (light + dark) */
@import "@tensor_1/tokens/themes/tensor";  /* a product brand */
@import "@tensor_1/tokens/tailwind";       /* @theme — bg-uix-accent, rounded-uix-md, … */
@import "tailwindcss";

(Tailwind v3: presets: [require('@tensor_1/tokens/tailwind/preset')].)

Plain CSS: link @tensor_1/tokens/css, then a product theme.

TS / ECharts / React Native:

import { cssVar, light, dark, num } from "@tensor_1/tokens/ts";

cssVar in the browser (respects brand + dark); light / dark / num for non-DOM (SSR, RN, server-rendered charts).

Brand a project

Override the write-only brand slots; accent / link / ring / brand-muted re-chain automatically:

:root { --uix-brand: #16A34A; --uix-brand-fg: #FFFFFF; }
:root:where(.dark,[data-theme="dark"]) { --uix-brand: #22C55E; }

Exports

| Subpath | What | |---|---| | ./css | the --uix-* contract (:root light, dark selector) | | ./styles | component CSS (use with the tokens + a theme) | | ./components/* | one component stylesheet for selective loading | | ./utilities · ./motion | shared utility and motion layers | | ./tailwind · ./tailwind/preset | Tailwind v4 @theme / v3 preset | | ./ts | typed cssVar / light / dark / num | | ./themes/{tensor,posx,shopx,mission-control} | per-product brand |

Source of truth: tokens/*.json (DTCG) → Style Dictionary. Part of the UIx v2 styleguide.

Primitives — consume, don't fork

The following CSS primitives (and their @tensor_1/react wrappers) are the intended consumption point for the tokens below. If your codebase reimplements any of these, replace it with the primitive so theme/brand overrides, dark mode, and WCAG contrast all apply automatically.

| Primitive | CSS file | Key --uix-* tokens | |---|---|---| | Row selection | table.css tr[aria-selected] | --uix-row-selected-bg | | Table column sizing | table.css .uix-col--w-* / --flex / --truncate / --num · <Table fixed> | --uix-col-w-xs…xl, --uix-col-title-min | | Selection bulk bar | table.css .uix-bulkbar · <BulkBar> | --uix-brand-muted, --uix-accent | | Row hover actions / kebab | table.css .uix-table__actions / .uix-rowact · <RowActions> / <RowAction> | --uix-bg-active, --uix-text-muted | | Expandable row detail | table.css .uix-table__detail / .uix-kv · <ExpandToggle> | --uix-bg-subtle | | Inline cell edit | table.css .uix-cell-edit | --uix-ring, --uix-success | | Column resize grip | table.css .uix-table__resize | --uix-accent | | Search-match highlight | table.css .uix-mark · <Mark> / <Highlighted> | --uix-warning-bg, --uix-warning | | Cell content vocabulary | table.css .uix-cell-strong / -sub / -mono · <CellStrong> / <CellSub> | --uix-text-muted, --uix-font-mono | | Responsive table ladder | table.css .uix-table--priority / --cards | --uix-border, --uix-surface, --uix-shadow-sm | | Record compare view | table.css .uix-compare | --uix-border, --uix-surface, --uix-bg-subtle | | Utilization / threshold bar | meter.css · <Meter> | --uix-attention, --uix-overdue, --uix-warning, --uix-danger | | Triage inbox | inbox.css · <Inbox> / <InboxItem> | --uix-brand-muted, --uix-accent (accent stripe) | | Status + SLA + priority pill | status-pill.css · <StatusPill> | --uix-sla-ok/at-risk/breached, --uix-p1…--uix-p5, --uix-attention, --uix-overdue | | Entity detail related-panels | <DetailLayout> (@tensor_1/react) | --uix-surface, --uix-border | | App-shell nav width tiers | app-shell.css .uix-shell[data-nav="full\|rail\|hidden"] · <AppShell nav> | --uix-sidebar-w, --uix-sidebar-w-rail | | Shell focus / full-bleed | app-shell.css .uix-shell[data-focus] / .uix-shell__main--bleed · <AppShell focus mainBleed> | --uix-z-overlay, --uix-space-7 | | Table logic engine | @tensor_1/react table-engine (multiSort / applyFilters / searchRows / serializeView / virtualWindow / selection) | — behaviour primitive; keeps vanilla + React grids identical | | Rule authoring | rule-builder.css · <RuleBuilder> | Existing surface, form, border, text, state, and focus tokens | | Builder canvas | builder-canvas.css · <BuilderCanvas> | Existing surface, spacing, border, text, and focus tokens | | Scheduling + date range | scheduling-calendar.css / date-range-picker.css · React wrappers | Existing calendar, surface, semantic-state, and focus tokens | | Relationship graph | relationship-graph.css · <RelationshipGraph> | Existing chart, surface, border, semantic-state, and focus tokens | | Operational pipeline + flow | pipeline.css, flow.css · <Pipeline> / <Flow> families | Existing surface, border, spacing, semantic-state, focus, and motion tokens | | Analytical charts | chart.css · <Chart> through the optional React chart entry | Existing chart palette, surface, text, semantic-state, and focus tokens | | Review + configuration | match-review.css, metric-input.css, license-position-bar.css, diff-viewer.css · React wrappers | Existing form, table, meter, status, and semantic-state tokens | | Brand profiles + color | brand-profiles.css, color-picker.css · React wrappers | Write-only --uix-brand / --uix-brand-fg through the existing accent chain |

If you reach for var(--uix-danger) or var(--uix-warning) to render SLA urgency or severity, use <StatusPill tone="sla-breached"> or <StatusPill tone="p1"> instead — the component handles WCAG contrast, dark mode, and brand overrides; a raw literal does not.

Likewise, don't fork the data grid: a product-local data-table.tsx (bespoke sort/filter/selection/resize + hand-coded column widths) should be replaced by <Table> + the subcomponents above, composed over the framework-agnostic table-engine (or the useTable hook). Sorting, filtering, search highlighting, saved views, and virtualization then match the vanilla styleguide exactly, and every visual affordance re-themes with the tokens listed here.

Documentation site

A build-free documentation site lives in docs/. It provides an actionable quick start, grouped navigation, keyboard search, token and theming guidance, a complete component catalogue, detailed core-component references, live UIx examples, React integration, accessibility guidance, and enterprise workflow patterns. The site consumes build/css/styles.css directly, so its examples exercise the shipped contract rather than a parallel documentation theme. docs/docs.js keeps the content registry, hash routing, and pure unit-tested search/render helpers in one dependency-free module.

Serve it from the repo root (the styleguide's static root) so relative asset paths resolve:

npm run docs:serve
# → http://localhost:4178/packages/tokens/docs/index.html