Themed docs

Author: Rajat

apps/docs/app/global.css

@@ -1,84 +1,51 @@
+@import "@codelitdev/design-system/styles.css";
 @import "tailwindcss";
-@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/lib/default-colors.css";
 @import "fumadocs-ui/css/preset.css";
 @import "fumadocs-openapi/css/preset.css";
 
 @source "../../../packages/email-blocks/src/**/*.{ts,tsx}";
 @source "../../../packages/email-editor/src/**/*.{ts,tsx}";
 
+/* Map fumadocs' fd-* theme tokens onto the CodeLit design system tokens so
+   the docs site (Hanken Grotesk, warm neutrals, SendLit green accent)
+   matches the marketing site and app. */
 @theme inline {
-    --color-background: hsl(var(--background));
-    --color-foreground: hsl(var(--foreground));
-    --color-card: hsl(var(--card));
-    --color-card-foreground: hsl(var(--card-foreground));
-    --color-popover: hsl(var(--popover));
-    --color-popover-foreground: hsl(var(--popover-foreground));
-    --color-primary: hsl(var(--primary));
-    --color-primary-foreground: hsl(var(--primary-foreground));
-    --color-secondary: hsl(var(--secondary));
-    --color-secondary-foreground: hsl(var(--secondary-foreground));
-    --color-muted: hsl(var(--muted));
-    --color-muted-foreground: hsl(var(--muted-foreground));
-    --color-accent: hsl(var(--accent));
-    --color-accent-foreground: hsl(var(--accent-foreground));
-    --color-destructive: hsl(var(--destructive));
-    --color-destructive-foreground: hsl(var(--destructive-foreground));
-    --color-border: hsl(var(--border));
-    --color-input: hsl(var(--input));
-    --color-ring: hsl(var(--ring));
-    --radius-lg: var(--radius);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-sm: calc(var(--radius) - 4px);
+    --color-fd-background: var(--background);
+    --color-fd-foreground: var(--foreground);
+    --color-fd-card: var(--card);
+    --color-fd-card-foreground: var(--card-foreground);
+    --color-fd-popover: var(--popover);
+    --color-fd-popover-foreground: var(--popover-foreground);
+    --color-fd-primary: var(--primary);
+    --color-fd-primary-foreground: var(--primary-foreground);
+    --color-fd-secondary: var(--secondary);
+    --color-fd-secondary-foreground: var(--secondary-foreground);
+    --color-fd-muted: var(--muted);
+    --color-fd-muted-foreground: var(--muted-foreground);
+    --color-fd-accent: var(--accent);
+    --color-fd-accent-foreground: var(--accent-foreground);
+    --color-fd-border: var(--border);
+    --color-fd-ring: var(--ring);
+    --color-fd-overlay: var(--scrim);
+    --color-fd-error: var(--destructive);
+    --color-fd-warning: var(--warning);
+    --color-fd-success: var(--success);
 }
 
-:root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-}
-
-.dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+/* The design-system's light SendLit accent is slightly too bright for the
+   light foreground used on primary buttons/links. Keep the product hue, but
+   use a contrast-safe lightness for interactive primary controls — mirrors
+   the same override in apps/web/app/globals.css. */
+[data-product="sendlit"] {
+    --primary: oklch(0.47 0.14 150);
+    --primary-hover: oklch(0.42 0.14 150);
+    --ring: oklch(0.47 0.14 150);
 }
 
 .email-block-demo {
     border: 1px solid var(--color-fd-border);
-    border-radius: 0.75rem;
+    border-radius: var(--radius-lg);
     margin: 1rem 0 1.5rem;
     overflow: hidden;
 }

apps/docs/app/icon.svg

@@ -1,7 +1,17 @@
 import type { Metadata } from "next";
 import "./global.css";
+import { Hanken_Grotesk, Spline_Sans_Mono } from "next/font/google";
 import { DocsProvider } from "@/components/docs-provider";
 
+const hankenGrotesk = Hanken_Grotesk({
+    subsets: ["latin"],
+    variable: "--font-sans",
+});
+const splineSansMono = Spline_Sans_Mono({
+    subsets: ["latin"],
+    variable: "--font-mono",
+});
+
 export const metadata: Metadata = {
     title: {
         default: "SendLit Docs",
@@ -20,8 +30,13 @@ export default function RootLayout({
     children: React.ReactNode;
 }) {
     return (
-        <html lang="en" suppressHydrationWarning>
-            <body>
+        <html
+            lang="en"
+            data-product="sendlit"
+            className={`font-sans ${hankenGrotesk.variable} ${splineSansMono.variable}`}
+            suppressHydrationWarning
+        >
+            <body className="antialiased">
                 <DocsProvider>{children}</DocsProvider>
             </body>
         </html>

apps/docs/app/layout.tsx

@@ -10,6 +10,7 @@
         "postinstall": "fumadocs-mdx"
     },
     "dependencies": {
+        "@codelitdev/design-system": "0.1.0-alpha.6",
         "@sendlit/api-contract": "workspace:*",
         "@sendlit/email-blocks": "workspace:*",
         "@sendlit/email-editor": "workspace:*",