Rest sidebar rows dim, brighten them on hover

f25c84766a41 · AtlantisPleb · 9d ago · parent c7175ed8a878

Rest sidebar rows dim, brighten them on hover

Sidebar rows sat at --text-primary, so every row was as loud as the page
content beside it. A sidebar is a list of places you are not: at full
brightness they all compete for attention and none of them wins.

Rows now rest at --text-muted and go to --text-primary on hover. The
selected row stays bright without being hovered, because the place you are
is the one row that earns it unprompted. Colour is now in the transition,
so the change eases rather than snaps.

Applied to .docs-sidebar__link as well, so the two sidebars in the
application read as one idea rather than two similar ones.

Fixes a latent theme bug while here: both hover rules hardcoded #fff, which
became white-on-near-white the moment light mode shipped. They use the ink
token now, which flips with the theme. Static and empty rows no longer
brighten on hover at all -- they are not destinations, so hovering them
should not suggest they are.

Deploy story

What this commit did to the running system — joined from the forge receipt chain, the part a commit page elsewhere cannot show.

Not deployed through the forge lane

No push, promotion, build, or deploy receipt references this commit (receipts are scanned over a bounded recent window). Changes shipped by full node replacement carry their proof in the release gate receipt instead.

Changed files

modified assets/css/app.css

Diff

1 file changed, +19 -6

  padding-inline: 14px;
  padding-block: 6px;
  border-radius: 10px;
  color: var(--text-primary);
  /* Rest dim, brighten on hover. A sidebar is a list of places you are not, so
     at full brightness every row competes with the page for attention. The
     current row and the hovered row are the two that earn it. */
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  transition: background-color 150ms ease;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

@media (hover: hover) {
  .sidebar-row:hover {
    background: var(--ink-raised);
    color: #fff;
    /* Was a hardcoded #fff, which is white-on-near-white in light mode. The ink
       token flips with the theme. */
    color: var(--text-primary);
  }
}



.sidebar-row[data-selected] {
  background: var(--ink-raised);
  /* The place you are is the one row that stays bright without being hovered. */
  color: var(--text-primary);
}

.sidebar-row--static,

.sidebar-row--static:hover,
  .sidebar-row--empty:hover {
  background: transparent;
  color: var(--text-primary);
  /* Not a destination, so hovering it must not imply it is one. */
  color: var(--text-muted);
}

.sidebar-row__hit {

.docs-sidebar__link {
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text-primary);
  /* Same rest-dim/hover-bright rule as .sidebar-row, so the two sidebars in the
     app read as one idea rather than two similar ones. */
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;
  transition: color 150ms ease;
}

@media (hover: hover) {
  .docs-sidebar__link:hover {
    background: var(--ink-raised);
    color: #fff;
    color: var(--text-primary);
  }
}


271	271		`padding-inline: 14px;`
272	272		`padding-block: 6px;`
273	273		`border-radius: 10px;`
274		-	`color: var(--text-primary);`
	274	+	`/* Rest dim, brighten on hover. A sidebar is a list of places you are not, so`
	275	+	`at full brightness every row competes with the page for attention. The`
	276	+	`current row and the hovered row are the two that earn it. */`
	277	+	`color: var(--text-muted);`
275	278		`font-size: 0.875rem;`
276	279		`font-weight: 400;`
277	280		`line-height: 1.25rem;`
278		-	`transition: background-color 150ms ease;`
	281	+	`transition:`
	282	+	`background-color 150ms ease,`
	283	+	`color 150ms ease;`
279	284		`}`
280	285
281	286		`@media (hover: hover) {`
282	287		`.sidebar-row:hover {`
283	288		`background: var(--ink-raised);`
284		-	`color: #fff;`
	289	+	`/* Was a hardcoded #fff, which is white-on-near-white in light mode. The ink`
	290	+	`token flips with the theme. */`
	291	+	`color: var(--text-primary);`
285	292		`}`
286	293		`}`
287	294

291	298
292	299		`.sidebar-row[data-selected] {`
293	300		`background: var(--ink-raised);`
	301	+	`/* The place you are is the one row that stays bright without being hovered. */`
	302	+	`color: var(--text-primary);`
294	303		`}`
295	304
296	305		`.sidebar-row--static,`

301	310		`.sidebar-row--static:hover,`
302	311		`.sidebar-row--empty:hover {`
303	312		`background: transparent;`
304		-	`color: var(--text-primary);`
	313	+	`/* Not a destination, so hovering it must not imply it is one. */`
	314	+	`color: var(--text-muted);`
305	315		`}`
306	316
307	317		`.sidebar-row__hit {`

430	440		`.docs-sidebar__link {`
431	441		`padding: 6px 8px;`
432	442		`border-radius: 8px;`
433		-	`color: var(--text-primary);`
	443	+	`/* Same rest-dim/hover-bright rule as .sidebar-row, so the two sidebars in the`
	444	+	`app read as one idea rather than two similar ones. */`
	445	+	`color: var(--text-muted);`
434	446		`font-size: 0.875rem;`
435	447		`line-height: 1.25rem;`
436	448		`text-decoration: none;`
	449	+	`transition: color 150ms ease;`
437	450		`}`
438	451
439	452		`@media (hover: hover) {`
440	453		`.docs-sidebar__link:hover {`
441	454		`background: var(--ink-raised);`
442		-	`color: #fff;`
	455	+	`color: var(--text-primary);`
443	456		`}`
444	457		`}`
445	458