/* ============================================================ GrapesJS chrome recoloured to the portal's Fluent2 palette. GrapesJS 0.21 drives its whole UI from --gjs-* variables; by deriving them from portal.css's --hb-* variables the editor follows the light/dark toggle (data-theme on ) without any JS. Only values that can't derive from a variable get an explicit dark override below. ============================================================ */ #hb-email-designer { /* Panels + text */ --gjs-primary-color: var(--hb-sidebar-bg); --gjs-main-color: var(--hb-sidebar-bg); --gjs-secondary-color: var(--hb-fg); --gjs-font-color: var(--hb-fg); --gjs-font-color-active: var(--hb-fg); /* Accent: selected tabs, component toolbar, badges, highlights */ --gjs-tertiary-color: var(--hb-accent); --gjs-quaternary-color: var(--hb-accent); --gjs-color-highlight: var(--hb-accent); /* Selection outline + component toolbar (GrapesJS default is blue) */ --gjs-color-blue: var(--hb-accent); /* Fields, hovers, borders */ --gjs-main-dark-color: rgba(0, 0, 0, .06); --gjs-secondary-dark-color: rgba(0, 0, 0, .08); --gjs-main-light-color: var(--hb-hover); --gjs-soft-light-color: var(--hb-hover); --gjs-light-border: var(--hb-border); /* Text on the accent colour */ --gjs-secondary-light-color: #ffffff; --gjs-arrow-color: rgba(0, 0, 0, .55); --gjs-dark-text-shadow: transparent; } [data-theme="dark"] #hb-email-designer { --gjs-main-dark-color: rgba(255, 255, 255, .08); --gjs-secondary-dark-color: rgba(255, 255, 255, .06); /* The dark accent (#a880ff) is light — dark text reads better on it */ --gjs-secondary-light-color: #1b1a19; --gjs-arrow-color: rgba(255, 255, 255, .7); } /* Blocks are cards: hardcoded rgba borders/shadows don't survive dark mode */ #hb-email-designer .gjs-block { background-color: var(--hb-card-bg); border: 1px solid var(--hb-border); box-shadow: 0 1px 0 0 var(--hb-border); color: var(--hb-fg); } /* The area around the email document */ #hb-email-designer .gjs-cv-canvas-bg { background-color: var(--hb-content-bg); } /* Spectrum colour picker ships its own beige/orange styling */ .sp-container { background-color: var(--hb-card-bg); border: 1px solid var(--hb-border); } .sp-container .sp-input { color: var(--hb-fg) !important; border-color: var(--hb-border); } .sp-container .sp-picker-container { border-left-color: var(--hb-border); }