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

* fix: align input ring color with figma

* chore: changeset

Author: jagoral

.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

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],

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],