igniteui-theming 1.4.6 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "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/light/_combo.scss

@@ -19,8 +19,9 @@
 /// @prop {Map} toggle-button-foreground [color: ('gray', 700)] - The combo toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The combo toggle button foreground color when the combo is focused.
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300)] - The combo toggle button background color when the combo is disabled.
-/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 700)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] The combo toggle button background color when the combo is focused in material border variant.
 /// @prop {Color} clear-button-background [transparent] - The combo clear button background color.
 /// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [contrast-color: ('gray', 100)] - The combo toggle clear foreground color.
@@ -28,6 +29,12 @@
 /// @prop {Map} case-icon-color [color: ('gray', 400)] - The case sensitive icon color in inactive state for combo search input
 /// @prop {Map} case-icon-color--active [color: ('primary', 500)] - The case sensitive icon color in active state for combo search input
 $light-combo: (
+    toggle-button-background-focus--border: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
     case-icon-color: (
         color: (
             'gray',
@@ -103,7 +110,7 @@ $light-combo: (
     toggle-button-background-disabled: (
         color: (
             'gray',
-            300,
+            100,
         ),
     ),
     toggle-button-foreground-disabled: (
@@ -183,7 +190,6 @@ $fluent-combo: extend(
 /// @prop {Map} clear-button-background-focus [color: ('gray', 300)] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [color: ('gray', 800)] - The combo toggle clear foreground color.
 /// @prop {Map} clear-button-foreground-focus [color: ('gray', 800)] - The combo clear button foreground color when the combo is focused.
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300)] - The combo toggle button background color when the combo is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
 /// @requires {Map} $light-combo
@@ -255,12 +261,6 @@ $bootstrap-combo: extend(
                 300,
             ),
         ),
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -275,9 +275,9 @@ $bootstrap-combo: extend(
 /// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [color: ('gray', 600)] - The combo toggle clear foreground color.
 /// @prop {Map} clear-button-foreground-focus [color: ('gray', 600)] - The combo clear button foreground color when the combo is focused.
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 300)] - The combo toggle button foreground color when the combo is disabled.
-/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
+/// @prop {Color} toggle-button-background-disabled [transparent] - The combo toggle button background color when the combo is disabled.
+/// @prop {Color} toggle-button-background-focus [transparent] - The combo toggle button background color when the combo is focused.
 /// @requires {Map} $light-combo
 $indigo-combo: extend(
     $light-combo,
@@ -301,17 +301,12 @@ $indigo-combo: extend(
                 600,
             ),
         ),
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
                 300,
             ),
         ),
+        toggle-button-background-disabled: transparent,
     )
 );

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

@@ -44,7 +44,9 @@
 /// @prop {Map} cell-selected-background [color: ('gray', 200)] - The selected cell background color.
 /// @prop {Map} cell-selected-text-color [contrast-color: ('gray', 200)] - The selected cell text color.
 /// @prop {Color} cell-editing-background [color: ('gray', 50)] - The editing background color of a cell.
-/// @prop {Map} edit-mode-color [color: ('secondary', 500)] - The text color in edit mode.
+/// @prop {Map} cell-editing-foreground [color: ('gray', 900)] - The cell text color in edit mode
+/// @prop {Map} cell-editing-focus-foreground [color: ('gray', 900)] - The cell text color in edit mode on focus.
+/// @prop {Map} edit-mode-color [color: ('secondary', 500)] - The color applied around the row/cell when in editing mode.
 /// @prop {Map} edited-row-indicator [color: ('gray', 400)] - The indicator's color of edited row.
 /// @prop {String} cell-new-color [inherit] - The text color of a new, unedited cell. Used when adding new row in a grid.
 /// @prop {Map} cell-edited-value-color [color: ('gray', 600)] - The color of cell edited value.
@@ -391,6 +393,20 @@ $light-grid: extend(
             ),
         ),
 
+        cell-editing-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        cell-editing-focus-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
         edit-mode-color: (
             color: (
                 'secondary',

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

@@ -15,10 +15,17 @@
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The select toggle button background color when the select is focused.
 /// @prop {Map} toggle-button-foreground [color: ('gray', 700)] - The select toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The select toggle button foreground color when the select is focused.
-/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The select toggle button foreground color when the select is focused.
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300] - The select toggle button background color when the select is disabled.
+/// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The select toggle button foreground color when the select is filled.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The select toggle button foreground color when the select is disabled.
+/// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] The select toggle button background color when the select is focused in material border variant.
 $light-select: (
+    toggle-button-background-focus--border: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
     toggle-button-background: (
         color: (
             'gray',
@@ -53,7 +60,7 @@ $light-select: (
     toggle-button-background-disabled: (
         color: (
             'gray',
-            300,
+            100,
         ),
     ),
     toggle-button-foreground-disabled: (
@@ -69,7 +76,6 @@ $light-select: (
 /// @prop {Map} toggle-button-background [color: ('gray', 100)] - The select toggle button background color.
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 100)] - The select toggle button background color when the select is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 700)] - The select toggle button foreground color when the select is focused.
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
 /// @requires {Map} $light-select
 $fluent-select: extend(
@@ -93,12 +99,6 @@ $fluent-select: extend(
                 700,
             ),
         ),
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -110,7 +110,6 @@ $fluent-select: extend(
 
 /// Generates a bootstrap select schema.
 /// @type {Map}
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
 /// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The select toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
@@ -119,12 +118,6 @@ $fluent-select: extend(
 $bootstrap-select: extend(
     $light-select,
     (
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -154,18 +147,13 @@ $bootstrap-select: extend(
 
 /// Generates an indigo select schema.
 /// @type {Map}
-/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
+/// @prop {Color} toggle-button-background-disabled [transparent] - The select toggle button background color when the select is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 300)] - The select toggle button foreground color when the select is disabled.
 /// @requires {Map} $light-select
 $indigo-select: extend(
     $light-select,
     (
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
+        toggle-button-background-disabled: transparent,
         toggle-button-foreground-disabled: (
             color: (
                 'gray',