// Neon Design System - Dark + Light Theme
// Aesthetic: futuristic-minimal, deep base, neon accents, glass surfaces.
// Master dark/light switch: Theme.dark-mode (set from Rust).
// When dark-mode=false, all tokens read from ThemeLight.
import { ThemeLight } from "theme_light.slint";
export global Theme {
in-out property <bool> dark-mode: true;
// Surfaces
out property <color> bg-base: dark-mode ? #0a0e17 : ThemeLight.bg-base;
out property <color> bg-elevated: dark-mode ? #111827 : ThemeLight.bg-elevated;
out property <color> bg-surface: dark-mode ? #1a2235 : ThemeLight.bg-surface;
out property <color> bg-hover: dark-mode ? #243044 : ThemeLight.bg-hover;
out property <color> bg-selected: dark-mode ? #1e2d4a : ThemeLight.bg-selected;
out property <color> bg-row-alt: dark-mode ? #0f1625 : ThemeLight.bg-row-alt;
out property <color> bg-overlay: dark-mode ? #0a0e17e6 : ThemeLight.bg-overlay;
out property <color> bg-glass: dark-mode ? #11182788 : ThemeLight.bg-glass;
out property <color> bg-tooltip: dark-mode ? #1a2235 : ThemeLight.bg-tooltip;
// Borders
out property <color> border: dark-mode ? #2a344a : ThemeLight.border;
out property <color> border-bright: dark-mode ? #3a4660 : ThemeLight.border-bright;
out property <color> border-focus: dark-mode ? #00f0ff : ThemeLight.border-focus;
out property <color> border-glass: dark-mode ? #ffffff15 : ThemeLight.border-glass;
// Text
out property <color> text-primary: dark-mode ? #e2e8f0 : ThemeLight.text-primary;
out property <color> text-muted: dark-mode ? #94a3b8 : ThemeLight.text-muted;
out property <color> text-dim: dark-mode ? #64748b : ThemeLight.text-dim;
out property <color> text-inverse: dark-mode ? #0a0e17 : ThemeLight.text-inverse;
// Neon accents
out property <color> neon-cyan: dark-mode ? #00f0ff : ThemeLight.neon-cyan;
out property <color> neon-magenta: dark-mode ? #ff2d95 : ThemeLight.neon-magenta;
out property <color> neon-green: dark-mode ? #00ff88 : ThemeLight.neon-green;
out property <color> neon-purple: dark-mode ? #8b5cf6 : ThemeLight.neon-purple;
out property <color> neon-amber: dark-mode ? #ffb020 : ThemeLight.neon-amber;
out property <color> neon-red: dark-mode ? #ff4455 : ThemeLight.neon-red;
// Glow
out property <color> glow-cyan: dark-mode ? #00f0ff44 : ThemeLight.glow-cyan;
out property <color> glow-magenta: dark-mode ? #ff2d9544 : ThemeLight.glow-magenta;
out property <color> glow-green: dark-mode ? #00ff8844 : ThemeLight.glow-green;
out property <color> glow-purple: dark-mode ? #8b5cf644 : ThemeLight.glow-purple;
// Semantic aliases
out property <color> accent-primary: neon-cyan;
out property <color> accent-danger: neon-red;
out property <color> accent-success: neon-green;
out property <color> accent-warning: neon-amber;
out property <color> accent-info: neon-purple;
out property <color> text-link: neon-cyan;
out property <color> bg-danger-hover: dark-mode ? #2d1117 : ThemeLight.bg-danger-hover;
// Hover variants for filled buttons
out property <color> bg-primary-hover: dark-mode ? #00ccdd : #005588;
// Typography
out property <length> font-xs: 11px;
out property <length> font-sm: 12px;
out property <length> font-base: 13px;
out property <length> font-lg: 15px;
out property <length> font-xl: 18px;
out property <length> font-2xl: 22px;
out property <length> font-3xl: 28px;
// Font families
out property <string> font-sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
out property <string> font-mono: "'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace";
// Elevation (simulated via border)
out property <length> elevation-flat: 0px;
out property <length> elevation-low: 1px;
out property <length> elevation-md: 2px;
out property <length> elevation-high: 3px;
// Spacing
out property <length> sp-1: 4px;
out property <length> sp-2: 8px;
out property <length> sp-3: 12px;
out property <length> sp-4: 16px;
out property <length> sp-5: 20px;
out property <length> sp-6: 24px;
out property <length> sp-8: 32px;
out property <length> sp-10: 40px;
out property <length> sp-12: 48px;
// Radius
out property <length> radius-sm: 4px;
out property <length> radius-md: 6px;
out property <length> radius-lg: 8px;
out property <length> radius-xl: 12px;
out property <length> radius-full: 100px;
// Shadows
out property <length> shadow-blur-sm: 4px;
out property <length> shadow-blur-md: 10px;
out property <length> shadow-blur-lg: 20px;
out property <length> shadow-offset-y: 2px;
// Animation durations
out property <duration> duration-fastest: 50ms;
out property <duration> duration-faster: 100ms;
out property <duration> duration-fast: 150ms;
out property <duration> duration-normal: 200ms;
out property <duration> duration-slow: 300ms;
out property <duration> duration-slower: 400ms;
out property <duration> duration-slowest: 500ms;
// Transition durations
out property <duration> transition-fast: 150ms;
out property <duration> transition-base: 200ms;
out property <duration> transition-slow: 300ms;
}
// Animation Presets
export global AnimationPresets {
out property <duration> fade-in: 200ms;
out property <duration> slide-up: 300ms;
out property <duration> slide-down: 300ms;
out property <duration> scale-in: 250ms;
out property <duration> fade-out: 150ms;
out property <duration> slide-out: 200ms;
out property <duration> panel-slide: 150ms;
out property <duration> hover-glow: 150ms;
out property <duration> tab-switch: 100ms;
}