initialisation on the doormile express console with astryx

src/themes/astryx.js

@@ -0,0 +1,17 @@
+// Astryx brand theme — extends the stock "neutral" theme with Doormile's
+// brand red so migrated surfaces match the existing DT token palette
+// (see themes/dt/tokens.js). Runtime-injected (not `astryx theme build`)
+// since this repo doesn't do SSR — see `astryx docs theme`.
+import { defineTheme } from '@astryxdesign/core/theme';
+import { neutralTheme } from '@astryxdesign/theme-neutral';
+import { DT } from 'themes/dt/tokens';
+
+export const doormileTheme = defineTheme({
+  name: 'doormile',
+  extends: neutralTheme,
+  color: { accent: DT.brand, neutralStyle: 'cool' },
+  components: {
+    card: { base: { borderRadius: `${DT.radiusCard}px` } },
+    'text-input': { base: { borderRadius: `${DT.radiusInner}px` } }
+  }
+});

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 }
+});

src/themes/index.js

@@ -121,7 +121,7 @@ export default function ThemeCustomization({ children }) {
             // soft slate that tints toward brand purple on hover.
             '*': {
               scrollbarWidth: 'thin', // Firefox
-              scrollbarColor: 'rgba(102, 37, 130, 0.28) transparent'
+              scrollbarColor: 'rgba(192, 18, 39, 0.28) transparent'
             },
             '*::-webkit-scrollbar': {
               width: '10px',
@@ -131,13 +131,13 @@ export default function ThemeCustomization({ children }) {
               backgroundColor: 'transparent'
             },
             '*::-webkit-scrollbar-thumb': {
-              backgroundColor: 'rgba(102, 37, 130, 0.26)',
+              backgroundColor: 'rgba(192, 18, 39, 0.26)',
               borderRadius: '8px',
               border: '2px solid transparent',
               backgroundClip: 'padding-box'
             },
             '*::-webkit-scrollbar-thumb:hover': {
-              backgroundColor: 'rgba(102, 37, 130, 0.45)'
+              backgroundColor: 'rgba(192, 18, 39, 0.45)'
             },
             '*::-webkit-scrollbar-corner': {
               backgroundColor: 'transparent'

src/themes/overrides/Autocomplete.js

@@ -23,10 +23,10 @@ export default function Autocomplete() {
             borderRadius: 8,
             margin: '1px 0',
             '&[aria-selected="true"]': {
-              backgroundColor: 'rgba(102, 37, 130, 0.08)'
+              backgroundColor: 'rgba(192, 18, 39, 0.08)'
             },
             '&.Mui-focused': {
-              backgroundColor: 'rgba(102, 37, 130, 0.06)'
+              backgroundColor: 'rgba(192, 18, 39, 0.06)'
             }
           }
         },

src/themes/theme/default.js

@@ -40,16 +40,16 @@ const Default = (colors) => {
     //   contrastText
     // },
     primary: {
-      lighter: '#E8D9EF',
-      100: '#CBA7DA',
-      200: '#AE76C4',
-      light: '#9255AB',
-      400: '#9255AB',
-      main: '#662582',
-      dark: '#4D1C61',
-      700: '#3A1549',
-      darker: '#260E30',
-      900: '#17081D',
+      lighter: '#F5DBDE',
+      100: '#E9ADB4',
+      200: '#DD7E8A',
+      light: '#D25463',
+      400: '#D25463',
+      main: '#C01227',
+      dark: '#910E1D',
+      700: '#6D0A16',
+      darker: '#48070F',
+      900: '#2B0409',
       contrastText: '#FFFFFF'
     },
     secondary: {