fix: align input ring color with figma (#3170)

* fix: align input ring color with figma * chore: changeset
vuestorefront · May 24, 2024 · 55a0d36 · 55a0d36
1 parent 9b4389a
commit 55a0d36
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/strong-adults-melt.md b/.changeset/strong-adults-melt.md
@@ -0,0 +1,6 @@
+---
+"@storefront-ui/react": patch
+"@storefront-ui/vue": patch
+---
+
+Aligned ring color of Input component with Figma
diff --git a/packages/sfui/frameworks/react/components/SfInput/SfInput.tsx b/packages/sfui/frameworks/react/components/SfInput/SfInput.tsx
@@ -23,7 +23,7 @@ const SfInput = polymorphicForwardRef<typeof defaultWrapperTag, SfInputProps>(
           'flex items-center gap-2 px-4 bg-white rounded-md ring-1 text-neutral-500 hover:ring-primary-700 focus-within:caret-primary-700 active:caret-primary-700 active:ring-primary-700 active:ring-2 focus-within:ring-primary-700 focus-within:ring-2',
           {
             'ring-2 ring-negative-700': invalid,
-            'ring-1 ring-neutral-200': !invalid,
+            'ring-1 ring-neutral-300': !invalid,
             'focus-within:outline focus-within:outline-offset': isFocusVisible,
           },
           sizeClasses[size],

diff --git a/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue b/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
@@ -64,7 +64,7 @@ const inputValue = computed({
       'flex items-center gap-2 px-4 bg-white rounded-md ring-1 text-neutral-500 hover:ring-primary-700 focus-within:caret-primary-700 active:caret-primary-700 active:ring-primary-700 active:ring-2 focus-within:ring-primary-700 focus-within:ring-2',
       {
         'ring-2 ring-negative-700': invalid,
-        'ring-1 ring-neutral-200': !invalid,
+        'ring-1 ring-neutral-300': !invalid,
         'focus-within:outline focus-within:outline-offset': isFocusVisible,
       },
       getSizeClasses[size],