feat(scrollbar): add scrollbar theme

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss

@@ -1,4 +1,4 @@
-%display-container {
+%display-container {
     display: inherit;
     position: relative;
     width: 100%;

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -12,7 +12,6 @@
 
     %vhelper--vertical {
         position: absolute;
-        width: 18px;
         top: 0;
         #{$right}: 0;
     }

projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss

@@ -0,0 +1,15 @@
+////
+/// @group components
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(igx-scrollbar) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @extend %scrollbar-display !optional;
+}
+

projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss

@@ -0,0 +1,75 @@
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Color} $thumb-background [null] - The background color used for the thumb.
+/// @param {Color} $track-background [null] - The background color used for the track.
+/// @param {Number | String} $size [null] - The size of the track.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires text-contrast
+/// @requires extend
+///
+/// @example scss Change the background and track colors
+///   $my-scrollbar-theme: igx-scrollbar-theme($thumb-background: black, $track-background: gray);
+///   // Pass the theme to the igx-scrollbar component mixin
+///   @include igx-scrollbar($my-avatar-theme);
+@function igx-scrollbar-theme(
+    $palette: $default-palette,
+    $schema: $light-schema,
+    $size: null,
+    $thumb-background: null,
+    $track-background: null,
+) {
+    $name: 'igx-scrollbar';
+    $scrollbar-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $scrollbar-schema: map-get($schema, $name);
+    } @else {
+        $scrollbar-schema: $schema;
+    }
+
+    $theme: apply-palette($scrollbar-schema, $palette);
+
+    @return extend($theme, (
+        name: $name,
+        palette: $palette,
+        thumb-background: $thumb-background,
+        track-background: $track-background,
+        size: $size
+    ));
+}
+
+/// @param {Map} $theme - The theme used to style the component.
+/// @requires {mixin} igx-root-css-vars
+/// @requires rem
+/// @requires --var
+@mixin igx-scrollbar($theme) {
+    @include igx-root-css-vars($theme);
+
+    %scrollbar-display {
+        @if type-of(map-get($theme, 'size') == 'string') {
+            scrollbar-width: --var($theme, 'size');
+        }
+
+        scrollbar-color: --var($theme, 'thumb-background') --var($theme, 'track-background');
+
+        ::-webkit-scrollbar {
+            width: --var($theme, 'size');
+            height: --var($theme, 'size');
+            background: --var($theme, 'track-background');
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: --var($theme, 'thumb-background');
+        }
+    }
+}
+

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -51,6 +51,7 @@
 @import '../components/overlay/overlay-component';
 @import '../components/progress/progress-component';
 @import '../components/radio/radio-component';
+@import '../components/scrollbar/scrollbar-component';
 @import '../components/slider/slider-component';
 @import '../components/snackbar/snackbar-component';
 @import '../components/switch/switch-component';

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -34,6 +34,7 @@
 @import '../components/toast/toast-theme';
 @import '../components/tooltip/tooltip-theme';
 @import '../components/tabs/tabs-theme';
+@import '../components/scrollbar/scrollbar-theme';
 @import '../components/switch/switch-theme';
 @import '../components/snackbar/snackbar-theme';
 @import '../components/slider/slider-theme';
@@ -347,6 +348,10 @@
         @include igx-radio(igx-radio-theme($palette, $schema));
     }
 
+    @if not(index($exclude, 'igx-scrollbar')) {
+        @include igx-scrollbar(igx-scrollbar-theme($palette, $schema));
+    }
+
     @if not(index($exclude, 'igx-slider')) {
         @include igx-slider(igx-slider-theme($palette, $schema));
     }

projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

@@ -91,11 +91,11 @@ $green-palette: igx-palette(
 /// Dark green palette,
 /// @type {Map}
 /// @group palettes
-$green-dark-palette: extend(
-    $green-palette,
-    (
-        surface: (500: #222)
-    )
+$green-dark-palette: igx-palette(
+    $primary: igx-color($green-palette, 'primary'),
+    $secondary: igx-color($green-palette, 'secondary'),
+    $surface: #222,
+    $grays: #fff
 ) !default;
 
 /// Purple palette
@@ -109,11 +109,11 @@ $purple-palette: igx-palette(
 /// Dark purple palette
 /// @type {Map}
 /// @group palettes
-$purple-dark-palette: extend(
-    $purple-palette,
-    (
-        surface: (500: #333)
-    )
+$purple-dark-palette: igx-palette(
+    $primary: igx-color($purple-palette, 'primary'),
+    $secondary: igx-color($purple-palette, 'secondary'),
+    $surface: #333,
+    $grays: #fff
 ) !default;
 
 /// Fluent Excel palette
@@ -130,11 +130,14 @@ $fluent-excel-palette: igx-palette(
 /// Fluent Excel dark palette
 /// @type {Map}
 /// @group palettes
-$fluent-excel-dark-palette: extend(
-    $fluent-excel-palette,
-    (
-        surface: (500: #222)
-    )
+$fluent-excel-dark-palette: igx-palette(
+    $primary: igx-color($fluent-excel-palette, 'primary'),
+    $secondary: igx-color($fluent-excel-palette, 'secondary'),
+    $success: igx-color($fluent-excel-palette, 'success'),
+    $warn: igx-color($fluent-excel-palette, 'warn'),
+    $error: igx-color($fluent-excel-palette, 'error'),
+    $surface: #222,
+    $grays: #fff
 ) !default;
 
 /// Fluent Word palette
@@ -151,11 +154,14 @@ $fluent-word-palette: igx-palette(
 /// Fluent Word dark palette
 /// @type {Map}
 /// @group palettes
-$fluent-word-dark-palette: extend(
-    $fluent-word-palette,
-    (
-        surface: (500: #222)
-    )
+$fluent-word-dark-palette: igx-palette(
+    $primary: igx-color($fluent-word-palette, 'primary'),
+    $secondary: igx-color($fluent-word-palette, 'secondary'),
+    $success: igx-color($fluent-word-palette, 'success'),
+    $warn: igx-color($fluent-word-palette, 'warn'),
+    $error: igx-color($fluent-word-palette, 'error'),
+    $surface: #222,
+    $grays: #fff
 ) !default;
 
 /// Bootstrap palette
@@ -174,10 +180,14 @@ $bootstrap-palette: igx-palette(
 /// Bootstrap dark palette
 /// @type {Map}
 /// @group palettes
-$bootstrap-dark-palette: extend(
-    $bootstrap-palette,
-    (
-        surface: (500: #333)
-    )
+$bootstrap-dark-palette: igx-palette(
+    $primary: igx-color($bootstrap-palette, 'primary'),
+    $secondary: igx-color($bootstrap-palette, 'secondary'),
+    $info: igx-color($bootstrap-palette, 'info'),
+    $success: igx-color($bootstrap-palette, 'success'),
+    $warn: igx-color($bootstrap-palette, 'warn'),
+    $error: igx-color($bootstrap-palette, 'error'),
+    $surface: #333,
+    $grays: #fff
 ) !default;
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss

@@ -35,6 +35,7 @@
 @import './progress';
 @import './radio';
 @import './ripple';
+@import './scrollbar';
 @import './slider';
 @import './snackbar';
 @import './switch';
@@ -78,6 +79,7 @@
 /// @property {Map} igx-progress-circular [$_dark-progress-circular]
 /// @property {Map} igx-radio [$_dark-radio]
 /// @property {Map} igx-ripple [$_dark-ripple]
+/// @property {Map} igx-scrollbar [$_dark-scrollbar]
 /// @property {Map} igx-slider [$_dark-slider]
 /// @property {Map} igx-snackbar [$_dark-snackbar]
 /// @property {Map} igx-switch [$_dark-switch]
@@ -119,6 +121,7 @@ $dark-schema: (
     igx-circular-bar: $_dark-progress-circular,
     igx-radio: $_dark-radio,
     igx-ripple: $_dark-ripple,
+    igx-scrollbar: $_dark-scrollbar,
     igx-slider: $_dark-slider,
     igx-snackbar: $_dark-snackbar,
     igx-switch: $_dark-switch,
@@ -163,6 +166,7 @@ $dark-schema: (
 /// @property {map} igx-circular-bar [$_dark-fluent-progress-circular],
 /// @property {map} igx-radio [$_dark-fluent-radio],
 /// @property {map} igx-ripple [$_dark-fluent-ripple],
+/// @property {map} igx-scrollbar [$_dark-fluent-scrollbar],
 /// @property {map} igx-slider [$_dark-fluent-slider],
 /// @property {map} igx-snackbar [$_dark-fluent-snackbar],
 /// @property {map} igx-switch [$_dark-fluent-switch],
@@ -204,6 +208,7 @@ $dark-fluent-schema: (
     igx-circular-bar: $_dark-fluent-progress-circular,
     igx-radio: $_dark-fluent-radio,
     igx-ripple: $_dark-fluent-ripple,
+    igx-scrollbar: $_dark-fluent-scrollbar,
     igx-slider: $_dark-fluent-slider,
     igx-snackbar: $_dark-fluent-snackbar,
     igx-switch: $_dark-fluent-switch,
@@ -248,6 +253,7 @@ $dark-fluent-schema: (
 /// @property {map} igx-circular-bar [$_dark-bootstrap-progress-circular],
 /// @property {map} igx-radio [$_dark-bootstrap-radio],
 /// @property {map} igx-ripple [$_dark-bootstrap-ripple],
+/// @property {map} igx-scrollbar [$_dark-bootstrap-scrollbar],
 /// @property {map} igx-slider [$_dark-bootstrap-slider],
 /// @property {map} igx-snackbar [$_dark-bootstrap-snackbar],
 /// @property {map} igx-switch [$_dark-bootstrap-switch],
@@ -289,6 +295,7 @@ $dark-bootstrap-schema: (
     igx-circular-bar: $_dark-bootstrap-progress-circular,
     igx-radio: $_dark-bootstrap-radio,
     igx-ripple: $_dark-bootstrap-ripple,
+    igx-scrollbar: $_dark-bootstrap-scrollbar,
     igx-slider: $_dark-bootstrap-slider,
     igx-snackbar: $_dark-bootstrap-snackbar,
     igx-switch: $_dark-bootstrap-switch,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss

@@ -0,0 +1,52 @@
+@import '../light/scrollbar';
+
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a dark scrollbar schema.
+/// @type {Map}
+/// @property {Color} thumb-background [igx-color: surface, lighten: 20%] - The background color used for the thumb.
+/// @property {Color} track-background [igx-color: 'surface', lighten: 5%] - The background color used for the track.
+/// @property {String | Number} size [16px] - The size of the track.
+/// @requires $_light-scrollbar
+/// @see $default-palette
+$_dark-scrollbar: extend(
+    $_light-scrollbar,
+    (
+        thumb-background: (
+            igx-color: 'surface',
+            lighten: 20%
+        ),
+
+        track-background: (
+            igx-color: 'surface',
+            lighten: 5%
+        ),
+    )
+);
+
+/// Generates a fluent scrollbar schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_dark-scrollbar
+$_dark-fluent-scrollbar: extend(
+    $_dark-scrollbar,
+    (
+        variant: 'fluent',
+    )
+);
+
+/// Generates a bootstrap scrollbar schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_dark-scrollbar
+$_dark-bootstrap-scrollbar: extend(
+    $_light-scrollbar,
+    (
+        variant: 'bootstrap',
+    )
+);
+

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss

@@ -36,6 +36,7 @@
 @import './progress';
 @import './radio';
 @import './ripple';
+@import './scrollbar';
 @import './slider';
 @import './snackbar';
 @import './switch';
@@ -79,6 +80,7 @@
 /// @property {Map} igx-progress-circular [$_light-progress-circular]
 /// @property {Map} igx-radio [$_light-radio]
 /// @property {Map} igx-ripple [$_light-ripple]
+/// @property {Map} igx-scrollbar [$_light-scrollbar]
 /// @property {Map} igx-slider [$_light-slider]
 /// @property {Map} igx-snackbar [$_light-snackbar]
 /// @property {Map} igx-switch [$_light-switch]
@@ -120,6 +122,7 @@ $light-schema: (
     igx-circular-bar: $_light-progress-circular,
     igx-radio: $_light-radio,
     igx-ripple: $_light-ripple,
+    igx-scrollbar: $_light-scrollbar,
     igx-slider: $_light-slider,
     igx-snackbar: $_light-snackbar,
     igx-switch: $_light-switch,
@@ -163,6 +166,7 @@ $light-fluent-schema: (
     igx-circular-bar: $_fluent-progress-circular,
     igx-radio: $_fluent-radio,
     igx-ripple: $_fluent-ripple,
+    igx-scrollbar: $_fluent-scrollbar,
     igx-slider: $_fluent-slider,
     igx-snackbar: $_fluent-snackbar,
     igx-switch: $_fluent-switch,
@@ -206,6 +210,7 @@ $light-bootstrap-schema: (
     igx-circular-bar: $_bootstrap-progress-circular,
     igx-radio: $_bootstrap-radio,
     igx-ripple: $_bootstrap-ripple,
+    igx-scrollbar: $_bootstrap-scrollbar,
     igx-slider: $_bootstrap-slider,
     igx-snackbar: $_bootstrap-snackbar,
     igx-switch: $_bootstrap-switch,