Split buttonTokens into platform specific files + fix bad merge
This commit is contained in:
lyzhan7
Родитель
37414efbe0
Коммит
73c918c0dd
|
|
@ -0,0 +1,86 @@
|
|||
import { Theme } from '@fluentui-react-native/framework';
|
||||
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
||||
import { TokenSettings } from '@fluentui-react-native/use-styling';
|
||||
import { ButtonTokens } from './Button.types';
|
||||
|
||||
export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
|
||||
({
|
||||
block: {
|
||||
width: '100%',
|
||||
},
|
||||
medium: {
|
||||
padding: globalTokens.spacing.xs,
|
||||
borderWidth: globalTokens.stroke.width.thin,
|
||||
iconSize: 16,
|
||||
focused: {
|
||||
borderWidth: 0,
|
||||
padding: globalTokens.spacing.sNudge,
|
||||
},
|
||||
hasContent: {
|
||||
minWidth: 96,
|
||||
paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin,
|
||||
hasIconAfter: {
|
||||
spacingIconContentAfter: globalTokens.spacing.sNudge,
|
||||
},
|
||||
hasIconBefore: {
|
||||
spacingIconContentBefore: globalTokens.spacing.sNudge,
|
||||
},
|
||||
focused: {
|
||||
paddingHorizontal: globalTokens.spacing.m,
|
||||
},
|
||||
},
|
||||
},
|
||||
small: {
|
||||
padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin,
|
||||
borderWidth: globalTokens.stroke.width.thin,
|
||||
iconSize: 16,
|
||||
focused: {
|
||||
borderWidth: 0,
|
||||
padding: globalTokens.spacing.xs,
|
||||
},
|
||||
hasContent: {
|
||||
minWidth: 64,
|
||||
paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin,
|
||||
hasIconAfter: {
|
||||
spacingIconContentAfter: globalTokens.spacing.xs,
|
||||
},
|
||||
hasIconBefore: {
|
||||
spacingIconContentBefore: globalTokens.spacing.xs,
|
||||
},
|
||||
focused: {
|
||||
paddingHorizontal: globalTokens.spacing.s,
|
||||
},
|
||||
},
|
||||
},
|
||||
large: {
|
||||
padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
|
||||
borderWidth: globalTokens.stroke.width.thin,
|
||||
iconSize: 20,
|
||||
focused: {
|
||||
borderWidth: 0,
|
||||
padding: globalTokens.spacing.s,
|
||||
},
|
||||
hasContent: {
|
||||
minWidth: 96,
|
||||
paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin,
|
||||
hasIconAfter: {
|
||||
spacingIconContentAfter: globalTokens.spacing.sNudge,
|
||||
},
|
||||
hasIconBefore: {
|
||||
spacingIconContentBefore: globalTokens.spacing.sNudge,
|
||||
},
|
||||
focused: {
|
||||
paddingHorizontal: globalTokens.spacing.l,
|
||||
},
|
||||
},
|
||||
},
|
||||
rounded: {
|
||||
borderRadius: globalTokens.corner.radius.medium,
|
||||
},
|
||||
circular: {
|
||||
borderRadius: globalTokens.corner.radius.circle,
|
||||
},
|
||||
square: {
|
||||
borderRadius: globalTokens.corner.radius.none,
|
||||
},
|
||||
} as ButtonTokens);
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import { Theme } from '@fluentui-react-native/framework';
|
||||
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
||||
import { TokenSettings } from '@fluentui-react-native/use-styling';
|
||||
import { ButtonTokens } from './Button.types';
|
||||
|
||||
export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
|
||||
({
|
||||
block: {
|
||||
width: '100%',
|
||||
},
|
||||
medium: {
|
||||
padding: globalTokens.spacing.xs,
|
||||
borderWidth: globalTokens.stroke.width.thin,
|
||||
iconSize: 16,
|
||||
focused: {
|
||||
borderWidth: 0,
|
||||
padding: globalTokens.spacing.sNudge,
|
||||
},
|
||||
hasContent: {
|
||||
minWidth: 96,
|
||||
paddingHorizontal: globalTokens.spacing.m - globalTokens.stroke.width.thin,
|
||||
hasIconAfter: {
|
||||
spacingIconContentAfter: globalTokens.spacing.sNudge,
|
||||
},
|
||||
hasIconBefore: {
|
||||
spacingIconContentBefore: globalTokens.spacing.sNudge,
|
||||
},
|
||||
focused: {
|
||||
paddingHorizontal: globalTokens.spacing.m,
|
||||
},
|
||||
},
|
||||
},
|
||||
small: {
|
||||
padding: globalTokens.spacing.xs - globalTokens.stroke.width.thin,
|
||||
borderWidth: globalTokens.stroke.width.thin,
|
||||
iconSize: 16,
|
||||
focused: {
|
||||
borderWidth: 0,
|
||||
padding: globalTokens.spacing.xs,
|
||||
},
|
||||
hasContent: {
|
||||
minWidth: 64,
|
||||
paddingHorizontal: globalTokens.spacing.s - globalTokens.stroke.width.thin,
|
||||
hasIconAfter: {
|
||||
spacingIconContentAfter: globalTokens.spacing.xs,
|
||||
},
|
||||
hasIconBefore: {
|
||||
spacingIconContentBefore: globalTokens.spacing.xs,
|
||||
},
|
||||
focused: {
|
||||
paddingHorizontal: globalTokens.spacing.s,
|
||||
},
|
||||
},
|
||||
},
|
||||
large: {
|
||||
padding: globalTokens.spacing.s - globalTokens.stroke.width.thin,
|
||||
borderWidth: globalTokens.stroke.width.thin,
|
||||
iconSize: 20,
|
||||
focused: {
|
||||
borderWidth: 0,
|
||||
padding: globalTokens.spacing.s,
|
||||
},
|
||||
hasContent: {
|
||||
minWidth: 96,
|
||||
paddingHorizontal: globalTokens.spacing.l - globalTokens.stroke.width.thin,
|
||||
hasIconAfter: {
|
||||
spacingIconContentAfter: globalTokens.spacing.sNudge,
|
||||
},
|
||||
hasIconBefore: {
|
||||
spacingIconContentBefore: globalTokens.spacing.sNudge,
|
||||
},
|
||||
focused: {
|
||||
paddingHorizontal: globalTokens.spacing.l,
|
||||
},
|
||||
},
|
||||
},
|
||||
rounded: {
|
||||
borderRadius: globalTokens.corner.radius.medium,
|
||||
},
|
||||
circular: {
|
||||
borderRadius: globalTokens.corner.radius.circle,
|
||||
},
|
||||
square: {
|
||||
borderRadius: globalTokens.corner.radius.none,
|
||||
},
|
||||
} as ButtonTokens);
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
import { Theme } from '@fluentui-react-native/framework';
|
||||
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
||||
import { TokenSettings } from '@fluentui-react-native/use-styling';
|
||||
import { Platform } from 'react-native';
|
||||
import { ButtonTokens } from './Button.types';
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
|
||||
({
|
||||
|
|
@ -11,11 +9,7 @@ export const defaultButtonTokens: TokenSettings<ButtonTokens, Theme> = () =>
|
|||
width: '100%',
|
||||
},
|
||||
medium: {
|
||||
padding: Platform.select({
|
||||
android: globalTokens.spacing.xs,
|
||||
ios: globalTokens.spacing.xs,
|
||||
default: globalTokens.spacing.sNudge - globalTokens.stroke.width.thin,
|
||||
}),
|
||||
padding: globalTokens.spacing.sNudge - globalTokens.stroke.width.thin,
|
||||
borderWidth: globalTokens.stroke.width.thin,
|
||||
iconSize: 16,
|
||||
focused: {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче