662089dd76
design-platform.css declared four --dsw-alias-scrollbar-* tokens in both palettes that no rule read, so every scrolling region rendered the user agent's own scrollbar and the dark theme showed a light native bar against dark surfaces. The symptom that surfaced the gap was in the sidebar: the workspace browser's session list is its only scrolling region, and each row's trailing content (the relative timestamp, and the hover action buttons that replace it) is `flex: none` flush against the row's 8px right padding, so an overlaid scrollbar painted on top of the timestamp. ui-theme/styles/scrollbar.css becomes the sole consumer of the four tokens, imported by the web shell's base.css after design-platform.css because it reads that sheet's tokens. The rules sit on `body`, not `html`: the alias tokens are declared on `body`, custom properties inherit only downward, and from `html` they resolve to the guaranteed-invalid value with scrollbar-color computing to `auto`. scrollbar-width and scrollbar-color are declared on `body, body *` rather than inherited, because inheritance would carry the color already substituted at `body` and an elevated surface could not retint its own thumb; scrollbar-width does not inherit at all. Both the standard properties and the ::-webkit-scrollbar pseudo-elements read one indirection pair bound to the l1 tokens, so an elevated surface rebinds that pair to the l2 tokens once and retints both renderings. The command popup, slash menu, model-select panel, and settings panel do so, which gives the l2 tokens their first consumers. WorkspaceBrowser's `.list` declares scrollbar-gutter: stable, keeping the bar beside the rows. `stable` rather than `auto` so the reservation holds when the list is short enough not to scroll: expanding a workspace group would otherwise shift every row sideways at the moment it starts scrolling.
67 lines
2.5 KiB
CSS
67 lines
2.5 KiB
CSS
/* Scrollbar skin: the sole consumer of the four --dsw-alias-scrollbar-*
|
|
* tokens. Without it every scrolling region renders the UA scrollbar, which
|
|
* ignores the theme — a light native bar over the dark palette.
|
|
*
|
|
* The rule sits on `body`, not `html`: design-platform.css declares the
|
|
* --dsw-alias-* tokens on `body` (and the dark overrides on
|
|
* `body[data-ds-dark-theme]`), and custom properties only inherit downward,
|
|
* so an `html` rule resolves them to the guaranteed-invalid value and
|
|
* `scrollbar-color` falls back to `auto`.
|
|
*
|
|
* `scrollbar-color` is an inherited property, so binding it once on `body`
|
|
* reaches every scroll container without enumerating module class names.
|
|
* `scrollbar-width` is NOT inherited, so it is applied to all elements.
|
|
* The WebKit pseudo-elements are not inherited either, hence the unscoped
|
|
* `::-webkit-scrollbar` rules.
|
|
*
|
|
* Surfaces pick their elevation by rebinding --dsh-scrollbar-thumb{,-hover}:
|
|
* the l1 pair here is the base-surface default, and an elevated surface
|
|
* (menu, popover, dialog) rebinds to the l2 pair on its own container. Both
|
|
* the standard properties and the WebKit pseudo-elements read the
|
|
* indirection, so one rebind reaches both renderings. */
|
|
|
|
body {
|
|
--dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l1);
|
|
--dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l1);
|
|
}
|
|
|
|
/* `scrollbar-color` and `scrollbar-width` are declared on every element
|
|
rather than inherited from `body`. Inheriting would pass down the COLOUR
|
|
already substituted at `body`, so a descendant rebinding
|
|
--dsh-scrollbar-thumb could not change it; re-declaring makes each element
|
|
substitute the variable as it sees it, which is what gives an elevated
|
|
surface a working rebind. `scrollbar-width` is not an inherited property
|
|
at all, so it needs the per-element declaration regardless.
|
|
|
|
Track stays transparent so the thumb reads against whatever surface
|
|
scrolls under it; only the thumb carries a token colour. */
|
|
body,
|
|
body * {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--dsh-scrollbar-thumb) transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 4px;
|
|
background: var(--dsh-scrollbar-thumb);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--dsh-scrollbar-thumb-hover);
|
|
}
|
|
|
|
/* Both scrollbars meeting in a corner: no separate token, so the corner
|
|
matches the transparent track rather than the UA's opaque default. */
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|