Implement some basic typography styling

packages/system/package.json

@@ -8,9 +8,13 @@
   },
   "dependencies": {
     "@types/react": "^18.0.17",
-    "@vanilla-extract/css": "^1.12.0",
-    "@vanilla-extract/sprinkles": "^1.6.1",
     "clsx": "^2.0.0",
     "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@capsizecss/core": "^3.1.1",
+    "@capsizecss/metrics": "^1.2.0",
+    "@capsizecss/vanilla-extract": "^1.0.0",
+    "@vanilla-extract/css": "^1.12.0"
   }
 }

packages/system/src/components/Heading.tsx

@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import { Box } from './Box';
+import * as typographyStyles from './typography.css';
 
-type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingLevel = 1 | 2 | 3 | 4;
 
 interface HeadingProps {
-  component?: `h${HeadingLevel}`;
+  component?: ElementType;
   level: HeadingLevel;
   children: ReactNode;
   id?: string;
@@ -15,8 +16,6 @@ const componentFromLevel: { [Level in HeadingLevel]: `h${Level}` } = {
   2: 'h2',
   3: 'h3',
   4: 'h4',
-  5: 'h5',
-  6: 'h6',
 };
 
 export const Heading = ({
@@ -28,7 +27,11 @@ export const Heading = ({
   const component = rawComponent || componentFromLevel[level];
 
   return (
-    <Box component={component} id={id}>
+    <Box
+      component={component}
+      id={id}
+      className={[typographyStyles.font, typographyStyles.heading[level]]}
+    >
       {children}
     </Box>
   );

packages/system/src/components/Text.tsx

@@ -0,0 +1,28 @@
+import type { ElementType, ReactNode } from 'react';
+import { Box } from './Box';
+import * as typographyStyles from './typography.css';
+
+type TextSize = keyof typeof typographyStyles.text;
+
+interface TextProps {
+  component?: ElementType;
+  children: ReactNode;
+  size?: TextSize;
+}
+
+export const Text = ({
+  component: rawComponent,
+  children,
+  size = 'standard',
+}: TextProps) => {
+  const component = rawComponent || 'span';
+
+  return (
+    <Box
+      component={component}
+      className={[typographyStyles.font, typographyStyles.text[size]]}
+    >
+      {children}
+    </Box>
+  );
+};

packages/system/src/components/typography.css.ts

@@ -0,0 +1,77 @@
+import { createFontStack } from '@capsizecss/core';
+import { createTextStyle } from '@capsizecss/vanilla-extract';
+import openSansMetrics from '@capsizecss/metrics/openSans';
+import arialMetrics from '@capsizecss/metrics/arial';
+import { globalFontFace, style, styleVariants } from '@vanilla-extract/css';
+
+const headingLevels = {
+  1: {
+    fontSize: 44,
+    lineGap: 18,
+  },
+  2: {
+    fontSize: 38,
+    lineGap: 16,
+  },
+  3: {
+    fontSize: 32,
+    lineGap: 14,
+  },
+  4: {
+    fontSize: 24,
+    lineGap: 12,
+  },
+};
+
+export const heading = styleVariants(
+  headingLevels,
+  ({ fontSize, lineGap }, level) => [
+    createTextStyle(
+      {
+        fontSize,
+        lineGap,
+        fontMetrics: openSansMetrics,
+      },
+      `heading_${level}`,
+    ),
+  ],
+);
+
+const textSizes = {
+  large: {
+    fontSize: 20,
+    lineGap: 14,
+  },
+  standard: {
+    fontSize: 18,
+    lineGap: 12,
+  },
+  small: {
+    fontSize: 16,
+    lineGap: 12,
+  },
+};
+
+export const text = styleVariants(textSizes, ({ fontSize, lineGap }, size) => [
+  createTextStyle(
+    {
+      fontSize,
+      lineGap,
+      fontMetrics: openSansMetrics,
+    },
+    `text_${size}`,
+  ),
+]);
+
+const { fontFamily, fontFaces } = createFontStack(
+  [openSansMetrics, arialMetrics],
+  {
+    fontFaceFormat: 'styleObject',
+  },
+);
+
+export const font = style({ fontFamily: `${fontFamily}, sans-serif` });
+
+fontFaces.forEach((face) =>
+  globalFontFace(face['@font-face'].fontFamily, face['@font-face']),
+);

packages/system/src/index.ts

@@ -1,2 +1,3 @@
 export { Box } from './components/Box';
 export { Heading } from './components/Heading';
+export { Text } from './components/Text';

site/markdoc.config.mjs

@@ -8,7 +8,7 @@ export default defineMarkdocConfig({
     },
     paragraph: {
       ...nodes.paragraph,
-      render: component('./src/components/Paragraph.astro'),
+      render: component('./src/components/Text.astro'),
     },
     blockquote: {
       ...nodes.paragraph,

site/package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "@types/gh-pages": "^3.2.1",
     "@types/node": "^20.4.5",
+    "@types/react": "^18.0.17",
     "@vanilla-extract/css": "^1.12.0",
     "@vanilla-extract/vite-plugin": "^3.8.2",
     "gh-pages": "^5.0.0",

site/src/components/Block.astro

@@ -0,0 +1,13 @@
+---
+import { Box } from '@askoufis/system';
+import { block } from './Block.css';
+import type { ElementType } from 'react';
+
+interface Props {
+  component?: ElementType;
+}
+
+const { component = 'div' } = Astro.props;
+---
+
+<Box component={component} className={block}><slot /></Box>

site/src/components/Block.css.ts

@@ -0,0 +1,3 @@
+import { style } from '@vanilla-extract/css';
+
+export const block = style({ margin: '0 auto', paddingBottom: 20 });