diff --git a/change/@fluentui-react-native-menu-d9ab8395-5d22-4d91-b97e-914c1ee63584.json b/change/@fluentui-react-native-menu-d9ab8395-5d22-4d91-b97e-914c1ee63584.json new file mode 100644 index 0000000000..b401ed6f0d --- /dev/null +++ b/change/@fluentui-react-native-menu-d9ab8395-5d22-4d91-b97e-914c1ee63584.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Tokenize MenuItemRadio", + "packageName": "@fluentui-react-native/menu", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/packages/components/Menu/src/MenuItemRadio/MenuItemRadioTokens.macos.ts b/packages/components/Menu/src/MenuItemRadio/MenuItemRadioTokens.macos.ts new file mode 100644 index 0000000000..ed1b3b7c6f --- /dev/null +++ b/packages/components/Menu/src/MenuItemRadio/MenuItemRadioTokens.macos.ts @@ -0,0 +1,54 @@ +import type { FontWeightValue, Theme } from '@fluentui-react-native/framework'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { MenuItemRadioTokens } from './MenuItemRadio.types'; + +export const defaultMenuItemRadioTokens: TokenSettings = (t: Theme): MenuItemRadioTokens => ({ + backgroundColor: t.colors.transparentBackground, + borderRadius: 5, // hardcoded for now to match NSMenu + checkmarkPadding: globalTokens.size20, + checkmarkSize: 16, + checkmarkVisibility: 0, + color: t.colors.neutralForeground1, + fontFamily: t.typography.families.primary, + fontSize: 13, // aligning with NSMenu font size + fontWeight: globalTokens.font.weight.regular as FontWeightValue, + gap: globalTokens.size40, + iconColor: t.colors.neutralForeground1, + iconSize: 16, + padding: globalTokens.size40, + paddingHorizontal: 5, // hardcoded for now to match NSMenu + paddingVertical: 3, // hardcoded for now to match NSMenu + pressed: { + backgroundColor: t.colors.menuItemBackgroundPressed, + color: t.colors.menuItemTextHovered, + iconColor: t.colors.menuItemTextHovered, + checked: { + checkmarkColor: t.colors.menuItemTextHovered, + checkmarkVisibility: 1, + }, + }, + disabled: { + backgroundColor: t.colors.menuBackground, + color: t.colors.disabledText, + iconColor: t.colors.disabledText, + checked: { + checkmarkColor: t.colors.disabledText, + checkmarkVisibility: 1, + }, + }, + focused: { + backgroundColor: t.colors.menuItemBackgroundHovered, + color: t.colors.menuItemTextHovered, + iconColor: t.colors.menuItemTextHovered, + checked: { + checkmarkColor: t.colors.menuItemTextHovered, + checkmarkVisibility: 1, + }, + }, + checked: { + checkmarkColor: t.colors.neutralForeground1, + checkmarkVisibility: 1, + }, +});