flexdesk 0.17.9 → 0.17.11

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 0.17.11 (2026-10-25)
+
+A patch release: everything below is additive. Every fix is documented in a
+section of the docs headed "(0.17.11)"; each entry links to it.
+
+### Added and changed
+
+- [Retheming the accent shades](docs/concepts/styling.md#retheming-the-accent-shades-01711): the accent blues that 0.17.10 left as literals, in shades no mix of an accent token gives exactly, are now derived from the accent tokens too, so setting `--accent`, `--accent-hover` and `--accent-bright` on `:root` rethemes the primary buttons' hover, the selected tile, the row cursor, the window bar, the plot window, the spinner and the flow lanes as well. Three tokens are new in tokens.css: `--accent-bright-hover` (`color-mix(in srgb, var(--accent-bright) 90%, white)`, about `#1987d1`), `--accent-pressed` (`color-mix(in srgb, var(--accent-hover) 90%, black)`, about `#0f6ba8`) and `--accent-lightest` (`color-mix(in srgb, var(--accent-bright) 36%, white)`, about `#a3cfed`). None of the old colours is an exact mix, so each moves to the nearest one (ΔE in OKLab × 100, tints measured over `--surface-0`): `.twm-btn--primary:hover` `#1486cf` → `#1987d1` (0.4); the modal's primary button hover `#1683c4` → `#1987d1` (2.2); `.twm-bar-windows__item:hover` `#268bd2` → `#1987d1` (1.3); `.twm-bar-windows__item:active` `#1a6aa5` → `#0f6ba8` (0.6); the plot series and plot config checkboxes' `accent-color` and the plot config select's focus border `#268bd2` → `#218bd3` (0.3); the plot window toolbar's active button and the computing spinner `#4a90d9` → `#3395d6` (2.1), with the active button's tint and hover tint and the plot table's hovered row (`rgba(74, 144, 217, a)`) following at the same alpha (0.5 to 0.9); the selected tile's border and title, the tile header buttons' and tile menu's hover icons and the action dropdown's icons `#78b9ff` → `#73b6e3` (`--accent-lighter`, 4.1, the largest shift), with the selected tile's ring and header tint (`rgba(120, 185, 255, a)`) following (1.6, 0.6); the action dropdown's hovered or focused icon `#9ecfff` → `#a3cfed` (2.6); the notebook autocomplete's focused border `#79b8f8` → `#73b6e3` (3.2); `.twm-row-cursor`, the focused landing pane's head, `.twm-action-btn:hover` (`rgba(17, 119, 179, a)`) and `.twm-snap-preview` (`rgba(23, 119, 179, 0.18)`) now `--accent-hover` at the same alpha (0.2); `--twm-lanes-wire` `#5b9bd5` → `var(--accent-light)`, about `#4da2db` (2.0); `--twm-lanes-ring` `#1683c4` → `var(--accent-bright-hover)`, about `#1987d1` (2.2); the flow lanes' pressed show button `#0f6fa8` → `#0f6ba8` (1.2); the selected card's glow and a new or changed cell and column (`rgba(22, 131, 196, a)`) now `--twm-lanes-ring` at the same alpha (0.3 to 1.7); a new or changed column's type `#9fd0f0` → `#a3cfed` (0.6). `--accent` and `--accent-bright` stay two tokens. Still literals, because they are not the accent: the colours listed in the (0.17.10) section, the charts' series palette and the Monaco editor theme's selection colours (BUG-0045).
+
+### Removed or renamed exports
+
+None. Compared with 0.17.10, across every entry point (`core`, `widgets`, `wm`,
+`host`, `canvas`, `flow`, `charts`, `tiles`, `editor`) and the package
+`exports` map, no export was added, removed or renamed. Not an export but
+worth knowing: tokens.css defines three new custom properties,
+`--accent-bright-hover`, `--accent-pressed` and `--accent-lightest`;
+`--twm-lanes-wire` and `--twm-lanes-ring` keep their names but default to
+`var(--accent-light)` and `var(--accent-bright-hover)` (were `#5b9bd5` and
+`#1683c4`); and the default colours listed above move by up to 4.1 ΔE, the
+largest being the selected tile's `#78b9ff`, now about `#73b6e3` (see above).
+
+## 0.17.10 (2026-10-25)
+
+A patch release: everything below is additive. Every fix is documented in a
+section of the docs headed "(0.17.10)"; each entry links to it.
+
+### Added and changed
+
+- [Retheming the accent](docs/concepts/styling.md#retheming-the-accent-01710): the accent colours in flexdesk.css that were the literal `#007acc` (`rgb(0, 122, 204)`), its tints, and the light accent `#569cd6` / `#6eb3e9` are now derived from `--accent-bright`, so setting `--accent`, `--accent-hover` and `--accent-bright` on `:root` rethemes all of them. In tokens.css, `--state-selected` and `--shadow-glow` are now mixes of `--accent-bright` (the same colours as before), and three tokens are new: `--twm-dt-new-bg` (the colour a DataTable row or cell that has just arrived flashes from, which the stylesheet read before with an `rgba(0, 122, 204, 0.22)` fallback but nothing defined), `--accent-light` (about `#4da2db`, replacing `#569cd6`) and `--accent-lighter` (about `#73b6e3`, replacing `#6eb3e9`). The `rgba(0, 122, 204, a)` tints are now `color-mix(in srgb, var(--accent-bright) a%, transparent)`, with the same colour by default: the DataTable's selected rows and cells, the filter chip when on, the autocomplete's namespace pill and active item, `.add-widget-btn`, `.tile.resizing`, `.tile-ghost`, the focused leaf's inset shadow, the document outline's active link, the canvas marquee and the flow graph's port dots. The SliderField thumb, the SortableList drop line, add button and input focus, the DataTable filter inputs' focus border and the notebook autocomplete's border read `--accent-light`, and the active thumb `--accent-lighter`; since `#569cd6` cannot be mixed exactly from `#007acc`, these move to the nearest mix with white, a difference of about 1.5 to 1.7 ΔE (OKLab × 100). `var(--accent-bright, …)`, `var(--state-selected, …)`, `var(--ea-accent, …)` and `var(--accent, …)` no longer carry fallbacks, so no computed colour changes but flexdesk.css now needs tokens.css (or your own definitions of these tokens). Accent blues in other shades that no mix of an accent token gives exactly stay literals (BUG-0044).
+
+### Removed or renamed exports
+
+None. Compared with 0.17.9, across every entry point (`core`, `widgets`, `wm`,
+`host`, `canvas`, `flow`, `charts`, `tiles`, `editor`) and the package
+`exports` map, no export was added, removed or renamed. Not an export but
+worth knowing: tokens.css defines three new custom properties,
+`--accent-light`, `--accent-lighter` and `--twm-dt-new-bg`, and derives
+`--state-selected` and `--shadow-glow` from `--accent-bright`; flexdesk.css
+reads the accent tokens without fallbacks, so it needs tokens.css; and the
+SliderField thumb is about `#4da2db` (was `#569cd6`) and its active state
+about `#73b6e3` (was `#6eb3e9`) (see above).
+
 ## 0.17.9 (2026-10-25)
 
 A patch release: everything below is additive. Every fix is documented in a

package/css/base.css

@@ -731,7 +731,7 @@ body.twm-dt-col-resizing {
 /* `activeRow` — the row that is OPEN. A left edge, not a background: hover
  * and selection keep theirs. */
 .twm-preview-table tbody tr.twm-dt-row--active > td:first-child {
-    box-shadow: inset 2px 0 0 0 var(--accent-bright, #007acc);
+    box-shadow: inset 2px 0 0 0 var(--accent-bright);
 }
 /* `rowIcon` — drawn from `data-twm-icon` so the icon's NAME is not cell
  * text (not in a copy, not in the clipped-cell tooltip). The span carries the
@@ -878,7 +878,7 @@ body.twm-dt-col-resizing {
 }
 .twm-preview-table td .twm-dt-detail-toggle:focus-visible {
     opacity: 1;
-    outline: 1px solid var(--accent-bright, #007acc);
+    outline: 1px solid var(--accent-bright);
 }
 /* The detail's row: one cell across every column. It is often the body's
  * FIRST cell of its row, so the time column's rules reach it (see the note
@@ -911,7 +911,7 @@ body.twm-dt-col-resizing {
 }
 /* `follow` / `refresh()` — a row the last answer did not have, for a moment. */
 @keyframes twm-dt-row-new {
-    from { background: var(--twm-dt-new-bg, rgba(0, 122, 204, 0.22)); }
+    from { background: var(--twm-dt-new-bg); }
     to { background: transparent; }
 }
 .twm-preview-table tbody tr.twm-dt-row--new > td {
@@ -955,11 +955,11 @@ body.twm-dt-col-resizing {
     background: rgba(255, 255, 255, 0.06);
 }
 .twm-dt-filter-chip:focus-visible {
-    outline: 1px solid var(--accent-bright, #007acc);
+    outline: 1px solid var(--accent-bright);
 }
 .twm-dt-filter-chip.twm-dt-filter-chip--on {
-    border-color: var(--accent-bright, #007acc);
-    background: rgba(0, 122, 204, 0.18);
+    border-color: var(--accent-bright);
+    background: color-mix(in srgb, var(--accent-bright) 18%, transparent);
     color: #ddd;
 }
 .twm-dt-filter-chip.twm-dt-filter-chip--empty {
@@ -1029,14 +1029,14 @@ body.twm-dt-col-resizing {
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: #569cd6;
+    background: var(--accent-light);
     margin-top: -5px;
     cursor: grab;
     border: 2px solid var(--surface-0);
 }
 .twm-slider-field__input::-webkit-slider-thumb:active {
     cursor: grabbing;
-    background: #6eb3e9;
+    background: var(--accent-lighter);
 }
 .twm-slider-field__input::-moz-range-track {
     height: 6px;
@@ -1048,7 +1048,7 @@ body.twm-dt-col-resizing {
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: #569cd6;
+    background: var(--accent-light);
     cursor: grab;
     border: 2px solid var(--surface-0);
 }
@@ -1171,7 +1171,7 @@ body.twm-dt-col-resizing {
 .twm-sortable-list__drop {
     height: 2px;
     margin: 1px 0;
-    background: #569cd6;
+    background: var(--accent-light);
     pointer-events: none;
 }
 .twm-sortable-list__content {
@@ -1218,12 +1218,12 @@ body.twm-dt-col-resizing {
     margin-top: var(--space-md);
 }
 .twm-sortable-list__add:hover {
-    border-color: #569cd6;
-    color: #569cd6;
-    background: rgba(86, 156, 214, 0.12);
+    border-color: var(--accent-light);
+    color: var(--accent-light);
+    background: color-mix(in srgb, var(--accent-light) 12%, transparent);
 }
 .twm-sortable-list__add:active {
-    background: rgba(86, 156, 214, 0.2);
+    background: color-mix(in srgb, var(--accent-light) 20%, transparent);
 }
 .twm-sortable-list__empty {
     padding: var(--space-xl);
@@ -1248,7 +1248,7 @@ body.twm-dt-col-resizing {
 }
 .twm-sortable-list__input:focus {
     outline: none;
-    border-color: #569cd6;
+    border-color: var(--accent-light);
 }
 /* Global Top Bar (fixed at top) */
 .twm-global-top-bar {
@@ -1698,19 +1698,19 @@ body.twm-dt-col-resizing {
     padding: var(--space-xxs) 8px;
     font-size: var(--font-size-xs);
     color: #c7f1ff;
-    background: rgba(0, 122, 204, 0.18);
-    border: 1px solid rgba(0, 122, 204, 0.35);
+    background: color-mix(in srgb, var(--accent-bright) 18%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent-bright) 35%, transparent);
     border-radius: var(--radius-pill);
     white-space: nowrap;
     text-transform: none;
     cursor: default;
-    box-shadow: inset 0 0 0 1px rgba(0, 122, 204, 0.15);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-bright) 15%, transparent);
 }
 .twm-autocomplete-field__namespace--toggle {
     cursor: pointer;
-    background: linear-gradient(90deg, rgba(0, 122, 204, 0.24) 0%, rgba(0, 122, 204, 0.12) 100%);
+    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-bright) 24%, transparent) 0%, color-mix(in srgb, var(--accent-bright) 12%, transparent) 100%);
     transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
-    border: 1px solid rgba(0, 122, 204, 0.5);
+    border: 1px solid color-mix(in srgb, var(--accent-bright) 50%, transparent);
     color: #e7f5ff;
     outline: none;
 }
@@ -2063,7 +2063,7 @@ body.twm-window-maximized .twm-resize-handle {
     box-sizing: border-box;
 }
 .twm-data-table__filter-input:focus {
-    border-color: #569cd6;
+    border-color: var(--accent-light);
     background: #252525;
 }
 .twm-data-table__filter-input::placeholder {
@@ -2124,7 +2124,7 @@ body.twm-window-maximized .twm-resize-handle {
 }
 .twm-data-table__filter-dropdown-select:focus,
 .twm-data-table__filter-dropdown-input:focus {
-    border-color: #569cd6;
+    border-color: var(--accent-light);
 }
 .twm-data-table__filter-dropdown-select {
     appearance: auto;
@@ -2474,11 +2474,11 @@ body.twm-window-maximized .twm-resize-handle {
     color: var(--text-bright);
 }
 .twm-plot-window-toolbar .twm-btn-icon.twm-is-active {
-    color: #4A90D9;
-    background: rgba(74, 144, 217, 0.15);
+    color: color-mix(in srgb, var(--accent-bright) 80%, white);
+    background: color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 80%, white) 15%, transparent);
 }
 .twm-plot-window-toolbar .twm-btn-icon.twm-is-active:hover {
-    background: rgba(74, 144, 217, 0.25);
+    background: color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 80%, white) 25%, transparent);
 }
 .twm-plot-window-content {
     flex: 1;
@@ -2549,7 +2549,7 @@ body.twm-window-maximized .twm-resize-handle {
     background: rgba(255, 255, 255, 0.02);
 }
 .twm-plot-window-container .twm-plot-tab-content .twm-preview-table tbody tr:hover {
-    background: rgba(74, 144, 217, 0.1);
+    background: color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 80%, white) 10%, transparent);
 }
 .twm-plot-window-container .twm-plot-tab-content .twm-preview-table td {
     color: #aaa;
@@ -2622,7 +2622,7 @@ body.twm-window-maximized .twm-resize-handle {
     background: rgba(255, 255, 255, 0.05);
 }
 .twm-plot-series-toggle-panel__item input[type="checkbox"] {
-    accent-color: #268bd2;
+    accent-color: color-mix(in srgb, var(--accent-bright) 87%, white);
     flex-shrink: 0;
 }
 .twm-plot-series-toggle-panel__line-indicator {
@@ -2731,7 +2731,7 @@ body.twm-window-maximized .twm-resize-handle {
     outline: none;
 }
 .twm-data-series-plot-config select:focus {
-    border-color: #268bd2;
+    border-color: color-mix(in srgb, var(--accent-bright) 87%, white);
 }
 .twm-data-series-plot-config__columns {
     max-height: 200px;
@@ -2773,7 +2773,7 @@ body.twm-window-maximized .twm-resize-handle {
     border-radius: 1px;
 }
 .twm-data-series-plot-config input[type="checkbox"] {
-    accent-color: #268bd2;
+    accent-color: color-mix(in srgb, var(--accent-bright) 87%, white);
     flex-shrink: 0;
 }
 /* Computing Status Window */
@@ -2790,7 +2790,7 @@ body.twm-window-maximized .twm-resize-handle {
     width: 32px;
     height: 32px;
     border: 3px solid #333;
-    border-top-color: #4a90d9;
+    border-top-color: color-mix(in srgb, var(--accent-bright) 80%, white);
     border-radius: 50%;
     animation: computing-spin 0.8s linear infinite;
 }
@@ -3223,14 +3223,14 @@ body.twm-window-maximized .twm-resize-handle {
 /* Add Widget is the toolbar's one primary verb, so it is the one that carries
    the accent. */
 .add-widget-btn {
-    background: rgba(0, 122, 204, 0.15);
-    border-color: rgba(0, 122, 204, 0.3);
+    background: color-mix(in srgb, var(--accent-bright) 15%, transparent);
+    border-color: color-mix(in srgb, var(--accent-bright) 30%, transparent);
     color: var(--text-bright);
 }
 
 .add-widget-btn:hover {
-    background: rgba(0, 122, 204, 0.25);
-    border-color: rgba(0, 122, 204, 0.5);
+    background: color-mix(in srgb, var(--accent-bright) 25%, transparent);
+    border-color: color-mix(in srgb, var(--accent-bright) 50%, transparent);
 }
 
 /* The other two are secondary — Export is an aside and Reset Layout throws the
@@ -3279,24 +3279,25 @@ body.twm-window-maximized .twm-resize-handle {
 .tile.resizing {
     z-index: var(--z-dropdown);
     border-color: var(--accent-bright);
-    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.3);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-bright) 30%, transparent);
 }
 
 /* Selected — set by `_onConfigClick()` while the config dialog is open, and
-   cleared from every sibling by the same handler. #78b9ff is a literal
-   because there is no light-accent token: `--accent-bright` is #007acc, which
-   is a border colour on this background and not a text one. */
+   cleared from every sibling by the same handler. It reads `--accent-lighter`
+   (BUG-0045): `--accent-bright` is a border colour on this background and not
+   a text one. It was #78b9ff, which no mix of `--accent-bright` with white
+   gives exactly; `--accent-lighter` (about #73b6e3) is the nearest. */
 .tile.tile--selected {
-    border-color: #78b9ff;
-    box-shadow: 0 0 0 2px rgba(120, 185, 255, 0.3), var(--shadow-md);
+    border-color: var(--accent-lighter);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-lighter) 30%, transparent), var(--shadow-md);
 }
 
 .tile.tile--selected .tile-header {
-    background: rgba(120, 185, 255, 0.1);
+    background: color-mix(in srgb, var(--accent-lighter) 10%, transparent);
 }
 
 .tile.tile--selected .tile-title {
-    color: #78b9ff;
+    color: var(--accent-lighter);
 }
 
 /* Read-only. `_buildChrome()`'s read-only branch emits no drag handle, no
@@ -3399,7 +3400,7 @@ body.twm-window-maximized .twm-resize-handle {
 .tile-menu-btn:hover,
 .tile-expand-btn:hover {
     background: var(--state-hover);
-    color: #78b9ff;
+    color: var(--accent-lighter);
 }
 
 .tile-remove-btn:hover {
@@ -3487,7 +3488,7 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 .tile-menu-item:hover .material-symbols-outlined {
-    color: #78b9ff;
+    color: var(--accent-lighter);
 }
 
 /* ── the content area ────────────────────────────────────────────────── */
@@ -3556,8 +3557,8 @@ body.twm-window-maximized .twm-resize-handle {
 /* The drop preview, positioned by `_updateGhost()` in grid coordinates. */
 .tile-ghost {
     position: absolute;
-    background: rgba(0, 122, 204, 0.15);
-    border: 2px dashed rgba(0, 122, 204, 0.5);
+    background: color-mix(in srgb, var(--accent-bright) 15%, transparent);
+    border: 2px dashed color-mix(in srgb, var(--accent-bright) 50%, transparent);
     border-radius: var(--radius-sm);
     pointer-events: none;
     z-index: 50;
@@ -3692,12 +3693,12 @@ body.twm-window-maximized .twm-resize-handle {
 }
 .twm-action-dropdown-option .twm-option-icon {
     font-size: 20px;
-    color: #78b9ff;
+    color: var(--accent-lighter);
     flex-shrink: 0;
 }
 .twm-action-dropdown-option:hover .twm-option-icon,
 .twm-action-dropdown-option:focus .twm-option-icon {
-    color: #9ecfff;
+    color: var(--accent-lightest);
 }
 .twm-action-dropdown-option .twm-option-label {
     font-weight: 500;
@@ -4070,12 +4071,11 @@ button.twm-managed-window__btn svg rect {
     transition: background-color 0.1s, color 0.1s;
 }
 .twm-bar-windows__item:hover {
-    /* Solarized blue */
-    background: #268bd2;
+    background: var(--accent-bright-hover);
     color: var(--text-bright);
 }
 .twm-bar-windows__item:active {
-    background: #1a6aa5;
+    background: var(--accent-pressed);
 }
 /* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
 .twm-bar-windows__item-icon,
@@ -4677,12 +4677,12 @@ button.twm-about-dialog__btn--close:focus {
 /* ─── Autocomplete field — notebook variant ──────────────── */
 
 .twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper {
-    border: 1px solid #569cd6;
+    border: 1px solid var(--accent-light);
     font-size: var(--font-size-sm);
 }
 .twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper:focus-within {
-    border-color: #79b8f8;
-    box-shadow: 0 0 3px rgba(86, 156, 214, 0.3);
+    border-color: var(--accent-lighter);
+    box-shadow: 0 0 3px color-mix(in srgb, var(--accent-light) 30%, transparent);
 }
 .twm-autocomplete-field--notebook .twm-autocomplete-field__input {
     font-family: 'Courier New', Courier, monospace;
@@ -4867,7 +4867,7 @@ button.twm-about-dialog__btn--close:focus {
    second keeps the readonly tables, which hover never claimed, working. */
 .twm-preview-table:not(.twm-preview-table--readonly) tbody tr.selected td,
 .twm-preview-table tbody tr.selected td {
-    background: var(--state-selected, rgba(0, 122, 204, 0.15));
+    background: var(--state-selected);
 }
 
     padding: 0;
@@ -4915,8 +4915,8 @@ button.twm-about-dialog__btn--close:focus {
    is the keyboard's, and it is deliberately the stronger of the two so that
    moving the pointer across the list does not hide where the cursor is. */
 .twm-autocomplete-field__item.active {
-    background-color: var(--state-selected, rgba(0, 122, 204, 0.15));
-    box-shadow: inset 2px 0 0 var(--accent-bright, #007acc);
+    background-color: var(--state-selected);
+    box-shadow: inset 2px 0 0 var(--accent-bright);
 }
 
 /* A `<button role="menuitem">`, not a div — that is what makes the menu
@@ -4982,7 +4982,7 @@ button.twm-about-dialog__btn--close:focus {
     position: absolute;
     z-index: 5999;
     pointer-events: none;
-    background: rgba(23, 119, 179, 0.18);
+    background: color-mix(in srgb, var(--accent-hover) 18%, transparent);
     border: 1px solid var(--accent-bright);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
     transition: left 0.09s ease, top 0.09s ease, width 0.09s ease, height 0.09s ease;
@@ -5449,7 +5449,7 @@ button.twm-about-dialog__btn--close:focus {
     inset: 0 0 auto 0;
     height: 2px;
     pointer-events: none;
-    background: var(--accent-bright, #1683c4);
+    background: var(--accent-bright);
 }
 
 /* A PREVIEW tab — opened by a single click and replaced by the next one.
@@ -5506,7 +5506,7 @@ button.twm-about-dialog__btn--close:focus {
     flex: 0 0 auto;
     font-size: 9px;
     line-height: 1;
-    color: var(--accent-bright, #1683c4);
+    color: var(--accent-bright);
 }
 
 .notebook-tabs .twm-tab-close {
@@ -5548,7 +5548,7 @@ button.twm-about-dialog__btn--close:focus {
     flex: 0 0 auto;
     align-self: stretch;
     width: 2px;
-    background: var(--accent-bright, #1683c4);
+    background: var(--accent-bright);
     pointer-events: none;
 }
 
@@ -5576,8 +5576,8 @@ button.twm-about-dialog__btn--close:focus {
  * stylesheet, so nothing here is in its scope at all. */
 .notebook-tabs--drop-target,
 .notebook-editor-container--drop-target {
-    background: color-mix(in srgb, var(--accent-bright, #1683c4) 18%, transparent);
-    box-shadow: inset 0 0 0 1px var(--accent-bright, #1683c4);
+    background: color-mix(in srgb, var(--accent-bright) 18%, transparent);
+    box-shadow: inset 0 0 0 1px var(--accent-bright);
 }
 
 /* ── The tab bar's own context menu ──────────────────────────────────
@@ -5725,7 +5725,7 @@ button.twm-about-dialog__btn--close:focus {
 }
 .split-pane-divider:hover,
 .split-pane-divider--active {
-    background: var(--accent-bright, #1683c4);
+    background: var(--accent-bright);
 }
 /* A pane is its tab bar over its body. The tab bar's own rule says
  * `height: 100%` (it fills a tile's strip); here it is a fixed 26px row, the
@@ -5748,7 +5748,7 @@ button.twm-about-dialog__btn--close:focus {
  * `setPanes()`, which is why `SplitPaneContainer` ADDS `.split-pane` to a
  * pane instead of replacing its classes with it. */
 .split-pane-container--split .editor-pane--focused > .tabs.notebook-tabs {
-    box-shadow: inset 0 -1px 0 var(--accent-bright, #1683c4);
+    box-shadow: inset 0 -1px 0 var(--accent-bright);
 }
 /* The body is the positioning anchor; the editor container fills it
  * absolutely, so its height is the body's whatever its content is and the
@@ -5811,7 +5811,7 @@ button.twm-about-dialog__btn--close:focus {
     font: inherit;
     outline: none;
 }
-.nb-search-bar__input:focus { border-color: var(--accent-bright, #1683c4); }
+.nb-search-bar__input:focus { border-color: var(--accent-bright); }
 .nb-search-bar__match-info {
     min-width: 64px;
     color: var(--text-muted);
@@ -5844,7 +5844,7 @@ button.twm-about-dialog__btn--close:focus {
 .nb-search-bar__btn--active,
 .nb-search-bar__btn--active:hover {
     background: var(--state-selected);
-    border-color: var(--accent-bright, #1683c4);
+    border-color: var(--accent-bright);
     color: var(--text-bright);
 }
 /* Two classes, for the Material Symbols tie — see `.twm-leaf__icon`. */
@@ -6158,12 +6158,12 @@ button.twm-about-dialog__btn--close:focus {
 .twm-record--state-error { box-shadow: inset 2px 0 0 0 var(--color-danger, #c74e4e); }
 /* `activeKey` — the record that is OPEN: the accent on the left edge, as
  * DataTable's `twm-dt-row--active`. It wins over a state's edge. */
-.twm-record.twm-record--active { box-shadow: inset 2px 0 0 0 var(--accent-bright, #007acc); }
+.twm-record.twm-record--active { box-shadow: inset 2px 0 0 0 var(--accent-bright); }
 .twm-record-list--clickable .twm-record { cursor: pointer; }
 .twm-record-list--clickable .twm-record:hover { background: var(--state-hover, rgba(255, 255, 255, 0.05)); }
 .twm-record:focus { outline: none; }
 .twm-record:focus-visible {
-    outline: 1px solid var(--accent-bright, #007acc);
+    outline: 1px solid var(--accent-bright);
     outline-offset: -1px;
 }
 .twm-record-list__empty {
@@ -6861,7 +6861,7 @@ button.twm-about-dialog__btn--close:focus {
     cursor: pointer;
 }
 .twm-doc-outline__link:hover { background: var(--state-hover, rgba(255, 255, 255, 0.05)); color: var(--text-primary, #e0e0e0); }
-.twm-doc-outline__link:focus-visible { outline: 1px solid var(--accent-bright, #007acc); outline-offset: -1px; }
+.twm-doc-outline__link:focus-visible { outline: 1px solid var(--accent-bright); outline-offset: -1px; }
 .twm-doc-outline__item--level-1 > .twm-doc-outline__link { color: var(--text-primary, #e0e0e0); }
 .twm-doc-outline__number {
     flex: 0 0 auto;
@@ -6876,8 +6876,8 @@ button.twm-about-dialog__btn--close:focus {
     white-space: nowrap;
 }
 .twm-doc-outline__item.twm-doc-outline__item--active > .twm-doc-outline__link {
-    border-left-color: var(--accent-bright, #007acc);
-    background: rgba(0, 122, 204, 0.15);
+    border-left-color: var(--accent-bright);
+    background: color-mix(in srgb, var(--accent-bright) 15%, transparent);
     color: var(--text-primary, #e0e0e0);
 }
 /* Listed, but nothing in the document answers to it. */
@@ -6905,7 +6905,7 @@ button.twm-about-dialog__btn--close:focus {
     border-radius: var(--radius-sm, 4px);
     cursor: text;
 }
-.twm-tag-input:focus-within { border-color: var(--accent-bright, #007acc); }
+.twm-tag-input:focus-within { border-color: var(--accent-bright); }
 .twm-tag-input--readonly {
     background: transparent;
     border-color: transparent;
@@ -8020,7 +8020,7 @@ button.twm-about-dialog__btn--close:focus {
     position: absolute;
     pointer-events: none;
     border: 1px solid var(--accent-bright);
-    background: rgba(0, 122, 204, 0.12);
+    background: color-mix(in srgb, var(--accent-bright) 12%, transparent);
 }
 .twm-canvas__marquee[hidden] { display: none; }
 
@@ -8513,7 +8513,7 @@ button.twm-about-dialog__btn--close:focus {
 .twm-flow-graph__port--data .twm-flow-graph__port-dot { border-color: #8a8f98; border-radius: 2px; }
 .twm-flow-graph--connecting .twm-flow-graph__port--in:not(:disabled) .twm-flow-graph__port-dot {
     background: var(--twm-flow-focus);
-    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.35);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 35%, transparent);
 }
 .twm-flow-graph__port--taken .twm-flow-graph__port-dot { border-color: var(--twm-flow-ok); background: var(--twm-flow-ok); }
 .twm-flow-graph__port--taken .twm-flow-graph__port-count { color: var(--twm-flow-ok); }
@@ -8525,7 +8525,7 @@ button.twm-about-dialog__btn--close:focus {
 }
 .twm-flow-graph__port--can-drop .twm-flow-graph__port-dot {
     background: var(--twm-flow-focus);
-    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.35);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 35%, transparent);
 }
 
 /* ── a line ─────────────────────────────────────────────────────────── */
@@ -9342,9 +9342,9 @@ button.twm-about-dialog__btn--close:focus {
     display: none !important;
 }
 .twm-flow-lanes {
-    --twm-lanes-wire: #5b9bd5;
+    --twm-lanes-wire: var(--accent-light);
     --twm-lanes-surface: #1b1b1c;
-    --twm-lanes-ring: #1683c4;
+    --twm-lanes-ring: var(--accent-bright-hover);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -9467,7 +9467,7 @@ button.twm-about-dialog__btn--close:focus {
     border-left: 1px solid var(--surface-3);
 }
 .twm-flow-lanes__show-btn[aria-pressed="true"] {
-    background: #0f6fa8;
+    background: var(--accent-pressed);
     color: var(--text-bright);
 }
 .twm-flow-lanes__show-btn:focus-visible,
@@ -9710,7 +9710,7 @@ button.twm-about-dialog__btn--close:focus {
 .twm-flow-lanes__node--selected .twm-flow-lanes__card,
 .twm-flow-lanes__card:focus-visible {
     filter: drop-shadow(0 0 1px var(--twm-lanes-ring)) drop-shadow(0 0 1px var(--twm-lanes-ring))
-            drop-shadow(0 0 5px rgba(22, 131, 196, 0.8));
+            drop-shadow(0 0 5px color-mix(in srgb, var(--twm-lanes-ring) 80%, transparent));
 }
 .twm-flow-lanes__card:hover .twm-flow-lanes__body {
     filter: brightness(1.12);
@@ -10033,7 +10033,7 @@ button.twm-about-dialog__btn--close:focus {
 }
 .twm-flow-lanes__cell--new,
 .twm-flow-lanes__cell--changed {
-    background: rgba(22, 131, 196, 0.07);
+    background: color-mix(in srgb, var(--twm-lanes-ring) 7%, transparent);
 }
 .twm-flow-lanes__error {
     flex: 0 0 auto;
@@ -10067,7 +10067,7 @@ button.twm-about-dialog__btn--close:focus {
 }
 .twm-flow-lanes__column--new,
 .twm-flow-lanes__column--changed {
-    background: rgba(22, 131, 196, 0.14);
+    background: color-mix(in srgb, var(--twm-lanes-ring) 14%, transparent);
 }
 .twm-flow-lanes__column-name {
     font-family: var(--font-family-mono);
@@ -10080,7 +10080,7 @@ button.twm-about-dialog__btn--close:focus {
 }
 .twm-flow-lanes__column--new .twm-flow-lanes__column-type,
 .twm-flow-lanes__column--changed .twm-flow-lanes__column-type {
-    color: #9fd0f0;
+    color: var(--accent-lightest);
 }
 .twm-flow-lanes__column-origin {
     margin-left: auto;