igniteui-theming 10.1.0-beta.1 → 10.1.0-beta.3

package/package.json

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

@@ -127,6 +127,9 @@ $dark-material-calendar: extend(
 /// @prop {Map} header-foreground [contrast-color: ('primary', 200)] - The header foreground color.
 /// @prop {Map} header-background [color: ('primary', 200)] - The background color of the month and year pickers.
 /// @prop {Мap} actions-divider-color [color: ('gray', 100)] - The border color used for the date-picker actions divider.
+/// @prop {Map} date-selected-special-border-color [color: ('primary', 50)] - The border color of the selected special date.
+/// @prop {Map} date-selected-special-hover-border-color [color: ('primary', 50)] - The :hover border color of the selected special date.
+/// @prop {Map} date-selected-special-focus-border-color [color: ('primary', 50)] - The :focus border color of the selected special date.
 /// @requires $fluent-calendar
 $dark-fluent-calendar: extend(
     $fluent-calendar,
@@ -275,6 +278,24 @@ $dark-fluent-calendar: extend(
                 100,
             ),
         ),
+        date-selected-special-border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+        date-selected-special-hover-border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+        date-selected-special-focus-border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
     )
 );
 
@@ -486,7 +507,7 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} week-number-background [contrast-color: ('gray', 50, .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} ym-current-background [color: ('primary', 700, .5)] - The background color of the current month/year.
-/// @prop {Map} ym-current-hover-background [color: (color: ('primary', 700)] - The :hover background color of the current month/year.
+/// @prop {Map} ym-current-hover-background [color: ('primary', 700)] - The :hover background color of the current month/year.
 /// @prop {Map} ym-current-outline-hover-color [color: ('primary', 200)] - The :hover outline color of the current month/year.
 /// @prop {Map} ym-current-outline-focus-color [color: ('primary', 200)] - The :focus outline color of the current month/year.
 /// @prop {Map} ym-current-outline-color [color: ('primary', 300)] - The outline color of the current month/year.

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

@@ -34,7 +34,6 @@
 /// @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-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.
 /// @prop {Color} date-selected-current-focus-outline [transparent] - The :focus outline color of the current selected date.
@@ -198,12 +197,6 @@ $light-calendar: (
     ),
     date-special-background: transparent,
     date-special-range-background: transparent,
-    date-special-range-border-color: (
-        color: (
-            'secondary',
-            900,
-        ),
-    ),
     date-special-current-border-color: (
         color: (
             'secondary',
@@ -666,6 +659,12 @@ $material-calendar: extend(
                 100,
             ),
         ),
+        date-special-range-border-color: (
+            color: (
+                'secondary',
+                900,
+            ),
+        ),
         date-special-border-color: (
             color: (
                 'secondary',
@@ -1980,14 +1979,12 @@ $bootstrap-calendar: extend(
 /// @prop {Map} border-color [color: ('gray', 400)] - The calendar border color.
 /// @prop {Map} date-special-border-color [color: ('primary', 500)] - The outline color around a special date.
 /// @prop {Map} date-special-hover-border-color [color: ('primary', 600)] - The :hover outline color around a special date.
-/// @prop {Map} ym-selected-current-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the current/selected month/year.
-/// @prop {Map} ym-selected-current-hover-background [color: ('primary', 400)] - The :hover background color of the current/selected month/year.
 /// @prop {Map} ym-hover-foreground [color: ('gray', 900)] -  The :hover foreground color of the month/year.
 /// @prop {Map} ym-hover-background [color: ('gray', 900, .05)] - The :hover background color of the month/year.
 /// @prop {Map} ym-current-foreground [color: ('gray', 900)] - The foreground color of the current month/year.
 /// @prop {Map} ym-current-background [color: ('primary', 50, .5)] - The background color of the current month/year.
 /// @prop {Map} ym-current-hover-foreground [color: ('gray', 900)] - The :hover foreground color of the current month/year.
-/// @prop {Map} ym-current-hover-background [color: (color: ('primary', 50)] - The :hover background color of the current month/year.
+/// @prop {Map} ym-current-hover-background [color: ('primary', 50)] - The :hover background color of the current month/year.
 /// @prop {Map} ym-selected-foreground [contrast-color: ('primary', 500)] - The foreground color of the selected month/year.
 /// @prop {Map} ym-selected-background [color: ('primary', 500)] - The background color of the selected month in month/year.
 /// @prop {Map} ym-selected-hover-foreground [contrast-color: ('primary', 900)] - The :hover foreground color of the selected month/year.