knacky/mimic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): post-design-review — slab token split + badge contrast + modal backdrop + dark shadows

Browse Source 
- 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>
This commit is contained in:
Knacky
2026-05-27 20:19:16 +02:00
parent f5ea9d16af
commit 892692f3b8
10 changed files with 46 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/styles/index.css
View File

@@ -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;