Cleanup some styles

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/app/globals.css

@@ -4,6 +4,12 @@ body {
   background-color: var(--canon-background);
   color: var(--canon-text-primary);
   transition: background-color 0.2s ease-in-out;
+
+  --docs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
+  font-family: var(--docs-font);
 }
 
 iframe {

canon-docs/src/components/Sidebar/Sidebar.module.css

@@ -39,6 +39,13 @@
   width: 100%;
 }
 
+.sectionTitle {
+  font-family: var(--docs-font);
+  font-size: var(--canon-font-size-body);
+  font-weight: var(--canon-font-weight-bold);
+  padding: 12px 0;
+}
+
 .line {
   width: 100%;
   display: flex;
@@ -58,3 +65,16 @@
 .line.active {
   background-color: var(--canon-surface-2);
 }
+
+.lineTitle {
+  font-family: var(--docs-font);
+  font-size: var(--canon-font-size-body);
+  font-weight: var(--canon-font-weight-regular);
+  color: var(--canon-text-primary);
+}
+
+.lineStatus {
+  font-family: var(--docs-font);
+  font-size: var(--canon-font-size-body);
+  color: var(--canon-text-secondary);
+}

canon-docs/src/components/Sidebar/docs.tsx

@@ -55,9 +55,7 @@ export const Docs = () => {
         return (
           <Fragment key={section.title}>
             <Box marginTop="lg" marginBottom="2xs">
-              <Text variant="body" weight="bold">
-                {section.title}
-              </Text>
+              <div className={styles.sectionTitle}>{section.title}</div>
             </Box>
             {section.content.map(item => {
               const isActive = pathname === `${section.url}/${item.slug}`;
@@ -68,17 +66,14 @@ export const Docs = () => {
                   key={item.slug}
                   className={`${styles.line} ${isActive ? styles.active : ''}`}
                 >
-                  <Text variant="body">{item.title}</Text>
-                  <Text
-                    variant="body"
-                    style={{ color: 'var(--canon-text-secondary)' }}
-                  >
+                  <div className={styles.lineTitle}>{item.title}</div>
+                  <div className={styles.lineStatus}>
                     {item.status === 'alpha' && 'Alpha'}
                     {item.status === 'beta' && 'Beta'}
                     {item.status === 'inProgress' && 'In Progress'}
                     {item.status === 'stable' && 'Stable'}
                     {item.status === 'deprecated' && 'Deprecated'}
-                  </Text>
+                  </div>
                 </Link>
               );
             })}

canon-docs/src/components/Toolbar/nav.module.css

@@ -19,6 +19,7 @@
 .tab {
   all: unset;
   height: 60px;
+  font-family: var(--docs-font);
   color: var(--canon-text-secondary);
   font-size: var(--canon-font-size-body);
   font-weight: var(--canon-font-weight-bold);

canon-docs/src/mdx-components.modules.css

@@ -0,0 +1,3 @@
+.paragraph {
+  font-family: var(--docs-font);
+}

canon-docs/src/mdx-components.tsx

@@ -1,33 +1,64 @@
+import React, { ReactNode } from 'react';
 import type { MDXComponents } from 'mdx/types';
 import Image, { ImageProps } from 'next/image';
-import { ReactNode } from 'react';
-import React from 'react';
 import { CodeBlock } from '@/components/CodeBlock';
 import { Heading } from '../../packages/canon/src/components/Heading';
-import { Text } from '../../packages/canon/src/components/Text';
 import { Box } from '../../packages/canon/src/components/Box';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     // Allows customizing built-in components, e.g. to add styling.
     h1: ({ children }) => (
-      <Box marginBottom="md" style={{ marginTop: '4rem' }}>
-        <Heading variant="title2">{children as ReactNode}</Heading>
+      <Box style={{ marginTop: '4rem' }}>
+        <h1
+          style={{
+            fontFamily: 'var(--docs-font)',
+            fontSize: '3rem',
+            fontWeight: 'var(--canon-font-weight-bold)',
+            margin: 0,
+          }}
+        >
+          {children as ReactNode}
+        </h1>
       </Box>
     ),
     h2: ({ children }) => (
       <Box marginTop="2xl" marginBottom="md">
-        <Heading variant="title4">{children as ReactNode}</Heading>
+        <h2
+          style={{
+            fontFamily: 'var(--docs-font)',
+            fontSize: '1.5rem',
+            fontWeight: 'var(--canon-font-weight-bold)',
+          }}
+        >
+          {children as ReactNode}
+        </h2>
       </Box>
     ),
     h3: ({ children }) => (
       <Box marginTop="xl" marginBottom="xs">
-        <Heading variant="title5">{children as ReactNode}</Heading>
+        <h3
+          style={{
+            fontFamily: 'var(--docs-font)',
+            fontSize: '1.25rem',
+            fontWeight: 'var(--canon-font-weight-bold)',
+          }}
+        >
+          {children as ReactNode}
+        </h3>
       </Box>
     ),
     p: ({ children }) => (
       <Box marginBottom="sm">
-        <Text variant="subtitle">{children as ReactNode}</Text>
+        <p
+          style={{
+            fontFamily: 'var(--docs-font)',
+            fontSize: '1rem',
+            lineHeight: '1.5',
+          }}
+        >
+          {children as ReactNode}
+        </p>
       </Box>
     ),
     a: ({ children, href }) => (
@@ -42,6 +73,21 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
 
       return <CodeBlock lang="tsx" code={codeContent} />;
     },
+    code: ({ children }) => (
+      <code
+        style={{
+          fontFamily: 'var(--canon-font-monospace)',
+          backgroundColor: 'var(--canon-surface-1)',
+          padding: '0.2rem 0.375rem',
+          borderRadius: '0.25rem',
+          color: 'var(--canon-text-secondary)',
+          border: '1px solid var(--canon-border-base)',
+          fontSize: '0.875rem',
+        }}
+      >
+        {children}
+      </code>
+    ),
     img: props => (
       <Image
         sizes="100vw"