fix(inputs): wrong colors in material theme (#386)

IgniteUI · Feb 27, 2025 · 9cce63d · 9cce63d
1 parent 12e4a71
commit 9cce63d
Show file tree

Hide file tree

Showing 7 changed files with 398 additions and 297 deletions.
diff --git a/sass/themes/schemas/components/dark/_combo.scss b/sass/themes/schemas/components/dark/_combo.scss
@@ -12,8 +12,33 @@
 
 /// Generates a dark material combo schema.
 /// @type {Map}
+/// @prop {Map} toggle-button-background [color: ('gray', 100)] - The combo toggle button background color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 200)] - The combo toggle button background color when the combo is focused.
+/// @prop {Map} toggle-button-background-focus--border [color: ('gray', 100)] The combo toggle button background color when the combo is focused in border and line variants.
 /// @requires $material-combo
-$dark-material-combo: $material-combo;
+$dark-material-combo: extend(
+    $material-combo,
+    (
+        toggle-button-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-background-focus: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        toggle-button-background-focus--border: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent combo schema.
 /// @type {Map}

diff --git a/sass/themes/schemas/components/dark/_input-group.scss b/sass/themes/schemas/components/dark/_input-group.scss
@@ -11,16 +11,33 @@
 
 /// Generates a dark material input-group schema.
 /// @type {Map}
-/// @prop {Map} box-background-focus [color: ('gray', 100)] - The background color of an input group of type box on focus.
+/// @prop {Map} box-background [color: ('gray', 200, .38)] - The background color of an input group of type box.
+/// @prop {Map} box-background-hover [color: ('gray', 200, .38)] - The background color of an input group of type box on hover.
+/// @prop {Map} box-background-focus [color: ('gray', 300, .38)] - The background color of an input group of type box on focus.
 /// @prop {Map} hover-bottom-line-color [color: ('gray', 800)] - The bottom line and border colors in the hover state.
 /// @requires $material-input-group
 $dark-material-input-group: extend(
     $material-input-group,
     (
+        box-background: (
+            color: (
+                'gray',
+                200,
+                0.38,
+            ),
+        ),
+        box-background-hover: (
+            color: (
+                'gray',
+                200,
+                0.38,
+            ),
+        ),
         box-background-focus: (
             color: (
                 'gray',
-                100,
+                300,
+                0.38,
             ),
         ),
         hover-bottom-line-color: (

diff --git a/sass/themes/schemas/components/dark/_select.scss b/sass/themes/schemas/components/dark/_select.scss
@@ -12,8 +12,33 @@
 
 /// Generates a dark material select schema.
 /// @type {Map}
+/// @prop {Map} toggle-button-background [color: ('gray', 100)] - The select toggle button background color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 200)] - The select toggle button background color when the select is focused.
+/// @prop {Map} toggle-button-background-focus--border [color: ('gray', 100)] - The select toggle button background color when the select is focused in material border and line variants.
 /// @requires $material-select
-$dark-material-select: $material-select;
+$dark-material-select: extend(
+    $material-select,
+    (
+        toggle-button-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        toggle-button-background-focus: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        toggle-button-background-focus--border: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent select schema.
 /// @type {Map}

diff --git a/sass/themes/schemas/components/elevation/_input-group.scss b/sass/themes/schemas/components/elevation/_input-group.scss
@@ -9,10 +9,20 @@
 /// @type Map
 /// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input.
 /// @prop {Number} search-hover-elevation [2] - The elevation level, between 0-24, to be used for the hover state of the search input.
-/// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
+/// @prop {Number} search-disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state of the search input.
 $default-elevation-input-group: (
     search-resting-elevation: 1,
     search-hover-elevation: 2,
+    search-disabled-elevation: 1,
+);
+
+/// @type Map
+/// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input.
+/// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input.
+/// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
+$bootstrap-elevation-input-group: (
+    search-resting-elevation: 0,
+    search-hover-elevation: 0,
     search-disabled-elevation: 0,
 );
 

diff --git a/sass/themes/schemas/components/light/_combo.scss b/sass/themes/schemas/components/light/_combo.scss
@@ -17,14 +17,14 @@
 /// @prop {Map} toggle-button-background [color: ('gray', 300)] - The combo toggle button background color.
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
 /// @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-focus [color: ('gray', 900)] - 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', 100)] - 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--border [color: ('gray', 300)] The combo toggle button background color when the combo is focused in border and line variants.
 /// @prop {Color} clear-button-background [transparent] - The combo clear button background color.
-/// @prop {Map} clear-button-foreground [contrast-color: ('gray', 100)] - The combo toggle clear foreground color.
-/// @prop {Map} clear-button-foreground-focus [contrast-color: ('gray', 100)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} clear-button-foreground [color: ('gray', 900)] - The combo toggle clear foreground color.
+/// @prop {Map} clear-button-foreground-focus [color: ('gray', 900)] - The combo clear button foreground color when the combo is focused.
 /// @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
 /// @prop {Number} default-size [2] - The default size used for the combo component.
@@ -83,7 +83,7 @@ $light-combo: (
     toggle-button-foreground-focus: (
         color: (
             'gray',
-            700,
+            900,
         ),
     ),
     toggle-button-foreground-filled: (
@@ -94,15 +94,15 @@ $light-combo: (
     ),
     clear-button-background: transparent,
     clear-button-foreground: (
-        contrast-color: (
+        color: (
             'gray',
-            100,
+            900,
         ),
     ),
     clear-button-foreground-focus: (
-        contrast-color: (
+        color: (
             'gray',
-            100,
+            900,
         ),
     ),
     toggle-button-background-disabled: (
@@ -122,7 +122,7 @@ $light-combo: (
 
 /// Generates a material combo schema.
 /// @type {Map}
-/// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The combo toggle button background color when the combo is focused.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 400)] - The combo toggle button background color when the combo is focused.
 /// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The combo toggle button foreground color when the combo is disabled.
 /// @requires {Map} $light-combo
@@ -133,7 +133,6 @@ $material-combo: extend(
             color: (
                 'gray',
                 400,
-                0.3,
             ),
         ),
         clear-button-background-focus: transparent,
@@ -152,6 +151,7 @@ $material-combo: extend(
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 100)] - The combo toggle button background color when the combo is focused.
 /// @prop {Color} clear-button-background [color: ('gray', 100)] - The combo clear button background color.
 /// @prop {Color} clear-button-background-focus [color: ('gray', 100)] - The combo clear button background color when the combo is focused.
+/// @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', 700)] - The combo toggle 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.
 /// @requires {Map} $light-combo
@@ -170,6 +170,12 @@ $fluent-combo: extend(
                 100,
             ),
         ),
+        toggle-button-foreground-focus: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
         toggle-button-foreground-filled: (
             color: (
                 'gray',
@@ -200,6 +206,7 @@ $fluent-combo: extend(
 /// Generates a bootstrap combo schema.
 /// @type {Map}
 /// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The combo toggle button foreground color.
+/// @prop {Map} toggle-button-foreground-focus [color: ('gray', 800)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 800)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} empty-list-background [color: ('surface')] - The combo list background color.
 /// @prop {Map} search-separator-border-color [color: ('gray', 400)] - The combo search box separator color.