@tensor_1/tokens 2.11.0 → 2.13.0

package/styles/components/typography.css

@@ -0,0 +1,45 @@
+/* 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;
+  }
+}

package/styles/components/utility-bits.css

@@ -0,0 +1,14 @@
+/* uix utility/typography bits — code, pre, blockquote, divider, status dots. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-code { font-family: var(--uix-font-mono); font-size: .9em; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-xs); padding: .1em .4em; color: var(--uix-text); }
+  .uix-pre { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); line-height: 1.5; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); padding: var(--uix-space-4) var(--uix-space-4); overflow-x: auto; color: var(--uix-text); }
+  .uix-blockquote { border-left: 3px solid var(--uix-accent); padding: var(--uix-space-1) 0 var(--uix-space-1) var(--uix-space-4); color: var(--uix-text-hushed); font-style: italic; }
+  .uix-divider { height: 1px; background: var(--uix-border); border: 0; margin: var(--uix-space-4) 0; }
+  .uix-divider--label { display: flex; align-items: center; gap: var(--uix-space-3); color: var(--uix-text-muted); font-size: var(--uix-text-meta); background: transparent; height: auto; }
+  .uix-divider--label::before, .uix-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--uix-border); }
+  .uix-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--uix-text-muted); }
+  .uix-dot--success { background: var(--uix-success); }
+  .uix-dot--warning { background: var(--uix-warning); }
+  .uix-dot--danger { background: var(--uix-danger); }
+  .uix-dot--info { background: var(--uix-info); }
+}

package/styles/components/view-menu.css

@@ -0,0 +1,14 @@
+/* uix table View menu — consolidates density / zebra / freeze / columns into one popover.
+   Reuses .uix-popover (surface + animation), .uix-segmented, .uix-switch. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-view-menu { min-width: 248px; padding: var(--uix-space-2); }
+  .uix-view-menu__group { padding: var(--uix-space-2) var(--uix-space-2); }
+  .uix-view-menu__group + .uix-view-menu__group { border-top: 1px solid var(--uix-border); }
+  .uix-view-menu__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); margin-bottom: var(--uix-space-2); }
+  .uix-view-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); font-size: var(--uix-text-body); color: var(--uix-text); cursor: pointer; }
+  .uix-view-menu__row + .uix-view-menu__row { margin-top: var(--uix-space-3); }
+  .uix-view-menu .uix-segmented { display: flex; width: 100%; }
+  .uix-view-menu .uix-segmented__option { flex: 1; text-align: center; }
+  .uix-view-menu__cols { display: flex; flex-direction: column; gap: var(--uix-space-1); max-height: 180px; overflow: auto; }
+  .uix-view-menu__cols .uix-menu__item { font-size: var(--uix-text-meta); }
+}

package/styles/motion.css

@@ -0,0 +1,35 @@
+/* uix motion — shared keyframes, enter/exit helpers, and the reduced-motion guard.
+   Components reference these tokens/keyframes; overlays pair the helpers with @starting-style. */
+
+/* Reduced-motion guard — UNLAYERED so its !important beats every component transition. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Keyframes (cascade-neutral). */
+@keyframes uix-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes uix-pop-in {
+  from { opacity: 0; transform: scale(.96) translateY(var(--uix-lift)); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes uix-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
+@keyframes uix-slide-in-up    { from { opacity: 0; transform: translateY(8px); }   to { opacity: 1; transform: none; } }
+@keyframes uix-spin { to { transform: rotate(1turn); } }
+@keyframes uix-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+
+@layer uix.motion {
+  .uix-anim-fade { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out); }
+  .uix-anim-pop  { animation: uix-pop-in var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-anim-up   { animation: uix-slide-in-up var(--uix-dur) var(--uix-ease-out); }
+
+  /* Hover-lift affordance for interactive cards/tiles. Gated so touch devices don't get a stuck hover. */
+  .uix-lift-hover { transition: transform var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-lift-hover:hover { transform: translateY(calc(-1 * var(--uix-lift))); box-shadow: var(--uix-shadow-popover); }
+  }
+}

package/styles/utilities.css

@@ -0,0 +1,26 @@
+/* uix utilities — a few layout/a11y helpers. Keep this small; tokens + components do the heavy lifting. */
+@layer uix.util {
+  /* visually hidden but available to screen readers */
+  .uix-visually-hidden {
+    position: absolute !important;
+    width: 1px; height: 1px;
+    padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0);
+    white-space: nowrap; border: 0;
+  }
+
+  /* vertical rhythm — set gap via --gap (defaults to --uix-space-4 / 16px) */
+  .uix-stack { display: flex; flex-direction: column; gap: var(--gap, var(--uix-space-4)); }
+  /* horizontal grouping that wraps */
+  .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); }
+}