112 lines
2.5 KiB
TypeScript
112 lines
2.5 KiB
TypeScript
import { ThemeConfig } from 'antd-style';
|
|
|
|
// ChatGPT UI Kit Colors from Figma
|
|
export const chatGPTTheme: ThemeConfig = {
|
|
token: {
|
|
// Background colors - From Figma
|
|
colorBgBase: '#0a0a0a',
|
|
colorBgContainer: '#171717',
|
|
colorBgElevated: '#202020',
|
|
colorBgLayout: '#0a0a0a',
|
|
|
|
// Text colors
|
|
colorTextBase: '#ececf1',
|
|
colorText: '#ececf1',
|
|
colorTextSecondary: '#c5c5d2',
|
|
colorTextTertiary: '#8e8ea0',
|
|
colorTextQuaternary: '#565869',
|
|
|
|
// Border colors
|
|
colorBorder: 'rgba(255, 255, 255, 0.06)',
|
|
colorBorderSecondary: 'rgba(255, 255, 255, 0.04)',
|
|
|
|
// Primary color - Purple from Lobe UI
|
|
colorPrimary: '#667eea',
|
|
colorPrimaryHover: '#7d8ff5',
|
|
colorPrimaryActive: '#5568d3',
|
|
|
|
// Success/Info/Warning/Error
|
|
colorSuccess: '#10a37f',
|
|
colorInfo: '#4facfe',
|
|
colorWarning: '#ffd93d',
|
|
colorError: '#ff6b9d',
|
|
|
|
// Border radius
|
|
borderRadius: 8,
|
|
borderRadiusLG: 12,
|
|
borderRadiusSM: 6,
|
|
borderRadiusXS: 4,
|
|
|
|
// Shadows
|
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
|
boxShadowSecondary: '0 4px 16px rgba(0, 0, 0, 0.4)',
|
|
|
|
// Font
|
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
fontSize: 14,
|
|
fontSizeHeading1: 32,
|
|
fontSizeHeading2: 24,
|
|
fontSizeHeading3: 20,
|
|
},
|
|
};
|
|
|
|
// Custom Lobe UI color tokens
|
|
export const lobeUIColors = {
|
|
// Glassmorphism
|
|
glass: {
|
|
background: 'rgba(17, 17, 17, 0.7)',
|
|
border: 'rgba(255, 255, 255, 0.08)',
|
|
blur: '20px',
|
|
},
|
|
|
|
// Gradients
|
|
gradient: {
|
|
primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
secondary: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
|
accent: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
|
success: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
|
},
|
|
|
|
// Message colors (ChatGPT style)
|
|
message: {
|
|
user: {
|
|
background: 'rgba(102, 126, 234, 0.1)',
|
|
border: '#667eea',
|
|
},
|
|
assistant: {
|
|
background: 'rgba(255, 255, 255, 0.03)',
|
|
border: 'transparent',
|
|
},
|
|
},
|
|
|
|
// Avatar colors
|
|
avatar: {
|
|
user: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
assistant: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
|
},
|
|
};
|
|
|
|
// Spacing system - Following Figma specs
|
|
export const spacing = {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 20,
|
|
xxl: 24,
|
|
xxxl: 32,
|
|
xxxxl: 48,
|
|
};
|
|
|
|
// Z-index layers
|
|
export const zIndex = {
|
|
base: 0,
|
|
content: 1,
|
|
sidebar: 10,
|
|
header: 100,
|
|
overlay: 999,
|
|
modal: 1000,
|
|
tooltip: 1100,
|
|
};
|
|
|