refactor(scrollbar): update schemas (#308)

IgniteUI · Jul 31, 2024 · f55c1bd · f55c1bd
1 parent 4e4dae1
commit f55c1bd
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 21 deletions.
diff --git a/sass/themes/schemas/components/dark/_scrollbar.scss b/sass/themes/schemas/components/dark/_scrollbar.scss
@@ -19,21 +19,36 @@ $dark-fluent-scrollbar: $fluent-scrollbar;
 
 /// Generates a dark bootstrap scrollbar schema.
 /// @type {Map}
-/// @prop {Map} thumb-background [color: ('gray', 200, .5)] - The background color used for the thumb.
-/// @prop {Color} track-background [color: ('gray', 100, .5)] - The background color used for the track.
+/// @prop {Map} sb-thumb-bg-color [color: ('gray', 200, .5)] - The background color used for the thumb.
+/// @prop {Map} sb-thumb-bg-color-hover [color: ('gray', 200, .5)] - The :hover background color of the thumb.
+/// @prop {Map} sb-track-bg-color [color: ('gray', 100, .5)] - The background color used for the track.
+/// @prop {Map} sb-track-bg-color-hover [color: ('gray', 100, .5)] - The :hover background color of the track.
 /// @requires $bootstrap-scrollbar
 $dark-bootstrap-scrollbar: extend(
     $bootstrap-scrollbar,
     (
-        thumb-background: (
+        sb-thumb-bg-color: (
             color: (
                 'gray',
                 200,
                 0.5,
             ),
         ),
-
-        track-background: (
+        sb-thumb-bg-color-hover: (
+            color: (
+                'gray',
+                200,
+                0.5,
+            ),
+        ),
+        sb-track-bg-color: (
+            color: (
+                'gray',
+                100,
+                0.5,
+            ),
+        ),
+        sb-track-bg-color-hover: (
             color: (
                 'gray',
                 100,
@@ -45,20 +60,34 @@ $dark-bootstrap-scrollbar: extend(
 
 /// Generates a dark indigo scrollbar schema.
 /// @type {Map}
-/// @prop {Map} thumb-background [color: ('gray', 100)] - The background color used for the thumb.
-/// @prop {Color} track-background [color: ('gray', 50)] - The background color used for the track.
+/// @prop {Map} sb-thumb-bg-color [color: ('gray', 100)] - The background color used for the thumb.
+/// @prop {Map} sb-thumb-bg-color-hover [color: ('gray', 100)] - The :hover background color of the thumb.
+
+/// @prop {Map} sb-track-bg-color [color: ('gray', 50)] - The background color used for the track.
+/// @prop {Map} sb-track-bg-color-hover [color: ('gray', 50)] - The :hover background color of the track.
 /// @requires $indigo-scrollbar
 $dark-indigo-scrollbar: extend(
     $indigo-scrollbar,
     (
-        thumb-background: (
+        sb-thumb-bg-color: (
             color: (
                 'gray',
                 100,
             ),
         ),
-
-        track-background: (
+        sb-thumb-bg-color-hover: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        sb-track-bg-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        sb-track-bg-color-hover: (
             color: (
                 'gray',
                 50,

diff --git a/sass/themes/schemas/components/light/_scrollbar.scss b/sass/themes/schemas/components/light/_scrollbar.scss
@@ -9,25 +9,62 @@
 
 /// Generates a base light scrollbar schema.
 /// @type {Map}
-/// @property {Color} thumb-background [color: ('gray', 400)] - The background color used for the thumb.
-/// @property {Color} track-background [color: ('gray', 100)] - The background color used for the track.
-/// @property {String | Number} scrollbar-size [16px] - The size of the track.
+/// @prop {String | Number} sb-size [rem(16px)] - The size of the scrollbar.
+/// @prop {String | Number} sb-thumb-min-height [rem(32px)] - The min-height of the thumb.
+/// @prop {Map} sb-thumb-bg-color [color: ('gray', 400)] - The background color of the thumb.
+/// @prop {Map} sb-thumb-bg-color-hover [color: ('gray', 400)] - The :hover background color of the thumb.
+/// @prop {Color} sb-thumb-border-color [transparent] - The border color of the thumb.
+/// @prop {String | Number} sb-thumb-border-size [0] - The border size of the thumb.
+/// @prop {String | Number} sb-thumb-border-radius [0] - The border radius of the thumb.
+/// @prop {Map} sb-track-bg-color [color: ('gray', 100)] - The background color of the track.
+/// @prop {Map} sb-track-bg-color-hover [color: ('gray', 100)] - The :hover background color of the track.
+/// @prop {Color} sb-track-border-color [transparent] - The border color of the track.
+/// @prop {String | Number} sb-track-border-size [0] - The border size of the track.
+/// @prop {Map} sb-corner-bg [color: ('gray', 100)] - The background color of the corner.
+/// @prop {Color} sb-corner-border-color [transparent] - The border color of the corner.
+/// @prop {String | Number} sb-corner-border-size [0] - The border size of the corner.
 $light-scrollbar: (
-    scrollbar-size: 16px,
-
-    thumb-background: (
+    sb-size: rem(16px),
+    sb-thumb-min-height: rem(32px),
+    sb-thumb-bg-color: (
         color: (
             'gray',
             400,
         ),
     ),
+    sb-thumb-bg-color-hover: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    sb-thumb-border-color: transparent,
+    sb-thumb-border-size: 0,
+    sb-thumb-border-radius: 0,
 
-    track-background: (
+    sb-track-bg-color: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+    sb-track-bg-color-hover: (
         color: (
             'gray',
             100,
         ),
     ),
+    sb-track-border-color: transparent,
+    sb-track-border-size: 0,
+
+    sb-corner-bg: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+    sb-corner-border-color: transparent,
+    sb-corner-border-size: 0,
 );
 
 /// Generates a material scrollbar schema.
@@ -37,12 +74,19 @@ $material-scrollbar: $light-scrollbar;
 
 /// Generates a fluent scrollbar schema.
 /// @type {Map}
-/// @property {Color} thumb-background [color: ('gray', 300)] - The background color used for the thumb.
+/// @prop {Color} sb-thumb-bg-color [color: ('gray', 300)] - The background color used for the thumb.
+/// @prop {Map} sb-thumb-bg-color-hover [color: ('gray', 300)] - The :hover background color of the thumb.
 /// @requires {Map} $light-scrollbar
 $fluent-scrollbar: extend(
     $light-scrollbar,
     (
-        thumb-background: (
+        sb-thumb-bg-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        sb-thumb-bg-color-hover: (
             color: (
                 'gray',
                 300,
@@ -58,12 +102,19 @@ $bootstrap-scrollbar: $light-scrollbar;
 
 /// Generates an indigo scrollbar schema.
 /// @type {Map}
-/// @property {Color} track-background [color: ('gray', 200)] - The background color used for the track.
+/// @prop {Map} sb-track-bg-color [color: ('gray', 200)] - The background color used for the track.
+/// @prop {Map} sb-track-bg-color-hover [color: ('gray', 100)] - The :hover background color of the track.
 /// @requires {Map} $light-scrollbar
 $indigo-scrollbar: extend(
     $light-scrollbar,
     (
-        track-background: (
+        sb-track-bg-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        sb-track-bg-color-hover: (
             color: (
                 'gray',
                 200,