Files
soroban-abacus-flashcards/apps/web/panda.config.ts
Thomas Hallock 1b7e71cc0d feat: create Next.js web application with beautiful UI
- Set up Next.js 14 with App Router and TypeScript
- Implement Panda CSS for styling instead of Tailwind
- Create comprehensive configuration form using TanStack Forms and Radix UI
- Add live preview, generation progress, and download components
- Design responsive, accessible interface for flashcard generation
- Integrate with existing TypeScript bindings for Python calls

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-14 08:03:37 -05:00

54 lines
1.6 KiB
TypeScript

import { defineConfig } from '@pandacss/dev'
export default defineConfig({
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
// Files to exclude
exclude: [],
// The output directory for your css system
outdir: 'styled-system',
// The JSX framework to use
jsxFramework: 'react',
theme: {
extend: {
tokens: {
colors: {
brand: {
50: { value: '#f0f9ff' },
100: { value: '#e0f2fe' },
200: { value: '#bae6fd' },
300: { value: '#7dd3fc' },
400: { value: '#38bdf8' },
500: { value: '#0ea5e9' },
600: { value: '#0284c7' },
700: { value: '#0369a1' },
800: { value: '#075985' },
900: { value: '#0c4a6e' },
},
soroban: {
wood: { value: '#8B4513' },
bead: { value: '#2C1810' },
inactive: { value: '#D3D3D3' },
bar: { value: '#654321' }
}
},
fonts: {
body: { value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
heading: { value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
mono: { value: 'Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace' }
},
shadows: {
card: { value: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' },
modal: { value: '0 25px 50px -12px rgba(0, 0, 0, 0.25)' }
}
}
}
}
})