updates on the ui design and desing updates

src/themes/dt/tokens.js

@@ -30,6 +30,12 @@ export const DT = {
 // Semantic status palette — lifecycle colours, deliberately distinct from the
 // brand (see root CLAUDE.md §6). Pages have historically inlined these hexes;
 // new code should reference STATUS so there is one place to change them.
+//
+// This map is the RAW HEX layer, for surfaces that take an arbitrary accent
+// (StatCard, AccentAvatar, chart series). To RENDER a status — a row badge or
+// a filter tab — use `themes/dt/status.js` instead: it resolves backend enums
+// and aliases, and carries the matching Astryx Badge/StatusDot variants and
+// icon alongside the hex. Reach for STATUS only when you need the bare colour.
 // This also replaces the `theme.palette.error/success/...` lookups that used
 // to pull the same colours out of the MUI theme.
 // ---------------------------------------------------------------------------
@@ -57,6 +63,26 @@ export const soft = (c) => a(c, '18'); // soft chip / avatar bg
 export const ring = (c) => a(c, '26'); // focus ring color
 export const edge = (c) => a(c, '55'); // resting border
 
+// ---------------------------------------------------------------------------
+// ⛔ LEGACY — MUI-ONLY. Everything from here to the end of this file emits MUI
+// `sx` objects and cannot be used by an Astryx page.
+//
+// They stay only because the pages still awaiting conversion import them
+// (`pillFieldSx` ×3 files, `tableScrollSx` ×4, `tableHeadSx` ×3,
+// `tableRowSx` ×3). They are deleted along with the MUI dependency once the
+// last page converts — do NOT add a new call site.
+//
+// Astryx equivalents:
+//   pillFieldSx    → nothing. Field chrome comes from the theme
+//                    (`themes/astryx.js` → components['text-input']), so every
+//                    input matches without a per-call-site helper.
+//   tableScrollSx  → <TableScroll> from themes/dt/primitives (also supplies
+//                    the sticky header MUI's TableContainer used to provide).
+//   tableHeadSx    → <Table density dividers hasHover> — header casing and
+//                    row rules are the component's own chrome.
+//   tableRowSx     → same; `hasHover` covers the hover tint.
+// ---------------------------------------------------------------------------
+
 // Pill input sx — used by every filter Autocomplete/TextField on a page.
 // Neutral, corporate filter field: white surface, hairline border, brand
 // focus ring. Width is driven by parent flex/grid so this helper stays