Docs(react-theme): Add typographyStyles story

change/@fluentui-react-components-cfddd7d4-0c30-425c-88bd-5fe3a4f09453.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Export TypographyStyle type",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-theme-84c82566-de8b-43d7-9e67-49ae3cbae176.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Export TypographyStyle type",
+  "packageName": "@fluentui/react-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -359,6 +359,7 @@ import { TooltipProps } from '@fluentui/react-tooltip';
 import { TooltipSlots } from '@fluentui/react-tooltip';
 import { TooltipState } from '@fluentui/react-tooltip';
 import { TooltipTriggerProps } from '@fluentui/react-tooltip';
+import { TypographyStyle } from '@fluentui/react-theme';
 import { TypographyStyles } from '@fluentui/react-theme';
 import { typographyStyles } from '@fluentui/react-theme';
 import { UninitializedMenuListState } from '@fluentui/react-menu';
@@ -1172,6 +1173,8 @@ export { TooltipState }
 
 export { TooltipTriggerProps }
 
+export { TypographyStyle }
+
 export { TypographyStyles }
 
 export { typographyStyles }

packages/react-components/react-components/src/index.ts

@@ -77,6 +77,7 @@ export type {
   DurationTokens,
   CurveTokens,
   Theme,
+  TypographyStyle,
   TypographyStyles,
 } from '@fluentui/react-theme';
 export { useThemeClassName } from '@fluentui/react-shared-contexts';

packages/react-components/react-theme/etc/react-theme.api.md

@@ -473,6 +473,14 @@ export function themeToTokensObject<TTheme extends Theme>(theme: TTheme): Record
 // @public (undocumented)
 export const tokens: Record<keyof Theme, string>;
 
+// @public (undocumented)
+export type TypographyStyle = {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+
 // @public (undocumented)
 export type TypographyStyles = {
     body1: TypographyStyle;

packages/react-components/react-theme/src/index.ts

@@ -74,5 +74,6 @@ export type {
   ColorTokens,
   PartialTheme,
   Theme,
+  TypographyStyle,
   TypographyStyles,
 } from './types';

packages/react-components/react-theme/src/themes/ThemeTypography.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { teamsLightTheme } from '../index';
-import type { FontFamilyTokens, FontSizeTokens, LineHeightTokens, FontWeightTokens } from '../index';
+import { teamsLightTheme, typographyStyles } from '../index';
+import type { FontFamilyTokens, FontSizeTokens, LineHeightTokens, FontWeightTokens, TypographyStyle } from '../index';
 
 export default {
   title: 'Theme',
@@ -71,3 +71,49 @@ export const FontWeight = () => (
     )}
   </div>
 );
+
+export const TypographyStyles = () => {
+  // var(--tokenName) => tokenName
+  function formatTypographyStyleValue(typographyStyleValue: TypographyStyle) {
+    return (
+      <div>
+        {Object.values(typographyStyleValue).map(value => (
+          <div key={value}>{value.replace(/var\(--(.+)\)/, '$1')}</div>
+        ))}
+      </div>
+    );
+  }
+
+  // caption1Strong => Caption 1 Strong
+  function formatTypographyStyleName(typographyStyleName: string) {
+    return typographyStyleName.replace(/([A-Z\d])/g, ' $1').replace(/^(.)/, firstChar => firstChar.toUpperCase());
+  }
+
+  return (
+    <div>
+      <div>
+        <em>Typography style is represented by a set of tokens instead of an individual token.</em>
+      </div>
+      <div
+        style={{
+          marginTop: '2em',
+          fontFamily: theme.fontFamilyBase,
+          display: 'grid',
+          gridTemplateColumns: 'auto auto 1fr',
+          gap: '10px',
+          alignItems: 'center',
+        }}
+      >
+        {(Object.keys(typographyStyles) as (keyof typeof typographyStyles)[]).map(typographyStyleName => [
+          <div key={typographyStyleName}>{typographyStyleName}</div>,
+          <div key={`${typographyStyleName}-value`}>
+            {formatTypographyStyleValue(typographyStyles[typographyStyleName])}
+          </div>,
+          <div key={`${typographyStyleName}-demo`} style={typographyStyles[typographyStyleName]}>
+            Hello, I am {formatTypographyStyleName(typographyStyleName)}
+          </div>,
+        ])}
+      </div>
+    </div>
+  );
+};

packages/react-components/react-theme/src/types.ts

@@ -875,7 +875,7 @@ export type TextAlignments = {
   justify: TextAlignment;
 };
 
-type TypographyStyle = {
+export type TypographyStyle = {
   fontFamily: string;
   fontSize: string;
   fontWeight: string;