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

Add iOS typography tokens (#2141) 

* fix typo in line height name

* Add FURN iOS typography token support

* Move V2 test examples to TextExperimental

* Use null for unavailable V2 text types

* Separate V2Usage by platform

* Update Podfile.lock

* Use null coalescing so non-nullish falsy values are accepted

* Use optional chaining for `variants[variant]`

* Change files

* Update snapshots

* Change files
This commit is contained in:
Adam Gleitman 2022-09-21 13:38:54 -07:00 коммит произвёл GitHub
Родитель e65a959a8f
Коммит 6706e18d88
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
27 изменённых файлов: 371 добавлений и 100 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
apps/fluent-tester/ios/Podfile.lock
Просмотреть файл

@ -10,10 +10,10 @@ PODS:
- React-jsi (= 0.66.4)
- ReactCommon/turbomodule/core (= 0.66.4)
- fmt (6.2.1)
- FRNAvatar (0.16.4):
- FRNAvatar (0.16.5):
- MicrosoftFluentUI (= 0.8.3)
- React
- FRNDatePicker (0.7.0):
- FRNDatePicker (0.7.1):
- MicrosoftFluentUI (= 0.8.3)
- React
- glog (0.3.5)
@ -583,8 +583,8 @@ SPEC CHECKSUMS:
FBLazyVector: e5569e42a1c79ca00521846c223173a57aca1fe1
FBReactNativeSpec: fe08c1cd7e2e205718d77ad14b34957cce949b58
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
FRNAvatar: d830f11cbb1e9baa15c99ca0e64feb35992a064d
FRNDatePicker: 501a8b3d28baf39426ebe6297e3b88c3e5c0d58b
FRNAvatar: a2022c3a8e51e4fdf3e8b842ca13214d0b41312d
FRNDatePicker: 984a9eb80b9baa924597ca84be6ffdc379b37536
glog: 5337263514dd6f09803962437687240c5dc39aa4
MicrosoftFluentUI: e30487dd18aba04beeed4caf1ce1988073f8b03a
RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9

99
apps/fluent-tester/src/TestComponents/TextExperimental/StandardUsage.tsx
Просмотреть файл

@ -1,83 +1,30 @@
import * as React from 'react';
import { Platform, View } from 'react-native';
import {
Text,
Caption1,
Body1,
Body1Strong,
Body2,
Body2Strong,
Subtitle1,
Subtitle1Strong,
Subtitle2,
Subtitle2Strong,
Title1,
Title1Strong,
LargeTitle,
Display,
} from '@fluentui-react-native/experimental-text';
import { View } from 'react-native';
import { Text } from '@fluentui-react-native/experimental-text';
import { Stack } from '@fluentui-react-native/stack';
import { stackStyle } from '../Common/styles';
import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './consts';
export const StandardUsage: React.FunctionComponent = () => {
const V1Usage: React.FunctionComponent = () => {
return (
<View>
<Stack style={stackStyle} gap={5}>
<Text variant="captionStandard" testID={HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON}>
CaptionStandard
</Text>
<Text variant="secondaryStandard">SecondaryStandard</Text>
<Text variant="secondarySemibold">SecondarySemibold</Text>
<Text variant="bodyStandard">BodyStandard</Text>
<Text variant="bodySemibold">BodySemibold</Text>
<Text variant="subheaderStandard">SubheaderStandard</Text>
<Text variant="subheaderSemibold">SubheaderSemibold</Text>
<Text variant="headerStandard">HeaderStandard</Text>
<Text variant="headerSemibold">HeaderSemibold</Text>
<Text variant="heroStandard">HeroStandard</Text>
<Text variant="heroSemibold">HeroSemibold</Text>
<Text variant="heroLargeStandard">HeroLargeStandard</Text>
<Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
</Stack>
</View>
);
};
const V2Usage: React.FunctionComponent = () => {
return (
<View>
<Stack style={stackStyle} gap={5}>
<Caption1>Caption1</Caption1>
<Body1>Body1</Body1>
<Body1Strong>Body1Strong</Body1Strong>
<Body2>Body2</Body2>
<Body2Strong>Body2Strong</Body2Strong>
<Subtitle2>Subtitle2</Subtitle2>
<Subtitle2Strong>Subtitle2Strong</Subtitle2Strong>
<Subtitle1>Subtitle1</Subtitle1>
<Subtitle1Strong>Subtitle1Strong</Subtitle1Strong>
<Title1>Title1</Title1>
<Title1Strong>Title1Strong</Title1Strong>
<LargeTitle>LargeTitle</LargeTitle>
<Display>Display</Display>
</Stack>
</View>
);
};
switch (Platform.OS) {
case 'android':
case 'ios':
case 'macos':
return <V1Usage />;
default:
return (
<View>
<V1Usage />
<V2Usage />
</View>
);
}
return (
<View>
<Stack style={stackStyle} gap={5}>
<Text variant="captionStandard" testID={HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON}>
CaptionStandard
</Text>
<Text variant="secondaryStandard">SecondaryStandard</Text>
<Text variant="secondarySemibold">SecondarySemibold</Text>
<Text variant="bodyStandard">BodyStandard</Text>
<Text variant="bodySemibold">BodySemibold</Text>
<Text variant="subheaderStandard">SubheaderStandard</Text>
<Text variant="subheaderSemibold">SubheaderSemibold</Text>
<Text variant="headerStandard">HeaderStandard</Text>
<Text variant="headerSemibold">HeaderSemibold</Text>
<Text variant="heroStandard">HeroStandard</Text>
<Text variant="heroSemibold">HeroSemibold</Text>
<Text variant="heroLargeStandard">HeroLargeStandard</Text>
<Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
</Stack>
</View>
);
};

5
apps/fluent-tester/src/TestComponents/TextExperimental/TextExperimentalTest.tsx
Просмотреть файл

@ -5,6 +5,7 @@ import { PressableUsage } from './PressableUsage';
import { Test, TestSection, PlatformStatus } from '../Test';
import { E2EExperimentalTextTest } from './ExperimentalTextE2ETest';
import { EXPERIMENTAL_TEXT_TESTPAGE } from './consts';
import { V2Usage } from './V2Usage';
const textSections: TestSection[] = [
{
@ -12,6 +13,10 @@ const textSections: TestSection[] = [
testID: EXPERIMENTAL_TEXT_TESTPAGE,
component: StandardUsage,
},
{
name: 'V2 Usage',
component: V2Usage,
},
{
name: 'Customize Usage',
component: CustomizeUsage,

39
apps/fluent-tester/src/TestComponents/TextExperimental/V2Usage.ios.tsx Normal file
Просмотреть файл

@ -0,0 +1,39 @@
import * as React from 'react';
import { View } from 'react-native';
import { Stack } from '@fluentui-react-native/stack';
import { stackStyle } from '../Common/styles';
import {
Body1,
Body1Strong,
Body2,
Body2Strong,
Caption1,
Caption1Strong,
Caption2,
Display,
LargeTitle,
Title1,
Title2,
Title3,
} from '@fluentui-react-native/text';
export const V2Usage: React.FunctionComponent = () => {
return (
<View>
<Stack style={stackStyle} gap={5}>
<Caption2>Caption2</Caption2>
<Caption1>Caption1</Caption1>
<Caption1Strong>Caption1Strong</Caption1Strong>
<Body2>Body2</Body2>
<Body2Strong>Body2Strong</Body2Strong>
<Body1>Body1</Body1>
<Body1Strong>Body1Strong</Body1Strong>
<Title3>Title3</Title3>
<Title2>Title2</Title2>
<Title1>Title1</Title1>
<LargeTitle>LargeTitle</LargeTitle>
<Display>Display</Display>
</Stack>
</View>
);
};

6
apps/fluent-tester/src/TestComponents/TextExperimental/V2Usage.tsx Normal file
Просмотреть файл

@ -0,0 +1,6 @@
import * as React from 'react';
import { Platform, Text } from 'react-native';
export const V2Usage: React.FunctionComponent = () => {
return <Text>V2 usage is not yet supported for platform &quot;{Platform.OS}&quot;.</Text>;
};

41
apps/fluent-tester/src/TestComponents/TextExperimental/V2Usage.win32.tsx Normal file
Просмотреть файл

@ -0,0 +1,41 @@
import * as React from 'react';
import { View } from 'react-native';
import { Stack } from '@fluentui-react-native/stack';
import { stackStyle } from '../Common/styles';
import {
Body1,
Body1Strong,
Body2,
Body2Strong,
Caption1,
Display,
LargeTitle,
Subtitle1,
Subtitle1Strong,
Subtitle2,
Subtitle2Strong,
Title1,
Title1Strong,
} from '@fluentui-react-native/text';
export const V2Usage: React.FunctionComponent = () => {
return (
<View>
<Stack style={stackStyle} gap={5}>
<Caption1>Caption1</Caption1>
<Body1>Body1</Body1>
<Body1Strong>Body1Strong</Body1Strong>
<Body2>Body2</Body2>
<Body2Strong>Body2Strong</Body2Strong>
<Subtitle2>Subtitle2</Subtitle2>
<Subtitle2Strong>Subtitle2Strong</Subtitle2Strong>
<Subtitle1>Subtitle1</Subtitle1>
<Subtitle1Strong>Subtitle1Strong</Subtitle1Strong>
<Title1>Title1</Title1>
<Title1Strong>Title1Strong</Title1Strong>
<LargeTitle>LargeTitle</LargeTitle>
<Display>Display</Display>
</Stack>
</View>
);
};

7
change/@fluentui-react-native-apple-theme-77f1c304-06f3-4618-b8d1-ab9282da63a7.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Add Apple typography",
"packageName": "@fluentui-react-native/apple-theme",
"email": "adam.gleitman@gmail.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-native-badge-b5cdfa05-187e-4216-832d-efbfee586e1f.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Update test snapshots",
"packageName": "@fluentui-react-native/badge",
"email": "adam.gleitman@gmail.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-native-button-2d1c8de4-abf8-4242-b65b-4b4debfc5bf4.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Update test snapshots",
"packageName": "@fluentui-react-native/button",
"email": "adam.gleitman@gmail.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-native-notification-c3180fdd-f5c5-4783-8890-d0115863123d.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Update test snapshots",
"packageName": "@fluentui-react-native/notification",
"email": "adam.gleitman@gmail.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-native-tester-3f12cab7-080e-4265-9809-506c6f184036.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Add new iOS token tests",
"packageName": "@fluentui-react-native/tester",
"email": "adam.gleitman@gmail.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-native-text-c20d7b15-7be2-4ac5-8b8f-69a42ed95205.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Add new iOS tokens",
"packageName": "@fluentui-react-native/text",
"email": "adam.gleitman@gmail.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-native-theme-types-0f267f3d-c6b7-4525-9307-f2b9641cfd15.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Merge branch 'main' into ios-typography-tokens",
"packageName": "@fluentui-react-native/theme-types",
"email": "adam.gleitman@gmail.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-native-tokens-bb4e4cdf-7e05-4d92-967a-3f4abc900814.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Add iOS typography variants",
"packageName": "@fluentui-react-native/tokens",
"email": "adam.gleitman@gmail.com",
"dependentChangeType": "patch"
}

10
packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap
Просмотреть файл

@ -168,6 +168,8 @@ exports[`CounterBadge component tests CounterBadge all props 1`] = `
"fontSize": 12,
"fontStyle": undefined,
"fontWeight": "400",
"letterSpacing": undefined,
"lineHeight": undefined,
"margin": 0,
"textAlign": undefined,
"textDecorationLine": undefined,
@ -209,6 +211,8 @@ exports[`CounterBadge component tests CounterBadge shows 99+ 1`] = `
"fontSize": 12,
"fontStyle": undefined,
"fontWeight": "400",
"letterSpacing": undefined,
"lineHeight": undefined,
"margin": 0,
"textAlign": undefined,
"textDecorationLine": undefined,
@ -250,6 +254,8 @@ exports[`CounterBadge component tests CounterBadge shows 1000+ 1`] = `
"fontSize": 12,
"fontStyle": undefined,
"fontWeight": "400",
"letterSpacing": undefined,
"lineHeight": undefined,
"margin": 0,
"textAlign": undefined,
"textDecorationLine": undefined,
@ -292,6 +298,8 @@ exports[`CounterBadge component tests CounterBadge shows zero 1`] = `
"fontSize": 12,
"fontStyle": undefined,
"fontWeight": "400",
"letterSpacing": undefined,
"lineHeight": undefined,
"margin": 0,
"textAlign": undefined,
"textDecorationLine": undefined,
@ -333,6 +341,8 @@ exports[`CounterBadge component tests CounterBadge tokens 1`] = `
"fontSize": 12,
"fontStyle": undefined,
"fontWeight": "400",
"letterSpacing": undefined,
"lineHeight": undefined,
"margin": 0,
"textAlign": undefined,
"textDecorationLine": undefined,

2
packages/components/Button/src/__snapshots__/Button.test.tsx.snap
Просмотреть файл

@ -112,6 +112,8 @@ exports[`Button component tests Button composed 1`] = `
"fontFamily": "Segoe UI",
"fontSize": 14,
"fontWeight": "600",
"letterSpacing": undefined,
"lineHeight": undefined,
"marginBottom": 0,
"marginEnd": 0,
"marginStart": 0,

3
packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap
Просмотреть файл

@ -96,6 +96,7 @@ exports[`Notification component tests Notification default 1`] = `
"fontFamily": "Segoe UI",
"fontSize": 15,
"fontWeight": "400",
"lineHeight": 20,
"margin": 0,
}
}
@ -160,6 +161,8 @@ exports[`Notification component tests Notification default 1`] = `
"fontFamily": "Segoe UI",
"fontSize": 15,
"fontWeight": "600",
"letterSpacing": 20,
"lineHeight": -0.24,
"margin": 0,
"marginBottom": 0,
"marginEnd": 0,

43
packages/components/text/src/Variants.ios.ts Normal file
Просмотреть файл

@ -0,0 +1,43 @@
import { Text } from './Text';
export const Caption1 = Text.customize({
variant: 'caption1',
});
export const Caption1Strong = Text.customize({
variant: 'caption1Strong',
});
export const Caption2 = Text.customize({
variant: 'caption2',
});
export const Body1 = Text.customize({
variant: 'body1',
});
export const Body1Strong = Text.customize({
variant: 'body1Strong',
});
export const Body2 = Text.customize({
variant: 'body2',
});
export const Body2Strong = Text.customize({
variant: 'body2Strong',
});
export const Subtitle1 = null; // Not supported on iOS
export const Subtitle1Strong = null; // Not supported on iOS
export const Subtitle2 = null; // Not supported on iOS
export const Subtitle2Strong = null; // Not supported on iOS
export const Title1 = Text.customize({
variant: 'title1',
});
export const Title1Strong = null; // Not supported on iOS
export const Title2 = Text.customize({
variant: 'title2',
});
export const Title3 = Text.customize({
variant: 'title3',
});
export const LargeTitle = Text.customize({
variant: 'largeTitle',
});
export const Display = Text.customize({
variant: 'display',
});

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

@ -2,6 +2,8 @@ import { Text } from './Text';
// stubbed out for other platforms for which variant alias tokens aren't defined
export const Caption1 = Text;
export const Caption1Strong = Text;
export const Caption2 = Text;
export const Body1 = Text;
export const Body1Strong = Text;
export const Body2 = Text;
@ -12,5 +14,7 @@ export const Subtitle2 = Text;
export const Subtitle2Strong = Text;
export const Title1 = Text;
export const Title1Strong = Text;
export const Title2 = Text;
export const Title3 = Text;
export const LargeTitle = Text;
export const Display = Text;

4
packages/components/text/src/Variants.win32.ts
Просмотреть файл

@ -3,6 +3,8 @@ import { Text } from './Text';
export const Caption1 = Text.customize({
variant: 'caption1',
});
export const Caption1Strong = null; // Not supported on Win32
export const Caption2 = null; // Not supported on Win32
export const Body1 = Text.customize({
variant: 'body1',
});
@ -33,6 +35,8 @@ export const Title1 = Text.customize({
export const Title1Strong = Text.customize({
variant: 'title1Strong',
});
export const Title2 = null; // Not supported on Win32
export const Title3 = null; // Not supported on Win32
export const LargeTitle = Text.customize({
variant: 'largeTitle',
});

6
packages/components/text/src/__tests__/__snapshots__/Text.test.tsx.snap
Просмотреть файл

@ -11,6 +11,8 @@ exports[`Text component tests Text all props 1`] = `
"fontSize": 14,
"fontStyle": undefined,
"fontWeight": "400",
"letterSpacing": undefined,
"lineHeight": undefined,
"margin": 0,
"textAlign": undefined,
"textDecorationLine": undefined,
@ -32,6 +34,8 @@ exports[`Text component tests Text all tokens 1`] = `
"fontSize": 20,
"fontStyle": undefined,
"fontWeight": "900",
"letterSpacing": undefined,
"lineHeight": undefined,
"margin": 0,
"textAlign": undefined,
"textDecorationLine": undefined,
@ -53,6 +57,8 @@ exports[`Text component tests Text default 1`] = `
"fontSize": 12,
"fontStyle": undefined,
"fontWeight": "400",
"letterSpacing": undefined,
"lineHeight": undefined,
"margin": 0,
"textAlign": undefined,
"textDecorationLine": undefined,

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

@ -2,6 +2,8 @@ export { Text as TextV1 } from './Text';
export type { textName as textNameV1, TextProps, TextTokens } from './Text.types';
export {
Caption1,
Caption1Strong,
Caption2,
Body1,
Body1Strong,
Body2,
@ -12,6 +14,8 @@ export {
Subtitle2Strong,
Title1,
Title1Strong,
Title2,
Title3,
LargeTitle,
Display,
} from './Variants';

1
packages/theming/apple-theme/package.json
Просмотреть файл

@ -32,6 +32,7 @@
},
"dependencies": {
"@fluentui-react-native/default-theme": ">=0.15.1 <1.0.0",
"@fluentui-react-native/design-tokens-ios": "^0.19.0",
"@fluentui-react-native/design-tokens-macos": "^0.13.0",
"@fluentui-react-native/memo-cache": "^1.1.7",
"@fluentui-react-native/theme": ">=0.7.1 <1.0.0",

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

@ -1,5 +1,9 @@
import globalTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-global.json';
import { FontSize, FontSizes, FontWeightValue, Typography, Variants } from '@fluentui-react-native/theme-types';
const fontTokens = globalTokens.font;
// The sizes are taken for the Dynamic Type Size "Large", which is the system default
export function appleTypography(): Typography {
const appleDict = {
@ -45,20 +49,91 @@ export function appleTypography(): Typography {
heroSemibold: { face: 'primary', size: 'hero', weight: '600' },
heroLargeStandard: { face: 'primary', size: 'heroLarge', weight: '400' },
heroLargeSemibold: { face: 'primary', size: 'heroLarge', weight: '600' },
// mocked out
caption1: { face: 'primary', size: 'caption', weight: '400' },
body1: { face: 'primary', size: 'secondary', weight: '400' },
body1Strong: { face: 'primary', size: 'secondary', weight: '600' },
body2: { face: 'primary', size: 'body', weight: '400' },
body2Strong: { face: 'primary', size: 'body', weight: '600' },
subtitle1: { face: 'primary', size: 'header', weight: '400' },
subtitle1Strong: { face: 'primary', size: 'header', weight: '600' },
subtitle2: { face: 'primary', size: 'subheader', weight: '400' },
subtitle2Strong: { face: 'primary', size: 'subheader', weight: '600' },
title1: { face: 'primary', size: 'hero', weight: '400' },
title1Strong: { face: 'primary', size: 'hero', weight: '600' },
largeTitle: { face: 'primary', size: 'heroLarge', weight: '400' },
display: { face: 'primary', size: 'heroLarge', weight: '600' },
// iOS styles
caption2: {
face: fontTokens.family.base,
size: fontTokens.size[100],
weight: fontTokens.weight.regular,
lineHeight: fontTokens.lineHeight[100],
letterSpacing: 0,
},
caption1: {
face: fontTokens.family.base,
size: fontTokens.size[200],
weight: fontTokens.weight.regular,
lineHeight: fontTokens.lineHeight[200],
letterSpacing: -0.08,
},
caption1Strong: {
face: fontTokens.family.base,
size: fontTokens.size[200],
weight: fontTokens.weight.semibold,
lineHeight: fontTokens.lineHeight[200],
letterSpacing: -0.08,
},
body2: {
face: fontTokens.family.base,
size: fontTokens.size[300],
weight: fontTokens.weight.regular,
lineHeight: fontTokens.lineHeight[300],
letterSpacing: -0.23,
},
body2Strong: {
face: fontTokens.family.base,
size: fontTokens.size[300],
weight: fontTokens.weight.semibold,
lineHeight: fontTokens.lineHeight[300],
letterSpacing: -0.23,
},
body1: {
face: fontTokens.family.base,
size: fontTokens.size[400],
weight: fontTokens.weight.regular,
lineHeight: fontTokens.lineHeight[400],
letterSpacing: -0.43,
},
body1Strong: {
face: fontTokens.family.base,
size: fontTokens.size[400],
weight: fontTokens.weight.semibold,
lineHeight: fontTokens.lineHeight[400],
letterSpacing: -0.43,
},
title3: {
face: fontTokens.family.base,
size: fontTokens.size[500],
weight: fontTokens.weight.semibold,
lineHeight: fontTokens.lineHeight[500],
letterSpacing: -0.45,
},
title2: {
face: fontTokens.family.base,
size: fontTokens.size[600],
weight: fontTokens.weight.semibold,
lineHeight: fontTokens.lineHeight[600],
letterSpacing: -0.26,
},
title1: {
face: fontTokens.family.base,
size: fontTokens.size[700],
weight: fontTokens.weight.bold,
lineHeight: fontTokens.lineHeight[700],
letterSpacing: 0.38,
},
largeTitle: {
face: fontTokens.family.base,
size: fontTokens.size[800],
weight: fontTokens.weight.bold,
lineHeight: fontTokens.lineHeight[800],
letterSpacing: 0.4,
},
display: {
face: fontTokens.family.base,
size: fontTokens.size[900],
weight: fontTokens.weight.bold,
lineHeight: fontTokens.lineHeight[900],
letterSpacing: 0.26,
},
} as Variants,
};

11
packages/theming/theme-types/src/Typography.types.ts
Просмотреть файл

@ -96,6 +96,11 @@ export type FontWeight = keyof FontWeights | FontWeightValue;
*/
export type FontLineHeight = number;
/**
* A font letter spacing value, specified in points on Apple platforms and ems everywhere else.
*/
export type FontLetterSpacing = number;
/**
* A font variant value.
*/
@ -103,6 +108,8 @@ export type VariantValue = {
face: FontFamily;
size: FontSize;
weight: FontWeight;
lineHeight?: FontLineHeight;
letterSpacing?: FontLetterSpacing;
};
/**
@ -124,6 +131,8 @@ export interface Variants {
heroLargeSemibold: VariantValue;
//v2 variants
caption1?: VariantValue;
caption1Strong?: VariantValue;
caption2?: VariantValue;
body1?: VariantValue;
body1Strong?: VariantValue;
body2?: VariantValue;
@ -134,6 +143,8 @@ export interface Variants {
subtitle2Strong?: VariantValue;
title1?: VariantValue;
title1Strong?: VariantValue;
title2?: VariantValue;
title3?: VariantValue;
largeTitle?: VariantValue;
display?: VariantValue;
}

21
packages/utils/tokens/src/text-tokens.ts
Просмотреть файл

@ -19,19 +19,28 @@ export interface FontStyleTokens {
export type FontTokens = FontStyleTokens & FontVariantTokens;
export const fontStyles: TokenBuilder<FontTokens> = {
from: ({ fontFamily, fontSize, fontWeight, variant }: FontTokens, { typography }: Theme) => {
from: ({ fontFamily, fontLetterSpacing, fontLineHeight, fontSize, fontWeight, variant }: FontTokens, { typography }: Theme) => {
const { families, sizes, weights, variants } = typography;
if (fontFamily || fontSize || fontWeight || variant) {
if (
fontFamily !== undefined ||
fontLetterSpacing !== undefined ||
fontLineHeight !== undefined ||
fontSize !== undefined ||
fontWeight !== undefined ||
variant !== undefined
) {
return {
fontFamily: families[fontFamily] || fontFamily || families[variants[variant].face] || variants[variant].face,
fontSize: sizes[fontSize] || fontSize || sizes[variants[variant].size] || variants[variant].size,
fontWeight: weights[fontWeight] || fontWeight || weights[variants[variant].weight] || variants[variant].weight,
fontFamily: families[fontFamily] ?? fontFamily ?? families[variants[variant]?.face] ?? variants[variant]?.face,
fontSize: sizes[fontSize] ?? fontSize ?? sizes[variants[variant]?.size] ?? variants[variant]?.size,
fontWeight: weights[fontWeight] ?? fontWeight ?? weights[variants[variant]?.weight] ?? variants[variant]?.weight,
lineHeight: fontLineHeight ?? variants[variant]?.lineHeight,
letterSpacing: fontLetterSpacing ?? variants[variant]?.letterSpacing,
};
}
return {};
},
keys: ['fontFamily', 'fontSize', 'fontWeight', 'variant'],
keys: ['fontFamily', 'fontLineHeight', 'fontLetterSpacing', 'fontSize', 'fontWeight', 'variant'],
};
function _buildTextStyles(tokens: FontTokens, theme: Theme): ITextProps {

5
yarn.lock
Просмотреть файл

@ -1520,6 +1520,11 @@
resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-android/-/design-tokens-android-0.13.0.tgz#f473d1f3eefdf720715c627b7816a2b41ba35627"
integrity sha512-bkWBgViYMpJ712+wd82+RIvHcU1ox5TGxV4O46FnJLI9LW7sd+HVP70yW7fd1Kuhkx/MTmI9K3YEG/Aw4JnyOA==
"@fluentui-react-native/design-tokens-ios@^0.19.0":
version "0.19.0"
resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-ios/-/design-tokens-ios-0.19.0.tgz#8c084af9080e93705239bc8b353da55bbbb507aa"
integrity sha512-Kvf3plp5eXN9S6mHK8SeDNhg2XukciVBm7rU954wgIYCePSif9/zixhH/OSSOE9HcYGyXzthRY6KDuu1KJDVCA==
"@fluentui-react-native/design-tokens-macos@^0.13.0":
version "0.13.0"
resolved "https://registry.yarnpkg.com/@fluentui-react-native/design-tokens-macos/-/design-tokens-macos-0.13.0.tgz#e1098f2ad2476867b8c656522efc3445c25b1ecc"