From 71494149a1dc95ac2c2d34b211abdd5ce0856df8 Mon Sep 17 00:00:00 2001
From: Saad Najmi <sanajmi@microsoft.com>
Date: Thu, 17 Oct 2024 18:07:01 -0500
Subject: [PATCH] fix(macOS Button): Use Fluent 2 alias tokens (#3778)

---
 .../Button/ButtonVariantTestSection.tsx       |   3 +
 .../src/TestComponents/Common/styles.ts       |   6 +-
 ...-cd603f7a-e713-4491-8021-48691cf1280b.json |   7 ++
 ...-ccf64c08-d3e0-462e-a064-fb1d4626a286.json |   7 ++
 .../Button/src/ButtonColorTokens.macos.ts     | 106 ++++++++++--------
 5 files changed, 82 insertions(+), 47 deletions(-)
 create mode 100644 change/@fluentui-react-native-button-cd603f7a-e713-4491-8021-48691cf1280b.json
 create mode 100644 change/@fluentui-react-native-tester-ccf64c08-d3e0-462e-a064-fb1d4626a286.json

diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx
index da7eff8159..301c22489a 100644
--- a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx
+++ b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx
@@ -23,6 +23,9 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
       <Button appearance="subtle" style={commonTestStyles.vmargin}>
         Subtle
       </Button>
+      <Button disabled appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle Disabled
+      </Button>
       <Button loading>Loading Button</Button>
       <Button block style={commonTestStyles.vmargin}>
         Block
diff --git a/apps/fluent-tester/src/TestComponents/Common/styles.ts b/apps/fluent-tester/src/TestComponents/Common/styles.ts
index 93f694379a..3de59dab43 100644
--- a/apps/fluent-tester/src/TestComponents/Common/styles.ts
+++ b/apps/fluent-tester/src/TestComponents/Common/styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 
 import type { IStackProps } from '@fluentui-react-native/stack';
 
@@ -118,6 +118,10 @@ export const fluentTesterStyles = StyleSheet.create({
   testListItem: {
     width: '100%',
     borderRadius: 0,
+    ...(Platform.OS === 'macos' && {
+      borderColor: 'transparent',
+      borderRadius: 5,
+    }),
     justifyContent: 'flex-start',
   },
   testListSeparator: { marginHorizontal: 8 },
diff --git a/change/@fluentui-react-native-button-cd603f7a-e713-4491-8021-48691cf1280b.json b/change/@fluentui-react-native-button-cd603f7a-e713-4491-8021-48691cf1280b.json
new file mode 100644
index 0000000000..a04e4fba92
--- /dev/null
+++ b/change/@fluentui-react-native-button-cd603f7a-e713-4491-8021-48691cf1280b.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix(macOS Button): Use Fluent 2 alias tokens",
+  "packageName": "@fluentui-react-native/button",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-ccf64c08-d3e0-462e-a064-fb1d4626a286.json b/change/@fluentui-react-native-tester-ccf64c08-d3e0-462e-a064-fb1d4626a286.json
new file mode 100644
index 0000000000..f7000860a1
--- /dev/null
+++ b/change/@fluentui-react-native-tester-ccf64c08-d3e0-462e-a064-fb1d4626a286.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixup Sidebar tabs in High Contrast",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/components/Button/src/ButtonColorTokens.macos.ts b/packages/components/Button/src/ButtonColorTokens.macos.ts
index acb09755b9..9e5d3e069f 100644
--- a/packages/components/Button/src/ButtonColorTokens.macos.ts
+++ b/packages/components/Button/src/ButtonColorTokens.macos.ts
@@ -1,37 +1,43 @@
 import type { Theme } from '@fluentui-react-native/framework';
+import { isHighContrast } from '@fluentui-react-native/theming-utils';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 
 import type { ButtonTokens } from './Button.types';
 
+// https://github.com/microsoft/fluentui-react-native/issues/3782
+// The macOS brand ramps from the token package use blue from Fluent V1,
+// instead of communication blue. Update the packages to use the newly
+// defined Fluent 2 brand ramp.
+
 export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
   ({
-    backgroundColor: t.colors.defaultBackground,
-    color: t.colors.defaultContent,
-    borderColor: t.colors.defaultBorder,
-    iconColor: t.colors.defaultContent,
+    backgroundColor: t.colors.neutralBackground2,
+    color: t.colors.neutralForeground2,
+    borderColor: t.colors.neutralStroke2,
+    iconColor: t.colors.neutralForeground2,
     disabled: {
-      backgroundColor: t.colors.defaultDisabledBackground,
-      color: t.colors.defaultDisabledContent,
-      borderColor: t.colors.defaultDisabledBorder,
-      iconColor: t.colors.defaultDisabledIcon,
+      backgroundColor: t.colors.neutralBackground2,
+      color: t.colors.neutralForegroundDisabled,
+      borderColor: t.colors.neutralStrokeDisabled,
+      iconColor: t.colors.neutralForegroundDisabled,
     },
     hovered: {
-      backgroundColor: t.colors.defaultBackground,
-      color: t.colors.defaultContent,
-      borderColor: t.colors.defaultBorder,
-      iconColor: t.colors.defaultHoveredIcon,
+      backgroundColor: t.colors.neutralBackground2,
+      color: t.colors.neutralForeground2,
+      borderColor: t.colors.neutralStroke2,
+      iconColor: t.colors.neutralForeground2,
     },
     pressed: {
-      backgroundColor: t.colors.defaultPressedBackground,
-      color: t.colors.defaultPressedContent,
-      borderColor: t.colors.defaultBorder,
-      iconColor: t.colors.defaultPressedIcon,
+      backgroundColor: t.colors.neutralBackground2Pressed,
+      color: t.colors.neutralForeground2,
+      borderColor: t.colors.neutralStroke2,
+      iconColor: t.colors.neutralForeground2,
     },
     focused: {
-      backgroundColor: t.colors.defaultFocusedBackground,
-      color: t.colors.defaultFocusedContent,
-      borderColor: t.colors.defaultFocusedBorder,
-      icon: t.colors.defaultFocusedIcon,
+      backgroundColor: t.colors.neutralBackground2,
+      color: t.colors.neutralForeground2,
+      borderColor: t.colors.neutralStroke2,
+      icon: t.colors.neutralForeground2,
     },
     primary: {
       backgroundColor: t.colors.brandBackground,
@@ -45,9 +51,12 @@ export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t:
         iconColor: t.colors.neutralForegroundDisabled,
       },
       hovered: {
-        backgroundColor: t.colors.brandBackgroundHover,
+        // https://github.com/microsoft/fluentui-react-native/issues/3780
+        // brandBackgroundHover should match brandBackground, but does not. Update
+        // `backgroundColor` and `borderColor` here when fixed in design token package.
+        backgroundColor: t.colors.brandBackground,
         color: t.colors.neutralForegroundOnBrandHover,
-        borderColor: t.colors.brandBackgroundHover,
+        borderColor: t.colors.brandBackground,
         iconColor: t.colors.neutralForegroundOnBrandHover,
       },
       pressed: {
@@ -57,40 +66,45 @@ export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t:
         iconColor: t.colors.neutralForegroundOnBrandPressed,
       },
       focused: {
-        backgroundColor: t.colors.brandBackgroundHover,
-        color: t.colors.neutralForegroundOnBrandHover,
-        borderColor: t.colors.strokeFocus2,
-        iconColor: t.colors.neutralForegroundOnBrandHover,
+        backgroundColor: t.colors.brandBackground,
+        color: t.colors.neutralForegroundOnBrand,
+        borderColor: t.colors.brandBackground,
+        iconColor: t.colors.neutralForegroundOnBrand,
       },
     },
+    // https://github.com/microsoft/fluentui-react-native/issues/3781
+    // Subtle Button should match Titlebar buttons on macOS, which:
+    // - Have a hover state (unlike most buttons in macOS)...
+    // - Except in High Contrast, where instead they have a border around them
+    // While the alias tokens aren't updated, manually check for High Contrast.
     subtle: {
-      backgroundColor: t.colors.ghostBackground,
-      color: t.colors.ghostContent,
-      borderColor: t.colors.ghostBorder,
-      iconColor: t.colors.ghostIcon,
+      backgroundColor: t.colors.subtleBackground,
+      color: t.colors.brandForeground1,
+      borderColor: t.colors.transparentStroke,
+      iconColor: t.colors.brandForeground1,
       disabled: {
-        color: t.colors.ghostDisabledContent,
-        borderColor: t.colors.ghostDisabledBorder,
-        backgroundColor: t.colors.ghostDisabledBackground,
-        iconColor: t.colors.ghostDisabledIcon,
+        backgroundColor: t.colors.subtleBackground,
+        color: t.colors.brandForeground1Disabled,
+        borderColor: t.colors.transparentStrokeDisabled,
+        iconColor: t.colors.brandForeground1Disabled,
       },
       hovered: {
-        backgroundColor: t.colors.ghostHoveredBackground,
-        color: t.colors.ghostHoveredContent,
-        borderColor: t.colors.ghostHoveredBorder,
-        iconColor: t.colors.ghostHoveredIcon,
+        backgroundColor: isHighContrast(t) ? t.colors.subtleBackground : t.colors.subtleBackgroundHover,
+        color: isHighContrast(t) ? t.colors.brandForeground1 : t.colors.brandForeground1Hover,
+        borderColor: t.colors.transparentStroke,
+        iconColor: isHighContrast(t) ? t.colors.brandForeground1 : t.colors.brandForeground1Hover,
       },
       pressed: {
-        backgroundColor: t.colors.ghostPressedBackground,
-        borderColor: t.colors.ghostPressedBorder,
-        color: t.colors.ghostPressedContent,
-        icon: t.colors.ghostPressedIcon,
+        backgroundColor: t.colors.subtleBackgroundPressed,
+        color: t.colors.brandForeground1Pressed,
+        borderColor: t.colors.transparentStroke,
+        iconColor: t.colors.brandForeground1Pressed,
       },
       focused: {
-        borderColor: t.colors.ghostFocusedBorder,
-        backgroundColor: t.colors.ghostFocusedBackground,
-        color: t.colors.ghostFocusedContent,
-        icon: t.colors.ghostFocusedIcon,
+        backgroundColor: t.colors.subtleBackground,
+        color: t.colors.brandForeground1,
+        borderColor: t.colors.transparentStroke,
+        iconColor: t.colors.brandForeground1,
       },
     },
   } as ButtonTokens);