igniteui-theming 9.0.0-beta.2 → 9.0.0

package/package.json

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

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

@@ -56,57 +56,6 @@ $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: 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,
-            ),
-        ),
-    )
-);
+$dark-indigo-rating: $indigo-rating;

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

@@ -82,6 +82,7 @@ $base-stepper: (
             900,
         ),
     ),
+
     invalid-indicator-color: (
         color: (
             'gray',
@@ -150,206 +151,33 @@ $dark-bootstrap-stepper: extend(
 
 /// Generates a dark indigo stepper schema.
 /// @type {Map}
-/// @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.
+/// @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.
 /// @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',
-                50,
-            ),
-        ),
-        indicator-background: (
-            contrast-color: (
-                'gray',
-                50,
-                0.8,
-            ),
-        ),
-        title-color: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-        title-hover-color: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-        title-focus-color: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-        subtitle-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.8,
+                900,
             ),
         ),
-        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: (
+
+        indicator-outline: (
+            color: (
                 'gray',
-                50,
-                0.3,
+                600,
             ),
         ),
-        complete-step-separator-color: (
-            contrast-color: (
+
+        disabled-indicator-outline: (
+            color: (
                 'gray',
-                50,
-                0.3,
+                300,
             ),
         ),
     )

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

@@ -1,6 +1,5 @@
 @use '../../../../utils/map' as *;
 @use '../light/toast' as *;
-@use '../elevation/toast' as *;
 
 ////
 /// @package theming
@@ -73,26 +72,6 @@ $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-indigo-elevation-toast
-$dark-indigo-toast: extend(
-    $indigo-toast,
-    $dark-indigo-elevation-toast,
-    (
-        background: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
-        text-color: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-    )
-);
+/// @requires $dark-base-toast
+$dark-indigo-toast: extend($indigo-toast, $dark-base-toast);

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

@@ -1,6 +1,5 @@
 @use '../../../../utils/map' as *;
 @use '../light/tooltip' as *;
-@use '../elevation/tooltip' as *;
 
 ////
 /// @package theming
@@ -25,26 +24,20 @@ $dark-bootstrap-tooltip: $bootstrap-tooltip;
 
 /// Generates a dark indigo tooltip schema.
 /// @type {Map}
-/// @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
+/// @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
 $dark-indigo-tooltip: extend(
     $indigo-tooltip,
-    $dark-indigo-elevation-tooltip,
     (
         background: (
-            color: (
-                'gray',
-                300,
+            contrast-color: (
+                'surface',
             ),
         ),
+
         text-color: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
+            color: 'surface',
         ),
     )
 );