igniteui-theming 6.0.0-beta.13 → 6.0.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.0.0-beta.13",
+  "version": "6.0.0-beta.15",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_calendar.scss

@@ -128,19 +128,12 @@ $dark-material-calendar: extend(
 /// @prop {Map} navigation-hover-color [color: ('primary', 200)] - The :hover color of the buttons responsible for navigation.
 /// @prop {Map} navigation-focus-color [color: ('primary', 200)] - The :focus color of the buttons responsible for navigation.
 /// @prop {Map} year-selected-background [color: ('primary', 800)]- The background color of the selected year in years view.
-/// @prop {Map} year-selected-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the selected year in years view.
 /// @prop {Map} year-selected-hover-background [color: ('primary' 600)] - The :hover background color of the selected year in years view.
-/// @prop {Map} year-selected-current-foreground [contrast-color: ('primary', 800)] - The foreground color of the current/selected year.
 /// @prop {Map} year-selected-current-background [color: ('primary', 800)] - The foreground color of the current/selected year.
-/// @prop {Map} year-selected-current-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the current/selected year.
 /// @prop {Map} year-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected year.
-/// @prop {Map} month-selected-foreground [contrast-color: ('primary', 800)] - The foreground color of the selected month in month view.
 /// @prop {Map} month-selected-background [color: ('primary', 800)] - The background color of the selected month in month view.
-/// @prop {Map} month-selected-hover-foreground [contrast-color: ('primary', 600)]- The :hover foreground color of the selected month in month view.
 /// @prop {Map} month-selected-hover-background [color: ('primary', 600)]- The :hover background color of the selected month in month view.
-/// @prop {Map} month-selected-current-foreground [contrast-color: ('primary', 800)] - The foreground color of the current/selected month in month view.
 /// @prop {Map} month-selected-current-background [color: ('primary', 800)]- The background color of the current/selected month in month view.
-/// @prop {Map} month-selected-current-hover-foreground [contrast-color: ('primary', 600)] - The :hover foreground color of the current/selected month in month view.
 /// @prop {Map} month-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected month in month view.
 /// @prop {Map} date-current-foreground [contrast-color: ('gray', 900)] - The foreground color of the current date.
 /// @prop {Map} date-current-background [color: ('primary', 200)] - The background color of the current date.
@@ -205,96 +198,48 @@ $dark-fluent-calendar: extend(
                 200,
             ),
         ),
-        year-selected-foreground: (
-            contrast-color: (
-                'primary',
-                800,
-            ),
-        ),
         year-selected-background: (
             color: (
                 'primary',
                 800,
             ),
         ),
-        year-selected-hover-foreground: (
-            contrast-color: (
-                'primary',
-                600,
-            ),
-        ),
         year-selected-hover-background: (
             color: (
                 'primary',
                 600,
             ),
         ),
-        year-selected-current-foreground: (
-            contrast-color: (
-                'primary',
-                800,
-            ),
-        ),
         year-selected-current-background: (
             color: (
                 'primary',
                 800,
             ),
         ),
-        year-selected-current-hover-foreground: (
-            contrast-color: (
-                'primary',
-                600,
-            ),
-        ),
         year-selected-current-hover-background: (
             color: (
                 'primary',
                 600,
             ),
         ),
-        month-selected-foreground: (
-            contrast-color: (
-                'primary',
-                800,
-            ),
-        ),
         month-selected-background: (
             color: (
                 'primary',
                 800,
             ),
         ),
-        month-selected-hover-foreground: (
-            contrast-color: (
-                'primary',
-                600,
-            ),
-        ),
         month-selected-hover-background: (
             color: (
                 'primary',
                 600,
             ),
         ),
-        month-selected-current-foreground: (
-            contrast-color: (
-                'primary',
-                800,
-            ),
-        ),
         month-selected-current-background: (
             color: (
                 'primary',
                 800,
             ),
         ),
-        month-selected-current-hover-foreground: (
-            contrast-color: (
-                'primary',
-                600,
-            ),
-        ),
         month-selected-current-hover-background: (
             color: (
                 'primary',
@@ -396,6 +341,8 @@ $dark-fluent-calendar: extend(
 /// @prop {Map} month-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month in months view.
 /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
+/// @prop {Map} date-special-range-hover-background [color: ('gray', 100)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('gray', 100)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-hover-background [color: 'gray', 100] - The :hover background color of a date.
 /// @prop {Map} date-focus-background [color: 'gray', 100] - The :focus background color of a date.
 /// @prop {Map} picker-hover-foreground [color: ('secondary', 200)]- The :hover foreground color of the month and year pickers.
@@ -451,6 +398,18 @@ $dark-bootstrap-calendar: extend(
                 100,
             ),
         ),
+        date-special-range-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         date-hover-background: (
             color: (
                 'gray',
@@ -546,6 +505,7 @@ $dark-bootstrap-calendar: extend(
 
 /// Generates a dark indigo calendar schema.
 /// @type {Map}
+/// @prop {Map} content-foreground [color: ('gray', 900)] - The foreground color of the days, months and years views.
 /// @prop {Map} date-hover-foreground [contrast-color: 'gray', 900] - The :hover foreground color of a date.
 /// @prop {Map} date-focus-foreground [contrast-color: 'gray', 900] - The :focus foreground color of a date.
 /// @prop {Map} date-current-hover-foreground [contrast-color: ('gray', 900)] - The :hover foreground color of the current date.
@@ -562,11 +522,13 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} content-background [(color: 'gray', 50)] - The background color of the days, months and years views.
 /// @prop {Map} picker-background [(color: 'gray', 50)] - The background color of the month and year pickers.
 /// @prop {Map} border-color [color: ('gray', 100)] - The calendar border color.
+/// @prop {Map} date-hover-foreground [contrast-color: 'gray', 50] - The :hover foreground color of a date.
 /// @prop {Map} date-hover-background [contrast-color: ('gray', 900, .1)] - The :hover background color of a date.
+/// @prop {Map} date-focus-foreground [contrast-color: 'gray', 50] - The :focus foreground color of a date.
 /// @prop {Map} date-focus-background [contrast-color: ('gray', 900, .1)] - The :focus background color of date.
 /// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
-/// @prop {Map} date-disabled-foreground [color: ('gray', 500)] - The foreground color of disabled dates.
-/// @prop {Map} date-disabled-range-foreground [color: ('gray', 500)] - The foreground color of disabled dates.
+/// @prop {Map} date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates.
+/// @prop {Map} date-disabled-range-foreground [color: ('gray', 900, .38)] - The foreground color of disabled dates.
 /// @prop {Map} date-current-border-color [color: ('primary', 400)] - The border color of the current date.
 /// @prop {Map} date-current-hover-border-color [color: ('primary', 300)] - The :hover border color of the current date.
 /// @prop {Map} date-current-focus-border-color [color: ('primary', 300)] - The :focus border color of the current date.
@@ -575,9 +537,11 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} date-special-foreground [color: ('primary', 50)] - The foreground color of a special date.
 /// @prop {Map} date-special-background [color: ('primary', 600, .4)] - The background color of a special date.
 /// @prop {Map} date-special-hover-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
-/// @prop {Map} date-special-hover-background [color: ('primary', 400, .7)] - The background color of a special date.
+/// @prop {Map} date-special-hover-background [color: ('primary', 600, .7)] - The background color of a special date.
 /// @prop {Map} date-special-focus-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
-/// @prop {Map} date-special-focus-background [color: ('primary', 600)] - The background color of a special date.
+/// @prop {Map} date-special-focus-background [color: ('primary', 600, .7)] - The background color of a special date.
+/// @prop {Map} date-special-range-hover-background [color: ('primary', 600, .7)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('primary', 600, .7)] - The :focus background color of a special date in range selection.
 /// @prop {Map} navigation-hover-color [color: ('primary', 300)] - The :hover color of the icon button responsible for month navigation.
 /// @prop {Map} navigation-focus-color [color: ('primary', 300)] - The :focus color of the icon button responsible for month navigation.
 /// @prop {Мап} actions-divider-color [color: ('gray', 100)] - The border color used for the date-picker actions divider.
@@ -586,31 +550,27 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} week-number-foreground [color: ('gray', 500)] - The foreground color of the week number column.
 /// @prop {Map} week-number-background [color: ('gray', 900, .05)] - The background color of the week number column.
 /// @prop {Map} date-selected-range-background [color: ('primary', 400, .2)] - The background color of the selected range.
+/// @prop {Map} current-outline-hover-color [color: ('primary', 300)] - The :hover outline color of the current year/month in year/month views.
+/// @prop {Map} current-outline-focus-color [color: ('primary', 300)] - The :focus outline color of the current year/month in year/month views.
 /// @prop {Map} selected-current-outline-color [contrast-color: ('gray', 50, .6)] - The outline color of the selected current year/month in year/month views.
 /// @prop {Map} selected-current-hover-outline-color [contrast-color: ('gray', 50, .6)] - The :hover outline color of the selected current year/month in year/month views.
 /// @prop {Map} selected-current-focus-outline-color [contrast-color: ('gray', 50, .6)] - The :focus outline color of the selected current year/month in year/month views.
-
+/// @prop {Map} date-current-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date.
 /// @requires $indigo-calendar
 $dark-indigo-calendar: extend(
     $indigo-calendar,
     (
-        date-hover-foreground: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-        date-focus-foreground: (
-            contrast-color: (
+        content-foreground: (
+            color: (
                 'gray',
-                50,
+                900,
             ),
         ),
-
-        date-current-hover-foreground: (
+        date-current-hover-background: (
             contrast-color: (
                 'gray',
                 50,
+                0.1,
             ),
         ),
         date-current-focus-foreground: (
@@ -619,12 +579,6 @@ $dark-indigo-calendar: extend(
                 50,
             ),
         ),
-        month-hover-foreground: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
         month-hover-background: (
             contrast-color: (
                 'gray',
@@ -632,26 +586,6 @@ $dark-indigo-calendar: extend(
                 0.1,
             ),
         ),
-        month-current-hover-foreground: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-        month-current-hover-background: (
-            contrast-color: (
-                'gray',
-                50,
-                0.1,
-            ),
-        ),
-
-        year-hover-foreground: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
         year-hover-background: (
             contrast-color: (
                 'gray',
@@ -659,14 +593,6 @@ $dark-indigo-calendar: extend(
                 0.1,
             ),
         ),
-
-        year-current-hover-foreground: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-
         date-selected-current-range-hover-background: (
             contrast-color: (
                 'gray',
@@ -674,7 +600,6 @@ $dark-indigo-calendar: extend(
                 0.1,
             ),
         ),
-
         header-background: (
             color: (
                 'gray',
@@ -699,38 +624,36 @@ $dark-indigo-calendar: extend(
                 100,
             ),
         ),
-        date-hover-background: (
+        date-hover-foreground: (
             contrast-color: (
                 'gray',
                 50,
-                0.1,
             ),
         ),
-        date-focus-background: (
+        date-hover-background: (
             contrast-color: (
                 'gray',
                 50,
                 0.1,
             ),
         ),
-        date-current-foreground: (
-            color: (
+        date-focus-foreground: (
+            contrast-color: (
                 'gray',
-                900,
+                50,
             ),
         ),
-        date-disabled-foreground: (
+        date-focus-background: (
             contrast-color: (
                 'gray',
                 50,
-                0.4,
+                0.1,
             ),
         ),
-        date-disabled-range-foreground: (
-            contrast-color: (
+        date-current-foreground: (
+            color: (
                 'gray',
-                50,
-                0.4,
+                900,
             ),
         ),
         date-current-border-color: (
@@ -764,42 +687,57 @@ $dark-indigo-calendar: extend(
                 0.4,
             ),
         ),
-        date-special-range-foreground: (
-            color: (
+        date-special-hover-foreground: (
+            contrast-color: (
                 'primary',
-                50,
+                600,
             ),
         ),
-        date-special-range-background: (
+        date-special-hover-background: (
             color: (
                 'primary',
                 600,
-                0.4,
+                0.7,
             ),
         ),
-        date-special-hover-foreground: (
+        date-special-focus-foreground: (
             contrast-color: (
                 'primary',
                 600,
             ),
         ),
-        date-special-hover-background: (
+        date-special-focus-background: (
             color: (
                 'primary',
-                400,
+                600,
                 0.7,
             ),
         ),
-        date-special-focus-foreground: (
-            contrast-color: (
+        date-special-range-foreground: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+        date-special-range-background: (
+            color: (
                 'primary',
                 600,
+                0.4,
             ),
         ),
-        date-special-focus-background: (
+        date-special-range-hover-background: (
             color: (
                 'primary',
                 600,
+                0.7,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'primary',
+                600,
+                0.7,
             ),
         ),
         navigation-hover-color: (
@@ -859,6 +797,18 @@ $dark-indigo-calendar: extend(
                 0.6,
             ),
         ),
+        current-outline-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        current-outline-focus-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
         selected-current-outline-hover-color: (
             contrast-color: (
                 'gray',
@@ -873,5 +823,19 @@ $dark-indigo-calendar: extend(
                 0.6,
             ),
         ),
+        date-disabled-foreground: (
+            color: (
+                'gray',
+                500,
+                0.5,
+            ),
+        ),
+        date-disabled-range-foreground: (
+            color: (
+                'gray',
+                900,
+                0.38,
+            ),
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_slider.scss

@@ -22,6 +22,7 @@ $dark-material-slider: $material-slider;
 /// @prop {Map} track-color [color: ('gray', 600)] - The color of the track.
 /// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
 /// @prop {Map} thumb-border-color [color: ('gray', 400)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('gray', 400)] - The thumb border color.
 /// @prop {Map} thumb-focus-color [color: ('primary', 100)] - The focus outline color of the thumb.
 /// @prop {Map} thumb-disabled-border-color [color: ('gray', 200)] - The thumb border color when it's disabled.
 /// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
@@ -60,6 +61,12 @@ $dark-fluent-slider: extend(
                 400,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
         thumb-focus-color: (
             color: (
                 'primary',
@@ -114,23 +121,91 @@ $dark-bootstrap-slider: extend(
 
 /// Generates a dark indigo slider schema.
 /// @type {Map}
-/// @prop {Map} base-track-color [color: ('gray', 200)] - The base background color of the track.
-/// @prop {Map} base-track-hover-color [color: ('gray', 400)] - The base background color of the track on hover.
+/// @prop {Map} track-step-color [contrast-color: ('gray', 50, 0.3)] - The color of the track steps.
+/// @prop {Map} base-track-color [contrast-color: ('gray', 50, 0.3)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [contrast-color: ('gray', 50, 0.4)] - The base background color of the track on hover.
+/// @prop {Map} track-color [color: ('primary', 400)] - The color of the track.
+/// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
+/// @prop {Map} thumb-color [color: 'surface'] - The color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('primary', 400)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('primary', 300)] - The thumb border color when hovered.
+/// @prop {Map} disabled-thumb-color [color: 'surface'] - The thumb color when its disabled.
+/// @prop {Map} thumb-disabled-border-color [color: ('primary', 800)] - The thumb border color when it's disabled.
+/// @prop {Map} disabled-base-track-color [contrast-color: ('gray', 50, 0.15)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('primary', 800)] - The background color of the fill track when is disabled.
 /// @requires $indigo-slider
 $dark-indigo-slider: extend(
     $indigo-slider,
     (
+        track-step-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.3,
+            ),
+        ),
         base-track-color: (
-            color: (
+            contrast-color: (
                 'gray',
-                200,
+                50,
+                0.3,
             ),
         ),
         base-track-hover-color: (
-            color: (
+            contrast-color: (
                 'gray',
+                50,
+                0.4,
+            ),
+        ),
+        track-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        track-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        thumb-color: (
+            color: 'surface',
+        ),
+        thumb-border-color: (
+            color: (
+                'primary',
                 400,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        disabled-thumb-color: (
+            color: 'surface',
+        ),
+        thumb-disabled-border-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        disabled-base-track-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        disabled-fill-track-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_splitter.scss

@@ -51,18 +51,39 @@ $dark-bootstrap-splitter: $bootstrap-splitter;
 
 /// Generates a dark indigo splitter schema.
 /// @type {Map}
-/// @prop {Map} handle-color [color: 'surface'] - The color for the bar drag handle.
-/// @prop {Map} expander-color [color: 'surface'] - The color for the bar drag handle.
+/// @prop {Map} bar-color [color: ('gray', 200)] - The background color of the bar.
+/// @prop {Map} focus-color [color: ('gray', 300)] - The color used for focused splitter bar.
+/// @prop {Map} handle-color [color: ('gray', 600)] - The color for the bar drag handle.
+/// @prop {Map} expander-color [color: ('gray', 600)] - The color for the bar drag handle.
 /// @requires $indigo-splitter
 $dark-indigo-splitter: extend(
     $indigo-splitter,
     (
+        bar-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        focus-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         handle-color: (
-            color: 'surface',
+            color: (
+                'gray',
+                600,
+            ),
         ),
 
         expander-color: (
-            color: 'surface',
+            color: (
+                'gray',
+                600,
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/light/_calendar.scss

@@ -39,9 +39,7 @@
 /// @prop {Map} date-selected-current-range-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current date in the selected range.
 /// @prop {Map} date-selected-current-range-focus-foreground [color: ('gray', 900)] - The :focus foreground color of the current date in the selected range.
 /// @prop {Color} date-special-background [transparent] - The background color of a special date.
-/// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
-/// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
-/// @prop {Color} date-special-range-background [transparent] - The background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('gray', 100)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-special-range-border-color [color: ('secondary', 900)] - The outline color around a special date in range selection.
 /// @prop {Color} date-selected-current-outline [transparent] - The outline color of the current selected date.
 /// @prop {Color} date-selected-current-hover-outline [transparent] - The :hover outline color of the current selected date.
@@ -62,8 +60,8 @@
 /// @prop {Color} date-selected-focus-border-color [transparent] - The :focus border color of the selected date.
 /// @prop {Color} date-range-border-color [transparent] - The border color of range selection.
 /// @prop {Map} date-range-preview-border-color [color: ('gray', 300)] - The border color of the range selection in preview state(visible before selecting the end of the range).
-/// @prop {Map} date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates.
-/// @prop {Map} date-disabled-range-foreground [color: ('gray', 900, .38)] - The foreground color of disabled dates in range selection.
+/// @prop {Map} date-disabled-foreground [color: ('gray', 900, .2)] - The foreground color of disabled dates.
+/// @prop {Map} date-disabled-range-foreground [color: ('gray', 800, .38)] - The foreground color of disabled dates in range selection.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
 /// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the date.
 /// @prop {List} date-range-border-radius [(rem(20px), rem(0), rem(20px))] -The border radius used for the date in range selection.
@@ -255,18 +253,6 @@ $light-calendar: (
         ),
     ),
     date-special-background: transparent,
-    date-special-hover-background: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
-    date-special-focus-background: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
     date-special-range-background: transparent,
     date-special-range-border-color: (
         color: (
@@ -357,14 +343,14 @@ $light-calendar: (
     date-disabled-foreground: (
         color: (
             'gray',
-            500,
-            0.5,
+            900,
+            0.2,
         ),
     ),
     date-disabled-range-foreground: (
         color: (
             'gray',
-            900,
+            800,
             0.38,
         ),
     ),
@@ -432,6 +418,10 @@ $light-calendar: (
 /// @prop {Map} date-special-foreground [color: ('secondary', 500)] - The foreground color of a special date.
 /// @prop {Map} date-special-hover-foreground [color: ('secondary', 700)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-foreground [color: ('secondary', 700)] - The foreground color of a special date.
+/// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
+/// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
+/// @prop {Color} date-special-range-hover-background [color: ('gray', 100)] - The :hover background color of a special date in range selection.
+/// @prop {Color} date-special-range-focus-background [color: ('gray', 100)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-special-border-color [color: ('secondary', 500)] - The outline color around a special date.
 /// @prop {Map} date-special-hover-border-color [color: ('secondary', 700)] - The outline color around a special date.
 /// @prop {Map} current-outline-color [color: ('gray', 900)] - The outline color of the current year/month in year/month views.
@@ -775,6 +765,33 @@ $material-calendar: extend(
                 700,
             ),
         ),
+
+        date-special-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        date-special-focus-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        date-special-range-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
         date-special-border-color: (
             color: (
                 'secondary',
@@ -862,6 +879,9 @@ $material-calendar: extend(
 /// @prop {Map} date-special-focus-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-hover-background [color: ('gray', 200)] - The background color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('gray', 200)] - The background color of a special date.
+/// @prop {Color} date-special-range-hover-background [color: ('gray', 200)] - The :hover background color of a special date in range selection.
+/// @prop {Color} date-special-range-focus-background [color: ('gray', 200)] - The :focus background color of a special date in range selection.
+/// @prop {map} date-special-range-focus-background [color: ('gray', 200)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-selected-current-border-color [color: ('gray', 700)] - The border color of the selected current date.
 /// @prop {Map} date-selected-current-hover-border-color [color: ('gray', 700)] - The :hover border color of the selected current date.
 /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 700)] - The :focus border color of the selected current date.
@@ -1065,6 +1085,18 @@ $fluent-calendar: extend(
                 200,
             ),
         ),
+        date-special-range-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
         header-foreground: (
             contrast-color: (
                 'primary',
@@ -1550,6 +1582,8 @@ $fluent-calendar: extend(
 /// @type {Map}
 /// @prop {Map} date-special-hover-background [color: ('gray', 200)] - The background color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('gray', 200)] - The background color of a special date.
+/// @prop {Map} date-special-range-hover-background [color: ('gray', 200)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('gray', 200)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-special-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-foreground [color: ('gray', 900)] - The foreground color of a special date.
 /// @prop {Map} date-special-hover-foreground [color: ('gray', 900)] - The foreground color of a special date.
@@ -1650,7 +1684,6 @@ $fluent-calendar: extend(
 /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the selected current date.
 /// @prop {Map} actions-divider-color [color: ('gray', 300)] - The border color used for the date-picker actions divider.
 /// @prop {Map} date-special-range-foreground [color: ('gray', 900)] - The foreground color of a special date in rage selection.
-
 /// @requires {Map} $light-calendar
 $bootstrap-calendar: extend(
     $light-calendar,
@@ -1667,6 +1700,18 @@ $bootstrap-calendar: extend(
                 200,
             ),
         ),
+        date-special-range-hover-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
         date-special-foreground: (
             color: (
                 'gray',
@@ -2247,13 +2292,13 @@ $bootstrap-calendar: extend(
 /// @prop {Map} navigation-focus-color [color: ('primary', 500)] - The :focus color of the icon button responsible for month navigation.
 /// @prop {Map} week-number-foreground [color: ('gray', 600)] - The foreground color of the week number column.
 /// @prop {Map} week-number-background [color: ('gray', 900, .05)] - The background color of the week number column.
-/// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
 /// @prop {Map} date-hover-background [color: ('gray', 900, .05)] - The :hover background color of a date.
 /// @prop {Map} date-focus-background [color: ('gray', 900, .05)] - The :focus background color of date.
 /// @prop {Map} date-current-foreground [color: ('gray', 800)] - The foreground color of the current date.
 /// @prop {Map} date-disabled-foreground [color: ('gray', 900, .2)] - The foreground color of disabled dates.
-/// @prop {Map} date-disabled-range-foreground [color: ('gray', 900, .2)] - The foreground color of disabled dates in range selection.
-/// @prop {Map} date-current-border-color [color: ('primary', 500)] - The border color of the current date.
+/// @prop {Map} date-disabled-range-foreground [color: ('gray', 800, .38)] - The foreground color of disabled dates in range selection.
+/// @prop {Map} date-current-hover-background [color: ('gray', 900, .05)] - The :hover background color of the current date.
+/// @prop {Map} date-current-border-color [color: ('primary', 400)] - The border color of the current date.
 /// @prop {Map} date-current-hover-border-color [color: ('primary', 400)] - The :hover border color of the current date.
 /// @prop {Map} date-current-focus-border-color [color: ('primary', 400)] - The :focus border color of the current date.
 /// @prop {Map} date-special-foreground [color: ('primary', 500)] - The foreground color of a special date.
@@ -2262,6 +2307,8 @@ $bootstrap-calendar: extend(
 /// @prop {Map} date-special-hover-background [color: ('primary', 50)] - The background color of a special date.
 /// @prop {Map} date-special-focus-foreground [color: ('primary', 700)] - The foreground color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('primary', 50)] - The background color of a special date.
+/// @prop {Map} date-special-range-hover-background [color: ('primary', 50)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('primary', 50)] - The :focus background color of a special date in range selection.
 /// @prop {Map} date-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected date.
 /// @prop {Map} date-selected-background [color: ('primary', 500)] - The background color of the selected date.
 /// @prop {Map} date-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected date.
@@ -2322,10 +2369,13 @@ $bootstrap-calendar: extend(
 /// @prop {Map} selected-current-hover-outline-color [contrast-color: ('gray', 900, .6)] - The :hover outline color of the selected current year/month in year/month views.
 /// @prop {Map} selected-current-focus-outline-color [contrast-color: ('gray', 900, .6)] - The :focus outline color of the selected current year/month in year/month views.
 /// @prop {List} inner-size [(rem(24px), rem(28px), rem(32px))] - The size of the inner element of a date(often used to outline the special date)
-/// @prop {List} border-radius [(rem(8px), rem(0), rem(8px))] - The border radius used for calendar.
+/// @prop {List} border-radius [(rem(6px), rem(0), rem(6px))] - The border radius used for calendar.
+/// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the week numbers column.
 /// @prop {Map} actions-divider-color [color: ('gray', 400)] - The border color used for the date-picker actions divider.
 /// @prop {Map} date-special-range-foreground [color: ('primary', 500)] - The foreground color of a special date in rage selection.
 /// @prop {Map} date-special-range-background [(color: 'primary', 50, .7)] - The background color of a special date in range selection.
+/// @prop {Map} date-special-range-hover-background [color: ('primary', 50)] - The :hover background color of a special date in range selection.
+/// @prop {Map} date-special-range-focus-background [color: ('primary', 50)] - The :focus background color of a special date in range selection.
 /// @requires {Map} $light-calendar
 $indigo-calendar: extend(
     $light-calendar,
@@ -2343,6 +2393,13 @@ $indigo-calendar: extend(
                 800,
             ),
         ),
+        date-current-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.05,
+            ),
+        ),
         weekend-color: (
             color: (
                 'gray',
@@ -2426,7 +2483,7 @@ $indigo-calendar: extend(
             border-radius: (
                 rem(4px),
                 rem(0),
-                rem(8px),
+                rem(4px),
             ),
         ),
         border-radius: (
@@ -2466,8 +2523,8 @@ $indigo-calendar: extend(
         date-disabled-range-foreground: (
             color: (
                 'gray',
-                900,
-                0.2,
+                800,
+                0.38,
             ),
         ),
         date-current-border-color: (
@@ -2538,6 +2595,18 @@ $indigo-calendar: extend(
                 50,
             ),
         ),
+        date-special-range-hover-background: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+        date-special-range-focus-background: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
         date-special-border-color: transparent,
         date-special-hover-border-color: transparent,
         date-selected-foreground: (
@@ -2636,7 +2705,7 @@ $indigo-calendar: extend(
         date-selected-range-foreground: (
             color: (
                 'gray',
-                900,
+                800,
             ),
         ),
         date-selected-range-background: (

package/sass/themes/schemas/components/light/_slider.scss

@@ -14,9 +14,6 @@
 /// @prop {Map} track-color [color: ('secondary', 500)] - The color of the track.
 /// @prop {Color} track-step-color [white] - The color of the track steps.
 /// @prop {Number} track-step-size [rem(3px)] - The size of the track steps.
-/// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
-/// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
-/// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
 /// @prop {Map} thumb-disabled-border-color [color: ('gray', 400)] - The thumb border color when it's disabled.
 /// @prop {Map} label-background-color [color: ('gray', 700)] - The background color of the bubble label.
 /// @prop {Map} label-text-color [contrast-color: ('gray', 700)] - The text color of the bubble label.
@@ -31,24 +28,6 @@ $light-slider: (
     ),
     track-step-color: white,
     track-step-size: rem(3px),
-    thumb-color: (
-        color: (
-            'secondary',
-            500,
-        ),
-    ),
-    thumb-border-color: (
-        color: (
-            'secondary',
-            500,
-        ),
-    ),
-    thumb-border-focus-color: (
-        color: (
-            'secondary',
-            500,
-        ),
-    ),
     thumb-disabled-border-color: (
         color: (
             'gray',
@@ -83,6 +62,10 @@ $light-slider: (
 
 /// Generates a material slider schema.
 /// @type {Map}
+/// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('secondary', 500)] - The thumb border color when hovered.
+/// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
 /// @prop {Color} thumb-focus-color [transparent] - The focus outline color of the thumb.
 /// @prop {Map} track-step-color [color: ('secondary', 200)] - The color of the track steps.
 /// @prop {Map} track-hover-color [color: ('secondary', 400)] - The color of the track on hover.
@@ -95,6 +78,30 @@ $light-slider: (
 $material-slider: extend(
     $light-slider,
     (
+        thumb-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        thumb-border-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        thumb-border-hover-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        thumb-border-focus-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
         track-step-color: (
             color: (
                 'secondary',
@@ -149,6 +156,7 @@ $material-slider: extend(
 /// @prop {Map} track-hover-color [color: ('primary', 500)] - The color of the track on hover.
 /// @prop {Map} thumb-color [color: ('surface', 500)] - The color of the thumb.
 /// @prop {Map} thumb-border-color [color: ('gray', 700)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('gray', 700)] - The thumb border color when hovered.
 /// @prop {Map} thumb-border-focus-color [color: ('gray', 700)] - The thumb border color when focused.
 /// @prop {Map} thumb-focus-color [color: ('primary', 700)] - The focus outline color of the thumb.
 /// @prop {Map} disabled-thumb-color [color: ('surface', 500)] - The thumb color when its disabled.
@@ -185,6 +193,12 @@ $fluent-slider: extend(
                 700,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
         thumb-border-focus-color: (
             color: (
                 'gray',
@@ -242,6 +256,7 @@ $fluent-slider: extend(
 /// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
 /// @prop {Map} thumb-color [color: ('primary', 500)] - The color of the thumb.
 /// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('primary', 500)] - The thumb border color when hovered.
 /// @prop {Map} thumb-border-focus-color [color: ('surface', 500)] - The thumb border color when focused.
 /// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
 /// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
@@ -275,6 +290,12 @@ $bootstrap-slider: extend(
                 500,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         thumb-border-focus-color: (
             color: (
                 'surface',
@@ -298,23 +319,37 @@ $bootstrap-slider: extend(
 
 /// Generates an indigo slider schema.
 /// @type {Map}
-/// @prop {Map} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
+/// @prop {Map} track-step-color [color: ('gray', 900, 0.4)] - The color of the track steps.
+/// @prop {Number} track-step-size [rem(2px)] - The size of the track steps.
 /// @prop {Map} base-track-color [color: ('gray', 400)] - The base background color of the track.
 /// @prop {Map} base-track-hover-color [color: ('gray', 500)] - The base background color of the track on hover.
-/// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
-/// @prop {Map} disabled-thumb-color [color: ('gray', 300)] - The thumb color when its disabled.
-/// @prop {Map} disabled-base-track-color [color: ('gray', 300)] - The base background color of the track when is disabled.
-/// @prop {Map} disabled-fill-track-color [color: ('gray', 300)] - The background color of the fill track when is disabled.
+/// @prop {Map} track-color [color: ('primary', 500)] - The color of the track.
+/// @prop {Map} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
+/// @prop {Map} thumb-color [color: ('gray', 50)] - The color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('primary', 400)] - The thumb border color when hovered.
+/// @prop {Map} thumb-border-focus-color [color: ('primary', 500)] - The thumb border color when focused.
+/// @prop {Map} thumb-focus-color [color: ('primary', 400, 0.5)] - The focus outline color of the thumb.
+/// @prop {Map} tick-color [color: ('gray', 300)] - The background-color of the tick.
+/// @prop {Map} tick-label-color [color: ('gray', 600)] - The color of the tick label.
+/// @prop {Map} label-background-color [color: ('gray', 600)] - The background color of the bubble label.
+/// @prop {Map} label-text-color [contrast-color: ('gray', 600)] - The text color of the bubble label.
+/// @prop {Map} disabled-thumb-color [color: ('gray', 50)] - The thumb color when its disabled.
+/// @prop {Map} thumb-disabled-border-color [color: ('primary', 50)] - The thumb border color when it's disabled.
+/// @prop {Map} disabled-base-track-color [color: ('gray', 900, 0.15)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('primary', 50)] - The background color of the fill track when is disabled.
 /// @requires {Map} $light-slider
 $indigo-slider: extend(
     $light-slider,
     (
-        track-hover-color: (
+        track-step-color: (
             color: (
-                'primary',
-                400,
+                'gray',
+                900,
+                0.4,
             ),
         ),
+        track-step-size: rem(2px),
         base-track-color: (
             color: (
                 'gray',
@@ -327,28 +362,96 @@ $indigo-slider: extend(
                 500,
             ),
         ),
+        track-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        track-hover-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        thumb-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        thumb-border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        thumb-border-hover-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        thumb-border-focus-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         thumb-focus-color: (
             color: (
                 'primary',
-                200,
+                400,
+                0.5,
             ),
         ),
-        disabled-thumb-color: (
+        tick-color: (
             color: (
                 'gray',
                 300,
             ),
         ),
+        tick-label-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        label-background-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        label-text-color: (
+            contrast-color: (
+                'gray',
+                600,
+            ),
+        ),
+        disabled-thumb-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        thumb-disabled-border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
         disabled-base-track-color: (
             color: (
                 'gray',
-                300,
+                900,
+                0.15,
             ),
         ),
         disabled-fill-track-color: (
             color: (
-                'gray',
-                300,
+                'primary',
+                50,
             ),
         ),
     )

package/sass/themes/schemas/components/light/_splitter.scss

@@ -73,9 +73,9 @@ $bootstrap-splitter: $light-splitter;
 /// Generates an indigo splitter schema.
 /// @type {Map}
 /// @prop {Map} bar-color [color: ('gray', 400)] - The background color of the bar.
-/// @prop {Map} handle-color [color: ('surface')] - The color for the bar drag handle.
-/// @prop {Map} expander-color [color: ('surface')] - The color for the bar drag handle.
-/// @prop {Map} focus-color [color: ('primary', 500)] - The color used for focused splitter bar.
+/// @prop {Map} focus-color [color: ('gray', 500)] - The color used for focused splitter bar.
+/// @prop {Map} handle-color [color: ('gray', 700)] - The color for the bar drag handle.
+/// @prop {Map} expander-color [color: ('gray', 700)] - The color for the bar drag handle.
 /// @requires {Map} $light-splitter
 $indigo-splitter: extend(
     $light-splitter,
@@ -89,20 +89,22 @@ $indigo-splitter: extend(
 
         focus-color: (
             color: (
-                'primary',
+                'gray',
                 500,
             ),
         ),
 
         handle-color: (
             color: (
-                'surface',
+                'gray',
+                700,
             ),
         ),
 
         expander-color: (
             color: (
-                'surface',
+                'gray',
+                700,
             ),
         ),
     )