igniteui-theming 23.2.1 → 23.2.3

package/package.json

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

@@ -29,6 +29,7 @@
 /// @prop {Map} cell-selected-within-background [color: ('secondary', 'A400')] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('secondary', 'A400')] - The color of the selected cell inside a selected row/column.
 /// @prop {Map} grouparea-background [color: ('gray', 50)] - The grid group area background color.
+/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
 $base-dark-grid: (
@@ -172,6 +173,13 @@ $base-dark-grid: (
         ),
     ),
 
+    grouparea-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+
     group-row-background: (
         color: (
             'gray',
@@ -190,7 +198,6 @@ $base-dark-grid: (
 /// Generates a dark material grid schema based on a mix of $material-grid and $base-dark-grid.
 /// @type {Map}
 /// @prop {Map} header-text-color [color: ('gray', 800, .7)] - The table header text color.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-label-column-name-text [color: ('primary', 500)] - The grid group row column name text color.
 /// @prop {Map} group-label-icon [color: ('primary', 500)] - The grid group row icon color.
 /// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
@@ -209,13 +216,6 @@ $dark-material-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
         group-label-column-name-text: (
             color: (
                 'primary',
@@ -260,7 +260,6 @@ $dark-material-grid: extend(
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 200)] - The selected row hover text color.
 /// @prop {Map} cell-selected-within-background [color: ('gray', 200)] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 200)] - The color of the selected cell inside a selected row/column.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 100, .5)] - The grid group row background color.
 /// @prop {Map} group-count-text-color [color: ('gray', 600)] - The grid group row cont badge text color.
 /// @requires $fluent-grid
@@ -326,13 +325,6 @@ $dark-fluent-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
         group-row-background: (
             color: (
                 'gray',
@@ -366,7 +358,6 @@ $dark-fluent-grid: extend(
 /// @prop {Map} content-background [color: ('gray', 50)] - The table body background color.
 /// @prop {Map} drop-area-background [color: ('gray', 100, .5)] - The drop area background color.
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
-/// @prop {Map} grouparea-color [contrast-color: 'surface'] - The grid group area color.
 /// @prop {Map} summaries-patch-background [color: ('gray', 100)] - The leading summaries patch backround. Used in hierarchical grids.
 /// @requires $bootstrap-grid
 /// @requires $base-dark-grid

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.scss

@@ -49,7 +49,7 @@
 /// @prop {Map} resize-line-color [color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} drop-indicator-color [color: ('secondary', 500)] - The color of the drop indicator.
 /// @prop {Map} grouparea-background [color: ('gray', 100)] - The grid group area background color.
-/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
+/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 100)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 200)] - The drop area background on drop color.
 /// @prop {Map} active-expand-icon-color [color: ('gray', 500)] - The drop area background on drop color.
@@ -97,7 +97,7 @@ $light-grid: extend(
         grouparea-color: (
             color: (
                 'gray',
-                500,
+                600,
             ),
         ),
 
@@ -611,7 +611,6 @@ $light-grid: extend(
 /// @prop {Map} row-selected-hover-background [color: ('secondary', 100)] - The selected row hover background.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('secondary', 100)] - The selected row hover text color.
 /// @prop {Map} cell-active-border-color [color: ('secondary', 500)] - The active(focused) cell border color.
-/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-label-column-name-text [color: ('primary', 800)] - The grid group row column name text color.
 /// @prop {Map} group-label-icon [color: ('primary', 800)] - The grid group row icon color.
 /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
@@ -692,13 +691,6 @@ $material-grid: extend(
             ),
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-
         group-label-column-name-text: (
             color: (
                 'primary',
@@ -740,7 +732,6 @@ $material-grid: extend(
 /// @prop {Map} pinned-border-color [color: ('gray', 200)] - The color of the pinned border.
 /// @prop {Map} cell-active-border-color [color: ('primary', 100)] - The active(focused) cell border color.
 /// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
-/// @prop {Map} grouparea-color [color: ('gray', 600)] - The grid group area color.
 /// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
 /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
 /// @prop {Map} group-count-text-color [color: ('gray', 700)] - The grid group row cont badge text color.
@@ -838,13 +829,6 @@ $fluent-grid: extend(
             color: 'surface',
         ),
 
-        grouparea-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-
         group-row-background: (
             color: (
                 'gray',
@@ -1127,6 +1111,7 @@ $bootstrap-grid: extend(
 /// @prop {Map} cell-editing-background [color: ('gray' 200)] - The background for the cell in editing mode.
 /// @prop {Map} row-selected-hover-text-color [color: ('gray', 900)] - The selected row hover text color.
 /// @prop {Map} grouparea-background [color: ('surface', 500)] - The grid group area background color.
+/// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color.
 /// @prop {Map} drop-area-background [color: ('gray', 200)] - The drop area background color.
 /// @prop {Map} row-hover-text-color [color: ('gray', 900)] - The hover row text color.
 /// @prop {Map} row-selected-text-color [color: ('gray', 900)] - The selected row text color.
@@ -1433,6 +1418,13 @@ $indigo-grid: extend(
             ),
         ),
 
+        grouparea-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
         drop-area-background: (
             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:
             (