fix(react-button): make SplitButton divider match Figma spec (#33726)

Author: mainframev

change/@fluentui-react-button-82ba9b76-3c25-43aa-a6d1-32edfcf774ae.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: make SplitButton divider transparent for subtle and transparent variants",
+  "packageName": "@fluentui/react-button",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts

@@ -92,35 +92,35 @@ const useRootStyles = makeStyles({
   },
   subtle: {
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
-      borderRightColor: tokens.colorNeutralStroke1,
+      borderRightColor: tokens.colorTransparentBackground,
     },
 
     ':hover': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Hover,
+        borderRightColor: tokens.colorTransparentBackgroundHover,
       },
     },
 
     ':hover:active': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Pressed,
+        borderRightColor: tokens.colorTransparentBackgroundPressed,
       },
     },
   },
   transparent: {
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
-      borderRightColor: tokens.colorNeutralStroke1,
+      borderRightColor: tokens.colorTransparentBackground,
     },
 
     ':hover': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Hover,
+        borderRightColor: tokens.colorTransparentBackgroundHover,
       },
     },
 
     ':hover:active': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Pressed,
+        borderRightColor: tokens.colorTransparentBackgroundPressed,
       },
     },
   },