flexdesk 0.17.8 → 0.17.10

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## 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
+section of the docs headed "(0.17.9)"; each entry links to it.
+
+### Added and changed
+
+- [Context menus stay inside the window](docs/components/menus.md#context-menus-stay-inside-the-window-0179): `showContextMenu(x, y, items, onAction)`, the DataTable's right-click menu and `NotebookTabBar`'s tab menu are placed the same way, however many items they hold. A menu is capped at the window's height less 8px above and below and scrolls inside when it is longer (flexdesk.css gives `.twm-context-menu` and `.nb-context-menu` `overflow-y: auto` and `box-sizing: border-box`); it opens with its top-left corner at the pointer and moves left or up only as far as it must to fit, never past the window's top or left edge. Before, a menu had no cap: the DataTable's opened above the window's top edge and `showContextMenu`'s ran off the bottom, so the items past the edge could not be reached. All three now take focus on the first enabled item, move it with Up/Down (wrapping), Home and End, scrolling the focused item into view, choose with Enter or Space, close with Escape and give focus back when they close (before, only `showContextMenu` did); scrolling the menu itself does not close it. Nothing changes in how you call them (BUG-0040).
+- [The plot config editor writes no stray "null"](docs/components/charts.md#the-plot-config-editor-writes-no-stray-null-0179): `renderPlotConfigEditor` appended the sections a subplot does not have as `null`, which `Element.append()` writes as the text `null`, so every 2D subplot showed a `null` line where a 3D chart's **Z axis** goes, and an editor without `seriesTransforms` showed another where **Derived series** goes. A section the subplot does not have is now left out; nothing else about the editor changed (BUG-0041).
+- [Interpolation `'auto'` is a listed choice](docs/components/charts.md#interpolation-auto-is-a-listed-choice-0179): a subplot's `interpolation` is `'linear'`, `'step'`, `'cubic'` or `'auto'`, and `'auto'` draws straight segments exactly as `'linear'` does (`buildTrace` gives both the Plotly line shape `linear`, as it always has). `renderPlotConfigEditor`'s **Interpolation** select now offers **Auto**, **Linear**, **Step** and **Cubic spline**, so a subplot saved with `'auto'` opens with Auto chosen instead of `auto (not found)` and keeps `'auto'` until another value is picked. A new subplot is still `'linear'`, and every value draws as before (BUG-0042).
+- [Action dropdowns: positioning against the end edge](docs/components/menus.md#action-dropdowns-positioning-against-the-end-edge-0179): `ActionDropdown.position(trigger, menu, { align })` takes an optional third argument. `align: 'start'` (the default, and what it did before) lines the menu up with the trigger's left edge first, `'end'` with its right edge; either flips to the other edge when the menu would leave the window (BUG-0043).
+- [A tile's ⋯ menu is drawn over the page](docs/components/tiles.md#the--menu-is-drawn-over-the-page-0179): a tile's **More actions** menu (`.tile-menu-dropdown`) is no longer drawn inside the tile. While it is open it is moved to `document.body` (or to the open modal's host, as `showContextMenu` does), placed with `ActionDropdown.position(button, menu, { align: 'end' })` as `position: fixed` on `--z-over-windows`, so neighbouring tiles and the managed window a grid sits in no longer clip it, and it stays 8px inside the window, opening under the button when it fits there, else above it when it fits there, else on the side with more room, scrolling inside. Choosing an entry, a press outside it or the ⋯ button again closes it and puts it back in the tile's header; `dispose()` closes an open menu first. Until 0.17.8 the menu was `position: absolute` inside the tile, so in a tile narrower than about 220px its left part and its labels were cut off (BUG-0043).
+
+### Removed or renamed exports
+
+None. Compared with 0.17.8, 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: `ActionDropdown.position` takes an optional third argument,
+`{ align }`; `renderPlotConfigEditor` lists `'auto'` among the interpolations;
+an open tile ⋯ menu lives outside `tile.element` until it closes; and
+flexdesk.css caps `.twm-context-menu` and `.nb-context-menu` at the window's
+height with `overflow-y: auto`, and draws `.tile-menu-dropdown` on
+`--z-over-windows` (see above).
+
 ## 0.17.8 (2026-10-24)
 
 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;
@@ -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,13 +3279,15 @@ 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. #78b9ff is a literal:
+   `--accent-bright` is #007acc, which is a border colour on this background
+   and not a text one, and the derived light accents (`--accent-light`,
+   `--accent-lighter`) are less blue than this, so using them would change
+   the colour. */
 .tile.tile--selected {
     border-color: #78b9ff;
     box-shadow: 0 0 0 2px rgba(120, 185, 255, 0.3), var(--shadow-md);
@@ -3434,11 +3436,14 @@ body.twm-window-maximized .twm-resize-handle {
     position: relative;
 }
 
+/* While open the menu is moved to document.body and placed `position: fixed`
+   by `ActionDropdown.position` (inline styles), so a narrow tile cannot clip
+   it; --z-over-windows keeps it over a managed window holding the grid. */
 .tile-menu-dropdown {
     position: absolute;
     top: 100%;
     right: 0;
-    z-index: var(--z-dropdown);
+    z-index: var(--z-over-windows);
     min-width: 180px;
     padding: var(--space-xs) 0;
     background: var(--surface-2);
@@ -3553,8 +3558,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;
@@ -4674,12 +4679,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);
+    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;
@@ -4864,7 +4869,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;
@@ -4912,8 +4917,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
@@ -5446,7 +5451,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.
@@ -5503,7 +5508,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 {
@@ -5545,7 +5550,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;
 }
 
@@ -5573,8 +5578,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 ──────────────────────────────────
@@ -5604,6 +5609,23 @@ button.twm-about-dialog__btn--close:focus {
 
 .nb-context-menu.visible { opacity: 1; }
 
+/* ── Context menus stay inside the window (0.17.9, BUG-0040) ─────────
+ * `showContextMenu`, the DataTable's right-click menu and NotebookTabBar's tab
+ * menu are placed by src/ui/utils/menu_viewport.js, which sets an inline
+ * max-height of the window's height less a margin top and bottom. Here: the
+ * same cap for a menu placed before that runs, border-box so the cap includes
+ * padding and border, and scrolling inside when the items are longer — they
+ * had no max-height and no overflow, so a 100-item menu ran off the window and
+ * its far items could not be reached. */
+.twm-context-menu,
+.nb-context-menu {
+    box-sizing: border-box;
+    max-height: calc(100vh - 2 * var(--space-md));
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
 .nb-context-menu__item {
     display: flex;
     align-items: center;
@@ -5705,7 +5727,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
@@ -5728,7 +5750,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
@@ -5791,7 +5813,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);
@@ -5824,7 +5846,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`. */
@@ -6138,12 +6160,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 {
@@ -6841,7 +6863,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;
@@ -6856,8 +6878,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. */
@@ -6885,7 +6907,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;
@@ -8000,7 +8022,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; }
 
@@ -8493,7 +8515,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); }
@@ -8505,7 +8527,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 ─────────────────────────────────────────────────────────── */