refactor(scrollbar): Update the styles to consume colors from schemas #1331

CHANGELOG.md

@@ -18,6 +18,28 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
     - 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).
     - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
 
+### Added
+#### Scrollbar: New customizable CSS variables
+
+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).
+
+###### List of Available CSS Variables for `-webkit-` browsers:
+- `--sb-size`: Adjusts the scrollbar size (width and height).
+- `--sb-track-bg-color`: Sets the background color of the scrollbar track.
+- `--sb-track-bg-color-hover`: Sets the background color of the scrollbar track on hover.
+- `--sb-thumb-min-height`: Sets the minimum height of the scrollbar thumb.
+- `--sb-thumb-border-radius`: Sets the border radius of the scrollbar thumb.
+- `--sb-thumb-border-size`: Sets the border size of the scrollbar thumb.
+- `--sb-thumb-border-color`: Sets the border color of the scrollbar thumb.
+- `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
+- `--sb-thumb-bg-color-hover`: Sets the background color of the scrollbar thumb on hover.
+
+For Firefox users, we provide limited scrollbar styling options through the following CSS variables:
+
+- `--sb-size`: Adjusts the scrollbar size.
+- `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
+- `--sb-track-bg-color`: Sets the background color of the scrollbar track.
+
 ### Changed
 - **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.
 

package.json

@@ -79,7 +79,7 @@
     "globby": "^14.0.2",
     "husky": "^9.1.6",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^11.0.0",
+    "igniteui-theming": "^12.0.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.10",
     "lit-analyzer": "^2.0.3",

src/styles/common/component.scss

@@ -1,25 +1,21 @@
-@use '../utilities/mixins' as *;
 @use 'igniteui-theming/sass/themes/mixins' as *;
 @use 'igniteui-theming/sass/color/functions' as *;
 @use 'igniteui-theming/sass/typography/functions' as *;
+@use 'styles/themes/base/scrollbars' as *;
 
 :host {
     @include sizable();
 
     position: relative;
     box-sizing: border-box;
 
-    @include ig-scrollbar(
-        var(--ig-scrollbar-size),
-        var(--ig-scrollbar-track-background),
-        var(--ig-scrollbar-thumb-background)
-    );
-
     *,
     *::before,
     *::after {
         box-sizing: border-box;
     }
+
+    @include ig-scrollbar();
 }
 
 :host([hidden]),

src/styles/themes/base/_bootstrap.scss

@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }

src/styles/themes/base/_fluent.scss

@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }

src/styles/themes/base/_indigo.scss

@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 200)};
-    }
-
     @include theme($palette, $indigo-elevations, $typeface, $type-scale, $variant);
 }

src/styles/themes/base/_material.scss

@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }

src/styles/themes/base/_scrollbars.scss

@@ -1,22 +1,54 @@
 @use 'igniteui-theming' as *;
 
-.ig-scrollbar {
-    --size: var(--ig-scrollbar-size, #{rem(16px)});
-    --thumb-background: var(--ig-scrollbar-thumb-background, #{color($color: gray, $variant: 400)});
-    --track-background: var(--ig-scrollbar-track-background, #{color($color: gray, $variant: 100)});
+@mixin ig-scrollbar-vars($schema) {
+    $theme: digest-schema($schema);
 
-    scrollbar-width: var(--size);
-    scrollbar-color: var(--thumb-background) var(--track-background);
+    .ig-scrollbar {
+        @include css-vars-from-theme($theme, 'ig-scrollbar');
+    }
 }
 
-.ig-scrollbar ::-webkit-scrollbar {
-    width: var(--size);
-    height: var(--size);
-    background: var(--track-background);
-}
+@mixin ig-scrollbar() {
+    // The @-moz-document rule is specifically for Firefox because it does not support the WebKit pseudo-selectors for scrollbar styling.
+    /* stylelint-disable-next-line at-rule-no-vendor-prefix */
+    @-moz-document url-prefix() {
+        scrollbar-width: var(--sb-size, initial);
+        scrollbar-color: var(--sb-thumb-bg-color, initial) var(--sb-track-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar {
+        width: var(--sb-size, initial);
+        height: var(--sb-size, initial);
+    }
+
+    ::-webkit-scrollbar-track {
+        background: var(--sb-track-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar-track:hover,
+    ::-webkit-scrollbar-track:active {
+        background: var(--sb-track-bg-color-hover, initial);
+    }
+
+    ::-webkit-scrollbar-thumb {
+        min-height: var(--sb-thumb-min-height, initial);
+        border-radius: var(--sb-thumb-border-radius, initial);
+        border: var(--sb-thumb-border-size, initial) solid var(--sb-thumb-border-color, initial);
+        background-color: var(--sb-thumb-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: var(--sb-thumb-bg-color-hover, initial);
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: var(--sb-corner-bg, initial);
+        border: var(--sb-corner-border-sizem, initial) solid var(--sb-corner-border-color, initial);
+    }
 
-.ig-scrollbar ::-webkit-scrollbar-thumb {
-    background: var(--thumb-background);
+    ::-webkit-scrollbar-track-piece {
+        border: var(--sb-track-border-size, initial) solid var(--sb-track-border-color, initial);
+    }
 }
 
 @media (hover: none) {

src/styles/themes/dark/bootstrap.scss

@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/bootstrap' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/bootstrap' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/bootstrap.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-bootstrap-scrollbar);
 @include base.root-styles($palette, 'dark');

src/styles/themes/dark/fluent.scss

@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/fluent' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/fluent' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/fluent.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-fluent-scrollbar);
 @include base.root-styles($palette, 'dark');

src/styles/themes/dark/indigo.scss

@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/indigo' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/indigo' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/indigo.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-indigo-scrollbar);
 @include base.root-styles($palette, 'dark');

src/styles/themes/dark/material.scss

@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/material' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/material' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/material.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-material-scrollbar);
 @include base.root-styles($palette, 'dark');

src/styles/themes/light/bootstrap.scss

@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/bootstrap' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/bootstrap' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($bootstrap-scrollbar);
 @include base.root-styles($palette, 'light');

src/styles/themes/light/fluent.scss

@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/fluent' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/fluent' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($fluent-scrollbar);
 @include base.root-styles($palette, 'light');

src/styles/themes/light/indigo.scss

@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/indigo' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/indigo' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($indigo-scrollbar);
 @include base.root-styles($palette, 'light');

src/styles/themes/light/material.scss

@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/material' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/material' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($material-scrollbar);
 @include base.root-styles($palette, 'light');

src/styles/utilities/_index.scss

@@ -1,4 +1,3 @@
-@forward 'mixins';
 @forward 'functions';
 @forward 'igniteui-theming' hide color, contrast-color;
 @forward 'overwrites';