stlyes fixes
This commit is contained in:
@@ -69,82 +69,82 @@ export interface LinkStyles {
|
||||
export const DEFAULT_COMPONENT_STYLES: ComponentStyles = {
|
||||
button: {
|
||||
primary: {
|
||||
background: '#3b82f6',
|
||||
color: '#ffffff',
|
||||
background: 'var(--color-primary, #2C7AA1)',
|
||||
color: 'var(--color-white, #ffffff)',
|
||||
hover: {
|
||||
background: '#2563eb',
|
||||
color: '#ffffff',
|
||||
background: 'var(--color-brand-700, #236185)',
|
||||
color: 'var(--color-white, #ffffff)',
|
||||
},
|
||||
active: {
|
||||
background: '#1d4ed8',
|
||||
color: '#ffffff',
|
||||
background: 'var(--color-brand-800, #1a4963)',
|
||||
color: 'var(--color-white, #ffffff)',
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
background: '#6b7280',
|
||||
color: '#ffffff',
|
||||
background: 'var(--color-gray-500, #6b7280)',
|
||||
color: 'var(--color-white, #ffffff)',
|
||||
hover: {
|
||||
background: '#4b5563',
|
||||
color: '#ffffff',
|
||||
background: 'var(--color-gray-600, #4b5563)',
|
||||
color: 'var(--color-white, #ffffff)',
|
||||
},
|
||||
active: {
|
||||
background: '#374151',
|
||||
color: '#ffffff',
|
||||
background: 'var(--color-gray-700, #374151)',
|
||||
color: 'var(--color-white, #ffffff)',
|
||||
},
|
||||
},
|
||||
outline: {
|
||||
background: 'transparent',
|
||||
color: '#3b82f6',
|
||||
border: '#3b82f6',
|
||||
color: 'var(--color-primary, #2C7AA1)',
|
||||
border: 'var(--color-primary, #2C7AA1)',
|
||||
hover: {
|
||||
background: '#3b82f6',
|
||||
color: '#ffffff',
|
||||
border: '#3b82f6',
|
||||
background: 'var(--color-primary, #2C7AA1)',
|
||||
color: 'var(--color-white, #ffffff)',
|
||||
border: 'var(--color-primary, #2C7AA1)',
|
||||
},
|
||||
active: {
|
||||
background: '#2563eb',
|
||||
color: '#ffffff',
|
||||
background: 'var(--color-brand-700, #236185)',
|
||||
color: 'var(--color-white, #ffffff)',
|
||||
},
|
||||
},
|
||||
ghost: {
|
||||
background: 'transparent',
|
||||
color: '#6b7280',
|
||||
color: 'var(--color-gray-500, #6b7280)',
|
||||
hover: {
|
||||
background: '#f3f4f6',
|
||||
color: '#1f2937',
|
||||
background: 'var(--color-gray-100, #f3f4f6)',
|
||||
color: 'var(--color-gray-800, #1f2937)',
|
||||
},
|
||||
active: {
|
||||
background: '#e5e7eb',
|
||||
color: '#111827',
|
||||
background: 'var(--color-gray-200, #e5e7eb)',
|
||||
color: 'var(--color-gray-900, #111827)',
|
||||
},
|
||||
},
|
||||
},
|
||||
card: {
|
||||
background: '#ffffff',
|
||||
border: '#e5e7eb',
|
||||
background: 'var(--color-white, #ffffff)',
|
||||
border: 'var(--color-gray-200, #e5e7eb)',
|
||||
borderRadius: '0.5rem',
|
||||
padding: '1.5rem',
|
||||
shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
input: {
|
||||
background: '#ffffff',
|
||||
border: '#d1d5db',
|
||||
background: 'var(--color-white, #ffffff)',
|
||||
border: 'var(--color-gray-300, #d1d5db)',
|
||||
borderRadius: '0.375rem',
|
||||
padding: '0.5rem 0.75rem',
|
||||
focus: {
|
||||
border: '#3b82f6',
|
||||
ring: '0 0 0 3px rgba(59, 130, 246, 0.1)',
|
||||
border: 'var(--color-primary, #2C7AA1)',
|
||||
ring: '0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)',
|
||||
},
|
||||
},
|
||||
heading: {
|
||||
fontFamily: 'Inter, system-ui, sans-serif',
|
||||
fontWeight: '700',
|
||||
lineHeight: '1.2',
|
||||
color: '#111827',
|
||||
color: 'var(--color-gray-900, #111827)',
|
||||
},
|
||||
link: {
|
||||
color: '#3b82f6',
|
||||
hoverColor: '#2563eb',
|
||||
color: 'var(--color-primary, #2C7AA1)',
|
||||
hoverColor: 'var(--color-brand-700, #236185)',
|
||||
underline: false,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -34,12 +34,12 @@ export const STYLE_PRESETS: StylePreset[] = [
|
||||
name: 'Modern',
|
||||
description: 'Clean, contemporary design with vibrant colors',
|
||||
colors: {
|
||||
primary: '#3b82f6',
|
||||
secondary: '#8b5cf6',
|
||||
accent: '#10b981',
|
||||
background: '#ffffff',
|
||||
text: '#1f2937',
|
||||
border: '#e5e7eb',
|
||||
primary: 'var(--color-primary, #2C7AA1)',
|
||||
secondary: 'var(--color-purple, #2C40A1)',
|
||||
accent: 'var(--color-success, #2CA18E)',
|
||||
background: 'var(--color-white, #ffffff)',
|
||||
text: 'var(--color-gray-800, #1f2937)',
|
||||
border: 'var(--color-gray-200, #e5e7eb)',
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'Inter, system-ui, sans-serif',
|
||||
@@ -57,12 +57,12 @@ export const STYLE_PRESETS: StylePreset[] = [
|
||||
name: 'Classic',
|
||||
description: 'Traditional, professional design',
|
||||
colors: {
|
||||
primary: '#1e40af',
|
||||
secondary: '#6b7280',
|
||||
accent: '#059669',
|
||||
background: '#f9fafb',
|
||||
text: '#111827',
|
||||
border: '#d1d5db',
|
||||
primary: 'var(--color-brand-700, #236185)',
|
||||
secondary: 'var(--color-gray-500, #6b7280)',
|
||||
accent: 'var(--color-success-600, #228a7a)',
|
||||
background: 'var(--color-gray-50, #f9fafb)',
|
||||
text: 'var(--color-gray-900, #111827)',
|
||||
border: 'var(--color-gray-300, #d1d5db)',
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'Georgia, serif',
|
||||
@@ -80,12 +80,12 @@ export const STYLE_PRESETS: StylePreset[] = [
|
||||
name: 'Minimal',
|
||||
description: 'Minimalist design with ample whitespace',
|
||||
colors: {
|
||||
primary: '#000000',
|
||||
secondary: '#4b5563',
|
||||
accent: '#6b7280',
|
||||
background: '#ffffff',
|
||||
text: '#111827',
|
||||
border: '#f3f4f6',
|
||||
primary: 'var(--color-gray-900, #000000)',
|
||||
secondary: 'var(--color-gray-600, #4b5563)',
|
||||
accent: 'var(--color-gray-500, #6b7280)',
|
||||
background: 'var(--color-white, #ffffff)',
|
||||
text: 'var(--color-gray-900, #111827)',
|
||||
border: 'var(--color-gray-100, #f3f4f6)',
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
@@ -103,12 +103,12 @@ export const STYLE_PRESETS: StylePreset[] = [
|
||||
name: 'Bold',
|
||||
description: 'High contrast, bold design',
|
||||
colors: {
|
||||
primary: '#dc2626',
|
||||
secondary: '#ea580c',
|
||||
accent: '#f59e0b',
|
||||
background: '#ffffff',
|
||||
text: '#000000',
|
||||
border: '#000000',
|
||||
primary: 'var(--color-danger, #A12C40)',
|
||||
secondary: 'var(--color-warning-600, #c28a26)',
|
||||
accent: 'var(--color-warning, #D9A12C)',
|
||||
background: 'var(--color-white, #ffffff)',
|
||||
text: 'var(--color-gray-900, #000000)',
|
||||
border: 'var(--color-gray-900, #000000)',
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'Arial Black, sans-serif',
|
||||
@@ -126,12 +126,12 @@ export const STYLE_PRESETS: StylePreset[] = [
|
||||
name: 'Elegant',
|
||||
description: 'Sophisticated, refined design',
|
||||
colors: {
|
||||
primary: '#7c3aed',
|
||||
secondary: '#a855f7',
|
||||
accent: '#ec4899',
|
||||
background: '#faf5ff',
|
||||
text: '#1e1b4b',
|
||||
border: '#e9d5ff',
|
||||
primary: 'var(--color-purple, #2C40A1)',
|
||||
secondary: 'var(--color-purple-400, #5f73d1)',
|
||||
accent: 'var(--color-purple-300, #8895e0)',
|
||||
background: 'var(--color-purple-50, #f0f2fc)',
|
||||
text: 'var(--color-purple-900, #1a2660)',
|
||||
border: 'var(--color-purple-200, #b1baeb)',
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'Playfair Display, serif',
|
||||
@@ -149,12 +149,12 @@ export const STYLE_PRESETS: StylePreset[] = [
|
||||
name: 'Tech',
|
||||
description: 'Modern tech startup aesthetic',
|
||||
colors: {
|
||||
primary: '#06b6d4',
|
||||
secondary: '#3b82f6',
|
||||
accent: '#8b5cf6',
|
||||
background: '#0f172a',
|
||||
text: '#f1f5f9',
|
||||
border: '#1e293b',
|
||||
primary: 'var(--color-brand-400, #4899bd)',
|
||||
secondary: 'var(--color-primary, #2C7AA1)',
|
||||
accent: 'var(--color-purple, #2C40A1)',
|
||||
background: 'var(--color-gray-900, #0f172a)',
|
||||
text: 'var(--color-gray-100, #f1f5f9)',
|
||||
border: 'var(--color-gray-800, #1e293b)',
|
||||
},
|
||||
typography: {
|
||||
fontFamily: 'SF Pro Display, system-ui, sans-serif',
|
||||
|
||||
@@ -67,11 +67,11 @@
|
||||
DARK MODE OVERRIDES
|
||||
=================================================================== */
|
||||
.dark {
|
||||
--color-surface: #1f2937;
|
||||
--color-panel: #1f2937;
|
||||
--color-panel-alt: #111827;
|
||||
--color-text: #e5eaf0;
|
||||
--color-text-dim: #9ca3af;
|
||||
--color-stroke: #374151;
|
||||
--color-surface: #1A2B3C; /* Charcoal navy (matches --color-navy) */
|
||||
--color-panel: #243A4D; /* Slightly lighter navy for cards */
|
||||
--color-panel-alt: #142230; /* Deeper navy for nested panels */
|
||||
--color-text: #E8F0F4; /* Cool off-white (matches --color-text-light) */
|
||||
--color-text-dim: #8A9BAC; /* Muted blue-gray for secondary text */
|
||||
--color-stroke: #2E4A5E; /* Blue-tinted border color */
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user