Files
app/app/theme.ts
Albert 7fe7ee314b fix: Implement proper fonts and visible logo
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>
2025-11-09 16:41:23 +00:00

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',
},
},
},
});