igniteui-theming 8.2.0-beta.1 → 8.2.0

package/package.json

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

@@ -106,11 +106,14 @@ $dark-material-calendar: extend(
 /// @prop {Map} picker-focus-foreground [color: ('primary', 200)] - The :focus foreground color of the month and year pickers.
 /// @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} ym-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected month/year.
-/// @prop {Map} ym-selected-background [color: ('primary', 800)] - The background color of the selected month/year.
-/// @prop {Map} ym-selected-hover-background [color: ('primary', 600)]- The :hover background color of the selected month/year.
-/// @prop {Map} ym-selected-current-background [color: ('primary', 800)]- The background color of the current/selected month/year.
-/// @prop {Map} ym-selected-current-hover-background [color: ('primary', 600)] - The :hover background color of the current/selected month/year.
+/// @prop {Map} year-selected-background [color: ('primary', 800)]- The background 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-background [color: ('primary', 800)] - The 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-background [color: ('primary', 800)] - The background 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-background [color: ('primary', 800)]- The background 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.
 /// @prop {Map} date-current-hover-foreground [contrast-color: ('gray', 900)] - The :hover foreground color of the current date.
@@ -167,30 +170,54 @@ $dark-fluent-calendar: extend(
                 200,
             ),
         ),
-        ym-selected-current-hover-background: (
+        year-selected-background: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        year-selected-hover-background: (
             color: (
                 'primary',
                 600,
             ),
         ),
-        ym-selected-background: (
+        year-selected-current-background: (
             color: (
                 'primary',
                 800,
             ),
         ),
-        ym-selected-hover-background: (
+        year-selected-current-hover-background: (
             color: (
                 'primary',
                 600,
             ),
         ),
-        ym-selected-current-background: (
+        month-selected-background: (
             color: (
                 'primary',
                 800,
             ),
         ),
+        month-selected-hover-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        month-selected-current-background: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        month-selected-current-hover-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
         date-special-border-color: (
             color: (
                 'primary',
@@ -280,8 +307,10 @@ $dark-fluent-calendar: extend(
 
 /// Generates a dark bootstrap calendar schema.
 /// @type {Map}
-/// @prop {Map} ym-hover-background [color: ('gray', 100)] - The :hover background color of the month/year.
-/// @prop {Map} ym-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month/year.
+/// @prop {Map} year-hover-background [color: ('gray', 100)] - The :hover background color of the year in years view.
+/// @prop {Map} year-current-hover-background [color: ('gray', 100)] - The :hover background color of the current year in years view.
+/// @prop {Map} month-hover-background [color: ('gray', 100)] - The :hover background color of the month in months view.
+/// @prop {Map} month-current-hover-background [color: ('gray', 100)] - The :hover background color of the current month in months view.
 /// @prop {Map} date-special-hover-background [color: ('gray', 100)] - The background color of a special date.
 /// @prop {Map} date-special-focus-background [color: ('gray', 100)] - The background color of a special date.
 /// @prop {Map} date-special-range-hover-background [color: ('gray', 100)] - The :hover background color of a special date in range selection.
@@ -311,13 +340,25 @@ $dark-bootstrap-calendar: extend(
                 900,
             ),
         ),
-        ym-hover-background: (
+        year-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        year-current-hover-background: (
             color: (
                 'gray',
                 100,
             ),
         ),
-        ym-current-hover-background: (
+        month-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        month-current-hover-background: (
             color: (
                 'gray',
                 100,
@@ -444,8 +485,9 @@ $dark-bootstrap-calendar: extend(
 /// @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} month-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the month inside the months view.
+/// @prop {Map} month-current-hover-background [contrast-color: ('gray', 900, .1)] - The :hover background color of the current month in month view.
+/// @prop {Map} year-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the year in years view.
 /// @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} 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.
@@ -479,12 +521,13 @@ $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} year-current-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current year in years view.
+/// @prop {Map} current-outline-hover-color [color: ('primary', 300)] - The :hover outline color of the current year/month in year/month views.
+/// @prop {Map} current-outline-focus-color [color: ('primary', 300)] - The :focus outline color of the current year/month in year/month views.
+/// @prop {Map} current-outline-color [color: ('primary', 400)] - The outline color of the current year/month in year/month views.
+/// @prop {Map} selected-current-outline-color [contrast-color: ('gray', 50, .6)] - The outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-hover-color [contrast-color: ('gray', 50, .6)] - The :hover outline color of the selected current year/month in year/month views.
+/// @prop {Map} selected-current-outline-focus-color [contrast-color: ('gray', 50, .6)] - The :focus outline color of the selected current year/month in year/month views.
 /// @prop {Map} date-current-hover-background [contrast-color: ('gray', 50, .1)] - The :hover background color of the current date.
 /// @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.
@@ -514,7 +557,14 @@ $dark-indigo-calendar: extend(
                 50,
             ),
         ),
-        ym-hover-background: (
+        month-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
+        year-hover-background: (
             contrast-color: (
                 'gray',
                 50,
@@ -718,39 +768,46 @@ $dark-indigo-calendar: extend(
                 0.2,
             ),
         ),
-        ym-current-outline-color: (
+        current-outline-color: (
             color: (
                 'primary',
                 400,
             ),
         ),
-        ym-selected-current-outline-color: (
+        selected-current-outline-color: (
             contrast-color: (
                 'gray',
                 50,
                 0.6,
             ),
         ),
-        ym-current-outline-hover-color: (
+        year-current-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
+        current-outline-hover-color: (
             color: (
                 'primary',
                 300,
             ),
         ),
-        ym-current-outline-focus-color: (
+        current-outline-focus-color: (
             color: (
                 'primary',
                 300,
             ),
         ),
-        ym-selected-current-outline-hover-color: (
+        selected-current-outline-hover-color: (
             contrast-color: (
                 'gray',
                 50,
                 0.6,
             ),
         ),
-        ym-selected-current-outline-focus-color: (
+        selected-current-outline-focus-color: (
             contrast-color: (
                 'gray',
                 50,

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

@@ -7,37 +7,33 @@
 /// @access public
 ////
 
-/// Generates a base dark divider schema.
-/// @type {Map}
-/// @property {Map} color [color: ('gray', 100)] - The color used for the divider.
-$base-dark-divider: (
-    color: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
-);
-
 /// Generates a dark material divider schema.
 /// @type {Map}
 /// @requires $material-divider
-/// @requires $base-dark-divider
-$dark-material-divider: extend($material-divider, $base-dark-divider);
+$dark-material-divider: $material-divider;
 
 /// Generates a dark fluent divider schema.
 /// @type {Map}
 /// @requires $fluent-divider
-$dark-fluent-divider: extend($fluent-divider, $base-dark-divider);
+$dark-fluent-divider: $fluent-divider;
 
 /// Generates a dark bootstrap divider schema.
 /// @type {Map}
 /// @requires $bootstrap-divider
-/// @requires $base-dark-divider
-$dark-bootstrap-divider: extend($bootstrap-divider, $base-dark-divider);
+$dark-bootstrap-divider: $bootstrap-divider;
 
 /// Generates a dark indigo divider schema.
 /// @type {Map}
+/// @prop {Map} color [color: ('gray', 100)] - The color used for the divider.
 /// @requires $indigo-divider
-/// @requires $base-dark-divider
-$dark-indigo-divider: extend($indigo-divider, $base-dark-divider);
+$dark-indigo-divider: extend(
+    $indigo-divider,
+    (
+        color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);

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

@@ -42,8 +42,20 @@ $dark-fluent-progress-linear: extend($fluent-progress-linear, $dark-base-progres
 
 /// Generates a dark bootstrap progress-linear schema.
 /// @type {Map}
+/// @prop {Map} stripes-color [color: ('gray', 900, .2)] - The track stripes color.
 /// @requires $bootstrap-progress-linear
-$dark-bootstrap-progress-linear: $bootstrap-progress-linear;
+$dark-bootstrap-progress-linear: extend(
+    $bootstrap-progress-linear,
+    (
+        stripes-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark indigo progress-linear schema.
 /// @type {Map}