feat(ui): Typography V2

pkgs/clan-app/ui/.storybook/preview.css

@@ -0,0 +1,5 @@
+html {
+  /* revert this which only makes sense when rendering inside the clan app webview */
+  overflow-x: revert;
+  overflow-y: revert;
+}

pkgs/clan-app/ui/.storybook/preview.ts

@@ -1,6 +1,7 @@
 import type { Preview } from "@kachurun/storybook-solid";
 
 import "@/src/components/v2/index.css";
+import "./preview.css";
 
 export const preview: Preview = {
   tags: ["autodocs"],

pkgs/clan-app/ui/package.json

@@ -29,7 +29,6 @@
     "@storybook/addon-links": "^8.6.14",
     "@storybook/addon-viewport": "^8.6.14",
     "@storybook/builder-vite": "^8.6.14",
-    "@storybook/codegen": "^8.6.14",
     "@storybook/test-runner": "^0.22.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/json-schema": "^7.0.15",

pkgs/clan-app/ui/src/components/inputBase/index.tsx

@@ -38,7 +38,7 @@ export const InputBase = (props: InputBaseProps) => {
         "flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6",
 
         // Background
-        "bg-def-1 hover:bg-acc-1",
+        "bg-def-1 hover:bg-def-acc-1",
 
         // Text
         "fg-def-1",

pkgs/clan-app/ui/src/components/modal/index.tsx

@@ -76,7 +76,7 @@ export const Modal = (props: ModalProps) => {
         >
           <Dialog.Label
             as="div"
-            class="flex w-full justify-center border-b-2 px-4 py-2 align-middle bg-def-3  border-def-5"
+            class="flex w-full justify-center border-b-2 px-4 py-2 align-middle bg-def-3  border-def-4"
             onMouseDown={handleMouseDown}
           >
             <div

pkgs/clan-app/ui/src/components/v2/Typography/Typography.css

@@ -1,104 +1,151 @@
 /* Body */
 .typography {
+  &.font-weight-normal {
+    font-weight: 400;
+  }
 
-    font-family: "Archivo SemiCondensed", sans-serif;
+  &.font-weight-medium {
+    font-weight: 500;
+  }
 
-    &.font-weight-normal {
-        font-weight: 400;
+  &.font-weight-bold {
+    font-weight: 600;
+  }
+
+  &.font-body {
+    &.font-family-regular {
+      font-family: "Archivo", sans-serif;
     }
 
-    &.font-weight-medium {
-        font-weight: 500;
+    &.font-family-condensed {
+      font-family: "Archivo SemiCondensed", sans-serif;
     }
 
-    &.font-weight-bold {
-        font-weight: 600;
+    &.font-size-default {
+      font-size: 1rem;
+      line-height: 132%;
+      letter-spacing: 0.02rem;
     }
 
-    &.font-body {
-        &.font-size-default {
-            font-size: 1rem;
-            line-height: 132%;
-            letter-spacing: 0.02rem;
-        }
-
-        &.font-size-s {
-            font-size: 0.875rem;
-            line-height: 132%;
-            letter-spacing: 0.0175rem;
-        }
-
-        &.font-size-xs {
-            font-size: 0.75rem;
-            line-height: 132%;
-            letter-spacing: 0.0225rem;
-        }
-
-        &.font-size-xxs {
-            font-size: 0.6875rem;
-            line-height: 132%;
-            letter-spacing: 0.00688rem;
-        }
+    &.font-size-s {
+      font-size: 0.875rem;
+      line-height: 132%;
+      letter-spacing: 0.0175rem;
     }
 
-    &.font-label {
-        &.font-size-default {
-            font-size: 0.875rem;
-            line-height: 132%;
-            letter-spacing: 0.0175rem;
-        }
-
-        &.font-size-s {
-            font-size: 0.8125rem;
-            line-height: 132%;
-            letter-spacing: 0.0175rem;
-        }
-
-        &.font-size-xs {
-            font-size: 0.75rem;
-            line-height: 132%;
-            letter-spacing: 0.0075rem;
-        }
+    &.font-size-xs {
+      font-size: 0.75rem;
+      line-height: 132%;
+      letter-spacing: 0.0225rem;
     }
 
-    &.font-title {
-        &.font-size-default {
-            font-size: 1.125rem;
-            line-height: 124%;
-            letter-spacing: 0.03375rem;
-        }
+    &.font-size-xxs {
+      font-size: 0.6875rem;
+      line-height: 132%;
+      letter-spacing: 0.00688rem;
+    }
+  }
 
-        &.font-size-m {
-            font-size: 1.25rem;
-            line-height: 124%;
-            letter-spacing: 0.0375rem;
-        }
+  &.font-label {
+    &.font-family-condensed {
+      font-family: "Archivo SemiCondensed", sans-serif;
 
-        &.font-size-l {
-            font-size: 1.375rem;
-            line-height: 124%;
-            letter-spacing: 0.04125rem;
-        }
+      &.font-size-default {
+        font-size: 0.875rem;
+        line-height: 132%;
+        letter-spacing: 0.0175rem;
+      }
+
+      &.font-size-s {
+        font-size: 0.8125rem;
+        line-height: 132%;
+        letter-spacing: 0.0175rem;
+      }
+
+      &.font-size-xs {
+        font-size: 0.75rem;
+        line-height: 132%;
+        letter-spacing: 0.0075rem;
+      }
     }
 
-    &.font-headline {
-        &.font-size-default {
-            font-size: 1.5rem;
-            line-height: 116%;
-            letter-spacing: 0.015rem;
-        }
+    &.font-family-mono {
+      font-family: "Fira Code", monospace;
 
-        &.font-size-m {
-            font-size: 1.75rem;
-            line-height: 116%;
-            letter-spacing: 0.0175rem;
-        }
+      &.font-size-default {
+        font-size: 0.8125rem;
+        letter-spacing: normal;
+      }
 
-        &.font-size-l {
-            font-size: 2rem;
-            line-height: 116%;
-            letter-spacing: 0.06rem;
-        }
+      &.font-size-s {
+        font-size: 0.75rem;
+        letter-spacing: normal;
+      }
+
+      &.font-size-xs {
+        font-size: 0.6875rem;
+        letter-spacing: normal;
+      }
     }
+  }
+
+  &.font-title {
+    &.font-family-regular {
+      font-family: "Archivo", sans-serif;
+    }
+
+    &.font-size-default {
+      font-size: 1.125rem;
+      line-height: 124%;
+      letter-spacing: 0.03375rem;
+    }
+
+    &.font-size-m {
+      font-size: 1.25rem;
+      line-height: 124%;
+      letter-spacing: 0.0375rem;
+    }
+
+    &.font-size-l {
+      font-size: 1.375rem;
+      line-height: 124%;
+      letter-spacing: 0.04125rem;
+    }
+  }
+
+  &.font-headline {
+    &.font-family-regular {
+      font-family: "Archivo", sans-serif;
+    }
+
+    &.font-size-default {
+      font-size: 1.5rem;
+      line-height: 116%;
+      letter-spacing: 0.015rem;
+    }
+
+    &.font-size-m {
+      font-size: 1.75rem;
+      line-height: 116%;
+      letter-spacing: 0.0175rem;
+    }
+
+    &.font-size-l {
+      font-size: 2rem;
+      line-height: 116%;
+      letter-spacing: 0.06rem;
+    }
+  }
+
+  &.font-teaser {
+    &.font-family-regular {
+      font-family: "Archivo", sans-serif;
+    }
+
+    &.font-size-default {
+      font-size: 3rem;
+      line-height: normal;
+      letter-spacing: -0.06rem;
+    }
+  }
 }
-

pkgs/clan-app/ui/src/components/v2/Typography/Typography.mdx

@@ -0,0 +1,52 @@
+import { DocsStory, Meta, Canvas } from "@storybook/blocks";
+
+import * as TypographyStories from "./Typography.stories";
+
+<Meta of={TypographyStories} />
+
+# Typography
+
+There are two fonts being used within our typography system:
+
+- [Archivo] in its _Standard_ and _Semi Condensed_ forms
+- [Fira Code] for mono-spaced content
+
+## UI Components
+
+When creating UI components that a user will interact with,
+you must use the condensed form of `Body`, `Label` and `Label Mono`.
+
+<DocsStory of={TypographyStories.BodyCondensed} />
+
+<DocsStory of={TypographyStories.LabelCondensed} />
+
+<DocsStory of={TypographyStories.LabelMono} />
+
+## Layout & Prose
+
+For layout components and general prose, you must use the non-condensed forms of `Body`, `Title`, `Headline` and
+`Teaser`.
+
+<DocsStory of={TypographyStories.Body} />
+<DocsStory of={TypographyStories.Title} />
+<DocsStory of={TypographyStories.Headline} />
+<DocsStory of={TypographyStories.Teaser} />
+
+## Colors
+
+Text colors come in one of five varieties:
+
+- `inherit` (which will inherit the text color from the parent)
+- `primary`
+- `secondary`
+- `tertiary`
+- `quaternary`
+
+<DocsStory of={TypographyStories.Colors} />
+
+Each color also has an inverted counterpart.
+
+<DocsStory of={TypographyStories.ColorsInverted} />
+
+[Archivo]: https://github.com/Omnibus-Type/Archivo
+[Fira Code]: https://github.com/tonsky/FiraCode

pkgs/clan-app/ui/src/components/v2/Typography/Typography.stories.tsx

@@ -1,37 +1,83 @@
 import type { Meta, StoryObj } from "@kachurun/storybook-solid";
-import { Title as BlockTitle, Subtitle, Description, Primary, Stories } from '@storybook/blocks';
 
 import {
   AllowedSizes,
+  Color,
+  Family,
   Hierarchy,
   Typography,
-  TypographyProps,
   Weight,
 } from "./Typography";
-import { Component, For } from "solid-js";
+import { Component, For, Show } from "solid-js";
 
-interface TypographyExamplesProps<H extends Hierarchy> {
-  weights: Weight[]
-  sizes: AllowedSizes<H>
+interface TypographyExamplesProps {
+  weights: Weight[];
+  sizes: ("default" | "s" | "xs" | "xxs" | "m" | "l")[];
   hierarchy: Hierarchy;
+  colors?: boolean;
+  family?: Family;
+  inverted?: boolean;
 }
 
+const colors: (Color | "inherit")[] = [
+  "inherit",
+  "primary",
+  "secondary",
+  "tertiary",
+  "quaternary",
+];
+
 const TypographyExamples: Component<TypographyExamplesProps> = (props) => (
-  <table class="w-full text-left table-auto min-w-max">
+  <table
+    class="w-full min-w-max table-auto text-left"
+    classList={{
+      "text-white bg-inv-1": props.inverted,
+    }}
+  >
     <tbody>
       <For each={props.sizes}>
         {(size) => (
-          <tr>
+          <tr
+            class="border-b border-def-3 even:bg-def-2"
+            classList={{
+              "border-inv-3 even:bg-inv-2": props.inverted,
+              "border-def-3 even:bg-def-2": !props.inverted,
+            }}
+          >
             <For each={props.weights}>
               {(weight) => (
-                <td class="p-2 border-b">
-                  <Typography
-                    hierarchy={props.hierarchy}
-                    size={size}
-                    weight={weight}
-                  >
-                    {props.hierarchy} / {size} / {weight}
-                  </Typography>
+                <td class="px-6 py-2 ">
+                  <Show when={!props.colors}>
+                    <Typography
+                      hierarchy={props.hierarchy}
+                      //@ts-expect-error: difficult to generify for the story
+                      size={size}
+                      weight={weight}
+                      family={props.family}
+                    >
+                      {props.hierarchy} / {size} / {weight}
+                    </Typography>
+                  </Show>
+                  <Show when={props.colors}>
+                    <For each={colors}>
+                      {(color) => (
+                        <>
+                          <Typography
+                            hierarchy={props.hierarchy}
+                            //@ts-expect-error: difficult to generify for the story
+                            size={size}
+                            weight={weight}
+                            color={color}
+                            family={props.family}
+                            inverted={props.inverted}
+                          >
+                            {props.hierarchy} / {size} / {weight} / {color}
+                          </Typography>
+                          <br />
+                        </>
+                      )}
+                    </For>
+                  </Show>
                 </td>
               )}
             </For>
@@ -42,65 +88,79 @@ const TypographyExamples: Component<TypographyExamplesProps> = (props) => (
   </table>
 );
 
-const meta: Meta<TypographyExamplesProps<never>> = {
+const meta: Meta<TypographyExamplesProps> = {
   title: "Components/Typography",
   component: TypographyExamples,
-  parameters: {
-    docs: {
-      // custom page template to remove controls and primary story example
-      // gives a much nicer overview
-      page: () => (
-        <>
-          <BlockTitle />
-          <Subtitle />
-          <Description />
-          <Stories />
-        </>
-      ),
-
-    }
-  },
-  decorators: [
-    (Story) => (
-      <div className="bg-white">
-        <Story />
-      </div>
-    ),
-  ],
 };
 
 export default meta;
 
-type Story = StoryObj<TypographyProps>;
+type Story = StoryObj<TypographyExamplesProps>;
 
-export const Body: Story = {
+export const BodyCondensed: Story = {
   args: {
     hierarchy: "body",
     sizes: ["default", "s", "xs", "xxs"],
-    weights: ["normal", "medium", "bold"]
+    weights: ["normal", "medium", "bold"],
   },
 };
 
-export const Label: Story = {
+export const Body: Story = {
+  args: {
+    ...BodyCondensed.args,
+    family: "regular",
+  },
+};
+
+export const LabelCondensed: Story = {
   args: {
     hierarchy: "label",
     sizes: ["default", "s", "xs"],
-    weights: ["normal", "medium", "bold"]
+    weights: ["normal", "medium", "bold"],
+  },
+};
+
+export const LabelMono: Story = {
+  args: {
+    ...LabelCondensed.args,
+    family: "mono",
   },
 };
 
 export const Title: Story = {
   args: {
     hierarchy: "title",
-    sizes: ["default", "s", "xs"],
-    weights: ["normal", "medium", "bold"]
+    sizes: ["default", "m", "l"],
+    weights: ["normal", "medium", "bold"],
   },
-}
+};
 
 export const Headline: Story = {
   args: {
     hierarchy: "headline",
-    sizes: ["default", "s", "xs"],
-    weights: ["normal", "medium", "bold"]
+    sizes: ["default", "m", "l"],
+    weights: ["normal", "medium", "bold"],
   },
-}
+};
+
+export const Teaser: Story = {
+  args: {
+    hierarchy: "teaser",
+    sizes: ["default"],
+    weights: ["bold"],
+  },
+};
+
+export const Colors: Story = {
+  args: {
+    ...BodyCondensed.args,
+    colors: true,
+  },
+};
+
+export const ColorsInverted: Story = {
+  args: {
+    ...Colors.args,
+    inverted: true,
+  },
+};

pkgs/clan-app/ui/src/components/v2/Typography/Typography.tsx

@@ -1,11 +1,35 @@
-import { type JSX } from "solid-js";
+import { type JSX, mergeProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cx from "classnames";
 import "./Typography.css";
 
 export type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div";
-export type Hierarchy = "body" | "title" | "headline" | "label";
+export type Color = "primary" | "secondary" | "tertiary" | "quaternary";
+export type Hierarchy = "body" | "title" | "headline" | "label" | "teaser";
 export type Weight = "normal" | "medium" | "bold";
+export type Family = "regular" | "condensed" | "mono";
+
+const colorMap: Record<Color, string> = {
+  primary: cx("fg-def-1"),
+  secondary: cx("fg-def-2"),
+  tertiary: cx("fg-def-3"),
+  quaternary: cx("fg-def-4"),
+};
+
+const invertedColorMap: Record<Color, string> = {
+  primary: cx("fg-inv-1"),
+  secondary: cx("fg-inv-2"),
+  tertiary: cx("fg-inv-3"),
+  quaternary: cx("fg-inv-4"),
+};
+
+const colorFor = (color: Color | "inherit" = "primary", inverted = false) => {
+  if (color === "inherit") {
+    return "text-inherit";
+  }
+
+  return inverted ? invertedColorMap[color] : colorMap[color];
+};
 
 // type Size = "default" | "xs" | "s" | "m" | "l";
 interface SizeForHierarchy {
@@ -30,6 +54,9 @@ interface SizeForHierarchy {
     m: string;
     l: string;
   };
+  teaser: {
+    default: string;
+  };
 }
 
 export type AllowedSizes<H extends Hierarchy> = keyof SizeForHierarchy[H];
@@ -58,6 +85,37 @@ const sizeHierarchyMap: SizeForHierarchy = {
     s: cx("font-size-s"),
     xs: cx("font-size-xs"),
   },
+  teaser: {
+    default: cx("font-size-default"),
+  },
+};
+
+interface FamilyForHierarchy {
+  body: {
+    regular: string;
+    condensed: string;
+  };
+  label: {
+    condensed: string;
+    mono: string;
+  };
+  title: {
+    condensed: string;
+  };
+  headline: {
+    regular: string;
+  };
+  teaser: {
+    regular: string;
+  };
+}
+
+const defaultFamilyMap: Record<Hierarchy, Family> = {
+  body: "condensed",
+  label: "condensed",
+  title: "regular",
+  headline: "regular",
+  teaser: "regular",
 };
 
 const weightMap: Record<Weight, string> = {
@@ -69,8 +127,10 @@ const weightMap: Record<Weight, string> = {
 interface _TypographyProps<H extends Hierarchy> {
   hierarchy: H;
   size: AllowedSizes<H>;
+  color?: Color | "inherit";
   children: JSX.Element;
   weight?: Weight;
+  family?: Family;
   inverted?: boolean;
   tag?: Tag;
   class?: string;
@@ -78,17 +138,31 @@ interface _TypographyProps<H extends Hierarchy> {
 }
 
 export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
+  const family = () =>
+    `font-family-${props.family || defaultFamilyMap[props.hierarchy]}`;
+
+  const color = () => colorFor(props.color, props.inverted);
+
+  const classList = mergeProps(props.classList, {
+    "font-body": props.hierarchy === "body" || !!props.hierarchy,
+    "font-label": props.hierarchy === "label",
+    "font-title": props.hierarchy === "title",
+    "font-headline": props.hierarchy === "headline",
+    "font-teaser": props.hierarchy === "teaser",
+  });
+
   return (
     <Dynamic
-      component={props.tag || "span"}
       class={cx(
         "typography",
+        color(),
+        family(),
         weightMap[props.weight || "normal"],
-        `font-${props.hierarchy}`,
         sizeHierarchyMap[props.hierarchy][props.size] as string,
         props.class,
       )}
-      classList={props.classList}
+      component={props.tag || "span"}
+      classList={classList}
     >
       {props.children}
     </Dynamic>

pkgs/clan-app/ui/src/components/v2/Typography/__snapshots__/Typography.stories.tsx.snap

@@ -0,0 +1,955 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Typography Body smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-body">
+          body / default / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-body">
+          body / default / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-body">
+          body / default / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-s font-body">
+          body / s / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-s font-body">
+          body / s / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-s font-body">
+          body / s / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xs font-body">
+          body / xs / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xs font-body">
+          body / xs / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xs font-body">
+          body / xs / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-xxs font-body">
+          body / xxs / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-xxs font-body">
+          body / xxs / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-xxs font-body">
+          body / xxs / bold
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Components/Typography BodyCondensed smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Components/Typography Colors smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / quaternary
+        </span>
+        <br>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / quaternary
+        </span>
+        <br>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / quaternary
+        </span>
+        <br>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / inherit
+        </span>
+        <br>
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / primary
+        </span>
+        <br>
+        <span class="typography fg-def-2 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / secondary
+        </span>
+        <br>
+        <span class="typography fg-def-3 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / tertiary
+        </span>
+        <br>
+        <span class="typography fg-def-4 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / quaternary
+        </span>
+        <br>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Components/Typography ColorsInverted smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left text-white bg-inv-1">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-default font-body">
+          body / default / normal / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-default font-body">
+          body / default / medium / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-default font-body">
+          body / default / bold / quaternary
+        </span>
+        <br>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-s font-body">
+          body / s / normal / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-s font-body">
+          body / s / medium / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-s font-body">
+          body / s / bold / quaternary
+        </span>
+        <br>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xs font-body">
+          body / xs / normal / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xs font-body">
+          body / xs / medium / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xs font-body">
+          body / xs / bold / quaternary
+        </span>
+        <br>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2 border-inv-3 even:bg-inv-2">
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-normal font-size-xxs font-body">
+          body / xxs / normal / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-medium font-size-xxs font-body">
+          body / xxs / medium / quaternary
+        </span>
+        <br>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography text-inherit font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / inherit
+        </span>
+        <br>
+        <span class="typography fg-inv-1 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / primary
+        </span>
+        <br>
+        <span class="typography fg-inv-2 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / secondary
+        </span>
+        <br>
+        <span class="typography fg-inv-3 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / tertiary
+        </span>
+        <br>
+        <span class="typography fg-inv-4 font-family-condensed font-weight-bold font-size-xxs font-body">
+          body / xxs / bold / quaternary
+        </span>
+        <br>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Components/Typography Headline smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-body font-headline">
+          headline / default / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-body font-headline">
+          headline / default / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-body font-headline">
+          headline / default / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-body font-headline">
+          headline / m / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-body font-headline">
+          headline / m / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-body font-headline">
+          headline / m / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-body font-headline">
+          headline / l / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-body font-headline">
+          headline / l / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-body font-headline">
+          headline / l / bold
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Components/Typography LabelCondensed smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-default font-body font-label">
+          label / default / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-default font-body font-label">
+          label / default / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-default font-body font-label">
+          label / default / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-s font-body font-label">
+          label / s / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-s font-body font-label">
+          label / s / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-s font-body font-label">
+          label / s / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-normal font-size-xs font-body font-label">
+          label / xs / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-medium font-size-xs font-body font-label">
+          label / xs / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-condensed font-weight-bold font-size-xs font-body font-label">
+          label / xs / bold
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Components/Typography LabelMono smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-normal font-size-default font-body font-label">
+          label / default / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-medium font-size-default font-body font-label">
+          label / default / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-bold font-size-default font-body font-label">
+          label / default / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-normal font-size-s font-body font-label">
+          label / s / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-medium font-size-s font-body font-label">
+          label / s / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-bold font-size-s font-body font-label">
+          label / s / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-normal font-size-xs font-body font-label">
+          label / xs / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-medium font-size-xs font-body font-label">
+          label / xs / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-mono font-weight-bold font-size-xs font-body font-label">
+          label / xs / bold
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Components/Typography Teaser smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-body font-teaser">
+          teaser / default / bold
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Components/Typography Title smoke-test 1`] = `
+<table class="w-full min-w-max table-auto text-left">
+  <tbody>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-default font-body font-title">
+          title / default / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-default font-body font-title">
+          title / default / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-default font-body font-title">
+          title / default / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-m font-body font-title">
+          title / m / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-m font-body font-title">
+          title / m / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-m font-body font-title">
+          title / m / bold
+        </span>
+      </td>
+    </tr>
+    <tr class="border-b border-def-3 even:bg-def-2">
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-normal font-size-l font-body font-title">
+          title / l / normal
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-medium font-size-l font-body font-title">
+          title / l / medium
+        </span>
+      </td>
+      <td class="px-6 py-2 ">
+        <span class="typography fg-def-1 font-family-regular font-weight-bold font-size-l font-body font-title">
+          title / l / bold
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;

pkgs/clan-app/ui/src/components/v2/Typography/css/typography-color.css

@@ -1,23 +0,0 @@
-.fnt-clr-primary {
-  color: var(--clr-fg-def-1);
-}
-
-.fnt-clr-secondary {
-  color: var(--clr-fg-def-2);
-}
-
-.fnt-clr-tertiary {
-  color: var(--clr-fg-def-3);
-}
-
-.fnt-clr-primary.fnt-clr--inverted {
-  color: var(--clr-fg-inv-1);
-}
-
-.fnt-clr-secondary.fnt-clr--inverted {
-  color: var(--clr-fg-inv-2);
-}
-
-.fnt-clr-tertiary.fnt-clr--inverted {
-  color: var(--clr-fg-inv-3);
-}

pkgs/clan-app/ui/src/components/v2/Typography/css/typography-hierarchy/index.css

@@ -1,4 +0,0 @@
-@import "./typography-label.css";
-@import "./typography-body.css";
-@import "./typography-title.css";
-@import "./typography-headline.css";

pkgs/clan-app/ui/src/components/v2/Typography/css/typography-hierarchy/typography-body.css

@@ -1,23 +0,0 @@
-.fnt-body-default {
-  font-size: 1rem;
-  line-height: 132%;
-  letter-spacing: 3%;
-}
-
-.fnt-body-s {
-  font-size: 0.925rem;
-  line-height: 132%;
-  letter-spacing: 3%;
-}
-
-.fnt-body-xs {
-  font-size: 0.875rem;
-  line-height: 132%;
-  letter-spacing: 3%;
-}
-
-.fnt-body-xxs {
-  font-size: 0.75rem;
-  line-height: 132%;
-  letter-spacing: 0.00688rem;
-}

pkgs/clan-app/ui/src/components/v2/Typography/css/typography-hierarchy/typography-headline.css

@@ -1,17 +0,0 @@
-.fnt-headline-default {
-  font-size: 1.5rem;
-  line-height: 116%;
-  letter-spacing: 1%;
-}
-
-.fnt-headline-m {
-  font-size: 1.75rem;
-  line-height: 116%;
-  letter-spacing: 1%;
-}
-
-.fnt-headline-l {
-  font-size: 2rem;
-  line-height: 116%;
-  letter-spacing: 1%;
-}

pkgs/clan-app/ui/src/components/v2/Typography/css/typography-hierarchy/typography-label.css

@@ -1,14 +0,0 @@
-.fnt-label-default {
-  font-size: 0.8125rem;
-  line-height: 100%;
-}
-
-.fnt-label-s {
-  font-size: 0.75rem;
-  line-height: 100%;
-}
-
-.fnt-label-xs {
-  font-size: 0.6875rem;
-  line-height: 100%;
-}

pkgs/clan-app/ui/src/components/v2/Typography/css/typography-hierarchy/typography-title.css

@@ -1,17 +0,0 @@
-.fnt-title-default {
-  font-size: 1.125rem;
-  line-height: 124%;
-  letter-spacing: 3%;
-}
-
-.fnt-title-m {
-  font-size: 1.25rem;
-  line-height: 124%;
-  letter-spacing: 3%;
-}
-
-.fnt-title-l {
-  font-size: 1.375rem;
-  line-height: 124%;
-  letter-spacing: 3%;
-}

pkgs/clan-app/ui/src/components/v2/Typography/css/typography.css

@@ -1,26 +0,0 @@
-@import "./typography-hierarchy/";
-@import "./typography-color.css";
-
-.fnt-weight-normal {
-  font-weight: 300;
-}
-
-.fnt-weight-medium {
-  font-weight: 500;
-}
-
-.fnt-weight-bold {
-  font-weight: 700;
-}
-
-.fnt-weight-normal.fnt-clr--inverted {
-  font-weight: 300;
-}
-
-.fnt-weight-medium.fnt-clr--inverted {
-  font-weight: 400;
-}
-
-.fnt-weight-bold.fnt-clr--inverted {
-  font-weight: 700;
-}

pkgs/clan-app/ui/src/components/v2/index.css

@@ -42,6 +42,12 @@
   src: url(../../../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2");
 }
 
+@font-face {
+  font-family: "Fira Code";
+  font-weight: 400;
+  src: url(../../../.fonts/FiraCode-Regular.woff2) format("woff2");
+}
+
 html {
   @apply font-sans;
   overflow-x: hidden;
@@ -55,4 +61,4 @@ html {
   /* Internet Explorer/Edge */
   user-select: none;
   /* Standard */
-}
+}

pkgs/clan-app/ui/src/index.css

@@ -30,46 +30,6 @@
   }
 }
 
-:root {
-  --clr-bg-def-1: theme(colors.white);
-  --clr-bg-def-2: theme(colors.primary.50);
-  --clr-bg-def-3: theme(colors.secondary.100);
-  --clr-bg-def-4: theme(colors.secondary.200);
-  --clr-bg-def-5: theme(colors.secondary.300);
-
-  --clr-border-def-1: theme(colors.secondary.50);
-  --clr-border-def-2: theme(colors.secondary.100);
-  --clr-border-def-3: theme(colors.secondary.200);
-  --clr-border-def-4: theme(colors.secondary.300);
-  --clr-border-def-5: theme(colors.secondary.400);
-
-  --clr-bg-inv-1: theme(colors.primary.600);
-  --clr-bg-inv-2: theme(colors.primary.700);
-  --clr-bg-inv-3: theme(colors.primary.800);
-  --clr-bg-inv-4: theme(colors.primary.900);
-  --clr-bg-inv-5: theme(colors.primary.950);
-
-  --clr-border-inv-1: theme(colors.secondary.800);
-  --clr-border-inv-2: theme(colors.secondary.900);
-  --clr-border-inv-3: theme(colors.secondary.900);
-  --clr-border-inv-4: theme(colors.secondary.950);
-  --clr-border-inv-5: theme(colors.black);
-
-  --clr-bg-inv-acc-1: theme(colors.secondary.500);
-  --clr-bg-inv-acc-2: theme(colors.secondary.600);
-  --clr-bg-inv-acc-3: theme(colors.secondary.700);
-
-  --clr-fg-def-1: theme(colors.secondary.950);
-  --clr-fg-def-2: theme(colors.secondary.900);
-  --clr-fg-def-3: theme(colors.secondary.700);
-  --clr-fg-def-4: theme(colors.secondary.500);
-
-  --clr-fg-inv-1: theme(colors.white);
-  --clr-fg-inv-2: theme(colors.secondary.100);
-  --clr-fg-inv-3: theme(colors.secondary.300);
-  --clr-fg-inv-4: theme(colors.secondary.400);
-}
-
 html {
   @apply font-sans;
   overflow-x: hidden;

pkgs/clan-app/ui/src/index.tsx

@@ -192,6 +192,5 @@ render(
       </QueryClientProvider>
     </>
   ),
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   root!,
 );

pkgs/clan-app/ui/src/routes/machines/details.tsx

@@ -341,7 +341,7 @@ const InstallMachine = (props: InstallMachineProps) => {
     >
       <Match when={isInstalling()}>
         <div class="flex h-96 w-[40rem] flex-col fg-inv-1">
-          <div class="flex w-full gap-1 p-4 bg-inv-5">
+          <div class="flex w-full gap-1 p-4 bg-inv-4">
             <Typography
               color="inherit"
               hierarchy="label"

pkgs/clan-app/ui/src/routes/machines/install/summary-step.tsx

@@ -66,7 +66,7 @@ export const SummaryStep = (props: StepProps<AllStepsValues>) => {
                   </Typography>
                 }
               ></FieldLayout>
-              <hr class="h-px w-full border-none bg-acc-3"></hr>
+              <hr class="h-px w-full border-none bg-def-acc-3"></hr>
               <FieldLayout
                 label={<InputLabel>Main Disk</InputLabel>}
                 field={

pkgs/clan-app/ui/src/routes/machines/install/vars-step.tsx

@@ -116,7 +116,7 @@ export const VarsForm = (props: VarsFormProps) => {
                               >
                                 <textarea
                                   {...props}
-                                  class="w-full h-32 border border-gray-300 rounded-md p-2"
+                                  class="h-32 w-full rounded-md border border-gray-300 p-2"
                                   placeholder={prompt.description}
                                   value={prompt.previous_value ?? ""}
                                   name={prompt.description}

pkgs/clan-app/ui/tailwind/core-plugin.ts

@@ -120,16 +120,16 @@ export default plugin.withOptions(
         },
         // bg inverse accessible
         ".bg-inv-acc-1": {
-          backgroundColor: theme("colors.secondary.500")
+          backgroundColor: theme("colors.secondary.500"),
         },
         ".bg-inv-acc-2": {
-          backgroundColor: theme("colors.secondary.600")
+          backgroundColor: theme("colors.secondary.600"),
         },
         ".bg-inv-acc-3": {
-          backgroundColor: theme("colors.secondary.700")
+          backgroundColor: theme("colors.secondary.700"),
         },
         ".bg-inv-acc-4": {
-          backgroundColor: theme("colors.secondary.900")
+          backgroundColor: theme("colors.secondary.900"),
         },
 
         // bg inverse accent
@@ -187,6 +187,10 @@ export default plugin.withOptions(
         },
 
         ...mkBorderUtils(theme, "border", "borderColor"),
+        ...mkBorderUtils(theme, "border-b", "borderBottom"),
+        ...mkBorderUtils(theme, "border-t", "borderTop"),
+        ...mkBorderUtils(theme, "border-l", "borderLeft"),
+        ...mkBorderUtils(theme, "border-r", "borderRight"),
         ...mkBorderUtils(theme, "outline", "outlineColor"),
 
         // Example: dark mode utilities (all elements within <html class="dark"> )

pkgs/clan-app/ui/tsconfig.json

@@ -1,8 +1,4 @@
 {
-  "exclude": [
-    // ignore storybook stories
-    "**/*.stories.tsx"
-  ],
   "compilerOptions": {
     "strict": true,
     "target": "ESNext",