feat(scrollbars): set global scrollbar styles (#539)

* feat(scrollbars): set global scrollbar styles * refactor(changelog): update * chore(changelog): reference issues * chore(changelog): update version tags
IgniteUI · Nov 2, 2022 · 05fe124 · 05fe124
1 parent 31165bb
commit 05fe124
Show file tree

Hide file tree

Showing 15 changed files with 59 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [4.0.0] - 2022-11-02
+### Changed
+- Themes
+  - Build - Utilize [Ignite UI Theming](https://github.com/IgniteUI/igniteui-theming) package when building themes [#415](https://github.com/IgniteUI/igniteui-webcomponents/issues/415)
+  - Sizing - Introduced CSS variables that allow runtime CSS configuration of the size for all or individual components [#115](https://github.com/IgniteUI/igniteui-webcomponents/issues/115)
+  - Spacing - Introduced CSS variables that allow runtime CSS configuration of the internal spacing (padding/margin) of components [#506](https://github.com/IgniteUI/igniteui-webcomponents/issues/506)
+  - Scrollbars - Added the ability to style application-level scrollbars by setting the `ig-scrollbar` CSS class on any element [#141](https://github.com/IgniteUI/igniteui-webcomponents/issues/141)
+
 ## [3.4.2] - 2022-11-01
 ### Fixed
 - Resolved importing error for `DateRangeType` [#535](https://github.com/IgniteUI/igniteui-webcomponents/issues/535)
@@ -167,6 +175,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[4.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.4.2...4.0.0
 [3.4.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.4.1...3.4.2
 [3.4.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.4.0...3.4.1
 [3.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.3.1...3.4.0

diff --git a/src/styles/common/component.scss b/src/styles/common/component.scss
@@ -16,9 +16,9 @@
     }
 
     @include ig-scrollbar(
-        var(--scrolbar-size, rem(14px)),
-        var(--ig-scrollbar-track-color, color(null, gray, 200)),
-        var(--ig-scrollbar-thumb-color, color(null, gray, 400))
+        var(--ig-scrollbar-size),
+        var(--ig-scrollbar-track-background),
+        var(--ig-scrollbar-thumb-background)
     );
 }
 

diff --git a/src/styles/themes/base/_bootstrap.scss b/src/styles/themes/base/_bootstrap.scss
@@ -2,12 +2,6 @@
 @use '../../../../node_modules/igniteui-theming/sass/typography/presets' as *;
 @use '../../../../node_modules/igniteui-theming/sass/elevations/presets' as *;
 
-.ig-scrollbar {
-    --scrolbar-size: #{rem(16px)};
-    --ig-scrollbar-track-color: #{color(null, gray, 100)};
-    --ig-scrollbar-thumb-color: #{color(null, gray, 400)};
-}
-
 @mixin root-styles($palette) {
     :root {
         --ig-theme: bootstrap;
@@ -18,6 +12,9 @@
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
+        --ig-scrollbar-size: #{rem(16px)};
+        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
+        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
     }
 
     @include palette($palette);

diff --git a/src/styles/themes/base/_fluent.scss b/src/styles/themes/base/_fluent.scss
@@ -2,12 +2,6 @@
 @use '../../../../node_modules/igniteui-theming/sass/typography/presets' as *;
 @use '../../../../node_modules/igniteui-theming/sass/elevations/presets' as *;
 
-.ig-scrollbar {
-    --scrolbar-size: #{rem(16px)};
-    --ig-scrollbar-track-color: #{color(null, gray, 100)};
-    --ig-scrollbar-thumb-color: #{color(null, gray, 400)};
-}
-
 @mixin root-styles($palette) {
     :root {
         --ig-theme: fluent;
@@ -18,6 +12,9 @@
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
+        --ig-scrollbar-size: #{rem(16px)};
+        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
+        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
     }
 
     @include palette($palette);

diff --git a/src/styles/themes/base/_indigo.scss b/src/styles/themes/base/_indigo.scss
@@ -2,12 +2,6 @@
 @use '../../../../node_modules/igniteui-theming/sass/typography/presets' as *;
 @use '../../../../node_modules/igniteui-theming/sass/elevations/presets' as *;
 
-.ig-scrollbar {
-    --scrolbar-size: #{rem(16px)};
-    --ig-scrollbar-track-color: #{color(null, gray, 200)};
-    --ig-scrollbar-thumb-color: #{color(null, gray, 400)};
-}
-
 @mixin root-styles($palette) {
     :root {
         --ig-theme: indigo;
@@ -18,6 +12,9 @@
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
+        --ig-scrollbar-size: #{rem(16px)};
+        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
+        --ig-scrollbar-track-background: #{color($color: gray, $variant: 200)};
 
         @include palette($palette);
         @include elevations($material-elevations);

diff --git a/src/styles/themes/base/_material.scss b/src/styles/themes/base/_material.scss
@@ -2,12 +2,6 @@
 @use '../../../../node_modules/igniteui-theming/sass/typography/presets' as *;
 @use '../../../../node_modules/igniteui-theming/sass/elevations/presets' as *;
 
-.ig-scrollbar {
-    --scrolbar-size: #{rem(16px)};
-    --ig-scrollbar-track-color: #{color(null, gray, 100)};
-    --ig-scrollbar-thumb-color: #{color(null, gray, 400)};
-}
-
 @mixin root-styles($palette) {
     :root {
         --ig-theme: material;
@@ -18,6 +12,9 @@
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
+        --ig-scrollbar-size: #{rem(16px)};
+        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
+        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
     }
 
     @include palette($palette);

diff --git a/src/styles/themes/base/_scrollbars.scss b/src/styles/themes/base/_scrollbars.scss
@@ -0,0 +1,27 @@
+@use '../../../../node_modules/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)});
+
+    scrollbar-width: var(--size);
+    scrollbar-color: var(--thumb-background) var(--track-background);
+}
+
+.ig-scrollbar ::-webkit-scrollbar {
+    width: var(--size);
+    height: var(--size);
+    background: var(--track-background);
+}
+
+.ig-scrollbar ::-webkit-scrollbar-thumb {
+    background: var(--thumb-background);
+}
+
+@media (hover: none) {
+    .ig-scrollbar ::-webkit-scrollbar {
+        width: auto;
+        height: auto;
+    }
+}
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
@@ -1,5 +1,6 @@
 @use '../../../../node_modules/igniteui-theming/sass/color/presets/' as *;
 @use '../base/bootstrap' as base;
+@use '../base/scrollbars';
 @use '../third-party/grid/bootstrap.dark' as grid;
 @use '../../../components/dropdown/themes/dark/dropdown.bootstrap' as dropdown;
 @use '../../../components/input/themes/dark/input.dark.bootstrap' as input;

diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
@@ -1,5 +1,6 @@
 @use '../../../../node_modules/igniteui-theming/sass/color/presets/' as *;
 @use '../base/fluent' as base;
+@use '../base/scrollbars';
 @use '../third-party/grid/fluent.dark' as grid;
 @use '../../../components/button/themes/button/dark/button.fluent' as button;
 @use '../../../components/button/themes/icon-button/dark/icon-button.fluent' as icon-button;

diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
@@ -1,5 +1,6 @@
 @use '../../../../node_modules/igniteui-theming/sass/color/presets/' as *;
 @use '../base/indigo' as base;
+@use '../base/scrollbars';
 @use '../third-party/grid/indigo.dark' as grid;
 @use '../../../components/checkbox/themes/dark/checkbox.indigo' as checkbox;
 @use '../../../components/checkbox/themes/dark/switch.indigo' as switch;

diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss
@@ -1,5 +1,6 @@
 @use '../../../../node_modules/igniteui-theming/sass/color/presets/' as *;
 @use '../base/material' as base;
+@use '../base/scrollbars';
 @use '../third-party/grid/material.dark' as grid;
 @use '../../../components/input/themes/dark/input.dark.material' as input;
 @use '../../../components/select/themes/dark/select.material' as select;

diff --git a/src/styles/themes/light/bootstrap.scss b/src/styles/themes/light/bootstrap.scss
@@ -1,3 +1,4 @@
 @use '../../../../node_modules/igniteui-theming/sass/color/presets/' as *;
 @use '../base/bootstrap' as base;
+@use '../base/scrollbars';
 @include base.root-styles($light-bootstrap-palette);
diff --git a/src/styles/themes/light/fluent.scss b/src/styles/themes/light/fluent.scss
@@ -1,3 +1,4 @@
 @use '../../../../node_modules/igniteui-theming/sass/color/presets/' as *;
 @use '../base/fluent' as base;
+@use '../base/scrollbars';
 @include base.root-styles($light-fluent-palette);
diff --git a/src/styles/themes/light/indigo.scss b/src/styles/themes/light/indigo.scss
@@ -1,3 +1,4 @@
 @use '../../../../node_modules/igniteui-theming/sass/color/presets/' as *;
 @use '../base/indigo' as base;
+@use '../base/scrollbars';
 @include base.root-styles($light-indigo-palette);
diff --git a/src/styles/themes/light/material.scss b/src/styles/themes/light/material.scss
@@ -1,3 +1,4 @@
 @use '../../../../node_modules/igniteui-theming/sass/color/presets/' as *;
 @use '../base/material' as base;
+@use '../base/scrollbars';
 @include base.root-styles($light-material-palette);