diff --git a/.vscode/settings.json b/.vscode/settings.json index 1fe0e2fa31..d3095c8a26 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,8 +11,8 @@ "explorer.fileNesting.enabled": true, "explorer.fileNesting.patterns": { "*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map", - "*.ts": "${capture}.android.tsx, ${capture}.ios.tsx, ${capture}.macos.tsx, ${capture}.windows.tsx, ${capture}.win32.tsx, ${capture}.android.ts, ${capture}.ios.ts, ${capture}.macos.ts, ${capture}.windows.ts, ${capture}.win32.ts", - "*.tsx": "${capture}.android.tsx, ${capture}.ios.tsx, ${capture}.macos.tsx, ${capture}.windows.tsx, ${capture}.win32.tsx, ${capture}.android.ts, ${capture}.ios.ts, ${capture}.macos.ts, ${capture}.windows.ts, ${capture}.win32.ts" + "*.ts": "${capture}.android.tsx, ${capture}.ios.tsx, ${capture}.macos.tsx, ${capture}.windows.tsx, ${capture}.win32.tsx, ${capture}.officewin.tsx, ${capture}.android.ts, ${capture}.ios.ts, ${capture}.macos.ts, ${capture}.windows.ts, ${capture}.win32.ts, ${capture}.officewin.ts", + "*.tsx": "${capture}.android.tsx, ${capture}.ios.tsx, ${capture}.macos.tsx, ${capture}.windows.tsx, ${capture}.win32.tsx, ${capture}.officewin.tsx, ${capture}.android.ts, ${capture}.ios.ts, ${capture}.macos.ts, ${capture}.windows.ts, ${capture}.win32.ts, ${capture}.officewin.ts" }, "files.trimTrailingWhitespace": true, diff --git a/apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx b/apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx index 4f9fddbf7b..8f3b7f614d 100644 --- a/apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { ViewStyle, ColorValue } from 'react-native'; import { View, StyleSheet } from 'react-native'; -import { Button, PrimaryButton, Text, StealthButton } from '@fluentui/react-native'; +import { ButtonV1 as Button, Text } from '@fluentui/react-native'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; @@ -52,11 +52,19 @@ const Panel: React.FunctionComponent = () => { const onClick = React.useCallback(() => setDisabled(!disabled), [disabled, setDisabled]); return ( - - + + This is a text element - ); }; diff --git a/change/@fluentui-react-native-button-ead801c7-1a9f-4ae5-9f7b-2516f7bd623b.json b/change/@fluentui-react-native-button-ead801c7-1a9f-4ae5-9f7b-2516f7bd623b.json new file mode 100644 index 0000000000..667d2f33c8 --- /dev/null +++ b/change/@fluentui-react-native-button-ead801c7-1a9f-4ae5-9f7b-2516f7bd623b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bringing windows platform more in line with more complete win32 impl", + "packageName": "@fluentui-react-native/button", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-checkbox-cd86185b-caac-4909-8483-1ba5815a6a13.json b/change/@fluentui-react-native-checkbox-cd86185b-caac-4909-8483-1ba5815a6a13.json new file mode 100644 index 0000000000..098af957b4 --- /dev/null +++ b/change/@fluentui-react-native-checkbox-cd86185b-caac-4909-8483-1ba5815a6a13.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Bringing windows platform more in line with more complete win32 impl", + "packageName": "@fluentui-react-native/checkbox", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tester-6b71d0e4-9783-4d2d-a69f-04266590e5a1.json b/change/@fluentui-react-native-tester-6b71d0e4-9783-4d2d-a69f-04266590e5a1.json new file mode 100644 index 0000000000..525ca8d73e --- /dev/null +++ b/change/@fluentui-react-native-tester-6b71d0e4-9783-4d2d-a69f-04266590e5a1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Move a usage of legacy buttons to ButtonV1", + "packageName": "@fluentui-react-native/tester", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/components/Button/src/Button.styling.ts b/packages/components/Button/src/Button.styling.ts index 0f65f04386..092c69f387 100644 --- a/packages/components/Button/src/Button.styling.ts +++ b/packages/components/Button/src/Button.styling.ts @@ -1,5 +1,4 @@ import type { ColorValue } from 'react-native'; -import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; @@ -8,9 +7,10 @@ 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 type { ButtonTokens, ButtonSlotProps, ButtonProps } from './Button.types'; import { defaultButtonColorTokens } from './ButtonColorTokens'; import { defaultButtonFontTokens } from './ButtonFontTokens'; +import { buttonPlatformSlotProps } from './ButtonPlatform'; import { defaultButtonTokens } from './ButtonTokens'; export const buttonStates: (keyof ButtonTokens)[] = [ @@ -37,23 +37,7 @@ export const stylingSettings: UseStylingOptions { - return { - style: { - flexDirection: 'row', - alignSelf: 'baseline', - borderColor: tokens.borderInnerColor, - borderWidth: tokens.borderInnerWidth, - borderRadius: tokens.borderRadius, - overflow: 'hidden', - }, - }; - }, - ['borderRadius'], - ), - }), + ...buttonPlatformSlotProps, root: buildProps( (tokens: ButtonTokens, theme: Theme) => ({ style: { @@ -106,38 +90,6 @@ export const stylingSettings: UseStylingOptions { - 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 diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index 7e498fbf9a..a6355b919e 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -10,9 +10,10 @@ 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 { stylingSettings, getDefaultSize, getPlatformSpecificAppearance } from './Button.styling'; +import { stylingSettings } from './Button.styling'; import { buttonName } from './Button.types'; import type { ButtonType, ButtonProps } from './Button.types'; +import { getDefaultSize, getPlatformSpecificAppearance } from './ButtonPlatform'; import { extractOuterStylePropsAndroid } from './ExtractStyle.android'; import { useButton } from './useButton'; @@ -46,7 +47,7 @@ export const Button = compose({ slots: { root: Pressable, rippleContainer: Platform.OS === 'android' && View, - focusInnerBorder: Platform.OS === ('win32' as any) && View, + focusInnerBorder: (Platform.OS === ('win32' as any) || Platform.OS === 'windows') && View, icon: Icon, content: Text, }, diff --git a/packages/components/Button/src/ButtonFontTokens.win.ts b/packages/components/Button/src/ButtonFontTokens.win.ts new file mode 100644 index 0000000000..0d89579b40 --- /dev/null +++ b/packages/components/Button/src/ButtonFontTokens.win.ts @@ -0,0 +1,30 @@ +import type { 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 { ButtonTokens } from './Button.types'; + +export const defaultButtonFontTokens: TokenSettings = (t: Theme) => + ({ + medium: { + hasContent: { + fontFamily: t.typography.families.secondary, + fontSize: globalTokens.font.size300, + fontWeight: globalTokens.font.weight.semibold, + }, + }, + small: { + hasContent: { + fontFamily: t.typography.families.primary, + fontSize: globalTokens.font.size200, + fontWeight: globalTokens.font.weight.regular, + }, + }, + large: { + hasContent: { + fontFamily: t.typography.families.secondary, + fontSize: globalTokens.font.size400, + fontWeight: globalTokens.font.weight.semibold, + }, + }, + } as ButtonTokens); diff --git a/packages/components/Button/src/ButtonFontTokens.win32.ts b/packages/components/Button/src/ButtonFontTokens.win32.ts index 0d89579b40..ed25d49e05 100644 --- a/packages/components/Button/src/ButtonFontTokens.win32.ts +++ b/packages/components/Button/src/ButtonFontTokens.win32.ts @@ -1,30 +1 @@ -import type { 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 { ButtonTokens } from './Button.types'; - -export const defaultButtonFontTokens: TokenSettings = (t: Theme) => - ({ - medium: { - hasContent: { - fontFamily: t.typography.families.secondary, - fontSize: globalTokens.font.size300, - fontWeight: globalTokens.font.weight.semibold, - }, - }, - small: { - hasContent: { - fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size200, - fontWeight: globalTokens.font.weight.regular, - }, - }, - large: { - hasContent: { - fontFamily: t.typography.families.secondary, - fontSize: globalTokens.font.size400, - fontWeight: globalTokens.font.weight.semibold, - }, - }, - } as ButtonTokens); +export { defaultButtonFontTokens } from './ButtonFontTokens.win'; diff --git a/packages/components/Button/src/ButtonFontTokens.windows.ts b/packages/components/Button/src/ButtonFontTokens.windows.ts new file mode 100644 index 0000000000..ed25d49e05 --- /dev/null +++ b/packages/components/Button/src/ButtonFontTokens.windows.ts @@ -0,0 +1 @@ +export { defaultButtonFontTokens } from './ButtonFontTokens.win'; diff --git a/packages/components/Button/src/ButtonPlatform.android.ts b/packages/components/Button/src/ButtonPlatform.android.ts new file mode 100644 index 0000000000..4b58a2ec50 --- /dev/null +++ b/packages/components/Button/src/ButtonPlatform.android.ts @@ -0,0 +1,42 @@ +import { buildProps } from '@fluentui-react-native/framework'; + +import type { ButtonAppearance, ButtonSize, ButtonTokens } from './Button.types'; + +export function buttonPlatformSlotProps() { + return { + rippleContainer: buildProps( + (tokens: ButtonTokens) => { + return { + style: { + flexDirection: 'row', + alignSelf: 'baseline', + borderColor: tokens.borderInnerColor, + borderWidth: tokens.borderInnerWidth, + borderRadius: tokens.borderRadius, + overflow: 'hidden', + }, + }; + }, + ['borderRadius'], + ), + }; +} + +export const getDefaultSize = (): ButtonSize => { + return 'medium'; +}; + +export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => { + 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: + return 'primary'; + } +}; diff --git a/packages/components/Button/src/ButtonPlatform.ios.ts b/packages/components/Button/src/ButtonPlatform.ios.ts new file mode 100644 index 0000000000..6d61547200 --- /dev/null +++ b/packages/components/Button/src/ButtonPlatform.ios.ts @@ -0,0 +1,24 @@ +import type { ButtonAppearance, ButtonSize } from './Button.types'; + +export function buttonPlatformSlotProps() { + return {}; +} + +export const getDefaultSize = (): ButtonSize => { + return 'medium'; +}; + +export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => { + 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: + return 'primary'; + } +}; diff --git a/packages/components/Button/src/ButtonPlatform.officewin.ts b/packages/components/Button/src/ButtonPlatform.officewin.ts new file mode 100644 index 0000000000..d2d39919e5 --- /dev/null +++ b/packages/components/Button/src/ButtonPlatform.officewin.ts @@ -0,0 +1,24 @@ +import type { ButtonAppearance, ButtonSize } from './Button.types'; + +export function buttonPlatformSlotProps() { + return {}; +} + +export const getDefaultSize = (): ButtonSize => { + return 'small'; +}; + +export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => { + 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: + return null; + } +}; diff --git a/packages/components/Button/src/ButtonPlatform.ts b/packages/components/Button/src/ButtonPlatform.ts new file mode 100644 index 0000000000..c50d4ebadf --- /dev/null +++ b/packages/components/Button/src/ButtonPlatform.ts @@ -0,0 +1,24 @@ +import type { ButtonAppearance, ButtonSize } from './Button.types'; + +export function buttonPlatformSlotProps() { + return {}; +} + +export const getDefaultSize = (): ButtonSize => { + return 'medium'; +}; + +export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => { + 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: + return null; + } +}; diff --git a/packages/components/Button/src/ButtonPlatform.win32.ts b/packages/components/Button/src/ButtonPlatform.win32.ts new file mode 100644 index 0000000000..dc683833fe --- /dev/null +++ b/packages/components/Button/src/ButtonPlatform.win32.ts @@ -0,0 +1 @@ +export { buttonPlatformSlotProps, getDefaultSize, getPlatformSpecificAppearance } from './ButtonPlatform.officewin'; diff --git a/packages/components/Button/src/ButtonTokens.win.ts b/packages/components/Button/src/ButtonTokens.win.ts new file mode 100644 index 0000000000..fcb96da30b --- /dev/null +++ b/packages/components/Button/src/ButtonTokens.win.ts @@ -0,0 +1,166 @@ +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 { ButtonTokens } from './Button.types'; + +export const defaultButtonTokens: TokenSettings = (theme: Theme) => + ({ + borderWidth: globalTokens.stroke.width10, + borderInnerWidth: globalTokens.stroke.width10, + block: { + width: '100%', + }, + medium: { + padding: globalTokens.size80 - globalTokens.stroke.width10, + iconSize: 16, + focused: { + borderWidth: 0, + padding: globalTokens.size80, + }, + primary: !isHighContrast(theme) && { + focused: { + borderWidth: globalTokens.stroke.width20, + padding: globalTokens.size80 - globalTokens.stroke.width20, + }, + square: { + focused: { + borderWidth: globalTokens.stroke.width10, + padding: globalTokens.size80 - globalTokens.stroke.width10, + }, + }, + }, + hasContent: { + minWidth: 96, + padding: globalTokens.size60 - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, + hasIconAfter: { + spacingIconContentAfter: globalTokens.size80, + }, + hasIconBefore: { + spacingIconContentBefore: globalTokens.size80, + }, + focused: { + padding: globalTokens.size60, + paddingHorizontal: globalTokens.size120, + }, + primary: !isHighContrast(theme) && { + focused: { + padding: globalTokens.size60 - globalTokens.stroke.width20, + paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width20, + }, + square: { + focused: { + padding: globalTokens.size60 - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, + }, + }, + }, + }, + }, + small: { + padding: globalTokens.size40 - globalTokens.stroke.width10, + iconSize: 16, + focused: { + borderWidth: 0, + padding: globalTokens.size40, + }, + primary: !isHighContrast(theme) && { + focused: { + borderWidth: globalTokens.stroke.width20, + padding: globalTokens.size40 - globalTokens.stroke.width20, + }, + square: { + focused: { + borderWidth: globalTokens.stroke.width10, + padding: globalTokens.size40 - globalTokens.stroke.width10, + }, + }, + }, + hasContent: { + minWidth: 64, + minHeight: 24, + paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10, + hasIconAfter: { + spacingIconContentAfter: globalTokens.size40, + }, + hasIconBefore: { + spacingIconContentBefore: globalTokens.size40, + }, + focused: { + paddingHorizontal: globalTokens.size80, + }, + primary: !isHighContrast(theme) && { + focused: { + paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width20, + }, + square: { + focused: { + paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10, + }, + }, + }, + }, + }, + large: { + padding: globalTokens.size100 - globalTokens.stroke.width10, + iconSize: 20, + focused: { + borderWidth: 0, + padding: globalTokens.size100, + }, + primary: !isHighContrast(theme) && { + focused: { + borderWidth: globalTokens.stroke.width20, + padding: globalTokens.size100 - globalTokens.stroke.width20, + }, + square: { + focused: { + borderWidth: globalTokens.stroke.width10, + padding: globalTokens.size100 - globalTokens.stroke.width10, + }, + }, + }, + hasContent: { + minWidth: 96, + minHeight: 40, + padding: globalTokens.size80 - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, + hasIconAfter: { + spacingIconContentAfter: globalTokens.size60, + }, + hasIconBefore: { + spacingIconContentBefore: globalTokens.size60, + }, + focused: { + padding: globalTokens.size80, + paddingHorizontal: globalTokens.size160, + }, + primary: !isHighContrast(theme) && { + focused: { + padding: globalTokens.size80 - globalTokens.stroke.width20, + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width20, + }, + square: { + focused: { + padding: globalTokens.size80 - globalTokens.stroke.width10, + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, + }, + }, + }, + }, + }, + rounded: { + borderRadius: globalTokens.corner.radius40, + borderInnerRadius: globalTokens.corner.radius40 - 1, // reduce the rounding so that the curvature matches + }, + circular: { + borderRadius: globalTokens.corner.radiusCircular, + borderInnerRadius: globalTokens.corner.radiusCircular - 1, // reduce the rounding so that the curvature matches + }, + square: { + borderRadius: globalTokens.corner.radiusNone, + borderInnerRadius: globalTokens.corner.radiusNone, + }, + } as ButtonTokens); diff --git a/packages/components/Button/src/ButtonTokens.win32.ts b/packages/components/Button/src/ButtonTokens.win32.ts index fcb96da30b..3fd166c47a 100644 --- a/packages/components/Button/src/ButtonTokens.win32.ts +++ b/packages/components/Button/src/ButtonTokens.win32.ts @@ -1,166 +1 @@ -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 { ButtonTokens } from './Button.types'; - -export const defaultButtonTokens: TokenSettings = (theme: Theme) => - ({ - borderWidth: globalTokens.stroke.width10, - borderInnerWidth: globalTokens.stroke.width10, - block: { - width: '100%', - }, - medium: { - padding: globalTokens.size80 - globalTokens.stroke.width10, - iconSize: 16, - focused: { - borderWidth: 0, - padding: globalTokens.size80, - }, - primary: !isHighContrast(theme) && { - focused: { - borderWidth: globalTokens.stroke.width20, - padding: globalTokens.size80 - globalTokens.stroke.width20, - }, - square: { - focused: { - borderWidth: globalTokens.stroke.width10, - padding: globalTokens.size80 - globalTokens.stroke.width10, - }, - }, - }, - hasContent: { - minWidth: 96, - padding: globalTokens.size60 - globalTokens.stroke.width10, - paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, - hasIconAfter: { - spacingIconContentAfter: globalTokens.size80, - }, - hasIconBefore: { - spacingIconContentBefore: globalTokens.size80, - }, - focused: { - padding: globalTokens.size60, - paddingHorizontal: globalTokens.size120, - }, - primary: !isHighContrast(theme) && { - focused: { - padding: globalTokens.size60 - globalTokens.stroke.width20, - paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width20, - }, - square: { - focused: { - padding: globalTokens.size60 - globalTokens.stroke.width10, - paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, - }, - }, - }, - }, - }, - small: { - padding: globalTokens.size40 - globalTokens.stroke.width10, - iconSize: 16, - focused: { - borderWidth: 0, - padding: globalTokens.size40, - }, - primary: !isHighContrast(theme) && { - focused: { - borderWidth: globalTokens.stroke.width20, - padding: globalTokens.size40 - globalTokens.stroke.width20, - }, - square: { - focused: { - borderWidth: globalTokens.stroke.width10, - padding: globalTokens.size40 - globalTokens.stroke.width10, - }, - }, - }, - hasContent: { - minWidth: 64, - minHeight: 24, - paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10, - hasIconAfter: { - spacingIconContentAfter: globalTokens.size40, - }, - hasIconBefore: { - spacingIconContentBefore: globalTokens.size40, - }, - focused: { - paddingHorizontal: globalTokens.size80, - }, - primary: !isHighContrast(theme) && { - focused: { - paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width20, - }, - square: { - focused: { - paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10, - }, - }, - }, - }, - }, - large: { - padding: globalTokens.size100 - globalTokens.stroke.width10, - iconSize: 20, - focused: { - borderWidth: 0, - padding: globalTokens.size100, - }, - primary: !isHighContrast(theme) && { - focused: { - borderWidth: globalTokens.stroke.width20, - padding: globalTokens.size100 - globalTokens.stroke.width20, - }, - square: { - focused: { - borderWidth: globalTokens.stroke.width10, - padding: globalTokens.size100 - globalTokens.stroke.width10, - }, - }, - }, - hasContent: { - minWidth: 96, - minHeight: 40, - padding: globalTokens.size80 - globalTokens.stroke.width10, - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, - hasIconAfter: { - spacingIconContentAfter: globalTokens.size60, - }, - hasIconBefore: { - spacingIconContentBefore: globalTokens.size60, - }, - focused: { - padding: globalTokens.size80, - paddingHorizontal: globalTokens.size160, - }, - primary: !isHighContrast(theme) && { - focused: { - padding: globalTokens.size80 - globalTokens.stroke.width20, - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width20, - }, - square: { - focused: { - padding: globalTokens.size80 - globalTokens.stroke.width10, - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, - }, - }, - }, - }, - }, - rounded: { - borderRadius: globalTokens.corner.radius40, - borderInnerRadius: globalTokens.corner.radius40 - 1, // reduce the rounding so that the curvature matches - }, - circular: { - borderRadius: globalTokens.corner.radiusCircular, - borderInnerRadius: globalTokens.corner.radiusCircular - 1, // reduce the rounding so that the curvature matches - }, - square: { - borderRadius: globalTokens.corner.radiusNone, - borderInnerRadius: globalTokens.corner.radiusNone, - }, - } as ButtonTokens); +export { defaultButtonTokens } from './ButtonTokens.win'; diff --git a/packages/components/Button/src/ButtonTokens.windows.ts b/packages/components/Button/src/ButtonTokens.windows.ts new file mode 100644 index 0000000000..3fd166c47a --- /dev/null +++ b/packages/components/Button/src/ButtonTokens.windows.ts @@ -0,0 +1 @@ +export { defaultButtonTokens } from './ButtonTokens.win'; diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.tsx b/packages/components/Button/src/CompoundButton/CompoundButton.tsx index c48c0e17f1..79c5fdf70a 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButton.tsx +++ b/packages/components/Button/src/CompoundButton/CompoundButton.tsx @@ -24,7 +24,7 @@ export const CompoundButton = compose({ content: Text, secondaryContent: Text, contentContainer: View, - focusInnerBorder: Platform.OS === ('win32' as any) && View, + focusInnerBorder: (Platform.OS === ('win32' as any) || Platform.OS === 'windows') && View, }, useRender: (userProps: CompoundButtonProps, useSlots: UseSlots) => { const button = useButton(userProps); diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win.ts b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win.ts new file mode 100644 index 0000000000..e4785d73c0 --- /dev/null +++ b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win.ts @@ -0,0 +1,44 @@ +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 { CompoundButtonTokens } from './CompoundButton.types'; + +export const defaultCompoundButtonFontTokens: TokenSettings = (t: Theme): CompoundButtonTokens => ({ + medium: { + hasContent: { + fontFamily: t.typography.families.secondary, + fontSize: globalTokens.font.size200, + fontWeight: globalTokens.font.weight.semibold as FontWeightValue, + secondaryContentFont: { + fontFamily: t.typography.families.secondary, + fontSize: globalTokens.font.size100, + fontWeight: globalTokens.font.weight.semibold as FontWeightValue, + }, + }, + }, + small: { + hasContent: { + fontFamily: t.typography.families.primary, + fontSize: globalTokens.font.size200, + fontWeight: globalTokens.font.weight.regular as FontWeightValue, + secondaryContentFont: { + fontFamily: t.typography.families.secondary, + fontSize: globalTokens.font.size100, + fontWeight: globalTokens.font.weight.semibold as FontWeightValue, + }, + }, + }, + large: { + hasContent: { + fontFamily: t.typography.families.secondary, + fontSize: globalTokens.font.size400, + fontWeight: globalTokens.font.weight.semibold as FontWeightValue, + secondaryContentFont: { + fontFamily: t.typography.families.primary, + fontSize: globalTokens.font.size200, + fontWeight: globalTokens.font.weight.regular as FontWeightValue, + }, + }, + }, +}); diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts index e4785d73c0..ceb0388c19 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts @@ -1,44 +1 @@ -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 { CompoundButtonTokens } from './CompoundButton.types'; - -export const defaultCompoundButtonFontTokens: TokenSettings = (t: Theme): CompoundButtonTokens => ({ - medium: { - hasContent: { - fontFamily: t.typography.families.secondary, - fontSize: globalTokens.font.size200, - fontWeight: globalTokens.font.weight.semibold as FontWeightValue, - secondaryContentFont: { - fontFamily: t.typography.families.secondary, - fontSize: globalTokens.font.size100, - fontWeight: globalTokens.font.weight.semibold as FontWeightValue, - }, - }, - }, - small: { - hasContent: { - fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size200, - fontWeight: globalTokens.font.weight.regular as FontWeightValue, - secondaryContentFont: { - fontFamily: t.typography.families.secondary, - fontSize: globalTokens.font.size100, - fontWeight: globalTokens.font.weight.semibold as FontWeightValue, - }, - }, - }, - large: { - hasContent: { - fontFamily: t.typography.families.secondary, - fontSize: globalTokens.font.size400, - fontWeight: globalTokens.font.weight.semibold as FontWeightValue, - secondaryContentFont: { - fontFamily: t.typography.families.primary, - fontSize: globalTokens.font.size200, - fontWeight: globalTokens.font.weight.regular as FontWeightValue, - }, - }, - }, -}); +export { defaultCompoundButtonFontTokens } from './CompoundButtonFontTokens.win'; diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.windows.ts b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.windows.ts new file mode 100644 index 0000000000..ceb0388c19 --- /dev/null +++ b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.windows.ts @@ -0,0 +1 @@ +export { defaultCompoundButtonFontTokens } from './CompoundButtonFontTokens.win'; diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonTokens.win.ts b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.win.ts new file mode 100644 index 0000000000..d474eba9bb --- /dev/null +++ b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.win.ts @@ -0,0 +1,166 @@ +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 { CompoundButtonTokens } from './CompoundButton.types'; + +export const defaultCompoundButtonTokens: TokenSettings = (theme: Theme): CompoundButtonTokens => ({ + medium: { + padding: globalTokens.size120 - globalTokens.stroke.width10, + focused: { + padding: globalTokens.size120, + }, + primary: !isHighContrast(theme) && { + focused: { + borderWidth: globalTokens.stroke.width20, + padding: globalTokens.size120 - globalTokens.stroke.width20, + }, + square: { + focused: { + borderWidth: globalTokens.stroke.width10, + padding: globalTokens.size120 - globalTokens.stroke.width10, + }, + }, + }, + hasContent: { + paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, + minWidth: 96, + focused: { + paddingHorizontal: globalTokens.size120, + }, + primary: !isHighContrast(theme) && { + focused: { + paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width20, + }, + circular: { + focused: { + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width20, + }, + }, + square: { + focused: { + paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, + }, + }, + }, + hasIconAfter: { + spacingIconContentAfter: globalTokens.size120, + }, + hasIconBefore: { + spacingIconContentBefore: globalTokens.size120, + }, + circular: { + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, + focused: { + paddingHorizontal: globalTokens.size160, + }, + }, + }, + }, + small: { + padding: globalTokens.size80 - globalTokens.stroke.width10, + focused: { + borderWidth: 0, + padding: globalTokens.size80, + }, + primary: !isHighContrast(theme) && { + focused: { + borderWidth: globalTokens.stroke.width20, + padding: globalTokens.size80 - globalTokens.stroke.width20, + }, + square: { + focused: { + borderWidth: globalTokens.stroke.width10, + padding: globalTokens.size80 - globalTokens.stroke.width10, + }, + }, + }, + hasContent: { + paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10, + minWidth: 64, + focused: { + paddingHorizontal: globalTokens.size80, + }, + primary: !isHighContrast(theme) && { + focused: { + paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width20, + }, + circular: { + focused: { + paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width20, + }, + }, + square: { + focused: { + paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10, + }, + }, + }, + hasIconAfter: { + spacingIconContentAfter: globalTokens.size80, + }, + hasIconBefore: { + spacingIconContentBefore: globalTokens.size80, + }, + circular: { + paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, + focused: { + paddingHorizontal: globalTokens.size120, + }, + }, + }, + }, + large: { + padding: globalTokens.size160 - globalTokens.stroke.width10, + focused: { + padding: globalTokens.size160, + }, + primary: !isHighContrast(theme) && { + focused: { + borderWidth: globalTokens.stroke.width20, + padding: globalTokens.size160 - globalTokens.stroke.width20, + }, + square: { + focused: { + borderWidth: globalTokens.stroke.width10, + padding: globalTokens.size160 - globalTokens.stroke.width10, + }, + }, + }, + hasContent: { + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, + minWidth: 96, + focused: { + paddingHorizontal: globalTokens.size160, + }, + primary: !isHighContrast(theme) && { + focused: { + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width20, + }, + circular: { + focused: { + paddingHorizontal: globalTokens.size200 - globalTokens.stroke.width20, + }, + }, + square: { + focused: { + paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, + }, + }, + }, + hasIconAfter: { + spacingIconContentAfter: globalTokens.size160, + }, + hasIconBefore: { + spacingIconContentBefore: globalTokens.size160, + }, + circular: { + paddingHorizontal: globalTokens.size200 - globalTokens.stroke.width10, + focused: { + paddingHorizontal: globalTokens.size200, + }, + }, + }, + }, +}); diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonTokens.win32.ts b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.win32.ts index d474eba9bb..2a7bd3fa46 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonTokens.win32.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.win32.ts @@ -1,166 +1 @@ -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 { CompoundButtonTokens } from './CompoundButton.types'; - -export const defaultCompoundButtonTokens: TokenSettings = (theme: Theme): CompoundButtonTokens => ({ - medium: { - padding: globalTokens.size120 - globalTokens.stroke.width10, - focused: { - padding: globalTokens.size120, - }, - primary: !isHighContrast(theme) && { - focused: { - borderWidth: globalTokens.stroke.width20, - padding: globalTokens.size120 - globalTokens.stroke.width20, - }, - square: { - focused: { - borderWidth: globalTokens.stroke.width10, - padding: globalTokens.size120 - globalTokens.stroke.width10, - }, - }, - }, - hasContent: { - paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, - minWidth: 96, - focused: { - paddingHorizontal: globalTokens.size120, - }, - primary: !isHighContrast(theme) && { - focused: { - paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width20, - }, - circular: { - focused: { - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width20, - }, - }, - square: { - focused: { - paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, - }, - }, - }, - hasIconAfter: { - spacingIconContentAfter: globalTokens.size120, - }, - hasIconBefore: { - spacingIconContentBefore: globalTokens.size120, - }, - circular: { - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, - focused: { - paddingHorizontal: globalTokens.size160, - }, - }, - }, - }, - small: { - padding: globalTokens.size80 - globalTokens.stroke.width10, - focused: { - borderWidth: 0, - padding: globalTokens.size80, - }, - primary: !isHighContrast(theme) && { - focused: { - borderWidth: globalTokens.stroke.width20, - padding: globalTokens.size80 - globalTokens.stroke.width20, - }, - square: { - focused: { - borderWidth: globalTokens.stroke.width10, - padding: globalTokens.size80 - globalTokens.stroke.width10, - }, - }, - }, - hasContent: { - paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10, - minWidth: 64, - focused: { - paddingHorizontal: globalTokens.size80, - }, - primary: !isHighContrast(theme) && { - focused: { - paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width20, - }, - circular: { - focused: { - paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width20, - }, - }, - square: { - focused: { - paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10, - }, - }, - }, - hasIconAfter: { - spacingIconContentAfter: globalTokens.size80, - }, - hasIconBefore: { - spacingIconContentBefore: globalTokens.size80, - }, - circular: { - paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10, - focused: { - paddingHorizontal: globalTokens.size120, - }, - }, - }, - }, - large: { - padding: globalTokens.size160 - globalTokens.stroke.width10, - focused: { - padding: globalTokens.size160, - }, - primary: !isHighContrast(theme) && { - focused: { - borderWidth: globalTokens.stroke.width20, - padding: globalTokens.size160 - globalTokens.stroke.width20, - }, - square: { - focused: { - borderWidth: globalTokens.stroke.width10, - padding: globalTokens.size160 - globalTokens.stroke.width10, - }, - }, - }, - hasContent: { - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, - minWidth: 96, - focused: { - paddingHorizontal: globalTokens.size160, - }, - primary: !isHighContrast(theme) && { - focused: { - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width20, - }, - circular: { - focused: { - paddingHorizontal: globalTokens.size200 - globalTokens.stroke.width20, - }, - }, - square: { - focused: { - paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10, - }, - }, - }, - hasIconAfter: { - spacingIconContentAfter: globalTokens.size160, - }, - hasIconBefore: { - spacingIconContentBefore: globalTokens.size160, - }, - circular: { - paddingHorizontal: globalTokens.size200 - globalTokens.stroke.width10, - focused: { - paddingHorizontal: globalTokens.size200, - }, - }, - }, - }, -}); +export { defaultCompoundButtonTokens } from './CompoundButtonTokens.win'; diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonTokens.windows.ts b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.windows.ts new file mode 100644 index 0000000000..2a7bd3fa46 --- /dev/null +++ b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.windows.ts @@ -0,0 +1 @@ +export { defaultCompoundButtonTokens } from './CompoundButtonTokens.win'; diff --git a/packages/components/Button/src/ToggleButton/ToggleButton.tsx b/packages/components/Button/src/ToggleButton/ToggleButton.tsx index cae9858d0b..3e7eec1c4e 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButton.tsx +++ b/packages/components/Button/src/ToggleButton/ToggleButton.tsx @@ -22,7 +22,7 @@ export const ToggleButton = compose({ root: Pressable, icon: Icon, content: Text, - focusInnerBorder: Platform.OS === ('win32' as any) && View, + focusInnerBorder: (Platform.OS === ('win32' as any) || Platform.OS === 'windows') && View, }, useRender: (userProps: ToggleButtonProps, useSlots: UseSlots) => { const iconProps = createIconProps(userProps.icon); diff --git a/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts index cfcc4338fc..c06948a031 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts +++ b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts @@ -33,7 +33,6 @@ export const defaultToggleButtonColorTokens: TokenSettings { @@ -76,7 +76,8 @@ export const useButton = (props: ButtonProps): ButtonInfo => { const hasTogglePattern = props.accessibilityActions && !!props.accessibilityActions.find((action) => action.name === 'Toggle'); const theme = useFluentTheme(); - const shouldUseTwoToneFocusBorder = Platform.OS === ('win32' as any) && props.appearance === 'primary' && !isHighContrast(theme); + const shouldUseTwoToneFocusBorder = + (Platform.OS === ('win32' as any) || Platform.OS === 'windows') && props.appearance === 'primary' && !isHighContrast(theme); const [baseHeight, setBaseHeight] = React.useState(undefined); const [baseWidth, setBaseWidth] = React.useState(undefined); const onLayoutInner = React.useCallback( @@ -96,7 +97,7 @@ export const useButton = (props: ButtonProps): ButtonInfo => { return { props: { ...onKeyProps, - ...(Platform.OS === ('win32' as any) && { onKeyDown: onKeyDown }), + ...((Platform.OS === ('win32' as any) || Platform.OS === 'windows') && { onKeyDown: onKeyDown }), ...pressable.props, // allow user key events to override those set by us /** * https://github.com/facebook/react-native/issues/34986 diff --git a/packages/components/Checkbox/src/CheckboxTokens.win.ts b/packages/components/Checkbox/src/CheckboxTokens.win.ts new file mode 100644 index 0000000000..eef0d57871 --- /dev/null +++ b/packages/components/Checkbox/src/CheckboxTokens.win.ts @@ -0,0 +1,98 @@ +import type { 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 { CheckboxTokens } from './Checkbox.types'; + +export const defaultCheckboxTokens: TokenSettings = (t: Theme) => + ({ + requiredColor: t.colors.redForeground1, + requiredPadding: globalTokens.size80, + medium: { + borderRadius: globalTokens.corner.radius20, + checkboxBorderWidth: globalTokens.stroke.width10, + checkboxBorderRadius: globalTokens.corner.radius20, + checkboxSize: 16, + checkmarkSize: 12, + label: { + padding: globalTokens.size80, + paddingHorizontal: globalTokens.size120, + borderRadius: globalTokens.corner.radius40, + spacingLabelAfter: globalTokens.size80, + labelIsBefore: { + spacingLabelBefore: globalTokens.size80, + spacingLabelAfter: 0, + }, + }, + padding: globalTokens.size40, + fontSize: globalTokens.font.size200, + fontWeight: globalTokens.font.weight.regular, + fontFamily: t.typography.families.primary, + }, + large: { + borderRadius: globalTokens.corner.radius20, + checkboxBorderWidth: globalTokens.stroke.width10, + checkboxBorderRadius: globalTokens.corner.radius20, + checkboxSize: 20, + checkmarkSize: 16, + label: { + padding: globalTokens.size80, + borderRadius: globalTokens.corner.radius40, + spacingLabelAfter: globalTokens.size120, + labelIsBefore: { + spacingLabelBefore: globalTokens.size120, + spacingLabelAfter: 0, + }, + }, + padding: globalTokens.size40, + fontSize: globalTokens.font.size300, + fontWeight: globalTokens.font.weight.regular, + fontFamily: t.typography.families.primary, + }, + checkboxBackgroundColor: t.colors.neutralBackground1, + checkboxBorderColor: t.colors.neutralStrokeAccessible, + color: t.colors.neutralForeground1, + checkmarkOpacity: 0, + disabled: { + checkboxBorderColor: t.colors.neutralStrokeDisabled, + color: t.colors.neutralForegroundDisabled, + checkboxBackgroundColor: t.colors.neutralBackgroundDisabled, + }, + hovered: { + checkboxBackgroundColor: t.colors.neutralBackground1, + checkboxBorderColor: t.colors.neutralStrokeAccessibleHover, + checkmarkColor: t.colors.neutralForeground4, + checkmarkOpacity: 1, + color: t.colors.neutralForeground1, + checked: { + checkboxBackgroundColor: t.colors.brandBackgroundHover, + checkboxBorderColor: t.colors.compoundBrandStroke1Hover, + checkmarkColor: t.colors.neutralForegroundOnBrandHover, + }, + }, + pressed: { + checkboxBackgroundColor: t.colors.neutralBackground1, + checkboxBorderColor: t.colors.neutralStrokeAccessiblePressed, + checkmarkColor: t.colors.neutralForeground1, + checkmarkOpacity: 1, + color: t.colors.neutralForeground1, + checked: { + checkboxBackgroundColor: t.colors.brandBackgroundPressed, + checkboxBorderColor: t.colors.compoundBrandStroke1Pressed, + checkmarkColor: t.colors.neutralForegroundOnBrandPressed, + }, + }, + checked: { + checkboxBackgroundColor: t.colors.brandBackground, + checkboxBorderColor: t.colors.compoundBrandStroke1Hover, + checkmarkOpacity: 1, + checkmarkColor: t.colors.neutralForegroundOnBrand, + disabled: { + checkmarkColor: t.colors.neutralForegroundDisabled, + }, + }, + circular: { + borderRadius: globalTokens.corner.radiusCircular, + checkboxBorderRadius: globalTokens.corner.radiusCircular, + }, + } as CheckboxTokens); diff --git a/packages/components/Checkbox/src/CheckboxTokens.win32.ts b/packages/components/Checkbox/src/CheckboxTokens.win32.ts index eef0d57871..2cf5148103 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.win32.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.win32.ts @@ -1,98 +1 @@ -import type { 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 { CheckboxTokens } from './Checkbox.types'; - -export const defaultCheckboxTokens: TokenSettings = (t: Theme) => - ({ - requiredColor: t.colors.redForeground1, - requiredPadding: globalTokens.size80, - medium: { - borderRadius: globalTokens.corner.radius20, - checkboxBorderWidth: globalTokens.stroke.width10, - checkboxBorderRadius: globalTokens.corner.radius20, - checkboxSize: 16, - checkmarkSize: 12, - label: { - padding: globalTokens.size80, - paddingHorizontal: globalTokens.size120, - borderRadius: globalTokens.corner.radius40, - spacingLabelAfter: globalTokens.size80, - labelIsBefore: { - spacingLabelBefore: globalTokens.size80, - spacingLabelAfter: 0, - }, - }, - padding: globalTokens.size40, - fontSize: globalTokens.font.size200, - fontWeight: globalTokens.font.weight.regular, - fontFamily: t.typography.families.primary, - }, - large: { - borderRadius: globalTokens.corner.radius20, - checkboxBorderWidth: globalTokens.stroke.width10, - checkboxBorderRadius: globalTokens.corner.radius20, - checkboxSize: 20, - checkmarkSize: 16, - label: { - padding: globalTokens.size80, - borderRadius: globalTokens.corner.radius40, - spacingLabelAfter: globalTokens.size120, - labelIsBefore: { - spacingLabelBefore: globalTokens.size120, - spacingLabelAfter: 0, - }, - }, - padding: globalTokens.size40, - fontSize: globalTokens.font.size300, - fontWeight: globalTokens.font.weight.regular, - fontFamily: t.typography.families.primary, - }, - checkboxBackgroundColor: t.colors.neutralBackground1, - checkboxBorderColor: t.colors.neutralStrokeAccessible, - color: t.colors.neutralForeground1, - checkmarkOpacity: 0, - disabled: { - checkboxBorderColor: t.colors.neutralStrokeDisabled, - color: t.colors.neutralForegroundDisabled, - checkboxBackgroundColor: t.colors.neutralBackgroundDisabled, - }, - hovered: { - checkboxBackgroundColor: t.colors.neutralBackground1, - checkboxBorderColor: t.colors.neutralStrokeAccessibleHover, - checkmarkColor: t.colors.neutralForeground4, - checkmarkOpacity: 1, - color: t.colors.neutralForeground1, - checked: { - checkboxBackgroundColor: t.colors.brandBackgroundHover, - checkboxBorderColor: t.colors.compoundBrandStroke1Hover, - checkmarkColor: t.colors.neutralForegroundOnBrandHover, - }, - }, - pressed: { - checkboxBackgroundColor: t.colors.neutralBackground1, - checkboxBorderColor: t.colors.neutralStrokeAccessiblePressed, - checkmarkColor: t.colors.neutralForeground1, - checkmarkOpacity: 1, - color: t.colors.neutralForeground1, - checked: { - checkboxBackgroundColor: t.colors.brandBackgroundPressed, - checkboxBorderColor: t.colors.compoundBrandStroke1Pressed, - checkmarkColor: t.colors.neutralForegroundOnBrandPressed, - }, - }, - checked: { - checkboxBackgroundColor: t.colors.brandBackground, - checkboxBorderColor: t.colors.compoundBrandStroke1Hover, - checkmarkOpacity: 1, - checkmarkColor: t.colors.neutralForegroundOnBrand, - disabled: { - checkmarkColor: t.colors.neutralForegroundDisabled, - }, - }, - circular: { - borderRadius: globalTokens.corner.radiusCircular, - checkboxBorderRadius: globalTokens.corner.radiusCircular, - }, - } as CheckboxTokens); +export { defaultCheckboxTokens } from './CheckboxTokens.win'; diff --git a/packages/components/Checkbox/src/CheckboxTokens.windows.ts b/packages/components/Checkbox/src/CheckboxTokens.windows.ts index 18ddf95d03..2cf5148103 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.windows.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.windows.ts @@ -1,93 +1 @@ -import type { 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 { CheckboxTokens } from './Checkbox.types'; - -export const defaultCheckboxTokens: TokenSettings = (t: Theme) => - ({ - requiredColor: t.colors.redForeground1, - requiredPadding: globalTokens.size80, - medium: { - borderRadius: globalTokens.corner.radius20, - checkboxBorderWidth: globalTokens.stroke.width10, - checkboxBorderRadius: globalTokens.corner.radius20, - checkboxSize: 16, - checkmarkSize: 8, - spacingLabelAfter: globalTokens.size120, - label: { - padding: globalTokens.size80, - borderRadius: globalTokens.corner.radius40, - spacingLabelAfter: globalTokens.size120, - labelIsBefore: { - spacingLabelBefore: globalTokens.size120, - spacingLabelAfter: 0, - }, - }, - padding: globalTokens.size40, - variant: 'bodyStandard', - }, - large: { - borderRadius: globalTokens.corner.radius20, - checkboxBorderWidth: globalTokens.stroke.width10, - checkboxBorderRadius: globalTokens.corner.radius20, - checkboxSize: 20, - checkmarkSize: 10, - spacingLabelAfter: globalTokens.size120, - label: { - padding: globalTokens.size80, - borderRadius: globalTokens.corner.radius40, - spacingLabelAfter: globalTokens.size120, - labelIsBefore: { - spacingLabelBefore: globalTokens.size120, - spacingLabelAfter: 0, - }, - }, - padding: globalTokens.size40, - variant: 'bodyStandard', - }, - checkboxBackgroundColor: t.colors.neutralBackground1, - checkboxBorderColor: t.colors.neutralStrokeAccessible, - color: t.colors.neutralForeground3, - checkmarkOpacity: 0, - disabled: { - checkboxBorderColor: t.colors.neutralStrokeDisabled, - color: t.colors.neutralForegroundDisabled, - checkboxBackgroundColor: t.colors.neutralBackgroundDisabled, - }, - hovered: { - checkboxBackgroundColor: t.colors.neutralBackground1, - checkboxBorderColor: t.colors.neutralStrokeAccessibleHover, - color: t.colors.neutralForeground2, - checked: { - checkboxBackgroundColor: t.colors.compoundBrandBackground1Hover, - checkboxBorderColor: t.colors.compoundBrandBackground1Hover, - checkmarkColor: t.colors.neutralForegroundOnBrand, - checkmarkOpacity: 1, - }, - }, - pressed: { - checkboxBackgroundColor: t.colors.neutralBackground1, - checkboxBorderColor: t.colors.neutralStrokeAccessiblePressed, - color: t.colors.neutralForeground1, - checked: { - checkboxBackgroundColor: t.colors.compoundBrandBackground1Pressed, - checkboxBorderColor: t.colors.compoundBrandBackground1Pressed, - checkmarkColor: t.colors.neutralForegroundOnBrand, - checkmarkOpacity: 1, - }, - }, - checked: { - checkboxBackgroundColor: t.colors.compoundBrandBackground1, - checkboxBorderColor: t.colors.compoundBrandBackground1, - checkmarkOpacity: 1, - checkmarkColor: t.colors.neutralForegroundOnBrand, - disabled: { - checkmarkColor: t.colors.neutralForegroundDisabled, - }, - }, - circular: { - borderRadius: globalTokens.corner.radiusCircular, - checkboxBorderRadius: globalTokens.corner.radiusCircular, - }, - } as CheckboxTokens); +export { defaultCheckboxTokens } from './CheckboxTokens.win'; diff --git a/packages/components/Checkbox/src/shouldUseThickCheckmark.win.ts b/packages/components/Checkbox/src/shouldUseThickCheckmark.win.ts new file mode 100644 index 0000000000..2119db5452 --- /dev/null +++ b/packages/components/Checkbox/src/shouldUseThickCheckmark.win.ts @@ -0,0 +1,10 @@ +import type { Theme } from '@fluentui-react-native/framework'; +import { isHighContrast } from '@fluentui-react-native/theming-utils'; + +export function shouldUseThickCheckmark(theme: Theme): boolean { + if (isHighContrast(theme)) { + return true; + } + + return false; +} diff --git a/packages/components/Checkbox/src/shouldUseThickCheckmark.win32.ts b/packages/components/Checkbox/src/shouldUseThickCheckmark.win32.ts index 2119db5452..d55924d7f9 100644 --- a/packages/components/Checkbox/src/shouldUseThickCheckmark.win32.ts +++ b/packages/components/Checkbox/src/shouldUseThickCheckmark.win32.ts @@ -1,10 +1 @@ -import type { Theme } from '@fluentui-react-native/framework'; -import { isHighContrast } from '@fluentui-react-native/theming-utils'; - -export function shouldUseThickCheckmark(theme: Theme): boolean { - if (isHighContrast(theme)) { - return true; - } - - return false; -} +export { shouldUseThickCheckmark } from './shouldUseThickCheckmark.win'; diff --git a/packages/components/Checkbox/src/shouldUseThickCheckmark.windows.ts b/packages/components/Checkbox/src/shouldUseThickCheckmark.windows.ts new file mode 100644 index 0000000000..d55924d7f9 --- /dev/null +++ b/packages/components/Checkbox/src/shouldUseThickCheckmark.windows.ts @@ -0,0 +1 @@ +export { shouldUseThickCheckmark } from './shouldUseThickCheckmark.win';