feat(centralui): dark-mode token layer + .sb-modal-backdrop in site.css (T34a)

2026-06-18 19:38:33 -04:00
parent b7f7fe935c
commit 7b41c2c202
1 changed files with 75 additions and 1 deletions
@@ -4,6 +4,19 @@
   the side-rail shell; this sheet carries only app-specific rules the kit does
   not provide. */

+/* ── App-level tokens (light defaults) ─────────────────────────────────────
+   --sb-backdrop: semi-transparent overlay used by DialogHost and ad-hoc
+   modal backdrops throughout the app. */
+:root {
+    --sb-backdrop: rgba(0, 0, 0, 0.4);
+}
+
+/* Reusable backdrop class — applied by DialogHost and standalone modal
+   backdrop divs so the overlay colour follows the active theme. */
+.sb-modal-backdrop {
+    background: var(--sb-backdrop);
+}
+
 #reconnect-modal {
    display: none;
    position: fixed;
@@ -19,7 +32,7 @@
    max-width: 400px;
    padding: 2rem;
    text-align: center;
-    background: var(--bs-white);
+    background: var(--card, #fff);
    border-radius: 0.5rem;
 }

@@ -35,3 +48,64 @@
 .modal-dialog.script-editor-modal .modal-content {
    height: 100%;
 }
+
+/* ── Dark-mode token overrides ───────────────────────────────────────────────
+   Activated when <html data-bs-theme="dark"> is set (T34b toggle task).
+   Loads after theme.css / layout.css so [data-bs-theme] specificity (0,1,0)
+   beats the theme's :root (0,0,1) at equal cascade layer. */
+[data-bs-theme="dark"] {
+    /* Surfaces & ink */
+    --paper:        #1b1d21;
+    --card:         #25282d;
+    --ink:          #e6e8ec;
+    --ink-soft:     #9aa0aa;
+    --ink-faint:    #6b727c;
+    --rule:         #33373e;
+    --rule-strong:  #3a3f46;
+
+    /* Accent — lightened for contrast on dark */
+    --accent:       #4d7fe8;
+    --accent-deep:  #7aa0ef;
+
+    /* Status — foregrounds unchanged (inherently visible on dark) */
+    --ok:           #40b856;
+    --warn:         #f0a030;
+    --bad:          #f05050;
+    --idle:         #7a8290;
+
+    /* Status — tinted backgrounds (dark surface tints) */
+    --ok-bg:        #1a2e1e;
+    --warn-bg:      #2e2210;
+    --bad-bg:       #2e1616;
+    --idle-bg:      #25282d;
+
+    /* Status — borders on dark tints */
+    --ok-border:        #2a5030;
+    --warn-border:      #4a3510;
+    --bad-border:       #4a2020;
+    --ok-border-soft:   #264a2c;
+    --warn-border-soft: #44300e;
+    --bad-border-soft:  #44201e;
+
+    /* Warning ink — brightened amber for dark contrast */
+    --warn-ink:      #d4891a;
+    --warn-ink-deep: #b8741a;
+
+    /* Info tint */
+    --info-bg:      #1a2240;
+    --info-border:  #2a3660;
+
+    /* Neutral surface washes */
+    --zebra-bg:     #202328;
+    --hover-bg:     #2a2e38;
+    --active-bg:    #1e2640;
+
+    /* Bootstrap bridge tokens */
+    --bs-body-bg:        var(--paper);
+    --bs-body-color:     var(--ink);
+    --bs-border-color:   var(--rule);
+    --bs-emphasis-color: var(--ink);
+
+    /* Backdrop — slightly darker overlay in dark mode */
+    --sb-backdrop: rgba(0, 0, 0, 0.6);
+}