igniteui-theming 6.0.0-beta.16 → 6.0.0-beta.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.0.0-beta.16",
+  "version": "6.0.0-beta.17",
   "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/_slider.scss

@@ -22,7 +22,6 @@ $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.
@@ -61,12 +60,6 @@ $dark-fluent-slider: extend(
                 400,
             ),
         ),
-        thumb-border-hover-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
         thumb-focus-color: (
             color: (
                 'primary',
@@ -121,90 +114,22 @@ $dark-bootstrap-slider: extend(
 
 /// Generates a dark indigo slider schema.
 /// @type {Map}
-/// @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.
+/// @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.
 /// @requires $indigo-slider
 $dark-indigo-slider: extend(
     $indigo-slider,
     (
-        track-step-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.3,
-            ),
-        ),
         base-track-color: (
-            contrast-color: (
+            color: (
                 'gray',
-                50,
-                0.3,
+                200,
             ),
         ),
         base-track-hover-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,
+                400,
             ),
         ),
     )

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

@@ -51,39 +51,18 @@ $dark-bootstrap-splitter: $bootstrap-splitter;
 
 /// Generates a dark indigo splitter schema.
 /// @type {Map}
-/// @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.
+/// @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.
 /// @requires $indigo-splitter
 $dark-indigo-splitter: extend(
     $indigo-splitter,
     (
-        bar-color: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
-        focus-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
         handle-color: (
-            color: (
-                'gray',
-                600,
-            ),
+            color: 'surface',
         ),
 
         expander-color: (
-            color: (
-                'gray',
-                600,
-            ),
+            color: 'surface',
         ),
     )
 );

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

@@ -60,7 +60,7 @@
 /// @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', 900, .2)] - 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', 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.
@@ -343,14 +343,14 @@ $light-calendar: (
     date-disabled-foreground: (
         color: (
             'gray',
-            900,
-            0.2,
+            500,
+            0.5,
         ),
     ),
     date-disabled-range-foreground: (
         color: (
             'gray',
-            800,
+            900,
             0.38,
         ),
     ),

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

@@ -14,6 +14,9 @@
 /// @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.
@@ -28,6 +31,24 @@ $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',
@@ -62,10 +83,6 @@ $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.
@@ -78,30 +95,6 @@ $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',
@@ -156,7 +149,6 @@ $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.
@@ -193,12 +185,6 @@ $fluent-slider: extend(
                 700,
             ),
         ),
-        thumb-border-hover-color: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
         thumb-border-focus-color: (
             color: (
                 'gray',
@@ -256,7 +242,6 @@ $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.
@@ -290,12 +275,6 @@ $bootstrap-slider: extend(
                 500,
             ),
         ),
-        thumb-border-hover-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         thumb-border-focus-color: (
             color: (
                 'surface',
@@ -319,139 +298,57 @@ $bootstrap-slider: extend(
 
 /// Generates an indigo slider schema.
 /// @type {Map}
-/// @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} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
 /// @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} 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.
+/// @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.
 /// @requires {Map} $light-slider
 $indigo-slider: extend(
     $light-slider,
     (
-        track-step-color: (
-            color: (
-                'gray',
-                900,
-                0.4,
-            ),
-        ),
-        track-step-size: rem(2px),
-        base-track-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-        base-track-hover-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-        track-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         track-hover-color: (
             color: (
                 'primary',
                 400,
             ),
         ),
-        thumb-color: (
+        base-track-color: (
             color: (
                 'gray',
-                50,
-            ),
-        ),
-        thumb-border-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-        thumb-border-hover-color: (
-            color: (
-                'primary',
                 400,
             ),
         ),
-        thumb-border-focus-color: (
+        base-track-hover-color: (
             color: (
-                'primary',
+                'gray',
                 500,
             ),
         ),
         thumb-focus-color: (
             color: (
                 'primary',
-                400,
-                0.5,
-            ),
-        ),
-        tick-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-        tick-label-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-        label-background-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-        label-text-color: (
-            contrast-color: (
-                'gray',
-                600,
+                200,
             ),
         ),
         disabled-thumb-color: (
             color: (
                 'gray',
-                50,
-            ),
-        ),
-        thumb-disabled-border-color: (
-            color: (
-                'primary',
-                50,
+                300,
             ),
         ),
         disabled-base-track-color: (
             color: (
                 'gray',
-                900,
-                0.15,
+                300,
             ),
         ),
         disabled-fill-track-color: (
             color: (
-                'primary',
-                50,
+                'gray',
+                300,
             ),
         ),
     )

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} 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.
+/// @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.
 /// @requires {Map} $light-splitter
 $indigo-splitter: extend(
     $light-splitter,
@@ -89,22 +89,20 @@ $indigo-splitter: extend(
 
         focus-color: (
             color: (
-                'gray',
+                'primary',
                 500,
             ),
         ),
 
         handle-color: (
             color: (
-                'gray',
-                700,
+                'surface',
             ),
         ),
 
         expander-color: (
             color: (
-                'gray',
-                700,
+                'surface',
             ),
         ),
     )