typography showcase

showcase/src/PaletteShowcase.tsx

@@ -35,7 +35,6 @@ const styles = {
   } as React.CSSProperties,
 
   label: {
-    margin: 0,
     fontFamily: 'monospace',
   },
 };

showcase/src/TypographyShowcase.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { Caption } from '@divriots/dockit-react/caption';
+
+const styles = {
+  name: {
+    fontSize: '1rem',
+  },
+  value: {
+    fontFamily: 'monospace',
+    fontSize: '.875rem',
+  },
+};
+
+export const TypographyShowcase = ({ typography }) => {
+  const theme = useTheme();
+
+  const definitionToStyle = ([name, value]) => ({
+    name,
+    value,
+    style: ['fontFamily', 'fontWeight', 'fontSize'].reduce(
+      (styles, styleName) =>
+        name.toLowerCase().includes(styleName.toLocaleLowerCase())
+          ? { ...styles, [styleName]: value }
+          : styles,
+      {}
+    ),
+  });
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Definition</th>
+          <th>Sample</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(typography)
+          .map(definitionToStyle)
+          .map(({ name, value, style }) => (
+            <tr key={name}>
+              <td>
+                <Caption style={styles.name} text={name} />
+
+                <span
+                  style={{
+                    ...styles.value,
+                    color: theme.palette.text.secondary,
+                  }}
+                >
+                  {value}
+                </span>
+              </td>
+              <td>
+                <div style={style}>
+                  The quick brown fox jumps over the lazy dog.
+                </div>
+              </td>
+            </tr>
+          ))}
+      </tbody>
+    </table>
+  );
+};

showcase/src/index.ts

@@ -1 +1,2 @@
 export * from './PaletteShowcase';
+export * from './TypographyShowcase';

theme/src/index.ts

@@ -1,4 +1,5 @@
 import { light, dark } from '~/colors';
+import { typography } from '~/typography';
 import { createTheme as createThemeMui, PaletteMode } from '@mui/material';
 
 export const createTheme = (mode: PaletteMode) =>

typography/doc/typography.mdx

@@ -1,5 +1,9 @@
 import { mdx } from '@mdx-js/react';
+import { TypographyShowcase } from '~/showcase';
+import { typography } from '~/typography';
 import { MdxLayout } from '~/layout';
 export default MdxLayout;
 
-# Font Size
+# Typography
+
+<TypographyShowcase typography={typography} />

typography/src/fonts.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans&display=swap');

typography/src/index.ts

@@ -1,20 +1,19 @@
+import './fonts.css';
+
 export const typography = {
-  fonts: {
-    normal: '-apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
-    mono: 'SFMono-Regular, Consolas, Menlo, Courier, monospace',
-    serif: 'Times New Roman',
-  },
-  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'],
-  fontWeights: {
-    light: 300,
-    normal: 400,
-    semibold: 500,
-    bold: 600,
-  },
-  lineHeights: {
-    condensedUltra: 1,
-    condensed: 1.25,
-    default: 1.5,
-  },
-  letterSpacings: { tight: '-0.03rem', normal: '0.02rem', loose: '0.2rem' },
+  fontFamily:
+    '"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+  fontFamilyCode:
+    '"IBM Plex Mono",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+  fontFamilyTagline:
+    '"PlusJakartaSans-ExtraBold",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+  fontFamilySystem:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+  fontWeightExtraBold: 800,
+  htmlFontSize: 16,
+  fontSize: 14,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 700,
 };