@nexterajs/ui 0.0.1 → 0.1.0

package/styles/_tokens.scss

@@ -30,12 +30,14 @@
 // `:root` overrides — defaults silently winning over the app that is trying to configure them.
 // `:where()` pins these to zero specificity, so any host declaration always wins.
 :where(:root) {
+    // @group Typography
     // Typography — reference `.dx-widget`
     --nxe-ui-font-family: Helvetica Neue, Segoe UI, helvetica, verdana, sans-serif;
     --nxe-ui-font-size: 14px; // dx default. orbit overrides -> 0.85rem (= 12.24px @ 14.4px root)
     --nxe-ui-font-weight: 400;
     --nxe-ui-line-height: 1.35715;
 
+    // @group Palette
     // Palette — reference dx.light
     --nxe-ui-text: #333;
     --nxe-ui-text-muted: #999;
@@ -45,33 +47,496 @@
     --nxe-ui-accent-contrast: #fff;
     --nxe-ui-danger: #d9534f;
     --nxe-ui-success: #5cb85c;
+    --nxe-ui-accent-strong: #265a87; // accent hover border (checkbox, calendar, dropdown); darker than accent
+    --nxe-ui-surface-alt: #f5f5f5; // alternate / header / hover-fill surface (grid rows, pivot headers)
+    --nxe-ui-ink-strong: #30374c; // badge fill, spinner head, drop-zone outline
 
+    // @group Derived tints
+    // Derived tints. color-mix keeps them in step with the base colour: an app that sets only
+    // `--nxe-ui-accent` gets matching hover borders and selection tints. With the default colours
+    // they equal the old literal rgba() values exactly.
+    --nxe-ui-accent-faded: color-mix(in srgb, var(--nxe-ui-accent) 40%, transparent); // editor hover border
+    --nxe-ui-accent-tint: color-mix(in srgb, var(--nxe-ui-accent) 24%, transparent); // calendar selected-range tint
+    --nxe-ui-border-faded: color-mix(in srgb, var(--nxe-ui-border) 20%, transparent); // pivot area header fill
+    --nxe-ui-text-disabled: color-mix(in srgb, var(--nxe-ui-text) 38%, transparent); // calendar out-of-range days
+
+    // @group Invalid state
+    // Invalid state: editors, check box, file uploader. Defaults to the danger colour.
+    --nxe-ui-invalid: var(--nxe-ui-danger); // border, badge disc, message bubble, error text
+    --nxe-ui-invalid-contrast: #fff; // "!" glyph and message text on the invalid fill
+    --nxe-ui-invalid-faded: color-mix(in srgb, var(--nxe-ui-invalid) 40%, transparent); // resting invalid border
+
+    // @group Focus
+    // Focus. `focus-ring` is a box-shadow value (calendar selected day; opt-in for buttons via
+    // `--nxe-ui-button-focus-ring`); `focus-ring-color` is the pager keyboard outline.
+    --nxe-ui-focus-ring: 0 0 0 2px color-mix(in srgb, var(--nxe-ui-accent) 50%, transparent);
+    --nxe-ui-focus-ring-color: #5c95c5;
+
+    // @group State layers
     // State layers — reference dx.light list/menu states
     --nxe-ui-hover-bg: rgba(0, 0, 0, 0.04);
     --nxe-ui-selected-bg: rgba(0, 0, 0, 0.1);
     --nxe-ui-selected-hover-bg: rgba(0, 0, 0, 0.07);
     --nxe-ui-focus-selected-bg: rgba(51, 122, 183, 0.7);
     --nxe-ui-disabled-opacity: 0.5;
+    --nxe-ui-focus-bg: rgba(0, 0, 0, 0.08); // keyboard-focused icon button
+    --nxe-ui-active-bg: rgba(0, 0, 0, 0.24); // pressed icon button
+    --nxe-ui-checkbox-active-bg: rgba(96, 96, 96, 0.2); // pressed check box icon
 
+    // @group Metrics
     // Metrics
     --nxe-ui-radius: 4px;
     --nxe-ui-popup-radius: 6px;
-    --nxe-ui-popup-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    --nxe-ui-popup-shadow: var(--nxe-ui-shadow-md);
     --nxe-ui-item-padding: 7px 9px;
     --nxe-ui-list-padding: 10px;
 
+    // @group Overlay geometry
     // Overlay geometry — host apps that skinned dx popups override these.
     // 0 keeps a dropdown panel exactly as wide as the editor it drops from (the components set
     // `width` inline from the trigger's offsetWidth; a non-zero floor here overrides that). Orbit
     // carried the dx-era `.dx-overlay-content { min-width: 400px !important }` here until
     // 2026-07-29 and dropped it — see nxe-ui/DEFAULTS.md.
     --nxe-ui-overlay-min-width: 0px;
+    // Header-filter popup floor. The popup is dx's own 252x325; broker's global
+    // `.dx-overlay-content{min-width:400px}` made it 400px wide in the dx era, which an app can
+    // restore here without widening every dropdown panel.
+    --nxe-ui-header-filter-min-width: 0px;
+    // Field-chooser popup floor. dx's own field chooser popup has no 400px floor; broker's global
+    // `.dx-overlay-content{min-width:400px}` made it 400px wide in the dx era, which an app can
+    // restore here without widening every dropdown panel.
+    --nxe-ui-fieldchooser-min-width: 0px;
+
+    // @group Check box and button gap
+    // Check box hover border - dx `.dx-checkbox.dx-state-hover .dx-checkbox-icon{border-color:#265a87}`.
+    --nxe-ui-checkbox-hover-border: var(--nxe-ui-accent-strong);
+
+    // Gap between a button's projected children. dx `.dx-button-content` has none; an app whose
+    // icon + text buttons relied on the library's former 4px can set it back.
+    --nxe-ui-button-gap: 0px;
+
+    // @group Data grid
+    // Data grid empty state — dx `.dx-datagrid-rowsview.dx-empty{height:100px}` and
+    // `.dx-datagrid-nodata{font-size:17px}`.
+    --nxe-ui-grid-empty-height: 100px;
+    --nxe-ui-grid-nodata-font-size: 17px;
+
+    // Data grid and tree list lines - dx.light's values. Whether a grid draws them is per grid
+    // ([showRowLines], [showColumnLines], [showBorders], [rowAlternationEnabled]) or app-wide
+    // (NXE_DEFAULT_OPTIONS.dataGrid / .treeList); these set how they look. Override them at :root
+    // for the whole app, or on one grid, e.g.
+    //   nxe-data-grid.quotes { --nxe-ui-grid-column-line-color: #e2e8f0; }
+    // The grid's rules outweigh dx-compat's #ddd copies, so an override holds on selected, edited
+    // and group rows too. Literals, not var(--nxe-ui-border): a var() here resolves at :root, and a
+    // subtree override of --nxe-ui-border would never reach them.
+    --nxe-ui-grid-line-width: 1px; //          every grid line and the showBorders box
+    --nxe-ui-grid-row-line-color: #ddd; //     `.dx-row-lines>td{border-bottom}`, group rows and footers
+    --nxe-ui-grid-column-line-color: #ddd; //  `.dx-column-lines>td{border-left;border-right}`
+    --nxe-ui-grid-border-color: #ddd; //       showBorders: `.dx-datagrid-borders>.dx-datagrid-rowsview`,
+    //                                         and the pager's top line (`.dx-pager{border-top}`), which
+    //                                         lies on the box's bottom edge in a bordered grid
+    --nxe-ui-grid-header-line-color: #ddd; //  `.dx-datagrid-headers .dx-datagrid-table .dx-row>td`
+    --nxe-ui-grid-alt-row-bg: #f5f5f5; //      rowAlternationEnabled: `.dx-row-alt>td`
+
+    // Data grid group rows and expand cells - dx.light's values.
+    //   group-row-color: `.dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused){color:#222}`
+    //   summary-color:   `.dx-datagrid-summary-item{color:rgba(51,51,51,.7)}` (aligned group sums)
+    //   expand-offset:   `.dx-command-expand.dx-datagrid-group-space{padding-top:7px}` - how far down
+    //                    the cell the 18px group / master-detail toggle starts. dx leaves it about
+    //                    3.3px below the row's middle; an app that wants it centred sets
+    //                    (row height - 18px) / 2 here.
+    --nxe-ui-grid-group-row-color: #222;
+    --nxe-ui-grid-summary-color: rgba(51, 51, 51, 0.7);
+    --nxe-ui-grid-expand-offset: 7px;
+
+    // Data grid cells and column header - dx.light's values. Apps that skin the grid (bright and
+    // orbit: 4px cells, 20px at the edges, a #f8fafc caption row in #525252, indicators at
+    // 0.7) set these rather than writing cell selectors.
+    //   cell-padding:        `.dx-datagrid .dx-row>td{padding:7px}`
+    //   cell-vertical-align: centred, where a table cell sits by default (dx states top, but its cell
+    //                        content fills the line; the grid's geometry specs measure dx with this)
+    //   indicator-scale / indicator-offset: the sort arrow and header-filter funnel block, shrunk
+    //                        and dropped as one (dx draws them at 14px, flush with the line top)
+    // Unset unless an app sets them, because their default is whatever is around them:
+    //   --nxe-ui-grid-edge-padding   the first and last cell's outer side (default: cell-padding)
+    //   --nxe-ui-grid-header-bg      the caption row's fill (default: the headers view's white)
+    //   --nxe-ui-grid-header-color   the caption row's text and arrows (default: #757575, above)
+    --nxe-ui-grid-cell-padding: 7px;
+    --nxe-ui-grid-cell-vertical-align: middle;
+    --nxe-ui-grid-indicator-scale: 1;
+    --nxe-ui-grid-indicator-offset: 0px;
+
+    // @group Neutral ramp
+    // Neutral ramp: the greys dx.light hard-codes across the grid, pivot, calendar and scrollbars.
+    // The number is lightness (50 lightest, 900 darkest) in the LIGHT theme; `.dark` mirrors the
+    // ramp so a step keeps its job (a "250" fill is still the quiet fill) on a dark surface.
+    --nxe-ui-neutral-50: #fafafa; // master-detail cell
+    --nxe-ui-neutral-60: #f7f7f7; // group-row fill
+    --nxe-ui-neutral-65: #f8f8f8; // grid caption fill
+    --nxe-ui-neutral-80: #f4f4f4; // button hover, readonly border
+    --nxe-ui-neutral-100: #f0f0f0;
+    --nxe-ui-neutral-110: #eee; // scrollbar rail hover
+    --nxe-ui-neutral-120: #ebebeb; // pager keyboard focus
+    --nxe-ui-neutral-150: #e6e6e6; // calendar hover, selected-row frame
+    --nxe-ui-neutral-230: #d4d4d4; // pressed header cell
+    --nxe-ui-neutral-240: #d3d3d3; // chart axis
+    --nxe-ui-neutral-250: #ccc; // toast link hover
+    --nxe-ui-neutral-300: #c2c2c2; // pressed secondary button
+    --nxe-ui-neutral-350: #b3b3b3; // calendar open
+    --nxe-ui-neutral-400: #aaa; // scrollbar thumb, tag close
+    --nxe-ui-neutral-450: #959595; // tree glyphs, sort arrows
+    --nxe-ui-neutral-500: #898989; // grid icon strokes
+    --nxe-ui-neutral-600: #757575; // grid header text
+    --nxe-ui-neutral-600-faded: rgba(117, 117, 117, 0.5); // empty header-filter icon
+    --nxe-ui-neutral-700: #525252; // pivot header text
+    --nxe-ui-neutral-900: #222; // group row text
+
+    // @group Overlays and scrolling
+    --nxe-ui-scrim: rgba(255, 255, 255, 0.5); // grid loading overlay
+    --nxe-ui-spinner-track: rgba(48, 55, 76, 0.2);
+    --nxe-ui-scrollbar-thumb: rgba(0, 0, 0, 0.5); // fallback thumb (mixins.nxe-thin-scrollbar)
+    --nxe-ui-scroll-thumb: rgba(191, 191, 191, 0.7); // nxe-scroll-view thumb
+    --nxe-ui-scroll-thumb-hover: rgb(191, 191, 191);
+
+    // @group Buttons
+    // Buttons. The four button types map to the design vocabulary: `primary` = type "default",
+    // `secondary` = type "normal" (the white one), plus `success` and `danger`. Fills follow the
+    // base palette by default, so setting `--nxe-ui-accent` already recolours primary buttons.
+    // Hover and pressed shades are literals because dx's are not a fixed mix of the base: set all
+    // five per type for a complete re-skin.
+    --nxe-ui-button-bg-primary: var(--nxe-ui-accent);
+    --nxe-ui-button-fg-primary: var(--nxe-ui-accent-contrast);
+    --nxe-ui-button-border-primary: transparent;
+    --nxe-ui-button-hover-bg-primary: #2d6ca3;
+    --nxe-ui-button-active-bg-primary: #19405b;
+    --nxe-ui-button-bg-secondary: var(--nxe-ui-surface);
+    --nxe-ui-button-fg-secondary: var(--nxe-ui-text);
+    --nxe-ui-button-border-secondary: var(--nxe-ui-border);
+    --nxe-ui-button-hover-bg-secondary: #f4f4f4;
+    --nxe-ui-button-active-bg-secondary: #c2c2c2;
+    --nxe-ui-button-bg-success: var(--nxe-ui-success);
+    --nxe-ui-button-fg-success: #fff;
+    --nxe-ui-button-border-success: transparent;
+    --nxe-ui-button-hover-bg-success: #46a046;
+    --nxe-ui-button-active-bg-success: #306e30;
+    --nxe-ui-button-bg-danger: var(--nxe-ui-danger);
+    --nxe-ui-button-fg-danger: #fff;
+    --nxe-ui-button-border-danger: transparent;
+    --nxe-ui-button-hover-bg-danger: #cd312c;
+    --nxe-ui-button-active-bg-danger: #932320;
+    --nxe-ui-button-focus-ring: none; // keyboard focus box-shadow; dx draws none. Try var(--nxe-ui-focus-ring)
+
+    // @group Toast
+    // Toast notifications (styles/_toast.scss). Dark in both themes by design, so `.dark` leaves them.
+    --nxe-ui-toast-fg: #fff;
+    --nxe-ui-toast-fg-muted: #ccc;
+    --nxe-ui-toast-ink: #000;
+    --nxe-ui-toast-shadow-hover: #999;
+    --nxe-ui-toast-bg: #030303;
+    --nxe-ui-toast-success-bg: #51a351;
+    --nxe-ui-toast-error-bg: #bd362f;
+    --nxe-ui-toast-info-bg: #2f96b4;
+    --nxe-ui-toast-warning-bg: #f89406;
+
+    // @group Status families
+    // Status families (nxe-tag, nxe-badge). The six families of the status catalogue: neutral
+    // (draft), info (waiting on the other party), attention (the viewer's move), success, danger and
+    // muted (expired, inactive; drawn with a dashed border). `fg` is the text on `bg` at >= 4.5:1;
+    // `border` is the quiet edge. Solid tags and badges swap the pair (fill = fg, text = bg), which
+    // keeps the same ratio. Outlined tags put `fg` on `--nxe-ui-surface`, also held at >= 4.5:1.
+    --nxe-ui-status-neutral-fg: #4a5868;
+    --nxe-ui-status-neutral-bg: #eef1f4;
+    --nxe-ui-status-neutral-border: #b5bbc3;
+    --nxe-ui-status-info-fg: #004d8f;
+    --nxe-ui-status-info-bg: #eaf3fb;
+    --nxe-ui-status-info-border: #98b9d5;
+    --nxe-ui-status-attention-fg: #8a5a00;
+    --nxe-ui-status-attention-bg: #fff4db;
+    --nxe-ui-status-attention-border: #d6be8e;
+    --nxe-ui-status-success-fg: #1c7a4e;
+    --nxe-ui-status-success-bg: #e5f5ec;
+    --nxe-ui-status-success-border: #9fcab5;
+    --nxe-ui-status-danger-fg: #b4322a;
+    --nxe-ui-status-danger-bg: #fdecea;
+    --nxe-ui-status-danger-border: #e3aba7;
+    --nxe-ui-status-muted-fg: #5a6b7d;
+    --nxe-ui-status-muted-bg: #f2f4f6;
+    --nxe-ui-status-muted-border: #bdc4cc;
+
+    // @group Chart palette
+    // Chart palette (nxe-line-chart, nxe-area-chart, nxe-donut-chart). Eight categorical hues in a
+    // FIXED order, assigned to series 1..8 and never cycled: the order is what keeps neighbours apart
+    // under colour-vision deficiency. Validated against --nxe-ui-surface (#fff / dark #1c232d) with
+    // the dataviz palette validator: every mark >= 3:1 on the surface, adjacent CVD distance >= 8
+    // (protan/deutan, OKLab x100), adjacent normal-vision distance >= 15. charts-contrast.spec.ts
+    // re-checks the contrast on every build. A host that re-brands the surface must re-run it.
+    // `other` is the neutral for the grouped "Other" segment (never a ninth hue).
+    --nxe-ui-chart-1: #2a78d6; // blue
+    --nxe-ui-chart-2: #eb6834; // orange
+    --nxe-ui-chart-3: #16a074; // aqua
+    --nxe-ui-chart-4: #b57c00; // yellow, stepped down to clear 3:1 on white
+    --nxe-ui-chart-5: #c24e7f; // magenta
+    --nxe-ui-chart-6: #008300; // green
+    --nxe-ui-chart-7: #4a3aa7; // violet
+    --nxe-ui-chart-8: #e34948; // red
+    --nxe-ui-chart-other: #898989; // = neutral-500
+
+    // @group App shell
+    // App shell (nxe-shell, nxe-sidenav, nxe-topbar). Sizes are the design-system layout: a 248px
+    // sidebar that collapses to a 64px icon rail, a 56px topbar. Colours: the sidebar is a quiet
+    // tint of the surface so the page reads as the foreground; `fg` and `active-fg` hold >= 4.5:1
+    // on their backgrounds, `fg-muted` (group headings) too. The breakpoint is the `breakpoint`
+    // input of nxe-shell, not a token: a media query cannot read a custom property.
+    --nxe-ui-shell-sidenav-width: 248px;
+    --nxe-ui-shell-sidenav-collapsed-width: 64px;
+    --nxe-ui-shell-topbar-height: 56px;
+    --nxe-ui-shell-sidenav-bg: #f5f7fa;
+    --nxe-ui-shell-sidenav-fg: #333f4d;
+    --nxe-ui-shell-sidenav-fg-muted: #5f6b7a;
+    --nxe-ui-shell-sidenav-border: #dde3ea;
+    --nxe-ui-shell-sidenav-hover-bg: rgba(0, 0, 0, 0.05);
+    --nxe-ui-shell-sidenav-active-bg: #e1ecf7;
+    --nxe-ui-shell-sidenav-active-fg: #174f80;
+    --nxe-ui-shell-topbar-bg: #fff;
+    --nxe-ui-shell-topbar-fg: #333;
+    --nxe-ui-shell-scrim: rgba(15, 23, 32, 0.45);
+    // @group Tooltip
+    // Tooltip (nxeTooltip). A dark chip in the light theme and a light one in the dark theme, so it
+    // always stands off the page. Both pairs hold >= 4.5:1 (nxe-tooltip-contrast.spec.ts).
+    --nxe-ui-tooltip-bg: #2b3340;
+    --nxe-ui-tooltip-fg: #fff;
+
+
+    // @group Spacing scale
+    // Spacing scale (4px base). New: no component reads these yet. They are for the host app's
+    // own layout so app and library share one rhythm.
+    --nxe-ui-space-1: 4px;
+    --nxe-ui-space-2: 8px;
+    --nxe-ui-space-3: 12px;
+    --nxe-ui-space-4: 16px;
+    --nxe-ui-space-5: 20px;
+    --nxe-ui-space-6: 24px;
+    --nxe-ui-space-7: 32px;
+    --nxe-ui-space-8: 48px;
+
+    // @group Type scale
+    // Type scale (14px base, ~1.2 ratio): sizes, paired line-heights, weights.
+    --nxe-ui-font-size-xs: 12px;
+    --nxe-ui-font-size-sm: 13px;
+    --nxe-ui-font-size-md: 14px;
+    --nxe-ui-font-size-lg: 16px;
+    --nxe-ui-font-size-xl: 20px;
+    --nxe-ui-font-size-2xl: 24px;
+    --nxe-ui-font-size-3xl: 32px;
+    --nxe-ui-line-height-xs: 16px;
+    --nxe-ui-line-height-sm: 18px;
+    --nxe-ui-line-height-md: 20px;
+    --nxe-ui-line-height-lg: 24px;
+    --nxe-ui-line-height-xl: 26px;
+    --nxe-ui-line-height-2xl: 30px;
+    --nxe-ui-line-height-3xl: 38px;
+    --nxe-ui-font-weight-regular: 400;
+    --nxe-ui-font-weight-medium: 500;
+    --nxe-ui-font-weight-semibold: 600;
+    --nxe-ui-font-weight-bold: 700;
+
+    // @group Radius and elevation scale
+    // Radius and elevation scales. `popup-shadow` defaults to `shadow-md`; the grid's floating
+    // chips use `shadow-sm`; `shadow-lg` is for dialogs and drawers.
+    --nxe-ui-radius-sm: 4px;
+    --nxe-ui-radius-md: 6px;
+    --nxe-ui-radius-lg: 10px;
+    --nxe-ui-radius-xl: 12px;
+    --nxe-ui-radius-pill: 999px;
+    --nxe-ui-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.15);
+    --nxe-ui-shadow-md: 0 6px 12px rgba(0, 0, 0, 0.175);
+    --nxe-ui-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.2);
+
+    // @group Density
+    // Density. Comfortable is the dx default. `.nxe-density-compact` (below) tightens these.
+    --nxe-ui-control-min-height: 34px; // text editors' input row
+    --nxe-ui-editor-padding: 7px 9px 8px; // text editors' input padding
+    --nxe-ui-button-padding: 8px; // button content padding (icon-only)
+    --nxe-ui-button-padding-inline: 12px; // button content inline padding (with text)
 
-    // foreground.divider — slate.200
+    // foreground.divider: slate.200
     --nxe-divider-color: #e2e8f0;
 }
 
+// Compact density. Put the class on <body> (or any ancestor of the controls). Not zero
+// specificity on purpose: it must beat an app's `:root` token file when the class sits on <html>.
+.nxe-density-compact {
+    --nxe-ui-control-min-height: 28px;
+    --nxe-ui-editor-padding: 4px 9px 5px;
+    --nxe-ui-button-padding: 5px;
+    --nxe-ui-button-padding-inline: 10px;
+    --nxe-ui-item-padding: 4px 9px;
+    --nxe-ui-list-padding: 6px;
+}
+
+// Dark theme. Add `class="dark"` to <html> or <body> (or any subtree).
+//
+// This block restates every token that is a different colour in the dark, or an alias / colour-mix
+// of one: a custom property holding `var(--x)` is resolved where it is DECLARED, so a `.dark` on a
+// subtree would otherwise keep the light root's values. Zero specificity, like the defaults: an
+// app's own `.dark { ... }` (or `:root.dark { ... }` when the class is on <html>) wins. An app that
+// re-colours the brand in light must restate those tokens inside `.dark`, or the library's dark
+// blue replaces its brand.
 :where(.dark) {
+    color-scheme: dark;
+
+    // @group Palette
+    --nxe-ui-text: #e4e8ee;
+    --nxe-ui-text-muted: #8f9bab;
+    --nxe-ui-border: #3a4452;
+    --nxe-ui-surface: #1c232d;
+    --nxe-ui-accent: #5aa5de;
+    --nxe-ui-accent-contrast: #0d1a26;
+    --nxe-ui-danger: #ee6f6a;
+    --nxe-ui-success: #5fcf86;
+    --nxe-ui-accent-strong: #8cc4ee;
+    --nxe-ui-surface-alt: #232b37;
+    --nxe-ui-ink-strong: #c5cddb;
+
+    // @group Derived tints
+    --nxe-ui-accent-faded: color-mix(in srgb, var(--nxe-ui-accent) 40%, transparent);
+    --nxe-ui-accent-tint: color-mix(in srgb, var(--nxe-ui-accent) 24%, transparent);
+    --nxe-ui-border-faded: color-mix(in srgb, var(--nxe-ui-border) 20%, transparent);
+    --nxe-ui-text-disabled: color-mix(in srgb, var(--nxe-ui-text) 38%, transparent);
+
+    // @group Invalid state
+    --nxe-ui-invalid: var(--nxe-ui-danger);
+    --nxe-ui-invalid-contrast: #2a0f0e;
+    --nxe-ui-invalid-faded: color-mix(in srgb, var(--nxe-ui-invalid) 40%, transparent);
+
+    // @group Focus
+    --nxe-ui-focus-ring: 0 0 0 2px color-mix(in srgb, var(--nxe-ui-accent) 50%, transparent);
+    --nxe-ui-focus-ring-color: #7fb6e6;
+
+    // @group State layers
+    --nxe-ui-hover-bg: rgba(255, 255, 255, 0.06);
+    --nxe-ui-selected-bg: rgba(255, 255, 255, 0.12);
+    --nxe-ui-selected-hover-bg: rgba(255, 255, 255, 0.09);
+    --nxe-ui-focus-selected-bg: rgba(90, 165, 222, 0.55);
+    --nxe-ui-focus-bg: rgba(255, 255, 255, 0.1);
+    --nxe-ui-active-bg: rgba(255, 255, 255, 0.2);
+    --nxe-ui-checkbox-active-bg: rgba(255, 255, 255, 0.18);
+
+    // @group Metrics
+    --nxe-ui-popup-shadow: var(--nxe-ui-shadow-md);
+
+    // @group Check box and button gap
+    --nxe-ui-checkbox-hover-border: var(--nxe-ui-accent-strong);
+
+    // @group Data grid
+    --nxe-ui-grid-row-line-color: #313a47;
+    --nxe-ui-grid-column-line-color: #313a47;
+    --nxe-ui-grid-border-color: #3a4452;
+    --nxe-ui-grid-header-line-color: #3a4452;
+    --nxe-ui-grid-alt-row-bg: #202833;
+    --nxe-ui-grid-group-row-color: #e9edf2;
+    --nxe-ui-grid-summary-color: rgba(228, 232, 238, 0.7);
+
+    // @group Neutral ramp
+    --nxe-ui-neutral-50: #20272f;
+    --nxe-ui-neutral-60: #222a33;
+    --nxe-ui-neutral-65: #232b34;
+    --nxe-ui-neutral-80: #262e38;
+    --nxe-ui-neutral-100: #29323d;
+    --nxe-ui-neutral-110: #2b3541;
+    --nxe-ui-neutral-120: #2e3844;
+    --nxe-ui-neutral-150: #333e4b;
+    --nxe-ui-neutral-230: #4a5462;
+    --nxe-ui-neutral-240: #4d5765;
+    --nxe-ui-neutral-250: #566170;
+    --nxe-ui-neutral-300: #5f6a79;
+    --nxe-ui-neutral-350: #6c7787;
+    --nxe-ui-neutral-400: #7a8595;
+    --nxe-ui-neutral-450: #8993a2;
+    --nxe-ui-neutral-500: #95a0ae;
+    --nxe-ui-neutral-600: #a7b1be;
+    --nxe-ui-neutral-600-faded: rgba(167, 177, 190, 0.5);
+    --nxe-ui-neutral-700: #c0c8d2;
+    --nxe-ui-neutral-900: #e9edf2;
+
+    // @group Overlays and scrolling
+    --nxe-ui-scrim: rgba(28, 35, 45, 0.6);
+    --nxe-ui-spinner-track: rgba(197, 205, 219, 0.25);
+    --nxe-ui-scrollbar-thumb: rgba(255, 255, 255, 0.4);
+    --nxe-ui-scroll-thumb: rgba(143, 155, 171, 0.6);
+    --nxe-ui-scroll-thumb-hover: rgb(143, 155, 171);
+
+    // @group Buttons
+    --nxe-ui-button-bg-primary: var(--nxe-ui-accent);
+    --nxe-ui-button-fg-primary: var(--nxe-ui-accent-contrast);
+    --nxe-ui-button-hover-bg-primary: #7ab9e8;
+    --nxe-ui-button-active-bg-primary: #9acbee;
+    --nxe-ui-button-bg-secondary: #2a3340;
+    --nxe-ui-button-fg-secondary: var(--nxe-ui-text);
+    --nxe-ui-button-border-secondary: var(--nxe-ui-border);
+    --nxe-ui-button-hover-bg-secondary: #323c4a;
+    --nxe-ui-button-active-bg-secondary: #3d4959;
+    --nxe-ui-button-bg-success: var(--nxe-ui-success);
+    --nxe-ui-button-fg-success: #0d1a26;
+    --nxe-ui-button-hover-bg-success: #7edb9d;
+    --nxe-ui-button-active-bg-success: #9de6b5;
+    --nxe-ui-button-bg-danger: var(--nxe-ui-danger);
+    --nxe-ui-button-fg-danger: #2a0f0e;
+    --nxe-ui-button-hover-bg-danger: #f58d89;
+    --nxe-ui-button-active-bg-danger: #f9a9a6;
+
+    // @group Status families
+    --nxe-ui-status-neutral-fg: #b9c4d0;
+    --nxe-ui-status-neutral-bg: #353d47;
+    --nxe-ui-status-neutral-border: #636b76;
+    --nxe-ui-status-info-fg: #8cc4ee;
+    --nxe-ui-status-info-bg: #2e3d4c;
+    --nxe-ui-status-info-border: #4e6b84;
+    --nxe-ui-status-attention-fg: #f0c36a;
+    --nxe-ui-status-attention-bg: #3e3d37;
+    --nxe-ui-status-attention-border: #7b6b48;
+    --nxe-ui-status-success-fg: #6fd49b;
+    --nxe-ui-status-success-bg: #293f3f;
+    --nxe-ui-status-success-border: #41735e;
+    --nxe-ui-status-danger-fg: #f59a94;
+    --nxe-ui-status-danger-bg: #3f363d;
+    --nxe-ui-status-danger-border: #7e595b;
+    --nxe-ui-status-muted-fg: #9aa6b5;
+    --nxe-ui-status-muted-bg: #303843;
+    --nxe-ui-status-muted-border: #555e6a;
+
+    // @group Chart palette
+    --nxe-ui-chart-1: #3987e5;
+    --nxe-ui-chart-2: #d95926;
+    --nxe-ui-chart-3: #199e70;
+    --nxe-ui-chart-4: #c98500;
+    --nxe-ui-chart-5: #d55181;
+    --nxe-ui-chart-6: #008300;
+    --nxe-ui-chart-7: #9085e9;
+    --nxe-ui-chart-8: #e66767;
+    --nxe-ui-chart-other: #95a0ae; // = neutral-500
+
+    // @group App shell
+    --nxe-ui-shell-sidenav-bg: #171d26;
+    --nxe-ui-shell-sidenav-fg: #cbd3de;
+    --nxe-ui-shell-sidenav-fg-muted: #8f9bab;
+    --nxe-ui-shell-sidenav-border: #2c3542;
+    --nxe-ui-shell-sidenav-hover-bg: rgba(255, 255, 255, 0.06);
+    --nxe-ui-shell-sidenav-active-bg: #243447;
+    --nxe-ui-shell-sidenav-active-fg: #9ccdf2;
+    --nxe-ui-shell-topbar-bg: #1c232d;
+    --nxe-ui-shell-topbar-fg: #e4e8ee;
+    --nxe-ui-shell-scrim: rgba(0, 0, 0, 0.6);
+    // @group Tooltip
+    --nxe-ui-tooltip-bg: #e4e8ee;
+    --nxe-ui-tooltip-fg: #161b22;
+
+
+    // @group Radius and elevation scale
+    --nxe-ui-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
+    --nxe-ui-shadow-md: 0 6px 12px rgba(0, 0, 0, 0.5);
+    --nxe-ui-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
+
     // slate.100 @ 12%
     --nxe-divider-color: rgba(241, 245, 249, 0.12);
 }

package/styles/_widget.scss

@@ -39,14 +39,25 @@
     }
 }
 
-// Deliberately NOT part of nxe-widget yet. dx also put `color` and `box-sizing` on `.dx-widget`,
-// but adopting `color` here would newly repaint nxe-tree-view / nxe-list / nxe-file-uploader, and
-// the host app renders its sidebar inside a `.dark` container. Land it only after a visual pass.
+// The rest of dx.light's `.dx-widget`: its #333 text, and the touch and print settings
+// (`-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:none;-webkit-touch-callout:none;
+// print-color-adjust:exact`). Apps used to get these from their copy of dx.light; the visual pass
+// against orbit, which had it on every widget, is what let `color` land here. Not dx's `display:
+// block` or `outline:0`: each component states its own display, and the focus outline stays.
 @mixin nxe-widget-chrome {
     :where(.nxe-widget) {
         color: var(--nxe-ui-text);
+        -webkit-tap-highlight-color: transparent;
+        -webkit-text-size-adjust: none;
+        text-size-adjust: none;
+        -webkit-touch-callout: none;
+        print-color-adjust: exact;
     }
+}
 
+// dx's `.dx-widget, .dx-widget * {box-sizing:border-box}`. Not in the bundle: a host with Tailwind's
+// preflight already has it, and one without may lay its own content out on content-box.
+@mixin nxe-widget-box-sizing {
     .nxe-widget,
     .nxe-widget *,
     .nxe-widget ::before,

package/styles/index.scss

@@ -10,10 +10,13 @@
 @use 'editor';
 @use 'dropdown';
 @use 'button-directives';
+@use 'icons';
 
-// The widget base (font family/size/weight/line-height). Must come before the component chrome
-// below so those can override it, and it is what carries the contract across a CDK portal.
+// The widget base (font family/size/weight/line-height, text colour). Must come before the
+// component chrome below so those can override it, and it is what carries the contract across a
+// CDK portal.
 @include widget.nxe-widget;
+@include widget.nxe-widget-chrome;
 
 @include button-directives.nxe-button-directives;
 
@@ -23,6 +26,9 @@
 // Shared select-family dropdown panel (select-box, tag-box).
 @include dropdown.nxe-dropdown;
 
+// The `<i class="nxe-icon nxe-icon-NAME">` glyph layer (nxe-button's `icon`).
+@include icons.nxe-icons;
+
 // Pointer-drag chrome for NxeDragGesture, shared by the data grid's column/group drags and the
 // pivot's field-panel/chooser chip drags. Global because a page can render a pivot and NO data
 // grid (an ANALYTIC report is exactly that), and component styles only ship while an instance of
@@ -57,8 +63,8 @@ body.nxe-grid-dragging {
     height: 18px;
     padding: 0 4px;
     border-radius: 9px;
-    background: #30374c;
-    color: #fff;
+    background: var(--nxe-ui-ink-strong, #30374c);
+    color: var(--nxe-ui-accent-contrast, #fff);
     font-size: 10px;
     font-weight: 600;
     line-height: 1;