fix(core/input): update autofill styling (#1237)

siemens · Apr 24, 2024 · 7072524 · 7072524
1 parent 5fba894
commit 7072524
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/.changeset/tiny-ads-fetch.md b/.changeset/tiny-ads-fetch.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/input): update autofill styling
diff --git a/packages/core/scss/components/form/_input.scss b/packages/core/scss/components/form/_input.scss
@@ -10,8 +10,7 @@
 @import 'mixins/fonts';
 
 @mixin element-input($feature-read-only: true) {
-  &,
-  &:-webkit-autofill {
+  & {
     @include typography-body;
     min-height: 2rem;
     width: 100%;
@@ -25,10 +24,14 @@
     box-shadow: var(--theme-input--box-shadow);
   }
 
-  &:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
-    -webkit-text-fill-color: var(--theme-input--color) !important;
-    border-color: var(--theme-input--border-color) !important;
+  &:-webkit-autofill,
+  &:autofill {
+    -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+    -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+    background-color: var(--theme-input--background--autofill) !important;
+    border: var(--theme-input--border-thickness, 1px) solid
+      var(--theme-input--border-color--autofill) !important;
+    color: var(--theme-input--color--autofill) !important;
   }
 
   &::placeholder {
@@ -37,15 +40,15 @@
 
   &.hover,
   &:hover {
-    border-color: var(--theme-input--border-color--hover);
+    border-color: var(--theme-input--border-color--hover) !important;
     background-color: var(--theme-input--background--hover);
   }
 
   &.focus,
   &:focus {
     outline: 1px solid var(--theme-color-focus-bdr);
     outline-offset: var(--theme-input--focus--outline-offset);
-    border-color: var(--theme-input--border-color--focus);
+    border-color: var(--theme-input--border-color--focus) !important;
   }
 
   @if $feature-read-only == true {