@webority/theme 0.3.0 → 0.5.0

package/scss/wui/_data.scss

@@ -0,0 +1,614 @@
+// Empty state, base table, ledger table + pagination.
+//
+// Part of the wui-components layer — see _wui-components.scss for the whole
+// picture and the load order. Order within the layer is LOAD-BEARING: these
+// partials are a split of one stylesheet, not independent modules, so a rule
+// here may be overridden by a later partial. Never reorder the imports.
+
+// ── Empty state ──
+.empty-state {
+    text-align: center;
+    padding: 48px 24px;
+    color: var(--color-text-subtle);
+}
+.empty-state-title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--color-text);
+}
+.empty-state-message {
+    margin: 6px 0 0;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--color-text-muted);
+}
+.empty-state-action {
+    margin-top: 16px;
+}
+// Tighter scale for a widget/tile, as opposed to a full card or page.
+.empty-state-sm {
+    padding: 28px 16px;
+}
+.empty-state-sm .empty-state-title {
+    font-size: 14px;
+}
+.empty-state-sm .empty-state-message {
+    font-size: 12px;
+}
+.empty-state-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-lg);
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 14px;
+}
+
+// The empty state a DataTable renders in place of its rows. Distinct from
+// the card-level .empty-state above: a 50px primary-tinted disc, then a 32px
+// gap to the title and 12px to the subtitle.
+.tbl-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 40px 24px;
+}
+.tbl-empty-icon {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+    margin-bottom: 16px;
+}
+.tbl-empty-title {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--color-text);
+}
+.tbl-empty-text {
+    margin-top: 8px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--color-text-muted);
+}
+// An action (e.g. "New assessment") sits under the subtitle when the caller
+// supplies one.
+.tbl-empty-action {
+    margin-top: 20px;
+}
+
+.lx-table-empty {
+    padding: 36px 24px;
+    text-align: center;
+    color: var(--color-text-muted);
+}
+// The empty state owns its own padding and is not a row you can act on — no
+// cell padding, no border, and no hover fill from .table / .table-ledger.
+.table td.lx-table-empty:has(> .tbl-empty) {
+    padding: 0;
+    border-bottom: 0;
+}
+.table tbody tr:hover td.lx-table-empty:has(> .tbl-empty),
+.table-ledger tbody tr:hover td.lx-table-empty:has(> .tbl-empty) {
+    background: transparent;
+}
+
+// ── Table (base) ──
+// The shared data-table look, on the plain `.table` class Bootstrap already
+// gives every table. Without this a product's tables fall back to stock
+// Bootstrap and drift from the design system; `.table-ledger` below is the
+// denser, card-inset variant, not a replacement for having a base.
+.table {
+    --bs-table-bg: transparent;
+    --bs-table-color: var(--color-text);
+    width: 100%;
+    margin-bottom: 0;
+    color: var(--color-text);
+    vertical-align: middle;
+    border-color: var(--color-border);
+    // `separate` is required for a cell to render a border-radius at all —
+    // Bootstrap reboot sets `collapse`, under which .table-ledger's rounded
+    // header corners silently do nothing. border-spacing 0 keeps cells flush.
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+// The cell rules are wrapped in :where() so they carry ZERO class specificity
+// — `:where(.table) > thead > tr > th` is (0,0,3), which any single-class
+// variant selector such as `.table-ledger thead th` (0,1,2) outranks.
+//
+// Without this the base out-ranks its own variant: written plainly,
+// `.table > thead > tr > th` is (0,1,3) and beats `.table-ledger thead th`,
+// so the ledger lost its own border-bottom/line-height/font-family to the
+// base. A base layer must always sit *under* the variants built on it.
+//
+// The catch: zero class specificity also loses to BOOTSTRAP. Its
+// `.table > :not(caption) > * > *` is (0,1,1) and sets `padding`, `color` and
+// `background-color` on every cell, so declaring those three here would be dead
+// CSS — measured: they never applied. Each therefore goes through the channel
+// Bootstrap itself reads:
+//   padding    -> $table-cell-padding-y/x, overridden before bootstrap loads
+//   colour     -> --bs-table-color   (its fallback in the color-state/type chain)
+//   background -> --bs-table-bg
+// A custom property declared on the cell beats the one `.table` passes down to it,
+// so these land without out-ranking anything — the same move as the
+// `--bs-table-bg-state` hover below, and the reason that one already works.
+:where(.table) > thead > tr > th {
+    --bs-table-bg: var(--color-bg-muted);
+    --bs-table-color: var(--color-text-subtle);
+    height: 42px;
+    // Only the horizontal inset differs from the shared cell padding.
+    padding-inline: 12px;
+    // `height` is only a MINIMUM on a table cell, so the header lands on 42px only
+    // while its content box stays under that; left to the font's own metrics it
+    // drifted to 43.6px. Pinning the line box to the font size keeps
+    // 12 + 12 + 12 + 1px border comfortably under 42, so the minimum governs and the
+    // band is exactly 42px — and it stays 42px if the shared cell padding changes,
+    // which a hardcoded line-height would not. Bootstrap's cell rule does not set
+    // line-height, so this one still reaches the element.
+    line-height: 1;
+    border-bottom: 1px solid var(--color-border);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    vertical-align: middle;
+    transition:
+        background-color 0.12s ease,
+        color 0.12s ease;
+}
+:where(.table) > tbody > tr > td {
+    --bs-table-color: var(--color-text-muted);
+    border-bottom: 1px solid var(--color-border);
+    font-size: 14px;
+    vertical-align: middle;
+    transition: background-color 0.12s ease;
+}
+:where(.table) > tbody > tr:last-child > td {
+    border-bottom: 0;
+}
+:where(.table) > tbody > tr:hover {
+    --bs-table-bg-state: var(--color-bg-subtle);
+}
+@media (prefers-reduced-motion: reduce) {
+    :where(.table) > thead > tr > th,
+    :where(.table) > tbody > tr > td {
+        transition: none;
+    }
+}
+// Numeric / action columns align to the trailing edge.
+.table .cell-end,
+.table thead th.cell-end {
+    text-align: right;
+}
+
+// ── Table + pagination ──
+// DataTable cell helpers
+.table-ledger .lx-cell-end,
+.table-ledger thead th.lx-cell-end {
+    text-align: right;
+}
+
+// Ledger chrome — the shared table look. Applies to every .table-ledger: a
+// floating 42px header band, airy rows on a hairline rule, and an inset from
+// the card edge. Column geometry is NOT set here.
+.table-wrap:has(> .table-ledger) {
+    padding: 20px 20px 0;
+}
+.table-ledger {
+    border-spacing: 0;
+}
+.table-ledger thead th {
+    height: 42px;
+    padding: 0 12px;
+    background: var(--color-bg-muted);
+    border-bottom: none;
+    font-family: "Inter", var(--font-sans, sans-serif);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 17px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    // --color-text-subtle (#78829D) is ~3.5:1 on the muted band, below WCAG AA's 4.5:1
+    // for 12px text. A column header names the data under it — that is not decorative
+    // text, so it takes the muted ramp (~7.5:1). Caught by the axe pass, on both surfaces.
+    color: var(--color-text-muted);
+    vertical-align: middle;
+}
+.table-ledger thead th:first-child {
+    padding-left: 20px;
+    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+}
+.table-ledger thead th:last-child {
+    padding-right: 20px;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+.table-ledger tbody td {
+    height: 54px;
+    padding: 12px;
+    border-bottom: 0.5px solid var(--color-border);
+    font-family: "Inter", var(--font-sans, sans-serif);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 15px;
+    color: var(--color-text-muted);
+}
+.table-ledger tbody td:first-child {
+    padding-left: 20px;
+}
+.table-ledger tbody td:last-child {
+    padding-right: 20px;
+}
+.table-ledger tbody tr:last-child td {
+    border-bottom: none;
+}
+.table-ledger tbody tr:hover {
+    --bs-table-bg-state: var(--color-bg-subtle);
+}
+.table-ledger .u-meta {
+    gap: 2px;
+}
+.table-ledger .u-name {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 19px;
+    color: var(--color-text);
+}
+@media (max-width: 575.98px) {
+    .table-ledger .u-name {
+        font-size: 12px;
+        line-height: normal;
+        margin-bottom: 2px;
+    }
+}
+// An identity-cell name is often a link, so it inherits Bootstrap's
+// underline-on-hover. The colour shift is the affordance here.
+.table-ledger a.u-name,
+.table-ledger a.u-name:hover {
+    text-decoration: none;
+}
+// Identity-cell subline. `.u-email` is in the group because an identity cell
+// renders the secondary line as either a generic .lx-text-xs or a .u-email.
+.table-ledger .u-meta > .u-email,
+.table-ledger .u-meta > .lx-text-xs {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 15px;
+    color: var(--color-text-subtle);
+}
+.table-ledger .u-row-actions {
+    gap: 6px;
+}
+
+// Ledger tables: 20px edge padding so header labels + first/last cells align
+// with the card edge — shared across every .table-ledger surface.
+.table-ledger thead th:first-child,
+.table-ledger tbody td:first-child {
+    padding-left: 20px;
+}
+.table-ledger thead th:last-child,
+.table-ledger tbody td:last-child {
+    padding-right: 20px;
+}
+
+// Pagination footer — rows-per-page + range + prev/next, sits flush under a
+// table.
+.table-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 22px;
+    padding: 12px 16px;
+    border-top: 1px solid var(--color-border);
+    font-size: 13px;
+    color: var(--color-text-muted);
+    flex-wrap: wrap;
+}
+// Rows-per-page sits at the leading edge; range + nav stay grouped on the
+// right.
+.tpg-rows {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+    margin-right: auto;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    color: var(--color-text-subtle);
+}
+.select.tpg-select {
+    width: auto;
+    min-width: 64px;
+    height: 32px;
+    min-height: 32px;
+    padding: 0 28px 0 12px;
+    font-size: 13px;
+    font-weight: 600;
+    border-radius: var(--radius);
+    background-position: right 8px center;
+    background-size: 14px;
+}
+.tpg-range {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-muted);
+}
+.tpg-nav {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+.tpg-arrow {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    border-radius: 50%;
+    cursor: pointer;
+    transition:
+        background 0.14s ease,
+        color 0.14s ease;
+}
+.tpg-arrow:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+}
+// Text-5 already reads as "unavailable" — no opacity dimming on top of it.
+.tpg-arrow:disabled {
+    color: var(--color-border-strong);
+    cursor: not-allowed;
+}
+
+// Horizontal scroll guard + flush-fit inside a card. Wrapping the table here
+// also stops `.card > .table` header-corner rounding from applying mid-card.
+.table-wrap {
+    overflow-x: auto;
+    max-width: 100%;
+    // Keep the horizontal swipe inside the table — don't let it drag the
+    // page — and give touch devices momentum scrolling. Scrollbar is
+    // thinned/hidden so the scroll feels native.
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border-strong) transparent;
+}
+.table-wrap::-webkit-scrollbar {
+    height: 6px;
+}
+.table-wrap::-webkit-scrollbar-track {
+    background: transparent;
+}
+.table-wrap::-webkit-scrollbar-thumb {
+    background: var(--color-border-strong);
+    border-radius: 999px;
+}
+
+// Row-selection checkbox column.
+.table-ledger th.lx-select-cell,
+.table-ledger td.lx-select-cell {
+    width: 44px;
+    min-width: 44px;
+    max-width: 44px;
+    text-align: center;
+    padding-left: 12px;
+    padding-right: 0;
+}
+// Row state goes through Bootstrap's own --bs-table-bg-state, NOT `background`.
+// Bootstrap 5.3 paints cell state with `box-shadow: inset 0 0 0 9999px
+// var(--bs-table-bg-state, …)`, which covers whatever background the cell has —
+// so setting `background` on the <tr> OR the <td> is invisible. Setting the
+// variable on the row is what `.table-active` itself does, and it inherits to
+// every cell. Brand tint, not grey: grey reads as "disabled", not "chosen".
+.table-ledger tbody tr.is-selected {
+    --bs-table-bg-state: var(--color-primary-soft);
+}
+.table-ledger tbody tr.is-selected:hover {
+    --bs-table-bg-state: color-mix(in srgb, var(--color-primary) 14%, transparent);
+}
+
+// Row status affordance — a colour bar on the leading edge, so a row's state is
+// legible without relying on a tint alone.
+.table-ledger tbody tr[data-status] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-border-strong);
+}
+.table-ledger tbody tr[data-status="success"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-success);
+}
+.table-ledger tbody tr[data-status="warning"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-warning);
+}
+.table-ledger tbody tr[data-status="danger"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-danger);
+}
+.table-ledger tbody tr[data-status="info"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-info);
+}
+
+// Row actions — icon-only buttons replacing a kebab dropdown.
+.u-row-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    // Action cells never wrap — a status hint stays on one line.
+    white-space: nowrap;
+}
+.u-action {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    background: var(--color-bg-subtle);
+    border-radius: 999px;
+    color: var(--color-text-subtle);
+    cursor: pointer;
+    transition:
+        background 0.12s ease,
+        color 0.12s ease;
+    position: relative;
+}
+// Touch pointers need a 44px minimum target. Grow the hit area, not the
+// ink, so row density and alignment are untouched.
+@media (pointer: coarse) {
+    .u-action::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 44px;
+        height: 44px;
+    }
+}
+.u-action svg {
+    flex: none;
+}
+.u-action:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+}
+.u-action:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.u-action.danger {
+    color: var(--color-danger-text);
+}
+.u-action.danger:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+    color: var(--color-danger-text);
+}
+.u-action.u-action-preview {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.u-action.u-action-download {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.u-action.u-action-share {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.u-action.u-action-preview:hover:not(:disabled) {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.u-action.u-action-download:hover:not(:disabled) {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.u-action.u-action-share:hover:not(:disabled) {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.u-action.u-action-danger:hover {
+    color: var(--color-danger-text);
+    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+}
+
+// Identity cell — avatar + stacked name/email.
+.u-cell {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+.u-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    flex: none;
+    display: grid;
+    place-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+.u-meta {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.u-name {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text);
+}
+.u-email {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--color-text-muted);
+}
+.u-you {
+    padding: 1px 7px;
+    font-size: 10.5px;
+}
+
+// Table extras — a sortable header and numeric cells. These sit AFTER the
+// .table-ledger rules above on purpose: they are opt-in additions on top of
+// whichever table variant is in use, not part of the base a variant overrides.
+.table th.sortable {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+}
+.table th.sortable .sort-icon {
+    // Reserved space so the header does not jump width when the arrow appears.
+    width: 12px;
+    flex: none;
+    color: var(--color-text-subtle);
+    opacity: 0;
+    transition: opacity 0.12s ease;
+}
+.table th.sortable:hover .sort-icon {
+    opacity: 0.6;
+}
+.table th.sortable[aria-sort="ascending"] .sort-icon,
+.table th.sortable[aria-sort="descending"] .sort-icon {
+    opacity: 1;
+    color: var(--color-primary);
+}
+.table th.sortable[aria-sort="descending"] .sort-icon {
+    transform: rotate(180deg);
+}
+.table th.sortable[aria-sort="ascending"],
+.table th.sortable[aria-sort="descending"] {
+    color: var(--color-text);
+}
+
+// Numeric cells: right-aligned with tabular figures, so digits line up in a column
+// and a total sits directly under the values it sums.
+.table th.num,
+.table td.num {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+// ============================================================================