@young1lin/dsh-ui-gitworkbench 0.1.12 → 0.1.13

package/src/client/styles/controls.css

@@ -82,9 +82,20 @@
    because it has to win against the grouped rule above by source order. */
 .scopeBtn { flex: 1 1 0; }
 
-/* The single "this one is selected" idiom. Three different ones — accent chip,
-   bordered panel, left accent bar — used to mean the same thing in one drawer. */
-.scopeBtnActive, .miniBtnPrimary, .segmentActive, .refRowActive, .paletteRowActive {
+/* The single "this one is selected" idiom: accent text, in an accent tint,
+   inside an accent border. Everything that can be the chosen one is here — a
+   tree leaf, a commit, a ref, a palette, a segment, a funnel tab, a date
+   bound, a preset — because the drawer had reached three spellings of one
+   meaning (this chip, a filled panel, a left accent bar) and showed two of
+   them at once whenever the Changes tree sat beside the history.
+
+   A modifier applied as `${css.base} ${css.mod}` carries the SAME specificity
+   as its base, so source order decides. Every base named here is declared
+   above this rule; `.fbRow.fbRowActive` is the one exception and is written
+   qualified, because `files.css` is imported after this file. */
+.scopeBtnActive, .miniBtnPrimary, .segmentActive, .refRowActive, .paletteRowActive,
+.fileActive, .commitActive, .funnelTabActive, .funnelBoundBtnActive, .funnelPresetActive,
+.fbRow.fbRowActive {
   border-color: var(--gs-accent-border);
   background: var(--gs-accent-bg);
   color: var(--gs-accent);
@@ -125,10 +136,10 @@
 /* Publishing a branch that exists nowhere else is the one moment this bar has a
    primary action, so it gets the solid fill Commit uses — and only then. */
 .btnPrimary {
-  border-color: var(--gs-accent); background: var(--gs-accent); color: var(--gs-on-accent, #fff);
+  border-color: var(--gs-accent); background: var(--gs-accent); color: var(--gs-on-accent);
   font-weight: 600;
 }
-.btnPrimary:hover:not(:disabled) { background: var(--gs-accent); color: var(--gs-on-accent, #fff); border-color: var(--gs-accent); }
+.btnPrimary:hover:not(:disabled) { background: var(--gs-accent); color: var(--gs-on-accent); border-color: var(--gs-accent); }
 
 /* The count riding inside Pull / Push. Reads as part of the label rather than a
    badge stuck on it: same colour, tabular, just set apart by a hairline. */
@@ -165,7 +176,7 @@
   background: var(--gs-border);
   background-clip: padding-box;
   border: 3px solid transparent;
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
 }
 .drawer ::-webkit-scrollbar-thumb:hover { background: var(--gs-fg-faint); background-clip: padding-box; }
 
@@ -219,7 +230,7 @@
    `.btn` wherever either rule sits, which is the failure the drawer already
    shipped once. */
 .btn.btnDanger {
-  border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent, #fff);
+  border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent);
   font-weight: 600;
 }
-.btn.btnDanger:hover:not(:disabled) { border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent, #fff); }
+.btn.btnDanger:hover:not(:disabled) { border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent); }

package/src/client/styles/files.css

@@ -21,7 +21,7 @@
   color: var(--gs-fg);
   background: var(--gs-surface);
   border: 1px solid var(--gs-border);
-  border-radius: 4px;
+  border-radius: var(--gs-r-control);
 }
 .fbSearch:focus { outline: none; border-color: var(--gs-accent); }
 .fbNote { flex: none; font-size: var(--gs-t-meta); color: var(--gs-fg-dim); padding: 2px 4px; }
@@ -38,14 +38,16 @@
   text-align: left;
   background: none;
   border: 0;
-  border-radius: 3px;
+  border-radius: var(--gs-r-control);
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.fbRow:hover { background: var(--gs-hover); }
-.fbRowActive { background: var(--gs-selected); color: var(--gs-fg); }
+.fbRow:hover { background: var(--gs-raise); }
+/* .fbRowActive: see the shared selected-state rule in controls.css. It is
+   written there qualified, because this file is imported after that one and a
+   bare modifier declared above its base loses the cascade. */
 .fbDirName { overflow: hidden; text-overflow: ellipsis; }
 .fbFileName { overflow: hidden; text-overflow: ellipsis; }
 .fbMain {

package/src/client/styles/history-filters.css

@@ -47,7 +47,7 @@
   font-family: inherit; font-size: var(--gs-t-dense); line-height: 20px;
   cursor: pointer;
 }
-.filterChipRemove:hover { color: var(--gs-danger, var(--gs-fg)); }
+.filterChipRemove:hover { color: var(--gs-del); }
 .filterClear {
   border: none; background: transparent;
   padding: 2px 4px;
@@ -91,13 +91,17 @@
   display: flex; gap: 2px;
   margin: 8px 8px 0;
   padding: 2px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-pill);
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
   background: var(--gs-bg);
 }
 .funnelTab {
   flex: 1; min-width: 0;
-  height: 22px; padding: 0 8px;
-  border: none; border-radius: var(--gs-r-pill);
+  box-sizing: border-box;
+  height: var(--gs-h-compact); padding: 0 8px;
+  /* Transparent rather than none: the shared selected rule paints its
+     members through `border-color`, and a border that is not there takes
+     no colour. Inside `border-box`, so the strip does not grow by 2px. */
+  border: 1px solid transparent; border-radius: calc(var(--gs-r-control) - 3px);
   background: transparent;
   color: var(--gs-fg-dim);
   font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
@@ -106,11 +110,7 @@
   transition: background 120ms ease, color 120ms ease;
 }
 .funnelTab:hover { color: var(--gs-fg); }
-.funnelTab.funnelTabActive {
-  color: var(--gs-fg);
-  background: var(--gs-raise);
-  box-shadow: inset 0 0 0 1px var(--gs-border);
-}
+/* .funnelTabActive: see the shared selected-state rule in controls.css. */
 .funnelTab:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
 /* A tab's own criteria count, so the two sections nobody is looking at still
    say they hold something. */
@@ -126,7 +126,7 @@
 .funnelCaption {
   flex: none;
   color: var(--gs-fg-faint);
-  font-size: 11px; line-height: 14px;
+  font-size: var(--gs-t-meta); line-height: 14px;
   letter-spacing: 0.04em; text-transform: uppercase;
 }
 
@@ -143,8 +143,9 @@
 }
 .funnelBoundBtn {
   flex: 1; min-width: 0;
-  height: 20px; padding: 0 6px;
-  border: none; border-radius: calc(var(--gs-r-control) - 3px);
+  box-sizing: border-box;
+  height: var(--gs-h-compact); padding: 0 6px;
+  border: 1px solid transparent; border-radius: calc(var(--gs-r-control) - 3px);
   background: transparent;
   color: var(--gs-fg-dim);
   font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
@@ -152,11 +153,7 @@
   transition: background 120ms ease, color 120ms ease;
 }
 .funnelBoundBtn:hover { color: var(--gs-fg); }
-.funnelBoundBtn.funnelBoundBtnActive {
-  color: var(--gs-accent);
-  background: var(--gs-accent-bg);
-  box-shadow: inset 0 0 0 1px var(--gs-accent-border);
-}
+/* .funnelBoundBtnActive: see the shared selected-state rule in controls.css. */
 
 /* The calendar — modern-grid look in the drawer's own tokens. */
 .cal { flex: none; display: flex; flex-direction: column; gap: 4px; }
@@ -168,7 +165,7 @@
 }
 .calNav {
   flex: none;
-  width: 22px; height: 20px; padding: 0;
+  width: var(--gs-h-compact); height: var(--gs-h-compact); padding: 0;
   border: none; border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-dim);
@@ -184,10 +181,10 @@
 .calWeek span {
   text-align: center;
   color: var(--gs-fg-faint);
-  font-size: 11px; line-height: 14px;
+  font-size: var(--gs-t-meta); line-height: 14px;
 }
 .calGrid button {
-  height: 26px;
+  height: var(--gs-h-compact);
   border: none; border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-muted);
@@ -215,7 +212,7 @@
   padding: 3px 6px;
   border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
   background: var(--gs-bg);
-  font-size: 11px; line-height: 16px;
+  font-size: var(--gs-t-meta); line-height: 16px;
 }
 .funnelBoundKey { flex: none; color: var(--gs-fg-faint); }
 .funnelBoundVal {
@@ -233,12 +230,12 @@
   font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
   cursor: pointer;
 }
-.funnelBoundClear:hover { color: var(--gs-danger, var(--gs-fg)); }
+.funnelBoundClear:hover { color: var(--gs-del); }
 
 .funnelSearch {
   flex: none;
   box-sizing: border-box;
-  height: 26px; padding: 0 8px;
+  height: var(--gs-h-compact); padding: 0 8px;
   border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
   background: var(--gs-bg); color: var(--gs-fg);
   font-family: inherit; font-size: var(--gs-t-dense);
@@ -257,7 +254,7 @@
 .funnelList::-webkit-scrollbar-track { background: transparent; }
 .funnelList::-webkit-scrollbar-thumb {
   background: var(--gs-fg-fainter);
-  border: 3px solid transparent; border-radius: 5px;
+  border: 3px solid transparent; border-radius: var(--gs-r-pill);
   background-clip: content-box;
 }
 /* Every row is the same four slots — chevron, tick, glyph, name — then the
@@ -339,7 +336,7 @@
 .funnelCount {
   flex: none;
   color: var(--gs-fg-faint);
-  font-size: 11px;
+  font-size: var(--gs-t-meta);
   font-variant-numeric: tabular-nums;
 }
 .funnelMore { color: var(--gs-fg-faint); padding: 4px 6px; }
@@ -360,14 +357,7 @@
    the drawer. It is in both selector lists now; this only sizes them to share
    one row. */
 .funnelPreset { flex: 1 1 0; min-width: 0; padding: 0 6px; }
-/* Qualified, like `.funnelButtonActive`: the shared vocabulary is declared
-   several hundred lines BELOW this one, so a bare modifier would lose its
-   background to that rule's `background: transparent`. */
-.funnelPreset.funnelPresetActive {
-  color: var(--gs-accent);
-  border-color: var(--gs-accent);
-  background: var(--gs-accent-bg);
-}
+/* .funnelPresetActive: see the shared selected-state rule in controls.css. */
 
 /* The footer says what the panel is currently asking git for. Without it the
    only feedback lived on the chip row BEHIND the panel, so a reader had to
@@ -378,7 +368,7 @@
   padding: 6px 10px;
   border-top: 1px solid var(--gs-border-soft);
   background: var(--gs-bg);
-  font-size: 11px; line-height: 16px;
+  font-size: var(--gs-t-meta); line-height: 16px;
 }
 .funnelFootCount { color: var(--gs-fg-faint); font-variant-numeric: tabular-nums; }
 .funnelFootCountOn { color: var(--gs-fg-muted); }
@@ -388,7 +378,7 @@
   border: none; border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-dim);
-  font-family: inherit; font-size: 11px; line-height: 16px;
+  font-family: inherit; font-size: var(--gs-t-meta); line-height: 16px;
   cursor: pointer;
 }
 .funnelFootClear:hover:not(:disabled) { color: var(--gs-fg); background: var(--gs-raise); }

package/src/client/styles/history.css

@@ -208,7 +208,7 @@
   min-width: 0;
 }
 .commit:hover { background: var(--gs-raise); }
-.commitActive { border-color: var(--gs-accent-border); background: var(--gs-accent-bg); }
+/* .commitActive: see the shared selected-state rule in controls.css. */
 /* Pushed to the right end of the row, and never squeezed: the subject is what
    gives way when the pane narrows, because it is the part with an ellipsis to
    give. */

package/src/client/styles/shell.css

@@ -41,8 +41,9 @@
 
   /* Radii. Four values, each with one job; nothing else may invent a fifth. */
   --gs-r-pill: 999px;    /* drawer chrome: header actions, ref chips, triggers */
-  --gs-r-control: 8px;   /* controls inside a panel or pane; inputs; badges */
-  --gs-r-surface: 12px;  /* rows, popovers, panes */
+  --gs-r-control: 8px;   /* controls inside a panel or pane; inputs; badges;
+                            and the dense list rows a tree or a picker is made of */
+  --gs-r-surface: 12px;  /* the tall card rows, popovers and panes they sit in */
   --gs-r-drawer: 14px;   /* the drawer and its companion card */
 
   /* Type — dsh's --dsw-font-* ladder, which tops out at 11px for meta text. */
@@ -215,7 +216,7 @@
   display: inline-flex; align-items: center; gap: 6px;
   padding: 2px 10px;
   border: 1px solid var(--gs-accent-border);
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
   background: var(--gs-accent-bg);
   color: var(--gs-accent);
   font-weight: 600;
@@ -271,7 +272,7 @@
 .headerView {
   flex: none;
   padding: 1px 8px;
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
   background: var(--gs-neutral-bg);
   color: var(--gs-fg-muted);
   font-size: var(--gs-t-meta);
@@ -279,7 +280,7 @@
 }
 .headerDetached {
   padding: 1px 8px;
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
   background: var(--gs-warn-bg);
   color: var(--gs-warn);
   font-size: var(--gs-t-meta);