[Button] HC fixes button

change/@fluentui-react-native-apple-theme-9b2f2fcc-0e26-4612-857c-2e31622d581d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Repoint current implementations of isHighContrast to new function",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-avatar-ae36d64d-fb08-4fcb-bfc9-a4f5bda7a173.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Repoint current implementations of isHighContrast to new function",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-badge-68828876-ce85-4b38-8820-32fcf584f4ca.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Repoint current implementations of isHighContrast to new function",
+  "packageName": "@fluentui-react-native/badge",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-button-964fd6bf-913e-4e63-92fd-0337d3b9bc83.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix button",
+  "packageName": "@fluentui-react-native/button",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-checkbox-19333188-9d56-4746-abab-ab5991392e22.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Repoint current implementations of isHighContrast to new function",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-icon-52559231-a710-4a17-abd1-0255432e5f15.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix icon styling",
+  "packageName": "@fluentui-react-native/icon",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-switch-bf196767-a006-42be-9003-cbb0c0b3e9fa.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Repoint current implementations of isHighContrast to new function",
+  "packageName": "@fluentui-react-native/switch",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theming-utils-0120922d-a343-4991-8bbd-824197ed9829.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add HC util function",
+  "packageName": "@fluentui-react-native/theming-utils",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/components/Avatar/package.json

@@ -34,6 +34,7 @@
     "@fluentui-react-native/framework": "0.9.4",
     "@fluentui-react-native/icon": "^0.17.18",
     "@fluentui-react-native/theme-tokens": "^0.24.4",
+    "@fluentui-react-native/theming-utils": ">=0.23.6 <1.0.0",
     "@fluentui-react-native/tokens": "^0.20.11",
     "@fluentui-react-native/use-styling": "^0.9.4"
   },

packages/components/Avatar/src/AvatarTokens.ts

@@ -1,5 +1,6 @@
 import type { Theme } from '@fluentui-react-native/framework';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { isHighContrast } from '@fluentui-react-native/theming-utils';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 
 import type { AvatarTokens } from '.';
@@ -17,7 +18,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     iconColor: t.colors.neutralForeground3,
     ringColor: t.colors.transparentStroke,
     borderColor: t.colors.neutralStroke1,
-    borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
+    borderWidth: isHighContrast() ? 1 : 0,
     circular: {
       borderRadius: globalTokens.corner.radiusCircular,
     },

packages/components/Avatar/src/AvatarTokens.win32.ts

@@ -1,5 +1,6 @@
 import type { Theme } from '@fluentui-react-native/framework';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { isHighContrast } from '@fluentui-react-native/theming-utils';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 
 import type { AvatarTokens } from '.';
@@ -18,7 +19,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     iconColor: t.colors.neutralForeground3,
     ringColor: t.colors.transparentStroke,
     borderColor: t.colors.neutralStroke1,
-    borderWidth: t.name === 'HighContrast' ? 1 : 0,
+    borderWidth: isHighContrast() ? 1 : 0,
     circular: {
       borderRadius: globalTokens.corner.radiusCircular,
     },

packages/components/Badge/package.json

@@ -31,6 +31,7 @@
     "@fluentui-react-native/text": ">=0.19.25 <1.0.0",
     "@fluentui-react-native/theme-tokens": "^0.24.4",
     "@fluentui-react-native/theme-types": "^0.30.4",
+    "@fluentui-react-native/theming-utils": ">=0.23.6 <1.0.0",
     "@fluentui-react-native/tokens": "^0.20.11",
     "@fluentui-react-native/use-styling": "^0.9.4"
   },

packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts

@@ -1,5 +1,6 @@
 import type { TokenSettings, Theme } from '@fluentui-react-native/framework';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { isHighContrast } from '@fluentui-react-native/theming-utils';
 
 import type { PresenceBadgeTokens } from './PresenceBadge.types';
 
@@ -67,7 +68,3 @@ function getBadgeColor(color: string, t: Theme) {
     },
   };
 }
-
-function isHighContrast(t: Theme) {
-  return t.host.appearance === 'highContrast';
-}

packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts

@@ -1,5 +1,6 @@
 import type { TokenSettings, Theme } from '@fluentui-react-native/framework';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { isHighContrast } from '@fluentui-react-native/theming-utils';
 
 import type { PresenceBadgeTokens } from './PresenceBadge.types';
 
@@ -68,7 +69,3 @@ function getBadgeColor(color: string, t: Theme) {
     },
   };
 }
-
-function isHighContrast(t: Theme) {
-  return t.name === 'HighContrast';
-}

packages/components/Button/package.json

@@ -37,6 +37,7 @@
     "@fluentui-react-native/styling-utils": ">=0.4.4 <1.0.0",
     "@fluentui-react-native/theme-tokens": ">=0.24.4 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.30.4 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.23.6 <1.0.0",
     "@fluentui-react-native/text": ">=0.19.25 <1.0.0",
     "@fluentui-react-native/tokens": ">=0.20.11 <1.0.0",
     "@fluentui-react-native/use-styling": ">=0.9.4 <1.0.0",

packages/components/Button/src/ButtonColorTokens.win32.ts

@@ -1,10 +1,17 @@
+import { PlatformColor } from 'react-native';
+
 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';
 
-export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
-  ({
+export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) => {
+  if (isHighContrast(t)) {
+    return highContrastColors;
+  }
+
+  return {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForeground1,
     borderColor: t.colors.neutralStroke1,
@@ -93,4 +100,33 @@ export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t:
         iconColor: t.colors.neutralForeground1Hover,
       },
     },
-  } as ButtonTokens);
+  } as ButtonTokens;
+};
+
+const highContrastColors = {
+  backgroundColor: PlatformColor('ButtonFace'),
+  borderColor: PlatformColor('ButtonText'),
+  color: PlatformColor('ButtonText'),
+  iconColor: PlatformColor('ButtonText'),
+  disabled: {
+    backgroundColor: PlatformColor('ButtonFace'),
+    borderColor: PlatformColor('GrayText'),
+    color: PlatformColor('GrayText'),
+    iconColor: PlatformColor('GrayText'),
+  },
+  hovered: {
+    backgroundColor: PlatformColor('Highlight'),
+    color: PlatformColor('HighlightText'),
+    iconColor: PlatformColor('HighlightText'),
+  },
+  pressed: {
+    backgroundColor: PlatformColor('Highlight'),
+    color: PlatformColor('HighlightText'),
+    iconColor: PlatformColor('HighlightText'),
+  },
+  focused: {
+    backgroundColor: PlatformColor('Highlight'),
+    color: PlatformColor('HighlightText'),
+    iconColor: PlatformColor('HighlightText'),
+  },
+};

packages/components/Button/src/ButtonColorTokens.windows.ts

@@ -1,10 +1,17 @@
+import { PlatformColor } from 'react-native';
+
 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';
 
-export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
-  ({
+export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) => {
+  if (isHighContrast(t)) {
+    return highContrastColors;
+  }
+
+  return {
     backgroundColor: t.colors.neutralBackground1,
     color: t.colors.neutralForeground1,
     borderColor: t.colors.neutralStroke1,
@@ -93,4 +100,36 @@ export const defaultButtonColorTokens: TokenSettings<ButtonTokens, Theme> = (t:
         iconColor: t.colors.neutralForeground1Hover,
       },
     },
-  } as ButtonTokens);
+  } as ButtonTokens;
+};
+
+const highContrastColors = {
+  backgroundColor: PlatformColor('SystemColorButtonFaceColor'),
+  borderColor: PlatformColor('SystemColorButtonTextColor'),
+  color: PlatformColor('SystemColorButtonTextColor'),
+  iconColor: PlatformColor('SystemColorButtonTextColor'),
+  disabled: {
+    backgroundColor: PlatformColor('SystemColorButtonFaceColor'),
+    borderColor: PlatformColor('SystemColorGrayTextColor'),
+    color: PlatformColor('SystemColorGrayTextColor'),
+    iconColor: PlatformColor('SystemColorGrayTextColor'),
+  },
+  hovered: {
+    backgroundColor: PlatformColor('SystemColorHighlightColor'),
+    borderColor: PlatformColor('SystemColorHighlightColor'),
+    color: PlatformColor('SystemColorHighlightTextColor'),
+    iconColor: PlatformColor('SystemColorHighlightTextColor'),
+  },
+  pressed: {
+    backgroundColor: PlatformColor('SystemColorHighlightColor'),
+    borderColor: PlatformColor('SystemColorHighlightColor'),
+    color: PlatformColor('SystemColorHighlightTextColor'),
+    iconColor: PlatformColor('SystemColorHighlightTextColor'),
+  },
+  focused: {
+    backgroundColor: PlatformColor('SystemColorHighlightColor'),
+    borderColor: PlatformColor('SystemColorHighlightColor'),
+    color: PlatformColor('SystemColorHighlightTextColor'),
+    iconColor: PlatformColor('SystemColorHighlightTextColor'),
+  },
+};

packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts

@@ -1,33 +1,21 @@
+import { PlatformColor } from 'react-native';
+
 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 { CompoundButtonTokens } from './CompoundButton.types';
 
-export const defaultCompoundButtonColorTokens: TokenSettings<CompoundButtonTokens, Theme> = (t: Theme): CompoundButtonTokens => ({
-  secondaryContentColor: t.colors.neutralForeground2,
-  hovered: {
-    secondaryContentColor: t.colors.neutralForeground2Hover,
-  },
-  focused: {
-    secondaryContentColor: t.colors.neutralForeground2Hover,
-  },
-  pressed: {
-    secondaryContentColor: t.colors.neutralForeground2Pressed,
-  },
-  primary: {
-    secondaryContentColor: t.colors.neutralForegroundOnBrand,
-    hovered: {
-      secondaryContentColor: t.colors.neutralForegroundOnBrandHover,
-    },
-    focused: {
-      secondaryContentColor: t.colors.neutralForegroundOnBrandHover,
-    },
-    pressed: {
-      secondaryContentColor: t.colors.neutralForegroundOnBrandPressed,
-    },
-  },
-  subtle: {
+export const defaultCompoundButtonColorTokens: TokenSettings<CompoundButtonTokens, Theme> = (t: Theme): CompoundButtonTokens => {
+  if (isHighContrast(t)) {
+    return highContrastColors;
+  }
+
+  return {
     secondaryContentColor: t.colors.neutralForeground2,
+    disabled: {
+      secondaryContentColor: t.colors.neutralForegroundDisabled,
+    },
     hovered: {
       secondaryContentColor: t.colors.neutralForeground2Hover,
     },
@@ -37,5 +25,45 @@ export const defaultCompoundButtonColorTokens: TokenSettings<CompoundButtonToken
     pressed: {
       secondaryContentColor: t.colors.neutralForeground2Pressed,
     },
+    primary: {
+      secondaryContentColor: t.colors.neutralForegroundOnBrand,
+      hovered: {
+        secondaryContentColor: t.colors.neutralForegroundOnBrandHover,
+      },
+      focused: {
+        secondaryContentColor: t.colors.neutralForegroundOnBrandHover,
+      },
+      pressed: {
+        secondaryContentColor: t.colors.neutralForegroundOnBrandPressed,
+      },
+    },
+    subtle: {
+      secondaryContentColor: t.colors.neutralForeground2,
+      hovered: {
+        secondaryContentColor: t.colors.neutralForeground2Hover,
+      },
+      focused: {
+        secondaryContentColor: t.colors.neutralForeground2Hover,
+      },
+      pressed: {
+        secondaryContentColor: t.colors.neutralForeground2Pressed,
+      },
+    },
+  };
+};
+
+const highContrastColors = {
+  secondaryContentColor: PlatformColor('ButtonText'),
+  disabled: {
+    secondaryContentColor: PlatformColor('GrayText'),
+  },
+  hovered: {
+    secondaryContentColor: PlatformColor('HighlightText'),
+  },
+  focused: {
+    secondaryContentColor: PlatformColor('HighlightText'),
+  },
+  pressed: {
+    secondaryContentColor: PlatformColor('HighlightText'),
   },
-});
+};