@bpmnkit/editor 0.0.34 → 0.1.0

package/dist/css.js

@@ -1,3 +1,4 @@
+import { injectChromeStyles } from "./chrome.js";
 /** ID used to prevent duplicate style injection. */
 export const EDITOR_STYLE_ID = "bpmnkit-editor-styles-v1";
 /** ID used to prevent duplicate HUD style injection. */
@@ -19,22 +20,23 @@ export const EDITOR_CSS = `
 
 /* Keyboard-focus ring on the editor host — distinct from the selection outline */
 .bpmnkit-canvas-host:focus-visible {
-  outline: 2px dashed var(--bpmnkit-accent-bright, #3b82f6);
+  outline: 2px dashed var(--bpmnkit-ds-accent, #a8503a);
   outline-offset: -2px;
 }
 
 /* Selection outline */
 .bpmnkit-sel-indicator {
   fill: none;
-  stroke: var(--bpmnkit-accent, #1a56db);
-  stroke-width: 1.5;
+  stroke: var(--bpmnkit-ds-accent, #a8503a);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
   pointer-events: none;
 }
 
 /* Resize handle */
 .bpmnkit-resize-handle {
   fill: #fff;
-  stroke: var(--bpmnkit-accent, #1a56db);
+  stroke: var(--bpmnkit-ds-accent, #a8503a);
   stroke-width: 1.5;
   cursor: nwse-resize;
 }
@@ -57,7 +59,7 @@ export const EDITOR_CSS = `
 
 /* Connection port */
 .bpmnkit-conn-port {
-  fill: var(--bpmnkit-accent, #1a56db);
+  fill: var(--bpmnkit-ds-accent, #a8503a);
   stroke: none;
   cursor: crosshair;
   opacity: 0.7;
@@ -68,8 +70,9 @@ export const EDITOR_CSS = `
 
 /* Rubber-band selection */
 .bpmnkit-rubber-band {
-  fill: rgba(0, 102, 204, 0.05);
-  stroke: var(--bpmnkit-accent, #1a56db);
+  fill: var(--bpmnkit-ds-accent, #a8503a);
+  fill-opacity: 0.06;
+  stroke: var(--bpmnkit-ds-accent, #a8503a);
   stroke-dasharray: 4 2;
   pointer-events: none;
 }
@@ -82,7 +85,7 @@ export const EDITOR_CSS = `
 
 /* Ghost connection line */
 .bpmnkit-ghost-conn {
-  stroke: var(--bpmnkit-accent, #1a56db);
+  stroke: var(--bpmnkit-ds-accent, #a8503a);
   stroke-width: 1.5;
   stroke-dasharray: 6 3;
   fill: none;
@@ -96,15 +99,16 @@ export const EDITOR_CSS = `
 
 /* Resize preview rect */
 .bpmnkit-resize-preview {
-  fill: rgba(0, 102, 204, 0.05);
-  stroke: var(--bpmnkit-accent, #1a56db);
+  fill: var(--bpmnkit-ds-accent, #a8503a);
+  fill-opacity: 0.06;
+  stroke: var(--bpmnkit-ds-accent, #a8503a);
   stroke-dasharray: 4 2;
   pointer-events: none;
 }
 
 /* Alignment guide lines (snap helpers) */
 .bpmnkit-align-guide {
-  stroke: var(--bpmnkit-accent-bright, #6b9df7);
+  stroke: var(--bpmnkit-ds-accent, #a8503a);
   stroke-width: 1;
   stroke-dasharray: 4 2;
   pointer-events: none;
@@ -120,39 +124,39 @@ export const EDITOR_CSS = `
 
 /* Edge hover dot (waypoint insertion indicator) */
 .bpmnkit-edge-hover-dot {
-  fill: var(--bpmnkit-accent, #1a56db);
+  fill: var(--bpmnkit-ds-accent, #a8503a);
   stroke: #fff;
   stroke-width: 1.5;
   pointer-events: none;
   opacity: 0.85;
 }
-[data-theme="dark"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }
+[data-theme="dark"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-ds-accent-on-dark, #c9755c); }
 
 /* Edge waypoint angle balls (visible on edge hover) */
 .bpmnkit-edge-waypoint-ball {
-  fill: var(--bpmnkit-accent, #1a56db);
+  fill: var(--bpmnkit-ds-accent, #a8503a);
   stroke: #fff;
   stroke-width: 1.5;
   cursor: move;
 }
-.bpmnkit-edge-waypoint-ball:hover { fill: var(--bpmnkit-accent, #1a56db); }
-[data-theme="dark"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }
+.bpmnkit-edge-waypoint-ball:hover { fill: var(--bpmnkit-ds-accent, #a8503a); }
+[data-theme="dark"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-ds-accent-on-dark, #c9755c); }
 
 /* Edge endpoint drag handles */
 .bpmnkit-edge-endpoint {
-  fill: var(--bpmnkit-accent, #1a56db);
+  fill: var(--bpmnkit-ds-accent, #a8503a);
   stroke: #fff;
   stroke-width: 1.5;
   cursor: grab;
 }
 .bpmnkit-edge-endpoint:hover {
-  fill: var(--bpmnkit-accent, #1a56db);
+  fill: var(--bpmnkit-ds-accent, #a8503a);
 }
 
 /* Ghost polyline when dragging an edge endpoint */
 .bpmnkit-endpoint-ghost {
   fill: none;
-  stroke: var(--bpmnkit-accent, #1a56db);
+  stroke: var(--bpmnkit-ds-accent, #a8503a);
   stroke-width: 1.5;
   stroke-dasharray: 5 3;
   pointer-events: none;
@@ -187,9 +191,8 @@ export const EDITOR_CSS = `
   min-height: 16px;
   padding: 1px 3px;
   background: #fff;
-  border: 1px solid var(--bpmnkit-accent, #1a56db);
-  border-radius: 2px;
-  font-family: system-ui, -apple-system, sans-serif;
+  border: 1px solid var(--bpmnkit-ds-accent, #a8503a);
+  font-family: var(--bpmnkit-ds-font-sans, system-ui, -apple-system, sans-serif);
   font-size: 11px;
   text-align: center;
   outline: none;
@@ -201,7 +204,7 @@ export const EDITOR_CSS = `
 /* Boundary event attach highlight */
 .bpmnkit-boundary-host {
   fill: none;
-  stroke: var(--bpmnkit-accent, #1a56db);
+  stroke: var(--bpmnkit-ds-accent, #a8503a);
   stroke-width: 2;
   stroke-dasharray: 6 3;
   pointer-events: none;
@@ -217,7 +220,6 @@ export const EDITOR_CSS = `
   z-index: 100;
   max-width: calc(100% - 32px);
   padding: 6px 12px;
-  border-radius: 6px;
   background: #fef3c7;
   border: 1px solid #f59e0b;
   color: #92400e;
@@ -254,6 +256,7 @@ export const EDITOR_CSS = `
 export function injectEditorStyles() {
     if (typeof document === "undefined")
         return;
+    injectChromeStyles();
     if (document.getElementById(EDITOR_STYLE_ID))
         return;
     const style = document.createElement("style");
@@ -262,63 +265,77 @@ export function injectEditorStyles() {
     document.head.appendChild(style);
 }
 /** CSS for the editor HUD — panels, buttons, dropdowns, group picker.
- *  Dark theme is the default. Light theme is activated by setting
- *  `data-bpmnkit-hud-theme="light"` on `document.body`. */
+ *  Flat, square and hairline-ruled per the bpmnkit.com design system.
+ *  The light `--canvas` ground is the default; `data-bpmnkit-hud-theme="dark"`
+ *  (or `"neon"`) on `document.body` switches it. */
 export const HUD_CSS = `
-/* ── HUD base ────────────────────────────────────────────────────── */
+/* ── HUD chrome ──────────────────────────────────────────────────────
+   The bpmnkit.com design system applied to the editor's chrome: flat
+   (no shadow, gradient or blur), square, and bounded by 1px hairlines.
+   The per-theme grounds it reads are declared once in chrome.ts.
+   The diagram itself is renderer-owned and untouched by this sheet.
+   ──────────────────────────────────────────────────────────────────── */
 .hud { position: absolute; z-index: 100; }
 
-/* ── Dark theme (default) ────────────────────────────────────────── */
+/* A toolbar or palette is ONE bordered box with internal hairlines —
+   never individually bordered buttons and never gaps. */
 .panel {
-  display: flex; align-items: center; gap: 2px; padding: 4px;
-  background: var(--bpmnkit-panel-bg, rgba(13, 13, 22, 0.92));
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+  display: flex; align-items: stretch;
+  background: var(--bpmnkit-chrome-ground);
+  border: 1px solid var(--bpmnkit-chrome-line);
+  /* Stated, not inherited: hosts differ on whether they set a global reset. */
+  box-sizing: border-box;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
 }
 
+
 /* ── HUD positions ───────────────────────────────────────────────── */
-#hud-top-center    { top: 0; left: 50%; transform: translateX(-50%); height: 36px; }
-#hud-bottom-left   { bottom: 10px; left: 10px; }
-#hud-bottom-center { bottom: 10px; left: 50%; transform: translateX(-50%); }
+/* Sits in the tab bar's centre slot: a 28px group with 4px clear of the bar's
+   own rules top and bottom, so the two borders never sit on each other. */
+#hud-top-center    { top: 3px; left: 50%; transform: translateX(-50%); height: 30px; }
+#hud-bottom-left   { bottom: 16px; left: 16px; }
+#hud-bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); }
 #ctx-toolbar { display: none; transform: translateX(-50%); }
 #cfg-toolbar { display: none; transform: translate(-50%, -100%); }
 
-/* ── Top center: strip floating card, merge into tab bar ─────────── */
-#hud-top-center.panel {
-  background: transparent;
-  backdrop-filter: none;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  padding: 0 2px;
-  /* Pass clicks through the transparent background to the tab bar center slot. */
-  pointer-events: none;
-}
-#hud-top-center.panel > * {
-  pointer-events: auto;
-}
-
 /* ── Icon buttons ────────────────────────────────────────────────── */
 .hud-btn {
   display: flex; align-items: center; justify-content: center;
-  width: 32px; height: 32px;
+  width: 34px; height: 28px;
   background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: var(--bpmnkit-fg-muted, rgba(255,255,255,0.6));
+  border: none;
+  color: var(--bpmnkit-chrome-ink-2);
   cursor: pointer;
-  transition: background 0.1s, color 0.1s, border-color 0.1s;
   padding: 0; flex-shrink: 0;
-}
-.hud-btn:hover  { background: rgba(255,255,255,0.08); color: var(--bpmnkit-fg, #cdd6f4); }
-.hud-btn.active { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.2); }
-.hud-btn:disabled { opacity: 0.28; cursor: default; }
-.hud-btn:disabled:hover { background: transparent; color: rgba(255,255,255,0.6); }
+  font-family: inherit;
+  font-size: 13px;
+  /* Never let a Unicode glyph be promoted to a colour emoji. */
+  font-variant-emoji: text;
+}
+.hud-btn:hover  { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }
+.hud-btn.active { background: var(--bpmnkit-chrome-accent); color: var(--bpmnkit-chrome-accent-fg); }
+.hud-btn:disabled { opacity: 0.3; cursor: default; }
+.hud-btn:disabled:hover { background: transparent; color: var(--bpmnkit-chrome-ink-2); }
 .hud-btn svg { width: 16px; height: 16px; pointer-events: none; }
 
-/* ── Group button: small chevron at bottom-right corner ──────────── */
+/* The palette's targets are a touch larger than the toolbar's; the zoom
+   cluster shares the palette's height so the bottom strip reads as one row. */
+#hud-bottom-center .hud-btn { width: 36px; height: 32px; }
+#hud-bottom-left .hud-btn { height: 32px; }
+
+/* One hairline BETWEEN adjacent items, never on a group's outer edge — so a
+   group's ends stay clean and an explicit .hud-sep never doubles up with one.
+   Declared after the button rules on purpose: they zero their own borders, and
+   the .panel-plus-id form outranks the id-scoped zoom buttons. */
+.panel > * + *,
+.panel #tool-groups > * + *,
+.panel #zoom-expanded > * + * { border-left: 1px solid var(--bpmnkit-chrome-line-soft); }
+/* The mobile collapse toggles are hidden siblings on desktop, so the item after
+   one would otherwise draw a hairline flush against the group's own border. */
+#hud-top-center > #btn-tc-toggle + *,
+#hud-bottom-center > #btn-bc-toggle + * { border-left: none; }
+
+/* ── Group button: small marker at the bottom-right corner ───────── */
 .hud-btn[data-group] { position: relative; }
 .hud-btn[data-group]::after {
   content: '';
@@ -330,217 +347,135 @@ export const HUD_CSS = `
 }
 
 /* ── Tool groups container ───────────────────────────────────────── */
-#tool-groups { display: flex; align-items: center; gap: 2px; }
+#tool-groups { display: flex; align-items: stretch; }
 
-/* ── Separator ───────────────────────────────────────────────────── */
-.hud-sep { width: 1px; height: 20px; background: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08)); margin: 0 2px; flex-shrink: 0; }
+/* ── Separator — a structural rule, not a soft internal one ──────── */
+.hud-sep {
+  width: 1px; flex: none; align-self: stretch;
+  background: var(--bpmnkit-chrome-line);
+  border-left: none;
+}
+.panel > .hud-sep + * { border-left: none; }
 
 /* ── Zoom widget ─────────────────────────────────────────────────── */
 #btn-zoom-current {
-  padding: 0 10px; height: 32px;
-  background: transparent; border: 1px solid transparent; border-radius: 7px;
-  color: rgba(255,255,255,0.6); cursor: pointer;
-  font-size: 12px; font-weight: 600;
-  transition: background 0.1s, color 0.1s;
+  padding: 0 12px; height: 32px;
+  background: transparent; border: none;
+  color: var(--bpmnkit-chrome-ink-2); cursor: pointer;
+  font-family: inherit; font-size: 12px;
+  font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
-#btn-zoom-current:hover { background: rgba(255,255,255,0.08); color: #fff; }
+#btn-zoom-current:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }
 
-#zoom-expanded { display: none; align-items: center; gap: 2px; }
+#zoom-expanded { display: none; align-items: stretch; }
 #zoom-expanded.open { display: flex; }
 
 #btn-zoom-pct {
-  padding: 0 8px; height: 30px;
-  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
-  color: rgba(255,255,255,0.75); cursor: pointer;
-  font-size: 12px; font-weight: 600;
-  transition: background 0.1s, color 0.1s;
+  padding: 0 10px; height: 32px;
+  background: transparent; border: none;
+  color: var(--bpmnkit-chrome-ink-2); cursor: pointer;
+  font-family: inherit; font-size: 12px;
+  font-variant-numeric: tabular-nums;
   white-space: nowrap; min-width: 60px; text-align: center;
 }
-#btn-zoom-pct:hover { background: rgba(255,255,255,0.12); color: #fff; }
+#btn-zoom-pct:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }
 
 /* ── Dropdown menus ──────────────────────────────────────────────── */
 .dropdown {
   position: absolute; display: none; flex-direction: column;
-  gap: 1px; padding: 4px;
-  background: var(--bpmnkit-panel-bg, rgba(13, 13, 22, 0.92));
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));
-  border-radius: 9px;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
-  z-index: 200; min-width: 150px;
+  padding: 0;
+  background: var(--bpmnkit-chrome-ground);
+  border: 1px solid var(--bpmnkit-chrome-line);
+  z-index: 200; min-width: 170px;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
 }
 .dropdown.open { display: flex; }
 
 .drop-item {
-  display: flex; align-items: center; gap: 8px;
-  padding: 7px 10px;
+  display: flex; align-items: center; gap: 9px;
+  padding: 8px 12px;
   border: none; background: transparent;
-  color: rgba(255,255,255,0.75); cursor: pointer;
-  border-radius: 6px; font-size: 12px; text-align: left; width: 100%;
-  transition: background 0.1s;
+  color: var(--bpmnkit-chrome-ink-2); cursor: pointer;
+  font-family: inherit; font-size: 12px; text-align: left; width: 100%;
+  font-variant-emoji: text;
 }
-.drop-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
-.drop-item .di-check { width: 14px; height: 14px; flex-shrink: 0; color: var(--bpmnkit-accent, #6b9df7); }
+.drop-item:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }
+.drop-item .di-check { width: 14px; height: 14px; flex-shrink: 0; color: var(--bpmnkit-chrome-accent); }
 .drop-item .di-icon  { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }
 .drop-item svg { width: 14px; height: 14px; }
-.drop-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 3px 0; }
+.drop-sep { height: 1px; background: var(--bpmnkit-chrome-line-soft); }
 .drop-label {
-  padding: 4px 10px 2px;
-  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
-  color: rgba(255,255,255,0.3); text-transform: uppercase;
+  padding: 8px 12px 6px;
+  font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;
+  color: var(--bpmnkit-chrome-ink-4); text-transform: uppercase;
 }
 
 /* ── Group element picker ────────────────────────────────────────── */
 .group-picker {
   position: absolute;
-  display: flex; flex-direction: row;
-  gap: 2px; padding: 4px;
-  background: var(--bpmnkit-panel-bg, rgba(13, 13, 22, 0.92));
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));
-  border-radius: 9px;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
+  display: flex; flex-direction: row; align-items: stretch;
+  background: var(--bpmnkit-chrome-ground);
+  border: 1px solid var(--bpmnkit-chrome-line);
   z-index: 300;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
 }
 .group-picker-label {
-  padding: 2px 6px 4px;
-  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
-  color: rgba(255,255,255,0.3); text-transform: uppercase;
-  white-space: nowrap; align-self: center;
-  border-right: 1px solid rgba(255,255,255,0.08);
-  margin-right: 2px;
-}
-
-/* ── Light theme overrides ───────────────────────────────────────── */
-[data-bpmnkit-hud-theme="light"] .panel {
-  background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.92));
-  border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  display: flex; align-items: center;
+  padding: 0 10px;
+  font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;
+  color: var(--bpmnkit-chrome-ink-4); text-transform: uppercase;
+  white-space: nowrap;
+  border-right: 1px solid var(--bpmnkit-chrome-line);
 }
-[data-bpmnkit-hud-theme="light"] #hud-top-center.panel {
-  background: transparent;
-  backdrop-filter: none;
-  border: none;
-  box-shadow: none;
-}
-[data-bpmnkit-hud-theme="light"] .hud-btn { color: var(--bpmnkit-fg-muted, #6666a0); }
-[data-bpmnkit-hud-theme="light"] .hud-btn:hover { background: rgba(0,0,0,0.06); color: var(--bpmnkit-fg, #1a1a2e); }
-[data-bpmnkit-hud-theme="light"] .hud-btn.active { background: rgba(0,0,0,0.08); color: var(--bpmnkit-fg, #1a1a2e); border-color: rgba(0,0,0,0.15); }
-[data-bpmnkit-hud-theme="light"] .hud-btn:disabled:hover { background: transparent; color: var(--bpmnkit-fg-muted, #6666a0); }
-[data-bpmnkit-hud-theme="light"] .hud-sep { background: var(--bpmnkit-panel-border, rgba(0,0,0,0.08)); }
-[data-bpmnkit-hud-theme="light"] #btn-zoom-current { color: var(--bpmnkit-fg-muted, #6666a0); }
-[data-bpmnkit-hud-theme="light"] #btn-zoom-current:hover { background: rgba(0,0,0,0.06); color: var(--bpmnkit-fg, #1a1a2e); }
-[data-bpmnkit-hud-theme="light"] #btn-zoom-pct {
-  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: var(--bpmnkit-fg-muted, #6666a0);
-}
-[data-bpmnkit-hud-theme="light"] #btn-zoom-pct:hover { background: rgba(0,0,0,0.08); color: var(--bpmnkit-fg, #1a1a2e); }
-[data-bpmnkit-hud-theme="light"] .dropdown {
-  background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.92));
-  border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
-  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
-}
-[data-bpmnkit-hud-theme="light"] .drop-item { color: var(--bpmnkit-fg-muted, #6666a0); }
-[data-bpmnkit-hud-theme="light"] .drop-item:hover { background: rgba(0,0,0,0.05); color: var(--bpmnkit-fg, #1a1a2e); }
-[data-bpmnkit-hud-theme="light"] .drop-sep { background: var(--bpmnkit-border, #d0d0e8); }
-[data-bpmnkit-hud-theme="light"] .drop-label { color: rgba(0,0,0,0.35); }
-[data-bpmnkit-hud-theme="light"] .group-picker {
-  background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.92));
-  border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
-  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
-}
-[data-bpmnkit-hud-theme="light"] .group-picker-label {
-  color: rgba(0,0,0,0.35);
-  border-right-color: rgba(0,0,0,0.08);
-}
-
-/* ── Neon theme overrides ────────────────────────────────────────── */
-[data-bpmnkit-hud-theme="neon"] .panel {
-  background: oklch(8% 0.03 270 / 0.96);
-  border-color: oklch(65% 0.28 280 / 0.2);
-  box-shadow: 0 2px 16px oklch(65% 0.28 280 / 0.12), 0 0 0 1px oklch(65% 0.28 280 / 0.1);
-}
-[data-bpmnkit-hud-theme="neon"] #hud-top-center.panel {
-  background: transparent; backdrop-filter: none; border: none; box-shadow: none;
-}
-[data-bpmnkit-hud-theme="neon"] .hud-btn { color: oklch(65% 0.1 280); }
-[data-bpmnkit-hud-theme="neon"] .hud-btn:hover { background: oklch(65% 0.28 280 / 0.12); color: oklch(88% 0.02 270); }
-[data-bpmnkit-hud-theme="neon"] .hud-btn.active { background: oklch(65% 0.28 280 / 0.18); color: oklch(73% 0.16 280); border-color: oklch(65% 0.28 280 / 0.35); }
-[data-bpmnkit-hud-theme="neon"] .hud-sep { background: oklch(65% 0.28 280 / 0.15); }
-[data-bpmnkit-hud-theme="neon"] .dropdown {
-  background: oklch(8% 0.03 270 / 0.97);
-  border-color: oklch(65% 0.28 280 / 0.2);
-  box-shadow: 0 6px 24px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(65% 0.28 280 / 0.1);
-}
-[data-bpmnkit-hud-theme="neon"] .drop-item { color: oklch(65% 0.1 280); }
-[data-bpmnkit-hud-theme="neon"] .drop-item:hover { background: oklch(65% 0.28 280 / 0.1); color: oklch(88% 0.02 270); }
-[data-bpmnkit-hud-theme="neon"] .drop-sep { background: oklch(65% 0.28 280 / 0.15); }
-[data-bpmnkit-hud-theme="neon"] .drop-label { color: oklch(50% 0.06 280); }
-[data-bpmnkit-hud-theme="neon"] .group-picker {
-  background: oklch(8% 0.03 270 / 0.97);
-  border-color: oklch(65% 0.28 280 / 0.2);
-  box-shadow: 0 6px 24px oklch(0% 0 0 / 0.6);
-}
-[data-bpmnkit-hud-theme="neon"] .group-picker-label { color: oklch(50% 0.06 280); border-right-color: oklch(65% 0.28 280 / 0.15); }
 
 /* ── Reference link button (wider text variant of hud-btn) ──────── */
 .ref-link-btn {
-  height: 32px; padding: 0 8px;
+  height: 28px; padding: 0 10px;
   background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: rgba(255, 255, 255, 0.6);
+  border: none;
+  color: var(--bpmnkit-chrome-ink-2);
   cursor: pointer;
-  font-size: 12px;
+  font-family: inherit; font-size: 12px;
   max-width: 160px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: background 0.1s, color 0.1s;
-  align-self: center;
 }
-.ref-link-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
-[data-bpmnkit-hud-theme="light"] .ref-link-btn { color: var(--bpmnkit-fg-muted, #6666a0); }
-[data-bpmnkit-hud-theme="light"] .ref-link-btn:hover { background: rgba(0,0,0,0.06); color: var(--bpmnkit-fg, #1a1a2e); }
+.ref-link-btn:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }
 
-/* ── Color swatches ──────────────────────────────────────────────── */
-.bpmnkit-color-swatches { display: flex; gap: 4px; padding: 2px 4px; align-items: center; }
+/* ── Colour swatches — element fills, exempt from the one-accent rule ── */
+.bpmnkit-color-swatches { display: flex; gap: 4px; padding: 0 8px; align-items: center; }
 .bpmnkit-color-swatch {
-  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
-  border: 2px solid transparent; flex-shrink: 0;
-  transition: transform 0.1s;
+  width: 16px; height: 16px; cursor: pointer;
+  border: 1px solid var(--bpmnkit-chrome-line); flex-shrink: 0;
   padding: 0;
 }
-.bpmnkit-color-swatch:hover { transform: scale(1.2); }
-.bpmnkit-color-swatch.active { border-color: rgba(255,255,255,0.8); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-color-swatch.active { border-color: rgba(0,0,0,0.5); }
+.bpmnkit-color-swatch.active { border-color: var(--bpmnkit-chrome-accent); }
 .bpmnkit-color-swatch--default {
-  background: transparent; border-color: rgba(255,255,255,0.25);
+  background: transparent;
   position: relative; overflow: hidden;
 }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-color-swatch--default { border-color: rgba(0,0,0,0.2); }
 .bpmnkit-color-swatch--default::after {
   content: ''; position: absolute;
-  top: 1px; left: 50%; transform: translateX(-50%) rotate(-45deg);
-  width: 1.5px; height: calc(100% - 2px);
-  background: rgba(200,50,50,0.65); border-radius: 1px;
+  top: 0; left: 50%; transform: translateX(-50%) rotate(-45deg);
+  width: 1px; height: 100%;
+  background: currentColor; color: var(--bpmnkit-chrome-ink-4);
 }
 
-/* ── Contextual Ask-AI button (tinted blue) ──────────────────────── */
-.ctx-ask-ai-btn { color: var(--bpmnkit-accent-bright, #89b4fa); opacity: 0.8; }
-.ctx-ask-ai-btn:hover { background: rgba(76, 142, 247, 0.15); color: #a8c8ff; opacity: 1; }
-[data-bpmnkit-hud-theme="light"] .ctx-ask-ai-btn { color: var(--bpmnkit-accent, #1a56db); opacity: 0.7; }
-[data-bpmnkit-hud-theme="light"] .ctx-ask-ai-btn:hover { background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12)); color: var(--bpmnkit-accent, #1a56db); opacity: 1; }
+/* ── Contextual Ask-AI button ────────────────────────────────────── */
+.ctx-ask-ai-btn { color: var(--bpmnkit-chrome-accent); }
+.ctx-ask-ai-btn:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-accent); }
 
 /* ── New-diagram onboarding overlay ──────────────────────────────── */
 #bpmnkit-empty-state {
   position: absolute; z-index: 50;
   top: 36px; left: 0; bottom: 0; right: 0;
   display: flex; align-items: center; justify-content: center;
-  background: var(--bpmnkit-bg, #0d0d16);
+  background: var(--bpmnkit-ds-canvas, #fbfbfc);
 }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-empty-state { background: var(--bpmnkit-bg, #f4f4f8); }
+[data-bpmnkit-hud-theme="dark"] #bpmnkit-empty-state { background: var(--bpmnkit-bg, #0d0d16); }
 [data-bpmnkit-hud-theme="neon"] #bpmnkit-empty-state { background: oklch(5% 0.025 270); }
 
 .bpmnkit-onboard-inner {
@@ -549,93 +484,60 @@ export const HUD_CSS = `
 }
 .bpmnkit-onboard-header { text-align: center; }
 .bpmnkit-onboard-title {
-  color: rgba(255,255,255,0.82); font-size: 16px; font-weight: 600; margin: 0 0 7px;
+  color: var(--bpmnkit-chrome-ink); font-size: 17px; font-weight: 700;
+  letter-spacing: -0.025em; margin: 0 0 8px;
 }
 .bpmnkit-onboard-sub {
-  color: rgba(255,255,255,0.36); font-size: 13px; margin: 0;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: var(--bpmnkit-ds-t-mono-label, 11.5px); letter-spacing: 0.08em;
+  color: var(--bpmnkit-chrome-ink-4); margin: 0;
 }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-title { color: rgba(0,0,0,0.72); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-sub   { color: rgba(0,0,0,0.38); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-title { color: oklch(88% 0.02 270); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-sub   { color: oklch(50% 0.06 280); }
 
-.bpmnkit-onboard-actions { display: flex; gap: 10px; width: 100%; }
+/* One bordered box subdivided by hairlines — not gapped cards. */
+.bpmnkit-onboard-actions {
+  display: flex; width: 100%;
+  border: 1px solid var(--bpmnkit-chrome-line); background: var(--bpmnkit-chrome-ground);
+}
 
 .bpmnkit-onboard-btn {
   flex: 1; display: flex; flex-direction: column; align-items: flex-start;
-  gap: 10px; padding: 16px 14px;
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.07);
-  border-radius: 10px; cursor: pointer; text-align: left;
-  color: inherit; transition: background 0.15s, border-color 0.15s;
-}
-.bpmnkit-onboard-btn:hover {
-  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn {
-  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn:hover {
-  background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.14);
-}
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn {
-  background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.15);
-}
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn:hover {
-  background: oklch(65% 0.28 280 / 0.1); border-color: oklch(65% 0.28 280 / 0.28);
+  gap: 12px; padding: 18px 16px;
+  background: transparent;
+  border: none; border-right: 1px solid var(--bpmnkit-chrome-line-soft);
+  cursor: pointer; text-align: left;
+  color: inherit;
 }
+.bpmnkit-onboard-btn:last-child { border-right: none; }
+.bpmnkit-onboard-btn:hover { background: var(--bpmnkit-chrome-hover); }
 
 .bpmnkit-onboard-btn-icon {
   display: flex; align-items: center; justify-content: center;
-  width: 32px; height: 32px; border-radius: 8px;
-  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); flex-shrink: 0;
+  width: 32px; height: 32px;
+  border: 1px solid var(--bpmnkit-chrome-line); color: var(--bpmnkit-chrome-ink-2); flex-shrink: 0;
 }
 .bpmnkit-onboard-btn-icon svg { width: 16px; height: 16px; pointer-events: none; }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn-icon {
-  background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.55);
-}
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn-icon {
-  background: oklch(65% 0.28 280 / 0.1); color: oklch(73% 0.16 280);
-}
+.bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon { color: var(--bpmnkit-chrome-accent); border-color: var(--bpmnkit-chrome-accent); }
 
-.bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon {
-  background: rgba(76,142,247,0.18); color: #8ab8ff;
-}
-.bpmnkit-onboard-btn--ai:hover { border-color: rgba(76,142,247,0.3); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon {
-  background: rgba(26,86,219,0.1); color: #1a56db;
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn--ai:hover { border-color: rgba(26,86,219,0.28); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon {
-  background: oklch(72% 0.18 185 / 0.15); color: oklch(72% 0.18 185);
-}
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn--ai:hover { border-color: oklch(72% 0.18 185 / 0.35); }
-
-.bpmnkit-onboard-btn-label { display: flex; flex-direction: column; gap: 3px; }
+.bpmnkit-onboard-btn-label { display: flex; flex-direction: column; gap: 4px; }
 .bpmnkit-onboard-btn-title {
-  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0;
+  font-size: 14px; font-weight: 700; color: var(--bpmnkit-chrome-ink); margin: 0;
 }
 .bpmnkit-onboard-btn-desc {
-  font-size: 11px; color: rgba(255,255,255,0.32); margin: 0; line-height: 1.4;
+  font-size: 12px; color: var(--bpmnkit-chrome-ink-4); margin: 0; line-height: 1.5;
 }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn-title { color: rgba(0,0,0,0.72); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn-desc  { color: rgba(0,0,0,0.36); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn-title { color: oklch(82% 0.04 270); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn-desc  { color: oklch(50% 0.06 280); }
 
-.bpmnkit-onboard-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
+.bpmnkit-onboard-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
 .bpmnkit-onboard-links a {
-  color: rgba(255,255,255,0.22); font-size: 11px; text-decoration: none; transition: color 0.1s;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  color: var(--bpmnkit-chrome-ink-4); font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px);
+  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
 }
-.bpmnkit-onboard-links a:hover { color: rgba(255,255,255,0.55); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-links a { color: rgba(0,0,0,0.25); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-links a:hover { color: rgba(0,0,0,0.6); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-links a { color: oklch(45% 0.06 280); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-links a:hover { color: oklch(65% 0.1 280); }
+.bpmnkit-onboard-links a:hover { color: var(--bpmnkit-chrome-accent); }
 
 @media (max-width: 520px) {
   .bpmnkit-onboard-actions { flex-direction: column; }
-  .bpmnkit-onboard-btn { flex-direction: row; align-items: center; gap: 12px; }
+  .bpmnkit-onboard-btn { flex-direction: row; align-items: center; gap: 12px; border-right: none; border-bottom: 1px solid var(--bpmnkit-chrome-line-soft); }
+  .bpmnkit-onboard-btn:last-child { border-bottom: none; }
   .bpmnkit-onboard-btn-label { flex-direction: column; }
 }
 
@@ -648,130 +550,103 @@ export const HUD_CSS = `
 #hud-top-center::-webkit-scrollbar { display: none; }
 
 /* ── Push HUD toolbar down when simulation banner is visible ─────── */
-.bpmnkit-sim-active #hud-top-center { top: 36px; }
+.bpmnkit-sim-active #hud-top-center { top: 39px; }
 
 /* ── Simulation active banner ────────────────────────────────────── */
 #bpmnkit-sim-banner {
   position: absolute;
   top: 0; left: 0; right: 0;
   z-index: 150;
-  display: flex; align-items: center; justify-content: center; gap: 12px;
-  padding: 7px 16px;
-  background: rgba(217, 119, 6, 0.18);
-  border-bottom: 1px solid rgba(217, 119, 6, 0.35);
-  backdrop-filter: blur(6px);
-  font-size: 12px; font-weight: 500;
-  color: rgba(255, 193, 87, 0.95);
+  display: flex; align-items: center; justify-content: center; gap: 14px;
+  padding: 8px 16px;
+  background: var(--bpmnkit-chrome-ground);
+  border-bottom: 1px solid var(--bpmnkit-chrome-accent);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: var(--bpmnkit-ds-t-mono-label, 11.5px); letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--bpmnkit-chrome-accent);
   pointer-events: auto;
 }
 #bpmnkit-sim-banner.hidden { display: none; }
 #bpmnkit-sim-banner-exit {
-  padding: 3px 10px; border-radius: 5px;
-  background: rgba(217, 119, 6, 0.22);
-  border: 1px solid rgba(217, 119, 6, 0.4);
-  color: inherit; cursor: pointer; font-size: 11px; font-weight: 600;
-  transition: background 0.1s;
-}
-#bpmnkit-sim-banner-exit:hover { background: rgba(217, 119, 6, 0.35); }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-sim-banner {
-  background: rgba(254, 243, 199, 0.95);
-  border-bottom-color: rgba(217, 119, 6, 0.25);
-  color: #92400e;
-}
-[data-bpmnkit-hud-theme="light"] #bpmnkit-sim-banner-exit {
-  background: rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.3);
+  padding: 4px 12px;
+  background: transparent;
+  border: 1px solid var(--bpmnkit-chrome-accent);
+  color: inherit; cursor: pointer;
+  font-family: inherit; font-size: inherit; letter-spacing: inherit;
 }
+#bpmnkit-sim-banner-exit:hover { background: var(--bpmnkit-chrome-accent); color: var(--bpmnkit-chrome-accent-fg); }
 
 /* ── Context menu ────────────────────────────────────────────────── */
-#bpmnkit-ctx-menu { min-width: 160px; }
+#bpmnkit-ctx-menu { min-width: 170px; }
 
 /* ── Element search bar ──────────────────────────────────────────── */
 #bpmnkit-search-bar {
   position: absolute;
   top: 44px; left: 50%; transform: translateX(-50%);
   z-index: 120;
-  display: flex; align-items: center; gap: 6px;
-  padding: 5px 10px;
-  background: rgba(22, 22, 30, 0.92);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255,255,255,0.15);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  display: flex; align-items: center; gap: 10px;
+  padding: 6px 12px;
+  background: var(--bpmnkit-chrome-ground);
+  border: 1px solid var(--bpmnkit-chrome-line);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
 }
 #bpmnkit-search-bar.hidden { display: none; }
 #bpmnkit-search-input {
-  width: 220px; padding: 3px 6px;
+  width: 220px; padding: 2px 0;
   background: transparent; border: none;
-  color: #fff; font-size: 13px; outline: none;
+  color: var(--bpmnkit-chrome-ink); font-family: inherit; font-size: 12.5px; outline: none;
 }
-#bpmnkit-search-input::placeholder { color: rgba(255,255,255,0.35); }
+#bpmnkit-search-input::placeholder { color: var(--bpmnkit-chrome-ink-4); }
 #bpmnkit-search-count {
-  font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; min-width: 40px;
+  font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;
+  color: var(--bpmnkit-chrome-ink-4); white-space: nowrap; min-width: 44px;
 }
 #bpmnkit-search-close {
-  background: transparent; border: none; color: rgba(255,255,255,0.4);
-  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
-}
-#bpmnkit-search-close:hover { color: #fff; }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-search-bar {
-  background: rgba(252, 252, 254, 0.96);
-  border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
-  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  background: transparent; border: none; color: var(--bpmnkit-chrome-ink-4);
+  cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1; padding: 0 2px;
+  font-variant-emoji: text;
 }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-search-input { color: rgba(0,0,0,0.9); }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-search-input::placeholder { color: rgba(0,0,0,0.3); }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-search-count { color: rgba(0,0,0,0.4); }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-search-close { color: rgba(0,0,0,0.35); }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-search-close:hover { color: rgba(0,0,0,0.8); }
+#bpmnkit-search-close:hover { color: var(--bpmnkit-chrome-ink); }
 
 /* ── Keyboard shortcuts modal ────────────────────────────────────── */
 #bpmnkit-shortcuts-modal {
   position: absolute; inset: 0; z-index: 200;
   display: flex; align-items: center; justify-content: center;
-  background: rgba(0,0,0,0.55);
-  backdrop-filter: blur(4px);
+  background: color-mix(in srgb, var(--bpmnkit-ds-dark, #14161a) 55%, transparent);
 }
 #bpmnkit-shortcuts-modal.hidden { display: none; }
 #bpmnkit-shortcuts-inner {
-  background: var(--bpmnkit-surface-2, #1e1e2e);
-  border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-  padding: 20px 24px;
+  background: var(--bpmnkit-chrome-ground);
+  border: 1px solid var(--bpmnkit-chrome-line);
+  padding: 24px 26px;
   min-width: 320px; max-width: 480px;
-  color: rgba(255,255,255,0.85);
+  color: var(--bpmnkit-chrome-ink-2);
 }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-shortcuts-inner {
-  background: var(--bpmnkit-surface, #fff);
-  border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
-  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
-  color: rgba(0,0,0,0.8);
+#bpmnkit-shortcuts-inner h3 {
+  margin: 0 0 16px;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;
+  text-transform: uppercase; font-weight: 400; color: var(--bpmnkit-chrome-ink-4);
 }
-#bpmnkit-shortcuts-inner h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
 .bpmnkit-sc-row {
-  display: flex; justify-content: space-between; align-items: center;
-  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 12px;
+  display: flex; justify-content: space-between; align-items: center; gap: 24px;
+  padding: 7px 0; border-bottom: 1px solid var(--bpmnkit-chrome-line-soft); font-size: 12.5px;
 }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-sc-row { border-bottom-color: rgba(0,0,0,0.06); }
 .bpmnkit-sc-row:last-child { border-bottom: none; }
 .bpmnkit-sc-key {
-  font-family: var(--font-mono, monospace);
-  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
-  border-radius: 4px; padding: 1px 6px; font-size: 11px;
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-sc-key {
-  background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.7);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  border: 1px solid var(--bpmnkit-chrome-line);
+  padding: 1px 7px; font-size: 11px; color: var(--bpmnkit-chrome-ink);
+  white-space: nowrap;
 }
 #bpmnkit-shortcuts-close {
-  display: block; margin: 14px auto 0; padding: 6px 20px;
-  background: var(--bpmnkit-surface-2, rgba(255,255,255,0.08)); border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));
-  border-radius: 6px; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 12px;
-  transition: background 0.1s;
-}
-#bpmnkit-shortcuts-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
-[data-bpmnkit-hud-theme="light"] #bpmnkit-shortcuts-close {
-  background: var(--bpmnkit-surface-2, rgba(0,0,0,0.05)); border-color: var(--bpmnkit-border, #d0d0e8); color: rgba(0,0,0,0.6);
+  display: block; margin: 18px auto 0; padding: 7px 20px;
+  background: var(--bpmnkit-ds-accent, #a8503a); border: none;
+  color: #fff; cursor: pointer;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace); font-size: 12px;
 }
+#bpmnkit-shortcuts-close:hover { background: var(--bpmnkit-ds-accent-hover, #8f412e); }
 
 /* ── Mobile: collapsible center toolbars ─────────────────────────── */
 #btn-bc-toggle, #btn-tc-toggle { display: none; }
@@ -781,21 +656,19 @@ export const HUD_CSS = `
   #hud-bottom-left { display: none !important; }
 
   #hud-bottom-center {
-    left: 10px;
+    left: 16px;
     transform: none;
   }
 
   #btn-bc-toggle { display: flex; }
+  #hud-bottom-center > #btn-bc-toggle + * { border-left: 1px solid var(--bpmnkit-chrome-line-soft); }
 
   /* Collapsed: hide all children except the toggle button */
   #hud-bottom-center:not(.expanded) > *:not(#btn-bc-toggle) { display: none; }
 
   /* Expanded: highlight the toggle button as a close affordance */
   #hud-bottom-center.expanded #btn-bc-toggle {
-    background: rgba(255,255,255,0.08); color: #fff;
-  }
-  [data-bpmnkit-hud-theme="light"] #hud-bottom-center.expanded #btn-bc-toggle {
-    background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.9);
+    background: var(--bpmnkit-chrome-accent); color: var(--bpmnkit-chrome-accent-fg);
   }
 }
 
@@ -806,6 +679,7 @@ export const HUD_CSS = `
 export function injectHudStyles() {
     if (typeof document === "undefined")
         return;
+    injectChromeStyles();
     if (document.getElementById(HUD_STYLE_ID))
         return;
     const style = document.createElement("style");