igniteui-theming 6.0.0-beta.8 → 6.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.0.0-beta.8",
+  "version": "6.0.0-beta.9",
   "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

@@ -525,6 +525,9 @@ $dark-bootstrap-calendar: extend(
 /// @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.
+/// @prop {Map} picker-hover-foreground [color: 'primary' 300] - The :hover foreground color of the month and year pickers.
+/// @prop {Map} picker-focus-foreground [color: 'primary' 300] - The :focus foreground color of the month and year pickers.
+
 /// @requires $indigo-calendar
 $dark-indigo-calendar: extend(
     $indigo-calendar,
@@ -651,5 +654,17 @@ $dark-indigo-calendar: extend(
                 100,
             ),
         ),
+        picker-hover-foreground: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        picker-focus-foreground: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
     )
 );

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

@@ -63,7 +63,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', 500)] - The foreground color of disabled dates.
+/// @prop {Map} date-disabled-foreground [color: ('gray', 500, .5)] - The foreground color of disabled dates.
 /// @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.
@@ -286,28 +286,6 @@ $light-calendar: (
             500,
         ),
     ),
-    date-disabled-background: transparent,
-    date-disabled-current-foreground: (
-        color: (
-            'gray',
-            500,
-        ),
-    ),
-    date-disabled-current-background: transparent,
-    date-disabled-range-foreground: (
-        color: (
-            'gray',
-            500,
-        ),
-    ),
-    date-disabled-range-background: transparent,
-    date-disabled-current-range-foreground: (
-        color: (
-            'gray',
-            500,
-        ),
-    ),
-    date-disabled-current-range-background: transparent,
     week-number-foreground: (
         color: (
             'gray',
@@ -383,6 +361,7 @@ $light-calendar: (
         color: (
             'gray',
             500,
+            0.5,
         ),
     ),
 );
@@ -2087,8 +2066,8 @@ $bootstrap-calendar: extend(
 /// @prop {Map} header-background [contrast-color: ('gray', 900)] - The header background color.
 /// @prop {Map} picker-foreground [color: 'gray' 700] - The foreground color of the month and year pickers.
 /// @prop {Map} picker-background [contrast-color: ('gray', 900)] - The background color of the month and year pickers.
-/// @prop {Map} picker-hover-foreground [color: 'gray' 900] - The :hover foreground color of the month and year pickers.
-/// @prop {Map} picker-focus-foreground [color: 'gray' 900] - The :focus foreground color of the month and year pickers.
+/// @prop {Map} picker-hover-foreground [color: 'primary' 500] - The :hover foreground color of the month and year pickers.
+/// @prop {Map} picker-focus-foreground [color: 'primary' 500] - The :focus foreground color of the month and year pickers.
 /// @prop {Map} navigation-color [color: ('gray', 600)] - the color of the buttons responsible for navigation.
 /// @prop {Map} navigation-hover-color [color: ('primary', 500)] - The :hover color of the icon button responsible for month navigation.
 /// @prop {Map} navigation-focus-color [color: ('primary', 500)] - The :focus color of the icon button responsible for month navigation.
@@ -2098,7 +2077,7 @@ $bootstrap-calendar: extend(
 /// @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-foreground [color: ('gray', 900)] - The foreground color of disabled dates.
 /// @prop {Map} date-current-border-color [color: ('primary', 500)] - 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.
@@ -2217,14 +2196,14 @@ $indigo-calendar: extend(
         ),
         picker-hover-foreground: (
             color: (
-                'gray',
-                900,
+                'primary',
+                500,
             ),
         ),
         picker-focus-foreground: (
             color: (
-                'gray',
-                900,
+                'primary',
+                500,
             ),
         ),
         navigation-color: (

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -340,9 +340,9 @@ $bootstrap-drop-down: extend(
 /// @prop {Map} focused-item-background [color: ('primary', 500, .15)] - The drop-down focused item background color.
 /// @prop {Map} selected-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 400)] - The drop-down selected item hover background color.
-/// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item hover text color.
 /// @prop {Map} selected-focus-item-background [color: ('primary', 400)] - The drop-down selected item focus background color.
-/// @prop {Map} selected-focus-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item focus text color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item focus text color.
 /// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
 /// @prop {List} item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the drop-down items.
@@ -393,7 +393,7 @@ $indigo-drop-down: extend(
         selected-hover-item-text-color: (
             contrast-color: (
                 'primary',
-                400,
+                500,
             ),
         ),
         selected-focus-item-background: (
@@ -405,7 +405,7 @@ $indigo-drop-down: extend(
         selected-focus-item-text-color: (
             contrast-color: (
                 'primary',
-                400,
+                500,
             ),
         ),
         border-radius: (

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

@@ -411,6 +411,7 @@ $bootstrap-switch: extend(
 /// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
+/// @prop {Color} track-error-color [transparent] - The color of the track in invalid state when the switch is off.
 /// @prop {List} border-radius-track [(rem(8px), rem(0), rem(8px))] - The border radius used for switch track.
 /// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
@@ -472,6 +473,7 @@ $indigo-switch: extend(
                 300,
             ),
         ),
+        track-error-color: transparent,
         thumb-disabled-color: (
             color: (
                 'gray',