Text - Reusable make-styles rules

packages/react-text/Spec.md

@@ -110,16 +110,22 @@ This is achieved with the `make-styles` rules being available to the user so tha
 ### Using styles directly
 
 ```jsx
-import { useTypographyStyles } from '@fluentui/react-text';
+import { typographyStyles } from '@fluentui/react-text';
+
+const useStyles = makeStyles({
+  root: typographyStyles.title,
+  caption: typographyStyles.caption,
+});
 
 const Test = () => {
-  const typographyStyles = useTypographyStyles();
+  const styles = useStyles();
 
   return (
     <>
-      <span className={typographyStyles.display}>I am styled like a display</span>
-      <span className={typographyStyles.title}>I am styled like a title</span>
-      <span className={typographyStyles.subtitle}>I am styled like a subtitle</span>
+      <p className={styles.root}>
+        <span>I am styled like a title</span>
+        <span className={styles.caption}>I am styled like a caption</span>
+      </p>
     </>
   );
 };

packages/react-text/etc/react-text.api.md

@@ -6,7 +6,9 @@
 
 import { ComponentPropsCompat } from '@fluentui/react-utilities';
 import { ComponentStateCompat } from '@fluentui/react-utilities';
+import { MakeStylesStyleFunctionRule } from '@fluentui/make-styles';
 import * as React_2 from 'react';
+import { Theme } from '@fluentui/react-theme';
 
 // @public
 export const renderText: (state: TextState) => JSX.Element;
@@ -39,6 +41,19 @@ export interface TextState extends ComponentStateCompat<TextProps, TextDefaulted
     ref: React_2.Ref<HTMLElement>;
 }
 
+// @public
+export const typographyStyles: {
+    caption: MakeStylesStyleFunctionRule<Theme>;
+    body: MakeStylesStyleFunctionRule<Theme>;
+    subheadline: MakeStylesStyleFunctionRule<Theme>;
+    headline: MakeStylesStyleFunctionRule<Theme>;
+    title3: MakeStylesStyleFunctionRule<Theme>;
+    title2: MakeStylesStyleFunctionRule<Theme>;
+    title1: MakeStylesStyleFunctionRule<Theme>;
+    largeTitle: MakeStylesStyleFunctionRule<Theme>;
+    display: MakeStylesStyleFunctionRule<Theme>;
+};
+
 // @public
 export const useText: (props: TextProps, ref: React_2.Ref<HTMLElement>, defaultProps?: TextProps | undefined) => TextState;
 

packages/react-text/src/index.ts

@@ -1 +1,2 @@
 export * from './Text';
+export * from './typographyStyles';

packages/react-text/src/typographyStyles.ts

@@ -0,0 +1 @@
+export * from './typographyStyles/index';

packages/react-text/src/typographyStyles/index.ts

@@ -0,0 +1,2 @@
+import * as typographyStyles from './typographyStyles';
+export { typographyStyles };

packages/react-text/src/typographyStyles/typographyStyles.test.ts

@@ -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],
+])('Uses the right tokens for %s', (ruleName, fontFamily, fontSize, lineHeight, fontWeight) => {
+  const ruleFunction = typographyStyles[ruleName as keyof typeof typographyStyles];
+
+  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);
+});

packages/react-text/src/typographyStyles/typographyStyles.ts

@@ -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,
+});

packages/react-text/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "target": "ES5",
     "module": "CommonJS",
-    "lib": ["es5", "dom"],
+    "lib": ["es2015", "dom"],
     "outDir": "dist",
     "jsx": "react",
     "declaration": true,