@tensor_1/tokens 2.1.0 → 2.3.0

package/build/css/components.css

@@ -23,6 +23,14 @@
   .uix-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--uix-space-2)); }
 
   .uix-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* elevation — apply the surface shadow tokens as a utility (cards/panels,
+     floating popovers/menus/dialogs, pressed/active pills). In dark mode
+     --uix-shadow-sm resolves to the inset top highlight, so elevated surfaces
+     keep their lift cue without a heavy drop shadow. */
+  .uix-elevated         { box-shadow: var(--uix-shadow-sm); }
+  .uix-elevated-popover { box-shadow: var(--uix-shadow-popover); }
+  .uix-elevated-pill    { box-shadow: var(--uix-shadow-sm); }
 }
 /* uix motion — shared keyframes, enter/exit helpers, and the reduced-motion guard.
    Components reference these tokens/keyframes; overlays pair the helpers with @starting-style. */
@@ -1023,9 +1031,10 @@
 }
 /* uix image lightbox — native <dialog>, click a thumbnail to enlarge. Depends only on --uix-* tokens. */
 @layer uix.components {
-  /* margin:auto centers the modal <dialog> in the viewport — required because base.css
-     resets `* { margin: 0 }`, which zeroes the UA dialog's own margin:auto (it would otherwise
-     pin to the top-left). Matches .uix-dialog. */
+  /* margin:auto centers the modal <dialog> in the viewport. Set explicitly (not
+     left to the UA default) so centering is robust regardless of any consumer
+     reset — base.css scopes its margin reset to typographic/form elements and
+     deliberately leaves <dialog> alone. Matches .uix-dialog. */
   .uix-lightbox { margin: auto; border: 0; background: transparent; padding: 0; max-width: 92vw; max-height: 92vh; box-shadow: var(--uix-shadow-overlay); overflow: visible; }
   /* A definite width is required: an SVG with a viewBox but no intrinsic width/height collapses to
      0×0 under width:auto, which then shrink-wraps the fit-content <dialog> to nothing (nothing shows

package/build/css/styles.css

@@ -51,6 +51,8 @@
     --uix-danger-fg: #FFFFFF;
     --uix-danger-bg: #FFE4E6;
     --uix-danger-text: #C20012;
+    --uix-amber: #C98A1E;
+    --uix-amber-text: #795006;
     --uix-success-solid: #10B981;
     --uix-warning-solid: #F59E0B;
     --uix-info-solid: #2563EB;
@@ -175,6 +177,8 @@
     --uix-danger-fg: #FFFFFF;
     --uix-danger-bg: rgba(220,38,38,.20);
     --uix-danger-text: #F87171;
+    --uix-amber: #E6B25C;
+    --uix-amber-text: #E6B25C;
     --uix-success-solid: #34D399;
     --uix-warning-solid: #FBBF24;
     --uix-info-solid: #3B82F6;
@@ -201,7 +205,17 @@
 /* Fonts load via the Google Fonts <link> in index.html (Inter + IBM Plex Sans + IBM Plex Mono). */
 @layer uix.base {
   *, *::before, *::after { box-sizing: border-box; }
-  * { margin: 0; }
+  /* Zero default UA margins on the elements that actually carry them — NOT a
+     bare `* { margin: 0 }`. The universal form lives in the `uix.base` layer,
+     which a Tailwind consumer orders ABOVE its own `utilities`, so a bare `*`
+     reset silently beat every margin utility (`mb-2`, `mt-4`, `space-y-*`) on
+     arbitrary layout elements (divs/sections) — the "no spacing between
+     components" bug. Scoping to typographic/default-margin elements (the same
+     set Tailwind's own preflight resets) keeps the standalone styleguide's
+     vertical rhythm while leaving layout elements free for consumer margins. */
+  body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption,
+  dl, dd, ol, ul, menu, fieldset, hr, pre,
+  button, input, optgroup, select, textarea { margin: 0; }
 
   html { -webkit-text-size-adjust: 100%; }
   /* default theme follows the OS until JS sets data-theme */
@@ -272,6 +286,14 @@
   .uix-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--uix-space-2)); }
 
   .uix-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* elevation — apply the surface shadow tokens as a utility (cards/panels,
+     floating popovers/menus/dialogs, pressed/active pills). In dark mode
+     --uix-shadow-sm resolves to the inset top highlight, so elevated surfaces
+     keep their lift cue without a heavy drop shadow. */
+  .uix-elevated         { box-shadow: var(--uix-shadow-sm); }
+  .uix-elevated-popover { box-shadow: var(--uix-shadow-popover); }
+  .uix-elevated-pill    { box-shadow: var(--uix-shadow-sm); }
 }
 /* uix motion — shared keyframes, enter/exit helpers, and the reduced-motion guard.
    Components reference these tokens/keyframes; overlays pair the helpers with @starting-style. */
@@ -924,6 +946,51 @@
   .uix-dl dt { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
   .uix-dl dd { color: var(--uix-text); font-size: var(--uix-text-body); margin: 0; }
 }
+/* uix typography utilities — class-based application of the --uix-text-* scale.
+   A `<span class="uix-text-h3">` reads identically to an `<h3>`; consumers reach
+   for these instead of re-deriving the scale inline. (House products migrating
+   off bespoke `type-*` classes map 1:1 onto these — same sizes/leading/weights.)
+   Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-text-display {
+    font-size: var(--uix-text-display); line-height: var(--uix-leading-display);
+    font-weight: 400; letter-spacing: var(--uix-tracking-tight); color: var(--uix-text);
+  }
+  .uix-text-h1 {
+    font-size: var(--uix-text-display); line-height: var(--uix-leading-display);
+    font-weight: 400; letter-spacing: var(--uix-tracking-tight); color: var(--uix-text);
+  }
+  .uix-text-h2 {
+    font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2);
+    font-weight: 400; letter-spacing: -0.01em; color: var(--uix-text);
+  }
+  .uix-text-h3 {
+    font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3);
+    font-weight: 700; color: var(--uix-text);
+  }
+  .uix-text-body {
+    font-size: var(--uix-text-body); line-height: var(--uix-leading-body);
+    font-weight: 400; color: var(--uix-text);
+  }
+  .uix-text-body-hushed {
+    font-size: var(--uix-text-body); line-height: var(--uix-leading-body);
+    font-weight: 400; color: var(--uix-text-hushed);
+  }
+  .uix-text-meta {
+    font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta);
+    font-weight: 400; color: var(--uix-text-hushed);
+  }
+  .uix-text-eyebrow {
+    font-size: var(--uix-text-eyebrow); line-height: var(--uix-leading-eyebrow);
+    font-weight: 700; letter-spacing: var(--uix-tracking-eyebrow);
+    text-transform: uppercase; color: var(--uix-text-hushed);
+  }
+  .uix-text-data-hero {
+    font-size: var(--uix-text-data-hero); line-height: 1.1;
+    font-weight: 400; letter-spacing: -0.01em; color: var(--uix-text);
+    font-variant-numeric: tabular-nums;
+  }
+}
 /* uix avatar / avatar-group / user-chip — depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-avatar {
@@ -1272,9 +1339,10 @@
 }
 /* uix image lightbox — native <dialog>, click a thumbnail to enlarge. Depends only on --uix-* tokens. */
 @layer uix.components {
-  /* margin:auto centers the modal <dialog> in the viewport — required because base.css
-     resets `* { margin: 0 }`, which zeroes the UA dialog's own margin:auto (it would otherwise
-     pin to the top-left). Matches .uix-dialog. */
+  /* margin:auto centers the modal <dialog> in the viewport. Set explicitly (not
+     left to the UA default) so centering is robust regardless of any consumer
+     reset — base.css scopes its margin reset to typographic/form elements and
+     deliberately leaves <dialog> alone. Matches .uix-dialog. */
   .uix-lightbox { margin: auto; border: 0; background: transparent; padding: 0; max-width: 92vw; max-height: 92vh; box-shadow: var(--uix-shadow-overlay); overflow: visible; }
   /* A definite width is required: an SVG with a viewBox but no intrinsic width/height collapses to
      0×0 under width:auto, which then shrink-wraps the fit-content <dialog> to nothing (nothing shows

package/build/css/tokens.css

@@ -40,6 +40,8 @@
     --uix-danger-fg: #FFFFFF;
     --uix-danger-bg: #FFE4E6;
     --uix-danger-text: #C20012;
+    --uix-amber: #C98A1E;
+    --uix-amber-text: #795006;
     --uix-success-solid: #10B981;
     --uix-warning-solid: #F59E0B;
     --uix-info-solid: #2563EB;
@@ -164,6 +166,8 @@
     --uix-danger-fg: #FFFFFF;
     --uix-danger-bg: rgba(220,38,38,.20);
     --uix-danger-text: #F87171;
+    --uix-amber: #E6B25C;
+    --uix-amber-text: #E6B25C;
     --uix-success-solid: #34D399;
     --uix-warning-solid: #FBBF24;
     --uix-info-solid: #3B82F6;

package/build/tailwind/preset.cjs

@@ -41,6 +41,8 @@ module.exports = {
       "uix-danger-fg": "var(--uix-danger-fg)",
       "uix-danger-bg": "var(--uix-danger-bg)",
       "uix-danger-text": "var(--uix-danger-text)",
+      "uix-amber": "var(--uix-amber)",
+      "uix-amber-text": "var(--uix-amber-text)",
       "uix-success-solid": "var(--uix-success-solid)",
       "uix-warning-solid": "var(--uix-warning-solid)",
       "uix-info-solid": "var(--uix-info-solid)",

package/build/tailwind/theme.css

@@ -38,6 +38,8 @@
   --color-uix-danger-fg: var(--uix-danger-fg);
   --color-uix-danger-bg: var(--uix-danger-bg);
   --color-uix-danger-text: var(--uix-danger-text);
+  --color-uix-amber: var(--uix-amber);
+  --color-uix-amber-text: var(--uix-amber-text);
   --color-uix-success-solid: var(--uix-success-solid);
   --color-uix-warning-solid: var(--uix-warning-solid);
   --color-uix-info-solid: var(--uix-info-solid);

package/build/ts/tokens.d.ts

@@ -1,5 +1,5 @@
 /* GENERATED — do not edit. */
-export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
+export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
 export declare const cssVar: Record<UixTokenName, string>;
 export declare const light: Record<UixTokenName, string>;
 export declare const dark: Partial<Record<UixTokenName, string>>;

package/build/ts/tokens.js

@@ -41,6 +41,8 @@ export const cssVar = {
   "danger-fg": "var(--uix-danger-fg)",
   "danger-bg": "var(--uix-danger-bg)",
   "danger-text": "var(--uix-danger-text)",
+  "amber": "var(--uix-amber)",
+  "amber-text": "var(--uix-amber-text)",
   "success-solid": "var(--uix-success-solid)",
   "warning-solid": "var(--uix-warning-solid)",
   "info-solid": "var(--uix-info-solid)",
@@ -170,6 +172,8 @@ export const light = {
   "danger-fg": "#FFFFFF",
   "danger-bg": "#FFE4E6",
   "danger-text": "#C20012",
+  "amber": "#C98A1E",
+  "amber-text": "#795006",
   "success-solid": "#10B981",
   "warning-solid": "#F59E0B",
   "info-solid": "#2563EB",
@@ -294,6 +298,8 @@ export const dark = {
   "danger-fg": "#FFFFFF",
   "danger-bg": "rgba(220,38,38,.20)",
   "danger-text": "#F87171",
+  "amber": "#E6B25C",
+  "amber-text": "#E6B25C",
   "success-solid": "#34D399",
   "warning-solid": "#FBBF24",
   "info-solid": "#3B82F6",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
   "type": "module",
   "license": "UNLICENSED",

package/tokens/base/color.json

@@ -39,6 +39,8 @@
   "danger-fg":  { "$type": "color", "$value": "#FFFFFF" },
   "danger-bg":  { "$type": "color", "$value": "#FFE4E6" },
   "danger-text": { "$type": "color", "$value": "#C20012", "$description": "Danger-toned TEXT, legible on --uix-danger-bg (the bright --uix-danger #E40014 is only 4.05:1 on #FFE4E6). A hand-darkened red for text; --uix-danger stays the SOLID role (danger button bg, critical pill, dots). Dark mode brightens it. Used by pill/alert/stat-trend/field-error/menu/sla/node/audit --danger." },
+  "amber":      { "$type": "color", "$value": "#C98A1E", "$description": "SEV-3 / medium-severity tone — the third tier of the severity ramp (danger = SEV-1, warning = SEV-2, amber = SEV-3). A muted ochre, deliberately distinct from the brighter --uix-warning so the three tiers read apart." },
+  "amber-text": { "$type": "color", "$value": "#795006", "$description": "Amber-toned TEXT, legible on a faint amber tint and on dark surfaces (the SEV-3 ochre is too light as text on pale fills). Dark mode brightens it to track --uix-amber. Used by severity-3 badges." },
 
   "success-solid": { "$type": "color", "$value": "#10B981", "$description": "SOLID status role — the vivid fill/dot/pulse color, distinct from the legible TEXT role (--uix-success). Products override per brand." },
   "warning-solid": { "$type": "color", "$value": "#F59E0B", "$description": "SOLID status role (see success-solid)." },

package/tokens/dark/color.json

@@ -34,6 +34,8 @@
   "danger-fg":  { "$type": "color", "$value": "#FFFFFF" },
   "danger-bg":  { "$type": "color", "$value": "rgba(220,38,38,.20)" },
   "danger-text": { "$type": "color", "$value": "#F87171", "$description": "On dark, the deep --uix-danger #DC2626 fails as text on the faint danger tint and on plain surfaces — brightened so pill/field-error/stat-trend/menu/node/audit text reads AA. --uix-danger stays the solid critical-pill / button bg (with white --uix-danger-fg)." },
+  "amber":      { "$type": "color", "$value": "#E6B25C", "$description": "SEV-3 tone lightened for dark surfaces (the light-mode ochre #C98A1E is too dark on dark)." },
+  "amber-text": { "$type": "color", "$value": "#E6B25C", "$description": "On dark the lightened amber reads as text directly — tracks --uix-amber." },
 
   "success-solid": { "$type": "color", "$value": "#34D399" },
   "warning-solid": { "$type": "color", "$value": "#FBBF24" },