Initialize Next.js 16 (App Router) project with all core dependencies: - Next.js, React 19, TypeScript configuration - Mantine UI components (@mantine/core, @mantine/hooks) - ATproto SDK for Bluesky integration - SurrealDB client (updated to latest non-deprecated version) - Vercel AI SDK with Google AI provider - Deepgram SDK for voice-to-text - React Three Fiber for 3D visualization - UMAP.js for dimensionality reduction - Magnitude test framework for E2E testing - Playwright for browser automation Created basic app structure with homepage displaying "Ponderants" text. Configured magnitude.config.ts for testing framework. Added .example.env with all required environment variables. Test: Smoke test verifies app boots and renders homepage. Status: ✓ Test passed (8.4s) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
68 lines
1.3 KiB
TypeScript
68 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { createTheme, MantineColorsTuple } from '@mantine/core';
|
|
|
|
// Define a rich 10-shade grayscale palette
|
|
const ponderGray: MantineColorsTuple = [
|
|
'#f8f9fa', // lightest
|
|
'#e9ecef',
|
|
'#dee2e6',
|
|
'#ced4da',
|
|
'#adb5bd',
|
|
'#868e96',
|
|
'#495057',
|
|
'#343a40',
|
|
'#212529',
|
|
'#181a1d', // darkest
|
|
];
|
|
|
|
export const theme = createTheme({
|
|
primaryColor: 'gray',
|
|
// Use our custom gray palette
|
|
colors: {
|
|
gray: ponderGray,
|
|
},
|
|
// Set default dark mode and grayscale for the "minimalist" look
|
|
defaultRadius: 'md',
|
|
fontFamily: 'Inter, sans-serif',
|
|
// Enforce dark mode
|
|
forceColorScheme: 'dark',
|
|
|
|
// Set default component props for a consistent look
|
|
components: {
|
|
Button: {
|
|
defaultProps: {
|
|
variant: 'filled',
|
|
color: 'gray',
|
|
radius: 'xl',
|
|
},
|
|
},
|
|
Paper: {
|
|
defaultProps: {
|
|
shadow: 'xs',
|
|
p: 'md',
|
|
radius: 'md',
|
|
withBorder: true,
|
|
},
|
|
styles: {
|
|
root: {
|
|
backgroundColor: '#212529', // gray.8
|
|
borderColor: '#495057', // gray.6
|
|
},
|
|
},
|
|
},
|
|
TextInput: {
|
|
defaultProps: {
|
|
variant: 'filled',
|
|
radius: 'xl',
|
|
},
|
|
},
|
|
Textarea: {
|
|
defaultProps: {
|
|
variant: 'filled',
|
|
radius: 'lg',
|
|
},
|
|
},
|
|
},
|
|
});
|