From 8ff3fb58e902f700be2aa66ae4f093f4d93a1f37 Mon Sep 17 00:00:00 2001 From: Tomasz Zajac Date: Fri, 25 Sep 2026 19:55:57 +0200 Subject: [PATCH] feat(hub): emerald palette to set the Hub apart from radical.tools Override the index.css tokens (background, panels, borders, muted text, accent) in hub.css, which only hub.html loads, so Studio keeps its blue. Logo and hero gradients mix the accent with cyan instead of violet. Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 3 +++ src/renderer/src/hub/hub.css | 43 ++++++++++++++++++++++++++++++++++-- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f022f77..bb7abe9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Radical Forge: Mockups stage before C4 with batch wireframe generation, "Finish here" at every stage with a summary step, and a single footer action bar - Hub blueprints: per-actor screen flows (79 mockups in 19 flows) and named views — canvas: System context, Containers, Governance map, Mockups, technical flow, one per screen flow; wiki: Governance, Requirements; a per-mode view selector and `/cv/` deep links in the Hub; views are imported with the concept +### Changed +- Radical Hub uses its own emerald palette (accent, background, borders) in both themes so it reads apart from radical.tools; Studio keeps its blue + ### Fixed - Hub concept files' `views` were ignored by the viewer and on import - Importing from the Hub no longer stacks one "Imported …" notification per concept over the template-parameter form diff --git a/src/renderer/src/hub/hub.css b/src/renderer/src/hub/hub.css index acd6a3f..c4b43f6 100644 --- a/src/renderer/src/hub/hub.css +++ b/src/renderer/src/hub/hub.css @@ -2,6 +2,45 @@ /* Catalogue on the left, the studio's own toolbar / view / right panel on the right. Relies on the design tokens and component styles from index.css. */ +/* ═══ Hub palette — emerald, so the Hub reads apart from radical.tools ═══ */ +/* Overrides index.css tokens; this file is loaded only by hub.html, so Studio + keeps its blue. Both blocks repeat every token because :root here comes after + index.css's [data-theme="light"] and would otherwise win in light mode. */ +:root { + --bg-app: #101c1b; + --bg-panel: #172624; + --bg-toolbar: rgba(16, 28, 27, 0.78); + --bg-canvas: #0c1716; + --border-color: #243a37; + --border-color-strong: #33504c; + --text-secondary: #c6dcd7; + --text-muted: #93b0a9; + --accent: #10b981; + --accent-rgb: 16,185,129; + --accent-soft: rgba(16,185,129,0.12); + --accent-mix: #0891b2; + --minimap-mask: rgba(12,23,22,0.7); + --hint-bg: rgba(12,23,22,0.85); + --edge-label-bg:rgba(12,23,22,0.85); +} +[data-theme="light"] { + --bg-app: #f1f6f4; + --bg-panel: #ffffff; + --bg-toolbar: rgba(246, 250, 248, 0.78); + --bg-canvas: #eef4f1; + --border-color: #dbe6e1; + --border-color-strong: #bfd0c9; + --text-secondary: #41524d; + --text-muted: #64786f; + --accent: #059669; + --accent-rgb: 5,150,105; + --accent-soft: rgba(5,150,105,0.10); + --accent-mix: #0e7490; + --minimap-mask: rgba(241,246,244,0.7); + --hint-bg: rgba(241,246,244,0.92); + --edge-label-bg:rgba(255,255,255,0.92); +} + /* ═══ Shared site navigation — keep in sync with website/landing.css ════ */ .site-nav { position: sticky; top: 0; z-index: 20; @@ -23,7 +62,7 @@ width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #fff; font-weight: 800; font-size: 14px; - background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed)); + background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-mix))); box-shadow: var(--shadow-sm); } .site-nav-links { display: flex; align-items: center; gap: 6px; flex: 1; margin-left: 14px; } @@ -469,7 +508,7 @@ margin-bottom: 20px; } .hub-hero-title .accent { - background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed)); + background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-mix))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hub-hero-sub {