@tensor_1/tokens 2.4.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -0
- package/build/css/components.css +148 -29
- package/build/css/styles.css +155 -29
- package/build/css/tokens.css +7 -0
- package/build/ts/tokens.d.ts +1 -1
- package/build/ts/tokens.js +21 -0
- package/package.json +1 -1
- package/tokens/base/size.json +9 -1
package/README.md
CHANGED
|
@@ -56,9 +56,24 @@ The following CSS primitives (and their `@tensor_1/react` wrappers) are the inte
|
|
|
56
56
|
| Primitive | CSS file | Key `--uix-*` tokens |
|
|
57
57
|
|---|---|---|
|
|
58
58
|
| Row selection | `table.css` `tr[aria-selected]` | `--uix-row-selected-bg` |
|
|
59
|
+
| Table column sizing | `table.css` `.uix-col--w-*` / `--flex` / `--truncate` / `--num` · `<Table fixed>` | `--uix-col-w-xs…xl`, `--uix-col-title-min` |
|
|
60
|
+
| Selection bulk bar | `table.css` `.uix-bulkbar` · `<BulkBar>` | `--uix-brand-muted`, `--uix-accent` |
|
|
61
|
+
| Row hover actions / kebab | `table.css` `.uix-table__actions` / `.uix-rowact` · `<RowActions>` / `<RowAction>` | `--uix-bg-active`, `--uix-text-muted` |
|
|
62
|
+
| Expandable row detail | `table.css` `.uix-table__detail` / `.uix-kv` · `<ExpandToggle>` | `--uix-bg-subtle` |
|
|
63
|
+
| Inline cell edit | `table.css` `.uix-cell-edit` | `--uix-ring`, `--uix-success` |
|
|
64
|
+
| Column resize grip | `table.css` `.uix-table__resize` | `--uix-accent` |
|
|
65
|
+
| Search-match highlight | `table.css` `.uix-mark` · `<Mark>` / `<Highlighted>` | `--uix-warning-bg`, `--uix-warning` |
|
|
66
|
+
| Cell content vocabulary | `table.css` `.uix-cell-strong` / `-sub` / `-mono` · `<CellStrong>` / `<CellSub>` | `--uix-text-muted`, `--uix-font-mono` |
|
|
67
|
+
| Responsive table ladder | `table.css` `.uix-table--priority` / `--cards` | `--uix-border`, `--uix-surface`, `--uix-shadow-sm` |
|
|
68
|
+
| Record compare view | `table.css` `.uix-compare` | `--uix-border`, `--uix-surface`, `--uix-bg-subtle` |
|
|
59
69
|
| Utilization / threshold bar | `meter.css` · `<Meter>` | `--uix-attention`, `--uix-overdue`, `--uix-warning`, `--uix-danger` |
|
|
60
70
|
| Triage inbox | `inbox.css` · `<Inbox>` / `<InboxItem>` | `--uix-brand-muted`, `--uix-accent` (accent stripe) |
|
|
61
71
|
| Status + SLA + priority pill | `status-pill.css` · `<StatusPill>` | `--uix-sla-ok/at-risk/breached`, `--uix-p1`…`--uix-p5`, `--uix-attention`, `--uix-overdue` |
|
|
62
72
|
| Entity detail related-panels | `<DetailLayout>` (`@tensor_1/react`) | `--uix-surface`, `--uix-border` |
|
|
73
|
+
| App-shell nav width tiers | `app-shell.css` `.uix-shell[data-nav="full\|rail\|hidden"]` · `<AppShell nav>` | `--uix-sidebar-w`, `--uix-sidebar-w-rail` |
|
|
74
|
+
| Shell focus / full-bleed | `app-shell.css` `.uix-shell[data-focus]` / `.uix-shell__main--bleed` · `<AppShell focus mainBleed>` | `--uix-z-overlay`, `--uix-space-7` |
|
|
75
|
+
| Table logic engine | `@tensor_1/react` `table-engine` (multiSort / applyFilters / searchRows / serializeView / virtualWindow / selection) | — behaviour primitive; keeps vanilla + React grids identical |
|
|
63
76
|
|
|
64
77
|
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.
|
|
78
|
+
|
|
79
|
+
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.
|
package/build/css/components.css
CHANGED
|
@@ -351,17 +351,39 @@
|
|
|
351
351
|
/* uix app shell — sidebar + topbar + content grid. Depends only on --uix-* tokens. */
|
|
352
352
|
@layer uix.components {
|
|
353
353
|
.uix-shell {
|
|
354
|
+
position: relative;
|
|
354
355
|
display: grid;
|
|
355
356
|
grid-template-columns: var(--uix-sidebar-w) 1fr;
|
|
356
357
|
grid-template-rows: var(--uix-topbar-h) 1fr;
|
|
357
358
|
height: 100%; min-height: 360px;
|
|
358
359
|
border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
|
|
359
|
-
transition: grid-template-columns var(--uix-dur) var(--uix-ease-out);
|
|
360
|
+
transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
|
|
360
361
|
}
|
|
361
|
-
.uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; }
|
|
362
|
+
.uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; }
|
|
362
363
|
.uix-shell__topbar { grid-column: 2; display: flex; align-items: center; gap: var(--uix-space-3); padding: 0 var(--uix-space-6); background: var(--uix-bg-app); border-bottom: 1px solid var(--uix-border); }
|
|
363
364
|
.uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
|
|
364
|
-
|
|
365
|
+
|
|
366
|
+
/* ── nav width tiers ──────────────────────────────────────────────────────────
|
|
367
|
+
Progressive reveal for wide, many-column tables: full (default) → rail (icon
|
|
368
|
+
only) → hidden (0). data-collapsed stays a back-compat alias for the rail. */
|
|
369
|
+
.uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
|
|
370
|
+
.uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
|
|
371
|
+
|
|
372
|
+
/* ── focus / immersive mode ───────────────────────────────────────────────────
|
|
373
|
+
A table-scoped escape hatch: hide the sidebar AND the topbar so a dense grid
|
|
374
|
+
uses the whole frame. The app toggles [data-focus] (from a toolbar maximize
|
|
375
|
+
control) and restores the previous nav state + focus on Esc. */
|
|
376
|
+
.uix-shell[data-focus] { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
|
|
377
|
+
.uix-shell[data-focus] .uix-shell__topbar { display: none; }
|
|
378
|
+
|
|
379
|
+
/* a floating host for the "exit focus" affordance (Esc also exits) */
|
|
380
|
+
.uix-shell__focus-exit { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); z-index: var(--uix-z-overlay); }
|
|
381
|
+
|
|
382
|
+
/* ── full-bleed main ──────────────────────────────────────────────────────────
|
|
383
|
+
Opt-in per surface: a genuinely wide grid drops the content gutter and runs
|
|
384
|
+
edge to edge, reclaiming 2 x --uix-space-7. Not the default — most pages want
|
|
385
|
+
the gutter. Pair with a frozen identifier column for horizontal scroll. */
|
|
386
|
+
.uix-shell__main--bleed { padding: 0; }
|
|
365
387
|
}
|
|
366
388
|
/* uix sidebar nav — items, favorites, collapsible sub-items, collapsed rail. Depends only on --uix-* tokens. */
|
|
367
389
|
@layer uix.components {
|
|
@@ -415,7 +437,7 @@
|
|
|
415
437
|
.uix-subitem .uix-navitem__label::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--uix-text-muted); margin-right: var(--uix-space-3); vertical-align: middle; }
|
|
416
438
|
|
|
417
439
|
/* collapsed rail */
|
|
418
|
-
.uix-sidebar[data-collapsed] { width:
|
|
440
|
+
.uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"] { width: var(--uix-sidebar-w-rail); }
|
|
419
441
|
.uix-sidebar[data-collapsed] .uix-navitem__label,
|
|
420
442
|
.uix-sidebar[data-collapsed] .uix-navitem__badge,
|
|
421
443
|
.uix-sidebar[data-collapsed] .uix-navitem__star,
|
|
@@ -601,7 +623,9 @@
|
|
|
601
623
|
.uix-pill--outline.uix-pill--muted { --tone-line: var(--uix-border); }
|
|
602
624
|
.uix-pill--outline.uix-pill--critical { color: var(--uix-danger-text); --tone-dot: var(--uix-danger); --tone-line: color-mix(in srgb, var(--uix-danger) 60%, transparent); }
|
|
603
625
|
}
|
|
604
|
-
/* uix data table — zebra, sticky header, sort, selection, density, pinned rows
|
|
626
|
+
/* uix data table — zebra, sticky header, sort, selection, density, pinned rows,
|
|
627
|
+
column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
|
|
628
|
+
search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
|
|
605
629
|
@layer uix.components {
|
|
606
630
|
.uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
|
|
607
631
|
.uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
|
|
@@ -616,6 +640,8 @@
|
|
|
616
640
|
.uix-table th[data-sort]::after { content: " ↕"; opacity: .35; }
|
|
617
641
|
.uix-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--uix-accent); }
|
|
618
642
|
.uix-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--uix-accent); }
|
|
643
|
+
/* multi-column sort ordinal (⇧+click adds a secondary key) */
|
|
644
|
+
.uix-table th[data-sort-order]::before { content: attr(data-sort-order); display: inline-block; margin-right: var(--uix-space-1); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; color: var(--uix-accent); }
|
|
619
645
|
|
|
620
646
|
.uix-table td { padding: 0 var(--uix-space-4); height: var(--uix-row-h); border-bottom: 1px solid var(--uix-border); color: var(--uix-text); vertical-align: middle; }
|
|
621
647
|
.uix-table tbody tr { background: var(--uix-row); }
|
|
@@ -624,8 +650,6 @@
|
|
|
624
650
|
.uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
|
|
625
651
|
.uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
|
|
626
652
|
.uix-table tbody tr:hover { background: var(--uix-bg-hover); }
|
|
627
|
-
/* density tiers — standard is the default td height above; data-density overrides it.
|
|
628
|
-
.uix-table--compact kept as a back-compat alias. */
|
|
629
653
|
.uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
|
|
630
654
|
.uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
|
|
631
655
|
|
|
@@ -636,7 +660,7 @@
|
|
|
636
660
|
.uix-table__pin svg { width: 15px; height: 15px; }
|
|
637
661
|
.uix-table__pin[data-on] svg { fill: currentColor; }
|
|
638
662
|
|
|
639
|
-
/* frozen first column (opt-in via .uix-table--pinned-col)
|
|
663
|
+
/* frozen first column (opt-in via .uix-table--pinned-col) */
|
|
640
664
|
.uix-table--pinned-col th:first-child, .uix-table--pinned-col td:first-child { position: sticky; left: 0; z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
|
|
641
665
|
.uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
|
|
642
666
|
.uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
|
|
@@ -644,7 +668,120 @@
|
|
|
644
668
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
|
|
645
669
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
|
|
646
670
|
.uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
|
|
671
|
+
.uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
|
|
647
672
|
.uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
|
|
673
|
+
|
|
674
|
+
/* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
|
|
675
|
+
.uix-table--fixed { table-layout: fixed; width: 100%; }
|
|
676
|
+
.uix-col--w-xs { width: var(--uix-col-w-xs); }
|
|
677
|
+
.uix-col--w-sm { width: var(--uix-col-w-sm); }
|
|
678
|
+
.uix-col--w-md { width: var(--uix-col-w-md); }
|
|
679
|
+
.uix-col--w-lg { width: var(--uix-col-w-lg); }
|
|
680
|
+
.uix-col--w-xl { width: var(--uix-col-w-xl); }
|
|
681
|
+
.uix-col--flex,
|
|
682
|
+
.uix-col--primary { width: auto; min-width: var(--uix-col-title-min); }
|
|
683
|
+
.uix-col--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
684
|
+
.uix-col--wrap { white-space: normal; overflow-wrap: anywhere; }
|
|
685
|
+
.uix-col--num { font-variant-numeric: tabular-nums; }
|
|
686
|
+
.uix-table th.uix-col--num, .uix-table td.uix-col--num { text-align: right; }
|
|
687
|
+
|
|
688
|
+
/* ── cell content vocabulary — a fixed set of renderers keeps tables consistent ── */
|
|
689
|
+
.uix-cell-strong { font-weight: 600; }
|
|
690
|
+
.uix-cell-sub { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
|
|
691
|
+
.uix-cell-mono { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
|
|
692
|
+
|
|
693
|
+
/* ── id cell — the canonical row click-through (row → peek, ↗ → full record) ───── */
|
|
694
|
+
.uix-id-cell__btn {
|
|
695
|
+
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
696
|
+
color: var(--uix-text); font: inherit;
|
|
697
|
+
display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
|
|
698
|
+
}
|
|
699
|
+
.uix-id-cell__btn:hover { color: var(--uix-accent); }
|
|
700
|
+
.uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
|
|
701
|
+
.uix-id-cell__arrow {
|
|
702
|
+
width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
|
|
703
|
+
opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
|
|
704
|
+
}
|
|
705
|
+
.uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
|
|
706
|
+
|
|
707
|
+
/* ── selection column + select-all ────────────────────────────────────────────── */
|
|
708
|
+
.uix-table th.uix-table__selcol, .uix-table td.uix-table__selcell { width: 44px; padding-left: var(--uix-space-3); padding-right: 0; text-align: center; }
|
|
709
|
+
|
|
710
|
+
/* contextual bulk-action bar — appears when >=1 row is selected */
|
|
711
|
+
.uix-bulkbar {
|
|
712
|
+
display: flex; align-items: center; gap: var(--uix-space-3);
|
|
713
|
+
padding: var(--uix-space-2) var(--uix-space-3); margin-bottom: var(--uix-space-3);
|
|
714
|
+
border: 1px solid var(--uix-accent); border-radius: var(--uix-radius-md);
|
|
715
|
+
background: var(--uix-brand-muted); color: var(--uix-text);
|
|
716
|
+
animation: uix-bulkbar-in var(--uix-dur) var(--uix-ease-out);
|
|
717
|
+
}
|
|
718
|
+
.uix-bulkbar[hidden] { display: none; }
|
|
719
|
+
.uix-bulkbar__count { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-accent); font-variant-numeric: tabular-nums; }
|
|
720
|
+
.uix-bulkbar__spacer { flex: 1; }
|
|
721
|
+
@keyframes uix-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
|
|
722
|
+
@media (prefers-reduced-motion: reduce) { .uix-bulkbar { animation: none; } }
|
|
723
|
+
|
|
724
|
+
/* ── row hover actions + kebab ─────────────────────────────────────────────────── */
|
|
725
|
+
.uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
|
|
726
|
+
.uix-rowact { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-sm); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out); }
|
|
727
|
+
.uix-rowact svg { width: 16px; height: 16px; display: block; }
|
|
728
|
+
.uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
|
|
729
|
+
.uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
|
|
730
|
+
|
|
731
|
+
/* ── expandable inline row ─────────────────────────────────────────────────────── */
|
|
732
|
+
.uix-table__expand { border: 0; background: transparent; cursor: pointer; color: var(--uix-text-muted); padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); display: inline-grid; place-items: center; }
|
|
733
|
+
.uix-table__expand svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
|
|
734
|
+
.uix-table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
|
|
735
|
+
.uix-table__expand:hover { background: var(--uix-bg-active); color: var(--uix-text); }
|
|
736
|
+
tr.uix-table__detail > td { background: var(--uix-bg-subtle); padding: 0 var(--uix-space-4); }
|
|
737
|
+
.uix-table__detail-inner { padding: var(--uix-space-4) var(--uix-space-1) var(--uix-space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--uix-space-4) var(--uix-space-7); }
|
|
738
|
+
.uix-kv { font-size: var(--uix-text-meta); }
|
|
739
|
+
.uix-kv__k { color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
|
|
740
|
+
.uix-kv__v { color: var(--uix-text); }
|
|
741
|
+
@media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
|
|
742
|
+
|
|
743
|
+
/* ── inline cell edit ──────────────────────────────────────────────────────────── */
|
|
744
|
+
.uix-cell-edit { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: text; border-radius: var(--uix-radius-sm); padding: var(--uix-space-1) var(--uix-space-2); margin: calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2)); transition: background-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
|
|
745
|
+
.uix-cell-edit:hover { background: var(--uix-bg-active); }
|
|
746
|
+
.uix-cell-edit__pencil { width: 13px; height: 13px; color: var(--uix-text-muted); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
747
|
+
.uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
|
|
748
|
+
.uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
|
|
749
|
+
.uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
750
|
+
.uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }
|
|
751
|
+
.uix-cell-edit input, .uix-cell-edit select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
|
|
752
|
+
|
|
753
|
+
/* ── column resize grip (drag the header's right edge) ─────────────────────────── */
|
|
754
|
+
.uix-table__resize { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: var(--uix-z-raised); user-select: none; touch-action: none; }
|
|
755
|
+
.uix-table__resize::after { content: ""; position: absolute; top: 25%; right: 3px; width: 2px; height: 50%; background: transparent; border-radius: var(--uix-radius-pill); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
|
|
756
|
+
.uix-table thead th:hover .uix-table__resize::after, .uix-table__resize[data-drag]::after { background: var(--uix-accent); }
|
|
757
|
+
|
|
758
|
+
/* ── search match highlight ────────────────────────────────────────────────────── */
|
|
759
|
+
.uix-mark { background: var(--uix-warning-bg); color: var(--uix-text); border-radius: var(--uix-radius-xs); padding: 0 0.15em; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--uix-warning) 60%, transparent); }
|
|
760
|
+
|
|
761
|
+
/* ── responsive ladder — priority-column drop, then card transform ─────────────── */
|
|
762
|
+
.uix-table--priority th[data-priority="low"], .uix-table--priority td[data-priority="low"] { display: none; }
|
|
763
|
+
.uix-table--priority-mid th[data-priority="low"], .uix-table--priority-mid td[data-priority="low"],
|
|
764
|
+
.uix-table--priority-mid th[data-priority="mid"], .uix-table--priority-mid td[data-priority="mid"] { display: none; }
|
|
765
|
+
|
|
766
|
+
.uix-table--cards { display: block; }
|
|
767
|
+
.uix-table--cards thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|
|
768
|
+
.uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
|
|
769
|
+
.uix-table--cards tbody tr { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); margin: 0 0 var(--uix-space-3); padding: var(--uix-space-1) var(--uix-space-4); box-shadow: var(--uix-shadow-sm); }
|
|
770
|
+
.uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
|
|
771
|
+
.uix-table--cards td { height: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--uix-space-5); padding: var(--uix-space-2) 0; border-bottom: 1px solid var(--uix-border); text-align: right; white-space: normal; }
|
|
772
|
+
.uix-table--cards td:last-child { border-bottom: 0; }
|
|
773
|
+
.uix-table--cards td::before { content: attr(data-label); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 500; text-align: left; flex: none; }
|
|
774
|
+
.uix-table--cards td[data-col="id"] { font-size: var(--uix-text-h3); font-weight: 600; border-bottom: 1px solid var(--uix-border); padding-bottom: var(--uix-space-3); }
|
|
775
|
+
.uix-table--cards td[data-col="id"]::before { display: none; }
|
|
776
|
+
.uix-table--cards td[data-col="select"], .uix-table--cards td[data-col="actions"], .uix-table--cards td[data-col="expand"] { display: none; }
|
|
777
|
+
|
|
778
|
+
/* ── compare view — two records field-by-field on a narrow screen ──────────────── */
|
|
779
|
+
.uix-compare { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; font-size: var(--uix-text-meta); }
|
|
780
|
+
.uix-compare__head, .uix-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
|
|
781
|
+
.uix-compare__head > div, .uix-compare__cell { padding: var(--uix-space-3); background: var(--uix-surface); border-top: 1px solid var(--uix-border); }
|
|
782
|
+
.uix-compare__head > div { font-weight: 600; border-top: 0; }
|
|
783
|
+
.uix-compare__head > div + div, .uix-compare__cell + .uix-compare__cell { border-left: 1px solid var(--uix-border); }
|
|
784
|
+
.uix-compare__attr { grid-column: 1 / -1; background: var(--uix-bg-subtle); padding: var(--uix-space-1) var(--uix-space-3); border-top: 1px solid var(--uix-border); font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); }
|
|
648
785
|
}
|
|
649
786
|
/* uix table toolbar + two-row filter bar (status / type). Depends only on --uix-* tokens. */
|
|
650
787
|
@layer uix.components {
|
|
@@ -946,27 +1083,9 @@
|
|
|
946
1083
|
[data-uix-rowpeek] tbody tr { cursor: pointer; }
|
|
947
1084
|
[data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
|
|
948
1085
|
|
|
949
|
-
/*
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
[data-uix-table-v2] .uix-table td:nth-child(2) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
|
|
953
|
-
|
|
954
|
-
/* ID cell in pattern B table: ID text + ↗ arrow, single button, quiet/on-brand at rest.
|
|
955
|
-
Monospace so IDs align vertically. Arrow fades in on row hover. */
|
|
956
|
-
.uix-id-cell__btn {
|
|
957
|
-
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
958
|
-
color: var(--uix-text); font: inherit;
|
|
959
|
-
display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
|
|
960
|
-
}
|
|
961
|
-
.uix-id-cell__btn:hover { color: var(--uix-accent); }
|
|
962
|
-
.uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
|
|
963
|
-
.uix-id-cell__arrow {
|
|
964
|
-
width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
|
|
965
|
-
opacity: 0;
|
|
966
|
-
transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
|
|
967
|
-
}
|
|
968
|
-
[data-uix-rowpeek] tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
|
|
969
|
-
@media (prefers-reduced-motion: reduce) { .uix-id-cell__arrow { transition: none; } }
|
|
1086
|
+
/* Column sizing + the id-cell click-through pattern now live in table.css (one story for
|
|
1087
|
+
"table cells"). Size columns with .uix-col--w-* / .uix-col--flex + .uix-col--truncate
|
|
1088
|
+
instead of the old [data-uix-table-v2] :nth-child(2) title cap. */
|
|
970
1089
|
}
|
|
971
1090
|
/* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
|
|
972
1091
|
@layer uix.components {
|
package/build/css/styles.css
CHANGED
|
@@ -120,12 +120,19 @@
|
|
|
120
120
|
--uix-row-h-comfortable: 68px;
|
|
121
121
|
--uix-control-h: 36px;
|
|
122
122
|
--uix-sidebar-w: 248px;
|
|
123
|
+
--uix-sidebar-w-rail: 56px;
|
|
123
124
|
--uix-topbar-h: 56px;
|
|
124
125
|
--uix-scrollbar-size: 10px;
|
|
125
126
|
--uix-icon-sm: 16px;
|
|
126
127
|
--uix-icon-md: 20px;
|
|
127
128
|
--uix-icon-lg: 24px;
|
|
128
129
|
--uix-peek-w: 420px;
|
|
130
|
+
--uix-col-w-xs: 92px;
|
|
131
|
+
--uix-col-w-sm: 112px;
|
|
132
|
+
--uix-col-w-md: 132px;
|
|
133
|
+
--uix-col-w-lg: 176px;
|
|
134
|
+
--uix-col-w-xl: 240px;
|
|
135
|
+
--uix-col-title-min: 340px;
|
|
129
136
|
--uix-space-0: 0;
|
|
130
137
|
--uix-space-1: 4px;
|
|
131
138
|
--uix-space-2: 8px;
|
|
@@ -640,17 +647,39 @@
|
|
|
640
647
|
/* uix app shell — sidebar + topbar + content grid. Depends only on --uix-* tokens. */
|
|
641
648
|
@layer uix.components {
|
|
642
649
|
.uix-shell {
|
|
650
|
+
position: relative;
|
|
643
651
|
display: grid;
|
|
644
652
|
grid-template-columns: var(--uix-sidebar-w) 1fr;
|
|
645
653
|
grid-template-rows: var(--uix-topbar-h) 1fr;
|
|
646
654
|
height: 100%; min-height: 360px;
|
|
647
655
|
border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
|
|
648
|
-
transition: grid-template-columns var(--uix-dur) var(--uix-ease-out);
|
|
656
|
+
transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
|
|
649
657
|
}
|
|
650
|
-
.uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; }
|
|
658
|
+
.uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; }
|
|
651
659
|
.uix-shell__topbar { grid-column: 2; display: flex; align-items: center; gap: var(--uix-space-3); padding: 0 var(--uix-space-6); background: var(--uix-bg-app); border-bottom: 1px solid var(--uix-border); }
|
|
652
660
|
.uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
|
|
653
|
-
|
|
661
|
+
|
|
662
|
+
/* ── nav width tiers ──────────────────────────────────────────────────────────
|
|
663
|
+
Progressive reveal for wide, many-column tables: full (default) → rail (icon
|
|
664
|
+
only) → hidden (0). data-collapsed stays a back-compat alias for the rail. */
|
|
665
|
+
.uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
|
|
666
|
+
.uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
|
|
667
|
+
|
|
668
|
+
/* ── focus / immersive mode ───────────────────────────────────────────────────
|
|
669
|
+
A table-scoped escape hatch: hide the sidebar AND the topbar so a dense grid
|
|
670
|
+
uses the whole frame. The app toggles [data-focus] (from a toolbar maximize
|
|
671
|
+
control) and restores the previous nav state + focus on Esc. */
|
|
672
|
+
.uix-shell[data-focus] { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
|
|
673
|
+
.uix-shell[data-focus] .uix-shell__topbar { display: none; }
|
|
674
|
+
|
|
675
|
+
/* a floating host for the "exit focus" affordance (Esc also exits) */
|
|
676
|
+
.uix-shell__focus-exit { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); z-index: var(--uix-z-overlay); }
|
|
677
|
+
|
|
678
|
+
/* ── full-bleed main ──────────────────────────────────────────────────────────
|
|
679
|
+
Opt-in per surface: a genuinely wide grid drops the content gutter and runs
|
|
680
|
+
edge to edge, reclaiming 2 x --uix-space-7. Not the default — most pages want
|
|
681
|
+
the gutter. Pair with a frozen identifier column for horizontal scroll. */
|
|
682
|
+
.uix-shell__main--bleed { padding: 0; }
|
|
654
683
|
}
|
|
655
684
|
/* uix sidebar nav — items, favorites, collapsible sub-items, collapsed rail. Depends only on --uix-* tokens. */
|
|
656
685
|
@layer uix.components {
|
|
@@ -704,7 +733,7 @@
|
|
|
704
733
|
.uix-subitem .uix-navitem__label::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--uix-text-muted); margin-right: var(--uix-space-3); vertical-align: middle; }
|
|
705
734
|
|
|
706
735
|
/* collapsed rail */
|
|
707
|
-
.uix-sidebar[data-collapsed] { width:
|
|
736
|
+
.uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"] { width: var(--uix-sidebar-w-rail); }
|
|
708
737
|
.uix-sidebar[data-collapsed] .uix-navitem__label,
|
|
709
738
|
.uix-sidebar[data-collapsed] .uix-navitem__badge,
|
|
710
739
|
.uix-sidebar[data-collapsed] .uix-navitem__star,
|
|
@@ -890,7 +919,9 @@
|
|
|
890
919
|
.uix-pill--outline.uix-pill--muted { --tone-line: var(--uix-border); }
|
|
891
920
|
.uix-pill--outline.uix-pill--critical { color: var(--uix-danger-text); --tone-dot: var(--uix-danger); --tone-line: color-mix(in srgb, var(--uix-danger) 60%, transparent); }
|
|
892
921
|
}
|
|
893
|
-
/* uix data table — zebra, sticky header, sort, selection, density, pinned rows
|
|
922
|
+
/* uix data table — zebra, sticky header, sort, selection, density, pinned rows,
|
|
923
|
+
column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
|
|
924
|
+
search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
|
|
894
925
|
@layer uix.components {
|
|
895
926
|
.uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
|
|
896
927
|
.uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
|
|
@@ -905,6 +936,8 @@
|
|
|
905
936
|
.uix-table th[data-sort]::after { content: " ↕"; opacity: .35; }
|
|
906
937
|
.uix-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--uix-accent); }
|
|
907
938
|
.uix-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--uix-accent); }
|
|
939
|
+
/* multi-column sort ordinal (⇧+click adds a secondary key) */
|
|
940
|
+
.uix-table th[data-sort-order]::before { content: attr(data-sort-order); display: inline-block; margin-right: var(--uix-space-1); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; color: var(--uix-accent); }
|
|
908
941
|
|
|
909
942
|
.uix-table td { padding: 0 var(--uix-space-4); height: var(--uix-row-h); border-bottom: 1px solid var(--uix-border); color: var(--uix-text); vertical-align: middle; }
|
|
910
943
|
.uix-table tbody tr { background: var(--uix-row); }
|
|
@@ -913,8 +946,6 @@
|
|
|
913
946
|
.uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
|
|
914
947
|
.uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
|
|
915
948
|
.uix-table tbody tr:hover { background: var(--uix-bg-hover); }
|
|
916
|
-
/* density tiers — standard is the default td height above; data-density overrides it.
|
|
917
|
-
.uix-table--compact kept as a back-compat alias. */
|
|
918
949
|
.uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
|
|
919
950
|
.uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
|
|
920
951
|
|
|
@@ -925,7 +956,7 @@
|
|
|
925
956
|
.uix-table__pin svg { width: 15px; height: 15px; }
|
|
926
957
|
.uix-table__pin[data-on] svg { fill: currentColor; }
|
|
927
958
|
|
|
928
|
-
/* frozen first column (opt-in via .uix-table--pinned-col)
|
|
959
|
+
/* frozen first column (opt-in via .uix-table--pinned-col) */
|
|
929
960
|
.uix-table--pinned-col th:first-child, .uix-table--pinned-col td:first-child { position: sticky; left: 0; z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
|
|
930
961
|
.uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
|
|
931
962
|
.uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
|
|
@@ -933,7 +964,120 @@
|
|
|
933
964
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
|
|
934
965
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
|
|
935
966
|
.uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
|
|
967
|
+
.uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
|
|
936
968
|
.uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
|
|
969
|
+
|
|
970
|
+
/* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
|
|
971
|
+
.uix-table--fixed { table-layout: fixed; width: 100%; }
|
|
972
|
+
.uix-col--w-xs { width: var(--uix-col-w-xs); }
|
|
973
|
+
.uix-col--w-sm { width: var(--uix-col-w-sm); }
|
|
974
|
+
.uix-col--w-md { width: var(--uix-col-w-md); }
|
|
975
|
+
.uix-col--w-lg { width: var(--uix-col-w-lg); }
|
|
976
|
+
.uix-col--w-xl { width: var(--uix-col-w-xl); }
|
|
977
|
+
.uix-col--flex,
|
|
978
|
+
.uix-col--primary { width: auto; min-width: var(--uix-col-title-min); }
|
|
979
|
+
.uix-col--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
980
|
+
.uix-col--wrap { white-space: normal; overflow-wrap: anywhere; }
|
|
981
|
+
.uix-col--num { font-variant-numeric: tabular-nums; }
|
|
982
|
+
.uix-table th.uix-col--num, .uix-table td.uix-col--num { text-align: right; }
|
|
983
|
+
|
|
984
|
+
/* ── cell content vocabulary — a fixed set of renderers keeps tables consistent ── */
|
|
985
|
+
.uix-cell-strong { font-weight: 600; }
|
|
986
|
+
.uix-cell-sub { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
|
|
987
|
+
.uix-cell-mono { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
|
|
988
|
+
|
|
989
|
+
/* ── id cell — the canonical row click-through (row → peek, ↗ → full record) ───── */
|
|
990
|
+
.uix-id-cell__btn {
|
|
991
|
+
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
992
|
+
color: var(--uix-text); font: inherit;
|
|
993
|
+
display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
|
|
994
|
+
}
|
|
995
|
+
.uix-id-cell__btn:hover { color: var(--uix-accent); }
|
|
996
|
+
.uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
|
|
997
|
+
.uix-id-cell__arrow {
|
|
998
|
+
width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
|
|
999
|
+
opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
|
|
1000
|
+
}
|
|
1001
|
+
.uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
|
|
1002
|
+
|
|
1003
|
+
/* ── selection column + select-all ────────────────────────────────────────────── */
|
|
1004
|
+
.uix-table th.uix-table__selcol, .uix-table td.uix-table__selcell { width: 44px; padding-left: var(--uix-space-3); padding-right: 0; text-align: center; }
|
|
1005
|
+
|
|
1006
|
+
/* contextual bulk-action bar — appears when >=1 row is selected */
|
|
1007
|
+
.uix-bulkbar {
|
|
1008
|
+
display: flex; align-items: center; gap: var(--uix-space-3);
|
|
1009
|
+
padding: var(--uix-space-2) var(--uix-space-3); margin-bottom: var(--uix-space-3);
|
|
1010
|
+
border: 1px solid var(--uix-accent); border-radius: var(--uix-radius-md);
|
|
1011
|
+
background: var(--uix-brand-muted); color: var(--uix-text);
|
|
1012
|
+
animation: uix-bulkbar-in var(--uix-dur) var(--uix-ease-out);
|
|
1013
|
+
}
|
|
1014
|
+
.uix-bulkbar[hidden] { display: none; }
|
|
1015
|
+
.uix-bulkbar__count { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-accent); font-variant-numeric: tabular-nums; }
|
|
1016
|
+
.uix-bulkbar__spacer { flex: 1; }
|
|
1017
|
+
@keyframes uix-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
|
|
1018
|
+
@media (prefers-reduced-motion: reduce) { .uix-bulkbar { animation: none; } }
|
|
1019
|
+
|
|
1020
|
+
/* ── row hover actions + kebab ─────────────────────────────────────────────────── */
|
|
1021
|
+
.uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
|
|
1022
|
+
.uix-rowact { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-sm); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out); }
|
|
1023
|
+
.uix-rowact svg { width: 16px; height: 16px; display: block; }
|
|
1024
|
+
.uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
|
|
1025
|
+
.uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
|
|
1026
|
+
|
|
1027
|
+
/* ── expandable inline row ─────────────────────────────────────────────────────── */
|
|
1028
|
+
.uix-table__expand { border: 0; background: transparent; cursor: pointer; color: var(--uix-text-muted); padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); display: inline-grid; place-items: center; }
|
|
1029
|
+
.uix-table__expand svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
|
|
1030
|
+
.uix-table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
|
|
1031
|
+
.uix-table__expand:hover { background: var(--uix-bg-active); color: var(--uix-text); }
|
|
1032
|
+
tr.uix-table__detail > td { background: var(--uix-bg-subtle); padding: 0 var(--uix-space-4); }
|
|
1033
|
+
.uix-table__detail-inner { padding: var(--uix-space-4) var(--uix-space-1) var(--uix-space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--uix-space-4) var(--uix-space-7); }
|
|
1034
|
+
.uix-kv { font-size: var(--uix-text-meta); }
|
|
1035
|
+
.uix-kv__k { color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
|
|
1036
|
+
.uix-kv__v { color: var(--uix-text); }
|
|
1037
|
+
@media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
|
|
1038
|
+
|
|
1039
|
+
/* ── inline cell edit ──────────────────────────────────────────────────────────── */
|
|
1040
|
+
.uix-cell-edit { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: text; border-radius: var(--uix-radius-sm); padding: var(--uix-space-1) var(--uix-space-2); margin: calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2)); transition: background-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
|
|
1041
|
+
.uix-cell-edit:hover { background: var(--uix-bg-active); }
|
|
1042
|
+
.uix-cell-edit__pencil { width: 13px; height: 13px; color: var(--uix-text-muted); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
1043
|
+
.uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
|
|
1044
|
+
.uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
|
|
1045
|
+
.uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
1046
|
+
.uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }
|
|
1047
|
+
.uix-cell-edit input, .uix-cell-edit select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
|
|
1048
|
+
|
|
1049
|
+
/* ── column resize grip (drag the header's right edge) ─────────────────────────── */
|
|
1050
|
+
.uix-table__resize { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: var(--uix-z-raised); user-select: none; touch-action: none; }
|
|
1051
|
+
.uix-table__resize::after { content: ""; position: absolute; top: 25%; right: 3px; width: 2px; height: 50%; background: transparent; border-radius: var(--uix-radius-pill); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
|
|
1052
|
+
.uix-table thead th:hover .uix-table__resize::after, .uix-table__resize[data-drag]::after { background: var(--uix-accent); }
|
|
1053
|
+
|
|
1054
|
+
/* ── search match highlight ────────────────────────────────────────────────────── */
|
|
1055
|
+
.uix-mark { background: var(--uix-warning-bg); color: var(--uix-text); border-radius: var(--uix-radius-xs); padding: 0 0.15em; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--uix-warning) 60%, transparent); }
|
|
1056
|
+
|
|
1057
|
+
/* ── responsive ladder — priority-column drop, then card transform ─────────────── */
|
|
1058
|
+
.uix-table--priority th[data-priority="low"], .uix-table--priority td[data-priority="low"] { display: none; }
|
|
1059
|
+
.uix-table--priority-mid th[data-priority="low"], .uix-table--priority-mid td[data-priority="low"],
|
|
1060
|
+
.uix-table--priority-mid th[data-priority="mid"], .uix-table--priority-mid td[data-priority="mid"] { display: none; }
|
|
1061
|
+
|
|
1062
|
+
.uix-table--cards { display: block; }
|
|
1063
|
+
.uix-table--cards thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|
|
1064
|
+
.uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
|
|
1065
|
+
.uix-table--cards tbody tr { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); margin: 0 0 var(--uix-space-3); padding: var(--uix-space-1) var(--uix-space-4); box-shadow: var(--uix-shadow-sm); }
|
|
1066
|
+
.uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
|
|
1067
|
+
.uix-table--cards td { height: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--uix-space-5); padding: var(--uix-space-2) 0; border-bottom: 1px solid var(--uix-border); text-align: right; white-space: normal; }
|
|
1068
|
+
.uix-table--cards td:last-child { border-bottom: 0; }
|
|
1069
|
+
.uix-table--cards td::before { content: attr(data-label); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 500; text-align: left; flex: none; }
|
|
1070
|
+
.uix-table--cards td[data-col="id"] { font-size: var(--uix-text-h3); font-weight: 600; border-bottom: 1px solid var(--uix-border); padding-bottom: var(--uix-space-3); }
|
|
1071
|
+
.uix-table--cards td[data-col="id"]::before { display: none; }
|
|
1072
|
+
.uix-table--cards td[data-col="select"], .uix-table--cards td[data-col="actions"], .uix-table--cards td[data-col="expand"] { display: none; }
|
|
1073
|
+
|
|
1074
|
+
/* ── compare view — two records field-by-field on a narrow screen ──────────────── */
|
|
1075
|
+
.uix-compare { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; font-size: var(--uix-text-meta); }
|
|
1076
|
+
.uix-compare__head, .uix-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
|
|
1077
|
+
.uix-compare__head > div, .uix-compare__cell { padding: var(--uix-space-3); background: var(--uix-surface); border-top: 1px solid var(--uix-border); }
|
|
1078
|
+
.uix-compare__head > div { font-weight: 600; border-top: 0; }
|
|
1079
|
+
.uix-compare__head > div + div, .uix-compare__cell + .uix-compare__cell { border-left: 1px solid var(--uix-border); }
|
|
1080
|
+
.uix-compare__attr { grid-column: 1 / -1; background: var(--uix-bg-subtle); padding: var(--uix-space-1) var(--uix-space-3); border-top: 1px solid var(--uix-border); font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); }
|
|
937
1081
|
}
|
|
938
1082
|
/* uix table toolbar + two-row filter bar (status / type). Depends only on --uix-* tokens. */
|
|
939
1083
|
@layer uix.components {
|
|
@@ -1280,27 +1424,9 @@
|
|
|
1280
1424
|
[data-uix-rowpeek] tbody tr { cursor: pointer; }
|
|
1281
1425
|
[data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
|
|
1282
1426
|
|
|
1283
|
-
/*
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
[data-uix-table-v2] .uix-table td:nth-child(2) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
|
|
1287
|
-
|
|
1288
|
-
/* ID cell in pattern B table: ID text + ↗ arrow, single button, quiet/on-brand at rest.
|
|
1289
|
-
Monospace so IDs align vertically. Arrow fades in on row hover. */
|
|
1290
|
-
.uix-id-cell__btn {
|
|
1291
|
-
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
1292
|
-
color: var(--uix-text); font: inherit;
|
|
1293
|
-
display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
|
|
1294
|
-
}
|
|
1295
|
-
.uix-id-cell__btn:hover { color: var(--uix-accent); }
|
|
1296
|
-
.uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
|
|
1297
|
-
.uix-id-cell__arrow {
|
|
1298
|
-
width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
|
|
1299
|
-
opacity: 0;
|
|
1300
|
-
transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
|
|
1301
|
-
}
|
|
1302
|
-
[data-uix-rowpeek] tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
|
|
1303
|
-
@media (prefers-reduced-motion: reduce) { .uix-id-cell__arrow { transition: none; } }
|
|
1427
|
+
/* Column sizing + the id-cell click-through pattern now live in table.css (one story for
|
|
1428
|
+
"table cells"). Size columns with .uix-col--w-* / .uix-col--flex + .uix-col--truncate
|
|
1429
|
+
instead of the old [data-uix-table-v2] :nth-child(2) title cap. */
|
|
1304
1430
|
}
|
|
1305
1431
|
/* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
|
|
1306
1432
|
@layer uix.components {
|
package/build/css/tokens.css
CHANGED
|
@@ -109,12 +109,19 @@
|
|
|
109
109
|
--uix-row-h-comfortable: 68px;
|
|
110
110
|
--uix-control-h: 36px;
|
|
111
111
|
--uix-sidebar-w: 248px;
|
|
112
|
+
--uix-sidebar-w-rail: 56px;
|
|
112
113
|
--uix-topbar-h: 56px;
|
|
113
114
|
--uix-scrollbar-size: 10px;
|
|
114
115
|
--uix-icon-sm: 16px;
|
|
115
116
|
--uix-icon-md: 20px;
|
|
116
117
|
--uix-icon-lg: 24px;
|
|
117
118
|
--uix-peek-w: 420px;
|
|
119
|
+
--uix-col-w-xs: 92px;
|
|
120
|
+
--uix-col-w-sm: 112px;
|
|
121
|
+
--uix-col-w-md: 132px;
|
|
122
|
+
--uix-col-w-lg: 176px;
|
|
123
|
+
--uix-col-w-xl: 240px;
|
|
124
|
+
--uix-col-title-min: 340px;
|
|
118
125
|
--uix-space-0: 0;
|
|
119
126
|
--uix-space-1: 4px;
|
|
120
127
|
--uix-space-2: 8px;
|
package/build/ts/tokens.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* GENERATED — do not edit. */
|
|
2
|
-
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" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-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" | "row-selected-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";
|
|
2
|
+
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" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-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" | "row-selected-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" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "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";
|
|
3
3
|
export declare const cssVar: Record<UixTokenName, string>;
|
|
4
4
|
export declare const light: Record<UixTokenName, string>;
|
|
5
5
|
export declare const dark: Partial<Record<UixTokenName, string>>;
|
package/build/ts/tokens.js
CHANGED
|
@@ -110,12 +110,19 @@ export const cssVar = {
|
|
|
110
110
|
"row-h-comfortable": "var(--uix-row-h-comfortable)",
|
|
111
111
|
"control-h": "var(--uix-control-h)",
|
|
112
112
|
"sidebar-w": "var(--uix-sidebar-w)",
|
|
113
|
+
"sidebar-w-rail": "var(--uix-sidebar-w-rail)",
|
|
113
114
|
"topbar-h": "var(--uix-topbar-h)",
|
|
114
115
|
"scrollbar-size": "var(--uix-scrollbar-size)",
|
|
115
116
|
"icon-sm": "var(--uix-icon-sm)",
|
|
116
117
|
"icon-md": "var(--uix-icon-md)",
|
|
117
118
|
"icon-lg": "var(--uix-icon-lg)",
|
|
118
119
|
"peek-w": "var(--uix-peek-w)",
|
|
120
|
+
"col-w-xs": "var(--uix-col-w-xs)",
|
|
121
|
+
"col-w-sm": "var(--uix-col-w-sm)",
|
|
122
|
+
"col-w-md": "var(--uix-col-w-md)",
|
|
123
|
+
"col-w-lg": "var(--uix-col-w-lg)",
|
|
124
|
+
"col-w-xl": "var(--uix-col-w-xl)",
|
|
125
|
+
"col-title-min": "var(--uix-col-title-min)",
|
|
119
126
|
"space-0": "var(--uix-space-0)",
|
|
120
127
|
"space-1": "var(--uix-space-1)",
|
|
121
128
|
"space-2": "var(--uix-space-2)",
|
|
@@ -257,12 +264,19 @@ export const light = {
|
|
|
257
264
|
"row-h-comfortable": "68px",
|
|
258
265
|
"control-h": "36px",
|
|
259
266
|
"sidebar-w": "248px",
|
|
267
|
+
"sidebar-w-rail": "56px",
|
|
260
268
|
"topbar-h": "56px",
|
|
261
269
|
"scrollbar-size": "10px",
|
|
262
270
|
"icon-sm": "16px",
|
|
263
271
|
"icon-md": "20px",
|
|
264
272
|
"icon-lg": "24px",
|
|
265
273
|
"peek-w": "420px",
|
|
274
|
+
"col-w-xs": "92px",
|
|
275
|
+
"col-w-sm": "112px",
|
|
276
|
+
"col-w-md": "132px",
|
|
277
|
+
"col-w-lg": "176px",
|
|
278
|
+
"col-w-xl": "240px",
|
|
279
|
+
"col-title-min": "340px",
|
|
266
280
|
"space-0": "0",
|
|
267
281
|
"space-1": "4px",
|
|
268
282
|
"space-2": "8px",
|
|
@@ -375,12 +389,19 @@ export const num = {
|
|
|
375
389
|
"row-h-comfortable": 68,
|
|
376
390
|
"control-h": 36,
|
|
377
391
|
"sidebar-w": 248,
|
|
392
|
+
"sidebar-w-rail": 56,
|
|
378
393
|
"topbar-h": 56,
|
|
379
394
|
"scrollbar-size": 10,
|
|
380
395
|
"icon-sm": 16,
|
|
381
396
|
"icon-md": 20,
|
|
382
397
|
"icon-lg": 24,
|
|
383
398
|
"peek-w": 420,
|
|
399
|
+
"col-w-xs": 92,
|
|
400
|
+
"col-w-sm": 112,
|
|
401
|
+
"col-w-md": 132,
|
|
402
|
+
"col-w-lg": 176,
|
|
403
|
+
"col-w-xl": 240,
|
|
404
|
+
"col-title-min": 340,
|
|
384
405
|
"space-1": 4,
|
|
385
406
|
"space-2": 8,
|
|
386
407
|
"space-3": 12,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tensor_1/tokens",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "UNLICENSED",
|
package/tokens/base/size.json
CHANGED
|
@@ -10,11 +10,19 @@
|
|
|
10
10
|
"row-h-comfortable": { "$type": "dimension", "$value": "68px" },
|
|
11
11
|
"control-h": { "$type": "dimension", "$value": "36px" },
|
|
12
12
|
"sidebar-w": { "$type": "dimension", "$value": "248px" },
|
|
13
|
+
"sidebar-w-rail": { "$type": "dimension", "$value": "56px", "$description": "Collapsed icon-rail width for the app-shell sidebar (data-nav=rail / data-collapsed). Contractual so the rail width stops being hand-coded as 56px in app-shell.css and products can retheme it. Full = --uix-sidebar-w, rail = this, hidden = 0." },
|
|
13
14
|
"topbar-h": { "$type": "dimension", "$value": "56px" },
|
|
14
15
|
|
|
15
16
|
"scrollbar-size": { "$type": "dimension", "$value": "10px" },
|
|
16
17
|
"icon-sm": { "$type": "dimension", "$value": "16px" },
|
|
17
18
|
"icon-md": { "$type": "dimension", "$value": "20px" },
|
|
18
19
|
"icon-lg": { "$type": "dimension", "$value": "24px" },
|
|
19
|
-
"peek-w": { "$type": "dimension", "$value": "420px" }
|
|
20
|
+
"peek-w": { "$type": "dimension", "$value": "420px" },
|
|
21
|
+
|
|
22
|
+
"col-w-xs": { "$type": "dimension", "$value": "92px", "$description": "Table column-width scale — the shared tier set consumers attach to a column via .uix-col--w-* (on <col>/<th>/<td>) instead of hand-coding per-app pixel widths. Reconciles the widths house products use for compact data columns: xs≈priority/flag, sm≈type/date, md≈id/status/team, lg≈assignee/person, xl≈long labels. Snap each column to the nearest tier." },
|
|
23
|
+
"col-w-sm": { "$type": "dimension", "$value": "112px" },
|
|
24
|
+
"col-w-md": { "$type": "dimension", "$value": "132px" },
|
|
25
|
+
"col-w-lg": { "$type": "dimension", "$value": "176px" },
|
|
26
|
+
"col-w-xl": { "$type": "dimension", "$value": "240px" },
|
|
27
|
+
"col-title-min": { "$type": "dimension", "$value": "340px", "$description": "Min-width floor for the primary/flex column (.uix-col--flex) — the subject/title never collapses below this; the table scrolls horizontally (pinned first column intact) instead of squeezing the title. Generalises the old 280px title cap." }
|
|
20
28
|
}
|