Move platform theming logic from button component into theme

change/@fluentui-react-native-android-theme-03453f4a-1c9c-4c5e-89bb-55fd61335f12.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move platform theming logic from button component into theme",
+  "packageName": "@fluentui-react-native/android-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-apple-theme-cff4f801-872c-4c62-928d-4d612fcfa8ca.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move platform theming logic from button component into theme",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-button-ea7f7a18-e30a-44e1-acfc-119e1cbf4cc2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move platform theming logic from button component into theme",
+  "packageName": "@fluentui-react-native/button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-default-theme-7bbf18ff-9471-4960-9f7d-f10ac98fc092.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move platform theming logic from button component into theme",
+  "packageName": "@fluentui-react-native/default-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theme-tokens-f2d0f959-a06a-406c-93ee-f6936d7cfc9b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move platform theming logic from button component into theme",
+  "packageName": "@fluentui-react-native/theme-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-win32-theme-3c9bf79a-4eba-490d-b712-352ccc9888c0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move platform theming logic from button component into theme",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/Button/src/Button.styling.ts

@@ -8,10 +8,7 @@ import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/t
 import type { FontTokens } from '@fluentui-react-native/tokens';
 
 import { buttonName } from './Button.types';
-import type { ButtonTokens, ButtonSlotProps, ButtonProps, ButtonSize, ButtonAppearance } from './Button.types';
-import { defaultButtonColorTokens } from './ButtonColorTokens';
-import { defaultButtonFontTokens } from './ButtonFontTokens';
-import { defaultButtonTokens } from './ButtonTokens';
+import type { ButtonTokens, ButtonSlotProps, ButtonProps } from './Button.types';
 
 export const buttonStates: (keyof ButtonTokens)[] = [
   'block',
@@ -34,7 +31,7 @@ export const buttonStates: (keyof ButtonTokens)[] = [
 ];
 
 export const stylingSettings: UseStylingOptions<ButtonProps, ButtonSlotProps, ButtonTokens> = {
-  tokens: [defaultButtonTokens, defaultButtonFontTokens, defaultButtonColorTokens, buttonName],
+  tokens: [buttonName],
   states: buttonStates,
   slotProps: {
     ...(Platform.OS === 'android' && {
@@ -105,38 +102,6 @@ export const stylingSettings: UseStylingOptions<ButtonProps, ButtonSlotProps, Bu
   },
 };
 
-export const getDefaultSize = (): ButtonSize => {
-  if (Platform.OS === 'windows') {
-    return 'medium';
-  } else if ((Platform.OS as any) === 'win32') {
-    return 'small';
-  }
-
-  return 'medium';
-};
-
-export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => {
-  // Mobile platforms do not have seperate styling when no appearance is passed.
-  const hasDifferentDefaultAppearance = !(Platform.OS === 'android' || Platform.OS === 'ios');
-
-  switch (appearance) {
-    case 'accent': // Included to cover Mobile platform naming guidelines, maps to 'primary'.
-      return 'primary';
-
-    case 'primary':
-    case 'subtle':
-    case 'outline': // 'Outline' exists only for Mobile platforms, default picked on other platforms.
-      return appearance;
-
-    default:
-      if (hasDifferentDefaultAppearance) {
-        return null;
-      } else {
-        return 'primary';
-      }
-  }
-};
-
 export const contentStyling = (tokens: ButtonTokens, theme: Theme, contentColor: ColorValue, fontStylesTokens: FontTokens) => {
   const textAdjustment = getTextMarginAdjustment();
   const spacingIconContentBefore = tokens.spacingIconContentBefore

packages/components/Button/src/Button.tsx

@@ -6,13 +6,15 @@ import { Platform, Pressable, View } from 'react-native';
 import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator';
 import type { UseSlots } from '@fluentui-react-native/framework';
 import { compose, memoize, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { useFluentTheme } from '@fluentui-react-native/framework';
 import { Icon, createIconProps } from '@fluentui-react-native/icon';
 import type { IPressableState } from '@fluentui-react-native/interactive-hooks';
 import { TextV1 as Text } from '@fluentui-react-native/text';
+import type { Theme } from '@fluentui-react-native/theme-types';
 
-import { stylingSettings, getDefaultSize, getPlatformSpecificAppearance } from './Button.styling';
+import { stylingSettings } from './Button.styling';
 import { buttonName } from './Button.types';
-import type { ButtonType, ButtonProps } from './Button.types';
+import type { ButtonType, ButtonProps, ButtonTokens } from './Button.types';
 import { extractOuterStylePropsAndroid } from './ExtractStyle.android';
 import { useButton } from './useButton';
 
@@ -22,15 +24,18 @@ import { useButton } from './useButton';
  * @param layer The name of the state that is being checked for
  * @param state The current state of the button
  * @param userProps The props that were passed into the button
+ * @param theme The theme
  * @returns Whether the styles that are assigned to the layer should be applied to the button
  */
-export const buttonLookup = (layer: string, state: IPressableState, userProps: ButtonProps): boolean => {
+export const buttonLookup = (layer: string, state: IPressableState, userProps: ButtonProps, theme: Theme): boolean => {
+  const size = userProps['size'] ?? (theme?.components?.['Button'] as ButtonTokens)?.size ?? 'medium';
+  const getPlatformSpecificAppearance = (theme?.components?.['Button'] as ButtonTokens)?.getPlatformSpecificAppearance;
+  const appearance = getPlatformSpecificAppearance ? getPlatformSpecificAppearance(userProps['appearance']) : null;
   return (
     state[layer] ||
     userProps[layer] ||
-    layer === getPlatformSpecificAppearance(userProps['appearance']) ||
-    layer === userProps['size'] ||
-    (!userProps['size'] && layer === getDefaultSize()) ||
+    layer === appearance ||
+    layer === size ||
     layer === userProps['shape'] ||
     (!userProps['shape'] && layer === 'rounded') ||
     (layer === 'hovered' && state[layer] && !userProps.loading) ||
@@ -52,10 +57,11 @@ export const Button = compose<ButtonType>({
   },
   useRender: (userProps: ButtonProps, useSlots: UseSlots<ButtonType>) => {
     const button = useButton(userProps);
+    const theme = useFluentTheme();
 
     const iconProps = createIconProps(userProps.icon);
     // grab the styled slots
-    const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps));
+    const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps, theme));
 
     // now return the handler for finishing render
     return (final: ButtonProps, ...children: React.ReactNode[]) => {

packages/components/Button/src/Button.types.ts

@@ -66,6 +66,11 @@ export interface ButtonCoreTokens extends LayoutTokens, FontTokens, IBorderToken
   borderInnerWidth?: number;
   borderInnerRadius?: number;
   borderInnerStyle?: ViewStyle['borderStyle'];
+
+  /**
+   * The default size of the button
+   */
+  size?: ButtonSize;
 }
 
 export interface ButtonTokens extends ButtonCoreTokens {
@@ -89,6 +94,11 @@ export interface ButtonTokens extends ButtonCoreTokens {
   circular?: ButtonTokens;
   square?: ButtonTokens;
   hasIconAfter?: ButtonTokens;
+
+  /**
+   * Returns the default appearance type, and can remap ButtonAppearances to other Appearances for this theme
+   */
+  getPlatformSpecificAppearance?: (appearance: ButtonAppearance) => ButtonAppearance;
 }
 
 export interface ButtonCoreProps extends Omit<PressablePropsExtended, 'onPress'> {