28aa74b4b0
Some checks failed
Build pitch-deck / build-push-deploy (push) Failing after 1m13s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 49s
CI / test-python-voice (push) Successful in 38s
CI / test-bqas (push) Successful in 31s
# Conflicts: # pitch-deck/components/slides/MilestonesSlide.tsx # pitch-deck/lib/finanzplan/engine.ts
145 lines
5.4 KiB
TypeScript
145 lines
5.4 KiB
TypeScript
// MilestonesSlide themes — extracted from MilestonesSlide.tsx
|
|
// Contains: THEMES, Theme type, useIsLight hook, MONO style, CSS_KF keyframes
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export const MONO: React.CSSProperties = {
|
|
fontFamily: '"JetBrains Mono","SF Mono",ui-monospace,monospace',
|
|
fontVariantNumeric: 'tabular-nums',
|
|
}
|
|
|
|
export const CSS_KF = `
|
|
@keyframes msFlow { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-18} }
|
|
@keyframes msFadeIn { from{opacity:0} to{opacity:1} }
|
|
@keyframes msScaleIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
|
|
@keyframes msHeadingDark {
|
|
0%,100%{text-shadow:0 0 22px rgba(167,139,250,.3)}
|
|
50% {text-shadow:0 0 40px rgba(167,139,250,.6)}
|
|
}
|
|
@keyframes msHeadingLight {
|
|
0%,100%{text-shadow:0 0 22px rgba(124,58,237,.15)}
|
|
50% {text-shadow:0 0 36px rgba(124,58,237,.30)}
|
|
}
|
|
@keyframes msPulse {
|
|
0%,100%{r:9;opacity:.4}
|
|
50% {r:14;opacity:.05}
|
|
}
|
|
`
|
|
|
|
export function useIsLight() {
|
|
const [isLight, setIsLight] = useState(false)
|
|
useEffect(() => {
|
|
const check = () => setIsLight(document.documentElement.classList.contains('theme-light'))
|
|
check()
|
|
const obs = new MutationObserver(check)
|
|
obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
|
|
return () => obs.disconnect()
|
|
}, [])
|
|
return isLight
|
|
}
|
|
|
|
export const THEMES = {
|
|
dark: {
|
|
key: 'dark' as const,
|
|
bg: 'radial-gradient(ellipse at 50% 25%, #1a0f34 0%, #0e0720 55%, #050210 100%)',
|
|
ambient: 'radial-gradient(ellipse, rgba(167,139,250,.18), transparent 65%)',
|
|
stars: true,
|
|
fg: '#f7f5fc',
|
|
fgSoft: 'rgba(236,233,247,.82)',
|
|
fgMid: 'rgba(236,233,247,.72)',
|
|
fgMuted: 'rgba(236,233,247,.62)',
|
|
fgFaint: 'rgba(236,233,247,.55)',
|
|
fgGhost: 'rgba(236,233,247,.45)',
|
|
fgWhisper: 'rgba(236,233,247,.4)',
|
|
accent: '#a78bfa',
|
|
accent80: 'rgba(167,139,250,.8)',
|
|
accent70: 'rgba(167,139,250,.7)',
|
|
accent50: 'rgba(167,139,250,.5)',
|
|
accent40: 'rgba(167,139,250,.4)',
|
|
accent20: 'rgba(167,139,250,.2)',
|
|
headingGrad: 'linear-gradient(90deg, #e9e2ff, #a78bfa 50%, #e9e2ff)',
|
|
headingAnim: 'msHeadingDark 4s ease-in-out infinite',
|
|
heuteText: '#e4d4ff',
|
|
heutePillBg: 'rgba(14,8,28,.95)',
|
|
heuteCore: '#f0e9ff',
|
|
done: '#4ade80',
|
|
doneBright: '#86efac',
|
|
doneDeep: '#166534',
|
|
doneSolid: '#22c55e',
|
|
cardBase: 'rgba(14,8,28,',
|
|
cardBaseA: '.9',
|
|
cardBaseAH: '.95',
|
|
cardTintTop: '18', cardTintTopH: '2e',
|
|
cardTintMid: '08', cardTintMidH: '14',
|
|
cardShadowSoft: '0 10px 24px rgba(0,0,0,.45)',
|
|
cardShadowLift: (t: string) => `0 20px 44px ${t}33, 0 0 0 1px ${t}66, inset 0 1px 0 ${t}66`,
|
|
statTintTop: '18', statTintTopH: '2a',
|
|
statTintMid: '06',
|
|
statShadowSoft: '0 10px 24px rgba(0,0,0,.45)',
|
|
statShadowLift: (t: string) => `0 18px 40px ${t}33, 0 0 0 1px ${t}55, inset 0 1px 0 ${t}55`,
|
|
modalScrim: 'rgba(5,2,16,.75)',
|
|
modalBgMid: 'rgba(20,10,40,.97)',
|
|
modalBgLow: 'rgba(14,8,28,.98)',
|
|
modalShadow: (t: string) => `0 30px 80px rgba(0,0,0,.65), 0 0 60px ${t}33, inset 0 1px 0 ${t}55`,
|
|
bulletBg: 'rgba(0,0,0,.3)',
|
|
progressTrackBg: 'rgba(255,255,255,.08)',
|
|
progressTrackBorder: 'rgba(167,139,250,.2)',
|
|
dotTodoDeep: '#1a0f34',
|
|
dotLitHi: 'rgba(255,255,255,.5)',
|
|
dotSoftHi: 'rgba(255,255,255,.3)',
|
|
sparkOp: 0.45,
|
|
},
|
|
light: {
|
|
key: 'light' as const,
|
|
bg: 'radial-gradient(ellipse at 50% 12%, #ffffff 0%, #f5efff 55%, #ebdfff 100%)',
|
|
ambient: 'radial-gradient(ellipse, rgba(124,58,237,.14), transparent 65%)',
|
|
stars: false,
|
|
fg: '#1a0f34',
|
|
fgSoft: 'rgba(26,15,52,.85)',
|
|
fgMid: 'rgba(26,15,52,.72)',
|
|
fgMuted: 'rgba(26,15,52,.62)',
|
|
fgFaint: 'rgba(26,15,52,.50)',
|
|
fgGhost: 'rgba(26,15,52,.40)',
|
|
fgWhisper: 'rgba(26,15,52,.32)',
|
|
accent: '#7c3aed',
|
|
accent80: 'rgba(124,58,237,.8)',
|
|
accent70: 'rgba(124,58,237,.75)',
|
|
accent50: 'rgba(124,58,237,.55)',
|
|
accent40: 'rgba(124,58,237,.4)',
|
|
accent20: 'rgba(124,58,237,.18)',
|
|
headingGrad: 'linear-gradient(90deg, #3b0e7a, #7c3aed 50%, #3b0e7a)',
|
|
headingAnim: 'msHeadingLight 4s ease-in-out infinite',
|
|
heuteText: '#4c1d95',
|
|
heutePillBg: 'rgba(255,255,255,.98)',
|
|
heuteCore: '#7c3aed',
|
|
done: '#16a34a',
|
|
doneBright: '#4ade80',
|
|
doneDeep: '#14532d',
|
|
doneSolid: '#22c55e',
|
|
cardBase: 'rgba(255,255,255,',
|
|
cardBaseA: '.92',
|
|
cardBaseAH: '.98',
|
|
cardTintTop: '22', cardTintTopH: '3a',
|
|
cardTintMid: '10', cardTintMidH: '1c',
|
|
cardShadowSoft: '0 10px 24px rgba(59,26,122,.10), 0 2px 6px rgba(59,26,122,.06)',
|
|
cardShadowLift: (t: string) => `0 20px 44px ${t}38, 0 0 0 1px ${t}77, inset 0 1px 0 rgba(255,255,255,.9)`,
|
|
statTintTop: '1e', statTintTopH: '34',
|
|
statTintMid: '08',
|
|
statShadowSoft: '0 10px 24px rgba(59,26,122,.10), 0 2px 6px rgba(59,26,122,.06)',
|
|
statShadowLift: (t: string) => `0 18px 40px ${t}38, 0 0 0 1px ${t}77, inset 0 1px 0 rgba(255,255,255,.9)`,
|
|
modalScrim: 'rgba(40,20,80,.28)',
|
|
modalBgMid: 'rgba(255,255,255,.98)',
|
|
modalBgLow: 'rgba(250,247,255,.98)',
|
|
modalShadow: (t: string) => `0 30px 80px rgba(59,26,122,.25), 0 0 60px ${t}33, inset 0 1px 0 rgba(255,255,255,.9)`,
|
|
bulletBg: 'rgba(124,58,237,.06)',
|
|
progressTrackBg: 'rgba(124,58,237,.12)',
|
|
progressTrackBorder: 'rgba(124,58,237,.25)',
|
|
dotTodoDeep: '#faf5ff',
|
|
dotLitHi: 'rgba(255,255,255,.85)',
|
|
dotSoftHi: 'rgba(255,255,255,.55)',
|
|
sparkOp: 0.55,
|
|
},
|
|
}
|
|
|
|
export type Theme = typeof THEMES.dark | typeof THEMES.light
|