From fcb8c0957a2e1fbf14c2e1cd9cfeb79ac65475d1 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Tue, 21 Jul 2026 15:07:18 +0200
Subject: [PATCH] refactor(styles): introduce shared design tokens, migrate
 modal-shell onto them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/app/shared/modal-shell/modal-shell.css |  8 ++++----
 src/styles.css                             | 24 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/modal-shell/modal-shell.css b/src/app/shared/modal-shell/modal-shell.css
index 506d2ff..e4e2ed4 100644
--- a/src/app/shared/modal-shell/modal-shell.css
+++ b/src/app/shared/modal-shell/modal-shell.css
@@ -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; }
diff --git a/src/styles.css b/src/styles.css
index 04b8c56..6274f8c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -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