@carissa-io/theme-default 0.3.16 → 0.3.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/DESIGN.md +9 -6
  2. package/README.md +23 -12
  3. package/dist/index.css +48 -8
  4. package/package.json +5 -5
  5. package/scss/_modes.scss +39 -10
  6. package/scss/_tokens.scss +9 -4
package/DESIGN.md CHANGED
@@ -85,9 +85,11 @@ Every `muted` text pairing passes AA in both modes (a test asserts it): the ligh
85
85
  (`#dee2e6`); it draws nothing today.
86
86
 
87
87
  ## Scrollbars
88
- 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.
88
+ 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.
89
89
 
90
- 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.
90
+ 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.
91
+
92
+ 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.
91
93
 
92
94
  ## Typography
93
95
  Configured through [components-typography](components/components-typography): `Heading` (the element comes from `level`, the look from `size`)
@@ -280,13 +282,14 @@ just appears.
280
282
 
281
283
  **Scroll edges (Modal and Drawer).** The body scrolls between the header and the footer, so a long body used to be cut flush against the title and the buttons with nothing
282
284
  to show where the scroll area ends. The theme draws that edge: a **1px `--c-disabled-border` line** under the header and over the footer (the footer line exists only
283
- when there is a footer), plus a fixed 0.5rem gap between each line and the header or footer content (the components' default, left as it is). The line is the quiet
285
+ when there is a footer), **only while the body overflows** (the component marks the dialog with `c-modal--overflowing` / `c-drawer--overflowing`, and the width lives under
286
+ that class: a short dialog such as a confirmation has no lines at all, and the extra 1px of a line appears only with overflow), plus a fixed 0.5rem gap between each line and the header or footer content (the components' default, left as it is). The line is the quiet
284
287
  neutral border, not `--c-muted` (the Divider's 5.74:1 line would compete with the content and with the box border): on `--c-background` it is **1.48:1 in light**
285
288
  (`#d4d4d4` on `#fff`) and **1.91:1 in dark** (`#404040` on `#0a0a0a`). It is a decorative separator (the scroll position and the content are exposed by the scrollable region
286
289
  itself), so the 3:1 non-text minimum does not apply; the test only requires it to be distinguishable from the background (above 1.1:1) and records the two ratios,
287
- in the same spirit as the Progress track (a faint guide, 1.3:1). It is a custom property, so dark mode needs no extra rule. The unscrolled layout is the same as before:
290
+ in the same spirit as the Progress track (a faint guide, 1.3:1). It is a custom property, so dark mode needs no extra rule. The layout of a dialog that does not overflow is the same as before the scroll edges (no line, no extra pixel):
288
291
  the header keeps 1.25rem above and 0.5rem below its content, and the body keeps the remaining 0.75rem (1.25rem less the 0.5rem gap) on each side, so the distance
289
- between the title and the content is still 1.25rem, now with the line inside it; a body without a header or without a footer keeps the whole 1.25rem on that side.
292
+ between the title and the content is still 1.25rem (with overflow, the line sits inside that distance); a body without a header or without a footer keeps the whole 1.25rem on that side.
290
293
 
291
294
  ## Toast
292
295
  From [components-toast](components/components-toast): the fixed region of toasts (24rem wide, 1rem from the edges, 0.75rem between toasts, above the page content) and its six
@@ -377,7 +380,7 @@ and `--c-text` for the current page (`aria-current="page"`). The content collaps
377
380
  From [components-drawer](components/components-drawer): `Drawer`, the Modal's box as a panel on an edge of the screen (`start`, `end`, `top`, `bottom`; `sm` 20rem, `md` 28rem, `lg` 40rem). It is `--c-background` with `--c-text` (17.93:1 / 18.16:1), a 1px `--c-muted` border
378
381
  (the edge that still reads in dark), square, with the Modal's layered shadow and the same padding (1.5rem by 1.25rem) and close button (`--c-muted`, `--c-text` on hover). The **backdrop** is `rgb(0 0 0 / 0.5)` in both modes, with the shadow the only literal color of the block.
379
382
  The panel slides in over `$transition-duration`; with reduced motion it just appears.
380
- The header and footer lines and the 0.5rem gaps are the Modal's (see [Modal](#modal), scroll edges): 1px `--c-disabled-border`, 1.48:1 light and 1.91:1 dark on `--c-background`.
383
+ The header and footer lines and the 0.5rem gaps are the Modal's (see [Modal](#modal), scroll edges): 1px `--c-disabled-border`, only while the body overflows, 1.48:1 light and 1.91:1 dark on `--c-background`.
381
384
 
382
385
  ## Menu
383
386
  From [components-menu](components/components-menu): `Menu`, `MenuItem`, `MenuSeparator` and `MenuLabel`. The panel is the Popover's (`--c-background`, a 1px `--c-muted` border, flat). Items are `--c-text` with 0.625rem of block and 0.75rem of side padding, and hover and keyboard focus share a `--c-surface-active`
package/README.md CHANGED
@@ -64,17 +64,26 @@ The Sass tokens above stay the static **light** values (for Sass consumers); the
64
64
  text color are the app's: give `body` `background: var(--c-background); color: var(--c-text)`.
65
65
 
66
66
  ## Scrollbars
67
- The theme styles every scroll container with no change in any component: the page, the message list, the table wrapper, the modal and
68
- drawer bodies, the select, combobox and listbox popups, the sidebar and code blocks. It is two rules: `scrollbar-color: var(--c-scrollbar-thumb)
69
- var(--c-scrollbar-track)` on `:root` (the property is inherited) and `scrollbar-width: thin` on `*`, because `scrollbar-width` is not inherited and so
70
- 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
71
- are two palette roles, so they follow `data-mode`; the thickness is the `$scrollbar-width` token.
72
-
73
- To change them in your own theme, set `$scrollbar-thumb`, `$scrollbar-track` and `$scrollbar-width` in your `scss/_tokens.scss` (and the
74
- 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
75
- only needs one scroller to look different overrides the two properties on that element (`scrollbar-color`, `scrollbar-width`); the carousel
76
- already hides its own bar. Browsers without the standard properties (before Chrome 121, Firefox 64 or Safari 18.2) keep the native bar. See
77
- [DESIGN.md](DESIGN.md) for the values and limits.
67
+ The theme styles every scroll container with no change in any component: the page (the viewport bar follows), the message list, the table
68
+ wrapper, the modal and drawer bodies, the select, combobox and listbox popups, the sidebar and code blocks. The two palette roles
69
+ `--c-scrollbar-thumb` and `--c-scrollbar-track` follow `data-mode`.
70
+
71
+ - **Chrome, Edge, Safari and other Blink / WebKit browsers** get an 8px bar (`$scrollbar-size`) with a **square thumb** (`$scrollbar-radius`,
72
+ which is the shared `$radius`, so a theme with rounded corners gets a rounded thumb) and **no arrow buttons**, drawn with the
73
+ `*::-webkit-scrollbar` pseudo-elements. The standard `scrollbar-color` and `scrollbar-width` are deliberately not used there: from Chrome 121
74
+ they switch the bar to the standardized rendering (rounded thumb, arrows can remain) and make the pseudo-elements ignored.
75
+ - **Firefox** has no such pseudo-elements, so it gets the standard properties (`scrollbar-color` on `:root`, `scrollbar-width: thin` from
76
+ `$scrollbar-width` on `*`), coloured with the same roles. Their shape cannot be styled: the thumb ends are not square there.
77
+ - Older engines keep the native bar.
78
+
79
+ All the rules have zero or near-zero specificity (`*` and `*::-webkit-scrollbar...`), so any component rule or your own rule wins over them; the
80
+ carousel already hides its own bar.
81
+
82
+ To change them in your own theme, set `$scrollbar-thumb`, `$scrollbar-track`, `$scrollbar-size`, `$scrollbar-radius` and `$scrollbar-width` in
83
+ 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
84
+ 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
85
+ 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
86
+ different overrides `::-webkit-scrollbar-thumb` (and `scrollbar-color` for Firefox) on that element. See [DESIGN.md](DESIGN.md) for the values and limits.
78
87
 
79
88
  ## Tokens
80
89
  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.
104
113
  | `$info` | `#1d4ed8` | info accent and icon (Alert) |
105
114
  | `$scrollbar-thumb` | `#737373` | scrollbar thumb |
106
115
  | `$scrollbar-track` | `$white` | scrollbar track (the page ground) |
107
- | `$scrollbar-width` | `thin` | scrollbar thickness |
116
+ | `$scrollbar-width` | `thin` | scrollbar thickness where the standard property is used (Firefox) |
117
+ | `$scrollbar-size` | `0.5rem` | scrollbar thickness in Blink and WebKit |
118
+ | `$scrollbar-radius` | `$radius` | scrollbar thumb radius in Blink and WebKit (square here) |
108
119
  | `$font-family` | `'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif` | type stack |
109
120
  | `$font-family-mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace` | monospace stack for system data and code |
110
121
  | `$radius` | `0` | corner radius |
package/dist/index.css CHANGED
@@ -88,14 +88,38 @@
88
88
  color-scheme: dark;
89
89
  }
90
90
  }
91
- :root {
92
- scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
91
+ *::-webkit-scrollbar {
92
+ width: 0.5rem;
93
+ height: 0.5rem;
94
+ }
95
+
96
+ *::-webkit-scrollbar-track {
97
+ background-color: var(--c-scrollbar-track);
98
+ }
99
+
100
+ *::-webkit-scrollbar-thumb {
101
+ background-color: var(--c-scrollbar-thumb);
102
+ border-radius: 0;
103
+ }
104
+
105
+ *::-webkit-scrollbar-corner {
106
+ background-color: var(--c-scrollbar-track);
93
107
  }
94
108
 
95
- * {
96
- scrollbar-width: thin;
109
+ *::-webkit-scrollbar-button {
110
+ display: none;
111
+ width: 0;
112
+ height: 0;
97
113
  }
98
114
 
115
+ @supports not selector(::-webkit-scrollbar) {
116
+ :root {
117
+ scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
118
+ }
119
+ * {
120
+ scrollbar-width: thin;
121
+ }
122
+ }
99
123
  .c-input {
100
124
  display: block;
101
125
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
@@ -1668,7 +1692,7 @@
1668
1692
  align-items: flex-start;
1669
1693
  justify-content: space-between;
1670
1694
  padding: 1.25rem 1.5rem 0.5rem;
1671
- border-bottom: 1px solid var(--c-disabled-border);
1695
+ border-bottom: 0 solid var(--c-disabled-border);
1672
1696
  }
1673
1697
 
1674
1698
  .c-modal__heading {
@@ -1728,7 +1752,15 @@
1728
1752
  gap: 1rem;
1729
1753
  justify-content: flex-end;
1730
1754
  padding: 0.5rem 1.5rem 1.25rem;
1731
- border-top: 1px solid var(--c-disabled-border);
1755
+ border-top: 0 solid var(--c-disabled-border);
1756
+ }
1757
+
1758
+ .c-modal--overflowing .c-modal__header {
1759
+ border-bottom-width: 1px;
1760
+ }
1761
+
1762
+ .c-modal--overflowing .c-modal__footer {
1763
+ border-top-width: 1px;
1732
1764
  }
1733
1765
 
1734
1766
  @keyframes c-toast-enter {
@@ -3590,7 +3622,7 @@ hr.c-divider {
3590
3622
  align-items: flex-start;
3591
3623
  justify-content: space-between;
3592
3624
  padding: 1.25rem 1.5rem 0.5rem;
3593
- border-bottom: 1px solid var(--c-disabled-border);
3625
+ border-bottom: 0 solid var(--c-disabled-border);
3594
3626
  }
3595
3627
 
3596
3628
  .c-drawer__heading {
@@ -3650,7 +3682,15 @@ hr.c-divider {
3650
3682
  gap: 1rem;
3651
3683
  justify-content: flex-end;
3652
3684
  padding: 0.5rem 1.5rem 1.25rem;
3653
- border-top: 1px solid var(--c-disabled-border);
3685
+ border-top: 0 solid var(--c-disabled-border);
3686
+ }
3687
+
3688
+ .c-drawer--overflowing .c-drawer__header {
3689
+ border-bottom-width: 1px;
3690
+ }
3691
+
3692
+ .c-drawer--overflowing .c-drawer__footer {
3693
+ border-top-width: 1px;
3654
3694
  }
3655
3695
 
3656
3696
  .c-menu {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@carissa-io/theme-default",
3
- "version": "0.3.16",
3
+ "version": "0.3.18",
4
4
  "description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
5
5
  "type": "module",
6
6
  "style": "dist/index.css",
@@ -56,7 +56,7 @@
56
56
  "@carissa-io/components-card": "^0.1.0",
57
57
  "@carissa-io/components-alert": "^0.1.0",
58
58
  "@carissa-io/components-spinner": "^0.1.0",
59
- "@carissa-io/components-modal": "^0.1.2",
59
+ "@carissa-io/components-modal": "^0.1.3",
60
60
  "@carissa-io/components-toast": "^0.1.0",
61
61
  "@carissa-io/components-divider": "^0.1.0",
62
62
  "@carissa-io/components-badge": "^0.1.0",
@@ -74,7 +74,7 @@
74
74
  "@carissa-io/components-stepper": "^0.1.0",
75
75
  "@carissa-io/components-sidebar": "^0.1.0",
76
76
  "@carissa-io/components-navbar": "^0.1.0",
77
- "@carissa-io/components-drawer": "^0.1.2",
77
+ "@carissa-io/components-drawer": "^0.1.3",
78
78
  "@carissa-io/components-menu": "^0.1.0",
79
79
  "@carissa-io/components-table": "^0.1.0",
80
80
  "@carissa-io/components-list": "^0.1.0",
@@ -345,7 +345,7 @@
345
345
  "@carissa-io/components-date-range": "^0.1.0",
346
346
  "@carissa-io/components-description-list": "^0.1.0",
347
347
  "@carissa-io/components-divider": "^0.1.0",
348
- "@carissa-io/components-drawer": "^0.1.2",
348
+ "@carissa-io/components-drawer": "^0.1.3",
349
349
  "@carissa-io/components-empty-state": "^0.1.0",
350
350
  "@carissa-io/components-faq": "^0.1.0",
351
351
  "@carissa-io/components-field": "^0.1.0",
@@ -358,7 +358,7 @@
358
358
  "@carissa-io/components-menu": "^0.1.0",
359
359
  "@carissa-io/components-message": "^0.1.0",
360
360
  "@carissa-io/components-message-list": "^0.1.0",
361
- "@carissa-io/components-modal": "^0.1.2",
361
+ "@carissa-io/components-modal": "^0.1.3",
362
362
  "@carissa-io/components-navbar": "^0.1.0",
363
363
  "@carissa-io/components-number-input": "^0.1.0",
364
364
  "@carissa-io/components-otp-input": "^0.1.0",
package/scss/_modes.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  // Carissa Default theme color modes: the light and dark palettes, emitted as CSS custom properties (`--c-<role>`).
2
- // Loading this partial emits the CSS below (`@use 'modes' as *` in index.scss), including the two scrollbar rules (`:root` and `*`) at the end;
2
+ // Loading this partial emits the CSS below (`@use 'modes' as *` in index.scss), including the scrollbar rules at the end;
3
3
  // `_tokens.scss` stays Sass-only.
4
4
  //
5
5
  // no attribute light (the default)
@@ -105,15 +105,44 @@ $var-arrow-color-disabled: $var-disabled-text;
105
105
  }
106
106
  }
107
107
 
108
- // Scrollbars, in two rules because the two properties differ. `scrollbar-color` is inherited, so one declaration on `:root` reaches every
109
- // scroll container. `scrollbar-width` is NOT inherited (only the page viewport would get it), so it is declared on every element with the
110
- // universal selector. `*` has zero specificity (`:where(*)` would be the same; `*` is plain and just as supported), so it never beats a
111
- // component rule: a scroller that sets its own width (the carousel hides its bar with `scrollbar-width: none`) keeps it, in any order.
112
- // Standard properties only: colour and thickness, no rounding.
113
- :root {
114
- scrollbar-color: $var-scrollbar-thumb $var-scrollbar-track;
108
+ // Scrollbars. Blink and WebKit (Chrome, Edge, Safari) get the `::-webkit-scrollbar` pseudo-elements, which give full control: a thin bar of
109
+ // `$scrollbar-size`, a thumb with the shared radius (square here) and no arrow buttons. The standard `scrollbar-color` / `scrollbar-width`
110
+ // are NOT used there, because in Chrome 121+ they switch the bar to the standardized rendering (rounded thumb, arrows may remain) and make the
111
+ // pseudo-elements be ignored. They are the fallback only for engines without the pseudo-elements (Firefox), inside `@supports not
112
+ // selector(::-webkit-scrollbar)`; there `scrollbar-color` is inherited (one declaration on `:root`) and `scrollbar-width` is not, so it is
113
+ // declared on every element with the universal selector.
114
+ // Every selector is `*::-webkit-scrollbar...` (0,0,1) or `*` (0,0,0), so a component rule always wins: the carousel hides its bar with
115
+ // `.c-carousel__track::-webkit-scrollbar { display: none }` and `scrollbar-width: none`. No rule here uses `!important`.
116
+ *::-webkit-scrollbar {
117
+ width: t.$scrollbar-size;
118
+ height: t.$scrollbar-size;
119
+ }
120
+
121
+ *::-webkit-scrollbar-track {
122
+ background-color: $var-scrollbar-track;
123
+ }
124
+
125
+ *::-webkit-scrollbar-thumb {
126
+ background-color: $var-scrollbar-thumb;
127
+ border-radius: t.$scrollbar-radius;
128
+ }
129
+
130
+ *::-webkit-scrollbar-corner {
131
+ background-color: $var-scrollbar-track;
132
+ }
133
+
134
+ *::-webkit-scrollbar-button {
135
+ display: none;
136
+ width: 0;
137
+ height: 0;
115
138
  }
116
139
 
117
- * {
118
- scrollbar-width: t.$scrollbar-width;
140
+ @supports not selector(::-webkit-scrollbar) {
141
+ :root {
142
+ scrollbar-color: $var-scrollbar-thumb $var-scrollbar-track;
143
+ }
144
+
145
+ * {
146
+ scrollbar-width: t.$scrollbar-width;
147
+ }
119
148
  }
package/scss/_tokens.scss CHANGED
@@ -21,10 +21,6 @@ $error: #dc3545;
21
21
  $success: #15803d;
22
22
  $warning: #a16207;
23
23
  $info: #1d4ed8;
24
- // Scrollbars (every scroll container inherits them from `:root`): a neutral thumb on a track that is the page ground, thin.
25
- $scrollbar-thumb: #737373; // 4.74:1 on the white track and background (the neutral 500)
26
- $scrollbar-track: $white; // the light background: the track is the page ground
27
- $scrollbar-width: thin;
28
24
 
29
25
  // Values shared by every component, so the whole theme moves together.
30
26
  $font-family: ('Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif);
@@ -38,6 +34,15 @@ $label-font-size: 0.6875rem;
38
34
  $label-font-weight: 700;
39
35
  $label-letter-spacing: 0.1em;
40
36
 
37
+ // Scrollbars: a neutral thumb on a track that is the page ground. Blink and WebKit draw them with the `::-webkit-scrollbar` pseudo-elements
38
+ // (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
39
+ // standard `scrollbar-width` for engines without those pseudo-elements (Firefox).
40
+ $scrollbar-thumb: #737373; // 4.74:1 on the white track and background (the neutral 500)
41
+ $scrollbar-track: $white; // the light background: the track is the page ground
42
+ $scrollbar-width: thin; // the standard property, used only where the pseudo-elements do not exist
43
+ $scrollbar-size: 0.5rem; // 8px, the thickness of the bar and the thumb
44
+ $scrollbar-radius: $radius; // square ends in this theme
45
+
41
46
  // The dropdown arrow of Select and Combobox: 16px, muted, black on hover and when open, turns over with the list.
42
47
  $arrow-size: 1rem;
43
48
  $arrow-offset: 0.75rem;