UI Stabilization: Global color theme updates (#75B2D6), AI Assistant styling refactor, and navigation fixes
This commit is contained in:
@@ -50,6 +50,8 @@ const PALETTES: Record<string, Palette> = {
|
||||
coastal_coral: { primary: '#0081a7', secondary: '#00afb9', accent: '#f07167', light: '#fed9b7', bg: '#fdfcdc', isDark: false },
|
||||
vibrant_orange_mint: { primary: '#1a1a2e', secondary: '#2ec4b6', accent: '#ff9f1c', light: '#cbf3f0', bg: '#ffffff', isDark: false },
|
||||
platinum_white_gold: { primary: '#0a0a0a', secondary: '#0070F3', accent: '#D4AF37', light: '#f5f5f5', bg: '#ffffff', isDark: false },
|
||||
architectural_mono: { primary: '#1C1C1C', secondary: '#D4A373', accent: '#ACB995', light: '#F9F8F6', bg: '#F9F8F6', isDark: false },
|
||||
minimal_silk: { primary: '#212529', secondary: '#6c757d', accent: '#dee2e6', light: '#f8f9fa', bg: '#ffffff', isDark: false },
|
||||
}
|
||||
|
||||
const PALETTE_ALIASES: Record<string, string> = {
|
||||
@@ -58,6 +60,7 @@ const PALETTE_ALIASES: Record<string, string> = {
|
||||
ocean: 'pure_tech_blue', charcoal: 'platinum_white_gold', teal: 'education_charts',
|
||||
berry: 'art_food', cherry: 'vintage_academic', clair: 'pure_tech_blue', light: 'modern_wellness',
|
||||
warm: 'bohemian', premium: 'platinum_white_gold', clean: 'vibrant_tech',
|
||||
architectural: 'architectural_mono', silk: 'minimal_silk',
|
||||
}
|
||||
|
||||
const THEME_NAMES: Record<string, string> = {
|
||||
@@ -70,6 +73,7 @@ const THEME_NAMES: Record<string, string> = {
|
||||
art_food: 'Art & Food', luxury_mystery: 'Luxury & Mystery',
|
||||
pure_tech_blue: 'Pure Tech Blue', coastal_coral: 'Coastal Coral',
|
||||
vibrant_orange_mint: 'Vibrant Orange Mint', platinum_white_gold: 'Platinum White Gold',
|
||||
architectural_mono: 'Architectural Mono', minimal_silk: 'Minimal Silk',
|
||||
}
|
||||
|
||||
function resolvePalette(spec: PresentationSpec): { palette: Palette; key: string } {
|
||||
@@ -100,7 +104,7 @@ function safeHtml(str: string): string {
|
||||
.replace(/javascript\s*:/gi, '')
|
||||
}
|
||||
|
||||
function buildThemeCSS(p: Palette, radius: string): string {
|
||||
function buildThemeCSS(p: Palette, radius: string, key: string): string {
|
||||
const text = p.isDark ? '#f0f0f0' : '#1a1a1a'
|
||||
const muted = p.isDark ? '#999' : '#555'
|
||||
const heading = p.isDark ? '#ffffff' : p.primary
|
||||
@@ -145,12 +149,40 @@ function buildThemeCSS(p: Palette, radius: string): string {
|
||||
--r-link-color-hover: ${p.secondary};
|
||||
--r-selection-background-color: ${p.accent};
|
||||
--r-selection-color: ${bgText};
|
||||
}`
|
||||
}
|
||||
|
||||
${key === 'architectural_mono' ? `
|
||||
.reveal-viewport {
|
||||
background-color: #F9F8F6 !important;
|
||||
background-image:
|
||||
linear-gradient(rgba(28, 28, 28, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(28, 28, 28, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(rgba(28, 28, 28, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(28, 28, 28, 0.04) 1px, transparent 1px) !important;
|
||||
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px !important;
|
||||
}
|
||||
.reveal {
|
||||
font-family: 'JetBrains Mono', monospace !important;
|
||||
}
|
||||
.reveal h1, .reveal h2, .reveal h3 {
|
||||
font-family: 'JetBrains Mono', monospace !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
.reveal h1 { border-left: 12px solid #D4A373; padding-left: 40px; }
|
||||
.reveal section { text-align: left; padding: 60px; }
|
||||
.reveal p, .reveal li { font-weight: 300; font-family: 'JetBrains Mono', monospace !important; }
|
||||
` : ''}`
|
||||
}
|
||||
|
||||
function buildLayoutCSS(): string {
|
||||
return `
|
||||
.reveal-viewport { background: var(--p-bg); }
|
||||
.reveal-viewport {
|
||||
background: var(--p-bg);
|
||||
background-image: linear-gradient(var(--p-border) 1px, transparent 1px), linear-gradient(90deg, var(--p-border) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: var(--r-main-font);
|
||||
@@ -296,10 +328,14 @@ function buildLayoutCSS(): string {
|
||||
}
|
||||
.reveal .s-cards .card:nth-child(odd) {
|
||||
background: var(--p-primary); border-color: transparent;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
.reveal .s-cards .card:nth-child(odd) .card-num { color: rgba(255,255,255,0.25); }
|
||||
.reveal .s-cards .card:nth-child(odd) .card-text { color: #ffffff; }
|
||||
.reveal .s-cards .card:nth-child(even) .card-num { color: var(--p-accent); opacity: 0.5; }
|
||||
.reveal .s-cards .card:nth-child(odd) .card-num { color: rgba(255,255,255,0.4); }
|
||||
.reveal .s-cards .card:nth-child(odd) .card-text { color: #ffffff; font-weight: 300; }
|
||||
.reveal .s-cards .card:nth-child(even) {
|
||||
background: #ffffff; border: 1px solid var(--p-border-accent);
|
||||
}
|
||||
.reveal .s-cards .card:nth-child(even) .card-num { color: var(--p-accent); opacity: 0.6; }
|
||||
.reveal .s-cards .card:nth-child(even) .card-text { color: var(--p-text); }
|
||||
.reveal .s-cards .card-num {
|
||||
font-size: 18pt; font-weight: 800; line-height: 1;
|
||||
@@ -557,7 +593,7 @@ function buildRevealHtml(spec: PresentationSpec): string {
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
${buildThemeCSS(palette, radius)}
|
||||
${buildThemeCSS(palette, radius, key)}
|
||||
|
||||
${buildLayoutCSS()}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user