Organize storybook TOC for react-theme

change/@fluentui-react-theme-04b2a905-c203-47f1-b3f1-493a4d6e50a7.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Updated storybook docs",
+  "packageName": "@fluentui/react-theme",
+  "email": "gcox@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-theme/stories/Theme/borderRadii/index.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { BorderRadii } from './ThemeBorderRadii.stories';
+
+<Meta title="Theme/Border Radii" />
+
+<h1 class="sbdocs-title">Border Radii</h1>
+
+<Canvas withSource="none">
+  <BorderRadii />
+</Canvas>

packages/react-components/react-theme/stories/Theme/colors/ColorRamp.stories.tsx

@@ -60,7 +60,7 @@ export const ColorRampItem: React.FunctionComponent<ColorRampItemProps> = props
           justifyContent: 'space-between',
           padding: '1.5vh',
           background: props.value,
-          width: '300px',
+          width: '200px',
           boxSizing: 'border-box',
           alignItems: 'center',
           height: '100%',

packages/react-components/react-theme/stories/Theme/colors/ThemeColors.stories.tsx

@@ -12,11 +12,11 @@ import { ColorRampItem } from './ColorRamp.stories';
 
 // FIXME: hardcoded theme
 const theme = {
-  light: webLightTheme,
-  dark: webDarkTheme,
+  webLight: webLightTheme,
+  webDark: webDarkTheme,
   teamsLight: teamsLightTheme,
   teamsDark: teamsDarkTheme,
-  highContrast: teamsHighContrastTheme,
+  teamsHighContrast: teamsHighContrastTheme,
 };
 
 const colorPalette = {
@@ -97,7 +97,7 @@ const ColorButton: React.FunctionComponent<
   />
 );
 
-const neutralTokens = (Object.keys(theme.light) as Array<keyof Theme>).filter(tokenName =>
+const neutralTokens = (Object.keys(theme.webLight) as Array<keyof Theme>).filter(tokenName =>
   tokenName.match(/^color(?!Palette).*/),
 );
 
@@ -109,7 +109,7 @@ export const Colors = () => {
   const tokens: Array<keyof Theme> =
     activeColor === 'neutral'
       ? neutralTokens
-      : (Object.keys(theme.light) as Array<keyof Theme>).filter(tokenName =>
+      : (Object.keys(theme.webLight) as Array<keyof Theme>).filter(tokenName =>
           tokenName.startsWith(`colorPalette${activeColor}`),
         );
 
@@ -123,7 +123,7 @@ export const Colors = () => {
           setColor={setColor}
           setPreviewColor={setPreviewColor}
           style={{
-            background: theme.light.colorNeutralForeground1,
+            background: theme.webLight.colorNeutralForeground1,
           }}
         />
         {(Object.keys(colorPalette) as GlobalSharedColors[]).map(colorName => (
@@ -134,7 +134,7 @@ export const Colors = () => {
             setColor={setColor}
             setPreviewColor={setPreviewColor}
             style={{
-              background: theme.light[`colorPalette${colorName}BorderActive` as keyof Theme],
+              background: theme.webLight[`colorPalette${colorName}BorderActive` as keyof Theme],
             }}
           />
         ))}
@@ -164,7 +164,7 @@ export const Colors = () => {
           Teams Dark
         </h3>
         <h3 key="hrHC" style={{ padding: '1em', margin: 0 }}>
-          High Contrast
+          Teams High Contrast
         </h3>
         {tokens.map(name => [
           <div
@@ -173,11 +173,11 @@ export const Colors = () => {
           >
             {name}
           </div>,
-          <ColorRampItem key={`${name}Light`} value={theme.light[name]} />,
-          <ColorRampItem key={`${name}Dark`} value={theme.dark[name]} />,
+          <ColorRampItem key={`${name}Light`} value={theme.webLight[name]} />,
+          <ColorRampItem key={`${name}Dark`} value={theme.webDark[name]} />,
           <ColorRampItem key={`${name}TeamsLight`} value={theme.teamsLight[name]} />,
           <ColorRampItem key={`${name}TeamsDark`} value={theme.teamsDark[name]} />,
-          <ColorRampItem key={`${name}HC`} value={theme.highContrast[name]} />,
+          <ColorRampItem key={`${name}HC`} value={theme.teamsHighContrast[name]} />,
         ])}
       </div>
     </>

packages/react-components/react-theme/stories/Theme/colors/index.stories.mdx

@@ -1,17 +1,10 @@
 import { Meta, Canvas } from '@storybook/addon-docs';
 import { Colors } from './ThemeColors.stories.tsx';
-import { Shadows } from './ThemeShadows.stories';
 
-<Meta title="Theme/Color" />
+<Meta title="Theme/Colors" />
 
 <h1 class="sbdocs-title"> Colors </h1>
 
 <Canvas withSource="none">
   <Colors />
 </Canvas>
-
-## Shadows
-
-<Canvas withSource="none">
-  <Shadows />
-</Canvas>

packages/react-components/react-theme/stories/Theme/fonts/ThemeFonts.stories.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { makeStyles, teamsLightTheme } from '@fluentui/react-components';
+import type { FontFamilyTokens, FontSizeTokens, FontWeightTokens, LineHeightTokens } from '@fluentui/react-components';
+
+const theme = teamsLightTheme;
+
+const useStyles = makeStyles({
+  propGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    gridTemplateRows: '1fr',
+    rowGap: '10px',
+    columnGap: '10px',
+    fontFamily: theme.fontFamilyBase,
+    alignContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export const FontFamily = () => {
+  const styles = useStyles();
+
+  const fontFamilies = Object.keys(theme).filter(tokenName =>
+    tokenName.startsWith('fontFamily'),
+  ) as (keyof FontFamilyTokens)[];
+
+  return (
+    <div className={styles.propGrid}>
+      {fontFamilies.map(fontFamily => [
+        <div key={fontFamily}>{fontFamily}</div>,
+        <div key={`${fontFamily}-value`} style={{ fontFamily: `${theme[fontFamily]}` }}>
+          {theme[fontFamily]}Font family {fontFamily}
+        </div>,
+      ])}
+    </div>
+  );
+};
+
+export const FontSize = () => {
+  const styles = useStyles();
+
+  const fontSizes = Object.keys(theme).filter(tokenName =>
+    tokenName.startsWith('fontSize'),
+  ) as (keyof FontSizeTokens)[];
+
+  return (
+    <div className={styles.propGrid}>
+      {fontSizes.map(fontSize => (
+        <>
+          <div key={fontSize}>{fontSize}</div>
+          <div key={`${fontSize}-value`} style={{ fontSize: theme[fontSize], lineHeight: theme[fontSize] }}>
+            {fontSize}
+          </div>
+        </>
+      ))}
+    </div>
+  );
+};
+
+export const LineHeight = () => {
+  const styles = useStyles();
+
+  const lineHeightKeys = Object.keys(theme).filter(tokenName =>
+    tokenName.startsWith('lineHeight'),
+  ) as (keyof LineHeightTokens)[];
+
+  return (
+    <div className={styles.propGrid}>
+      {lineHeightKeys.map(lineHeight => [
+        <div key={lineHeight}>{lineHeight}</div>,
+        <div key={`${lineHeight}-value`} style={{ lineHeight: theme[lineHeight], backgroundColor: '#eee' }}>
+          {lineHeight}
+        </div>,
+      ])}
+    </div>
+  );
+};
+
+export const FontWeight = () => {
+  const styles = useStyles();
+
+  const fontWeights = Object.keys(theme).filter(tokenName =>
+    tokenName.startsWith('fontWeight'),
+  ) as (keyof FontWeightTokens)[];
+
+  return (
+    <div className={styles.propGrid}>
+      {fontWeights.map(fontWeight => [
+        <div key={fontWeight}>{fontWeight}</div>,
+        <div key={`${fontWeight}-value`} style={{ fontWeight: theme[fontWeight] }}>
+          Font weight {fontWeight}
+        </div>,
+      ])}
+    </div>
+  );
+};

packages/react-components/react-theme/stories/Theme/fonts/index.stories.mdx

@@ -0,0 +1,30 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { FontFamily, FontSize, FontWeight, LineHeight } from './ThemeFonts.stories';
+
+<Meta title="Theme/Fonts" />
+
+<h1 class="sbdocs-title">Fonts</h1>
+
+### Font family
+
+<Canvas withSource="none">
+  <FontFamily />
+</Canvas>
+
+### Font size
+
+<Canvas withSource="none">
+  <FontSize />
+</Canvas>
+
+### Font weight
+
+<Canvas withSource="none">
+  <FontWeight />
+</Canvas>
+
+### Line height
+
+<Canvas withSource="none">
+  <LineHeight />
+</Canvas>

packages/react-components/react-theme/stories/Theme/motion/index.stories.mdx

@@ -0,0 +1,18 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { MotionCurves, MotionDuration } from './ThemeMotion.stories';
+
+<Meta title="Theme/Motion" />
+
+<h1 class="sbdocs-title">Motion</h1>
+
+### Curves
+
+<Canvas withSource="none">
+  <MotionCurves />
+</Canvas>
+
+### Durations
+
+<Canvas withSource="none">
+  <MotionDuration />
+</Canvas>

packages/react-components/react-theme/stories/Theme/shadows/index.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { Shadows } from './ThemeShadows.stories';
+
+<Meta title="Theme/Shadows" />
+
+<h1 class="sbdocs-title"> Shadow </h1>
+
+<Canvas withSource="none">
+  <Shadows />
+</Canvas>

packages/react-components/react-theme/stories/Theme/spacing/index.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { Spacing } from './ThemeSpacing.stories';
+
+<Meta title="Theme/Spacing" />
+
+<h1 class="sbdocs-title">Spacing</h1>
+
+<Canvas withSource="none">
+  <Spacing />
+</Canvas>

packages/react-components/react-theme/stories/Theme/strokeWidths/index.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { StrokeWidths } from './ThemeStrokeWidths.stories';
+
+<Meta title="Theme/Stroke Widths" />
+
+<h1 class="sbdocs-title">Stroke Widths</h1>
+
+<Canvas withSource="none">
+  <StrokeWidths />
+</Canvas>