Jason Woltje
61130b869b
Build out apps/web with Tailwind CSS v4, BetterAuth client, and the Mosaic design system. Populate @mosaic/design-tokens with actual color palette (deep blue-grays, blue/purple/teal accents), font definitions (Outfit/Fira Code), and spacing scale per AD-13. - Tailwind v4 CSS-first config with @theme tokens in globals.css - next/font for self-hosted Outfit + Fira Code (no Google CDN) - App shell with sidebar nav, topbar, and content area - Route groups: (dashboard) with AppShell, (auth) with centered card - Placeholder pages: /chat, /login, /register - BetterAuth React client (useSession, signIn, signUp, signOut) - Gateway API fetch wrapper with credentials - cn() utility with clsx + tailwind-merge - Dark theme default, WCAG-friendly contrast Refs #26 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
31 lines
724 B
TypeScript
31 lines
724 B
TypeScript
import type { ReactNode } from 'react';
|
|
import { Outfit, Fira_Code } from 'next/font/google';
|
|
import './globals.css';
|
|
|
|
const outfit = Outfit({
|
|
subsets: ['latin'],
|
|
variable: '--font-sans',
|
|
display: 'swap',
|
|
weight: ['300', '400', '500', '600', '700'],
|
|
});
|
|
|
|
const firaCode = Fira_Code({
|
|
subsets: ['latin'],
|
|
variable: '--font-mono',
|
|
display: 'swap',
|
|
weight: ['400', '500', '700'],
|
|
});
|
|
|
|
export const metadata = {
|
|
title: 'Mosaic',
|
|
description: 'Mosaic Stack Dashboard',
|
|
};
|
|
|
|
export default function RootLayout({ children }: { children: ReactNode }): React.ReactElement {
|
|
return (
|
|
<html lang="en" className={`dark ${outfit.variable} ${firaCode.variable}`}>
|
|
<body>{children}</body>
|
|
</html>
|
|
);
|
|
}
|