gini-toolkit 6.0.1.dev0__py3-none-any.whl

gini/ui/theme/icons.py

@@ -0,0 +1,145 @@
+"""License-safe flat line-icon set, recolored per theme/category and rendered to QIcon.
+
+Icons are hand-authored single-color SVG line glyphs (our own work, no third-party
+licensing) drawn on a 24x24 grid. They take their color from the active theme, so the
+same glyph reads correctly on dark, light, and brand themes. Rendering goes through
+QSvgRenderer at the target device-pixel ratio for crisp output on HiDPI displays.
+"""
+from __future__ import annotations
+
+from PySide6.QtCore import QByteArray, QRectF, Qt
+from PySide6.QtGui import QColor, QIcon, QPainter, QPixmap
+
+try:
+    from PySide6.QtSvg import QSvgRenderer
+    _HAVE_SVG = True
+except Exception:  # pragma: no cover
+    _HAVE_SVG = False
+
+
+# inner SVG body for each glyph (stroke-based unless listed in _FILLED)
+_BODY: dict[str, str] = {
+    # --- networking ---
+    "router": '<rect x="2.5" y="9" width="19" height="9" rx="2"/><path d="M6.5 9V6M12 9V6M17.5 9V6"/><path d="M6.5 13.5h.01M10 13.5h.01M13.5 13.5h.01"/>',
+    "switch": '<rect x="2.5" y="8" width="19" height="8" rx="2"/><path d="M6 16v2.5M10 16v2.5M14 16v2.5M18 16v2.5M6 8V5.5M18 8V5.5"/>',
+    "hub": '<circle cx="12" cy="12" r="3"/><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/>',
+    "host": '<rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/>',
+    "firewall": '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9.3h18M3 14.6h18M9 4v5.3M15 9.3v5.3M9 14.6V20"/>',
+    "wifi": '<path d="M5 12.5a10 10 0 0 1 14 0"/><path d="M8 15.5a6 6 0 0 1 8 0"/><path d="M11 18.4a1.6 1.6 0 0 1 2 0"/>',
+    "cloud": '<path d="M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.4A3.5 3.5 0 0 1 18 18z"/>',
+    # GINI32: a small board with a radiating antenna — a real chip, not a cloud
+    "gini32": '<rect x="3" y="10" width="11" height="9" rx="1.5"/>'
+              '<path d="M6 19v2M11 19v2M6 10V8.5M11 10V8.5"/>'
+              '<path d="M17 9.5a4 4 0 0 1 0 5M19.5 7a7 7 0 0 1 0 10"/>',
+    # --- sdn ---
+    "ovs": '<rect x="2.5" y="9" width="19" height="7" rx="2"/><path d="M12 3v6"/><path d="M7 20l5-3 5 3"/>',
+    "controller": '<rect x="4" y="4" width="16" height="16" rx="3"/><circle cx="12" cy="11" r="2.5"/><path d="M12 13.5V17M9.5 11H7M17 11h-2.5"/>',
+    # --- containers & k8s ---
+    "container": '<path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z"/><path d="M3 7.5 12 12l9-4.5M12 12v9"/>',
+    "pod": '<path d="M12 2.5l8.2 4.7v9.6L12 21.5 3.8 16.8V7.2z"/><circle cx="12" cy="12" r="3"/>',
+    "k8s_node": '<rect x="3" y="6" width="18" height="12" rx="2"/><circle cx="12" cy="12" r="2.5"/><path d="M7 4v2M17 4v2M7 18v2M17 18v2"/>',
+    "k8s_cluster": '<path d="M12 2.5l8.2 4.7v9.6L12 21.5 3.8 16.8V7.2z"/><path d="M12 8v8M8.5 10v4M15.5 10v4"/>',
+    "registry": '<rect x="3" y="9" width="18" height="11" rx="2"/><path d="M7 9V5h10v4"/><path d="M8 14h8"/>',
+    # --- cloud networking ---
+    "vpc": '<rect x="2.5" y="4" width="19" height="16" rx="3" stroke-dasharray="4 3"/><path d="M7 12h10M12 8v8"/>',
+    "cloud_subnet": '<rect x="3.5" y="6" width="17" height="12" rx="2" stroke-dasharray="3 3"/><path d="M8 12h8"/>',
+    "security_group": '<path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9.3 12l1.8 1.8L15 10"/>',
+    "gateway": '<path d="M3 12h18"/><path d="M8 7l-4 5 4 5M16 7l4 5-4 5"/>',
+    "load_balancer": '<circle cx="12" cy="5" r="2.3"/><circle cx="5" cy="19" r="2.3"/><circle cx="12" cy="19" r="2.3"/><circle cx="19" cy="19" r="2.3"/><path d="M12 7.3v3M12 10.3l-7 6.4M12 10.3v6.4M12 10.3l7 6.4"/>',
+    # --- compute ---
+    "instance": '<rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 3v3M12 3v3M15 3v3M9 18v3M12 18v3M15 18v3M3 9h3M3 12h3M3 15h3M18 9h3M18 12h3M18 15h3"/>',
+    "instance_group": '<rect x="7" y="3.5" width="13" height="13" rx="2"/><path d="M4 7.5v13h13"/>',
+    "region": '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.4 4 5.6 4 9s-1.4 6.6-4 9c-2.6-2.4-4-5.6-4-9s1.4-6.6 4-9z"/>',
+    # --- storage ---
+    "object_store": '<path d="M5 7h14l-1.4 12.2a1 1 0 0 1-1 .9H7.4a1 1 0 0 1-1-.9z"/><path d="M3.5 7h17"/>',
+    "block_volume": '<rect x="4" y="6" width="16" height="12" rx="2"/><path d="M8 6v12M4 12h4"/>',
+    "database": '<ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6"/><path d="M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3"/>',
+    # --- serverless ---
+    "function": '<path d="M6 20l6-8M18 20 9 4H6"/>',
+    "api_gateway": '<rect x="3" y="6" width="18" height="12" rx="2"/><path d="M9 9l-2 3 2 3M15 9l2 3-2 3"/>',
+    "queue": '<rect x="3" y="7.5" width="4" height="9" rx="1"/><rect x="10" y="7.5" width="4" height="9" rx="1"/><rect x="17" y="7.5" width="4" height="9" rx="1"/>',
+    # --- edge & traffic ---
+    "proxy": '<path d="M3 12h7M21 12h-7"/><rect x="9" y="8" width="6" height="8" rx="1.5"/><path d="M5 9l-2 3 2 3M19 9l2 3-2 3"/>',
+    "web_app": '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18M6 7h.01M8.5 7h.01"/>',
+    # --- streaming & messaging ---
+    "stream": '<path d="M3 8c3 0 3-2 6-2s3 2 6 2 3-2 6-2M3 12c3 0 3-2 6-2s3 2 6 2 3-2 6-2M3 16c3 0 3-2 6-2s3 2 6 2 3-2 6-2"/>',
+    "messaging": '<path d="M4 5h16v11H8l-4 3z"/><path d="M8 9h8M8 12h5"/>',
+    # --- cache & nosql ---
+    "cache": '<rect x="3.5" y="5" width="17" height="14" rx="2"/><path d="M11 8l-2.5 4H12l-2 4"/>',
+    "nosql": '<path d="M12 3c4 4 4 14 0 18-4-4-4-14 0-18z"/><path d="M5.5 8.5c4 2 9 2 13 0M5.5 15.5c4-2 9-2 13 0"/>',
+    # --- observability ---
+    "metrics": '<path d="M3 20V4M3 20h18"/><path d="M7 16v-3M11.5 16V9M16 16v-5M20.5 16V7"/>',
+    "dashboard": '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 15l3-4 3 2 4-6"/>',
+    "tracing": '<circle cx="5" cy="7" r="2"/><circle cx="12" cy="17" r="2"/><circle cx="19" cy="9" r="2"/><path d="M6.6 8.4l4 7M13.6 15.8l4-5.4"/>',
+    # --- workload & testing ---
+    "load_generator": '<path d="M12 13a8 8 0 0 1 8-8M12 13l5-5"/><path d="M4 19a8 8 0 0 1 2.3-12.7M20 19a8 8 0 0 0-2.3-12.7" stroke-dasharray="2 2.5"/>',
+    # --- UI glyphs ---
+    "new": '<path d="M12 5v14M5 12h14"/>',
+    "open": '<path d="M3 7h6l2 2h10v9a2 2 0 0 1-2 2H3z"/>',
+    "save": '<path d="M5 3h11l3 3v15H5z"/><path d="M8 3v5h7M8 13h8v8H8z"/>',
+    "compile": '<path d="M9 6l-5 6 5 6M15 6l5 6-5 6"/>',
+    "layout": '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
+    "search": '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/>',
+    "plus": '<path d="M12 5v14M5 12h14"/>',
+    "minus": '<path d="M5 12h14"/>',
+    "palette": '<circle cx="12" cy="12" r="9"/><circle cx="8.5" cy="9.5" r="1.1"/><circle cx="12" cy="8" r="1.1"/><circle cx="15.5" cy="9.5" r="1.1"/>',
+    "robot": '<rect x="4" y="8" width="16" height="11" rx="3"/><path d="M12 8V4M9 13h.01M15 13h.01M9.5 16h5M2 12v3M22 12v3"/>',
+    "send": '<path d="M4 12l16-7-7 16-2-7z"/>',
+    "grid": '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>',
+    "trash": '<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/>',
+    "link": '<path d="M9 15l6-6M8.5 8H6a4 4 0 0 0 0 8h2.5M15.5 16H18a4 4 0 0 0 0-8h-2.5"/>',
+    "elbow": '<path d="M5 5v6a3 3 0 0 0 3 3h6a3 3 0 0 1 3 3v2"/><circle cx="5" cy="5" r="1.9"/><circle cx="20" cy="19" r="1.9"/>',
+    "pencil": '<path d="M4 20.5h4L19 9.5a2 2 0 0 0 0-2.8l-1.7-1.7a2 2 0 0 0-2.8 0L3.5 16.5z"/><path d="M13.5 6.5l4 4"/>',
+    "chevron_right": '<path d="M9 6l6 6-6 6"/>',
+    "chevron_down": '<path d="M6 9l6 6 6-6"/>',
+}
+
+_FILLED = {"play", "stop", "dot"}
+_BODY["play"] = '<path d="M8 5v14l11-7z"/>'
+_BODY["stop"] = '<rect x="6" y="6" width="12" height="12" rx="2"/>'
+_BODY["dot"] = '<circle cx="12" cy="12" r="6"/>'
+
+
+def _svg(name: str, color: str, stroke_width: float) -> str:
+    body = _BODY.get(name, _BODY["host"])
+    if name in _FILLED:
+        return (f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" '
+                f'fill="{color}" stroke="none">{body}</svg>')
+    return (f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" '
+            f'stroke="{color}" stroke-width="{stroke_width}" stroke-linecap="round" '
+            f'stroke-linejoin="round">{body}</svg>')
+
+
+_cache: dict[tuple, QIcon] = {}
+
+
+def render_pixmap(name: str, color: str, size: int = 22, stroke_width: float = 1.7,
+                  ratio: float = 2.0) -> QPixmap:
+    px = QPixmap(int(size * ratio), int(size * ratio))
+    px.setDevicePixelRatio(ratio)
+    px.fill(Qt.transparent)
+    if _HAVE_SVG:
+        renderer = QSvgRenderer(QByteArray(_svg(name, color, stroke_width).encode()))
+        p = QPainter(px)
+        p.setRenderHint(QPainter.Antialiasing, True)
+        renderer.render(p, QRectF(0, 0, size, size))
+        p.end()
+    else:  # pragma: no cover - fallback shape
+        p = QPainter(px)
+        p.setRenderHint(QPainter.Antialiasing, True)
+        p.setBrush(QColor(color))
+        p.setPen(Qt.NoPen)
+        p.drawRoundedRect(QRectF(3, 3, size - 6, size - 6), 5, 5)
+        p.end()
+    return px
+
+
+def icon(name: str, color: str, size: int = 22, stroke_width: float = 1.7) -> QIcon:
+    key = (name, color, size, round(stroke_width, 2))
+    if key not in _cache:
+        _cache[key] = QIcon(render_pixmap(name, color, size, stroke_width))
+    return _cache[key]
+
+
+def clear_cache() -> None:
+    _cache.clear()

gini/ui/theme/manager.py

@@ -0,0 +1,291 @@
+"""Token -> QSS generator and the ThemeManager that applies it app-wide."""
+from __future__ import annotations
+
+from PySide6.QtCore import QObject, Signal
+from PySide6.QtGui import QColor, QPalette
+from PySide6.QtWidgets import QApplication
+
+from .tokens import Theme, get_theme
+
+
+def _qc(spec: str) -> QColor:
+    if spec.startswith("rgba("):
+        n = [int(float(x)) for x in spec[5:-1].split(",")]
+        return QColor(n[0], n[1], n[2], n[3] if len(n) > 3 else 255)
+    return QColor(spec)
+
+
+_FONT_STACK: str | None = None
+
+
+def _ui_font_stack() -> str:
+    """A font-family list whose FIRST entry is actually installed on this machine.
+
+    Leading with a present family avoids Qt's slow missing-family alias lookup (the
+    'Populating font family aliases … Replace uses of missing font family "Inter"'
+    warning + delay seen on macOS, which lacks Inter). Inter is still used when present.
+    """
+    global _FONT_STACK
+    if _FONT_STACK is not None:
+        return _FONT_STACK
+    prefs = ["Inter", "SF Pro Text", "Helvetica Neue", "Segoe UI", "Roboto", "Arial"]
+    try:
+        from PySide6.QtGui import QFontDatabase
+        avail = set(QFontDatabase.families())
+        present = [f for f in prefs if f in avail]
+    except Exception:
+        present = []
+    present = present[:4] or ["Helvetica Neue"]
+    _FONT_STACK = ", ".join(f'"{f}"' for f in present) + ", sans-serif"
+    return _FONT_STACK
+
+
+def build_palette(t: Theme) -> QPalette:
+    """A full palette so even unstyled surfaces (scroll viewports, tab panes,
+    plain QWidgets) follow the theme instead of falling back to system light."""
+    p = QPalette()
+    white = QColor("#ffffff")
+    p.setColor(QPalette.Window, _qc(t.bg))
+    p.setColor(QPalette.WindowText, _qc(t.text))
+    p.setColor(QPalette.Base, _qc(t.bg3))
+    p.setColor(QPalette.AlternateBase, _qc(t.bg2))
+    p.setColor(QPalette.Text, _qc(t.text))
+    p.setColor(QPalette.Button, _qc(t.panel2))
+    p.setColor(QPalette.ButtonText, _qc(t.text))
+    p.setColor(QPalette.ToolTipBase, _qc(t.panel2))
+    p.setColor(QPalette.ToolTipText, _qc(t.text))
+    p.setColor(QPalette.PlaceholderText, _qc(t.faint))
+    p.setColor(QPalette.Highlight, _qc(t.accent))
+    p.setColor(QPalette.HighlightedText, white)
+    p.setColor(QPalette.BrightText, white)
+    p.setColor(QPalette.Link, _qc(t.accent))
+    for role in (QPalette.Text, QPalette.WindowText, QPalette.ButtonText):
+        p.setColor(QPalette.Disabled, role, _qc(t.faint))
+    return p
+
+
+# UI text-size presets (Settings → Appearance). A single scale factor multiplies the base font
+# sizes in the stylesheet, so the whole UI grows/shrinks together.
+FONT_SCALES = {"Normal": 1.0, "Large": 1.16, "Extra Large": 1.32}
+
+
+def scale_for(label: str) -> float:
+    return FONT_SCALES.get((label or "Normal").strip(), 1.0)
+
+
+# The active UI text scale, published module-wide so custom-painted widgets (canvas cards, the
+# dashboard, palette headers, toolbar pills) that set their own point sizes can honour the setting.
+_ACTIVE_SCALE = 1.0
+
+
+def ui_scale() -> float:
+    return _ACTIVE_SCALE
+
+
+def sp(base_pt: float) -> int:
+    """A point size scaled by the active UI text-size setting (never below 1)."""
+    return max(1, round(base_pt * _ACTIVE_SCALE))
+
+
+import re as _re
+
+_FS_RE = _re.compile(r"(font-size:\s*)(\d+)px")
+
+
+def scale_css(css: str) -> str:
+    """Scale every `font-size: Npx` in a stylesheet by the active UI text size, leaving all other
+    px (padding, borders, radii) untouched. Lets widgets that set their own stylesheet honour the
+    Settings → Text size choice without hand-editing each size."""
+    if abs(_ACTIVE_SCALE - 1.0) < 1e-3:
+        return css
+    return _FS_RE.sub(lambda m: f"{m.group(1)}{max(1, round(int(m.group(2)) * _ACTIVE_SCALE))}px", css)
+
+
+def build_qss(t: Theme, scale: float = 1.0) -> str:
+    base = round(13 * scale)          # the app-wide default size
+    small = round(11 * scale)         # the smaller section-header size
+    return f"""
+* {{
+    font-family: {_ui_font_stack()};
+    font-size: {base}px;
+    color: {t.text};
+    outline: none;
+}}
+QMainWindow, QDialog {{ background: {t.bg}; }}
+QWidget#Sidebar, QWidget#Inspector, QWidget#Console {{ background: {t.panel}; }}
+QFrame#Card {{ background: {t.panel2}; border: 1px solid {t.line}; border-radius: 10px; }}
+
+QToolBar {{
+    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 {t.panel}, stop:1 {t.panel2});
+    border: none; border-bottom: 1px solid {t.line2};
+    spacing: 4px; padding: 7px 12px;
+}}
+QToolBar::separator {{ background: {t.line}; width: 1px; margin: 6px 8px; border-radius: 1px; }}
+
+QToolButton, QPushButton {{
+    background: transparent; color: {t.muted};
+    border: 1px solid transparent; border-radius: 8px; padding: 7px 10px;
+    font-size: {base}px;                 /* explicit so buttons follow the text-size setting */
+}}
+QToolButton:hover, QPushButton:hover {{ background: {t.bg3}; color: {t.text}; border-color: {t.line2}; }}
+QToolButton:pressed, QPushButton:pressed {{ background: {t.bg2}; }}
+QToolButton:checked {{ background: {t.accent_soft}; color: {t.accent}; border-color: {t.accent}; }}
+
+/* segmented toolbar clusters — File / Tools / Zoom sit in rounded inset trays */
+QFrame#TbGroup {{ background: {t.bg2}; border: 1px solid {t.line}; border-radius: 10px; }}
+QFrame#TbGroup QToolButton {{
+    background: transparent; color: {t.muted};
+    border: 1px solid transparent; border-radius: 7px; padding: 6px 8px;
+}}
+QFrame#TbGroup QToolButton:hover {{ background: {t.panel}; color: {t.text}; border-color: {t.line2}; }}
+QFrame#TbGroup QToolButton:pressed {{ background: {t.bg3}; }}
+QFrame#TbGroup QToolButton:checked {{
+    background: {t.accent_soft}; color: {t.accent}; border-color: {t.accent}; }}
+
+/* Run/Stop is now a single custom-painted circular RunButton (ui/run_button.py). */
+
+/* Project navigator — a centred chip in the toolbar that names the current project. */
+QToolButton#NavBtn {{
+    background: {t.panel2}; color: {t.text}; font-weight: 600;
+    border: 1px solid {t.line}; border-radius: 9px;
+    padding: 5px 14px 5px 10px;
+}}
+QToolButton#NavBtn:hover {{ border-color: {t.accent}; color: {t.accent}; }}
+QToolButton#NavBtn::menu-indicator {{ image: none; width: 0; }}
+
+QPushButton#Primary {{ background: {t.success}; color: #ffffff; border: none; font-weight: 500; }}
+QPushButton#Primary:hover {{ background: {t.success}; }}
+QPushButton#Danger {{ color: {t.danger}; }}
+QPushButton#Accent {{ background: {t.accent}; color: #ffffff; border: none; font-weight: 500; }}
+
+/* GINI mode buttons — clear pressed/unpressed (toggle) state with an accent glow */
+QPushButton#ModeBtn {{
+    background: {t.bg3}; color: {t.muted};
+    border: 1px solid {t.line}; border-radius: 13px;
+    padding: 5px 12px; font-weight: 500; font-size: {base}px;
+}}
+QPushButton#ModeBtn:hover {{ color: {t.text}; border-color: {t.accent}; }}
+QPushButton#ModeBtn:checked {{
+    background: {t.accent_soft}; color: {t.accent};
+    border: 1px solid {t.accent}; font-weight: 600;
+}}
+QPushButton#WizardBtn:checked {{
+    background: {t.accent_soft}; color: {t.accent2}; border: 1px solid {t.accent2};
+}}
+
+/* small toggle chips — requirement chips in the Wizard, follow-up suggestions */
+QPushButton#Chip {{
+    background: {t.bg3}; color: {t.muted};
+    border: 1px solid {t.line}; border-radius: 12px;
+    padding: 4px 11px; font-weight: 500; font-size: {base}px;
+}}
+QPushButton#Chip:hover {{ color: {t.text}; border-color: {t.accent}; }}
+QPushButton#Chip:checked {{
+    background: {t.accent_soft}; color: {t.accent};
+    border: 1px solid {t.accent}; font-weight: 600;
+}}
+
+/* Wizard goal banner — the "🎯 Building: …" objective card */
+QWidget#GoalBanner {{
+    background: {t.accent_soft}; border: 1.4px solid {t.accent}; border-radius: 11px;
+}}
+
+QLineEdit, QPlainTextEdit, QTextEdit, QComboBox, QSpinBox {{
+    background: {t.bg3}; color: {t.text};
+    border: 1px solid {t.line}; border-radius: 7px; padding: 6px 9px;
+    selection-background-color: {t.accent};
+}}
+QLineEdit:focus, QPlainTextEdit:focus, QTextEdit:focus, QComboBox:focus {{ border-color: {t.accent}; }}
+QComboBox::drop-down {{ border: none; width: 18px; }}
+
+QLabel#PanelHead {{ color: {t.faint}; font-size: {small}px; font-weight: 600;
+                    letter-spacing: 1px; text-transform: uppercase; }}
+QLabel#Muted {{ color: {t.muted}; }}
+QLabel#Faint {{ color: {t.faint}; }}
+
+QListWidget, QTreeWidget, QTreeView, QListView {{
+    background: transparent; border: none; }}
+QListWidget::item, QTreeWidget::item {{
+    border-radius: 7px; padding: 5px 6px; margin: 1px 2px; color: {t.text}; }}
+QListWidget::item:hover, QTreeWidget::item:hover {{ background: {t.bg3}; }}
+QListWidget::item:selected, QTreeWidget::item:selected {{
+    background: {t.accent_soft}; color: {t.text}; }}
+QHeaderView::section {{ background: transparent; color: {t.faint};
+    border: none; border-bottom: 1px solid {t.line}; padding: 4px 6px; }}
+
+QScrollArea {{ background: transparent; border: none; }}
+QScrollArea > QWidget > QWidget {{ background: transparent; }}
+QAbstractScrollArea {{ background: transparent; }}
+QTabWidget::pane {{ background: {t.panel}; border: none; border-top: 1px solid {t.line}; }}
+QTabWidget > QWidget {{ background: {t.panel}; }}
+QTabBar::tab {{ background: transparent; color: {t.muted}; padding: 7px 12px;
+    border: none; border-bottom: 2px solid transparent; }}
+QTabBar::tab:selected {{ color: {t.text}; border-bottom-color: {t.accent}; }}
+QTabBar::tab:hover {{ color: {t.text}; }}
+
+QDockWidget {{ titlebar-close-icon: none; titlebar-normal-icon: none; }}
+QDockWidget::title {{ background: {t.panel}; color: {t.faint};
+    padding: 8px 12px; border-bottom: 1px solid {t.line}; }}
+
+QMenuBar {{ background: {t.panel}; border-bottom: 1px solid {t.line}; padding: 3px 6px; }}
+QMenuBar::item {{ background: transparent; padding: 5px 10px; border-radius: 6px; color: {t.muted}; }}
+QMenuBar::item:selected {{ background: {t.bg3}; color: {t.text}; }}
+QMenu {{ background: {t.panel2}; border: 1px solid {t.line}; border-radius: 8px; padding: 5px; }}
+QMenu::item {{ padding: 6px 22px 6px 14px; border-radius: 6px; color: {t.text}; }}
+QMenu::item:selected {{ background: {t.accent_soft}; }}
+
+QStatusBar {{ background: {t.panel}; border-top: 1px solid {t.line}; color: {t.muted}; }}
+QStatusBar::item {{ border: none; }}
+
+QScrollBar:vertical {{ background: transparent; width: 10px; margin: 2px; }}
+QScrollBar::handle:vertical {{ background: {t.line2}; border-radius: 5px; min-height: 24px; }}
+QScrollBar::handle:vertical:hover {{ background: {t.muted}; }}
+QScrollBar:horizontal {{ background: transparent; height: 10px; margin: 2px; }}
+QScrollBar::handle:horizontal {{ background: {t.line2}; border-radius: 5px; min-width: 24px; }}
+QScrollBar::add-line, QScrollBar::sub-line {{ height: 0; width: 0; }}
+QScrollBar::add-page, QScrollBar::sub-page {{ background: transparent; }}
+QAbstractScrollArea::corner {{ background: {t.bg}; border: none; }}
+
+QToolTip {{ background: {t.panel2}; color: {t.text};
+    border: 1px solid {t.line}; border-radius: 6px; padding: 5px 8px; }}
+QSplitter::handle {{ background: {t.line}; }}
+"""
+
+
+class ThemeManager(QObject):
+    themeChanged = Signal(str)
+
+    def __init__(self, app: QApplication, name: str = "dark", font_scale: float = 1.0) -> None:
+        super().__init__()
+        self._app = app
+        self.theme: Theme = get_theme(name)
+        self.font_scale = font_scale or 1.0
+        # Fusion respects QPalette + QSS identically on macOS/Linux/Windows, so the
+        # dark theme reaches every widget (the native macOS style does not).
+        self._app.setStyle("Fusion")
+
+    def apply(self) -> None:
+        global _ACTIVE_SCALE
+        _ACTIVE_SCALE = self.font_scale          # publish for custom-painted widgets (canvas, etc.)
+        # Scale the app font too, so widgets that read the application font (and any not pinned by
+        # the stylesheet) grow with the setting, not just the QSS-styled ones.
+        f = self._app.font()
+        f.setPointSizeF(10.0 * self.font_scale)
+        self._app.setFont(f)
+        self._app.setPalette(build_palette(self.theme))
+        self._app.setStyleSheet(build_qss(self.theme, self.font_scale))
+
+    def set_theme(self, name: str) -> None:
+        self.theme = get_theme(name)
+        self.apply()
+        self.themeChanged.emit(self.theme.name)
+
+    def set_font_scale(self, scale: float) -> None:
+        """Change the UI text size live (Settings → Appearance)."""
+        if abs((scale or 1.0) - self.font_scale) < 1e-3:
+            return
+        self.font_scale = scale or 1.0
+        self.apply()
+        # nudge every theme-aware widget to re-render at the new size (palette headers, dashboard,
+        # canvas cards, pills all re-style / repaint on this signal).
+        self.themeChanged.emit(self.theme.name)

gini/ui/theme/tokens.py

@@ -0,0 +1,194 @@
+"""Themeable design tokens.
+
+A Theme is a flat bag of color tokens. The QSS generator and the custom-painted
+canvas both read from it, so re-theming the whole app is a matter of swapping one
+Theme object. New themes can be added by appending to THEMES — including ones
+loaded from JSON at runtime.
+"""
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+
+
+@dataclass(frozen=True)
+class Theme:
+    name: str
+    dark: bool
+    # surfaces
+    bg: str
+    bg2: str
+    bg3: str
+    panel: str
+    panel2: str
+    # borders
+    line: str
+    line2: str
+    # text
+    text: str
+    muted: str
+    faint: str
+    # primary accent
+    accent: str
+    accent2: str
+    accent_soft: str
+    # semantic
+    success: str
+    success_soft: str
+    warning: str
+    warning_soft: str
+    danger: str
+    danger_soft: str
+    # canvas
+    grid: str
+    # category accents (icon recolor + node accent), keyed by Accent.value
+    accents: dict[str, str] = field(default_factory=dict)
+    # fill for element cards ON the canvas — a lighter, theme-tinted surface so nodes
+    # pop off the background (empty = fall back to panel2, i.e. the dark themes' behaviour)
+    node: str = ""
+    # depth + motion
+    shadow: str = "rgba(0,0,0,120)"
+    elevation: int = 22          # node drop-shadow blur radius (deeper = more depth)
+    dur_fast: int = 120          # ms — hover/press
+    dur_base: int = 200          # ms — transitions
+
+    def accent_for(self, key: str) -> str:
+        return self.accents.get(key, self.accent)
+
+    def node_fill(self) -> str:
+        """The canvas element-card fill (see `node`)."""
+        return self.node or self.panel2
+
+
+_CATEGORY_DARK = {
+    "blue": "#4c8dff", "green": "#3fb950", "purple": "#a371f7", "teal": "#39c5cf",
+    "cyan": "#2dd4bf", "indigo": "#7c8cff", "amber": "#e3a008", "pink": "#f778ba",
+    "slate": "#8b98a8", "orange": "#f0883e", "red": "#f85149",
+}
+_CATEGORY_LIGHT = {
+    "blue": "#2f6fe0", "green": "#1a7f37", "purple": "#8250df", "teal": "#1b7c83",
+    "cyan": "#0e9384", "indigo": "#4f57d2", "amber": "#9a6700", "pink": "#bf3989",
+    "slate": "#57606a", "orange": "#bc4c00", "red": "#cf222e",
+}
+_CATEGORY_BRAND = {
+    "blue": "#5aa0ff", "green": "#46c98a", "purple": "#b78cff", "teal": "#43d6c4",
+    "cyan": "#34e0c8", "indigo": "#8aa0ff", "amber": "#f0b429", "pink": "#ff8ad0",
+    "slate": "#9fb0c8", "orange": "#ff9e4f", "red": "#ff6b66",
+}
+
+
+DARK = Theme(
+    name="Dark", dark=True,
+    bg="#0e1116", bg2="#151a21", bg3="#1b212b", panel="#11161d", panel2="#161c24",
+    line="#232b36", line2="#2d3744",
+    text="#e6edf3", muted="#9aa7b4", faint="#697682",
+    accent="#4c8dff", accent2="#2f6fe0", accent_soft="rgba(76,141,255,40)",
+    success="#3fb950", success_soft="rgba(63,185,80,38)",
+    warning="#d29922", warning_soft="rgba(210,153,34,38)",
+    danger="#f85149", danger_soft="rgba(248,81,73,38)",
+    grid="rgba(255,255,255,12)",
+    shadow="rgba(0,0,0,150)",
+    accents=_CATEGORY_DARK,
+)
+
+LIGHT = Theme(
+    name="Light", dark=False,
+    bg="#eef1f5", bg2="#e7ebf1", bg3="#dfe4ec", panel="#ffffff", panel2="#f6f8fb",
+    line="#d7dde6", line2="#c4ccd8",
+    text="#131a23", muted="#3f4b5a", faint="#5e6b7b",
+    accent="#2f6fe0", accent2="#2560c8", accent_soft="rgba(47,111,224,28)",
+    success="#1a7f37", success_soft="rgba(26,127,55,26)",
+    warning="#9a6700", warning_soft="rgba(154,103,0,26)",
+    danger="#cf222e", danger_soft="rgba(207,34,46,26)",
+    grid="rgba(20,30,50,16)",
+    shadow="rgba(60,80,120,50)",
+    node="#fdfeff",
+    accents=_CATEGORY_LIGHT,
+)
+
+BRAND = Theme(
+    name="GINI Brand", dark=True,
+    bg="#0b1020", bg2="#121833", bg3="#18204a", panel="#0e1428", panel2="#141c3a",
+    line="#23305c", line2="#2f3e74",
+    text="#eaf0ff", muted="#9fb0d6", faint="#6f80ad",
+    accent="#43d6c4", accent2="#2bb6a6", accent_soft="rgba(67,214,196,40)",
+    success="#46c98a", success_soft="rgba(70,201,138,38)",
+    warning="#f0b429", warning_soft="rgba(240,180,41,38)",
+    danger="#ff6b6b", danger_soft="rgba(255,107,107,38)",
+    grid="rgba(120,160,255,16)",
+    shadow="rgba(0,0,25,160)",
+    accents=_CATEGORY_BRAND,
+)
+
+HIGH_CONTRAST = Theme(
+    name="High Contrast", dark=True,
+    bg="#000000", bg2="#0a0a0a", bg3="#161616", panel="#000000", panel2="#0d0d0d",
+    line="#5a5a5a", line2="#7c7c7c",
+    text="#ffffff", muted="#d6d6d6", faint="#a6a6a6",
+    accent="#5aa3ff", accent2="#3a86ff", accent_soft="rgba(90,163,255,60)",
+    success="#3fe06a", success_soft="rgba(63,224,106,60)",
+    warning="#ffcc33", warning_soft="rgba(255,204,51,60)",
+    danger="#ff5a5a", danger_soft="rgba(255,90,90,60)",
+    grid="rgba(255,255,255,30)",
+    shadow="rgba(0,0,0,210)",
+    accents={"blue": "#5aa3ff", "green": "#3fe06a", "purple": "#c08cff",
+             "teal": "#3fe0d0", "cyan": "#3fe0c0", "indigo": "#9aa8ff",
+             "amber": "#ffcc33", "pink": "#ff7ad0", "slate": "#c8d0d8",
+             "orange": "#ff9e4f", "red": "#ff6b66"},
+)
+
+
+# --- light family: warmer/cooler tints of the Light theme ------------------- #
+SAND = Theme(
+    name="Sand", dark=False,
+    bg="#f4efe4", bg2="#ece5d6", bg3="#e3dac7", panel="#fdfaf3", panel2="#f4efe4",
+    line="#ddd2be", line2="#cabca3",
+    text="#2b2418", muted="#5d5240", faint="#7e715c",
+    accent="#b46e28", accent2="#985c1c", accent_soft="rgba(180,110,40,30)",
+    success="#4c7a2f", success_soft="rgba(76,122,47,26)",
+    warning="#9a6700", warning_soft="rgba(154,103,0,26)",
+    danger="#c0392b", danger_soft="rgba(192,57,43,26)",
+    grid="rgba(90,70,35,16)",
+    shadow="rgba(90,70,40,55)",
+    node="#fffdf6",
+    accents=_CATEGORY_LIGHT,
+)
+
+BLUE = Theme(
+    name="Blue", dark=False,
+    bg="#eef2f9", bg2="#e4ecf6", bg3="#d9e3f2", panel="#ffffff", panel2="#f3f7fc",
+    line="#d2ddec", line2="#becde2",
+    text="#111a2b", muted="#3c4a63", faint="#5b6a85",
+    accent="#2f6fe0", accent2="#2560c8", accent_soft="rgba(47,111,224,28)",
+    success="#1a7f37", success_soft="rgba(26,127,55,26)",
+    warning="#9a6700", warning_soft="rgba(154,103,0,26)",
+    danger="#cf222e", danger_soft="rgba(207,34,46,26)",
+    grid="rgba(30,60,120,16)",
+    shadow="rgba(40,70,130,55)",
+    node="#fafdff",
+    accents=_CATEGORY_LIGHT,
+)
+
+GREEN = Theme(
+    name="Green", dark=False,
+    bg="#eef4ee", bg2="#e4eee4", bg3="#d8e7d8", panel="#fbfdfb", panel2="#f0f7f0",
+    line="#d1e0d1", line2="#bcd0bc",
+    text="#14231a", muted="#3e5245", faint="#5d7163",
+    accent="#2e8b57", accent2="#237045", accent_soft="rgba(46,139,87,28)",
+    success="#1a7f37", success_soft="rgba(26,127,55,26)",
+    warning="#9a6700", warning_soft="rgba(154,103,0,26)",
+    danger="#cf222e", danger_soft="rgba(207,34,46,26)",
+    grid="rgba(30,90,50,16)",
+    shadow="rgba(40,90,60,50)",
+    node="#f9fefb",
+    accents=_CATEGORY_LIGHT,
+)
+
+
+THEMES: dict[str, Theme] = {t.name.lower(): t for t in
+                            (DARK, LIGHT, BRAND, HIGH_CONTRAST, SAND, BLUE, GREEN)}
+# friendly aliases
+THEMES["brand"] = BRAND
+
+
+def get_theme(name: str) -> Theme:
+    return THEMES.get(name.lower(), DARK)