/* Datanomics Horizon — layout tokens reconciled with the DATA UI Figma source. */ :root { /* Exact DATA UI spacing collection (0, 2, then a dense 4–24 scale). */ --spacing-none: 0; --spacing-xxs: 2px; --spacing-xs: 4px; --spacing-sm: 6px; --spacing-md: 8px; --spacing-lg: 10px; --spacing-xl: 12px; --spacing-xxl: 14px; --spacing-3xl: 16px; --spacing-4xl: 18px; --spacing-5xl: 20px; --spacing-6xl: 24px; --spacing-7xl: 28px; --spacing-8xl: 32px; --spacing-9xl: 36px; --spacing-10xl: 40px; --spacing-11xl: 48px; --spacing-12xl: 56px; --spacing-13xl: 64px; --spacing-14xl: 80px; --spacing-15xl: 96px; /* Stable numeric aliases retained for existing product consumers. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; --space-12: 64px; --space-16: 80px; /* Table geometry — SINGLE SOURCE OF TRUTH for every table in the product (ADR-046 §5.4). Two density steps and one column scale, declared here once. The legacy `--dp-grid-*` names are aliases onto these tokens in BlazorFrontend/wwwroot/css/ds-bridge.css — they carry no numbers of their own, so a value is changed in exactly one place. Dimensions only: theme-invariant, deliberately not repeated in any dark-mode block. Consumers: DsDataTable.razor.css (comfortable + column scale) and, through the aliases, css/components/data-grid.css (compact) + TableSkeleton (same row geometry, so the grid does not jump when data lands). */ --ds-table-cell-py-comfortable: 8px; /* body cell vertical padding inside the 56px row */ --ds-table-cell-px-comfortable: 12px; /* DATA UI table-column horizontal inset */ --ds-table-head-py-comfortable: 8px; /* header content is vertically centred */ --ds-table-row-h-comfortable: 56px; /* DATA UI table-cell component */ --ds-table-head-h-comfortable: 56px; /* DATA UI header-cell component */ --ds-table-cell-py-compact: 6px; /* body cell vertical padding */ --ds-table-cell-px-compact: 6px; /* body/header cell horizontal padding — hard floor */ --ds-table-head-py-compact: 8px; /* header keeps the comfortable padding */ --ds-table-row-min-h-compact: 34px; /* text row height (rows with buttons measure 45px: 32 button + 12 padding + 1 row separator) */ --ds-table-col-xs: 72px; /* boolean, count, small icon/badge */ --ds-table-col-sm: 110px; /* short date/code/version, count chip ≤12 chars */ --ds-table-col-chip: 140px; /* single status chip/badge — holds ~18 vi chars */ --ds-table-col-md: 160px; /* datetime, enum label, short name */ --ds-table-col-lg: 240px; /* email, identifier, medium name */ --ds-table-col-actions: 124px; /* 3 × 32px buttons + 2 × 6px gaps + 2 × 6px padding */ --ds-table-min-w-tablet: 900px; /* 768–1279px: scroll instead of unreadable columns */ /* Height of a CONTROL inside a table cell — read by BOTH sides of the contract, which is the point of the name: the loading placeholder reserves it, and (since ADR-075 D-1') the live control in the cell is floored at it, so the placeholder row and the data row that replaces it are built from one number instead of two that drift. Not a new number: it is the action button's own box, read off BlazorFrontend/wwwroot/css/components/action-buttons.css:28-29 (width/height 32px, with min-height:32px at :36 restating it against the global 44px touch floor). A text line box in this table measures 21.18px, so an actions cell is 10.82px taller than a text cell — that gap is exactly the layout shift measured at 1280px before this token existed. Read by DsDataTable.razor.css only: the placeholder rule (opt-in through LoadingRowsHaveActions — a text-only table never reads it) and the D-1' control floor. Renamed from --ds-table-ph-actions-h when D-1' made it describe both sides rather than the placeholder alone. */ --ds-table-control-h: 32px; /* Thickness of a SKELETON BAR. One value for both copies of the shimmer bar — the table placeholder (.ds-table-ph::before, DsDataTable.razor.css) and the panel placeholder (.ds-panel-ph-bar, DsPanelSkeleton.razor.css) — because CSS isolation prevents the two components from sharing a class and only a shared token can keep them from drifting. Not a new number: it is the 14px the table placeholder bar already drew. */ --ds-skeleton-bar-h: 14px; /* Exact DATA UI radius collection. */ --radius-none: 0; --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 16px; --radius-4xl: 18px; --radius-full: 999px; --radius-pill: var(--radius-full); --radius-app-icon: 36px; /* Borders */ --border-width: 1px; /* @kind other */ --border-default: 1px solid rgba(0, 0, 0, 0.08); /* @kind other */ --border-separator: 1px solid rgba(0, 0, 0, 0.06); /* @kind other */ /* Exact DATA UI effect styles. */ --shadow-none: none; --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.09); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.09); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.14); --shadow-soft: 0 10px 15px -3px rgba(0, 0, 0, 0.05); --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px; --blur-xl: 40px; /* Stable elevation aliases retained by existing components. */ --shadow-l0: var(--shadow-none); --shadow-l1: var(--shadow-sm); --shadow-l1-hover: var(--shadow-md); --shadow-l2: var(--shadow-lg); --shadow-l3: var(--shadow-2xl); --shadow-glow-cyan: 0 0 16px rgba(107, 178, 233, 0.55); --shadow-glow-teal: var(--shadow-glow-cyan); --shadow-glow-yellow: 0 0 16px rgba(246, 180, 58, 0.50); /* Focus ring — brand blue, OPAQUE via --border-focus (colors.css, per-theme). Was rgba(22, 80, 137, 0.28): a 28%-alpha ring composites toward whatever is behind it, so it measured 1.56–1.61:1 on every light surface and 1.15–1.19:1 on every dark one — below the 3:1 WCAG 1.4.11 minimum for a focus indicator, on all of them. Alpha can never be made reliable here (the rendered color depends on the background), so the ring is now a solid token colour: 6.70–8.26:1 light, 4.98–6.28:1 dark, measured against all nine surface/tint backgrounds a ring can land on. Colour lives in --border-focus so the shadow geometry is stated once and the two themes differ only by that one token. */ --ring: 0 0 0 3px var(--border-focus); /* Motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-apple: var(--ease-standard); /* Compatibility alias for existing consumers. @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --transition-fast: 150ms var(--ease-standard); /* @kind other */ --transition-base: 250ms var(--ease-standard); /* @kind other */ /* Layout */ --navbar-height: 64px; --sidebar-width: 252px; --sidebar-collapsed-width: 72px; --content-max: 1440px; --content-narrow: 1140px; --page-padding: 24px; /* DATA UI/Bootstrap-compatible 12-column layout grid (6 columns below 576px). */ --grid-columns: 12; --grid-columns-mobile: 6; --grid-gutter: 24px; --grid-page-margin: 24px; --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-xxl: 1320px; } /* Card mode raises the action button to a 44px touch target (WCAG 2.5.5), so the placeholder that stands in for it has to grow by the same amount — same value, same breakpoint, same reason as action-buttons.css:154-158. 767.98px is COPIED FROM those two files verbatim and must stay byte-identical to the card-mode query in DsDataTable.razor.css: at exactly 768px the buttons are 32px again, so a query written as `max-width: 768px` here would reserve 44px for a 32px button on the tablet tier — one row, 12px too tall, at precisely the width nobody re-measures. */ @media (max-width: 767.98px) { :root { --ds-table-control-h: 44px; } }