microsoft
/
fluentui-react-native
зеркало из https://github.com/microsoft/fluentui-react-native.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

prettier

This commit is contained in:
Andrew Coates 2024-06-04 08:47:48 -07:00
Родитель 6a67f084fc
Коммит 40526c7ade
35 изменённых файлов: 643 добавлений и 670 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
packages/components/Button/src/Button.tsx
Просмотреть файл

@ -10,7 +10,7 @@ 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 type { Theme } from '@fluentui-react-native/theme-types';
import { stylingSettings } from './Button.styling';
import { buttonName } from './Button.types';
@ -28,7 +28,6 @@ import { useButton } from './useButton';
* @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, 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;

4
packages/components/Button/src/Button.types.ts
Просмотреть файл

@ -70,7 +70,7 @@ export interface ButtonCoreTokens extends LayoutTokens, FontTokens, IBorderToken
/**
* The default size of the button
*/
size?: ButtonSize,
size?: ButtonSize;
}
export interface ButtonTokens extends ButtonCoreTokens {
@ -95,7 +95,7 @@ export interface ButtonTokens extends ButtonCoreTokens {
square?: ButtonTokens;
hasIconAfter?: ButtonTokens;
/**
/**
* Returns the default appearance type, and can remap ButtonAppearances to other Appearances for this theme
*/
getPlatformSpecificAppearance?: (appearance: ButtonAppearance) => ButtonAppearance;

4
packages/components/Button/src/CompoundButton/CompoundButton.styling.ts
Просмотреть файл

@ -7,9 +7,7 @@ import type { CompoundButtonTokens, CompoundButtonSlotProps, CompoundButtonProps
import { buttonStates, contentStyling } from '../Button.styling';
export const stylingSettings: UseStylingOptions<CompoundButtonProps, CompoundButtonSlotProps, CompoundButtonTokens> = {
tokens: [
compoundButtonName,
],
tokens: [compoundButtonName],
states: buttonStates,
slotProps: {
root: buildProps(

2
packages/theming/android-theme/src/__tests__/android-theme.test.ts
Просмотреть файл

@ -55,4 +55,4 @@ describe('verify types', () => {
const fabColorTokens: FABTokens = defaultFABColorTokens(officeTheme);
expect(fabColorTokens).toBeTruthy();
});
})
});

149
packages/theming/android-theme/src/components/Button/ButtonColorTokens.ts
Просмотреть файл

@ -1,78 +1,77 @@
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonColorTokens = (t: Theme) =>
({
/** Android does not have a different styles for 'default' button.
* 'primary', 'accent' and if no appearance is mentioned, picks this.
*/
backgroundColor: t.colors.brandBackground,
rippleColor: '#D4D4D4',
color: t.colors.neutralForegroundOnColor,
iconColor: t.colors.neutralForegroundOnColor,
disabled: {
backgroundColor: t.colors.neutralBackground5,
color: t.colors.neutralForegroundDisabled1,
iconColor: t.colors.neutralForegroundDisabled1,
},
pressed: {
backgroundColor: t.colors.brandBackgroundPressed,
color: t.colors.neutralForegroundOnColor,
iconColor: t.colors.neutralForegroundOnColor,
},
focused: {
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnColor,
borderColor: t.colors.strokeFocus2,
borderInnerColor: t.colors.strokeFocus1,
iconColor: t.colors.neutralForegroundOnColor,
},
subtle: {
backgroundColor: 'transparent',
rippleColor: '#D4D4D4',
color: t.colors.brandForeground1,
iconColor: t.colors.brandForeground1,
disabled: {
backgroundColor: 'transparent',
color: t.colors.neutralForegroundDisabled1,
iconColor: t.colors.neutralForegroundDisabled1,
},
pressed: {
backgroundColor: 'transparent',
color: t.colors.brandForeground1Pressed,
iconColor: t.colors.brandForeground1Pressed,
},
focused: {
backgroundColor: 'transparent',
borderColor: t.colors.strokeFocus2,
borderInnerColor: t.colors.strokeFocus1,
color: t.colors.brandForeground1,
iconColor: t.colors.brandForeground1,
},
},
outline: {
backgroundColor: 'transparent',
rippleColor: '#D4D4D4',
color: t.colors.brandForeground1,
iconColor: t.colors.brandForeground1,
borderColor: t.colors.brandStroke1,
disabled: {
backgroundColor: 'transparent',
color: t.colors.neutralForegroundDisabled1,
iconColor: t.colors.neutralForegroundDisabled1,
borderColor: t.colors.neutralStrokeDisabled,
},
pressed: {
backgroundColor: 'transparent',
color: t.colors.brandForeground1Pressed,
iconColor: t.colors.brandForeground1Pressed,
borderColor: t.colors.brandStroke1Pressed,
},
focused: {
backgroundColor: 'transparent',
borderColor: t.colors.strokeFocus2,
borderInnerColor: t.colors.strokeFocus1,
color: t.colors.brandForeground1,
iconColor: t.colors.brandForeground1,
},
},
export const defaultButtonColorTokens = (t: Theme) => ({
/** Android does not have a different styles for 'default' button.
* 'primary', 'accent' and if no appearance is mentioned, picks this.
*/
backgroundColor: t.colors.brandBackground,
rippleColor: '#D4D4D4',
color: t.colors.neutralForegroundOnColor,
iconColor: t.colors.neutralForegroundOnColor,
disabled: {
backgroundColor: t.colors.neutralBackground5,
color: t.colors.neutralForegroundDisabled1,
iconColor: t.colors.neutralForegroundDisabled1,
},
pressed: {
backgroundColor: t.colors.brandBackgroundPressed,
color: t.colors.neutralForegroundOnColor,
iconColor: t.colors.neutralForegroundOnColor,
},
focused: {
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnColor,
borderColor: t.colors.strokeFocus2,
borderInnerColor: t.colors.strokeFocus1,
iconColor: t.colors.neutralForegroundOnColor,
},
subtle: {
backgroundColor: 'transparent',
rippleColor: '#D4D4D4',
color: t.colors.brandForeground1,
iconColor: t.colors.brandForeground1,
disabled: {
backgroundColor: 'transparent',
color: t.colors.neutralForegroundDisabled1,
iconColor: t.colors.neutralForegroundDisabled1,
},
pressed: {
backgroundColor: 'transparent',
color: t.colors.brandForeground1Pressed,
iconColor: t.colors.brandForeground1Pressed,
},
focused: {
backgroundColor: 'transparent',
borderColor: t.colors.strokeFocus2,
borderInnerColor: t.colors.strokeFocus1,
color: t.colors.brandForeground1,
iconColor: t.colors.brandForeground1,
},
},
outline: {
backgroundColor: 'transparent',
rippleColor: '#D4D4D4',
color: t.colors.brandForeground1,
iconColor: t.colors.brandForeground1,
borderColor: t.colors.brandStroke1,
disabled: {
backgroundColor: 'transparent',
color: t.colors.neutralForegroundDisabled1,
iconColor: t.colors.neutralForegroundDisabled1,
borderColor: t.colors.neutralStrokeDisabled,
},
pressed: {
backgroundColor: 'transparent',
color: t.colors.brandForeground1Pressed,
iconColor: t.colors.brandForeground1Pressed,
borderColor: t.colors.brandStroke1Pressed,
},
focused: {
backgroundColor: 'transparent',
borderColor: t.colors.strokeFocus2,
borderInnerColor: t.colors.strokeFocus1,
color: t.colors.brandForeground1,
iconColor: t.colors.brandForeground1,
},
},
});

34
packages/theming/android-theme/src/components/Button/ButtonFontTokens.ts
Просмотреть файл

@ -1,21 +1,19 @@
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonFontTokens = (t: Theme) =>
({
medium: {
fontSize: t.typography.variants.body2Strong.size,
fontFamily: t.typography.variants.body2Strong.face,
fontWeight: t.typography.variants.body2Strong.weight,
},
small: {
fontSize: t.typography.variants.body2Strong.size,
fontFamily: t.typography.variants.body2Strong.face,
fontWeight: t.typography.variants.body2Strong.weight,
},
large: {
fontSize: t.typography.variants.body1Strong.size,
fontFamily: t.typography.variants.body1Strong.face,
fontWeight: t.typography.variants.body1Strong.weight,
},
export const defaultButtonFontTokens = (t: Theme) => ({
medium: {
fontSize: t.typography.variants.body2Strong.size,
fontFamily: t.typography.variants.body2Strong.face,
fontWeight: t.typography.variants.body2Strong.weight,
},
small: {
fontSize: t.typography.variants.body2Strong.size,
fontFamily: t.typography.variants.body2Strong.face,
fontWeight: t.typography.variants.body2Strong.weight,
},
large: {
fontSize: t.typography.variants.body1Strong.size,
fontFamily: t.typography.variants.body1Strong.face,
fontWeight: t.typography.variants.body1Strong.weight,
},
});

12
packages/theming/android-theme/src/components/Button/ButtonTheme.ts
Просмотреть файл

@ -1,4 +1,3 @@
import { immutableMerge } from '@fluentui-react-native/immutable-merge';
import type { Theme } from '@fluentui-react-native/theme-types';
@ -9,16 +8,15 @@ import { defaultFABColorTokens } from './FABColorTokens';
import { defaultFABTokens } from './FABTokens';
import { defaultToggleButtonColorTokens } from './ToggleButtonColorTokens';
export const defaultButtonTheme = (theme: Theme) =>
({
export const defaultButtonTheme = (theme: Theme) => ({
components: {
Button: immutableMerge<object>(defaultButtonColorTokens(theme), defaultButtonFontTokens(theme), defaultButtonTokens(theme)),
FAB: immutableMerge<object>(defaultFABTokens(theme), defaultFABColorTokens(theme)),
ToggleButton:
immutableMerge<object>(
ToggleButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonFontTokens(theme),
defaultButtonColorTokens(theme),
defaultToggleButtonColorTokens(theme)),
}
defaultToggleButtonColorTokens(theme),
),
},
});

5
packages/theming/android-theme/src/components/Button/ButtonTokens.ts
Просмотреть файл

@ -3,8 +3,7 @@ import type { DimensionValue } from 'react-native';
import { globalTokensAndroid as globalTokens } from '@fluentui-react-native/theme-tokens';
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonTokens = (_t: Theme) =>
({
export const defaultButtonTokens = (_t: Theme) => ({
focused: {
borderWidth: globalTokens.stroke.width20,
borderInnerWidth: globalTokens.stroke.width10,
@ -92,5 +91,5 @@ export const defaultButtonTokens = (_t: Theme) =>
default:
return 'primary';
}
}
},
});

99
packages/theming/android-theme/src/components/Button/FABTokens.ts
Просмотреть файл

@ -1,8 +1,20 @@
import {globalTokensAndroid as globalTokens} from '@fluentui-react-native/theme-tokens';
import { globalTokensAndroid as globalTokens } from '@fluentui-react-native/theme-tokens';
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultFABTokens = (t: Theme) =>
({
export const defaultFABTokens = (t: Theme) => ({
elevation: t.shadows.shadow8.key.blur,
disabled: {
elevation: 0,
},
pressed: {
elevation: t.shadows.shadow2.key.blur,
},
focused: {
elevation: t.shadows.shadow2.key.blur,
borderWidth: globalTokens.stroke.width20,
borderInnerWidth: globalTokens.stroke.width10,
},
subtle: {
elevation: t.shadows.shadow8.key.blur,
disabled: {
elevation: 0,
@ -15,62 +27,49 @@ export const defaultFABTokens = (t: Theme) =>
borderWidth: globalTokens.stroke.width20,
borderInnerWidth: globalTokens.stroke.width10,
},
subtle: {
elevation: t.shadows.shadow8.key.blur,
disabled: {
elevation: 0,
},
pressed: {
elevation: t.shadows.shadow2.key.blur,
},
focused: {
elevation: t.shadows.shadow2.key.blur,
borderWidth: globalTokens.stroke.width20,
borderInnerWidth: globalTokens.stroke.width10,
},
},
large: {
},
large: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 24,
minHeight: 56,
minWidth: 56,
paddingHorizontal: globalTokens.size160,
paddingVertical: globalTokens.size160,
spacingIconContentBefore: 0,
hasContent: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 24,
fontSize: t.typography.variants.body1Strong.size,
fontFamily: t.typography.variants.body1Strong.face,
fontWeight: t.typography.variants.body1Strong.weight,
minHeight: 56,
minWidth: 56,
paddingHorizontal: globalTokens.size160,
paddingStart: globalTokens.size160,
paddingEnd: globalTokens.size200,
paddingVertical: globalTokens.size160,
spacingIconContentBefore: 0,
hasContent: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 24,
fontSize: t.typography.variants.body1Strong.size,
fontFamily: t.typography.variants.body1Strong.face,
fontWeight: t.typography.variants.body1Strong.weight,
minHeight: 56,
minWidth: 56,
paddingStart: globalTokens.size160,
paddingEnd: globalTokens.size200,
paddingVertical: globalTokens.size160,
spacingIconContentBefore: globalTokens.size80,
},
spacingIconContentBefore: globalTokens.size80,
},
small: {
},
small: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 20,
minHeight: 44,
minWidth: 44,
paddingHorizontal: globalTokens.size120,
paddingVertical: globalTokens.size120,
spacingIconContentBefore: 0,
hasContent: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 20,
fontSize: t.typography.variants.body2Strong.size,
fontFamily: t.typography.variants.body2Strong.face,
fontWeight: t.typography.variants.body2Strong.weight,
minHeight: 44,
minWidth: 44,
paddingHorizontal: globalTokens.size120,
paddingVertical: globalTokens.size120,
spacingIconContentBefore: 0,
hasContent: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 20,
fontSize: t.typography.variants.body2Strong.size,
fontFamily: t.typography.variants.body2Strong.face,
fontWeight: t.typography.variants.body2Strong.weight,
minHeight: 44,
minWidth: 44,
paddingHorizontal: globalTokens.size120,
paddingStart: globalTokens.size120,
paddingEnd: globalTokens.size160,
spacingIconContentBefore: globalTokens.size80,
},
paddingStart: globalTokens.size120,
paddingEnd: globalTokens.size160,
spacingIconContentBefore: globalTokens.size80,
},
});
},
});

22
packages/theming/android-theme/src/createAndroidTheme.ts
Просмотреть файл

@ -7,16 +7,18 @@ import { getAndroidTheme } from './androidTheme';
import { defaultButtonTheme } from './components/Button/ButtonTheme';
export function createAndroidTheme(options: ThemeOptions = {}): ThemeReference {
const themeRef = new ThemeReference<Theme, PartialTheme>({} as Theme,
() => {
// Stub out HC and darkElevated on Android
const current =
options.appearance === 'dynamic' || options.appearance === 'highContrast' || options.appearance === 'darkElevated'
? (Appearance && Appearance.getColorScheme()) || 'light'
: options.appearance;
return getAndroidTheme(current);
},
defaultButtonTheme);
const themeRef = new ThemeReference<Theme, PartialTheme>(
{} as Theme,
() => {
// Stub out HC and darkElevated on Android
const current =
options.appearance === 'dynamic' || options.appearance === 'highContrast' || options.appearance === 'darkElevated'
? (Appearance && Appearance.getColorScheme()) || 'light'
: options.appearance;
return getAndroidTheme(current);
},
defaultButtonTheme,
);
if (Appearance && options.appearance === 'dynamic') {
Appearance.addChangeListener(() => {

2
packages/theming/apple-theme/src/__tests__/apple-theme.test.ts
Просмотреть файл

@ -87,4 +87,4 @@ describe('verify types', () => {
const fabTokens: FABTokens = defaultFABTokens(officeTheme);
expect(fabTokens).toBeTruthy();
});
})
});

155
packages/theming/apple-theme/src/components/Button/ButtonColorTokens.macos.ts
Просмотреть файл

@ -1,93 +1,92 @@
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonColorTokens = (t: Theme) =>
({
export const defaultButtonColorTokens = (t: Theme) => ({
backgroundColor: t.colors.defaultBackground,
color: t.colors.defaultContent,
borderColor: t.colors.defaultBorder,
iconColor: t.colors.defaultContent,
disabled: {
backgroundColor: t.colors.defaultDisabledBackground,
color: t.colors.defaultDisabledContent,
borderColor: t.colors.defaultDisabledBorder,
iconColor: t.colors.defaultDisabledIcon,
},
hovered: {
backgroundColor: t.colors.defaultBackground,
color: t.colors.defaultContent,
borderColor: t.colors.defaultBorder,
iconColor: t.colors.defaultContent,
iconColor: t.colors.defaultHoveredIcon,
},
pressed: {
backgroundColor: t.colors.defaultPressedBackground,
color: t.colors.defaultPressedContent,
borderColor: t.colors.defaultBorder,
iconColor: t.colors.defaultPressedIcon,
},
focused: {
backgroundColor: t.colors.defaultFocusedBackground,
color: t.colors.defaultFocusedContent,
borderColor: t.colors.defaultFocusedBorder,
icon: t.colors.defaultFocusedIcon,
},
primary: {
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnBrand,
borderColor: t.colors.brandStroke1,
iconColor: t.colors.neutralForegroundOnBrand,
disabled: {
backgroundColor: t.colors.defaultDisabledBackground,
color: t.colors.defaultDisabledContent,
borderColor: t.colors.defaultDisabledBorder,
iconColor: t.colors.defaultDisabledIcon,
backgroundColor: t.colors.neutralBackgroundDisabled,
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.brandBackgroundHover,
color: t.colors.neutralForegroundOnBrandHover,
borderColor: t.colors.brandBackgroundHover,
iconColor: t.colors.neutralForegroundOnBrandHover,
},
pressed: {
backgroundColor: t.colors.defaultPressedBackground,
color: t.colors.defaultPressedContent,
borderColor: t.colors.defaultBorder,
iconColor: t.colors.defaultPressedIcon,
backgroundColor: t.colors.brandBackgroundPressed,
color: t.colors.neutralForegroundOnBrandPressed,
borderColor: t.colors.brandBackgroundPressed,
iconColor: t.colors.neutralForegroundOnBrandPressed,
},
focused: {
backgroundColor: t.colors.defaultFocusedBackground,
color: t.colors.defaultFocusedContent,
borderColor: t.colors.defaultFocusedBorder,
icon: t.colors.defaultFocusedIcon,
backgroundColor: t.colors.brandBackgroundHover,
color: t.colors.neutralForegroundOnBrandHover,
borderColor: t.colors.strokeFocus2,
iconColor: t.colors.neutralForegroundOnBrandHover,
},
primary: {
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnBrand,
borderColor: t.colors.brandStroke1,
iconColor: t.colors.neutralForegroundOnBrand,
disabled: {
backgroundColor: t.colors.neutralBackgroundDisabled,
color: t.colors.neutralForegroundDisabled,
borderColor: t.colors.neutralStrokeDisabled,
iconColor: t.colors.neutralForegroundDisabled,
},
hovered: {
backgroundColor: t.colors.brandBackgroundHover,
color: t.colors.neutralForegroundOnBrandHover,
borderColor: t.colors.brandBackgroundHover,
iconColor: t.colors.neutralForegroundOnBrandHover,
},
pressed: {
backgroundColor: t.colors.brandBackgroundPressed,
color: t.colors.neutralForegroundOnBrandPressed,
borderColor: t.colors.brandBackgroundPressed,
iconColor: t.colors.neutralForegroundOnBrandPressed,
},
focused: {
backgroundColor: t.colors.brandBackgroundHover,
color: t.colors.neutralForegroundOnBrandHover,
borderColor: t.colors.strokeFocus2,
iconColor: t.colors.neutralForegroundOnBrandHover,
},
},
subtle: {
backgroundColor: t.colors.ghostBackground,
color: t.colors.ghostContent,
borderColor: t.colors.ghostBorder,
iconColor: t.colors.ghostIcon,
disabled: {
color: t.colors.ghostDisabledContent,
borderColor: t.colors.ghostDisabledBorder,
backgroundColor: t.colors.ghostDisabledBackground,
iconColor: t.colors.ghostDisabledIcon,
},
subtle: {
backgroundColor: t.colors.ghostBackground,
color: t.colors.ghostContent,
borderColor: t.colors.ghostBorder,
iconColor: t.colors.ghostIcon,
disabled: {
color: t.colors.ghostDisabledContent,
borderColor: t.colors.ghostDisabledBorder,
backgroundColor: t.colors.ghostDisabledBackground,
iconColor: t.colors.ghostDisabledIcon,
},
hovered: {
backgroundColor: t.colors.ghostHoveredBackground,
color: t.colors.ghostHoveredContent,
borderColor: t.colors.ghostHoveredBorder,
iconColor: t.colors.ghostHoveredIcon,
},
pressed: {
backgroundColor: t.colors.ghostPressedBackground,
borderColor: t.colors.ghostPressedBorder,
color: t.colors.ghostPressedContent,
icon: t.colors.ghostPressedIcon,
},
focused: {
borderColor: t.colors.ghostFocusedBorder,
backgroundColor: t.colors.ghostFocusedBackground,
color: t.colors.ghostFocusedContent,
icon: t.colors.ghostFocusedIcon,
},
hovered: {
backgroundColor: t.colors.ghostHoveredBackground,
color: t.colors.ghostHoveredContent,
borderColor: t.colors.ghostHoveredBorder,
iconColor: t.colors.ghostHoveredIcon,
},
} );
pressed: {
backgroundColor: t.colors.ghostPressedBackground,
borderColor: t.colors.ghostPressedBorder,
color: t.colors.ghostPressedContent,
icon: t.colors.ghostPressedIcon,
},
focused: {
borderColor: t.colors.ghostFocusedBorder,
backgroundColor: t.colors.ghostFocusedBackground,
color: t.colors.ghostFocusedContent,
icon: t.colors.ghostFocusedIcon,
},
},
});

4
packages/theming/apple-theme/src/components/Button/ButtonColorTokens.ts
Просмотреть файл

@ -1,5 +1,3 @@
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonColorTokens = (_t: Theme) =>
({
});
export const defaultButtonColorTokens = (_t: Theme) => ({});

35
packages/theming/apple-theme/src/components/Button/ButtonFontTokens.ios.ts
Просмотреть файл

@ -1,20 +1,19 @@
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonFontTokens = (t: Theme) =>
({
medium: {
fontSize: t.typography.variants.caption1Strong!.size,
fontFamily: t.typography.variants.caption1Strong!.face,
fontWeight: t.typography.variants.caption1Strong!.weight,
},
small: {
fontSize: t.typography.variants.caption1Strong!.size,
fontFamily: t.typography.variants.caption1Strong!.face,
fontWeight: t.typography.variants.caption1Strong!.weight,
},
large: {
fontSize: t.typography.variants.body1Strong!.size,
fontFamily: t.typography.variants.body1Strong!.face,
fontWeight: t.typography.variants.body1Strong!.weight,
},
});
export const defaultButtonFontTokens = (t: Theme) => ({
medium: {
fontSize: t.typography.variants.caption1Strong!.size,
fontFamily: t.typography.variants.caption1Strong!.face,
fontWeight: t.typography.variants.caption1Strong!.weight,
},
small: {
fontSize: t.typography.variants.caption1Strong!.size,
fontFamily: t.typography.variants.caption1Strong!.face,
fontWeight: t.typography.variants.caption1Strong!.weight,
},
large: {
fontSize: t.typography.variants.body1Strong!.size,
fontFamily: t.typography.variants.body1Strong!.face,
fontWeight: t.typography.variants.body1Strong!.weight,
},
});

27
packages/theming/apple-theme/src/components/Button/ButtonFontTokens.macos.ts
Просмотреть файл

@ -1,18 +1,17 @@
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonFontTokens = (_t: Theme) =>
({
medium: {
hasContent: {
variant: 'bodyStandard',
},
export const defaultButtonFontTokens = (_t: Theme) => ({
medium: {
hasContent: {
variant: 'bodyStandard',
},
small: {
hasContent: {
variant: 'secondaryStandard',
},
},
small: {
hasContent: {
variant: 'secondaryStandard',
},
large: {
variant: 'subheaderSemibold',
},
});
},
large: {
variant: 'subheaderSemibold',
},
});

4
packages/theming/apple-theme/src/components/Button/ButtonFontTokens.ts
Просмотреть файл

@ -1,5 +1,3 @@
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonFontTokens = (_t: Theme) =>
({
});
export const defaultButtonFontTokens = (_t: Theme) => ({});

18
packages/theming/apple-theme/src/components/Button/ButtonTheme.ios.ts
Просмотреть файл

@ -1,4 +1,3 @@
import { immutableMerge } from '@fluentui-react-native/immutable-merge';
import type { Theme } from '@fluentui-react-native/theme-types';
@ -12,25 +11,24 @@ import { defaultFABColorTokens } from './FABColorTokens.ios';
import { defaultFABTokens } from './FABTokens.ios';
import { defaultToggleButtonColorTokens } from './ToggleButtonColorTokens';
export const defaultButtonTheme = (theme: Theme) =>
({
export const defaultButtonTheme = (theme: Theme) => ({
components: {
Button: immutableMerge<object>(defaultButtonColorTokens(theme), defaultButtonFontTokens(theme), defaultButtonTokens(theme)),
CompoundButton:
immutableMerge<object>(
CompoundButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonColorTokens(theme),
defaultCompoundButtonColorTokens(theme),
defaultCompoundButtonFontTokens(theme),
defaultCompoundButtonTokens(theme)),
defaultCompoundButtonTokens(theme),
),
FAB: immutableMerge<object>(defaultFABTokens(theme), defaultFABColorTokens(theme)),
ToggleButton:
immutableMerge<object>(
ToggleButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonFontTokens(theme),
defaultButtonColorTokens(theme),
defaultToggleButtonColorTokens(theme)),
}
defaultToggleButtonColorTokens(theme),
),
},
});

18
packages/theming/apple-theme/src/components/Button/ButtonTheme.ts
Просмотреть файл

@ -1,4 +1,3 @@
import { immutableMerge } from '@fluentui-react-native/immutable-merge';
import type { Theme } from '@fluentui-react-native/theme-types';
@ -10,23 +9,22 @@ import { defaultCompoundButtonFontTokens } from './CompoundButtonFontTokens';
import { defaultCompoundButtonTokens } from './CompoundButtonTokens';
import { defaultToggleButtonColorTokens } from './ToggleButtonColorTokens';
export const defaultButtonTheme = (theme: Theme) =>
({
export const defaultButtonTheme = (theme: Theme) => ({
components: {
Button: immutableMerge<object>(defaultButtonColorTokens(theme), defaultButtonFontTokens(theme), defaultButtonTokens(theme)),
CompoundButton:
immutableMerge<object>(
CompoundButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonColorTokens(theme),
defaultCompoundButtonColorTokens(theme),
defaultCompoundButtonFontTokens(theme),
defaultCompoundButtonTokens(theme)),
defaultCompoundButtonTokens(theme),
),
ToggleButton:
immutableMerge<object>(
ToggleButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonFontTokens(theme),
defaultButtonColorTokens(theme),
defaultToggleButtonColorTokens(theme)),
}
defaultToggleButtonColorTokens(theme),
),
},
});

122
packages/theming/apple-theme/src/components/Button/ButtonTokens.ios.ts
Просмотреть файл

@ -1,79 +1,77 @@
import type { DimensionValue } from 'react-native';
import {globalTokensIOS as globalTokens} from '@fluentui-react-native/theme-tokens';
import { globalTokensIOS as globalTokens } from '@fluentui-react-native/theme-tokens';
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonTokens = (_t: Theme) =>
({
block: {
width: '100%' as DimensionValue,
export const defaultButtonTokens = (_t: Theme) => ({
block: {
width: '100%' as DimensionValue,
},
medium: {
paddingHorizontal: globalTokens.size120,
borderWidth: globalTokens.stroke.width10,
borderRadius: globalTokens.corner.radius80,
minHeight: 40,
iconSize: 20,
focused: {
borderWidth: 0,
},
medium: {
paddingHorizontal: globalTokens.size120,
borderWidth: globalTokens.stroke.width10,
borderRadius: globalTokens.corner.radius80,
minHeight: 40,
iconSize: 20,
focused: {
borderWidth: 0,
hasContent: {
minWidth: 96,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size80,
},
hasContent: {
minWidth: 96,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size80,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size80,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size80,
},
},
small: {
paddingHorizontal: globalTokens.size60,
borderWidth: globalTokens.stroke.width10,
borderRadius: globalTokens.corner.radius80,
},
small: {
paddingHorizontal: globalTokens.size60,
borderWidth: globalTokens.stroke.width10,
borderRadius: globalTokens.corner.radius80,
minHeight: 28,
iconSize: 16,
focused: {
borderWidth: 0,
},
hasContent: {
minWidth: 64,
minHeight: 28,
iconSize: 16,
focused: {
borderWidth: 0,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size40,
},
hasContent: {
minWidth: 64,
minHeight: 28,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size40,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size40,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size40,
},
},
large: {
paddingHorizontal: globalTokens.size160,
borderWidth: globalTokens.stroke.width10,
iconSize: 20,
borderRadius: globalTokens.corner.radius120,
minHeight: 52,
focused: {
borderWidth: 0,
},
large: {
paddingHorizontal: globalTokens.size160,
borderWidth: globalTokens.stroke.width10,
iconSize: 20,
borderRadius: globalTokens.corner.radius120,
minHeight: 52,
focused: {
borderWidth: 0,
},
hasContent: {
minWidth: 96,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size80,
},
hasContent: {
minWidth: 96,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size80,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size80,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size80,
},
},
circular: {
borderRadius: globalTokens.corner.radiusCircular,
},
square: {
borderRadius: globalTokens.corner.radiusNone,
},
},
circular: {
borderRadius: globalTokens.corner.radiusCircular,
},
square: {
borderRadius: globalTokens.corner.radiusNone,
},
getPlatformSpecificAppearance: (appearance): 'accent' | 'primary' | 'subtle' | 'outline' => {
switch (appearance) {
case 'accent': // Included to cover Mobile platform naming guidelines, maps to 'primary'.
return 'primary';
@ -86,5 +84,5 @@ export const defaultButtonTokens = (_t: Theme) =>
default:
return 'primary';
}
}
});
},
});

5
packages/theming/apple-theme/src/components/Button/ButtonTokens.ts
Просмотреть файл

@ -3,8 +3,7 @@ import type { DimensionValue } from 'react-native';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonTokens = (_t: Theme) =>
({
export const defaultButtonTokens = (_t: Theme) => ({
block: {
width: '100%' as DimensionValue,
},
@ -97,5 +96,5 @@ export const defaultButtonTokens = (_t: Theme) =>
default:
return null;
}
}
},
});

103
packages/theming/apple-theme/src/components/Button/FABTokens.ios.ts
Просмотреть файл

@ -1,8 +1,20 @@
import {globalTokensIOS as globalTokens} from '@fluentui-react-native/theme-tokens';
import { globalTokensIOS as globalTokens } from '@fluentui-react-native/theme-tokens';
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultFABTokens = (t: Theme) =>
({
export const defaultFABTokens = (t: Theme) => ({
shadowToken: t.shadows.shadow8,
disabled: {
shadowToken: t.shadows.shadow2,
},
pressed: {
shadowToken: t.shadows.shadow2,
},
focused: {
shadowToken: t.shadows.shadow2,
borderWidth: globalTokens.stroke.width20,
borderInnerWidth: globalTokens.stroke.width10,
},
subtle: {
shadowToken: t.shadows.shadow8,
disabled: {
shadowToken: t.shadows.shadow2,
@ -15,62 +27,49 @@ export const defaultFABTokens = (t: Theme) =>
borderWidth: globalTokens.stroke.width20,
borderInnerWidth: globalTokens.stroke.width10,
},
subtle: {
shadowToken: t.shadows.shadow8,
disabled: {
shadowToken: t.shadows.shadow2,
},
pressed: {
shadowToken: t.shadows.shadow2,
},
focused: {
shadowToken: t.shadows.shadow2,
borderWidth: globalTokens.stroke.width20,
borderInnerWidth: globalTokens.stroke.width10,
},
},
large: {
},
large: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 24,
minHeight: 56,
minWidth: 56,
paddingHorizontal: globalTokens.size160,
paddingVertical: globalTokens.size160,
spacingIconContentBefore: 0,
hasContent: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 24,
fontSize: t.typography.variants.body1Strong.size,
fontFamily: t.typography.variants.body1Strong.face,
fontWeight: t.typography.variants.body1Strong.weight,
minHeight: 56,
minWidth: 56,
paddingHorizontal: globalTokens.size160,
paddingStart: globalTokens.size160,
paddingEnd: globalTokens.size200,
paddingVertical: globalTokens.size160,
spacingIconContentBefore: 0,
hasContent: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 24,
fontSize: t.typography.variants.body1Strong.size,
fontFamily: t.typography.variants.body1Strong.face,
fontWeight: t.typography.variants.body1Strong.weight,
minHeight: 56,
minWidth: 56,
paddingStart: globalTokens.size160,
paddingEnd: globalTokens.size200,
paddingVertical: globalTokens.size160,
spacingIconContentBefore: globalTokens.size80,
},
spacingIconContentBefore: globalTokens.size80,
},
small: {
},
small: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 20,
minHeight: 44,
minWidth: 44,
paddingHorizontal: globalTokens.size120,
paddingVertical: globalTokens.size120,
spacingIconContentBefore: 0,
hasContent: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 20,
minHeight: 44,
minWidth: 44,
fontSize: t.typography.variants.body2Strong.size,
fontFamily: t.typography.variants.body2Strong.face,
fontWeight: t.typography.variants.body2Strong.weight,
minHeight: 48,
minWidth: 48,
paddingHorizontal: globalTokens.size120,
paddingVertical: globalTokens.size120,
spacingIconContentBefore: 0,
hasContent: {
borderRadius: globalTokens.corner.radiusCircular,
iconSize: 20,
fontSize: t.typography.variants.body2Strong.size,
fontFamily: t.typography.variants.body2Strong.face,
fontWeight: t.typography.variants.body2Strong.weight,
minHeight: 48,
minWidth: 48,
paddingHorizontal: globalTokens.size120,
paddingStart: globalTokens.size120,
paddingEnd: globalTokens.size160,
spacingIconContentBefore: globalTokens.size80,
},
paddingStart: globalTokens.size120,
paddingEnd: globalTokens.size160,
spacingIconContentBefore: globalTokens.size80,
},
});
},
});

14
packages/theming/apple-theme/src/createAppleTheme.ios.ts
Просмотреть файл

@ -8,11 +8,15 @@ import { getBaseAppleThemeIOS } from './appleTheme.ios';
import { defaultButtonTheme } from './components/Button/ButtonTheme';
export function createAppleTheme(): ThemeReference {
const appleThemeReference = new ThemeReference<Theme, PartialTheme>({} as Theme, () => {
const isLightMode = Appearance.getColorScheme() === 'light';
const isElevated = NativeAppearanceAdditions.userInterfaceLevel() === 'elevated';
return getBaseAppleThemeIOS(isLightMode, isElevated);
}, defaultButtonTheme);
const appleThemeReference = new ThemeReference<Theme, PartialTheme>(
{} as Theme,
() => {
const isLightMode = Appearance.getColorScheme() === 'light';
const isElevated = NativeAppearanceAdditions.userInterfaceLevel() === 'elevated';
return getBaseAppleThemeIOS(isLightMode, isElevated);
},
defaultButtonTheme,
);
Appearance.addChangeListener(() => {
appleThemeReference.invalidate();

16
packages/theming/apple-theme/src/createAppleTheme.macos.ts
Просмотреть файл

@ -1,7 +1,7 @@
import { Appearance } from 'react-native';
import { ThemeReference } from '@fluentui-react-native/theme';
import type { PartialTheme} from '@fluentui-react-native/theme-types';
import type { PartialTheme } from '@fluentui-react-native/theme-types';
import { type Theme } from '@fluentui-react-native/theme-types';
import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
import { AccessibilityInfo } from 'react-native-macos';
@ -13,11 +13,15 @@ import { defaultButtonTheme } from './components/Button/ButtonTheme';
let appleThemeReference: ThemeReference;
export function createAppleTheme(): ThemeReference {
appleThemeReference = new ThemeReference<Theme, PartialTheme>({} as Theme, () => {
const appearance = Appearance.getColorScheme();
const mode = getCurrentAppearance(appearance, 'light');
return getBaseAppleThemeMacOS(mode);
}, defaultButtonTheme);
appleThemeReference = new ThemeReference<Theme, PartialTheme>(
{} as Theme,
() => {
const appearance = Appearance.getColorScheme();
const mode = getCurrentAppearance(appearance, 'light');
return getBaseAppleThemeMacOS(mode);
},
defaultButtonTheme,
);
// Fetch initial system settings for high contrast mode
highContrastHandler();
// Invalidate theme and set prop when high contrast setting changes

145
packages/theming/default-theme/src/components/Button/ButtonColorTokens.ts
Просмотреть файл

@ -1,85 +1,84 @@
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonColorTokens = (t: Theme) =>
({
backgroundColor: t.colors.buttonBackground,
color: t.colors.buttonText,
borderColor: t.colors.buttonBorder,
iconColor: t.colors.buttonIcon,
export const defaultButtonColorTokens = (t: Theme) => ({
backgroundColor: t.colors.buttonBackground,
color: t.colors.buttonText,
borderColor: t.colors.buttonBorder,
iconColor: t.colors.buttonIcon,
disabled: {
backgroundColor: t.colors.defaultDisabledBackground,
color: t.colors.defaultDisabledContent,
borderColor: t.colors.defaultDisabledBorder,
iconColor: t.colors.defaultDisabledIcon,
},
hovered: {
backgroundColor: t.colors.defaultHoveredBackground,
color: t.colors.defaultHoveredContent,
borderColor: t.colors.defaultHoveredBorder,
iconColor: t.colors.defaultHoveredIcon,
},
pressed: {
backgroundColor: t.colors.defaultPressedBackground,
color: t.colors.defaultPressedContent,
borderColor: t.colors.defaultPressedBorder,
iconColor: t.colors.defaultPressedIcon,
},
focused: {
backgroundColor: t.colors.defaultFocusedBackground,
color: t.colors.defaultFocusedContent,
borderColor: t.colors.defaultFocusedBorder,
icon: t.colors.defaultFocusedIcon,
},
primary: {
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnColor,
borderColor: t.colors.brandStroke1,
iconColor: t.colors.neutralForegroundOnColor,
disabled: {
backgroundColor: t.colors.defaultDisabledBackground,
color: t.colors.defaultDisabledContent,
borderColor: t.colors.defaultDisabledBorder,
iconColor: t.colors.defaultDisabledIcon,
},
hovered: {
backgroundColor: t.colors.defaultHoveredBackground,
color: t.colors.defaultHoveredContent,
borderColor: t.colors.defaultHoveredBorder,
iconColor: t.colors.defaultHoveredIcon,
backgroundColor: t.colors.brandBackgroundDisabled,
color: t.colors.neutralForegroundDisabled1,
iconColor: t.colors.neutralForegroundDisabled1,
},
pressed: {
backgroundColor: t.colors.defaultPressedBackground,
color: t.colors.defaultPressedContent,
borderColor: t.colors.defaultPressedBorder,
iconColor: t.colors.defaultPressedIcon,
backgroundColor: t.colors.brandBackgroundPressed,
color: t.colors.neutralForegroundOnColor,
iconColor: t.colors.neutralForegroundOnColor,
},
focused: {
backgroundColor: t.colors.defaultFocusedBackground,
color: t.colors.defaultFocusedContent,
borderColor: t.colors.defaultFocusedBorder,
icon: t.colors.defaultFocusedIcon,
},
primary: {
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnColor,
borderColor: t.colors.brandStroke1,
borderColor: t.colors.strokeFocus2,
iconColor: t.colors.neutralForegroundOnColor,
disabled: {
backgroundColor: t.colors.brandBackgroundDisabled,
color: t.colors.neutralForegroundDisabled1,
iconColor: t.colors.neutralForegroundDisabled1,
},
pressed: {
backgroundColor: t.colors.brandBackgroundPressed,
color: t.colors.neutralForegroundOnColor,
iconColor: t.colors.neutralForegroundOnColor,
},
focused: {
backgroundColor: t.colors.brandBackground,
color: t.colors.neutralForegroundOnColor,
borderColor: t.colors.strokeFocus2,
iconColor: t.colors.neutralForegroundOnColor,
},
},
subtle: {
backgroundColor: t.colors.ghostBackground,
color: t.colors.ghostContent,
borderColor: t.colors.ghostBorder,
iconColor: t.colors.ghostIcon,
disabled: {
color: t.colors.ghostDisabledContent,
borderColor: t.colors.ghostDisabledBorder,
backgroundColor: t.colors.ghostDisabledBackground,
iconColor: t.colors.ghostDisabledIcon,
},
hovered: {
backgroundColor: t.colors.ghostHoveredBackground,
color: t.colors.ghostHoveredContent,
borderColor: t.colors.ghostHoveredBorder,
iconColor: t.colors.ghostHoveredIcon,
},
pressed: {
backgroundColor: t.colors.ghostPressedBackground,
borderColor: t.colors.ghostPressedBorder,
color: t.colors.ghostPressedContent,
icon: t.colors.ghostPressedIcon,
},
focused: {
borderColor: t.colors.ghostFocusedBorder,
backgroundColor: t.colors.ghostFocusedBackground,
color: t.colors.ghostFocusedContent,
icon: t.colors.ghostFocusedIcon,
},
},
subtle: {
backgroundColor: t.colors.ghostBackground,
color: t.colors.ghostContent,
borderColor: t.colors.ghostBorder,
iconColor: t.colors.ghostIcon,
disabled: {
color: t.colors.ghostDisabledContent,
borderColor: t.colors.ghostDisabledBorder,
backgroundColor: t.colors.ghostDisabledBackground,
iconColor: t.colors.ghostDisabledIcon,
},
});
hovered: {
backgroundColor: t.colors.ghostHoveredBackground,
color: t.colors.ghostHoveredContent,
borderColor: t.colors.ghostHoveredBorder,
iconColor: t.colors.ghostHoveredIcon,
},
pressed: {
backgroundColor: t.colors.ghostPressedBackground,
borderColor: t.colors.ghostPressedBorder,
color: t.colors.ghostPressedContent,
icon: t.colors.ghostPressedIcon,
},
focused: {
borderColor: t.colors.ghostFocusedBorder,
backgroundColor: t.colors.ghostFocusedBackground,
color: t.colors.ghostFocusedContent,
icon: t.colors.ghostFocusedIcon,
},
},
});

27
packages/theming/default-theme/src/components/Button/ButtonFontTokens.ts
Просмотреть файл

@ -2,19 +2,18 @@ import type { Theme } from '@fluentui-react-native/theme-types';
type fontVariantType = 'secondaryStandard' | 'bodyStandard';
export const defaultButtonFontTokens = (_t: Theme) =>
({
medium: {
hasContent: {
variant: 'bodySemibold' as fontVariantType,
},
export const defaultButtonFontTokens = (_t: Theme) => ({
medium: {
hasContent: {
variant: 'bodySemibold' as fontVariantType,
},
small: {
hasContent: {
variant: 'secondaryStandard' as fontVariantType,
},
},
small: {
hasContent: {
variant: 'secondaryStandard' as fontVariantType,
},
large: {
variant: 'subheaderSemibold' as fontVariantType,
},
});
},
large: {
variant: 'subheaderSemibold' as fontVariantType,
},
});

33
packages/theming/default-theme/src/components/Button/ButtonTheme.ts
Просмотреть файл

@ -1,4 +1,3 @@
import { immutableMerge } from '@fluentui-react-native/immutable-merge';
import type { Theme } from '@fluentui-react-native/theme-types';
@ -10,25 +9,21 @@ import { defaultCompoundButtonFontTokens } from './CompoundButtonFontTokens';
import { defaultCompoundButtonTokens } from './CompoundButtonTokens';
import { defaultToggleButtonColorTokens } from './ToggleButtonColorTokens';
export const defaultButtonTheme = (theme: Theme) =>
({
export const defaultButtonTheme = (theme: Theme) => ({
components: {
Button: immutableMerge<object>(
Button: immutableMerge<object>(defaultButtonColorTokens(theme), defaultButtonFontTokens(theme), defaultButtonTokens(theme)),
CompoundButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonColorTokens(theme),
defaultCompoundButtonColorTokens(theme),
defaultCompoundButtonFontTokens(theme),
defaultCompoundButtonTokens(theme),
),
ToggleButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonFontTokens(theme),
defaultButtonTokens(theme)),
CompoundButton:
immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonColorTokens(theme),
defaultCompoundButtonColorTokens(theme),
defaultCompoundButtonFontTokens(theme),
defaultCompoundButtonTokens(theme)),
ToggleButton:
immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonFontTokens(theme),
defaultButtonColorTokens(theme),
defaultToggleButtonColorTokens(theme)),
}
defaultButtonColorTokens(theme),
defaultToggleButtonColorTokens(theme),
),
},
});

166
packages/theming/default-theme/src/components/Button/ButtonTokens.ts
Просмотреть файл

@ -3,101 +3,99 @@ import type { DimensionValue } from 'react-native';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
import type { Theme } from '@fluentui-react-native/theme-types';
export const defaultButtonTokens = (_t: Theme) =>
({
block: {
width: '100%' as DimensionValue,
export const defaultButtonTokens = (_t: Theme) => ({
block: {
width: '100%' as DimensionValue,
},
medium: {
padding: globalTokens.size60 - globalTokens.stroke.width10,
borderWidth: globalTokens.stroke.width10,
iconSize: 16,
focused: {
borderWidth: 0,
padding: globalTokens.size60,
},
medium: {
padding: globalTokens.size60 - globalTokens.stroke.width10,
borderWidth: globalTokens.stroke.width10,
iconSize: 16,
hasContent: {
minWidth: 96,
paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size60,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size60,
},
focused: {
borderWidth: 0,
padding: globalTokens.size60,
},
hasContent: {
minWidth: 96,
paddingHorizontal: globalTokens.size120 - globalTokens.stroke.width10,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size60,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size60,
},
focused: {
paddingHorizontal: globalTokens.size120,
},
paddingHorizontal: globalTokens.size120,
},
},
small: {
padding: globalTokens.size40 - globalTokens.stroke.width10,
borderWidth: globalTokens.stroke.width10,
iconSize: 16,
},
small: {
padding: globalTokens.size40 - globalTokens.stroke.width10,
borderWidth: globalTokens.stroke.width10,
iconSize: 16,
focused: {
borderWidth: 0,
padding: globalTokens.size40,
},
hasContent: {
minWidth: 64,
minHeight: 24,
paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size40,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size40,
},
focused: {
borderWidth: 0,
padding: globalTokens.size40,
},
hasContent: {
minWidth: 64,
minHeight: 24,
paddingHorizontal: globalTokens.size80 - globalTokens.stroke.width10,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size40,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size40,
},
focused: {
paddingHorizontal: globalTokens.size80,
},
paddingHorizontal: globalTokens.size80,
},
},
large: {
padding: globalTokens.size80 - globalTokens.stroke.width10,
borderWidth: globalTokens.stroke.width10,
iconSize: 20,
},
large: {
padding: globalTokens.size80 - globalTokens.stroke.width10,
borderWidth: globalTokens.stroke.width10,
iconSize: 20,
focused: {
borderWidth: 0,
padding: globalTokens.size80,
},
hasContent: {
minWidth: 96,
paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size60,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size60,
},
focused: {
borderWidth: 0,
padding: globalTokens.size80,
},
hasContent: {
minWidth: 96,
paddingHorizontal: globalTokens.size160 - globalTokens.stroke.width10,
hasIconAfter: {
spacingIconContentAfter: globalTokens.size60,
},
hasIconBefore: {
spacingIconContentBefore: globalTokens.size60,
},
focused: {
paddingHorizontal: globalTokens.size160,
},
paddingHorizontal: globalTokens.size160,
},
},
rounded: {
borderRadius: globalTokens.corner.radius40,
},
circular: {
borderRadius: globalTokens.corner.radiusCircular,
},
square: {
borderRadius: globalTokens.corner.radiusNone,
},
},
rounded: {
borderRadius: globalTokens.corner.radius40,
},
circular: {
borderRadius: globalTokens.corner.radiusCircular,
},
square: {
borderRadius: globalTokens.corner.radiusNone,
},
getPlatformSpecificAppearance: (appearance): 'primary' | 'subtle' | 'outline' | null => {
switch (appearance) {
case 'accent': // Included to cover Mobile platform naming guidelines, maps to 'primary'.
return 'primary';
getPlatformSpecificAppearance: (appearance): 'primary' | 'subtle' | 'outline' | null => {
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;
case 'primary':
case 'subtle':
case 'outline': // 'Outline' exists only for Mobile platforms, default picked on other platforms.
return appearance;
default:
default:
return null;
}
}
});
}
},
});

34
packages/theming/default-theme/src/createDefaultTheme.ts
Просмотреть файл

@ -9,21 +9,25 @@ import { defaultButtonTheme } from './components/Button/ButtonTheme';
import { defaultFluentDarkTheme, defaultFluentHighConstrastTheme, defaultFluentTheme } from './defaultTheme';
export function createDefaultTheme(options: ThemeOptions = {}): ThemeReference {
const themeRef = new ThemeReference<Theme, PartialTheme>({} as Theme, () => {
const current = getCurrentAppearance(options.appearance, options.defaultAppearance || 'light');
switch (current) {
case 'light':
return defaultFluentTheme;
case 'dark':
return defaultFluentDarkTheme;
case 'darkElevated':
return defaultFluentDarkTheme;
case 'highContrast':
return defaultFluentHighConstrastTheme;
default:
assertNever(current);
}
}, defaultButtonTheme);
const themeRef = new ThemeReference<Theme, PartialTheme>(
{} as Theme,
() => {
const current = getCurrentAppearance(options.appearance, options.defaultAppearance || 'light');
switch (current) {
case 'light':
return defaultFluentTheme;
case 'dark':
return defaultFluentDarkTheme;
case 'darkElevated':
return defaultFluentDarkTheme;
case 'highContrast':
return defaultFluentHighConstrastTheme;
default:
assertNever(current);
}
},
defaultButtonTheme,
);
if (Appearance && options.appearance === 'dynamic') {
Appearance.addChangeListener(() => {

2
packages/theming/theme-tokens/src/index.ts
Просмотреть файл

@ -2,4 +2,4 @@ export { default as globalTokens } from './tokens-global';
export { getAliasTokens, getShadowTokens } from './getTokens';
export { default as globalTokensWin32 } from './tokens-global.win32';
export { default as globalTokensIOS } from './tokens-global.ios';
export { default as globalTokensAndroid } from './tokens-global.android';
export { default as globalTokensAndroid } from './tokens-global.android';

2
packages/theming/win32-theme/src/__tests__/win32-theme.test.ts
Просмотреть файл

@ -120,4 +120,4 @@ describe('verify types', () => {
const compoundButtonTokens: CompoundButtonTokens = defaultCompoundButtonTokens(officeTheme);
expect(compoundButtonTokens).toBeTruthy();
});
})
});

5
packages/theming/win32-theme/src/components/Button/ButtonFontTokens.ts
Просмотреть файл

@ -1,9 +1,8 @@
import { globalTokensWin32 as globalTokens } from '@fluentui-react-native/theme-tokens';
import type { Theme } from '@fluentui-react-native/theme-types';
import type { FontWeight } from '@fluentui-react-native/theme-types'
import type { FontWeight } from '@fluentui-react-native/theme-types';
export const defaultButtonFontTokens = (t: Theme) =>
({
export const defaultButtonFontTokens = (t: Theme) => ({
medium: {
hasContent: {
fontFamily: t.typography.families.secondary,

33
packages/theming/win32-theme/src/components/Button/ButtonTheme.ts
Просмотреть файл

@ -1,4 +1,3 @@
import { immutableMerge } from '@fluentui-react-native/immutable-merge';
import type { Theme } from '@fluentui-react-native/theme-types';
@ -10,25 +9,21 @@ import { defaultCompoundButtonFontTokens } from './CompoundButtonFontTokens';
import { defaultCompoundButtonTokens } from './CompoundButtonTokens';
import { defaultToggleButtonColorTokens } from './ToggleButtonColorTokens';
export const defaultButtonTheme = (theme: Theme) =>
({
export const defaultButtonTheme = (theme: Theme) => ({
components: {
Button: immutableMerge<object>(
Button: immutableMerge<object>(defaultButtonColorTokens(theme), defaultButtonFontTokens(theme), defaultButtonTokens(theme)),
CompoundButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonColorTokens(theme),
defaultCompoundButtonColorTokens(theme),
defaultCompoundButtonFontTokens(theme),
defaultCompoundButtonTokens(theme),
),
ToggleButton: immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonFontTokens(theme),
defaultButtonTokens(theme)),
CompoundButton:
immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonColorTokens(theme),
defaultCompoundButtonColorTokens(theme),
defaultCompoundButtonFontTokens(theme),
defaultCompoundButtonTokens(theme)),
ToggleButton:
immutableMerge<object>(
defaultButtonTokens(theme),
defaultButtonFontTokens(theme),
defaultButtonColorTokens(theme),
defaultToggleButtonColorTokens(theme)),
}
defaultButtonColorTokens(theme),
defaultToggleButtonColorTokens(theme),
),
},
});

5
packages/theming/win32-theme/src/components/Button/ButtonTokens.ts
Просмотреть файл

@ -6,8 +6,7 @@ import { isHighContrast } from '@fluentui-react-native/theming-utils';
type ButtonSize = 'small';
export const defaultButtonTokens = (theme: Theme) =>
({
export const defaultButtonTokens = (theme: Theme) => ({
size: 'small' as ButtonSize,
borderWidth: globalTokens.stroke.width10,
borderInnerWidth: globalTokens.stroke.width10,
@ -179,5 +178,5 @@ export const defaultButtonTokens = (theme: Theme) =>
default:
return null;
}
}
},
});

2
packages/theming/win32-theme/src/components/Button/CompoundButtonColorTokens.ts
Просмотреть файл

@ -46,7 +46,7 @@ export const defaultCompoundButtonColorTokens = (t: Theme) => {
secondaryContentColor: t.colors.neutralForeground2Pressed,
},
},
}
};
};
const highContrastColors = {

2
packages/theming/win32-theme/src/createOfficeTheme.ts
Просмотреть файл

@ -2,7 +2,7 @@ import { createDefaultTheme } from '@fluentui-react-native/default-theme';
import { ThemeReference } from '@fluentui-react-native/theme';
import type { OfficePalette, Theme, ThemeOptions } from '@fluentui-react-native/theme-types';
import {defaultButtonTheme} from './components/Button/ButtonTheme';
import { defaultButtonTheme } from './components/Button/ButtonTheme';
import { createAliasesFromPalette } from './createAliasesFromPalette';
import { createBrandedThemeWithAlias } from './createBrandedThemeWithAlias';
import { createOfficeColorAliasTokens, createOfficeShadowAliasTokens } from './createOfficeAliasTokens';