flexdesk 0.17.9 → 0.17.11

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);
@@ -781,7 +781,7 @@
 }
 .twm-entity-header__field select:focus {
     outline: none;
-    border-color: var(--ea-accent, #5aa3e8);
+    border-color: var(--ea-accent);
 }
 .twm-entity-header__field select option { background: var(--ea-input-bg, #1e1e1e); color: var(--ea-text, #ddd); }
 .twm-landing__table table {
@@ -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"] {
@@ -1004,7 +1004,7 @@ body.twm-dragging * { user-select: none; }
 }
 .twm-leaf--focused {
     border-color: var(--accent-bright);
-    box-shadow: 0 0 0 1px rgba(0, 122, 204, 0.25) inset;
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-bright) 25%, transparent) inset;
 }
 .twm-leaf__chrome {
     display: flex;
@@ -1106,15 +1106,15 @@ body.twm-dragging * { user-select: none; }
  * rather than a border, because a border changes the box and every tile in
  * the row would reflow by a pixel as the pointer crossed between them. */
 .twm-leaf--drop-target {
-    outline: 2px solid var(--accent-bright, #1683c4);
+    outline: 2px solid var(--accent-bright);
     outline-offset: -2px;
 }
 
 /* A STRIP ARMED TO RECEIVE — the drop that adds the tab at the end of this
  * tile's list rather than into a zone of its body. */
 .twm-leaf__tabbar--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 BEING CARRIED. `DragReorder` has put `.dragging` on the TOP
@@ -1195,7 +1195,7 @@ body.twm-dragging * { user-select: none; }
     position: absolute;
     inset: 0;
     pointer-events: none;
-    border-top: 1px solid var(--accent-bright, #1683c4);
+    border-top: 1px solid var(--accent-bright);
     clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
 }
 .twm-leaf__tab-label {
@@ -1342,7 +1342,7 @@ body.twm-dragging * { user-select: none; }
 .twm-tile-tabmenu__item--cursor {
     /* Keyboard cursor reads slightly heavier than hover so a
      * mouse-cursor-on-a-different-row state is still legible. */
-    outline: 1px solid var(--accent-bright, #1683c4);
+    outline: 1px solid var(--accent-bright);
     outline-offset: -1px;
 }
 .twm-tile-tabmenu__item-hint {
@@ -1421,8 +1421,8 @@ body.twm-dragging * { user-select: none; }
     align-items: center;
     gap: var(--space-xs);
     padding: 2px 4px 2px 8px;
-    background: var(--state-selected, rgba(17, 119, 179, 0.18));
-    border: 1px solid var(--accent-bright, #1683c4);
+    background: var(--state-selected);
+    border: 1px solid var(--accent-bright);
     border-radius: 2px;
     color: var(--text-bright, #fff);
     font-size: var(--font-size-xs);
@@ -2078,7 +2078,7 @@ tr:hover .twm-row-action { opacity: 1; }
 }
 .twm-data-table-component--compact .twm-pagination-controls .twm-pagination-btn:hover:not(:disabled) {
     color: var(--ea-text, #ddd) !important;
-    border-color: var(--ea-accent, #1177b3) !important;
+    border-color: var(--ea-accent) !important;
 }
 /* Text labels inside the pager — the "Rows X–Y of Z" and "Page X of
  * Y" spans don't have classes (just inline style), so target every
@@ -2107,7 +2107,7 @@ tr:hover .twm-row-action { opacity: 1; }
     width: 28px;
     height: 28px;
     border: 2px solid rgba(255, 255, 255, 0.18);
-    border-top-color: var(--ea-accent, #1177b3);
+    border-top-color: var(--ea-accent);
     border-radius: 50%;
     animation: data-table__spin 0.7s linear infinite;
 }
@@ -2284,7 +2284,7 @@ tr:hover .twm-row-action { opacity: 1; }
     width: 18px;
     height: 18px;
     border: 2px solid var(--ea-border, #333);
-    border-top-color: var(--accent, #4a90e2);
+    border-top-color: var(--accent);
     border-radius: 50%;
     animation: twm-tile-loading-spin 0.7s linear infinite;
 }

package/css/tokens.css

@@ -90,6 +90,18 @@
     --accent-hover:     #1177bb;
     --accent-bright:    #007acc;  /* --layout-accent value */
 
+    /* Every other accent colour is DERIVED from the three above, so a
+       consumer that sets them (on :root) rethemes the whole accent (BUG-0044).
+       The light accents mix --accent-bright toward white: a slider thumb, a
+       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;
     --color-warning:        #ff9800;
@@ -100,7 +112,9 @@
     /* ── Surface state overlays ────────────────────────────────── */
     --state-hover:    rgba(255, 255, 255, 0.05);
     --state-active:   rgba(255, 255, 255, 0.08);
-    --state-selected: rgba(0, 122, 204, 0.15);
+    --state-selected: color-mix(in srgb, var(--accent-bright) 15%, transparent);  /* rgba(0, 122, 204, 0.15) */
+    /* A DataTable row or cell that has just arrived flashes from this to transparent. */
+    --twm-dt-new-bg:  color-mix(in srgb, var(--accent-bright) 22%, transparent);  /* rgba(0, 122, 204, 0.22) */
 
     /* ── Overlay scrollbars (installOverlayScrollbar) ─────────── */
     --scrollbar-size:         6px;
@@ -114,7 +128,7 @@
     --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
     --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
     --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.5);
-    --shadow-glow: 0 0 2px rgba(0, 122, 204, 0.3);
+    --shadow-glow: 0 0 2px color-mix(in srgb, var(--accent-bright) 30%, transparent);  /* rgba(0, 122, 204, 0.3) */
 
     /* ── Z-index layers ───────────────────────────────────────── */
     --z-base:     0;