@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.
49 lines (43 loc) • 1.33 kB
CSS
/**
* Light Mode Theme
*
* Light mode definitions with [data-theme="light"] scope.
* Only overrides base tokens, aliases remain stable.
*
* @layer themes.mode
*/
@layer themes.mode {
[data-theme="light"] {
/* Color Scheme */
color-scheme: light;
/* Base Color Tokens - Only override what's needed for light mode */
--color-background: #fff;
--color-surface: #f9fafb;
--color-surface-elevated: #fff;
--color-text: #1f2937;
--color-text-muted: #6b7280;
--color-text-inverse: #fff;
--color-border: #e5e7eb;
--color-border-strong: #d1d5db;
/* Primary Colors - Light Mode Values */
--color-primary: #06f;
--color-primary-50: #e6f0ff;
--color-primary-100: #cce0ff;
--color-primary-500: #06f;
--color-primary-600: #0052cc;
--color-primary-900: #001433;
/* Secondary Colors - Light Mode Values */
--color-secondary: #5333ff;
--color-secondary-50: #eeeaff;
--color-secondary-500: #5333ff;
--color-secondary-900: #110a33;
/* Gray Colors - Light Mode Values */
--color-gray-50: #f9f9fa;
--color-gray-100: #f3f3f5;
--color-gray-500: #8f96a8;
--color-gray-900: #1d1f24;
/* Focus and Interactive States */
--color-focus: #4f46e5;
--color-focus-glow: rgb(79 70 229 / 3000%);
}
}