fix: tokens

scripts/generate-utility-docs.js

@@ -6,7 +6,6 @@ const postcss = require('postcss')
 
 // Paths
 const UTILITIES_CSS = path.join(__dirname, '../src/utilities.css')
-const BASE_CSS = path.join(__dirname, '../src/base.css')
 const CLAUDE_MD = path.join(__dirname, '../CLAUDE.md')
 const TYPES_DIR = path.join(__dirname, '../types')
 const UTILITIES_TYPES = path.join(TYPES_DIR, 'utilities.d.ts')
@@ -115,30 +114,30 @@ function generateTypeDefinitions(utilities, themeColors) {
  * DO NOT EDIT THIS FILE DIRECTLY
  * Run 'pnpm generate:docs' to update
  */
-
+/* eslint-disable */
+/* prettier-ignore */
 /**
  * Custom utility classes defined in utilities.css
  */
 export type MoonshineUtilities =
-${utilityTypes};
+${utilityTypes}
 
 /**
  * Semantic color utilities available from theme
  * These are auto-generated from theme colors with standard prefixes
  */
 export type MoonshineColorUtilities =
-${colorUtilities};
+${colorUtilities}
 
 /**
  * All available Moonshine utility classes
  */
-export type MoonshineClasses = MoonshineUtilities | MoonshineColorUtilities;
+export type MoonshineClasses = MoonshineUtilities | MoonshineColorUtilities
 
 /**
  * Helper type for className props
  */
-export type MoonshineClassName = MoonshineClasses | MoonshineClasses[] | undefined | null | false;
-`
+export type MoonshineClassName = MoonshineClasses | MoonshineClasses[] | undefined | null | false`
 }
 
 // Generate documentation section for CLAUDE.md
@@ -147,14 +146,13 @@ function generateDocSection(utilities) {
 
   // Group utilities by type
   const typography = utilities.filter(
-    (u) => u.name.startsWith('text-') || u.name.startsWith('typography-')
+      (u) => u.name.startsWith('text-')
   )
   const backgrounds = utilities.filter((u) => u.name.startsWith('bg-'))
   const borders = utilities.filter((u) => u.name.startsWith('border-'))
   const other = utilities.filter(
     (u) =>
       !u.name.startsWith('text-') &&
-      !u.name.startsWith('typography-') &&
       !u.name.startsWith('bg-') &&
       !u.name.startsWith('border-')
   )
@@ -171,18 +169,10 @@ function generateDocSection(utilities) {
     sections.push('### Typography Utilities\n')
     typography.forEach((u) => {
       sections.push(`#### \`${u.name}\`\n`)
-      sections.push('```css')
-      sections.push(`.${u.name} {`)
-      sections.push(u.properties.join('\n'))
-
-      if (u.variants.length > 0) {
-        u.variants.forEach((v) => {
-          sections.push(`\n  /* ${v.name} variant */`)
-          sections.push(v.properties.join('\n'))
-        })
-      }
-
-      sections.push('}')
+      sections.push('```tsx')
+      sections.push(`<p className={cn('${u.name}')}>`)
+      sections.push(`Hello world`)
+      sections.push(`</p>`)
       sections.push('```\n')
     })
   }
@@ -192,18 +182,10 @@ function generateDocSection(utilities) {
     sections.push('### Background Utilities\n')
     backgrounds.forEach((u) => {
       sections.push(`#### \`${u.name}\`\n`)
-      sections.push('```css')
-      sections.push(`.${u.name} {`)
-      sections.push(u.properties.join('\n'))
-
-      if (u.variants.length > 0) {
-        u.variants.forEach((v) => {
-          sections.push(`\n  /* ${v.name} variant */`)
-          sections.push(v.properties.join('\n'))
-        })
-      }
-
-      sections.push('}')
+      sections.push('```tsx')
+      sections.push(`<div className={cn('${u.name}')}>`)
+      sections.push(`Hello world`)
+      sections.push(`</div>`)
       sections.push('```\n')
     })
   }
@@ -213,10 +195,10 @@ function generateDocSection(utilities) {
     sections.push('### Border Utilities\n')
     borders.forEach((u) => {
       sections.push(`#### \`${u.name}\`\n`)
-      sections.push('```css')
-      sections.push(`.${u.name} {`)
-      sections.push(u.properties.join('\n'))
-      sections.push('}')
+      sections.push('```tsx')
+      sections.push(`<div className={cn('${u.name}')}>`)
+      sections.push(`Hello world`)
+      sections.push(`</div>`)
       sections.push('```\n')
     })
   }
@@ -226,10 +208,10 @@ function generateDocSection(utilities) {
     sections.push('### Other Utilities\n')
     other.forEach((u) => {
       sections.push(`#### \`${u.name}\`\n`)
-      sections.push('```css')
-      sections.push(`.${u.name} {`)
-      sections.push(u.properties.join('\n'))
-      sections.push('}')
+      sections.push('```tsx')
+      sections.push(`<div className={cn('${u.name}')}>`)
+      sections.push(`Hello world`)
+        sections.push(`</div>`)
       sections.push('```\n')
     })
   }

src/components/AIChat/parts/AIChatMessageToolInvocationPart.tsx

@@ -43,7 +43,7 @@ export function AIChatMessageToolInvocationPart({
           <Text variant="xs" className="mb-1 font-medium text-neutral-200">
             Input:
           </Text>
-          <pre className="typography-body-xs rounded bg-neutral-900 p-2 whitespace-pre-wrap text-neutral-300">
+          <pre className="text-body-xs rounded bg-neutral-900 p-2 whitespace-pre-wrap text-neutral-300">
             {JSON.stringify(toolInput, null, 2)}
           </pre>
         </div>

src/components/AIChat/parts/AIChatMessageToolPart.tsx

@@ -44,7 +44,7 @@ export interface AIChatMessageToolPartComponents extends BaseComponents {
 }
 
 const inputResultClassName =
-  'typography-body-xs max-h-48 overflow-auto rounded p-2 break-all whitespace-pre-wrap text-foreground bg-muted'
+  'text-body-xs max-h-48 overflow-auto rounded p-2 break-all whitespace-pre-wrap text-foreground bg-muted'
 
 const defaultComponents: DefaultComponents<AIChatMessageToolPartComponents> = {
   toolName: ({ toolName, confirmMessage, className }) => (

src/components/AIChat/parts/AIChatMessageToolResultPart.tsx

@@ -37,7 +37,7 @@ export function AIChatMessageToolResultPart({
         </Text>
       </div>
       <div className="mt-2">
-        <pre className="typography-body-xs rounded bg-neutral-900 p-2 whitespace-pre-wrap text-neutral-300">
+        <pre className="text-body-xs rounded bg-neutral-900 p-2 whitespace-pre-wrap text-neutral-300">
           {content}
         </pre>
       </div>

src/components/AppLayout/index.tsx

@@ -160,7 +160,7 @@ const AppLayoutBreadcrumb = ({
 AppLayoutBreadcrumb.displayName = 'AppLayout.Breadcrumb'
 
 const AppLayoutBreadcrumbDivider = () => {
-  return <span className="text-muted-foreground typography-body-lg">/</span>
+  return <span className="text-muted-foreground text-body-lg">/</span>
 }
 
 interface AppLayoutBreadcrumbItemProps extends PropsWithChildren {
@@ -176,7 +176,7 @@ const AppLayoutBreadcrumbItem = ({
   return (
     <div
       className={cn(
-        'typography-body-md text-muted-foreground cursor-pointer',
+        'text-body-md text-muted-foreground cursor-pointer',
         active && 'text-foreground cursor-default',
         !active && 'hover:text-foreground',
         className
@@ -211,7 +211,7 @@ const AppLayoutCollapseButton = ({
         <Tooltip delayDuration={500}>
           <TooltipTrigger asChild>
             <button
-              className="typography-body-md hover:bg-accent rounded-md p-1.5"
+              className="text-body-md hover:bg-accent rounded-md p-1.5"
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
               onClick={() => setCollapsed(!collapsed)}

src/utilities.css

@@ -4,82 +4,6 @@
  * They reference the primitives defined in base.css
  */
 
-/*
-  TODO: rename to text-*
-  TODO: replace these with the ones for the new brand
-  TODO: Delete all typography classes https://linear.app/speakeasy/issue/DES-325/replace-all-references-to-typography-classes
-*/
-@utility typography-heading-xl {
-  font-size: 2.063rem;
-  font-weight: 300;
-  line-height: 1.375;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-lg {
-  font-size: 1.813rem;
-  font-weight: 300;
-  line-height: 1.5;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-md {
-  font-size: 1.625rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-sm {
-  font-size: 1.438rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-xs {
-  font-size: 1.25rem;
-  font-weight: 300;
-  line-height: 1.6;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-heading-xxs {
-  font-size: 1.125rem;
-  font-weight: 300;
-  line-height: 1.778;
-  letter-spacing: 0.0015em;
-  font-family: var(--font-diatype);
-}
-@utility typography-body-lg {
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1.75;
-  letter-spacing: 0.0025em;
-  font-family: var(--font-diatype);
-}
-@utility typography-body-md {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.75;
-  letter-spacing: 0.0025em;
-  font-family: var(--font-diatype);
-}
-@utility typography-body-sm {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.75;
-  letter-spacing: 0.0025em;
-  font-family: var(--font-diatype);
-}
-@utility typography-body-xs {
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.75;
-  letter-spacing: 0.0025em;
-  font-family: var(--font-diatype);
-}
-
 @utility container {
   padding-inline: 1rem;
   margin-inline: auto;

types/utilities.d.ts

@@ -1,25 +1,16 @@
 /**
  * Auto-generated TypeScript definitions for Moonshine utilities
- * Generated on: 2025-07-25T19:46:22.448Z
+ * Generated on: 2025-08-05T10:11:38.805Z
  *
  * DO NOT EDIT THIS FILE DIRECTLY
  * Run 'pnpm generate:docs' to update
  */
-
+/* eslint-disable */
+/* prettier-ignore */
 /**
  * Custom utility classes defined in utilities.css
  */
 export type MoonshineUtilities =
-  | 'typography-heading-xl'
-  | 'typography-heading-lg'
-  | 'typography-heading-md'
-  | 'typography-heading-sm'
-  | 'typography-heading-xs'
-  | 'typography-heading-xxs'
-  | 'typography-body-lg'
-  | 'typography-body-md'
-  | 'typography-body-sm'
-  | 'typography-body-xs'
   | 'container'
   | 'bg-mask'
   | 'text-display-2xl'
@@ -426,9 +417,4 @@ export type MoonshineClasses = MoonshineUtilities | MoonshineColorUtilities
 /**
  * Helper type for className props
  */
-export type MoonshineClassName =
-  | MoonshineClasses
-  | MoonshineClasses[]
-  | undefined
-  | null
-  | false
+export type MoonshineClassName = MoonshineClasses | MoonshineClasses[] | undefined | null | false