@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
99 lines (82 loc) • 3.24 kB
CSS
/**
* Neon Theme Variant - Enhanced Token-Based Version
*
* Standalone theme variant that can be loaded independently.
* Uses [data-theme="neon"] scope for activation.
* CDN-compatible and opt-in via import or JS.
*
* Enhanced with vibrant neon colors and glow effects.
*
* @layer themes.variants
*/
@layer themes.variants {
[data-theme="neon"] {
/* Primary Colors - Vibrant neon cyan/pink theme */
--color-primary: #0ff;
--color-secondary: #f0f;
/* Status Colors - Neon-enhanced status colors */
--color-success: #0f0;
--color-warning: #ff0;
--color-error: #ff0040;
--color-info: #00bfff;
/* Text Colors - High contrast for neon theme */
--color-text: #fff;
--color-text-muted: #ccc;
--color-text-inverse: #000;
/* Surface Colors - Dark surfaces for neon glow */
--color-background: #0a0a0a;
--color-surface: #1a1a1a;
--color-surface-elevated: #2a2a2a;
/* Border Colors - Glowing neon borders */
--color-border: #0ff;
--color-border-strong: #f0f;
/* Transition Colors for smooth animations */
--color-transition-primary: #0ff;
--color-transition-surface: #0a0a0a;
--color-transition-text: #fff;
/* Neon-specific theme properties with enhanced glow */
--theme-neon-accent: #0ff;
--theme-neon-glow: rgb(0 255 255 / 8000%);
--theme-neon-gradient-start: var(--theme-gradient-start, #0ff);
--theme-neon-gradient-end: var(--theme-gradient-end, #f0f);
/* Enhanced focus and interaction states for neon theme */
--color-focus: #0ff;
--color-focus-glow: rgb(0 255 255 / 8000%);
/* Enhanced shadow properties for neon glow effects */
--shadow-color: var(--theme-shadow-color, rgb(0 255 255));
--shadow-opacity-sm: 0.6;
--shadow-opacity-md: 0.8;
--shadow-opacity-lg: 1.0;
--shadow-opacity-xl: 1.2;
/* Strong backdrop for neon theme */
--color-backdrop: rgb(0 0 0 / 9000%);
--backdrop-blur: var(--theme-backdrop-blur, 8px);
/* Neon-enhanced status background colors */
--color-success-bg: rgb(0 255 0 / 1000%);
--color-warning-bg: rgb(255 255 0 / 1000%);
--color-error-bg: rgb(255 0 64 / 1000%);
--color-info-bg: rgb(0 191 255 / 1000%);
/* Neon status border colors with glow */
--color-success-border: rgb(0 255 0 / 6000%);
--color-warning-border: rgb(255 255 0 / 6000%);
--color-error-border: rgb(255 0 64 / 6000%);
--color-info-border: rgb(0 191 255 / 6000%);
/* Enhanced interaction states for neon effects */
--hover-opacity: 0.9;
--hover-scale: var(--theme-hover-scale, 1.05);
--active-opacity: 1.0;
--active-scale: var(--theme-active-scale, 0.95);
--disabled-opacity: 0.3;
/* Faster transitions for responsive neon effects */
--transition-fast: 100ms;
--transition-normal: 200ms;
--transition-slow: 300ms;
--transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));
/* Neon-specific glow properties */
--neon-glow-blur: 10px;
--neon-glow-spread: 2px;
--neon-pulse-duration: 2s;
/* Surface overlay with neon tint */
--color-surface-overlay: rgb(26 26 26 / 95%);
}
}