forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Text - Reusable make-styles rules (microsoft#18778)
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
- Loading branch information
1 parent
b18d96f
commit 00b6555
Showing
9 changed files
with
198 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export * from './Text'; | ||
export * from './typographyStyles'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './typographyStyles/index'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
import * as typographyStyles from './typographyStyles'; | ||
export { typographyStyles }; |
74 changes: 74 additions & 0 deletions
74
packages/react-text/src/typographyStyles/typographyStyles.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import { Theme } from '@fluentui/react-theme'; | ||
import { typographyStyles } from './index'; | ||
|
||
const weightsMock = { | ||
regular: 1, | ||
semibold: 2, | ||
}; | ||
type DeepPartial<T> = Partial<{ [P in keyof T]: DeepPartial<T[P]> }>; | ||
const themeMock: DeepPartial<Theme> = { | ||
global: { | ||
type: { | ||
fontFamilies: { | ||
base: 'base', | ||
}, | ||
fontWeights: { | ||
regular: weightsMock.regular, | ||
semibold: weightsMock.semibold, | ||
}, | ||
fontSizes: { | ||
base: { | ||
[100]: '100', | ||
[200]: '200', | ||
[300]: '300', | ||
[400]: '400', | ||
[500]: '500', | ||
[600]: '600', | ||
}, | ||
hero: { | ||
[700]: '700', | ||
[800]: '800', | ||
[900]: '900', | ||
[1000]: '1000', | ||
}, | ||
}, | ||
lineHeights: { | ||
base: { | ||
[100]: '100', | ||
[200]: '200', | ||
[300]: '300', | ||
[400]: '400', | ||
[500]: '500', | ||
[600]: '600', | ||
}, | ||
hero: { | ||
[700]: '700', | ||
[800]: '800', | ||
[900]: '900', | ||
[1000]: '1000', | ||
}, | ||
}, | ||
}, | ||
}, | ||
}; | ||
|
||
test.each([ | ||
['caption', 'base', '200', '200', weightsMock.regular], | ||
['body', 'base', '300', '300', weightsMock.regular], | ||
['subheadline', 'base', '400', '400', weightsMock.semibold], | ||
['headline', 'base', '500', '500', weightsMock.semibold], | ||
['title3', 'base', '600', '600', weightsMock.semibold], | ||
['title2', 'base', '700', '700', weightsMock.semibold], | ||
['title1', 'base', '800', '800', weightsMock.semibold], | ||
['largeTitle', 'base', '900', '900', weightsMock.semibold], | ||
['display', 'base', '1000', '1000', weightsMock.semibold], | ||
] as const)('Uses the right tokens for %s', (ruleName, fontFamily, fontSize, lineHeight, fontWeight) => { | ||
const ruleFunction = typographyStyles[ruleName]; | ||
|
||
const rules = ruleFunction(themeMock as Theme); | ||
|
||
expect(rules.fontFamily).toEqual(fontFamily); | ||
expect(rules.fontSize).toEqual(fontSize); | ||
expect(rules.lineHeight).toEqual(lineHeight); | ||
expect(rules.fontWeight).toEqual(fontWeight); | ||
}); |
60 changes: 60 additions & 0 deletions
60
packages/react-text/src/typographyStyles/typographyStyles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { MakeStylesStyleFunctionRule } from '@fluentui/make-styles'; | ||
import { Theme } from '@fluentui/react-theme'; | ||
|
||
/** | ||
* Make-styles rules for the typography variants | ||
*/ | ||
export const caption: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.base[200], | ||
lineHeight: theme.global.type.lineHeights.base[200], | ||
fontWeight: theme.global.type.fontWeights.regular, | ||
}); | ||
export const body: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.base[300], | ||
lineHeight: theme.global.type.lineHeights.base[300], | ||
fontWeight: theme.global.type.fontWeights.regular, | ||
}); | ||
export const subheadline: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.base[400], | ||
lineHeight: theme.global.type.lineHeights.base[400], | ||
fontWeight: theme.global.type.fontWeights.semibold, | ||
}); | ||
export const headline: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.base[500], | ||
lineHeight: theme.global.type.lineHeights.base[500], | ||
fontWeight: theme.global.type.fontWeights.semibold, | ||
}); | ||
export const title3: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.base[600], | ||
lineHeight: theme.global.type.lineHeights.base[600], | ||
fontWeight: theme.global.type.fontWeights.semibold, | ||
}); | ||
export const title2: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.hero[700], | ||
lineHeight: theme.global.type.lineHeights.hero[700], | ||
fontWeight: theme.global.type.fontWeights.semibold, | ||
}); | ||
export const title1: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.hero[800], | ||
lineHeight: theme.global.type.lineHeights.hero[800], | ||
fontWeight: theme.global.type.fontWeights.semibold, | ||
}); | ||
export const largeTitle: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.hero[900], | ||
lineHeight: theme.global.type.lineHeights.hero[900], | ||
fontWeight: theme.global.type.fontWeights.semibold, | ||
}); | ||
export const display: MakeStylesStyleFunctionRule<Theme> = theme => ({ | ||
fontFamily: theme.global.type.fontFamilies.base, | ||
fontSize: theme.global.type.fontSizes.hero[1000], | ||
lineHeight: theme.global.type.lineHeights.hero[1000], | ||
fontWeight: theme.global.type.fontWeights.semibold, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters