igniteui-theming 10.0.0-beta.2 → 10.0.0-beta.3

package/package.json

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

@@ -106,14 +106,11 @@ $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} 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} 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} 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.
@@ -170,54 +167,30 @@ $dark-fluent-calendar: extend(
                 200,
             ),
         ),
-        year-selected-background: (
-            color: (
-                'primary',
-                800,
-            ),
-        ),
-        year-selected-hover-background: (
+        ym-selected-current-hover-background: (
             color: (
                 'primary',
                 600,
             ),
         ),
-        year-selected-current-background: (
+        ym-selected-background: (
             color: (
                 'primary',
                 800,
             ),
         ),
-        year-selected-current-hover-background: (
+        ym-selected-hover-background: (
             color: (
                 'primary',
                 600,
             ),
         ),
-        month-selected-background: (
+        ym-selected-current-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',
@@ -307,10 +280,8 @@ $dark-fluent-calendar: extend(
 
 /// Generates a dark bootstrap calendar schema.
 /// @type {Map}
-/// @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} 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} 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.
@@ -340,25 +311,13 @@ $dark-bootstrap-calendar: extend(
                 900,
             ),
         ),
-        year-hover-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        year-current-hover-background: (
+        ym-hover-background: (
             color: (
                 'gray',
                 100,
             ),
         ),
-        month-hover-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        month-current-hover-background: (
+        ym-current-hover-background: (
             color: (
                 'gray',
                 100,
@@ -485,9 +444,8 @@ $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} 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} 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} 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.
@@ -521,13 +479,12 @@ $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} 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} 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} 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.
@@ -557,14 +514,7 @@ $dark-indigo-calendar: extend(
                 50,
             ),
         ),
-        month-hover-background: (
-            contrast-color: (
-                'gray',
-                50,
-                0.1,
-            ),
-        ),
-        year-hover-background: (
+        ym-hover-background: (
             contrast-color: (
                 'gray',
                 50,
@@ -768,46 +718,39 @@ $dark-indigo-calendar: extend(
                 0.2,
             ),
         ),
-        current-outline-color: (
+        ym-current-outline-color: (
             color: (
                 'primary',
                 400,
             ),
         ),
-        selected-current-outline-color: (
+        ym-selected-current-outline-color: (
             contrast-color: (
                 'gray',
                 50,
                 0.6,
             ),
         ),
-        year-current-hover-background: (
-            contrast-color: (
-                'gray',
-                50,
-                0.1,
-            ),
-        ),
-        current-outline-hover-color: (
+        ym-current-outline-hover-color: (
             color: (
                 'primary',
                 300,
             ),
         ),
-        current-outline-focus-color: (
+        ym-current-outline-focus-color: (
             color: (
                 'primary',
                 300,
             ),
         ),
-        selected-current-outline-hover-color: (
+        ym-selected-current-outline-hover-color: (
             contrast-color: (
                 'gray',
                 50,
                 0.6,
             ),
         ),
-        selected-current-outline-focus-color: (
+        ym-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}