flexdesk 0.17.10 → 0.17.11

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # 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

package/css/base.css

@@ -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;
 }
@@ -3283,22 +3283,21 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 /* Selected — set by `_onConfigClick()` while the config dialog is open, and
-   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. */
+   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
@@ -3401,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 {
@@ -3489,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 ────────────────────────────────────────────────── */
@@ -3694,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;
@@ -4072,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,
@@ -4683,7 +4681,7 @@ button.twm-about-dialog__btn--close:focus {
     font-size: var(--font-size-sm);
 }
 .twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper:focus-within {
-    border-color: #79b8f8;
+    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 {
@@ -4984,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;
@@ -9344,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;
@@ -9469,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,
@@ -9712,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);
@@ -10035,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;
@@ -10069,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);
@@ -10082,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;

package/css/flexdesk.css

@@ -2999,11 +2999,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;
@@ -3074,7 +3074,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;
@@ -3147,7 +3147,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 {
@@ -3256,7 +3256,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;
@@ -3298,7 +3298,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 */
@@ -3315,7 +3315,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;
 }
@@ -3808,22 +3808,21 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 /* Selected — set by `_onConfigClick()` while the config dialog is open, and
-   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. */
+   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
@@ -3926,7 +3925,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 {
@@ -4014,7 +4013,7 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 .tile-menu-item:hover .material-symbols-outlined {
-    color: #78b9ff;
+    color: var(--accent-lighter);
 }
 
 /* ── the content area ────────────────────────────────────────────────── */
@@ -4528,12 +4527,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;
@@ -4692,7 +4691,7 @@ body.twm-window-maximized .twm-resize-handle {
     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;
@@ -4986,12 +4985,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,
@@ -5597,7 +5595,7 @@ button.twm-about-dialog__btn--close:focus {
     font-size: var(--font-size-sm);
 }
 .twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper:focus-within {
-    border-color: #79b8f8;
+    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 {
@@ -5915,8 +5913,8 @@ button.twm-about-dialog__btn--close:focus {
     color: var(--text-bright);
 }
 .twm-btn--primary:hover:not(:disabled) {
-    background: #1486cf;
-    border-color: #1486cf;
+    background: var(--accent-bright-hover);
+    border-color: var(--accent-bright-hover);
 }
 /* Context menu separator (matches Ecosim's .twm-context-menu look). */
 .twm-context-menu__separator {
@@ -6438,8 +6436,8 @@ button.twm-about-dialog__btn--close:focus {
     font-weight: 600;
 }
 .twm-managed-window--modal .twm-modal__actions .twm-btn--primary:hover:not(:disabled) {
-    background: #1683c4;
-    border-color: #1683c4;
+    background: var(--accent-bright-hover);
+    border-color: var(--accent-bright-hover);
 }
 .twm-managed-window--modal .twm-modal__actions .twm-btn--danger {
     background: #8b2a2a;
@@ -6705,7 +6703,7 @@ button.twm-about-dialog__btn--close:focus {
     font-size: 10px;
 }
 .twm-landing__pane--focused .twm-landing__pane-head {
-    background: rgba(17, 119, 179, 0.10);
+    background: color-mix(in srgb, var(--accent-hover) 10%, transparent);
 }
 .twm-landing__pane--focused .twm-landing__pane-title {
     color: var(--ea-accent);
@@ -6757,7 +6755,7 @@ button.twm-about-dialog__btn--close:focus {
    so the same arrow-key affordance reads identically across modes. */
 .twm-row-cursor {
     box-shadow: inset 2px 0 0 var(--ea-accent);
-    background: rgba(17, 119, 179, 0.12) !important;
+    background: color-mix(in srgb, var(--accent-hover) 12%, transparent) !important;
 }
 /* Quick-action strip — horizontal bar below the tables. Same chrome
    tone as `.twm-entity-header` so the page reads as a single stack:
@@ -6797,7 +6795,7 @@ button.twm-about-dialog__btn--close:focus {
 }
 .twm-action-btn:hover {
     border-color: var(--ea-accent);
-    background: rgba(17, 119, 179, 0.08);
+    background: color-mix(in srgb, var(--accent-hover) 8%, transparent);
 }
 .twm-action-btn:disabled,
 .twm-action-btn[aria-disabled="true"] {
@@ -13606,9 +13604,9 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     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;
@@ -13731,7 +13729,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     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,
@@ -13974,7 +13972,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 .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);
@@ -14297,7 +14295,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .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;
@@ -14331,7 +14329,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .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);
@@ -14344,7 +14342,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .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;

package/css/overrides.css

@@ -130,8 +130,8 @@
     color: var(--text-bright);
 }
 .twm-btn--primary:hover:not(:disabled) {
-    background: #1486cf;
-    border-color: #1486cf;
+    background: var(--accent-bright-hover);
+    border-color: var(--accent-bright-hover);
 }
 /* Context menu separator (matches Ecosim's .twm-context-menu look). */
 .twm-context-menu__separator {
@@ -481,8 +481,8 @@
     font-weight: 600;
 }
 .twm-managed-window--modal .twm-modal__actions .twm-btn--primary:hover:not(:disabled) {
-    background: #1683c4;
-    border-color: #1683c4;
+    background: var(--accent-bright-hover);
+    border-color: var(--accent-bright-hover);
 }
 .twm-managed-window--modal .twm-modal__actions .twm-btn--danger {
     background: #8b2a2a;
@@ -748,7 +748,7 @@
     font-size: 10px;
 }
 .twm-landing__pane--focused .twm-landing__pane-head {
-    background: rgba(17, 119, 179, 0.10);
+    background: color-mix(in srgb, var(--accent-hover) 10%, transparent);
 }
 .twm-landing__pane--focused .twm-landing__pane-title {
     color: var(--ea-accent);
@@ -800,7 +800,7 @@
    so the same arrow-key affordance reads identically across modes. */
 .twm-row-cursor {
     box-shadow: inset 2px 0 0 var(--ea-accent);
-    background: rgba(17, 119, 179, 0.12) !important;
+    background: color-mix(in srgb, var(--accent-hover) 12%, transparent) !important;
 }
 /* Quick-action strip — horizontal bar below the tables. Same chrome
    tone as `.twm-entity-header` so the page reads as a single stack:
@@ -840,7 +840,7 @@
 }
 .twm-action-btn:hover {
     border-color: var(--ea-accent);
-    background: rgba(17, 119, 179, 0.08);
+    background: color-mix(in srgb, var(--accent-hover) 8%, transparent);
 }
 .twm-action-btn:disabled,
 .twm-action-btn[aria-disabled="true"] {

package/css/tokens.css

@@ -96,6 +96,11 @@
        sortable list's drop line and add button, a focused filter input. */
     --accent-light:     color-mix(in srgb, var(--accent-bright) 70%, white);  /* ≈ #4da2db, was #569cd6 */
     --accent-lighter:   color-mix(in srgb, var(--accent-bright) 55%, white);  /* ≈ #73b6e3, was #6eb3e9 */
+    /* BUG-0045: the other accent shades. A primary button's hover, the window
+       bar's hovered item; a pressed accent control; the lightest accent text. */
+    --accent-bright-hover: color-mix(in srgb, var(--accent-bright) 90%, white);  /* ≈ #1987d1, was #1486cf / #1683c4 */
+    --accent-pressed:      color-mix(in srgb, var(--accent-hover) 90%, black);   /* ≈ #0f6ba8, was #1a6aa5 / #0f6fa8 */
+    --accent-lightest:     color-mix(in srgb, var(--accent-bright) 36%, white);  /* ≈ #a3cfed, was #9ecfff / #9fd0f0 */
 
     /* ── Semantic colors ───────────────────────────────────────── */
     --color-success:        #3fb950;

package/dist/flexdesk.css

@@ -2999,11 +2999,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;
@@ -3074,7 +3074,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;
@@ -3147,7 +3147,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 {
@@ -3256,7 +3256,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;
@@ -3298,7 +3298,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 */
@@ -3315,7 +3315,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;
 }
@@ -3808,22 +3808,21 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 /* Selected — set by `_onConfigClick()` while the config dialog is open, and
-   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. */
+   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
@@ -3926,7 +3925,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 {
@@ -4014,7 +4013,7 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 .tile-menu-item:hover .material-symbols-outlined {
-    color: #78b9ff;
+    color: var(--accent-lighter);
 }
 
 /* ── the content area ────────────────────────────────────────────────── */
@@ -4528,12 +4527,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;
@@ -4692,7 +4691,7 @@ body.twm-window-maximized .twm-resize-handle {
     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;
@@ -4986,12 +4985,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,
@@ -5597,7 +5595,7 @@ button.twm-about-dialog__btn--close:focus {
     font-size: var(--font-size-sm);
 }
 .twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper:focus-within {
-    border-color: #79b8f8;
+    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 {
@@ -5915,8 +5913,8 @@ button.twm-about-dialog__btn--close:focus {
     color: var(--text-bright);
 }
 .twm-btn--primary:hover:not(:disabled) {
-    background: #1486cf;
-    border-color: #1486cf;
+    background: var(--accent-bright-hover);
+    border-color: var(--accent-bright-hover);
 }
 /* Context menu separator (matches Ecosim's .twm-context-menu look). */
 .twm-context-menu__separator {
@@ -6438,8 +6436,8 @@ button.twm-about-dialog__btn--close:focus {
     font-weight: 600;
 }
 .twm-managed-window--modal .twm-modal__actions .twm-btn--primary:hover:not(:disabled) {
-    background: #1683c4;
-    border-color: #1683c4;
+    background: var(--accent-bright-hover);
+    border-color: var(--accent-bright-hover);
 }
 .twm-managed-window--modal .twm-modal__actions .twm-btn--danger {
     background: #8b2a2a;
@@ -6705,7 +6703,7 @@ button.twm-about-dialog__btn--close:focus {
     font-size: 10px;
 }
 .twm-landing__pane--focused .twm-landing__pane-head {
-    background: rgba(17, 119, 179, 0.10);
+    background: color-mix(in srgb, var(--accent-hover) 10%, transparent);
 }
 .twm-landing__pane--focused .twm-landing__pane-title {
     color: var(--ea-accent);
@@ -6757,7 +6755,7 @@ button.twm-about-dialog__btn--close:focus {
    so the same arrow-key affordance reads identically across modes. */
 .twm-row-cursor {
     box-shadow: inset 2px 0 0 var(--ea-accent);
-    background: rgba(17, 119, 179, 0.12) !important;
+    background: color-mix(in srgb, var(--accent-hover) 12%, transparent) !important;
 }
 /* Quick-action strip — horizontal bar below the tables. Same chrome
    tone as `.twm-entity-header` so the page reads as a single stack:
@@ -6797,7 +6795,7 @@ button.twm-about-dialog__btn--close:focus {
 }
 .twm-action-btn:hover {
     border-color: var(--ea-accent);
-    background: rgba(17, 119, 179, 0.08);
+    background: color-mix(in srgb, var(--accent-hover) 8%, transparent);
 }
 .twm-action-btn:disabled,
 .twm-action-btn[aria-disabled="true"] {
@@ -13606,9 +13604,9 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     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;
@@ -13731,7 +13729,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     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,
@@ -13974,7 +13972,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 .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);
@@ -14297,7 +14295,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .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;
@@ -14331,7 +14329,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .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);
@@ -14344,7 +14342,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .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;

package/dist/tokens.css

@@ -96,6 +96,11 @@
        sortable list's drop line and add button, a focused filter input. */
     --accent-light:     color-mix(in srgb, var(--accent-bright) 70%, white);  /* ≈ #4da2db, was #569cd6 */
     --accent-lighter:   color-mix(in srgb, var(--accent-bright) 55%, white);  /* ≈ #73b6e3, was #6eb3e9 */
+    /* BUG-0045: the other accent shades. A primary button's hover, the window
+       bar's hovered item; a pressed accent control; the lightest accent text. */
+    --accent-bright-hover: color-mix(in srgb, var(--accent-bright) 90%, white);  /* ≈ #1987d1, was #1486cf / #1683c4 */
+    --accent-pressed:      color-mix(in srgb, var(--accent-hover) 90%, black);   /* ≈ #0f6ba8, was #1a6aa5 / #0f6fa8 */
+    --accent-lightest:     color-mix(in srgb, var(--accent-bright) 36%, white);  /* ≈ #a3cfed, was #9ecfff / #9fd0f0 */
 
     /* ── Semantic colors ───────────────────────────────────────── */
     --color-success:        #3fb950;

package/docs/concepts/styling.md

@@ -105,11 +105,77 @@ What changed in the stylesheet:
   `flexdesk.css` now needs `tokens.css` (or your own definitions of these tokens).
 
 Not part of the accent, and still literals: the autocomplete's type colours
-(`stock` is `#569cd6` beside `#4ec9b0`, `#ce9178`, …), the notification
-border `#4fc1ff`, and links (`#3794ff`).
-
-Some accent blues in other shades are still literals, because no mix of an
-accent token gives their colour exactly. They include the selected tile
+(`stock` is `#569cd6` beside `#4ec9b0`, `#ce9178`, …), the DataTable header
+icons' type colours (`flow` is `#268bd2` beside `#6c71c4`, `#cb4b16`,
+`#859900`), the notification border `#4fc1ff`, links (`#3794ff`, the about
+dialog's link hover `#4da6ff`, and the breadcrumb and plot-series links), and the flow kit's categorical colours
+(`--twm-flow-blue-*` beside `--twm-flow-indigo-*`, …). The (0.17.11) section
+lists the rest.
+
+0.17.10 left the accent blues in other shades as literals: the selected tile
 (`#78b9ff`), the primary button's hover (`#1683c4`, `#1486cf`), the row
 cursor and snap preview (`rgba(17, 119, 179, a)`), and some flow-lanes and
-plot-window colours. To retheme them, override their rules.
+plot-window colours. 0.17.11 derives them too (next section).
+
+## Retheming the accent shades (0.17.11)
+
+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.
+`--accent` and `--accent-bright` stay two tokens.
+
+Three tokens are new in `tokens.css`, each read by more than one rule:
+
+- `--accent-bright-hover`: `color-mix(in srgb, var(--accent-bright) 90%, white)`,
+  about `#1987d1`. A primary button's hover (the modal's too) and the window
+  bar's hovered item.
+- `--accent-pressed`: `color-mix(in srgb, var(--accent-hover) 90%, black)`,
+  about `#0f6ba8`. The window bar's pressed item and the flow lanes' pressed
+  show button.
+- `--accent-lightest`: `color-mix(in srgb, var(--accent-bright) 36%, white)`,
+  about `#a3cfed`. The lightest accent text, after `--accent-light` and
+  `--accent-lighter`.
+
+They are defined from the accent tokens in `tokens.css`. If you supply your
+own token definitions instead of `tokens.css`, define these three as well:
+the rules that read them have no fallback.
+
+None of the old colours is an exact mix, so each moves to the nearest one,
+by the ΔE (OKLab × 100) below. A tint's ΔE is measured over `--surface-0`
+(`#1e1e1e`), where it is seen, and every colour is rounded to 8 bits per
+channel first.
+
+| Where | Was | Now reads | Default now | ΔE |
+|---|---|---|---|---|
+| `.twm-btn--primary:hover` | `#1486cf` | `--accent-bright-hover` | `#1987d1` | 0.4 |
+| the modal's primary button hover | `#1683c4` | `--accent-bright-hover` | `#1987d1` | 2.2 |
+| `.twm-bar-windows__item:hover` | `#268bd2` | `--accent-bright-hover` | `#1987d1` | 1.3 |
+| `.twm-bar-windows__item:active` | `#1a6aa5` | `--accent-pressed` | `#0f6ba8` | 0.6 |
+| the plot series and plot config checkboxes (`accent-color`), the plot config select's focus border | `#268bd2` | `color-mix(in srgb, var(--accent-bright) 87%, white)` | `#218bd3` | 0.3 |
+| the plot window toolbar's active button, the computing spinner | `#4a90d9` | `color-mix(in srgb, var(--accent-bright) 80%, white)` | `#3395d6` | 2.1 |
+| the active button's tint and hover tint, the plot table's hovered row | `rgba(74, 144, 217, 0.15 \| 0.25 \| 0.1)` | that 80% mix at the same alpha | | 0.6, 0.9, 0.5 |
+| the selected tile's border and title, the tile header buttons' and tile menu's hover icons, the action dropdown's icons | `#78b9ff` | `--accent-lighter` | `#73b6e3` | 4.1 |
+| the selected tile's ring and header tint | `rgba(120, 185, 255, 0.3 \| 0.1)` | `--accent-lighter` at the same alpha | | 1.6, 0.6 |
+| the action dropdown's hovered or focused icon | `#9ecfff` | `--accent-lightest` | `#a3cfed` | 2.6 |
+| the notebook autocomplete's focused border | `#79b8f8` | `--accent-lighter` | `#73b6e3` | 3.2 |
+| `.twm-row-cursor`, the focused landing pane's head, `.twm-action-btn:hover` | `rgba(17, 119, 179, 0.12 \| 0.10 \| 0.08)` | `--accent-hover` at the same alpha | | 0.2, 0.2, 0.2 |
+| `.twm-snap-preview` | `rgba(23, 119, 179, 0.18)` | `--accent-hover` at 18% | | 0.2 |
+| the flow lanes' wire, `--twm-lanes-wire` | `#5b9bd5` | `--accent-light` | `#4da2db` | 2.0 |
+| the flow lanes' ring, `--twm-lanes-ring` | `#1683c4` | `--accent-bright-hover` | `#1987d1` | 2.2 |
+| the flow lanes' pressed show button | `#0f6fa8` | `--accent-pressed` | `#0f6ba8` | 1.2 |
+| the selected card's glow, a new or changed cell and column | `rgba(22, 131, 196, 0.8 \| 0.07 \| 0.14)` | `--twm-lanes-ring` at the same alpha | | 1.7, 0.3, 0.4 |
+| a new or changed column's type | `#9fd0f0` | `--accent-lightest` | `#a3cfed` | 0.6 |
+
+The largest shift is the selected tile's light blue: `#78b9ff` is bluer
+than any mix of `#007acc` with white, and `--accent-lighter` is the nearest.
+`--twm-lanes-wire` and `--twm-lanes-ring` are set on `.twm-flow-lanes` and
+read `--accent-light` and `--accent-bright-hover`, so they follow the accent
+set on `:root` and can still be set per lanes view.
+
+Still literals, because they are not the accent: the colours listed in the
+(0.17.10) section above, the charts' series palette (`#268bd2` first in
+`COLOR_PALETTE`, `#1f77b4` as the colour pickers' default), and the Monaco
+editor theme's selection colours, which Monaco takes as hex values and not
+as CSS.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.17.10",
+    "version": "0.17.11",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {