lelii
/
humainflow-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(styles): introduce shared design tokens, migrate modal-shell onto them 

The dialog/modal CSS across the app hardcodes the same handful of
values (border-radius, box-shadow, surface/border/muted-text colors,
z-index) independently in each component, with several components
already drifting to slightly different values for the same intent.

Add a small set of :root custom properties in styles.css (radius,
shadow, surface/border/text colors, spacing scale, modal z-index
ladder) and migrate modal-shell.css — the shared shell already used
by three dialogs — onto them first, as the lowest-risk starting
point. Values are unchanged, only their source moved to tokens, so
this is a no-op visually: verified via the existing test suite
(232/232) and a live browser check confirming computed values are
unchanged and the editor/dashboard render identically.

Follow-up: retrofit confirm-dialog, node-settings-dialog,
human-interaction-dialog and subflow-preview-dialog onto the same
tokens, then reconcile node CSS (generic-node/container-node).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Lucio Lelii 2026-07-21 15:07:18 +02:00
parent 897f57808e
commit fcb8c0957a
2 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/shared/modal-shell/modal-shell.css
View File

@ -1,6 +1,6 @@
.modal-shell__backdrop { background: rgb(0 0 0 / .5); inset: 0; position: fixed; z-index: 10020; }
.modal-shell { background: #fff; border: 1px solid #cbd5e1; border-radius: 1rem; box-shadow: 0 25px 50px rgb(15 23 42 / .25); display: flex; flex-direction: column; left: 50%; max-height: min(88vh, 800px); max-width: var(--modal-shell-max-width, 680px); position: fixed; top: 50%; transform: translate(-50%, -50%); width: min(94vw, var(--modal-shell-max-width, 680px)); z-index: 10021; }
header { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; }
.modal-shell__backdrop { background: rgb(0 0 0 / .5); inset: 0; position: fixed; z-index: var(--z-modal-backdrop); }
.modal-shell { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; left: 50%; max-height: min(88vh, 800px); max-width: var(--modal-shell-max-width, 680px); position: fixed; top: 50%; transform: translate(-50%, -50%); width: min(94vw, var(--modal-shell-max-width, 680px)); z-index: var(--z-modal); }
header { align-items: center; border-bottom: 1px solid var(--color-divider); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; }
header h3, header p { margin: 0; }
header p { color: #64748b; font-size: .85rem; }
header p { color: var(--color-text-muted); font-size: .85rem; }
.modal-shell__content { display: grid; gap: .9rem; overflow: auto; padding: 1.25rem; }

24
src/styles.css
View File

@ -43,6 +43,30 @@
'Noto Color Emoji';
}
/* ── Design tokens (dialogs & modals) ─────────────────────────────
* Shared across modal-shell and (progressively) the other dialog
* components, so a single value change stays consistent everywhere
* instead of being copied per-component.
* ─────────────────────────────────────────────────────────────── */
:root {
--radius-modal: 1rem;
--shadow-modal: 0 25px 50px rgb(15 23 42 / 25%);
--color-surface: #ffffff;
--color-border: #cbd5e1;
--color-divider: #e2e8f0;
--color-text-body: #0f172a;
--color-text-muted: #64748b;
--color-accent: #2563eb;
--color-danger: #dc2626;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--z-modal-backdrop: 10020;
--z-modal: 10021;
}
/* ── Semantic surface colours (hard-coded) ──────────────────────
* #0f172a slate-900 — body text, modal text
* #1e293b slate-800 — param text