igniteui-theming 8.2.0-beta.1 → 9.0.0-beta.2

package/package.json

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

@@ -56,6 +56,57 @@ $dark-fluent-rating: extend(
 $dark-bootstrap-rating: $bootstrap-rating;
 
 /// Generates a dark indigo rating schema.
+/// @prop {Map} label-color [contrast-color: ('gray', 50, .8)] - sets the color for the label.
+/// @prop {Map} value-label [contrast-color: ('gray', 50, .8)] - sets the color for the value label.
+/// @prop {Map} symbol-empty-color [color: ('gray', 300)] - sets the idle color for the symbol when it is a plane text.
+/// @prop {Map} disabled-label-color [color: ('contrast-color', 50, .2)] - sets the color for the label in disabled state.
+/// @prop {Map} disabled-value-label [color: ('contrast-color', 50, .2)] - sets the color for the value in disabled state.
+/// @prop {Map} disabled-empty-symbol-color [color: ('gray', 300, .4)] - sets the idle color for the symbol in disabled state when it is a plane text.
 /// @type {Map}
 /// @requires $indigo-rating
-$dark-indigo-rating: $indigo-rating;
+$dark-indigo-rating: extend(
+    $indigo-rating,
+    (
+        label-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        value-label: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        symbol-empty-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        disabled-label-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        disabled-value-label: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        disabled-empty-symbol-color: (
+            color: (
+                'gray',
+                300,
+                0.4,
+            ),
+        ),
+    )
+);

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

@@ -82,7 +82,6 @@ $base-stepper: (
             900,
         ),
     ),
-
     invalid-indicator-color: (
         color: (
             'gray',
@@ -151,33 +150,206 @@ $dark-bootstrap-stepper: extend(
 
 /// Generates a dark indigo stepper schema.
 /// @type {Map}
-/// @prop {Map} indicator-color [color: ('gray', 900)] - The text color of the incomplete step indicator.
-/// @prop {Map} indicator-outline [color: ('gray', 600)] - The outline color of the incomplete step indicator.
-/// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
+/// @prop {Map} content-foreground [contrast-color: ('gray', 50, .8)] - The foreground of the step content.
+/// @prop {Map} indicator-color [color: ('gray', 50)] - The text color of the incomplete step indicator.
+/// @prop {Map} indicator-background [contrast-color: ('gray', 50, .8)] - The background color of the incomplete step indicator.
+/// @prop {Map} title-color [contrast-color: ('gray', 50)] - The text color of the step title.
+/// @prop {Map} title-hover-color [contrast-color: ('gray', 50)] - The text color of the step title on hover.
+/// @prop {Map} title-focus-color [contrast-color: ('gray', 50)] - The text color of the step title on focus.
+/// @prop {Map} subtitle-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle.
+/// @prop {Map} subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle on hover.
+/// @prop {Map} subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The text color of the step subtitle on focus.
+/// @prop {Map} step-hover-background [contrast-color: ('gray', 50, .15)] - The background of the step header on hover.
+/// @prop {Map} step-focus-background [contrast-color: ('gray', 50, .15)] - The background of the step header on hover.
+/// @prop {Map} current-step-hover-background [contrast-color: ('gray', 50, .15)] - The background of the current step header on hover.
+/// @prop {Map} current-step-focus-background [contrast-color: ('gray', 50, .15)] - The background of the current step header on focus.
+/// @prop {Map} complete-step-hover-background [contrast-color: ('gray', 50, .15)] - The background of the complete step header on hover.
+/// @prop {Map} complete-step-focus-background [contrast-color: ('gray', 50, .15)] - The background of the complete step header on focus.
+/// @prop {Map} invalid-step-hover-background [contrast-color: ('gray', 50, .15)] - The background of the invalid step header on hover.
+/// @prop {Map} invalid-step-focus-background [contrast-color: ('gray', 50, .15)] - The background of the invalid step header on focus.
+/// @prop {Map} complete-indicator-background [contrast-color: ('gray', 50, .15)] - The background color of the completed step indicator.
+/// @prop {Map} complete-indicator-color [contrast-color: ('gray', 50, .8)] - The color of the completed step indicator.
+/// @prop {Map} disabled-indicator-color [contrast-color: ('gray', 50, .2)] - The color of the disabled step indicator, title, and subtitle.
+/// @prop {Map} disabled-indicator-background [contrast-color: ('gray', 50, .1)] - The background color of the disabled step indicator.
+/// @prop {Map} disabled-title-color [contrast-color: ('gray', 50, .2)] - The title color of the disabled step.
+/// @prop {Map} disabled-subtitle-color [contrast-color: ('gray', 50, .2)] - The subtitle color of the disabled step.
+/// @prop {Map} step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color of between the steps.
+/// @prop {Map} complete-step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color between the completed steps.
 /// @requires $indigo-stepper
 /// @requires $base-stepper
 $dark-indigo-stepper: extend(
     $indigo-stepper,
     $base-stepper,
     (
+        content-foreground: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
         indicator-color: (
             color: (
                 'gray',
-                900,
+                50,
             ),
         ),
-
-        indicator-outline: (
-            color: (
+        indicator-background: (
+            contrast-color: (
                 'gray',
-                600,
+                50,
+                0.8,
             ),
         ),
-
-        disabled-indicator-outline: (
-            color: (
+        title-color: (
+            contrast-color: (
                 'gray',
-                300,
+                50,
+            ),
+        ),
+        title-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        title-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        subtitle-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        subtitle-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        subtitle-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        step-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        step-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        current-step-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        current-step-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        complete-step-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        complete-step-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        invalid-step-hover-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        invalid-step-focus-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        complete-indicator-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        complete-indicator-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        disabled-indicator-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        disabled-indicator-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
+        disabled-title-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        disabled-subtitle-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        step-separator-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.3,
+            ),
+        ),
+        complete-step-separator-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.3,
             ),
         ),
     )

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

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../light/toast' as *;
+@use '../elevation/toast' as *;
 
 ////
 /// @package theming
@@ -72,6 +73,26 @@ $dark-bootstrap-toast: extend(
 
 /// Generates a dark indigo toast schema.
 /// @type {Map}
+/// @prop {Map} background [color: ('gray', 300)] - The background color used for the toast.
+/// @prop {Map} text-color [contrast-color: ('gray', 50)] - The text-color used for the toast.
 /// @requires $indigo-toast
-/// @requires $dark-base-toast
-$dark-indigo-toast: extend($indigo-toast, $dark-base-toast);
+/// @requires $dark-indigo-elevation-toast
+$dark-indigo-toast: extend(
+    $indigo-toast,
+    $dark-indigo-elevation-toast,
+    (
+        background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+    )
+);

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

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../light/tooltip' as *;
+@use '../elevation/tooltip' as *;
 
 ////
 /// @package theming
@@ -24,20 +25,26 @@ $dark-bootstrap-tooltip: $bootstrap-tooltip;
 
 /// Generates a dark indigo tooltip schema.
 /// @type {Map}
-/// @prop {Map} background [contrast-color: ('surface')] - The background color of the tooltip.
-/// @prop {Map} text-color [text-color: (color: 'surface')] - The text color of the tooltip.
-/// @requires $indigo-tooltip
+/// @prop {Map} background [color: ('gray', 300)] - The background color of the tooltip.
+/// @prop {Map} text-color [contrast-color: ('gray', 50)] - The text color of the tooltip.
+/// @prop {Number} elevation [9] - The elevation level, between 0-24, to be used for the tooltip.
+/// @requires {Map} $indigo-tooltip
+/// @requires {Map} $dark-indigo-elevation-tooltip
 $dark-indigo-tooltip: extend(
     $indigo-tooltip,
+    $dark-indigo-elevation-tooltip,
     (
         background: (
-            contrast-color: (
-                'surface',
+            color: (
+                'gray',
+                300,
             ),
         ),
-
         text-color: (
-            color: 'surface',
+            contrast-color: (
+                'gray',
+                50,
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/elevation/_toast.scss

@@ -5,13 +5,25 @@
 ////
 
 /// @type Map
-/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the toast.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the default toast.
 $default-elevation-toast: (
     elevation: 0,
 );
 
 /// @type Map
-/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the toast.
+/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the bootstrap toast.
 $bootstrap-elevation-toast: (
     elevation: 10,
 );
+
+/// @type Map
+/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the indigo toast.
+$indigo-elevation-toast: (
+    elevation: 10,
+);
+
+/// @type Map
+/// @prop {Number} elevation [11] - The elevation level, between 0-24, to be used for the dark indigo toast.
+$dark-indigo-elevation-toast: (
+    elevation: 11,
+);

package/sass/themes/schemas/components/elevation/_tooltip.scss

@@ -0,0 +1,23 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the tooltip.
+$default-elevation-tooltip: (
+    elevation: 0,
+);
+
+/// @type Map
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the tooltip.
+$indigo-elevation-tooltip: (
+    elevation: 8,
+);
+
+/// @type Map
+/// @prop {Number} elevation [9] - The elevation level, between 0-24, to be used for the tooltip.
+$dark-indigo-elevation-tooltip: (
+    elevation: 9,
+);