@tensor_1/tokens 2.3.0 → 2.5.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 +14 -0
- package/build/css/components.css +140 -28
- package/build/css/styles.css +173 -28
- package/build/css/tokens.css +33 -0
- package/build/tailwind/preset.cjs +16 -0
- package/build/tailwind/theme.css +16 -0
- package/build/ts/tokens.d.ts +1 -1
- package/build/ts/tokens.js +63 -0
- package/package.json +1 -1
- package/tokens/base/color.json +20 -1
- package/tokens/base/size.json +9 -1
- package/tokens/dark/color.json +13 -1
package/README.md
CHANGED
|
@@ -48,3 +48,17 @@ Override the write-only brand slots; `accent` / `link` / `ring` / `brand-muted`
|
|
|
48
48
|
| `./themes/{tensor,posx,shopx,mission-control}` | per-product brand |
|
|
49
49
|
|
|
50
50
|
Source of truth: `tokens/*.json` (DTCG) → [Style Dictionary](https://styledictionary.com). Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.
|
|
51
|
+
|
|
52
|
+
## Primitives — consume, don't fork
|
|
53
|
+
|
|
54
|
+
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.
|
|
55
|
+
|
|
56
|
+
| Primitive | CSS file | Key `--uix-*` tokens |
|
|
57
|
+
|---|---|---|
|
|
58
|
+
| Row selection | `table.css` `tr[aria-selected]` | `--uix-row-selected-bg` |
|
|
59
|
+
| Utilization / threshold bar | `meter.css` · `<Meter>` | `--uix-attention`, `--uix-overdue`, `--uix-warning`, `--uix-danger` |
|
|
60
|
+
| Triage inbox | `inbox.css` · `<Inbox>` / `<InboxItem>` | `--uix-brand-muted`, `--uix-accent` (accent stripe) |
|
|
61
|
+
| Status + SLA + priority pill | `status-pill.css` · `<StatusPill>` | `--uix-sla-ok/at-risk/breached`, `--uix-p1`…`--uix-p5`, `--uix-attention`, `--uix-overdue` |
|
|
62
|
+
| Entity detail related-panels | `<DetailLayout>` (`@tensor_1/react`) | `--uix-surface`, `--uix-border` |
|
|
63
|
+
|
|
64
|
+
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.
|
package/build/css/components.css
CHANGED
|
@@ -580,6 +580,19 @@
|
|
|
580
580
|
/* critical = the one SOLID fill (most urgent); muted = a quiet, chrome-less label */
|
|
581
581
|
.uix-pill--critical { --tone-bg: var(--uix-danger); --tone-fg: var(--uix-danger-fg); --tone-dot: var(--uix-danger-fg); }
|
|
582
582
|
.uix-pill--muted { --tone-bg: transparent; --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); }
|
|
583
|
+
/* time-pressure tones (U1 tokens — distinct from severity and validation-error) */
|
|
584
|
+
.uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
|
|
585
|
+
.uix-pill--overdue { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
|
|
586
|
+
/* SLA tones — ok=success, at-risk=attention, breached=overdue */
|
|
587
|
+
.uix-pill--sla-ok { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
|
|
588
|
+
.uix-pill--sla-at-risk { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
|
|
589
|
+
.uix-pill--sla-breached { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
|
|
590
|
+
/* Priority/severity tones — P1=danger, P2=warning, P3=amber, P4=info, P5=neutral (complete 5-tier ramp) */
|
|
591
|
+
.uix-pill--p1 { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
|
|
592
|
+
.uix-pill--p2 { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
|
|
593
|
+
.uix-pill--p3 { --tone-bg: var(--uix-amber-bg); --tone-fg: var(--uix-amber-text); --tone-dot: var(--uix-amber); }
|
|
594
|
+
.uix-pill--p4 { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
|
|
595
|
+
.uix-pill--p5 { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
|
|
583
596
|
|
|
584
597
|
/* outline treatment — transparent fill, tone-tinted border, tone-colored text. The border tints
|
|
585
598
|
the tone hue (--tone-fg) at 40%; neutral/muted use the structural borders, critical reads strongest. */
|
|
@@ -588,7 +601,9 @@
|
|
|
588
601
|
.uix-pill--outline.uix-pill--muted { --tone-line: var(--uix-border); }
|
|
589
602
|
.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); }
|
|
590
603
|
}
|
|
591
|
-
/* uix data table — zebra, sticky header, sort, selection, density, pinned rows
|
|
604
|
+
/* uix data table — zebra, sticky header, sort, selection, density, pinned rows,
|
|
605
|
+
column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
|
|
606
|
+
search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
|
|
592
607
|
@layer uix.components {
|
|
593
608
|
.uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
|
|
594
609
|
.uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
|
|
@@ -603,16 +618,16 @@
|
|
|
603
618
|
.uix-table th[data-sort]::after { content: " ↕"; opacity: .35; }
|
|
604
619
|
.uix-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--uix-accent); }
|
|
605
620
|
.uix-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--uix-accent); }
|
|
621
|
+
/* multi-column sort ordinal (⇧+click adds a secondary key) */
|
|
622
|
+
.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); }
|
|
606
623
|
|
|
607
624
|
.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; }
|
|
608
625
|
.uix-table tbody tr { background: var(--uix-row); }
|
|
609
626
|
.uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
|
|
610
627
|
.uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
|
|
611
628
|
.uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
|
|
612
|
-
.uix-table tbody tr[aria-selected="true"] { background: var(--uix-
|
|
629
|
+
.uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
|
|
613
630
|
.uix-table tbody tr:hover { background: var(--uix-bg-hover); }
|
|
614
|
-
/* density tiers — standard is the default td height above; data-density overrides it.
|
|
615
|
-
.uix-table--compact kept as a back-compat alias. */
|
|
616
631
|
.uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
|
|
617
632
|
.uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
|
|
618
633
|
|
|
@@ -623,7 +638,7 @@
|
|
|
623
638
|
.uix-table__pin svg { width: 15px; height: 15px; }
|
|
624
639
|
.uix-table__pin[data-on] svg { fill: currentColor; }
|
|
625
640
|
|
|
626
|
-
/* frozen first column (opt-in via .uix-table--pinned-col)
|
|
641
|
+
/* frozen first column (opt-in via .uix-table--pinned-col) */
|
|
627
642
|
.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); }
|
|
628
643
|
.uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
|
|
629
644
|
.uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
|
|
@@ -631,7 +646,120 @@
|
|
|
631
646
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
|
|
632
647
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
|
|
633
648
|
.uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
|
|
649
|
+
.uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
|
|
634
650
|
.uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
|
|
651
|
+
|
|
652
|
+
/* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
|
|
653
|
+
.uix-table--fixed { table-layout: fixed; width: 100%; }
|
|
654
|
+
.uix-col--w-xs { width: var(--uix-col-w-xs); }
|
|
655
|
+
.uix-col--w-sm { width: var(--uix-col-w-sm); }
|
|
656
|
+
.uix-col--w-md { width: var(--uix-col-w-md); }
|
|
657
|
+
.uix-col--w-lg { width: var(--uix-col-w-lg); }
|
|
658
|
+
.uix-col--w-xl { width: var(--uix-col-w-xl); }
|
|
659
|
+
.uix-col--flex,
|
|
660
|
+
.uix-col--primary { width: auto; min-width: var(--uix-col-title-min); }
|
|
661
|
+
.uix-col--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
662
|
+
.uix-col--wrap { white-space: normal; overflow-wrap: anywhere; }
|
|
663
|
+
.uix-col--num { font-variant-numeric: tabular-nums; }
|
|
664
|
+
.uix-table th.uix-col--num, .uix-table td.uix-col--num { text-align: right; }
|
|
665
|
+
|
|
666
|
+
/* ── cell content vocabulary — a fixed set of renderers keeps tables consistent ── */
|
|
667
|
+
.uix-cell-strong { font-weight: 600; }
|
|
668
|
+
.uix-cell-sub { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
|
|
669
|
+
.uix-cell-mono { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
|
|
670
|
+
|
|
671
|
+
/* ── id cell — the canonical row click-through (row → peek, ↗ → full record) ───── */
|
|
672
|
+
.uix-id-cell__btn {
|
|
673
|
+
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
674
|
+
color: var(--uix-text); font: inherit;
|
|
675
|
+
display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
|
|
676
|
+
}
|
|
677
|
+
.uix-id-cell__btn:hover { color: var(--uix-accent); }
|
|
678
|
+
.uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
|
|
679
|
+
.uix-id-cell__arrow {
|
|
680
|
+
width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
|
|
681
|
+
opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
|
|
682
|
+
}
|
|
683
|
+
.uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
|
|
684
|
+
|
|
685
|
+
/* ── selection column + select-all ────────────────────────────────────────────── */
|
|
686
|
+
.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; }
|
|
687
|
+
|
|
688
|
+
/* contextual bulk-action bar — appears when >=1 row is selected */
|
|
689
|
+
.uix-bulkbar {
|
|
690
|
+
display: flex; align-items: center; gap: var(--uix-space-3);
|
|
691
|
+
padding: var(--uix-space-2) var(--uix-space-3); margin-bottom: var(--uix-space-3);
|
|
692
|
+
border: 1px solid var(--uix-accent); border-radius: var(--uix-radius-md);
|
|
693
|
+
background: var(--uix-brand-muted); color: var(--uix-text);
|
|
694
|
+
animation: uix-bulkbar-in var(--uix-dur) var(--uix-ease-out);
|
|
695
|
+
}
|
|
696
|
+
.uix-bulkbar[hidden] { display: none; }
|
|
697
|
+
.uix-bulkbar__count { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-accent); font-variant-numeric: tabular-nums; }
|
|
698
|
+
.uix-bulkbar__spacer { flex: 1; }
|
|
699
|
+
@keyframes uix-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
|
|
700
|
+
@media (prefers-reduced-motion: reduce) { .uix-bulkbar { animation: none; } }
|
|
701
|
+
|
|
702
|
+
/* ── row hover actions + kebab ─────────────────────────────────────────────────── */
|
|
703
|
+
.uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
|
|
704
|
+
.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); }
|
|
705
|
+
.uix-rowact svg { width: 16px; height: 16px; display: block; }
|
|
706
|
+
.uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
|
|
707
|
+
.uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
|
|
708
|
+
|
|
709
|
+
/* ── expandable inline row ─────────────────────────────────────────────────────── */
|
|
710
|
+
.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; }
|
|
711
|
+
.uix-table__expand svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
|
|
712
|
+
.uix-table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
|
|
713
|
+
.uix-table__expand:hover { background: var(--uix-bg-active); color: var(--uix-text); }
|
|
714
|
+
tr.uix-table__detail > td { background: var(--uix-bg-subtle); padding: 0 var(--uix-space-4); }
|
|
715
|
+
.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); }
|
|
716
|
+
.uix-kv { font-size: var(--uix-text-meta); }
|
|
717
|
+
.uix-kv__k { color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
|
|
718
|
+
.uix-kv__v { color: var(--uix-text); }
|
|
719
|
+
@media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
|
|
720
|
+
|
|
721
|
+
/* ── inline cell edit ──────────────────────────────────────────────────────────── */
|
|
722
|
+
.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); }
|
|
723
|
+
.uix-cell-edit:hover { background: var(--uix-bg-active); }
|
|
724
|
+
.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); }
|
|
725
|
+
.uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
|
|
726
|
+
.uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
|
|
727
|
+
.uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
728
|
+
.uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }
|
|
729
|
+
.uix-cell-edit input, .uix-cell-edit select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
|
|
730
|
+
|
|
731
|
+
/* ── column resize grip (drag the header's right edge) ─────────────────────────── */
|
|
732
|
+
.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; }
|
|
733
|
+
.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); }
|
|
734
|
+
.uix-table thead th:hover .uix-table__resize::after, .uix-table__resize[data-drag]::after { background: var(--uix-accent); }
|
|
735
|
+
|
|
736
|
+
/* ── search match highlight ────────────────────────────────────────────────────── */
|
|
737
|
+
.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); }
|
|
738
|
+
|
|
739
|
+
/* ── responsive ladder — priority-column drop, then card transform ─────────────── */
|
|
740
|
+
.uix-table--priority th[data-priority="low"], .uix-table--priority td[data-priority="low"] { display: none; }
|
|
741
|
+
.uix-table--priority-mid th[data-priority="low"], .uix-table--priority-mid td[data-priority="low"],
|
|
742
|
+
.uix-table--priority-mid th[data-priority="mid"], .uix-table--priority-mid td[data-priority="mid"] { display: none; }
|
|
743
|
+
|
|
744
|
+
.uix-table--cards { display: block; }
|
|
745
|
+
.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; }
|
|
746
|
+
.uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
|
|
747
|
+
.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); }
|
|
748
|
+
.uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
|
|
749
|
+
.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; }
|
|
750
|
+
.uix-table--cards td:last-child { border-bottom: 0; }
|
|
751
|
+
.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; }
|
|
752
|
+
.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); }
|
|
753
|
+
.uix-table--cards td[data-col="id"]::before { display: none; }
|
|
754
|
+
.uix-table--cards td[data-col="select"], .uix-table--cards td[data-col="actions"], .uix-table--cards td[data-col="expand"] { display: none; }
|
|
755
|
+
|
|
756
|
+
/* ── compare view — two records field-by-field on a narrow screen ──────────────── */
|
|
757
|
+
.uix-compare { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; font-size: var(--uix-text-meta); }
|
|
758
|
+
.uix-compare__head, .uix-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
|
|
759
|
+
.uix-compare__head > div, .uix-compare__cell { padding: var(--uix-space-3); background: var(--uix-surface); border-top: 1px solid var(--uix-border); }
|
|
760
|
+
.uix-compare__head > div { font-weight: 600; border-top: 0; }
|
|
761
|
+
.uix-compare__head > div + div, .uix-compare__cell + .uix-compare__cell { border-left: 1px solid var(--uix-border); }
|
|
762
|
+
.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); }
|
|
635
763
|
}
|
|
636
764
|
/* uix table toolbar + two-row filter bar (status / type). Depends only on --uix-* tokens. */
|
|
637
765
|
@layer uix.components {
|
|
@@ -737,8 +865,10 @@
|
|
|
737
865
|
@layer uix.components {
|
|
738
866
|
.uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
|
|
739
867
|
.uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
|
|
740
|
-
.uix-meter__fill[data-tone="warning"]
|
|
741
|
-
.uix-meter__fill[data-tone="danger"]
|
|
868
|
+
.uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
|
|
869
|
+
.uix-meter__fill[data-tone="danger"] { background: var(--uix-danger); }
|
|
870
|
+
.uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }
|
|
871
|
+
.uix-meter__fill[data-tone="overdue"] { background: var(--uix-overdue); }
|
|
742
872
|
}
|
|
743
873
|
/* uix timeline / activity feed — depends only on --uix-* tokens. */
|
|
744
874
|
@layer uix.components {
|
|
@@ -931,27 +1061,9 @@
|
|
|
931
1061
|
[data-uix-rowpeek] tbody tr { cursor: pointer; }
|
|
932
1062
|
[data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
|
|
933
1063
|
|
|
934
|
-
/*
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
[data-uix-table-v2] .uix-table td:nth-child(2) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
|
|
938
|
-
|
|
939
|
-
/* ID cell in pattern B table: ID text + ↗ arrow, single button, quiet/on-brand at rest.
|
|
940
|
-
Monospace so IDs align vertically. Arrow fades in on row hover. */
|
|
941
|
-
.uix-id-cell__btn {
|
|
942
|
-
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
943
|
-
color: var(--uix-text); font: inherit;
|
|
944
|
-
display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
|
|
945
|
-
}
|
|
946
|
-
.uix-id-cell__btn:hover { color: var(--uix-accent); }
|
|
947
|
-
.uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
|
|
948
|
-
.uix-id-cell__arrow {
|
|
949
|
-
width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
|
|
950
|
-
opacity: 0;
|
|
951
|
-
transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
|
|
952
|
-
}
|
|
953
|
-
[data-uix-rowpeek] tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
|
|
954
|
-
@media (prefers-reduced-motion: reduce) { .uix-id-cell__arrow { transition: none; } }
|
|
1064
|
+
/* Column sizing + the id-cell click-through pattern now live in table.css (one story for
|
|
1065
|
+
"table cells"). Size columns with .uix-col--w-* / .uix-col--flex + .uix-col--truncate
|
|
1066
|
+
instead of the old [data-uix-table-v2] :nth-child(2) title cap. */
|
|
955
1067
|
}
|
|
956
1068
|
/* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
|
|
957
1069
|
@layer uix.components {
|
package/build/css/styles.css
CHANGED
|
@@ -53,6 +53,21 @@
|
|
|
53
53
|
--uix-danger-text: #C20012;
|
|
54
54
|
--uix-amber: #C98A1E;
|
|
55
55
|
--uix-amber-text: #795006;
|
|
56
|
+
--uix-amber-bg: #FEFCE8;
|
|
57
|
+
--uix-attention: #EA580C;
|
|
58
|
+
--uix-attention-bg: #FFEDD5;
|
|
59
|
+
--uix-attention-text: #9A3412;
|
|
60
|
+
--uix-attention-solid: #EA580C;
|
|
61
|
+
--uix-overdue: #DC2626;
|
|
62
|
+
--uix-overdue-bg: #FEE2E2;
|
|
63
|
+
--uix-overdue-text: #991B1B;
|
|
64
|
+
--uix-overdue-solid: #EF4444;
|
|
65
|
+
--uix-sev-4: var(--uix-info);
|
|
66
|
+
--uix-sev-4-bg: var(--uix-info-bg);
|
|
67
|
+
--uix-sev-4-text: var(--uix-info-text);
|
|
68
|
+
--uix-sev-5: var(--uix-text-muted);
|
|
69
|
+
--uix-sev-5-bg: var(--uix-bg-active);
|
|
70
|
+
--uix-sev-5-text: var(--uix-text-hushed);
|
|
56
71
|
--uix-success-solid: #10B981;
|
|
57
72
|
--uix-warning-solid: #F59E0B;
|
|
58
73
|
--uix-info-solid: #2563EB;
|
|
@@ -69,6 +84,7 @@
|
|
|
69
84
|
--uix-row: #FFFFFF;
|
|
70
85
|
--uix-row-alt: #FAFAFA;
|
|
71
86
|
--uix-row-pinned-bg: #F4F7FF;
|
|
87
|
+
--uix-row-selected-bg: #DBEAFE;
|
|
72
88
|
--uix-scrollbar-thumb: rgba(10,10,10,.20);
|
|
73
89
|
--uix-scrollbar-thumb-hover: rgba(10,10,10,.34);
|
|
74
90
|
--uix-scrollbar-track: transparent;
|
|
@@ -104,12 +120,19 @@
|
|
|
104
120
|
--uix-row-h-comfortable: 68px;
|
|
105
121
|
--uix-control-h: 36px;
|
|
106
122
|
--uix-sidebar-w: 248px;
|
|
123
|
+
--uix-sidebar-w-rail: 56px;
|
|
107
124
|
--uix-topbar-h: 56px;
|
|
108
125
|
--uix-scrollbar-size: 10px;
|
|
109
126
|
--uix-icon-sm: 16px;
|
|
110
127
|
--uix-icon-md: 20px;
|
|
111
128
|
--uix-icon-lg: 24px;
|
|
112
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;
|
|
113
136
|
--uix-space-0: 0;
|
|
114
137
|
--uix-space-1: 4px;
|
|
115
138
|
--uix-space-2: 8px;
|
|
@@ -179,6 +202,15 @@
|
|
|
179
202
|
--uix-danger-text: #F87171;
|
|
180
203
|
--uix-amber: #E6B25C;
|
|
181
204
|
--uix-amber-text: #E6B25C;
|
|
205
|
+
--uix-amber-bg: rgba(201,138,30,.14);
|
|
206
|
+
--uix-attention: #FB923C;
|
|
207
|
+
--uix-attention-bg: rgba(234,88,12,.16);
|
|
208
|
+
--uix-attention-text: #FDBA74;
|
|
209
|
+
--uix-attention-solid: #F97316;
|
|
210
|
+
--uix-overdue: #F87171;
|
|
211
|
+
--uix-overdue-bg: rgba(220,38,38,.18);
|
|
212
|
+
--uix-overdue-text: #FCA5A5;
|
|
213
|
+
--uix-overdue-solid: #F87171;
|
|
182
214
|
--uix-success-solid: #34D399;
|
|
183
215
|
--uix-warning-solid: #FBBF24;
|
|
184
216
|
--uix-info-solid: #3B82F6;
|
|
@@ -195,6 +227,7 @@
|
|
|
195
227
|
--uix-row: #111111;
|
|
196
228
|
--uix-row-alt: #161616;
|
|
197
229
|
--uix-row-pinned-bg: rgba(48,128,255,.08);
|
|
230
|
+
--uix-row-selected-bg: rgba(48,128,255,.16);
|
|
198
231
|
--uix-scrollbar-thumb: rgba(255,255,255,.18);
|
|
199
232
|
--uix-scrollbar-thumb-hover: rgba(255,255,255,.30);
|
|
200
233
|
--uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04);
|
|
@@ -843,6 +876,19 @@
|
|
|
843
876
|
/* critical = the one SOLID fill (most urgent); muted = a quiet, chrome-less label */
|
|
844
877
|
.uix-pill--critical { --tone-bg: var(--uix-danger); --tone-fg: var(--uix-danger-fg); --tone-dot: var(--uix-danger-fg); }
|
|
845
878
|
.uix-pill--muted { --tone-bg: transparent; --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); }
|
|
879
|
+
/* time-pressure tones (U1 tokens — distinct from severity and validation-error) */
|
|
880
|
+
.uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
|
|
881
|
+
.uix-pill--overdue { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
|
|
882
|
+
/* SLA tones — ok=success, at-risk=attention, breached=overdue */
|
|
883
|
+
.uix-pill--sla-ok { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
|
|
884
|
+
.uix-pill--sla-at-risk { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
|
|
885
|
+
.uix-pill--sla-breached { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
|
|
886
|
+
/* Priority/severity tones — P1=danger, P2=warning, P3=amber, P4=info, P5=neutral (complete 5-tier ramp) */
|
|
887
|
+
.uix-pill--p1 { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
|
|
888
|
+
.uix-pill--p2 { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
|
|
889
|
+
.uix-pill--p3 { --tone-bg: var(--uix-amber-bg); --tone-fg: var(--uix-amber-text); --tone-dot: var(--uix-amber); }
|
|
890
|
+
.uix-pill--p4 { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
|
|
891
|
+
.uix-pill--p5 { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
|
|
846
892
|
|
|
847
893
|
/* outline treatment — transparent fill, tone-tinted border, tone-colored text. The border tints
|
|
848
894
|
the tone hue (--tone-fg) at 40%; neutral/muted use the structural borders, critical reads strongest. */
|
|
@@ -851,7 +897,9 @@
|
|
|
851
897
|
.uix-pill--outline.uix-pill--muted { --tone-line: var(--uix-border); }
|
|
852
898
|
.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); }
|
|
853
899
|
}
|
|
854
|
-
/* uix data table — zebra, sticky header, sort, selection, density, pinned rows
|
|
900
|
+
/* uix data table — zebra, sticky header, sort, selection, density, pinned rows,
|
|
901
|
+
column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
|
|
902
|
+
search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
|
|
855
903
|
@layer uix.components {
|
|
856
904
|
.uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
|
|
857
905
|
.uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
|
|
@@ -866,16 +914,16 @@
|
|
|
866
914
|
.uix-table th[data-sort]::after { content: " ↕"; opacity: .35; }
|
|
867
915
|
.uix-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--uix-accent); }
|
|
868
916
|
.uix-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--uix-accent); }
|
|
917
|
+
/* multi-column sort ordinal (⇧+click adds a secondary key) */
|
|
918
|
+
.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); }
|
|
869
919
|
|
|
870
920
|
.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; }
|
|
871
921
|
.uix-table tbody tr { background: var(--uix-row); }
|
|
872
922
|
.uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
|
|
873
923
|
.uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
|
|
874
924
|
.uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
|
|
875
|
-
.uix-table tbody tr[aria-selected="true"] { background: var(--uix-
|
|
925
|
+
.uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
|
|
876
926
|
.uix-table tbody tr:hover { background: var(--uix-bg-hover); }
|
|
877
|
-
/* density tiers — standard is the default td height above; data-density overrides it.
|
|
878
|
-
.uix-table--compact kept as a back-compat alias. */
|
|
879
927
|
.uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
|
|
880
928
|
.uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
|
|
881
929
|
|
|
@@ -886,7 +934,7 @@
|
|
|
886
934
|
.uix-table__pin svg { width: 15px; height: 15px; }
|
|
887
935
|
.uix-table__pin[data-on] svg { fill: currentColor; }
|
|
888
936
|
|
|
889
|
-
/* frozen first column (opt-in via .uix-table--pinned-col)
|
|
937
|
+
/* frozen first column (opt-in via .uix-table--pinned-col) */
|
|
890
938
|
.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); }
|
|
891
939
|
.uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
|
|
892
940
|
.uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
|
|
@@ -894,7 +942,120 @@
|
|
|
894
942
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
|
|
895
943
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
|
|
896
944
|
.uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
|
|
945
|
+
.uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
|
|
897
946
|
.uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
|
|
947
|
+
|
|
948
|
+
/* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
|
|
949
|
+
.uix-table--fixed { table-layout: fixed; width: 100%; }
|
|
950
|
+
.uix-col--w-xs { width: var(--uix-col-w-xs); }
|
|
951
|
+
.uix-col--w-sm { width: var(--uix-col-w-sm); }
|
|
952
|
+
.uix-col--w-md { width: var(--uix-col-w-md); }
|
|
953
|
+
.uix-col--w-lg { width: var(--uix-col-w-lg); }
|
|
954
|
+
.uix-col--w-xl { width: var(--uix-col-w-xl); }
|
|
955
|
+
.uix-col--flex,
|
|
956
|
+
.uix-col--primary { width: auto; min-width: var(--uix-col-title-min); }
|
|
957
|
+
.uix-col--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
958
|
+
.uix-col--wrap { white-space: normal; overflow-wrap: anywhere; }
|
|
959
|
+
.uix-col--num { font-variant-numeric: tabular-nums; }
|
|
960
|
+
.uix-table th.uix-col--num, .uix-table td.uix-col--num { text-align: right; }
|
|
961
|
+
|
|
962
|
+
/* ── cell content vocabulary — a fixed set of renderers keeps tables consistent ── */
|
|
963
|
+
.uix-cell-strong { font-weight: 600; }
|
|
964
|
+
.uix-cell-sub { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
|
|
965
|
+
.uix-cell-mono { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
|
|
966
|
+
|
|
967
|
+
/* ── id cell — the canonical row click-through (row → peek, ↗ → full record) ───── */
|
|
968
|
+
.uix-id-cell__btn {
|
|
969
|
+
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
970
|
+
color: var(--uix-text); font: inherit;
|
|
971
|
+
display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
|
|
972
|
+
}
|
|
973
|
+
.uix-id-cell__btn:hover { color: var(--uix-accent); }
|
|
974
|
+
.uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
|
|
975
|
+
.uix-id-cell__arrow {
|
|
976
|
+
width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
|
|
977
|
+
opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
|
|
978
|
+
}
|
|
979
|
+
.uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
|
|
980
|
+
|
|
981
|
+
/* ── selection column + select-all ────────────────────────────────────────────── */
|
|
982
|
+
.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; }
|
|
983
|
+
|
|
984
|
+
/* contextual bulk-action bar — appears when >=1 row is selected */
|
|
985
|
+
.uix-bulkbar {
|
|
986
|
+
display: flex; align-items: center; gap: var(--uix-space-3);
|
|
987
|
+
padding: var(--uix-space-2) var(--uix-space-3); margin-bottom: var(--uix-space-3);
|
|
988
|
+
border: 1px solid var(--uix-accent); border-radius: var(--uix-radius-md);
|
|
989
|
+
background: var(--uix-brand-muted); color: var(--uix-text);
|
|
990
|
+
animation: uix-bulkbar-in var(--uix-dur) var(--uix-ease-out);
|
|
991
|
+
}
|
|
992
|
+
.uix-bulkbar[hidden] { display: none; }
|
|
993
|
+
.uix-bulkbar__count { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-accent); font-variant-numeric: tabular-nums; }
|
|
994
|
+
.uix-bulkbar__spacer { flex: 1; }
|
|
995
|
+
@keyframes uix-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
|
|
996
|
+
@media (prefers-reduced-motion: reduce) { .uix-bulkbar { animation: none; } }
|
|
997
|
+
|
|
998
|
+
/* ── row hover actions + kebab ─────────────────────────────────────────────────── */
|
|
999
|
+
.uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
|
|
1000
|
+
.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); }
|
|
1001
|
+
.uix-rowact svg { width: 16px; height: 16px; display: block; }
|
|
1002
|
+
.uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
|
|
1003
|
+
.uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
|
|
1004
|
+
|
|
1005
|
+
/* ── expandable inline row ─────────────────────────────────────────────────────── */
|
|
1006
|
+
.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; }
|
|
1007
|
+
.uix-table__expand svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
|
|
1008
|
+
.uix-table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
|
|
1009
|
+
.uix-table__expand:hover { background: var(--uix-bg-active); color: var(--uix-text); }
|
|
1010
|
+
tr.uix-table__detail > td { background: var(--uix-bg-subtle); padding: 0 var(--uix-space-4); }
|
|
1011
|
+
.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); }
|
|
1012
|
+
.uix-kv { font-size: var(--uix-text-meta); }
|
|
1013
|
+
.uix-kv__k { color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
|
|
1014
|
+
.uix-kv__v { color: var(--uix-text); }
|
|
1015
|
+
@media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
|
|
1016
|
+
|
|
1017
|
+
/* ── inline cell edit ──────────────────────────────────────────────────────────── */
|
|
1018
|
+
.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); }
|
|
1019
|
+
.uix-cell-edit:hover { background: var(--uix-bg-active); }
|
|
1020
|
+
.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); }
|
|
1021
|
+
.uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
|
|
1022
|
+
.uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
|
|
1023
|
+
.uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
1024
|
+
.uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }
|
|
1025
|
+
.uix-cell-edit input, .uix-cell-edit select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
|
|
1026
|
+
|
|
1027
|
+
/* ── column resize grip (drag the header's right edge) ─────────────────────────── */
|
|
1028
|
+
.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; }
|
|
1029
|
+
.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); }
|
|
1030
|
+
.uix-table thead th:hover .uix-table__resize::after, .uix-table__resize[data-drag]::after { background: var(--uix-accent); }
|
|
1031
|
+
|
|
1032
|
+
/* ── search match highlight ────────────────────────────────────────────────────── */
|
|
1033
|
+
.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); }
|
|
1034
|
+
|
|
1035
|
+
/* ── responsive ladder — priority-column drop, then card transform ─────────────── */
|
|
1036
|
+
.uix-table--priority th[data-priority="low"], .uix-table--priority td[data-priority="low"] { display: none; }
|
|
1037
|
+
.uix-table--priority-mid th[data-priority="low"], .uix-table--priority-mid td[data-priority="low"],
|
|
1038
|
+
.uix-table--priority-mid th[data-priority="mid"], .uix-table--priority-mid td[data-priority="mid"] { display: none; }
|
|
1039
|
+
|
|
1040
|
+
.uix-table--cards { display: block; }
|
|
1041
|
+
.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; }
|
|
1042
|
+
.uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
|
|
1043
|
+
.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); }
|
|
1044
|
+
.uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
|
|
1045
|
+
.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; }
|
|
1046
|
+
.uix-table--cards td:last-child { border-bottom: 0; }
|
|
1047
|
+
.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; }
|
|
1048
|
+
.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); }
|
|
1049
|
+
.uix-table--cards td[data-col="id"]::before { display: none; }
|
|
1050
|
+
.uix-table--cards td[data-col="select"], .uix-table--cards td[data-col="actions"], .uix-table--cards td[data-col="expand"] { display: none; }
|
|
1051
|
+
|
|
1052
|
+
/* ── compare view — two records field-by-field on a narrow screen ──────────────── */
|
|
1053
|
+
.uix-compare { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; font-size: var(--uix-text-meta); }
|
|
1054
|
+
.uix-compare__head, .uix-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
|
|
1055
|
+
.uix-compare__head > div, .uix-compare__cell { padding: var(--uix-space-3); background: var(--uix-surface); border-top: 1px solid var(--uix-border); }
|
|
1056
|
+
.uix-compare__head > div { font-weight: 600; border-top: 0; }
|
|
1057
|
+
.uix-compare__head > div + div, .uix-compare__cell + .uix-compare__cell { border-left: 1px solid var(--uix-border); }
|
|
1058
|
+
.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); }
|
|
898
1059
|
}
|
|
899
1060
|
/* uix table toolbar + two-row filter bar (status / type). Depends only on --uix-* tokens. */
|
|
900
1061
|
@layer uix.components {
|
|
@@ -1045,8 +1206,10 @@
|
|
|
1045
1206
|
@layer uix.components {
|
|
1046
1207
|
.uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
|
|
1047
1208
|
.uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
|
|
1048
|
-
.uix-meter__fill[data-tone="warning"]
|
|
1049
|
-
.uix-meter__fill[data-tone="danger"]
|
|
1209
|
+
.uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
|
|
1210
|
+
.uix-meter__fill[data-tone="danger"] { background: var(--uix-danger); }
|
|
1211
|
+
.uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }
|
|
1212
|
+
.uix-meter__fill[data-tone="overdue"] { background: var(--uix-overdue); }
|
|
1050
1213
|
}
|
|
1051
1214
|
/* uix timeline / activity feed — depends only on --uix-* tokens. */
|
|
1052
1215
|
@layer uix.components {
|
|
@@ -1239,27 +1402,9 @@
|
|
|
1239
1402
|
[data-uix-rowpeek] tbody tr { cursor: pointer; }
|
|
1240
1403
|
[data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
|
|
1241
1404
|
|
|
1242
|
-
/*
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
[data-uix-table-v2] .uix-table td:nth-child(2) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
|
|
1246
|
-
|
|
1247
|
-
/* ID cell in pattern B table: ID text + ↗ arrow, single button, quiet/on-brand at rest.
|
|
1248
|
-
Monospace so IDs align vertically. Arrow fades in on row hover. */
|
|
1249
|
-
.uix-id-cell__btn {
|
|
1250
|
-
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
1251
|
-
color: var(--uix-text); font: inherit;
|
|
1252
|
-
display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
|
|
1253
|
-
}
|
|
1254
|
-
.uix-id-cell__btn:hover { color: var(--uix-accent); }
|
|
1255
|
-
.uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
|
|
1256
|
-
.uix-id-cell__arrow {
|
|
1257
|
-
width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
|
|
1258
|
-
opacity: 0;
|
|
1259
|
-
transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
|
|
1260
|
-
}
|
|
1261
|
-
[data-uix-rowpeek] tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
|
|
1262
|
-
@media (prefers-reduced-motion: reduce) { .uix-id-cell__arrow { transition: none; } }
|
|
1405
|
+
/* Column sizing + the id-cell click-through pattern now live in table.css (one story for
|
|
1406
|
+
"table cells"). Size columns with .uix-col--w-* / .uix-col--flex + .uix-col--truncate
|
|
1407
|
+
instead of the old [data-uix-table-v2] :nth-child(2) title cap. */
|
|
1263
1408
|
}
|
|
1264
1409
|
/* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
|
|
1265
1410
|
@layer uix.components {
|
package/build/css/tokens.css
CHANGED
|
@@ -42,6 +42,21 @@
|
|
|
42
42
|
--uix-danger-text: #C20012;
|
|
43
43
|
--uix-amber: #C98A1E;
|
|
44
44
|
--uix-amber-text: #795006;
|
|
45
|
+
--uix-amber-bg: #FEFCE8;
|
|
46
|
+
--uix-attention: #EA580C;
|
|
47
|
+
--uix-attention-bg: #FFEDD5;
|
|
48
|
+
--uix-attention-text: #9A3412;
|
|
49
|
+
--uix-attention-solid: #EA580C;
|
|
50
|
+
--uix-overdue: #DC2626;
|
|
51
|
+
--uix-overdue-bg: #FEE2E2;
|
|
52
|
+
--uix-overdue-text: #991B1B;
|
|
53
|
+
--uix-overdue-solid: #EF4444;
|
|
54
|
+
--uix-sev-4: var(--uix-info);
|
|
55
|
+
--uix-sev-4-bg: var(--uix-info-bg);
|
|
56
|
+
--uix-sev-4-text: var(--uix-info-text);
|
|
57
|
+
--uix-sev-5: var(--uix-text-muted);
|
|
58
|
+
--uix-sev-5-bg: var(--uix-bg-active);
|
|
59
|
+
--uix-sev-5-text: var(--uix-text-hushed);
|
|
45
60
|
--uix-success-solid: #10B981;
|
|
46
61
|
--uix-warning-solid: #F59E0B;
|
|
47
62
|
--uix-info-solid: #2563EB;
|
|
@@ -58,6 +73,7 @@
|
|
|
58
73
|
--uix-row: #FFFFFF;
|
|
59
74
|
--uix-row-alt: #FAFAFA;
|
|
60
75
|
--uix-row-pinned-bg: #F4F7FF;
|
|
76
|
+
--uix-row-selected-bg: #DBEAFE;
|
|
61
77
|
--uix-scrollbar-thumb: rgba(10,10,10,.20);
|
|
62
78
|
--uix-scrollbar-thumb-hover: rgba(10,10,10,.34);
|
|
63
79
|
--uix-scrollbar-track: transparent;
|
|
@@ -93,12 +109,19 @@
|
|
|
93
109
|
--uix-row-h-comfortable: 68px;
|
|
94
110
|
--uix-control-h: 36px;
|
|
95
111
|
--uix-sidebar-w: 248px;
|
|
112
|
+
--uix-sidebar-w-rail: 56px;
|
|
96
113
|
--uix-topbar-h: 56px;
|
|
97
114
|
--uix-scrollbar-size: 10px;
|
|
98
115
|
--uix-icon-sm: 16px;
|
|
99
116
|
--uix-icon-md: 20px;
|
|
100
117
|
--uix-icon-lg: 24px;
|
|
101
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;
|
|
102
125
|
--uix-space-0: 0;
|
|
103
126
|
--uix-space-1: 4px;
|
|
104
127
|
--uix-space-2: 8px;
|
|
@@ -168,6 +191,15 @@
|
|
|
168
191
|
--uix-danger-text: #F87171;
|
|
169
192
|
--uix-amber: #E6B25C;
|
|
170
193
|
--uix-amber-text: #E6B25C;
|
|
194
|
+
--uix-amber-bg: rgba(201,138,30,.14);
|
|
195
|
+
--uix-attention: #FB923C;
|
|
196
|
+
--uix-attention-bg: rgba(234,88,12,.16);
|
|
197
|
+
--uix-attention-text: #FDBA74;
|
|
198
|
+
--uix-attention-solid: #F97316;
|
|
199
|
+
--uix-overdue: #F87171;
|
|
200
|
+
--uix-overdue-bg: rgba(220,38,38,.18);
|
|
201
|
+
--uix-overdue-text: #FCA5A5;
|
|
202
|
+
--uix-overdue-solid: #F87171;
|
|
171
203
|
--uix-success-solid: #34D399;
|
|
172
204
|
--uix-warning-solid: #FBBF24;
|
|
173
205
|
--uix-info-solid: #3B82F6;
|
|
@@ -184,6 +216,7 @@
|
|
|
184
216
|
--uix-row: #111111;
|
|
185
217
|
--uix-row-alt: #161616;
|
|
186
218
|
--uix-row-pinned-bg: rgba(48,128,255,.08);
|
|
219
|
+
--uix-row-selected-bg: rgba(48,128,255,.16);
|
|
187
220
|
--uix-scrollbar-thumb: rgba(255,255,255,.18);
|
|
188
221
|
--uix-scrollbar-thumb-hover: rgba(255,255,255,.30);
|
|
189
222
|
--uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04);
|
|
@@ -43,6 +43,21 @@ module.exports = {
|
|
|
43
43
|
"uix-danger-text": "var(--uix-danger-text)",
|
|
44
44
|
"uix-amber": "var(--uix-amber)",
|
|
45
45
|
"uix-amber-text": "var(--uix-amber-text)",
|
|
46
|
+
"uix-amber-bg": "var(--uix-amber-bg)",
|
|
47
|
+
"uix-attention": "var(--uix-attention)",
|
|
48
|
+
"uix-attention-bg": "var(--uix-attention-bg)",
|
|
49
|
+
"uix-attention-text": "var(--uix-attention-text)",
|
|
50
|
+
"uix-attention-solid": "var(--uix-attention-solid)",
|
|
51
|
+
"uix-overdue": "var(--uix-overdue)",
|
|
52
|
+
"uix-overdue-bg": "var(--uix-overdue-bg)",
|
|
53
|
+
"uix-overdue-text": "var(--uix-overdue-text)",
|
|
54
|
+
"uix-overdue-solid": "var(--uix-overdue-solid)",
|
|
55
|
+
"uix-sev-4": "var(--uix-sev-4)",
|
|
56
|
+
"uix-sev-4-bg": "var(--uix-sev-4-bg)",
|
|
57
|
+
"uix-sev-4-text": "var(--uix-sev-4-text)",
|
|
58
|
+
"uix-sev-5": "var(--uix-sev-5)",
|
|
59
|
+
"uix-sev-5-bg": "var(--uix-sev-5-bg)",
|
|
60
|
+
"uix-sev-5-text": "var(--uix-sev-5-text)",
|
|
46
61
|
"uix-success-solid": "var(--uix-success-solid)",
|
|
47
62
|
"uix-warning-solid": "var(--uix-warning-solid)",
|
|
48
63
|
"uix-info-solid": "var(--uix-info-solid)",
|
|
@@ -59,6 +74,7 @@ module.exports = {
|
|
|
59
74
|
"uix-row": "var(--uix-row)",
|
|
60
75
|
"uix-row-alt": "var(--uix-row-alt)",
|
|
61
76
|
"uix-row-pinned-bg": "var(--uix-row-pinned-bg)",
|
|
77
|
+
"uix-row-selected-bg": "var(--uix-row-selected-bg)",
|
|
62
78
|
"uix-scrollbar-thumb": "var(--uix-scrollbar-thumb)",
|
|
63
79
|
"uix-scrollbar-thumb-hover": "var(--uix-scrollbar-thumb-hover)",
|
|
64
80
|
"uix-scrollbar-track": "var(--uix-scrollbar-track)",
|
package/build/tailwind/theme.css
CHANGED
|
@@ -40,6 +40,21 @@
|
|
|
40
40
|
--color-uix-danger-text: var(--uix-danger-text);
|
|
41
41
|
--color-uix-amber: var(--uix-amber);
|
|
42
42
|
--color-uix-amber-text: var(--uix-amber-text);
|
|
43
|
+
--color-uix-amber-bg: var(--uix-amber-bg);
|
|
44
|
+
--color-uix-attention: var(--uix-attention);
|
|
45
|
+
--color-uix-attention-bg: var(--uix-attention-bg);
|
|
46
|
+
--color-uix-attention-text: var(--uix-attention-text);
|
|
47
|
+
--color-uix-attention-solid: var(--uix-attention-solid);
|
|
48
|
+
--color-uix-overdue: var(--uix-overdue);
|
|
49
|
+
--color-uix-overdue-bg: var(--uix-overdue-bg);
|
|
50
|
+
--color-uix-overdue-text: var(--uix-overdue-text);
|
|
51
|
+
--color-uix-overdue-solid: var(--uix-overdue-solid);
|
|
52
|
+
--color-uix-sev-4: var(--uix-sev-4);
|
|
53
|
+
--color-uix-sev-4-bg: var(--uix-sev-4-bg);
|
|
54
|
+
--color-uix-sev-4-text: var(--uix-sev-4-text);
|
|
55
|
+
--color-uix-sev-5: var(--uix-sev-5);
|
|
56
|
+
--color-uix-sev-5-bg: var(--uix-sev-5-bg);
|
|
57
|
+
--color-uix-sev-5-text: var(--uix-sev-5-text);
|
|
43
58
|
--color-uix-success-solid: var(--uix-success-solid);
|
|
44
59
|
--color-uix-warning-solid: var(--uix-warning-solid);
|
|
45
60
|
--color-uix-info-solid: var(--uix-info-solid);
|
|
@@ -56,6 +71,7 @@
|
|
|
56
71
|
--color-uix-row: var(--uix-row);
|
|
57
72
|
--color-uix-row-alt: var(--uix-row-alt);
|
|
58
73
|
--color-uix-row-pinned-bg: var(--uix-row-pinned-bg);
|
|
74
|
+
--color-uix-row-selected-bg: var(--uix-row-selected-bg);
|
|
59
75
|
--color-uix-scrollbar-thumb: var(--uix-scrollbar-thumb);
|
|
60
76
|
--color-uix-scrollbar-thumb-hover: var(--uix-scrollbar-thumb-hover);
|
|
61
77
|
--color-uix-scrollbar-track: var(--uix-scrollbar-track);
|
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" | "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";
|
|
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
|
@@ -43,6 +43,21 @@ export const cssVar = {
|
|
|
43
43
|
"danger-text": "var(--uix-danger-text)",
|
|
44
44
|
"amber": "var(--uix-amber)",
|
|
45
45
|
"amber-text": "var(--uix-amber-text)",
|
|
46
|
+
"amber-bg": "var(--uix-amber-bg)",
|
|
47
|
+
"attention": "var(--uix-attention)",
|
|
48
|
+
"attention-bg": "var(--uix-attention-bg)",
|
|
49
|
+
"attention-text": "var(--uix-attention-text)",
|
|
50
|
+
"attention-solid": "var(--uix-attention-solid)",
|
|
51
|
+
"overdue": "var(--uix-overdue)",
|
|
52
|
+
"overdue-bg": "var(--uix-overdue-bg)",
|
|
53
|
+
"overdue-text": "var(--uix-overdue-text)",
|
|
54
|
+
"overdue-solid": "var(--uix-overdue-solid)",
|
|
55
|
+
"sev-4": "var(--uix-sev-4)",
|
|
56
|
+
"sev-4-bg": "var(--uix-sev-4-bg)",
|
|
57
|
+
"sev-4-text": "var(--uix-sev-4-text)",
|
|
58
|
+
"sev-5": "var(--uix-sev-5)",
|
|
59
|
+
"sev-5-bg": "var(--uix-sev-5-bg)",
|
|
60
|
+
"sev-5-text": "var(--uix-sev-5-text)",
|
|
46
61
|
"success-solid": "var(--uix-success-solid)",
|
|
47
62
|
"warning-solid": "var(--uix-warning-solid)",
|
|
48
63
|
"info-solid": "var(--uix-info-solid)",
|
|
@@ -59,6 +74,7 @@ export const cssVar = {
|
|
|
59
74
|
"row": "var(--uix-row)",
|
|
60
75
|
"row-alt": "var(--uix-row-alt)",
|
|
61
76
|
"row-pinned-bg": "var(--uix-row-pinned-bg)",
|
|
77
|
+
"row-selected-bg": "var(--uix-row-selected-bg)",
|
|
62
78
|
"scrollbar-thumb": "var(--uix-scrollbar-thumb)",
|
|
63
79
|
"scrollbar-thumb-hover": "var(--uix-scrollbar-thumb-hover)",
|
|
64
80
|
"scrollbar-track": "var(--uix-scrollbar-track)",
|
|
@@ -94,12 +110,19 @@ export const cssVar = {
|
|
|
94
110
|
"row-h-comfortable": "var(--uix-row-h-comfortable)",
|
|
95
111
|
"control-h": "var(--uix-control-h)",
|
|
96
112
|
"sidebar-w": "var(--uix-sidebar-w)",
|
|
113
|
+
"sidebar-w-rail": "var(--uix-sidebar-w-rail)",
|
|
97
114
|
"topbar-h": "var(--uix-topbar-h)",
|
|
98
115
|
"scrollbar-size": "var(--uix-scrollbar-size)",
|
|
99
116
|
"icon-sm": "var(--uix-icon-sm)",
|
|
100
117
|
"icon-md": "var(--uix-icon-md)",
|
|
101
118
|
"icon-lg": "var(--uix-icon-lg)",
|
|
102
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)",
|
|
103
126
|
"space-0": "var(--uix-space-0)",
|
|
104
127
|
"space-1": "var(--uix-space-1)",
|
|
105
128
|
"space-2": "var(--uix-space-2)",
|
|
@@ -174,6 +197,21 @@ export const light = {
|
|
|
174
197
|
"danger-text": "#C20012",
|
|
175
198
|
"amber": "#C98A1E",
|
|
176
199
|
"amber-text": "#795006",
|
|
200
|
+
"amber-bg": "#FEFCE8",
|
|
201
|
+
"attention": "#EA580C",
|
|
202
|
+
"attention-bg": "#FFEDD5",
|
|
203
|
+
"attention-text": "#9A3412",
|
|
204
|
+
"attention-solid": "#EA580C",
|
|
205
|
+
"overdue": "#DC2626",
|
|
206
|
+
"overdue-bg": "#FEE2E2",
|
|
207
|
+
"overdue-text": "#991B1B",
|
|
208
|
+
"overdue-solid": "#EF4444",
|
|
209
|
+
"sev-4": "var(--uix-info)",
|
|
210
|
+
"sev-4-bg": "var(--uix-info-bg)",
|
|
211
|
+
"sev-4-text": "var(--uix-info-text)",
|
|
212
|
+
"sev-5": "var(--uix-text-muted)",
|
|
213
|
+
"sev-5-bg": "var(--uix-bg-active)",
|
|
214
|
+
"sev-5-text": "var(--uix-text-hushed)",
|
|
177
215
|
"success-solid": "#10B981",
|
|
178
216
|
"warning-solid": "#F59E0B",
|
|
179
217
|
"info-solid": "#2563EB",
|
|
@@ -190,6 +228,7 @@ export const light = {
|
|
|
190
228
|
"row": "#FFFFFF",
|
|
191
229
|
"row-alt": "#FAFAFA",
|
|
192
230
|
"row-pinned-bg": "#F4F7FF",
|
|
231
|
+
"row-selected-bg": "#DBEAFE",
|
|
193
232
|
"scrollbar-thumb": "rgba(10,10,10,.20)",
|
|
194
233
|
"scrollbar-thumb-hover": "rgba(10,10,10,.34)",
|
|
195
234
|
"scrollbar-track": "transparent",
|
|
@@ -225,12 +264,19 @@ export const light = {
|
|
|
225
264
|
"row-h-comfortable": "68px",
|
|
226
265
|
"control-h": "36px",
|
|
227
266
|
"sidebar-w": "248px",
|
|
267
|
+
"sidebar-w-rail": "56px",
|
|
228
268
|
"topbar-h": "56px",
|
|
229
269
|
"scrollbar-size": "10px",
|
|
230
270
|
"icon-sm": "16px",
|
|
231
271
|
"icon-md": "20px",
|
|
232
272
|
"icon-lg": "24px",
|
|
233
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",
|
|
234
280
|
"space-0": "0",
|
|
235
281
|
"space-1": "4px",
|
|
236
282
|
"space-2": "8px",
|
|
@@ -300,6 +346,15 @@ export const dark = {
|
|
|
300
346
|
"danger-text": "#F87171",
|
|
301
347
|
"amber": "#E6B25C",
|
|
302
348
|
"amber-text": "#E6B25C",
|
|
349
|
+
"amber-bg": "rgba(201,138,30,.14)",
|
|
350
|
+
"attention": "#FB923C",
|
|
351
|
+
"attention-bg": "rgba(234,88,12,.16)",
|
|
352
|
+
"attention-text": "#FDBA74",
|
|
353
|
+
"attention-solid": "#F97316",
|
|
354
|
+
"overdue": "#F87171",
|
|
355
|
+
"overdue-bg": "rgba(220,38,38,.18)",
|
|
356
|
+
"overdue-text": "#FCA5A5",
|
|
357
|
+
"overdue-solid": "#F87171",
|
|
303
358
|
"success-solid": "#34D399",
|
|
304
359
|
"warning-solid": "#FBBF24",
|
|
305
360
|
"info-solid": "#3B82F6",
|
|
@@ -316,6 +371,7 @@ export const dark = {
|
|
|
316
371
|
"row": "#111111",
|
|
317
372
|
"row-alt": "#161616",
|
|
318
373
|
"row-pinned-bg": "rgba(48,128,255,.08)",
|
|
374
|
+
"row-selected-bg": "rgba(48,128,255,.16)",
|
|
319
375
|
"scrollbar-thumb": "rgba(255,255,255,.18)",
|
|
320
376
|
"scrollbar-thumb-hover": "rgba(255,255,255,.30)",
|
|
321
377
|
"highlight-top": "inset 0 1px 0 rgba(255,255,255,.04)",
|
|
@@ -333,12 +389,19 @@ export const num = {
|
|
|
333
389
|
"row-h-comfortable": 68,
|
|
334
390
|
"control-h": 36,
|
|
335
391
|
"sidebar-w": 248,
|
|
392
|
+
"sidebar-w-rail": 56,
|
|
336
393
|
"topbar-h": 56,
|
|
337
394
|
"scrollbar-size": 10,
|
|
338
395
|
"icon-sm": 16,
|
|
339
396
|
"icon-md": 20,
|
|
340
397
|
"icon-lg": 24,
|
|
341
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,
|
|
342
405
|
"space-1": 4,
|
|
343
406
|
"space-2": 8,
|
|
344
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.5.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/color.json
CHANGED
|
@@ -41,6 +41,24 @@
|
|
|
41
41
|
"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." },
|
|
42
42
|
"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." },
|
|
43
43
|
"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." },
|
|
44
|
+
"amber-bg": { "$type": "color", "$value": "#FEFCE8", "$description": "Amber-toned wash for SEV-3 pill backgrounds. Completes the amber ramp (amber / amber-text / amber-bg) to match the depth of the warning/danger/info ramps." },
|
|
45
|
+
|
|
46
|
+
"attention": { "$type": "color", "$value": "#EA580C", "$description": "Time-pressure semantic — 'approaching deadline / SLA at risk'. Distinct from --uix-warning (validation-warning, golden #F99C00) and --uix-danger (error/severity). Covers SLA, renewal-due, EoL/EoS countdown, patch-overdue across modules." },
|
|
47
|
+
"attention-bg": { "$type": "color", "$value": "#FFEDD5" },
|
|
48
|
+
"attention-text": { "$type": "color", "$value": "#9A3412", "$description": "Attention-toned TEXT legible on --uix-attention-bg (#FFEDD5). Dark mode brightens to track --uix-attention." },
|
|
49
|
+
"attention-solid": { "$type": "color", "$value": "#EA580C", "$description": "SOLID role for attention fills/dots/pulses (see success-solid)." },
|
|
50
|
+
|
|
51
|
+
"overdue": { "$type": "color", "$value": "#DC2626", "$description": "Time-pressure semantic — 'breached / past due'. Same hue family as danger but a SEPARATE role so products retheme breach independently of validation error. Covers SLA breach and hard-deadline misses." },
|
|
52
|
+
"overdue-bg": { "$type": "color", "$value": "#FEE2E2" },
|
|
53
|
+
"overdue-text": { "$type": "color", "$value": "#991B1B", "$description": "Overdue-toned TEXT legible on --uix-overdue-bg (#FEE2E2). Dark mode brightens." },
|
|
54
|
+
"overdue-solid": { "$type": "color", "$value": "#EF4444", "$description": "SOLID role for overdue fills/dots (see success-solid)." },
|
|
55
|
+
|
|
56
|
+
"sev-4": { "$type": "color", "$value": "var(--uix-info)", "$description": "SEV-4 alias → info tone. Full severity ramp: SEV-1=danger, SEV-2=warning, SEV-3=amber, SEV-4=info, SEV-5=neutral. var() reference — no dark override needed." },
|
|
57
|
+
"sev-4-bg": { "$type": "color", "$value": "var(--uix-info-bg)" },
|
|
58
|
+
"sev-4-text": { "$type": "color", "$value": "var(--uix-info-text)" },
|
|
59
|
+
"sev-5": { "$type": "color", "$value": "var(--uix-text-muted)", "$description": "SEV-5 alias → neutral/muted tone. Lowest priority, minimal visual weight. var() reference — no dark override needed." },
|
|
60
|
+
"sev-5-bg": { "$type": "color", "$value": "var(--uix-bg-active)" },
|
|
61
|
+
"sev-5-text": { "$type": "color", "$value": "var(--uix-text-hushed)" },
|
|
44
62
|
|
|
45
63
|
"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." },
|
|
46
64
|
"warning-solid": { "$type": "color", "$value": "#F59E0B", "$description": "SOLID status role (see success-solid)." },
|
|
@@ -59,7 +77,8 @@
|
|
|
59
77
|
|
|
60
78
|
"row": { "$type": "color", "$value": "#FFFFFF" },
|
|
61
79
|
"row-alt": { "$type": "color", "$value": "#FAFAFA" },
|
|
62
|
-
"row-pinned-bg":
|
|
80
|
+
"row-pinned-bg": { "$type": "color", "$value": "#F4F7FF" },
|
|
81
|
+
"row-selected-bg": { "$type": "color", "$value": "#DBEAFE", "$description": "Dedicated row-selection background (table tr[aria-selected]). Distinct from --uix-row-pinned-bg (#F4F7FF, very pale blue) and --uix-brand-muted (dynamic accent tint). Enables bulk-selected rows to read apart from pinned rows and inbox unread tints in the same table." },
|
|
63
82
|
|
|
64
83
|
"scrollbar-thumb": { "$type": "color", "$value": "rgba(10,10,10,.20)" },
|
|
65
84
|
"scrollbar-thumb-hover": { "$type": "color", "$value": "rgba(10,10,10,.34)" },
|
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
|
}
|
package/tokens/dark/color.json
CHANGED
|
@@ -36,6 +36,17 @@
|
|
|
36
36
|
"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)." },
|
|
37
37
|
"amber": { "$type": "color", "$value": "#E6B25C", "$description": "SEV-3 tone lightened for dark surfaces (the light-mode ochre #C98A1E is too dark on dark)." },
|
|
38
38
|
"amber-text": { "$type": "color", "$value": "#E6B25C", "$description": "On dark the lightened amber reads as text directly — tracks --uix-amber." },
|
|
39
|
+
"amber-bg": { "$type": "color", "$value": "rgba(201,138,30,.14)" },
|
|
40
|
+
|
|
41
|
+
"attention": { "$type": "color", "$value": "#FB923C", "$description": "Orange-400 — brightened for dark surfaces (the light-mode #EA580C is too dark on dark)." },
|
|
42
|
+
"attention-bg": { "$type": "color", "$value": "rgba(234,88,12,.16)" },
|
|
43
|
+
"attention-text": { "$type": "color", "$value": "#FDBA74", "$description": "On dark, orange text tracks --uix-attention (brightened); reads AA on the faint attention-bg." },
|
|
44
|
+
"attention-solid": { "$type": "color", "$value": "#F97316" },
|
|
45
|
+
|
|
46
|
+
"overdue": { "$type": "color", "$value": "#F87171", "$description": "Red-400 — brightened overdue for dark surfaces (the light-mode #DC2626 fails on dark)." },
|
|
47
|
+
"overdue-bg": { "$type": "color", "$value": "rgba(220,38,38,.18)" },
|
|
48
|
+
"overdue-text": { "$type": "color", "$value": "#FCA5A5", "$description": "On dark, brightened red text reads AA on the faint overdue-bg." },
|
|
49
|
+
"overdue-solid": { "$type": "color", "$value": "#F87171" },
|
|
39
50
|
|
|
40
51
|
"success-solid": { "$type": "color", "$value": "#34D399" },
|
|
41
52
|
"warning-solid": { "$type": "color", "$value": "#FBBF24" },
|
|
@@ -54,7 +65,8 @@
|
|
|
54
65
|
|
|
55
66
|
"row": { "$type": "color", "$value": "#111111" },
|
|
56
67
|
"row-alt": { "$type": "color", "$value": "#161616" },
|
|
57
|
-
"row-pinned-bg":
|
|
68
|
+
"row-pinned-bg": { "$type": "color", "$value": "rgba(48,128,255,.08)" },
|
|
69
|
+
"row-selected-bg": { "$type": "color", "$value": "rgba(48,128,255,.16)", "$description": "Dark-mode selection wash — stronger than row-pinned-bg (rgba(48,128,255,.08)) so selected rows read apart from pinned." },
|
|
58
70
|
|
|
59
71
|
"scrollbar-thumb": { "$type": "color", "$value": "rgba(255,255,255,.18)" },
|
|
60
72
|
"scrollbar-thumb-hover": { "$type": "color", "$value": "rgba(255,255,255,.30)" }
|