f343f89d24
Complete Next.js website with Docker containerization: - Next.js 14 with TypeScript and Tailwind CSS - Responsive design with modern UI components - Hero section, features showcase, testimonials - FAQ section with comprehensive content - Contact forms and newsletter signup - Docker production build with Nginx - Health checks and monitoring support - SEO optimization and performance tuning Ready for integration as git submodule in main CHORUS project. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
198 lines
4.1 KiB
TypeScript
198 lines
4.1 KiB
TypeScript
import { ThemeConfig } from 'antd';
|
|
import { theme } from 'antd';
|
|
|
|
const { darkAlgorithm } = theme;
|
|
|
|
export const chorusTheme: ThemeConfig = {
|
|
algorithm: darkAlgorithm,
|
|
token: {
|
|
// Primary brand colors
|
|
colorPrimary: '#007aff', // Electric blue
|
|
colorSuccess: '#30d158', // Emerald green
|
|
colorInfo: '#007aff',
|
|
colorWarning: '#ff9500',
|
|
colorError: '#ff3b30',
|
|
|
|
// Background colors for dark theme
|
|
colorBgContainer: '#1a1a1a', // Deep charcoal
|
|
colorBgElevated: '#2a2a2a',
|
|
colorBgLayout: '#0f0f0f',
|
|
colorBgSpotlight: '#1a1a1a',
|
|
|
|
// Text colors
|
|
colorText: '#ffffff',
|
|
colorTextSecondary: '#a8a8a8',
|
|
colorTextTertiary: '#6d6d6d',
|
|
colorTextQuaternary: '#484848',
|
|
|
|
// Border colors
|
|
colorBorder: '#2a2a2a',
|
|
colorBorderSecondary: '#1a1a1a',
|
|
|
|
// Typography
|
|
fontFamily: '"SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
fontSize: 16,
|
|
fontSizeHeading1: 48,
|
|
fontSizeHeading2: 36,
|
|
fontSizeHeading3: 28,
|
|
fontSizeHeading4: 24,
|
|
fontSizeHeading5: 20,
|
|
fontSizeLG: 18,
|
|
fontSizeSM: 14,
|
|
fontSizeXL: 20,
|
|
|
|
// Spacing and sizing
|
|
borderRadius: 8,
|
|
borderRadiusLG: 12,
|
|
borderRadiusOuter: 6,
|
|
borderRadiusSM: 4,
|
|
borderRadiusXS: 2,
|
|
|
|
// Layout
|
|
padding: 16,
|
|
paddingLG: 24,
|
|
paddingSM: 12,
|
|
paddingXL: 32,
|
|
paddingXS: 8,
|
|
margin: 16,
|
|
marginLG: 24,
|
|
marginSM: 12,
|
|
marginXL: 32,
|
|
marginXS: 8,
|
|
|
|
// Component specific
|
|
controlHeight: 40,
|
|
controlHeightLG: 48,
|
|
controlHeightSM: 32,
|
|
|
|
// Motion
|
|
motionDurationFast: '0.1s',
|
|
motionDurationMid: '0.2s',
|
|
motionDurationSlow: '0.3s',
|
|
|
|
// Box shadow for depth
|
|
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
boxShadowSecondary: '0 2px 8px rgba(0, 0, 0, 0.12)',
|
|
|
|
// Wire frame (for development)
|
|
wireframe: false,
|
|
},
|
|
components: {
|
|
// Button customization
|
|
Button: {
|
|
borderRadius: 8,
|
|
controlHeight: 44,
|
|
fontWeight: 600,
|
|
primaryShadow: '0 2px 8px rgba(0, 122, 255, 0.3)',
|
|
},
|
|
|
|
// Typography
|
|
Typography: {
|
|
titleMarginBottom: '0.5em',
|
|
titleMarginTop: '1.2em',
|
|
},
|
|
|
|
// Layout
|
|
Layout: {
|
|
headerBg: '#0f0f0f',
|
|
bodyBg: '#1a1a1a',
|
|
footerBg: '#0f0f0f',
|
|
siderBg: '#1a1a1a',
|
|
},
|
|
|
|
// Menu
|
|
Menu: {
|
|
itemBg: 'transparent',
|
|
itemSelectedBg: 'rgba(0, 122, 255, 0.1)',
|
|
itemHoverBg: 'rgba(255, 255, 255, 0.05)',
|
|
itemActiveBg: 'rgba(0, 122, 255, 0.15)',
|
|
},
|
|
|
|
// Card
|
|
Card: {
|
|
borderRadius: 12,
|
|
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.25)',
|
|
},
|
|
|
|
// Input
|
|
Input: {
|
|
borderRadius: 8,
|
|
controlHeight: 44,
|
|
},
|
|
|
|
// Divider
|
|
Divider: {
|
|
colorSplit: '#2a2a2a',
|
|
},
|
|
|
|
// Spin (loading)
|
|
Spin: {
|
|
colorPrimary: '#007aff',
|
|
},
|
|
|
|
// Progress
|
|
Progress: {
|
|
defaultColor: '#007aff',
|
|
},
|
|
|
|
// Tooltip
|
|
Tooltip: {
|
|
borderRadius: 6,
|
|
colorBgSpotlight: '#2a2a2a',
|
|
},
|
|
|
|
// Modal
|
|
Modal: {
|
|
borderRadius: 12,
|
|
contentBg: '#1a1a1a',
|
|
headerBg: '#1a1a1a',
|
|
},
|
|
|
|
// Drawer
|
|
Drawer: {
|
|
colorBgElevated: '#1a1a1a',
|
|
},
|
|
|
|
// Table
|
|
Table: {
|
|
borderRadius: 8,
|
|
headerBg: '#2a2a2a',
|
|
headerSortActiveBg: '#3a3a3a',
|
|
rowHoverBg: 'rgba(255, 255, 255, 0.02)',
|
|
},
|
|
},
|
|
};
|
|
|
|
// Color palette for consistent usage across components
|
|
export const chorusColors = {
|
|
primary: '#007aff',
|
|
success: '#30d158',
|
|
warning: '#ff9500',
|
|
error: '#ff3b30',
|
|
info: '#007aff',
|
|
|
|
// Grays
|
|
gray50: '#f9fafb',
|
|
gray100: '#f3f4f6',
|
|
gray200: '#e5e7eb',
|
|
gray300: '#d1d5db',
|
|
gray400: '#9ca3af',
|
|
gray500: '#6b7280',
|
|
gray600: '#4b5563',
|
|
gray700: '#374151',
|
|
gray800: '#1f2937',
|
|
gray900: '#111827',
|
|
gray950: '#030712',
|
|
|
|
// Backgrounds
|
|
bgPrimary: '#1a1a1a',
|
|
bgSecondary: '#2a2a2a',
|
|
bgTertiary: '#0f0f0f',
|
|
|
|
// Text
|
|
textPrimary: '#ffffff',
|
|
textSecondary: '#a8a8a8',
|
|
textTertiary: '#6d6d6d',
|
|
} as const;
|
|
|
|
export type ChorusColor = keyof typeof chorusColors; |