Revert "refactor(scrollbar): Update the styles to consume colors from schemas…" (#1373)

This reverts commit 1f66b82.

Author: rkaraivanov

CHANGELOG.md

@@ -18,28 +18,6 @@ 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-lock.json

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

package.json

@@ -1,21 +1,25 @@
+@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/common/component.scss

@@ -4,5 +4,10 @@
 @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/_bootstrap.scss

@@ -4,5 +4,10 @@
 @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,5 +4,10 @@
 @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/_indigo.scss

@@ -4,5 +4,10 @@
 @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/_material.scss

@@ -1,54 +1,22 @@
 @use 'igniteui-theming' as *;
 
-@mixin ig-scrollbar-vars($schema) {
-    $theme: digest-schema($schema);
+.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)});
 
-    .ig-scrollbar {
-        @include css-vars-from-theme($theme, 'ig-scrollbar');
-    }
+    scrollbar-width: var(--size);
+    scrollbar-color: var(--thumb-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 {
+    width: var(--size);
+    height: var(--size);
+    background: var(--track-background);
+}
 
-    ::-webkit-scrollbar-track-piece {
-        border: var(--sb-track-border-size, initial) solid var(--sb-track-border-color, initial);
-    }
+.ig-scrollbar ::-webkit-scrollbar-thumb {
+    background: var(--thumb-background);
 }
 
 @media (hover: none) {

src/styles/themes/base/_scrollbars.scss

@@ -1,7 +1,5 @@
 @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');