From 21439c251a9153b2d6d2949a0eb700a6a7920355 Mon Sep 17 00:00:00 2001
From: KHMakoto <humberto_makoto@hotmail.com>
Date: Thu, 8 Sep 2022 13:49:02 -0700
Subject: [PATCH 1/7] chore: Cleaning up tokens in Button components so they
 better adhere to the design spec.

---
 .../src/components/Button/useButtonStyles.ts  | 68 ++++++++++-------
 .../CompoundButton/useCompoundButtonStyles.ts |  2 +-
 .../SplitButton/useSplitButtonStyles.ts       | 14 ++--
 .../ToggleButton/useToggleButtonStyles.ts     | 76 ++++++++++++-------
 4 files changed, 96 insertions(+), 64 deletions(-)

diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
index 59a2e1ae3a01a..391c6c5daf4be 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -103,18 +103,18 @@ const useRootStyles = makeStyles({
   },
   primary: {
     backgroundColor: tokens.colorBrandBackground,
-    ...shorthands.borderColor('transparent'),
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
     color: tokens.colorNeutralForegroundOnBrand,
 
     ':hover': {
       backgroundColor: tokens.colorBrandBackgroundHover,
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
       color: tokens.colorNeutralForegroundOnBrand,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorBrandBackgroundPressed,
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
       color: tokens.colorNeutralForegroundOnBrand,
     },
   },
@@ -123,35 +123,35 @@ const useRootStyles = makeStyles({
   },
   subtle: {
     backgroundColor: tokens.colorSubtleBackground,
-    ...shorthands.borderColor('transparent'),
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
     color: tokens.colorNeutralForeground2,
 
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandHover,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      color: tokens.colorNeutralForeground2,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandPressed,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      color: tokens.colorNeutralForeground2,
     },
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderColor('transparent'),
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
     color: tokens.colorNeutralForeground2,
 
     ':hover': {
       backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
       color: tokens.colorNeutralForeground2BrandHover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorTransparentBackgroundPressed,
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
       color: tokens.colorNeutralForeground2BrandPressed,
     },
   },
@@ -278,53 +278,53 @@ const useRootDisabledStyles = makeStyles({
     },
   },
   primary: {
-    ...shorthands.borderColor('transparent'),
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
 
     ':hover': {
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
 
     ':hover:active': {
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
   },
   secondary: {
     /* The secondary styles are exactly the same as the base styles. */
   },
   subtle: {
-    backgroundColor: 'transparent',
-    ...shorthands.borderColor('transparent'),
+    backgroundColor: tokens.colorTransparentBackground,
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
 
     ':hover': {
-      backgroundColor: 'transparent',
-      ...shorthands.borderColor('transparent'),
+      backgroundColor: tokens.colorTransparentBackgroundHover,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
 
     ':hover:active': {
-      backgroundColor: 'transparent',
-      ...shorthands.borderColor('transparent'),
+      backgroundColor: tokens.colorTransparentBackgroundPressed,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
   },
   transparent: {
-    backgroundColor: 'transparent',
-    ...shorthands.borderColor('transparent'),
+    backgroundColor: tokens.colorTransparentBackground,
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
 
     ':hover': {
-      backgroundColor: 'transparent',
-      ...shorthands.borderColor('transparent'),
+      backgroundColor: tokens.colorTransparentBackgroundHover,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
 
     ':hover:active': {
-      backgroundColor: 'transparent',
-      ...shorthands.borderColor('transparent'),
+      backgroundColor: tokens.colorTransparentBackgroundPressed,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
   },
 });
 
 const useRootFocusStyles = makeStyles({
   base: createCustomFocusIndicatorStyle({
-    ...shorthands.borderColor('transparent'),
-    outlineColor: 'transparent',
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    outlineColor: tokens.colorTransparentStroke,
     outlineWidth: tokens.strokeWidthThick,
     outlineStyle: 'solid',
     boxShadow: `
@@ -416,6 +416,17 @@ const useIconStyles = makeStyles({
     [iconSpacingVar]: tokens.spacingHorizontalSNudge,
   },
 
+  // Appearance variations
+  subtle: {
+    ':hover': {
+      color: tokens.colorNeutralForeground2BrandHover,
+    },
+
+    ':hover:active': {
+      color: tokens.colorNeutralForeground2BrandPressed,
+    },
+  },
+
   // Icon position variations
   before: {
     marginRight: `var(${iconSpacingVar})`,
@@ -467,6 +478,7 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
       buttonClassNames.icon,
       iconStyles.base,
       state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],
+      appearance === 'subtle' && iconStyles.subtle,
       iconStyles[size],
       state.icon.className,
     );
diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
index c95d90d00cbc5..421f0c06c4dd3 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
@@ -87,7 +87,7 @@ const useRootStyles = makeStyles({
 
     ':hover:active': {
       [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForeground2BrandPressed,
+        color: tokens.colorNeutralForeground2BrandHover,
       },
     },
   },
diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
index 28451982af625..f0e51476fa0b5 100644
--- a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
@@ -50,18 +50,18 @@ const useRootStyles = makeStyles({
   },
   primary: {
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
-      borderRightColor: tokens.colorNeutralForegroundInverted,
+      borderRightColor: tokens.colorNeutralForegroundOnBrand,
     },
 
     ':hover': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralForegroundInverted,
+        borderRightColor: tokens.colorNeutralForegroundOnBrand,
       },
     },
 
     ':hover:active': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralForegroundInverted,
+        borderRightColor: tokens.colorNeutralForegroundOnBrand,
       },
     },
   },
@@ -70,7 +70,7 @@ const useRootStyles = makeStyles({
   },
   subtle: {
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
-      borderRightColor: tokens.colorNeutralStroke1Hover,
+      borderRightColor: tokens.colorNeutralStroke1,
     },
 
     ':hover': {
@@ -81,13 +81,13 @@ const useRootStyles = makeStyles({
 
     ':hover:active': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Hover,
+        borderRightColor: tokens.colorNeutralStroke1Pressed,
       },
     },
   },
   transparent: {
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
-      borderRightColor: tokens.colorNeutralStroke1Hover,
+      borderRightColor: tokens.colorNeutralStroke1,
     },
 
     ':hover': {
@@ -98,7 +98,7 @@ const useRootStyles = makeStyles({
 
     ':hover:active': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Hover,
+        borderRightColor: tokens.colorNeutralStroke1Pressed,
       },
     },
   },
diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index d0b2b77b39e78..c2f7f0d6efc32 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -90,18 +90,18 @@ const useCheckedStyles = makeStyles({
   },
   primary: {
     backgroundColor: tokens.colorBrandBackgroundSelected,
-    ...shorthands.borderColor('transparent'),
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
     color: tokens.colorNeutralForegroundOnBrand,
 
     ':hover': {
       backgroundColor: tokens.colorBrandBackgroundHover,
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
       color: tokens.colorNeutralForegroundOnBrand,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorBrandBackgroundPressed,
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
       color: tokens.colorNeutralForegroundOnBrand,
     },
   },
@@ -110,35 +110,35 @@ const useCheckedStyles = makeStyles({
   },
   subtle: {
     backgroundColor: tokens.colorSubtleBackgroundSelected,
-    ...shorthands.borderColor('transparent'),
-    color: tokens.colorNeutralForeground2BrandSelected,
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    color: tokens.colorNeutralForeground2,
 
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandHover,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      color: tokens.colorNeutralForeground2,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
-      ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandPressed,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      color: tokens.colorNeutralForeground2,
     },
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackgroundSelected,
-    ...shorthands.borderColor('transparent'),
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
     color: tokens.colorNeutralForeground2BrandSelected,
 
     ':hover': {
       backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
       color: tokens.colorNeutralForeground2BrandHover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorTransparentBackgroundPressed,
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
       color: tokens.colorNeutralForeground2BrandPressed,
     },
   },
@@ -169,45 +169,60 @@ const useDisabledStyles = makeStyles({
     /* No styles */
   },
   primary: {
-    ...shorthands.borderColor('transparent'),
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
 
     ':hover': {
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
 
     ':hover:active': {
-      ...shorthands.borderColor('transparent'),
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
   },
   secondary: {
     /* The secondary styles are exactly the same as the base styles. */
   },
   subtle: {
-    backgroundColor: 'transparent',
-    ...shorthands.borderColor('transparent'),
+    backgroundColor: tokens.colorTransparentBackground,
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
 
     ':hover': {
-      backgroundColor: 'transparent',
-      ...shorthands.borderColor('transparent'),
+      backgroundColor: tokens.colorTransparentBackgroundHover,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
 
     ':hover:active': {
-      backgroundColor: 'transparent',
-      ...shorthands.borderColor('transparent'),
+      backgroundColor: tokens.colorTransparentBackgroundPressed,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
   },
   transparent: {
-    backgroundColor: 'transparent',
-    ...shorthands.borderColor('transparent'),
+    backgroundColor: tokens.colorTransparentBackground,
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
 
     ':hover': {
-      backgroundColor: 'transparent',
-      ...shorthands.borderColor('transparent'),
+      backgroundColor: tokens.colorTransparentBackgroundHover,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
     },
 
     ':hover:active': {
-      backgroundColor: 'transparent',
-      ...shorthands.borderColor('transparent'),
+      backgroundColor: tokens.colorTransparentBackgroundPressed,
+      ...shorthands.borderColor(tokens.colorTransparentStroke),
+    },
+  },
+});
+
+const useIconStyles = makeStyles({
+  // Appearance variations
+  subtle: {
+    color: tokens.colorNeutralForeground2BrandSelected,
+
+    ':hover': {
+      color: tokens.colorNeutralForeground2BrandHover,
+    },
+
+    ':hover:active': {
+      color: tokens.colorNeutralForeground2BrandPressed,
     },
   },
 });
@@ -215,6 +230,7 @@ const useDisabledStyles = makeStyles({
 export const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {
   const checkedStyles = useCheckedStyles();
   const disabledStyles = useDisabledStyles();
+  const iconStyles = useIconStyles();
 
   const { appearance, checked, disabled, disabledFocusable } = state;
 
@@ -235,7 +251,11 @@ export const useToggleButtonStyles_unstable = (state: ToggleButtonState): Toggle
   );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(toggleButtonClassNames.icon, state.icon.className);
+    state.icon.className = mergeClasses(
+      toggleButtonClassNames.icon,
+      appearance === 'subtle' && iconStyles.subtle,
+      state.icon.className,
+    );
   }
 
   useButtonStyles_unstable(state);

From 7980188aea72450d3c562b5f008cf47e45e9a04d Mon Sep 17 00:00:00 2001
From: KHMakoto <humberto_makoto@hotmail.com>
Date: Thu, 8 Sep 2022 15:13:58 -0700
Subject: [PATCH 2/7] Adding change file.

---
 ...-react-button-2bff9178-dae7-48c6-9b2e-4e5effb0d484.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-button-2bff9178-dae7-48c6-9b2e-4e5effb0d484.json

diff --git a/change/@fluentui-react-button-2bff9178-dae7-48c6-9b2e-4e5effb0d484.json b/change/@fluentui-react-button-2bff9178-dae7-48c6-9b2e-4e5effb0d484.json
new file mode 100644
index 0000000000000..2c4a43d08e7a5
--- /dev/null
+++ b/change/@fluentui-react-button-2bff9178-dae7-48c6-9b2e-4e5effb0d484.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Cleaning up tokens in Button components so they better adhere to the design spec.",
+  "packageName": "@fluentui/react-button",
+  "email": "humberto_makoto@hotmail.com",
+  "dependentChangeType": "patch"
+}

From 126356ec182dabe9bb26a4847929cd994490dab1 Mon Sep 17 00:00:00 2001
From: KHMakoto <humberto_makoto@hotmail.com>
Date: Mon, 12 Sep 2022 13:06:09 -0700
Subject: [PATCH 3/7] Applying latest changes from design docs.

---
 .../react-button/src/components/Button/useButtonStyles.ts   | 4 ++--
 .../src/components/ToggleButton/useToggleButtonStyles.ts    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
index 391c6c5daf4be..bff6168aba579 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -129,13 +129,13 @@ const useRootStyles = makeStyles({
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
       ...shorthands.borderColor(tokens.colorTransparentStroke),
-      color: tokens.colorNeutralForeground2,
+      color: tokens.colorNeutralForeground2Hover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
       ...shorthands.borderColor(tokens.colorTransparentStroke),
-      color: tokens.colorNeutralForeground2,
+      color: tokens.colorNeutralForeground2Pressed,
     },
   },
   transparent: {
diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index c2f7f0d6efc32..c6ab3328abfb8 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -111,18 +111,18 @@ const useCheckedStyles = makeStyles({
   subtle: {
     backgroundColor: tokens.colorSubtleBackgroundSelected,
     ...shorthands.borderColor(tokens.colorTransparentStroke),
-    color: tokens.colorNeutralForeground2,
+    color: tokens.colorNeutralForeground2Selected,
 
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
       ...shorthands.borderColor(tokens.colorTransparentStroke),
-      color: tokens.colorNeutralForeground2,
+      color: tokens.colorNeutralForeground2Hover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
       ...shorthands.borderColor(tokens.colorTransparentStroke),
-      color: tokens.colorNeutralForeground2,
+      color: tokens.colorNeutralForeground2Pressed,
     },
   },
   transparent: {

From 98a1afbf596c8ccfe03013d309ee792c91a61c87 Mon Sep 17 00:00:00 2001
From: KHMakoto <humberto_makoto@hotmail.com>
Date: Mon, 12 Sep 2022 14:17:40 -0700
Subject: [PATCH 4/7] Fixing HC issues.

---
 .../src/components/Button/useButtonStyles.ts  | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
index bff6168aba579..e723863cf12f1 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -103,18 +103,18 @@ const useRootStyles = makeStyles({
   },
   primary: {
     backgroundColor: tokens.colorBrandBackground,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForegroundOnBrand,
 
     ':hover': {
       backgroundColor: tokens.colorBrandBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForegroundOnBrand,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorBrandBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForegroundOnBrand,
     },
   },
@@ -123,35 +123,35 @@ const useRootStyles = makeStyles({
   },
   subtle: {
     backgroundColor: tokens.colorSubtleBackground,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForeground2,
 
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2Hover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2Pressed,
     },
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForeground2,
 
     ':hover': {
       backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2BrandHover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorTransparentBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2BrandPressed,
     },
   },
@@ -278,14 +278,14 @@ const useRootDisabledStyles = makeStyles({
     },
   },
   primary: {
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
 
     ':hover': {
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
   },
   secondary: {
@@ -293,30 +293,30 @@ const useRootDisabledStyles = makeStyles({
   },
   subtle: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
 
     ':hover': {
       backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorTransparentBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
 
     ':hover': {
       backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorTransparentBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
   },
 });

From f9f0e6f38b819f0cacd16ee5535cd25684ee1cb8 Mon Sep 17 00:00:00 2001
From: KHMakoto <humberto_makoto@hotmail.com>
Date: Mon, 12 Sep 2022 14:31:32 -0700
Subject: [PATCH 5/7] Fixing HC issues.

---
 .../ToggleButton/useToggleButtonStyles.ts     | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index c6ab3328abfb8..f127fb1bf010e 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -90,18 +90,18 @@ const useCheckedStyles = makeStyles({
   },
   primary: {
     backgroundColor: tokens.colorBrandBackgroundSelected,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForegroundOnBrand,
 
     ':hover': {
       backgroundColor: tokens.colorBrandBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForegroundOnBrand,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorBrandBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForegroundOnBrand,
     },
   },
@@ -110,35 +110,35 @@ const useCheckedStyles = makeStyles({
   },
   subtle: {
     backgroundColor: tokens.colorSubtleBackgroundSelected,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForeground2Selected,
 
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2Hover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2Pressed,
     },
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackgroundSelected,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
     color: tokens.colorNeutralForeground2BrandSelected,
 
     ':hover': {
       backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2BrandHover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorTransparentBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2BrandPressed,
     },
   },
@@ -169,14 +169,14 @@ const useDisabledStyles = makeStyles({
     /* No styles */
   },
   primary: {
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
 
     ':hover': {
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
   },
   secondary: {
@@ -184,30 +184,30 @@ const useDisabledStyles = makeStyles({
   },
   subtle: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
 
     ':hover': {
       backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorTransparentBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderColor('transparent'),
 
     ':hover': {
       backgroundColor: tokens.colorTransparentBackgroundHover,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorTransparentBackgroundPressed,
-      ...shorthands.borderColor(tokens.colorTransparentStroke),
+      ...shorthands.borderColor('transparent'),
     },
   },
 });

From 41bbb00936802088b38075838528dea07d5161ff Mon Sep 17 00:00:00 2001
From: KHMakoto <humberto_makoto@hotmail.com>
Date: Mon, 12 Sep 2022 15:01:03 -0700
Subject: [PATCH 6/7] Fixing HC issues.

---
 .../src/components/Button/useButtonStyles.ts         | 12 ++++++------
 .../CompoundButton/useCompoundButtonStyles.ts        |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
index e723863cf12f1..9c6b4bea2c82c 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -270,11 +270,11 @@ const useRootDisabledStyles = makeStyles({
     backgroundColor: tokens.colorTransparentBackground,
 
     ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
+      backgroundColor: tokens.colorTransparentBackground,
     },
 
     ':hover:active': {
-      backgroundColor: tokens.colorTransparentBackgroundPressed,
+      backgroundColor: tokens.colorTransparentBackground,
     },
   },
   primary: {
@@ -296,12 +296,12 @@ const useRootDisabledStyles = makeStyles({
     ...shorthands.borderColor('transparent'),
 
     ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
+      backgroundColor: tokens.colorTransparentBackground,
       ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
-      backgroundColor: tokens.colorTransparentBackgroundPressed,
+      backgroundColor: tokens.colorTransparentBackground,
       ...shorthands.borderColor('transparent'),
     },
   },
@@ -310,12 +310,12 @@ const useRootDisabledStyles = makeStyles({
     ...shorthands.borderColor('transparent'),
 
     ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
+      backgroundColor: tokens.colorTransparentBackground,
       ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
-      backgroundColor: tokens.colorTransparentBackgroundPressed,
+      backgroundColor: tokens.colorTransparentBackground,
       ...shorthands.borderColor('transparent'),
     },
   },
diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
index 421f0c06c4dd3..b811f96e9b880 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
@@ -81,13 +81,13 @@ const useRootStyles = makeStyles({
 
     ':hover': {
       [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForeground2BrandHover,
+        color: tokens.colorNeutralForeground2Hover,
       },
     },
 
     ':hover:active': {
       [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForeground2BrandHover,
+        color: tokens.colorNeutralForeground2Pressed,
       },
     },
   },

From c03114699810df56ece63f9d59af185c8601a104 Mon Sep 17 00:00:00 2001
From: KHMakoto <humberto_makoto@hotmail.com>
Date: Mon, 12 Sep 2022 15:04:17 -0700
Subject: [PATCH 7/7] Adding proper icon to Button vr stories.

---
 .../src/stories/Button.stories.tsx            | 86 +++++++++++--------
 1 file changed, 49 insertions(+), 37 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button.stories.tsx
index cbba4b0fd12c9..23c3f2e7077f1 100644
--- a/apps/vr-tests-react-components/src/stories/Button.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button.stories.tsx
@@ -2,8 +2,11 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
 import { Button, CompoundButton, ToggleButton, MenuButton } from '@fluentui/react-button';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { makeStyles } from '@griffel/react';
 
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
 const steps = new Screener.Steps()
   .snapshot('default', { cropTo: '.testWrapper' })
   .hover('#button-id')
@@ -125,19 +128,19 @@ storiesOf('Button Converged', module)
     { includeHighContrast: true, includeDarkMode: true },
   )
   .addStory('Size small', () => (
-    <Button id={buttonId} icon="X" size="small">
+    <Button id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </Button>
   ))
   .addStory('Size large', () => (
-    <Button id={buttonId} icon="X" size="large">
+    <Button id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </Button>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="small">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -145,7 +148,7 @@ storiesOf('Button Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="medium">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -153,7 +156,7 @@ storiesOf('Button Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="large">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -161,7 +164,7 @@ storiesOf('Button Converged', module)
   .addStory(
     'With icon before content',
     () => (
-      <Button id={buttonId} icon="X">
+      <Button id={buttonId} icon={<CalendarMonth />}>
         Hello, world
       </Button>
     ),
@@ -172,14 +175,14 @@ storiesOf('Button Converged', module)
   .addStory(
     'With icon after content',
     () => (
-      <Button id={buttonId} icon="X" iconPosition="after">
+      <Button id={buttonId} icon={<CalendarMonth />} iconPosition="after">
         Hello, world
       </Button>
     ),
     { includeRtl: true },
   )
-  .addStory('Icon only', () => <Button id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <Button id={buttonId} shape="circular" icon="X" />, {
+  .addStory('Icon only', () => <Button id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <Button id={buttonId} shape="circular" icon={<CalendarMonth />} />, {
     includeRtl: true,
   });
 
@@ -210,7 +213,7 @@ storiesOf('CompoundButton Converged', module)
   .addStory(
     'With icon before content',
     () => (
-      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X">
+      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />}>
         Hello, world
       </CompoundButton>
     ),
@@ -219,7 +222,12 @@ storiesOf('CompoundButton Converged', module)
   .addStory(
     'With icon after content',
     () => (
-      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" iconPosition="after">
+      <CompoundButton
+        id={buttonId}
+        secondaryContent="This is some secondary text"
+        icon={<CalendarMonth />}
+        iconPosition="after"
+      >
         Hello, world
       </CompoundButton>
     ),
@@ -279,12 +287,12 @@ storiesOf('CompoundButton Converged', module)
     </CompoundButton>
   ))
   .addStory('Size small', () => (
-    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" size="small">
+    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />} size="small">
       Hello, world
     </CompoundButton>
   ))
   .addStory('Size large', () => (
-    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" size="large">
+    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />} size="large">
       Hello, world
     </CompoundButton>
   ))
@@ -295,7 +303,7 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="small"
       >
         Long text wraps after it hits the max width of the component
@@ -309,7 +317,7 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="medium"
       >
         Long text wraps after it hits the max width of the component
@@ -323,17 +331,21 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="large"
       >
         Long text wraps after it hits the max width of the component
       </CompoundButton>
     );
   })
-  .addStory('Icon only', () => <CompoundButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <CompoundButton id={buttonId} shape="circular" icon="X" />, {
-    includeRtl: true,
-  });
+  .addStory('Icon only', () => <CompoundButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory(
+    'Circular and icon only',
+    () => <CompoundButton id={buttonId} shape="circular" icon={<CalendarMonth />} />,
+    {
+      includeRtl: true,
+    },
+  );
 
 storiesOf('ToggleButton Converged', module)
   .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
@@ -395,19 +407,19 @@ storiesOf('ToggleButton Converged', module)
     </ToggleButton>
   ))
   .addStory('Size small', () => (
-    <ToggleButton id={buttonId} icon="X" size="small">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </ToggleButton>
   ))
   .addStory('Size large', () => (
-    <ToggleButton id={buttonId} icon="X" size="large">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </ToggleButton>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="small">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
@@ -415,7 +427,7 @@ storiesOf('ToggleButton Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="medium">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
@@ -423,23 +435,23 @@ storiesOf('ToggleButton Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="large">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
   })
   .addStory('With icon before content', () => (
-    <ToggleButton id={buttonId} icon="X">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />}>
       Hello, world
     </ToggleButton>
   ))
   .addStory('With icon after content', () => (
-    <ToggleButton id={buttonId} icon="X" iconPosition="after">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} iconPosition="after">
       Hello, world
     </ToggleButton>
   ))
-  .addStory('Icon only', () => <ToggleButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <ToggleButton id={buttonId} shape="circular" icon="X" />)
+  .addStory('Icon only', () => <ToggleButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <ToggleButton id={buttonId} shape="circular" icon={<CalendarMonth />} />)
   .addStory('Checked', () => (
     <ToggleButton id={buttonId} checked>
       Hello, world
@@ -515,19 +527,19 @@ storiesOf('MenuButton Converged', module)
     </MenuButton>
   ))
   .addStory('Size small', () => (
-    <MenuButton id={buttonId} icon="X" size="small">
+    <MenuButton id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </MenuButton>
   ))
   .addStory('Size large', () => (
-    <MenuButton id={buttonId} icon="X" size="large">
+    <MenuButton id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </MenuButton>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="small">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
@@ -535,7 +547,7 @@ storiesOf('MenuButton Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="medium">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
@@ -543,15 +555,15 @@ storiesOf('MenuButton Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="large">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
   })
   .addStory('With icon', () => (
-    <MenuButton id={buttonId} icon="X">
+    <MenuButton id={buttonId} icon={<CalendarMonth />}>
       Hello, world
     </MenuButton>
   ))
-  .addStory('Icon only', () => <MenuButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon="X" />);
+  .addStory('Icon only', () => <MenuButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon={<CalendarMonth />} />);