From 892692f3b873f1c62ccd9cdd62356485355bfabb Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Wed, 27 May 2026 20:19:16 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20post-design-review=20=E2=80=94?=
 =?UTF-8?q?=20slab=20token=20split=20+=20badge=20contrast=20+=20modal=20ba?=
 =?UTF-8?q?ckdrop=20+=20dark=20shadows?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add fixed slab/slab-text/slab-muted tokens so utility strip and footer never
  invert to near-white in dark mode (root token split: ink is themed text,
  slab is fixed dark surface)
- btn-ink uses fixed #111827 so confirm dialogs stay dark-on-dark readable
- Toast error surface switched to slab; success uses text-white (not text-ink-on)
- StatusBadge active and SimulationStatusBadge review_required/done use text-white
  instead of text-canvas/text-ink-on (prevents near-black text on colored pill
  in dark mode)
- Modal backdrops (MitreMatrixModal, ConfirmDialog) switched to .modal-backdrop
  class (fixed rgba(0,0,0,0.6)) instead of bg-ink/60 which turned near-white
- Card shadow lifted in dark mode via .dark .card-product override
- MitreMatrixModal panel uses shadow-floating-dark in dark mode
- UsersAdminPage form: items-start + explicit label-height spacer on button
  column for pixel-perfect baseline alignment (AC-17.3 structural fix)

92/92 tests passing, typecheck and lint clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ConfirmDialog.tsx         |  2 +-
 frontend/src/components/Layout.tsx                | 14 +++++++-------
 frontend/src/components/MitreMatrixModal.tsx      |  4 ++--
 frontend/src/components/SimulationStatusBadge.tsx |  7 ++++---
 frontend/src/components/StatusBadge.tsx           |  2 +-
 frontend/src/components/Toast.tsx                 |  5 +++--
 frontend/src/pages/UsersAdminPage.tsx             | 10 ++++++++--
 frontend/src/styles/index.css                     | 15 +++++++++++++--
 frontend/tailwind.config.ts                       |  6 ++++++
 frontend/tests/MitreMatrixModal.test.tsx          |  2 +-
 10 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 66af72b..da36019 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -24,7 +24,7 @@ export function ConfirmDialog({
       aria-labelledby="confirm-dialog-title"
       className="fixed inset-0 z-50 flex items-center justify-center"
     >
-      <div className="absolute inset-0 bg-ink/40" onClick={onCancel} aria-hidden="true" />
+      <div className="modal-backdrop absolute inset-0" onClick={onCancel} aria-hidden="true" />
       <div className="relative card-product shadow-floating max-w-sm w-full mx-md flex flex-col gap-md">
         <h2 id="confirm-dialog-title" className="text-[20px] font-medium text-ink">
           {title}
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 0a1ed72..3330ac1 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -28,13 +28,13 @@ export function Layout(): JSX.Element {
 
   return (
     <div className="min-h-full flex flex-col bg-canvas">
-      {/* utility-strip — ink slab, fine print */}
-      <div className="bg-ink text-white text-[14px] h-9 flex items-center">
+      {/* utility-strip — fixed dark slab, never inverts */}
+      <div className="bg-slab text-slab-text text-[14px] h-9 flex items-center">
         <div className="mx-auto w-full max-w-page px-xl flex items-center justify-between">
           <span className="font-medium tracking-[0.5px] uppercase">Mimic · Purple Team BAS</span>
           {user ? (
             <div className="flex items-center gap-md">
-              <span className="text-[12px] uppercase tracking-[0.5px] text-steel">
+              <span className="text-[12px] uppercase tracking-[0.5px] text-slab-muted">
                 {user.role}
               </span>
               <span className="text-[14px]">{user.username}</span>
@@ -42,7 +42,7 @@ export function Layout(): JSX.Element {
                 type="button"
                 onClick={cycleTheme}
                 aria-label={`Theme: ${themeLabel(theme)} — click to cycle`}
-                className="flex items-center gap-xxs text-[12px] text-steel hover:text-white transition-colors"
+                className="flex items-center gap-xxs text-[12px] text-slab-muted hover:text-slab-text transition-colors"
               >
                 <ThemeIcon theme={theme} />
                 <span className="uppercase tracking-[0.5px]">{themeLabel(theme)}</span>
@@ -101,9 +101,9 @@ export function Layout(): JSX.Element {
         </div>
       </main>
 
-      {/* footer — ink slab close */}
-      <footer className="bg-ink text-white">
-        <div className="mx-auto w-full max-w-page px-xl py-xl text-[12px] text-steel">
+      {/* footer — fixed dark slab, never inverts */}
+      <footer className="bg-slab text-slab-text">
+        <div className="mx-auto w-full max-w-page px-xl py-xl text-[12px] text-slab-muted">
           Mimic — Internal Purple Team tooling. Authorized engagements only.
         </div>
       </footer>
diff --git a/frontend/src/components/MitreMatrixModal.tsx b/frontend/src/components/MitreMatrixModal.tsx
index 7913bf1..88660d0 100644
--- a/frontend/src/components/MitreMatrixModal.tsx
+++ b/frontend/src/components/MitreMatrixModal.tsx
@@ -163,14 +163,14 @@ export function MitreMatrixModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-ink/60" onClick={onCancel} aria-hidden="true" />
+      <div className="modal-backdrop absolute inset-0" onClick={onCancel} aria-hidden="true" />
 
       <div
         ref={containerRef}
         role="dialog"
         aria-modal="true"
         aria-labelledby="matrix-modal-title"
-        className="relative bg-canvas rounded-xl shadow-floating max-w-[98vw] max-h-[80vh] overflow-hidden flex flex-col"
+        className="relative bg-canvas rounded-xl shadow-floating dark:shadow-floating-dark max-w-[98vw] max-h-[80vh] overflow-hidden flex flex-col"
         style={{ width: '1400px' }}
         onKeyDown={handleKeyDown}
       >
diff --git a/frontend/src/components/SimulationStatusBadge.tsx b/frontend/src/components/SimulationStatusBadge.tsx
index c5ffb09..7d8cf78 100644
--- a/frontend/src/components/SimulationStatusBadge.tsx
+++ b/frontend/src/components/SimulationStatusBadge.tsx
@@ -7,12 +7,13 @@ const LABELS: Record<SimulationStatus, string> = {
   done: 'Done',
 };
 
-// pending=fog, in_progress=primary-soft, review_required=bloom-coral, done=storm-deep
+// Fixed colors — badge backgrounds are decorative/semantic, not themeable.
+// text-white is hardcoded (not text-canvas) so dark mode doesn't invert it to near-black.
 const STYLES: Record<SimulationStatus, string> = {
   pending: 'bg-fog text-charcoal border border-hairline',
   in_progress: 'bg-primary-soft text-primary-deep',
-  review_required: 'bg-bloom-coral text-canvas',
-  done: 'bg-storm-deep text-canvas',
+  review_required: 'bg-bloom-coral text-white',
+  done: 'bg-storm-deep text-white',
 };
 
 export function SimulationStatusBadge({ status }: { status: SimulationStatus }): JSX.Element {
diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
index ca9c2e0..74290f0 100644
--- a/frontend/src/components/StatusBadge.tsx
+++ b/frontend/src/components/StatusBadge.tsx
@@ -10,7 +10,7 @@ const STYLES: Record<EngagementStatus, string> = {
   // Outlined ink for planned (neutral), filled primary for active (engagement live),
   // outlined steel for closed (muted). Stays within DESIGN.md palette.
   planned: 'bg-canvas text-ink border border-ink',
-  active: 'bg-primary text-ink-on',
+  active: 'bg-primary text-white',
   closed: 'bg-cloud text-graphite border border-hairline',
 };
 
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 3f0041f..0e267b8 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -15,10 +15,11 @@ export function ToastViewport(): JSX.Element {
       {toasts.map((t) => {
         const isError = t.kind === 'error';
         const isSuccess = t.kind === 'success';
+        // Fixed colors: toasts don't theme (error=dark slab, success=primary blue)
         const surface = isError
-          ? 'bg-ink text-ink-on'
+          ? 'bg-slab text-slab-text'
           : isSuccess
-            ? 'bg-primary text-ink-on'
+            ? 'bg-primary text-white'
             : 'bg-canvas text-ink border border-hairline';
         return (
           <div
diff --git a/frontend/src/pages/UsersAdminPage.tsx b/frontend/src/pages/UsersAdminPage.tsx
index 343aad7..4a1a750 100644
--- a/frontend/src/pages/UsersAdminPage.tsx
+++ b/frontend/src/pages/UsersAdminPage.tsx
@@ -110,7 +110,11 @@ export function UsersAdminPage(): JSX.Element {
 
       <section className="card-product flex flex-col gap-md">
         <h2 className="text-[20px] font-medium">Create account</h2>
-        <form onSubmit={onCreate} className="grid grid-cols-1 md:grid-cols-4 gap-md items-end">
+        {/*
+          items-start so each cell top-aligns; the button is wrapped in a flex column
+          that pushes it to align with the input row (label + 4px gap = ~22px offset).
+        */}
+        <form onSubmit={onCreate} className="grid grid-cols-1 md:grid-cols-4 gap-md items-start">
           <FormField label="Username" htmlFor="new-username" required>
             <TextInput
               id="new-username"
@@ -137,7 +141,9 @@ export function UsersAdminPage(): JSX.Element {
               options={ROLE_OPTIONS}
             />
           </FormField>
-          <div>
+          {/* Button column: spacer matches label row height so input + button baselines align */}
+          <div className="flex flex-col gap-xs">
+            <div className="h-[22px]" aria-hidden="true" />
             <button type="submit" className="btn-primary w-full" disabled={createMutation.isPending}>
               {createMutation.isPending ? 'Creating…' : 'Create'}
             </button>
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index c06f5a2..504c9aa 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -67,6 +67,7 @@
    * DESIGN.md component recipes.
    * Buttons stay sharp (rounded-md = 4px); cards stay soft (rounded-xl = 16px).
    */
+
   .btn-primary {
     @apply inline-flex items-center justify-center gap-xs bg-primary text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
   }
@@ -77,11 +78,13 @@
     @apply bg-steel cursor-not-allowed;
   }
 
+  /* btn-ink uses fixed dark slab so it doesn't invert in dark mode */
   .btn-ink {
-    @apply inline-flex items-center justify-center gap-xs bg-ink text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
+    @apply inline-flex items-center justify-center gap-xs text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
+    background-color: #111827;
   }
   .btn-ink:hover {
-    @apply bg-ink-soft;
+    background-color: #1f2937;
   }
   .btn-ink:disabled {
     @apply bg-steel cursor-not-allowed;
@@ -115,6 +118,14 @@
   .card-product {
     @apply bg-canvas rounded-xl p-xl shadow-soft-lift;
   }
+  .dark .card-product {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
+  }
+
+  /* Fixed-color modal backdrop — must not use themed ink (inverts in dark mode) */
+  .modal-backdrop {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
 
   .badge-pill-ink {
     @apply inline-flex items-center bg-ink text-white rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 947e025..2fee123 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -34,6 +34,10 @@ const config: Config = {
         },
         charcoal: 'var(--color-charcoal)',
         graphite: 'var(--color-graphite)',
+        // Fixed dark slab — never inverts in dark mode (utility strip, footer, dark bands)
+        slab: '#111827',
+        'slab-text': '#f9fafb',
+        'slab-muted': '#6b7280',
         // Semantic / decorative — fixed (not themeable)
         bloom: {
           coral: '#ff5050',
@@ -91,6 +95,8 @@ const config: Config = {
       boxShadow: {
         'soft-lift': '0 2px 8px rgba(26, 26, 26, 0.08)',
         floating: '0 8px 24px rgba(26, 26, 26, 0.12)',
+        'soft-lift-dark': '0 2px 8px rgba(0, 0, 0, 0.32)',
+        'floating-dark': '0 8px 24px rgba(0, 0, 0, 0.48)',
       },
       maxWidth: {
         page: '1366px',
diff --git a/frontend/tests/MitreMatrixModal.test.tsx b/frontend/tests/MitreMatrixModal.test.tsx
index 937caaf..6d8a851 100644
--- a/frontend/tests/MitreMatrixModal.test.tsx
+++ b/frontend/tests/MitreMatrixModal.test.tsx
@@ -306,7 +306,7 @@ describe('MitreMatrixModal', () => {
       />,
     );
 
-    const backdrop = document.querySelector('.bg-ink\\/60') as HTMLElement;
+    const backdrop = document.querySelector('.modal-backdrop') as HTMLElement;
     if (backdrop) await user.click(backdrop);
 
     expect(onCancel).toHaveBeenCalled();