initialisation on the doormile express console with astryx

src/themes/dt/tokens.js

@@ -0,0 +1,56 @@
+// ============================================================================
+// Shared "DT" design tokens — canonical values extracted from the polished
+// pages (originally deliveries.js's "Batch" dropdown design language).
+// Every redesigned operator page should import from here instead of
+// redefining its own DT object, so radius/shadow/color decisions stay in one
+// place. See CLAUDE.md §6 for the full page-anatomy convention these tokens
+// support.
+// ============================================================================
+export const DT = {
+  radiusPill: 999,
+  radiusCard: 14,
+  radiusInner: 10,
+  radiusField: 10,
+  // Restrained, low-contrast elevation — corporate (Linear/Stripe), not flashy.
+  shadowSoft: '0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05)',
+  shadowMd: '0 1px 3px rgba(15, 23, 42, 0.06)',
+  shadowPop: '0 12px 32px rgba(15, 23, 42, 0.12)',
+  textPrimary: '#0f172a',
+  textSecondary: '#64748b',
+  textMuted: '#94a3b8',
+  borderSubtle: '#e2e8f0',
+  borderHover: '#cbd5e1',
+  divider: '#f1f5f9',
+  surface: '#ffffff',
+  surfaceAlt: '#f8fafc',
+  brand: '#C01227'
+};
+
+// Quick alpha helpers (hex + percentage suffix).
+export const a = (c, suffix) => `${c}${suffix}`;
+export const tint = (c) => a(c, '08'); // very subtle surface tint
+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
+
+// 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
+// width-agnostic.
+export const pillFieldSx = () => ({
+  cursor: 'pointer',
+  '& .MuiOutlinedInput-root': {
+    borderRadius: DT.radiusField + 'px',
+    bgcolor: DT.surface,
+    fontWeight: 600,
+    color: DT.textPrimary,
+    paddingRight: '8px',
+    cursor: 'pointer',
+    transition: 'border-color 0.15s, box-shadow 0.15s',
+    '& fieldset': { borderColor: DT.borderSubtle, borderWidth: 1 },
+    '&:hover fieldset': { borderColor: DT.borderHover },
+    '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(DT.brand)}` },
+    '&.Mui-focused fieldset': { borderColor: DT.brand, borderWidth: 1.5 }
+  },
+  '& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: DT.textMuted }
+});