Font fixes: - Added Title component styles in theme.ts to apply Forum font - Body uses Zalando Sans via theme fontFamily - All headings (h1-h6) now use Forum via Title component styles Logo fixes: - Rewrote SVG with simplified paths at larger scale - Removed complex transforms causing content to be outside viewBox - Logo now renders at 32x32px with clearly visible wave graphic - Save button now generates draft from conversation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
80 lines
1.8 KiB
TypeScript
80 lines
1.8 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',
|
|
// Body text font (Zalando Sans from Google Fonts via link tag)
|
|
fontFamily: '"Zalando Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
// Headings font (Forum from Google Fonts via next/font)
|
|
headings: {
|
|
fontFamily: 'var(--font-forum), serif',
|
|
},
|
|
// Define other font families to ensure Mantine variables are set
|
|
fontFamilyMonospace: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
|
|
// Set default component props for a consistent look
|
|
components: {
|
|
Title: {
|
|
styles: {
|
|
root: {
|
|
fontFamily: 'var(--font-forum), serif',
|
|
},
|
|
},
|
|
},
|
|
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',
|
|
},
|
|
},
|
|
},
|
|
});
|