Skip to content

Commit 1f66b82

Browse files
desig9steindesig9stein
authored
refactor(scrollbar): Update the styles to consume colors from schemas (#1331)
1 parent 9496301 commit 1f66b82

19 files changed

+99
-70
lines changed

‎CHANGELOG.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,28 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
1818
- You can now register and replace icons by reference via the `setIconRef` function. To learn more check out the [documentation](https://www.infragistics.com/webcomponentssite/components/layouts/icon#icon-references).
1919
- All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
2020

21+
### Added
22+
#### Scrollbar: New customizable CSS variables
23+
24+
We have introduced new CSS variables to allow for more customizable scrollbar styling. This enhancement utilizes the available WebKit pseudo-selectors such as `::-webkit-scrollbar-track`. However, please note that these pseudo-selectors are prefixed with `-webkit-` and are only supported in WebKit-based browsers (e.g., Chrome, Safari).
25+
26+
###### List of Available CSS Variables for `-webkit-` browsers:
27+
- `--sb-size`: Adjusts the scrollbar size (width and height).
28+
- `--sb-track-bg-color`: Sets the background color of the scrollbar track.
29+
- `--sb-track-bg-color-hover`: Sets the background color of the scrollbar track on hover.
30+
- `--sb-thumb-min-height`: Sets the minimum height of the scrollbar thumb.
31+
- `--sb-thumb-border-radius`: Sets the border radius of the scrollbar thumb.
32+
- `--sb-thumb-border-size`: Sets the border size of the scrollbar thumb.
33+
- `--sb-thumb-border-color`: Sets the border color of the scrollbar thumb.
34+
- `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
35+
- `--sb-thumb-bg-color-hover`: Sets the background color of the scrollbar thumb on hover.
36+
37+
For Firefox users, we provide limited scrollbar styling options through the following CSS variables:
38+
39+
- `--sb-size`: Adjusts the scrollbar size.
40+
- `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
41+
- `--sb-track-bg-color`: Sets the background color of the scrollbar track.
42+
2143
### Changed
2244
- **BREAKING**: Removed `igcFocus` and `igcBlur` events from buttons and inputs - Button, Icon Button, Checkbox, Switch, Combo, Date Time Input, Input, Mask Input, Radios, Select, Textarea.
2345

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"globby": "^14.0.2",
8080
"husky": "^9.1.5",
8181
"ig-typedoc-theme": "^5.0.4",
82-
"igniteui-theming": "^11.0.0",
82+
"igniteui-theming": "^12.0.0",
8383
"keep-a-changelog": "^2.5.3",
8484
"lint-staged": "^15.2.9",
8585
"lit-analyzer": "^2.0.3",

‎src/styles/common/component.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
1-
@use '../utilities/mixins' as *;
21
@use 'igniteui-theming/sass/themes/mixins' as *;
32
@use 'igniteui-theming/sass/color/functions' as *;
43
@use 'igniteui-theming/sass/typography/functions' as *;
4+
@use 'styles/themes/base/scrollbars' as *;
55

66
:host {
77
@include sizable();
88

99
position: relative;
1010
box-sizing: border-box;
1111

12-
@include ig-scrollbar(
13-
var(--ig-scrollbar-size),
14-
var(--ig-scrollbar-track-background),
15-
var(--ig-scrollbar-thumb-background)
16-
);
17-
1812
*,
1913
*::before,
2014
*::after {
2115
box-sizing: border-box;
2216
}
17+
18+
@include ig-scrollbar();
2319
}
2420

2521
:host([hidden]),

‎src/styles/themes/base/_bootstrap.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,5 @@
44
@use 'igniteui-theming/sass/elevations/presets' as *;
55

66
@mixin root-styles($palette, $variant) {
7-
:root {
8-
--ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
9-
--ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
10-
}
11-
127
@include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
138
}

‎src/styles/themes/base/_fluent.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,5 @@
44
@use 'igniteui-theming/sass/elevations/presets' as *;
55

66
@mixin root-styles($palette, $variant) {
7-
:root {
8-
--ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
9-
--ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
10-
}
11-
127
@include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
138
}

‎src/styles/themes/base/_indigo.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,5 @@
44
@use 'igniteui-theming/sass/elevations/presets' as *;
55

66
@mixin root-styles($palette, $variant) {
7-
:root {
8-
--ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
9-
--ig-scrollbar-track-background: #{color($color: gray, $variant: 200)};
10-
}
11-
127
@include theme($palette, $indigo-elevations, $typeface, $type-scale, $variant);
138
}

‎src/styles/themes/base/_material.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,5 @@
44
@use 'igniteui-theming/sass/elevations/presets' as *;
55

66
@mixin root-styles($palette, $variant) {
7-
:root {
8-
--ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
9-
--ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
10-
}
11-
127
@include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
138
}

‎src/styles/themes/base/_scrollbars.scss‎

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,54 @@
11
@use 'igniteui-theming' as *;
22

3-
.ig-scrollbar {
4-
--size: var(--ig-scrollbar-size, #{rem(16px)});
5-
--thumb-background: var(--ig-scrollbar-thumb-background, #{color($color: gray, $variant: 400)});
6-
--track-background: var(--ig-scrollbar-track-background, #{color($color: gray, $variant: 100)});
3+
@mixin ig-scrollbar-vars($schema) {
4+
$theme: digest-schema($schema);
75

8-
scrollbar-width: var(--size);
9-
scrollbar-color: var(--thumb-background) var(--track-background);
6+
.ig-scrollbar {
7+
@include css-vars-from-theme($theme, 'ig-scrollbar');
8+
}
109
}
1110

12-
.ig-scrollbar ::-webkit-scrollbar {
13-
width: var(--size);
14-
height: var(--size);
15-
background: var(--track-background);
16-
}
11+
@mixin ig-scrollbar() {
12+
// The @-moz-document rule is specifically for Firefox because it does not support the WebKit pseudo-selectors for scrollbar styling.
13+
/* stylelint-disable-next-line at-rule-no-vendor-prefix */
14+
@-moz-document url-prefix() {
15+
scrollbar-width: var(--sb-size, initial);
16+
scrollbar-color: var(--sb-thumb-bg-color, initial) var(--sb-track-bg-color, initial);
17+
}
18+
19+
::-webkit-scrollbar {
20+
width: var(--sb-size, initial);
21+
height: var(--sb-size, initial);
22+
}
23+
24+
::-webkit-scrollbar-track {
25+
background: var(--sb-track-bg-color, initial);
26+
}
27+
28+
::-webkit-scrollbar-track:hover,
29+
::-webkit-scrollbar-track:active {
30+
background: var(--sb-track-bg-color-hover, initial);
31+
}
32+
33+
::-webkit-scrollbar-thumb {
34+
min-height: var(--sb-thumb-min-height, initial);
35+
border-radius: var(--sb-thumb-border-radius, initial);
36+
border: var(--sb-thumb-border-size, initial) solid var(--sb-thumb-border-color, initial);
37+
background-color: var(--sb-thumb-bg-color, initial);
38+
}
39+
40+
::-webkit-scrollbar-thumb:hover {
41+
background-color: var(--sb-thumb-bg-color-hover, initial);
42+
}
43+
44+
::-webkit-scrollbar-corner {
45+
background: var(--sb-corner-bg, initial);
46+
border: var(--sb-corner-border-sizem, initial) solid var(--sb-corner-border-color, initial);
47+
}
1748

18-
.ig-scrollbar ::-webkit-scrollbar-thumb {
19-
background: var(--thumb-background);
49+
::-webkit-scrollbar-track-piece {
50+
border: var(--sb-track-border-size, initial) solid var(--sb-track-border-color, initial);
51+
}
2052
}
2153

2254
@media (hover: none) {

‎src/styles/themes/dark/bootstrap.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@use 'igniteui-theming/sass/color/presets/dark/bootstrap' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
23
@use '../base/bootstrap' as base;
3-
@use '../base/scrollbars';
44
@use '../third-party/grid/bootstrap.dark' as grid;
5+
@use '../base/scrollbars' as *;
6+
@include ig-scrollbar-vars($dark-bootstrap-scrollbar);
57
@include base.root-styles($palette, 'dark');

0 commit comments

Comments
 (0)