fix: incorrect tokens used across multiple input components (#33927)

mainframev · web-flow · commit 17389d335ea4 · 2025-03-11T19:08:17.000+01:00
diff --git a/change/@fluentui-react-combobox-106e472a-1ade-4d1f-bc51-5eddd30b8ecf.json b/change/@fluentui-react-combobox-106e472a-1ade-4d1f-bc51-5eddd30b8ecf.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use correct tokens for hover, active and focus states",
+  "packageName": "@fluentui/react-combobox",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tag-picker-ea411c94-0c82-44e5-87ff-5d073f48599d.json b/change/@fluentui-react-tag-picker-ea411c94-0c82-44e5-87ff-5d073f48599d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use correct tokens for hover, active and focus states",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-textarea-6305fa37-552a-4cf8-8dd6-92f2dbee276c.json b/change/@fluentui-react-textarea-6305fa37-552a-4cf8-8dd6-92f2dbee276c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use correct tokens for hover, active and focus states",
+  "packageName": "@fluentui/react-textarea",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts
@@ -119,16 +119,20 @@ const useStyles = makeStyles({
     border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
   },
-
   outlineInteractive: {
     '&:hover': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
-      borderBottomColor: tokens.colorNeutralStrokeAccessible,
+      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,
     },
 
     '&:active': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
-      borderBottomColor: tokens.colorNeutralStrokeAccessible,
+      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
+    },
+
+    '&:focus-within': {
+      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
     },
   },
   underline: {
diff --git a/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts
@@ -149,12 +149,17 @@ const useStyles = makeStyles({
   outlineInteractive: {
     '&:hover': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
-      borderBottomColor: tokens.colorNeutralStrokeAccessible,
+      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,
     },
 
     '&:active': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
-      borderBottomColor: tokens.colorNeutralStrokeAccessible,
+      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
+    },
+
+    '&:focus-within': {
+      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
     },
   },
   underline: {
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts
@@ -110,12 +110,17 @@ const useStyles = makeStyles({
   outlineInteractive: {
     '&:hover': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
-      borderBottomColor: tokens.colorNeutralStrokeAccessible,
+      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,
     },
 
     '&:active': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
-      borderBottomColor: tokens.colorNeutralStrokeAccessible,
+      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
+    },
+
+    '&:focus-within': {
+      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,
     },
   },
   underline: {
diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts b/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts
@@ -132,7 +132,7 @@ const useRootStyles = makeStyles({
     },
 
     ':focus-within': {
-      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+      border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,
       borderBottomColor: tokens.colorCompoundBrandStroke,
     },
   },
