igniteui-theming 10.1.0 → 10.2.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "10.1.0",
+  "version": "10.2.0-beta.1",
   "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/charts/light/_data-chart.scss

@@ -20,6 +20,7 @@
 /// @property {Color} plot-area-background [color: ('surface', 500)] - Sets the brush used as the background for the current Chart object's plot area.
 /// @property {String} title-horizontal-alignment [null] - The horizontal alignment to use for the title.
 /// @property {String} subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle.
+/// @property {Color} axis-label-text-color [color: (gray, 700)] - The horizontal alignment to use for the subtitle.
 $material-data-chart: (
     'margin': null,
     'title-text-color': (
@@ -48,6 +49,12 @@ $material-data-chart: (
     ),
     'title-horizontal-alignment': null,
     'subtitle-horizontal-alignment': null,
+    'axis-label-text-color': (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
 );
 
 /// Generates a fluent data-chart schema.

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,
+            ),
+        ),
     )
 );
 
@@ -443,10 +464,10 @@ $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-current-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the current date.
 /// @prop {Map} ym-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the month/year.
 /// @prop {Map} ym-current-hover-background [contrast-color: ('gray', 900, .1)] - The :hover background color of the current month/year.
 /// @prop {Map} date-selected-current-range-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date in the selected range.
+/// @prop {Map} date-selected-current-range-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of the current date in the selected range.
 /// @prop {Map} header-background [color: ('gray', 50)] - The header background color.
 /// @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.
@@ -455,22 +476,28 @@ $dark-bootstrap-calendar: extend(
 /// @prop {Map} date-hover-background [contrast-color: ('gray', 50, .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', 50, .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, .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.
-/// @prop {Map} date-special-range-foreground [color: ('primary', 50)] - The foreground color of a special date in rage selection.
+/// @prop {Map} date-current-foreground [color: ('gray', 900)] - The foreground color of the current date.
+/// @prop {Map} date-current-background [color: ('primary', 700, .5)] - The background color of the current date.
+/// @prop {Map} date-current-hover-background [color: ('primary', 700)] - The :hover background color of the current date.
+/// @prop {Map} date-current-focus-background [color: ('primary', 700)] - The :focus background color of the current date.
+/// @prop {Map} date-current-focus-foreground [contrast-color: ('gray', 50)] - The :focus foreground color of the current date.
+/// @prop {Map} date-current-border-color [color: ('primary', 300)] - The border color of the current date.
+/// @prop {Map} date-current-hover-border-color [color: ('primary', 200)] - The :hover border color of the current date.
+/// @prop {Map} date-current-focus-border-color [color: ('primary', 200)] - The :focus border color of the current date.
+/// @prop {Map} date-special-range-foreground [color: ('primary', 100)] - The foreground color of a special date in rage selection.
 /// @prop {Map} date-special-range-background [color: ('primary', 600, .4)] - The background color of a special date in range selection.
-/// @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-focus-foreground [contrast-color: ('primary', 600)] - The foreground color of a special date.
-/// @prop {Map} date-special-focus-background [color: ('primary', 400, .7)] - The background color of a special date.
+/// @prop {Map} date-special-foreground [color: ('primary', 100)] - The foreground color of a special date.
+/// @prop {Map} date-special-hover-foreground [color: ('primary', 50)] - The :hover foreground color of a special date.
+/// @prop {Map} date-special-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of a special date.
+/// @prop {Map} date-special-focus-foreground [color: ('primary', 50)] - The :focus foreground color of a special date.
+/// @prop {Map} date-special-focus-background [contrast-color: ('gray', 50, .1)] - The :focus 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} date-special-border-color [color: ('primary', 100)] - The outline color around a special date.
+/// @prop {Map} date-special-hover-border-color [color: ('primary', 50)] - The outline color around a special date on hover.
+/// @prop {Map} date-special-range-border-color [color: ('primary', 100)] - The outline color around 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.
@@ -479,13 +506,11 @@ $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 [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-outline-hover-color [color: ('primary', 300)] - The :hover outline color of the current month/year.
-/// @prop {Map} ym-current-outline-focus-color [color: ('primary', 300)] - The :focus outline color of the current month/year.
-/// @prop {Map} ym-current-outline-color [color: ('primary', 400)] - The outline color of the current month/year.
-/// @prop {Map} ym-selected-current-outline-color [contrast-color: ('gray', 50, .6)] - The outline color of the selected current month/year.
-/// @prop {Map} ym-selected-current-outline-hover-color [contrast-color: ('gray', 50, .6)] - The :hover outline color of the selected current month/year.
-/// @prop {Map} ym-selected-current-outline-focus-color [contrast-color: ('gray', 50, .6)] - The :focus outline color of the selected current month/year.
-/// @prop {Map} date-current-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date.
+/// @prop {Map} ym-current-background [color: ('primary', 700, .5)] - The 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.
 /// @prop {Map} date-selected-range-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the selected range.
 /// @prop {Map} date-selected-range-focus-background [contrast-color: ('gray', 50, .1)] - The :focus background color of the selected range.
 /// @prop {Map} date-selected-range-hover-foreground [contrast-color: ('gray', 50)] - The :hover foreground color of the selected range.
@@ -501,27 +526,21 @@ $dark-indigo-calendar: extend(
                 900,
             ),
         ),
-        date-current-hover-background: (
+        ym-hover-background: (
             contrast-color: (
                 'gray',
                 50,
                 0.1,
             ),
         ),
-        date-current-focus-foreground: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-        ym-hover-background: (
+        date-selected-current-range-hover-background: (
             contrast-color: (
                 'gray',
                 50,
                 0.1,
             ),
         ),
-        date-selected-current-range-hover-background: (
+        date-selected-current-range-focus-background: (
             contrast-color: (
                 'gray',
                 50,
@@ -584,67 +603,85 @@ $dark-indigo-calendar: extend(
                 900,
             ),
         ),
-        date-current-border-color: (
+        date-current-background: (
             color: (
                 'primary',
-                400,
+                700,
+                0.5,
             ),
         ),
-        date-current-hover-border-color: (
+        date-current-hover-background: (
             color: (
                 'primary',
-                300,
+                700,
             ),
         ),
-        date-current-focus-border-color: (
+        date-current-focus-background: (
+            color: (
+                'primary',
+                700,
+            ),
+        ),
+        date-current-focus-foreground: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        date-current-border-color: (
             color: (
                 'primary',
                 300,
             ),
         ),
-        date-special-foreground: (
+        date-current-hover-border-color: (
             color: (
                 'primary',
-                50,
+                200,
             ),
         ),
-        date-special-background: (
+        date-current-focus-border-color: (
             color: (
                 'primary',
-                600,
-                0.4,
+                200,
             ),
         ),
-        date-special-hover-foreground: (
-            contrast-color: (
+        date-special-foreground: (
+            color: (
                 'primary',
-                600,
+                100,
             ),
         ),
-        date-special-hover-background: (
+        date-special-hover-foreground: (
             color: (
                 'primary',
-                400,
-                0.7,
+                50,
             ),
         ),
-        date-special-focus-foreground: (
+        date-special-hover-background: (
             contrast-color: (
-                'primary',
-                600,
+                'gray',
+                50,
+                0.1,
             ),
         ),
-        date-special-focus-background: (
+        date-special-focus-foreground: (
             color: (
                 'primary',
-                400,
-                0.7,
+                50,
+            ),
+        ),
+        date-special-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
             ),
         ),
         date-special-range-foreground: (
             color: (
                 'primary',
-                50,
+                100,
             ),
         ),
         date-special-range-background: (
@@ -668,6 +705,24 @@ $dark-indigo-calendar: extend(
                 0.7,
             ),
         ),
+        date-special-border-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        date-special-hover-border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
+        date-special-range-border-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
         navigation-hover-color: (
             color: (
                 'primary',
@@ -718,43 +773,35 @@ $dark-indigo-calendar: extend(
                 0.2,
             ),
         ),
-        ym-current-outline-color: (
+        ym-current-background: (
             color: (
                 'primary',
-                400,
-            ),
-        ),
-        ym-selected-current-outline-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.6,
+                700,
+                0.5,
             ),
         ),
-        ym-current-outline-hover-color: (
+        ym-current-hover-background: (
             color: (
                 'primary',
-                300,
+                700,
             ),
         ),
-        ym-current-outline-focus-color: (
+        ym-current-outline-color: (
             color: (
                 'primary',
                 300,
             ),
         ),
-        ym-selected-current-outline-hover-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.6,
+        ym-current-outline-hover-color: (
+            color: (
+                'primary',
+                200,
             ),
         ),
-        ym-selected-current-outline-focus-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.6,
+        ym-current-outline-focus-color: (
+            color: (
+                'primary',
+                200,
             ),
         ),
         date-disabled-foreground: (

package/sass/themes/schemas/components/dark/_grid-summary.scss

@@ -34,20 +34,15 @@ $dark-bootstrap-grid-summary: extend(
 
 /// Generates a dark indigo grid-summary schema.
 /// @type {Map}
-/// @property {Map} background-color [color: 'surface'] - The summaries background color is inherited form igx-grid footer.
-/// @property {Map} focus-background-color [color: ('gray', 100)] - The background color when a summary item is on focus.
-/// @property {Map} label-color [color: ('primary', 200)] - The summaries label color.
-/// @property {map} label-hover-color [color: ('primary', 100)] - The summaries hover label color.
-/// @property {Map} result-color [color: 'surface'] - The summaries value/result color.
-/// @property {Map} pinned-border-color [color: ('primary', 200)] - The border color of the summary panel.
+/// @prop {Map} focus-background-color [color: ('gray', 100)] - The background color when a summary item is on focus.
+/// @prop {Map} label-color [color: ('primary', 200)] - The summaries label color.
+/// @prop {Map} label-hover-color [color: ('primary', 200)] - The summaries hover label color.
+/// @prop {Map} result-color [contrast-color: 'surface'] - The summaries value/result color.
+/// @prop {Map} border-color [color: ('gray', 200)] - The summaries border color.
 /// @requires $indigo-grid-summary
 $dark-indigo-grid-summary: extend(
     $indigo-grid-summary,
     (
-        background-color: (
-            color: 'surface',
-        ),
-
         focus-background-color: (
             color: (
                 'gray',
@@ -65,17 +60,17 @@ $dark-indigo-grid-summary: extend(
         label-hover-color: (
             color: (
                 'primary',
-                100,
+                200,
             ),
         ),
 
         result-color: (
-            color: 'surface',
+            contrast-color: 'surface',
         ),
 
-        pinned-border-color: (
+        border-color: (
             color: (
-                'primary',
+                'gray',
                 200,
             ),
         ),

package/sass/themes/schemas/components/dark/_grid-toolbar.scss

@@ -23,14 +23,18 @@ $dark-fluent-grid-toolbar: $fluent-grid-toolbar;
 $dark-bootstrap-grid-toolbar: $bootstrap-grid-toolbar;
 
 /// Generates a dark indigo grid-toolbar schema.
+/// @prop {Map} border-color [contrast-color: ('gray', 50, .3)] - The toolbar border-bottom color.
 /// @type {Map}
-/// @property {Map} background-color [color: 'surface'] - The toolbar background color.
 /// @requires $indigo-grid-toolbar
 $dark-indigo-grid-toolbar: extend(
     $indigo-grid-toolbar,
     (
-        background-color: (
-            color: 'surface',
+        border-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.3,
+            ),
         ),
     )
 );