@carissa-io/theme-default 0.3.17 → 0.3.18

package/DESIGN.md

@@ -85,9 +85,11 @@ Every `muted` text pairing passes AA in both modes (a test asserts it): the ligh
 (`#dee2e6`); it draws nothing today.
 
 ## Scrollbars
-Two rules theme every scroll container, and no component carries a scrollbar rule: `scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track)` on `:root` (inherited, so every scroller gets it) and `scrollbar-width: thin` on `*`. The thumb is the neutral 500 (`#737373`) in both modes; the track is the page ground, equal to `background` (`#ffffff` / `#0a0a0a`), so the scrollbar is just a thumb on the page and no extra rail is drawn. The thumb passes the 3:1 non-text minimum against the track and the background (4.74 / 4.18, the same pair) and also on `surface` (4.35 / 3.78) and the `surface-active` hover fill (3.76 / 3.19); a test asserts that the track equals the background and the ratio in each mode. Known trade-off: inside a surface-coloured container (the sidebar, a card) the track shows as a strip of the page colour; a theme can override `$scrollbar-track` (and the dark role) with its surface value. The width is `thin` (the `$scrollbar-width` token), which suits the Swiss restraint and still leaves a target the pointer can grab; touch and overlay scrollbars ignore it.
+Every scroll container is themed with no scrollbar rule in any component. The colours are the roles `scrollbar-thumb` and `scrollbar-track`: the thumb is the neutral 500 (`#737373`) in both modes; the track is the page ground, equal to `background` (`#ffffff` / `#0a0a0a`), so the scrollbar is just a thumb on the page and no extra rail is drawn. The thumb passes the 3:1 non-text minimum against the track and the background (4.74 / 4.18, the same pair) and also on `surface` (4.35 / 3.78) and the `surface-active` hover fill (3.76 / 3.19); a test asserts that the track equals the background and the ratio in each mode. Known trade-off: inside a surface-coloured container (the sidebar, a card) the track shows as a strip of the page colour; a theme can override `$scrollbar-track` (and the dark role) with its surface value.
 
-Known limits: `scrollbar-width` is not an inherited property, so a `:root` declaration would thin only the page; it is declared with a universal rule instead, which has zero specificity so it never overrides a component. The rules use the standard properties only, so there is colour and thickness but no rounding, no arrows and no hover state (those need the `::-webkit-scrollbar` pseudo-elements, which the theme deliberately does not use). Support is Chrome 121+, Firefox 64+ and Safari 18.2+; older browsers keep the native bar, which stays usable. A scroller that sets its own `scrollbar-width` keeps it, whatever the order: the carousel hides its bar on purpose (`scrollbar-width: none`, a class selector) and the theme does not undo it.
+Shape: the default theme is square, so the bar is **8px (`$scrollbar-size`, 0.5rem) with a square thumb and no arrow buttons**, like the square corners everywhere else. The radius is the shared `$radius` token (`$scrollbar-radius`), so a theme with rounded corners gets a rounded thumb from the same token. This is drawn with the `*::-webkit-scrollbar` pseudo-elements (bar, track, thumb, corner, and the button hidden with `display: none`), which exist in Blink and WebKit: Chrome, Edge, Safari and the browsers built on them, including the viewport bar. The standard `scrollbar-color` / `scrollbar-width` are not used there on purpose: from Chrome 121 they switch the bar to the standardized rendering (rounded thumb, arrows can remain) and make the pseudo-elements ignored, with no control of the shape.
+
+Known limits: Firefox has no `::-webkit-scrollbar`, so it gets the standard properties inside `@supports not selector(::-webkit-scrollbar)` (`scrollbar-color` on `:root` with the same roles, `scrollbar-width: thin` on `*` because that property is not inherited). Its shape cannot be styled: the thumb ends are not square there, and the width is its own `thin`. Engines without either keep the native bar, which stays usable. Touch and overlay scrollbars ignore all of this. Every selector has zero or near-zero specificity (`*`, `*::-webkit-scrollbar...`) and there is no `!important`, so a component rule always wins: the carousel hides its bar on purpose (`.c-carousel__track::-webkit-scrollbar { display: none }` and `scrollbar-width: none`) and the theme does not undo it.
 
 ## Typography
 Configured through [components-typography](components/components-typography): `Heading` (the element comes from `level`, the look from `size`)

package/README.md

@@ -64,17 +64,26 @@ The Sass tokens above stay the static **light** values (for Sass consumers); the
 text color are the app's: give `body` `background: var(--c-background); color: var(--c-text)`.
 
 ## Scrollbars
-The theme styles every scroll container with no change in any component: the page, the message list, the table wrapper, the modal and
-drawer bodies, the select, combobox and listbox popups, the sidebar and code blocks. It is two rules: `scrollbar-color: var(--c-scrollbar-thumb)
-var(--c-scrollbar-track)` on `:root` (the property is inherited) and `scrollbar-width: thin` on `*`, because `scrollbar-width` is not inherited and so
-has to be declared on every element. The `*` rule has zero specificity, so any component rule or your own rule wins over it. The colors
-are two palette roles, so they follow `data-mode`; the thickness is the `$scrollbar-width` token.
-
-To change them in your own theme, set `$scrollbar-thumb`, `$scrollbar-track` and `$scrollbar-width` in your `scss/_tokens.scss` (and the
-dark values of the two roles in `scss/_modes.scss`); keep the thumb at 3:1 or more against the track and against the background. The default track is the page background, so inside a surface-coloured container (the sidebar, a card) it shows as a strip of the page colour; a theme that prefers it quieter there sets `$scrollbar-track` to its surface value. An app that
-only needs one scroller to look different overrides the two properties on that element (`scrollbar-color`, `scrollbar-width`); the carousel
-already hides its own bar. Browsers without the standard properties (before Chrome 121, Firefox 64 or Safari 18.2) keep the native bar. See
-[DESIGN.md](DESIGN.md) for the values and limits.
+The theme styles every scroll container with no change in any component: the page (the viewport bar follows), the message list, the table
+wrapper, the modal and drawer bodies, the select, combobox and listbox popups, the sidebar and code blocks. The two palette roles
+`--c-scrollbar-thumb` and `--c-scrollbar-track` follow `data-mode`.
+
+- **Chrome, Edge, Safari and other Blink / WebKit browsers** get an 8px bar (`$scrollbar-size`) with a **square thumb** (`$scrollbar-radius`,
+  which is the shared `$radius`, so a theme with rounded corners gets a rounded thumb) and **no arrow buttons**, drawn with the
+  `*::-webkit-scrollbar` pseudo-elements. The standard `scrollbar-color` and `scrollbar-width` are deliberately not used there: from Chrome 121
+  they switch the bar to the standardized rendering (rounded thumb, arrows can remain) and make the pseudo-elements ignored.
+- **Firefox** has no such pseudo-elements, so it gets the standard properties (`scrollbar-color` on `:root`, `scrollbar-width: thin` from
+  `$scrollbar-width` on `*`), coloured with the same roles. Their shape cannot be styled: the thumb ends are not square there.
+- Older engines keep the native bar.
+
+All the rules have zero or near-zero specificity (`*` and `*::-webkit-scrollbar...`), so any component rule or your own rule wins over them; the
+carousel already hides its own bar.
+
+To change them in your own theme, set `$scrollbar-thumb`, `$scrollbar-track`, `$scrollbar-size`, `$scrollbar-radius` and `$scrollbar-width` in
+your `scss/_tokens.scss` (and the dark values of the two roles in `scss/_modes.scss`); keep the thumb at 3:1 or more against the track and against
+the background. The default track is the page background, so inside a surface-coloured container (the sidebar, a card) it shows as a strip of the
+page colour; a theme that prefers it quieter there sets `$scrollbar-track` to its surface value. An app that only needs one scroller to look
+different overrides `::-webkit-scrollbar-thumb` (and `scrollbar-color` for Firefox) on that element. See [DESIGN.md](DESIGN.md) for the values and limits.
 
 ## Tokens
 The palette and the values shared by every component are Sass variables in `scss/_tokens.scss`, the single source of
@@ -104,7 +113,9 @@ change.
 | `$info` | `#1d4ed8` | info accent and icon (Alert) |
 | `$scrollbar-thumb` | `#737373` | scrollbar thumb |
 | `$scrollbar-track` | `$white` | scrollbar track (the page ground) |
-| `$scrollbar-width` | `thin` | scrollbar thickness |
+| `$scrollbar-width` | `thin` | scrollbar thickness where the standard property is used (Firefox) |
+| `$scrollbar-size` | `0.5rem` | scrollbar thickness in Blink and WebKit |
+| `$scrollbar-radius` | `$radius` | scrollbar thumb radius in Blink and WebKit (square here) |
 | `$font-family` | `'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif` | type stack |
 | `$font-family-mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace` | monospace stack for system data and code |
 | `$radius` | `0` | corner radius |

package/dist/index.css

@@ -88,14 +88,38 @@
     color-scheme: dark;
   }
 }
-:root {
-  scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
+*::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+*::-webkit-scrollbar-track {
+  background-color: var(--c-scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--c-scrollbar-thumb);
+  border-radius: 0;
 }
 
-* {
-  scrollbar-width: thin;
+*::-webkit-scrollbar-corner {
+  background-color: var(--c-scrollbar-track);
 }
 
+*::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  :root {
+    scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
+  }
+  * {
+    scrollbar-width: thin;
+  }
+}
 .c-input {
   display: block;
   font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.17",
+  "version": "0.3.18",
   "description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
   "type": "module",
   "style": "dist/index.css",

package/scss/_modes.scss

@@ -1,5 +1,5 @@
 // Carissa Default theme color modes: the light and dark palettes, emitted as CSS custom properties (`--c-<role>`).
-// Loading this partial emits the CSS below (`@use 'modes' as *` in index.scss), including the two scrollbar rules (`:root` and `*`) at the end;
+// Loading this partial emits the CSS below (`@use 'modes' as *` in index.scss), including the scrollbar rules at the end;
 // `_tokens.scss` stays Sass-only.
 //
 //   no attribute            light (the default)
@@ -105,15 +105,44 @@ $var-arrow-color-disabled: $var-disabled-text;
     }
 }
 
-// Scrollbars, in two rules because the two properties differ. `scrollbar-color` is inherited, so one declaration on `:root` reaches every
-// scroll container. `scrollbar-width` is NOT inherited (only the page viewport would get it), so it is declared on every element with the
-// universal selector. `*` has zero specificity (`:where(*)` would be the same; `*` is plain and just as supported), so it never beats a
-// component rule: a scroller that sets its own width (the carousel hides its bar with `scrollbar-width: none`) keeps it, in any order.
-// Standard properties only: colour and thickness, no rounding.
-:root {
-    scrollbar-color: $var-scrollbar-thumb $var-scrollbar-track;
+// Scrollbars. Blink and WebKit (Chrome, Edge, Safari) get the `::-webkit-scrollbar` pseudo-elements, which give full control: a thin bar of
+// `$scrollbar-size`, a thumb with the shared radius (square here) and no arrow buttons. The standard `scrollbar-color` / `scrollbar-width`
+// are NOT used there, because in Chrome 121+ they switch the bar to the standardized rendering (rounded thumb, arrows may remain) and make the
+// pseudo-elements be ignored. They are the fallback only for engines without the pseudo-elements (Firefox), inside `@supports not
+// selector(::-webkit-scrollbar)`; there `scrollbar-color` is inherited (one declaration on `:root`) and `scrollbar-width` is not, so it is
+// declared on every element with the universal selector.
+// Every selector is `*::-webkit-scrollbar...` (0,0,1) or `*` (0,0,0), so a component rule always wins: the carousel hides its bar with
+// `.c-carousel__track::-webkit-scrollbar { display: none }` and `scrollbar-width: none`. No rule here uses `!important`.
+*::-webkit-scrollbar {
+    width: t.$scrollbar-size;
+    height: t.$scrollbar-size;
+}
+
+*::-webkit-scrollbar-track {
+    background-color: $var-scrollbar-track;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: $var-scrollbar-thumb;
+    border-radius: t.$scrollbar-radius;
+}
+
+*::-webkit-scrollbar-corner {
+    background-color: $var-scrollbar-track;
+}
+
+*::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
 }
 
-* {
-    scrollbar-width: t.$scrollbar-width;
+@supports not selector(::-webkit-scrollbar) {
+    :root {
+        scrollbar-color: $var-scrollbar-thumb $var-scrollbar-track;
+    }
+
+    * {
+        scrollbar-width: t.$scrollbar-width;
+    }
 }

package/scss/_tokens.scss

@@ -21,10 +21,6 @@ $error: #dc3545;
 $success: #15803d;
 $warning: #a16207;
 $info: #1d4ed8;
-// Scrollbars (every scroll container inherits them from `:root`): a neutral thumb on a track that is the page ground, thin.
-$scrollbar-thumb: #737373; // 4.74:1 on the white track and background (the neutral 500)
-$scrollbar-track: $white; // the light background: the track is the page ground
-$scrollbar-width: thin;
 
 // Values shared by every component, so the whole theme moves together.
 $font-family: ('Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif);
@@ -38,6 +34,15 @@ $label-font-size: 0.6875rem;
 $label-font-weight: 700;
 $label-letter-spacing: 0.1em;
 
+// Scrollbars: a neutral thumb on a track that is the page ground. Blink and WebKit draw them with the `::-webkit-scrollbar` pseudo-elements
+// (size and radius; the radius is the shared one, so the default theme has square ends and no arrows); the width is the fallback of the
+// standard `scrollbar-width` for engines without those pseudo-elements (Firefox).
+$scrollbar-thumb: #737373; // 4.74:1 on the white track and background (the neutral 500)
+$scrollbar-track: $white; // the light background: the track is the page ground
+$scrollbar-width: thin; // the standard property, used only where the pseudo-elements do not exist
+$scrollbar-size: 0.5rem; // 8px, the thickness of the bar and the thumb
+$scrollbar-radius: $radius; // square ends in this theme
+
 // The dropdown arrow of Select and Combobox: 16px, muted, black on hover and when open, turns over with the list.
 $arrow-size: 1rem;
 $arrow-offset: 0.75rem;