fix(macOS Button): Use Fluent 2 alias tokens (#3778)

Author: Saadnajmi

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

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

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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);