feat(Input): box-shadow active state

livechat · Nov 28, 2024 · f51aab0 · f51aab0
1 parent ff3b7a8
commit f51aab0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/react-components/src/components/Input/Input.module.scss b/packages/react-components/src/components/Input/Input.module.scss
@@ -42,6 +42,11 @@ $base-class: 'input';
     &:hover {
       border-color: var(--input-promo-border-hover);
     }
+
+    &.#{$base-class}--focused,
+    &.#{$base-class}--focused:hover {
+      box-shadow: var(--state-active-field);
+    }
   }
 
   &--focused,

diff --git a/packages/react-components/src/foundations/shadow.css b/packages/react-components/src/foundations/shadow.css
@@ -24,7 +24,7 @@
   --shadow-fixed-top: 0 -2px 10px rgb(19 19 23 / 18%);
   --shadow-fixed-bottom: 0 2px 10px rgb(19 19 23 / 18%);
   --focus-ring-inner: inset 0 0 1px 2px var(--action-primary-default);
-  --state-active-field: 0 0 0 4px rgb(var(--action-primary-default) / 15%);
+  --state-active-field: 0 0 0 4px rgb(0 89 225 / 15%);
 }
 
 .lc-dark-theme {
@@ -55,5 +55,5 @@
   --shadow-fixed-top: 0 -2px 10px rgb(19 19 23 / 18%);
   --shadow-fixed-bottom: 0 2px 10px rgb(19 19 23 / 18%);
   --focus-ring-inner: inset 0 0 1px 2px var(--action-primary-default);
-  --state-active-field: 0 0 0 4px rgb(var(--action-primary-default) / 25%);
+  --state-active-field: 0 0 0 4px rgb(104 175 255 / 25%);
 }