Update colors and typography stories

web/stories/Colors.stories.mdx

@@ -10,17 +10,13 @@ and get reflected here as they change.
 
 Toggle dark mode on and off in the above toolbar to see how these colors look on a dark vs. light background.
 
-## Key Colors
-
-<ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} />
-
 ## Text
 
-<ColorRow colors={['theme-text-color', 'theme-text-color-secondary', 'theme-link-color']} />
+<ColorRow colors={['theme-text-primary', 'theme-text-secondary']} />
 
 ## Backgrounds
 
-<ColorRow colors={['theme-background', 'theme-background-secondary', 'popover-background']} />
+<ColorRow colors={['theme-background-primary', 'theme-background-secondary']} />
 
 ## User Colors
 
@@ -36,57 +32,3 @@ Toggle dark mode on and off in the above toolbar to see how these colors look on
     'theme-user-colors-8',
   ]}
 />
-
-## Status
-
-<ColorRow
-  colors={['theme-success-color', 'theme-info-color', 'theme-warning-color', 'theme-error-color']}
-/>
-
-## Gray
-
-<ColorRow
-  colors={[
-    'color-owncast-gray-100',
-    'color-owncast-gray-300',
-    'color-owncast-gray-500',
-    'color-owncast-gray-700',
-    'color-owncast-gray-900',
-  ]}
-/>
-
-## Purple
-
-<ColorRow
-  colors={[
-    'color-owncast-purple-100',
-    'color-owncast-purple-300',
-    'color-owncast-purple-500',
-    'color-owncast-purple-700',
-    'color-owncast-purple-900',
-  ]}
-/>
-
-## Green
-
-<ColorRow
-  colors={[
-    'color-owncast-green-100',
-    'color-owncast-green-300',
-    'color-owncast-green-500',
-    'color-owncast-green-700',
-    'color-owncast-green-900',
-  ]}
-/>
-
-## Orange
-
-<ColorRow
-  colors={[
-    'color-owncast-orange-100',
-    'color-owncast-orange-300',
-    'color-owncast-orange-500',
-    'color-owncast-orange-700',
-    'color-owncast-orange-900',
-  ]}
-/>

web/stories/Typography.stories.mdx

@@ -2,12 +2,28 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="owncast/Style Guide/Typography" />
 
-# Font
+## Body
 
-[Inter font](https://rsms.me/inter/)
+<div style={{ fontSize: '1.2rem', fontFamily: 'var(--theme-text-body-font-family)' }}>
+  The quick brown fox jumps over the lazy dog.
+</div>
 
-## TODO: List out the different text styles.
+<Canvas
+  style={{ color: 'var(--theme-text-secondary)', fontFamily: 'var(--theme-text-body-font-family)' }}
+>
+  {getComputedStyle(document.documentElement).getPropertyValue('--theme-text-body-font-family')}
+</Canvas>
+
+## Display
 
-<Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
-  {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
+<div style={{ fontSize: '1.2rem', fontFamily: 'var(--theme-text-display-font-family)' }}>
+  The quick brown fox jumps over the lazy dog.
+</div>
+<Canvas
+  style={{
+    color: 'var(--theme-text-secondary)',
+    fontFamily: 'var(--theme-text-display-font-family)',
+  }}
+>
+  {getComputedStyle(document.documentElement).getPropertyValue('--theme-text-display-font-family')}
 </Canvas>

web/stories/preview.scss

@@ -1,4 +1,4 @@
 html,
 body {
-  font-family: var(--theme-font-family);
+  font-family: var(--theme-text-body-font-family);
 }