igniteui-theming 23.2.0 → 23.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "23.2.0",
+  "version": "23.2.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/_button.scss

@@ -759,7 +759,7 @@ $indigo-flat-button-dark: extend(
 /// @prop {Map} hover-border-color [contrast-color: ('primary', 500, 0.8)] - The hover border color of an outlined button.
 /// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.1)] - The background color on focus hovered state of an outlined button.
 /// @prop {Map} focus-background [contrast-color: ('primary', 500, 0.1)] - The background color of an outlined button when focused with click and keyboard.
-/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, 0.6)] - The focus border color of an outlined button.
+/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, 0.8)] - The focus border color of an outlined button.
 /// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 500, 0.6)] - The focus-visible border color of an outlined button.
 /// @prop {Map} active-background [contrast-color: ('primary', 500, 0.1)] - The active background color of an outlined button.
 /// @prop {Map} active-border-color [contrast-color: ('primary', 500, 0.8)] - The active border color of an outlined button.
@@ -810,7 +810,7 @@ $indigo-outlined-button-dark: extend(
             contrast-color: (
                 'primary',
                 500,
-                0.6,
+                0.8,
             ),
         ),
         focus-visible-border-color: (

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

@@ -22,12 +22,10 @@ $dark-material-overlay: extend(
 
 /// Generates a dark fluent overlay schema.
 /// @type {Map}
-/// @property {Color} background-color [rgba(0, 0, 0, .4)] - The background color used for modal overlays.
 /// @requires $fluent-overlay
 $dark-fluent-overlay: extend(
     $fluent-overlay,
     (
-        background-color: rgb(0 0 0 / 0.4),
         _meta: (
             theme: 'fluent',
             variant: 'dark',

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

@@ -273,6 +273,7 @@ $dark-fluent-stepper: extend(
 
 /// Generates a dark bootstrap stepper schema.
 /// @type {Map}
+/// @prop {Map} indicator-color [color: ('primary', 300)] - The text color of the incomplete step indicator.
 /// @prop {Map} step-separator-color [color: ('gray', 100)] - The separator border-color of between the steps.
 /// @prop {Map} invalid-title-color [color: ('error', 400)] - The color of the invalid step title.
 /// @prop {Map} invalid-title-hover-color [color: ('error', 400)] - The color of the invalid step title on hover.
@@ -287,6 +288,12 @@ $dark-bootstrap-stepper: extend(
     $bootstrap-stepper,
     $base-stepper,
     (
+        indicator-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
         step-separator-color: (
             color: (
                 'gray',

package/sass/themes/schemas/components/light/_button.scss

@@ -1484,7 +1484,7 @@ $indigo-flat-button: extend(
 /// @type {Map}
 /// @prop {Map} border-color [color: ('gray', 500)] - The border color of an outlined button.
 /// @prop {Map} hover-border-color [color: ('gray', 600)] - The hover border color of a outlined button.
-/// @prop {Map} focus-border-color [color: ('gray', 500)] - The focus border color of a outlined button.
+/// @prop {Map} focus-border-color [color: ('gray', 600)] - The focus border color of a outlined button.
 /// @prop {Map} focus-visible-border-color [color: ('gray', 500)] - The focus-visible border color of a outlined button.
 /// @prop {Map} active-border-color [color: ('gray', 900, 0.15)] - The active border color of a outlined button.
 /// @prop {Map} disabled-border-color [color: ('gray', 900, 0.15)] - The disabled focused border color of an outlined button.
@@ -1509,7 +1509,7 @@ $indigo-outlined-button: extend(
         focus-border-color: (
             color: (
                 'gray',
-                500,
+                600,
             ),
         ),
         focus-visible-border-color: (

package/sass/themes/schemas/components/light/_dialog.scss

@@ -14,7 +14,7 @@
 /// @prop {Map} title-color [color: ('gray', 900)] - The dialog title text color.
 /// @prop {Map} message-color [color: ('gray', 600)] - The dialog message text color.
 /// @prop {Color} border-color [transparent] - The border color for dialog component.
-/// @prop {Map} backdrop [color: ('gray', 50, .54)] - The dialog backdrop color.
+/// @prop {Map} backdrop [color: ('gray', 500, .54)] - The dialog backdrop color.
 /// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @prop {Number} default-size [2] - The default size used for the dialog component.
@@ -102,7 +102,6 @@ $material-dialog: extend(
 
 /// Generates a fluent dialog schema.
 /// @type {Map}
-/// @prop {Map} backdrop [color: ('gray', 900, .4)] - The dialog backdrop color.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
 /// @prop {Map} typography [
@@ -113,14 +112,6 @@ $material-dialog: extend(
 $fluent-dialog: extend(
     $light-dialog,
     (
-        backdrop: (
-            color: (
-                'gray',
-                900,
-                0.4,
-            ),
-        ),
-
         border-radius: (
             border-radius: (
                 rem(2px),

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

@@ -107,7 +107,6 @@ $material-grid-toolbar: extend(
 /// Generates a fluent grid-toolbar schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: 'surface'] - The toolbar background color.
-/// @prop {Map} title-text-color [color: ('gray', 700)] - The toolbar title text color.
 /// @requires {Map} $light-grid-toolbar
 $fluent-grid-toolbar: extend(
     $light-grid-toolbar,
@@ -116,13 +115,6 @@ $fluent-grid-toolbar: extend(
             color: 'surface',
         ),
 
-        title-text-color: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
-
         _meta: (
             theme: 'fluent',
             variant: 'light',
@@ -132,18 +124,11 @@ $fluent-grid-toolbar: extend(
 
 /// Generates a bootstrap grid-toolbar schema.
 /// @type {Map}
-/// @prop {Map} title-text-color [color: ('gray', 600)] - The toolbar title text color.
 /// @prop {Map} border-color [color: ('gray', 100)] - The toolbar border-bottom color.
 /// @requires {Map} $light-grid-toolbar
 $bootstrap-grid-toolbar: extend(
     $light-grid-toolbar,
     (
-        title-text-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
         border-color: (
             color: (
                 'gray',

package/sass/themes/schemas/components/light/_overlay.scss

@@ -35,12 +35,10 @@ $material-overlay: extend(
 
 /// Generates a fluent overlay schema.
 /// @type {Map}
-/// @prop {Color} background-color [rgba(255, 255, 255, .4)] - The background color used for modal overlays.
 /// @requires {Map} $light-overlay
 $fluent-overlay: extend(
     $light-overlay,
     (
-        background-color: rgb(255 255 255 / 0.4),
         _meta: (
             theme: 'fluent',
             variant: 'light',

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

@@ -16,7 +16,6 @@
 /// @prop {Map} subtitle-color [color: ('gray', 700)] - The text color of the step subtitle.
 /// @prop {Map} subtitle-hover-color [color: ('gray', 700)] - The text color of the step subtitle on hover.
 /// @prop {Map} subtitle-focus-color [color: ('gray', 700)] - The text color of the step subtitle on focus.
-/// @prop {Map} indicator-color [color: ('primary', 500)] - The text color of the incomplete step indicator.
 /// @prop {Color} indicator-background [transparent] - The background color of the incomplete step indicator.
 /// @prop {Map} indicator-outline [color: ('gray', 400)] - The outline color of the incomplete step indicator.
 /// @prop {Color} invalid-step-background [transparent] - The background of the invalid step header.
@@ -75,12 +74,6 @@ $light-stepper: (
             300,
         ),
     ),
-    indicator-color: (
-        color: (
-            'primary',
-            500,
-        ),
-    ),
     title-color: (
         color: (
             'gray',
@@ -638,6 +631,7 @@ $fluent-stepper: extend(
 
 /// Generates a bootstrap stepper schema.
 /// @type {Map}
+/// @prop {Map} indicator-color [color: ('primary', 600)] - The text color of the incomplete step indicator.
 /// @prop {Map} indicator-outline [color: ('gray', 400)] - 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} complete-indicator-background [color: ('gray', 300)] - The background color of the completed step indicator.
@@ -664,6 +658,18 @@ $fluent-stepper: extend(
 $bootstrap-stepper: extend(
     $light-stepper,
     (
+        indicator-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        indicator-outline: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
         step-hover-background: (
             color: (
                 'gray',
@@ -756,13 +762,6 @@ $bootstrap-stepper: extend(
                 0.5,
             ),
         ),
-        indicator-outline: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
         // Complete
         complete-indicator-background:
             (