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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.0.0-beta.13",
+  "version": "6.0.0-beta.14",
   "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',
@@ -546,6 +491,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.
@@ -565,8 +511,8 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} date-hover-background [contrast-color: ('gray', 900, .1)] - The :hover background 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.
@@ -594,6 +540,12 @@ $dark-bootstrap-calendar: extend(
 $dark-indigo-calendar: extend(
     $indigo-calendar,
     (
+        content-foreground: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         date-hover-foreground: (
             contrast-color: (
                 'gray',
@@ -606,7 +558,6 @@ $dark-indigo-calendar: extend(
                 50,
             ),
         ),
-
         date-current-hover-foreground: (
             contrast-color: (
                 'gray',
@@ -645,7 +596,6 @@ $dark-indigo-calendar: extend(
                 0.1,
             ),
         ),
-
         year-hover-foreground: (
             contrast-color: (
                 'gray',
@@ -659,14 +609,12 @@ $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 +622,6 @@ $dark-indigo-calendar: extend(
                 0.1,
             ),
         ),
-
         header-background: (
             color: (
                 'gray',
@@ -719,20 +666,6 @@ $dark-indigo-calendar: extend(
                 900,
             ),
         ),
-        date-disabled-foreground: (
-            contrast-color: (
-                'gray',
-                50,
-                0.4,
-            ),
-        ),
-        date-disabled-range-foreground: (
-            contrast-color: (
-                'gray',
-                50,
-                0.4,
-            ),
-        ),
         date-current-border-color: (
             color: (
                 'primary',
@@ -873,5 +806,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/light/_calendar.scss

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