|
|
@@ -1,147 +1,162 @@
|
|
|
-// Quasar SCSS Variables with Material Design Color System
|
|
|
+// Quasar SCSS Variables with Custom Color System
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Primary Theme Colors
|
|
|
-$primary: #1976d2; // Material Blue 700
|
|
|
-$secondary: #9c27b0; // Material Purple 500
|
|
|
-$accent: #e91e63; // Material Pink 500
|
|
|
+$primary: #8B5CF6; // Vibrant Purple (main brand color)
|
|
|
+$secondary: #EC4899; // Pink/Magenta (secondary brand color)
|
|
|
+$accent: #F59E0B; // Amber/Orange (accent highlights)
|
|
|
|
|
|
// Dark Theme Base Colors
|
|
|
$dark: #1d1d1d;
|
|
|
|
|
|
// Status Colors
|
|
|
-$positive: #2e7d32; // Material Green 800
|
|
|
-$negative: #d32f2f; // Material Red 700
|
|
|
-$info: #0288d1; // Material Light Blue 700
|
|
|
-$warning: #ed6c02; // Material Orange 800
|
|
|
+$positive: #10B981; // Emerald Green (success, online status)
|
|
|
+$negative: #EF4444; // Red (errors, alerts)
|
|
|
+$info: #3B82F6; // Blue (informational)
|
|
|
+$warning: #F59E0B; // Amber (warnings)
|
|
|
|
|
|
// Extended Color System with Light/Dark Variants
|
|
|
$colors: (
|
|
|
- // Primary Colors and Variants
|
|
|
- "primary": #1976d2,
|
|
|
- // Base - Blue 700
|
|
|
- "primary-light": #42a5f5,
|
|
|
- // Light - Blue 400
|
|
|
- "primary-dark": #1565c0,
|
|
|
-
|
|
|
- // Dark - Blue 800
|
|
|
- // Secondary Colors and Variants
|
|
|
- "secondary": #9c27b0,
|
|
|
- // Base - Purple 500
|
|
|
- "secondary-light": #ba68c8,
|
|
|
- // Light - Purple 300
|
|
|
- "secondary-dark": #7b1fa2,
|
|
|
-
|
|
|
- // Terceary Colors and Variants
|
|
|
- "terciary": #ff9800,
|
|
|
- // Base - Orange 500
|
|
|
- "terciary-light": #ffb74d,
|
|
|
- // Light - Orange 300
|
|
|
- "terciary-dark": #f57c00,
|
|
|
-
|
|
|
- // Dark - Purple 700
|
|
|
+ // Primary Colors and Variants (Purple Theme)
|
|
|
+ "primary": #8B5CF6,
|
|
|
+ // Base - Vibrant Purple
|
|
|
+ "primary-light": #A78BFA,
|
|
|
+ // Light Purple
|
|
|
+ "primary-dark": #7C3AED,
|
|
|
+ // Dark Purple
|
|
|
+
|
|
|
+ // Secondary Colors and Variants (Pink/Magenta Theme)
|
|
|
+ "secondary": #EC4899,
|
|
|
+ // Base - Pink
|
|
|
+ "secondary-light": #F9A8D4,
|
|
|
+ // Light Pink
|
|
|
+ "secondary-dark": #DB2777,
|
|
|
+ // Dark Pink
|
|
|
+
|
|
|
+ // Tertiary Colors and Variants (Amber/Orange Accent)
|
|
|
+ "terciary": #F59E0B,
|
|
|
+ // Base - Amber
|
|
|
+ "terciary-light": #FCD34D,
|
|
|
+ // Light Amber
|
|
|
+ "terciary-dark": #D97706,
|
|
|
+ // Dark Amber
|
|
|
+
|
|
|
// Background Colors
|
|
|
- "page": #f1f1f1,
|
|
|
+ "page": #F9FAFB,
|
|
|
+ // Very Light Gray (App Background)
|
|
|
|
|
|
- // Surface Colors
|
|
|
- "surface": #ffffff,
|
|
|
- "surface-light": #f5f5f5,
|
|
|
- "surface-dark": #f1f1f1,
|
|
|
+ // Surface Colors (Cards, Panels)
|
|
|
+ "surface": #FFFFFF,
|
|
|
+ // Pure White
|
|
|
+ "surface-light": #F9FAFB,
|
|
|
+ // Very Light Gray
|
|
|
+ "surface-dark": #F3F4F6,
|
|
|
+ // Light Gray
|
|
|
|
|
|
- //text color
|
|
|
- "text": #000000,
|
|
|
+ // Text Colors
|
|
|
+ "text": #111827,
|
|
|
+ // Very Dark Gray (almost black)
|
|
|
|
|
|
// Status Colors with Variants
|
|
|
- "success": #2e7d32,
|
|
|
- // Green 800
|
|
|
- "success-light": #4caf50,
|
|
|
- // Green 500
|
|
|
- "success-dark": #1b5e20,
|
|
|
-
|
|
|
- // Green 900
|
|
|
- "error": #d32f2f,
|
|
|
- // Red 700
|
|
|
- "error-light": #ef5350,
|
|
|
- // Red 400
|
|
|
- "error-dark": #c62828,
|
|
|
-
|
|
|
- // Red 800
|
|
|
- "warning": #ed6c02,
|
|
|
- // Orange 800
|
|
|
- "warning-light": #ff9800,
|
|
|
- // Orange 500
|
|
|
- "warning-dark": #e65100,
|
|
|
-
|
|
|
- // Orange 900
|
|
|
- "info": #0288d1,
|
|
|
- // Light Blue 700
|
|
|
- "info-light": #03a9f4,
|
|
|
- // Light Blue 500
|
|
|
- "info-dark": #01579b
|
|
|
+ "success": #10B981,
|
|
|
+ // Emerald Green
|
|
|
+ "success-light": #34D399,
|
|
|
+ // Light Green
|
|
|
+ "success-dark": #059669,
|
|
|
+ // Dark Green
|
|
|
+
|
|
|
+ "error": #EF4444,
|
|
|
+ // Red
|
|
|
+ "error-light": #F87171,
|
|
|
+ // Light Red
|
|
|
+ "error-dark": #DC2626,
|
|
|
+ // Dark Red
|
|
|
+
|
|
|
+ "warning": #F59E0B,
|
|
|
+ // Amber
|
|
|
+ "warning-light": #FCD34D,
|
|
|
+ // Light Amber
|
|
|
+ "warning-dark": #D97706,
|
|
|
+ // Dark Amber
|
|
|
+
|
|
|
+ "info": #3B82F6,
|
|
|
+ // Blue
|
|
|
+ "info-light": #60A5FA,
|
|
|
+ // Light Blue
|
|
|
+ "info-dark": #2563EB
|
|
|
+ // Dark Blue
|
|
|
);
|
|
|
|
|
|
// Dark Theme Color Overrides
|
|
|
$colors-dark: (
|
|
|
- // Primary Colors and Variants
|
|
|
- "primary": #1976d2,
|
|
|
- // Base - Blue 700
|
|
|
- "primary-light": #42a5f5,
|
|
|
- // Blue 50
|
|
|
- "primary-dark": #1565c0,
|
|
|
+ // Primary Colors and Variants (Purple - adjusted for dark mode)
|
|
|
+ "primary": #8B5CF6,
|
|
|
+ // Vibrant Purple (same as light)
|
|
|
+ "primary-light": #A78BFA,
|
|
|
+ // Light Purple
|
|
|
+ "primary-dark": #6D28D9,
|
|
|
+ // Darker Purple for dark mode
|
|
|
|
|
|
"dark": #1d1d1d,
|
|
|
|
|
|
- // Blue 400
|
|
|
- // Secondary Colors - Lighter in Dark Mode
|
|
|
- "secondary": #ce93d8,
|
|
|
- // Purple 200
|
|
|
- "secondary-light": #f3e5f5,
|
|
|
- // Purple 50
|
|
|
- "secondary-dark": #ab47bc,
|
|
|
-
|
|
|
- //Terceary Colors - Lighter in Dark Mode
|
|
|
- "terciary": #ffd191,
|
|
|
- // Yellow 200
|
|
|
- "terciary-light": #ffecb3,
|
|
|
- // Yellow 50
|
|
|
- "terciary-dark": #ffab40,
|
|
|
-
|
|
|
- "page": #121212,
|
|
|
-
|
|
|
- "surface": #1d1d1d,
|
|
|
- "surface-light": #333333,
|
|
|
- "surface-dark": #121212,
|
|
|
-
|
|
|
- "text": #ffffff,
|
|
|
+ // Secondary Colors (Pink - adjusted for dark mode)
|
|
|
+ "secondary": #F472B6,
|
|
|
+ // Lighter Pink for dark mode
|
|
|
+ "secondary-light": #FBCFE8,
|
|
|
+ // Very Light Pink
|
|
|
+ "secondary-dark": #DB2777,
|
|
|
+ // Dark Pink
|
|
|
+
|
|
|
+ // Tertiary Colors (Amber - adjusted for dark mode)
|
|
|
+ "terciary": #FBBF24,
|
|
|
+ // Lighter Amber for dark mode
|
|
|
+ "terciary-light": #FDE68A,
|
|
|
+ // Very Light Amber
|
|
|
+ "terciary-dark": #F59E0B,
|
|
|
+ // Amber
|
|
|
+
|
|
|
+ // Dark Mode Backgrounds
|
|
|
+ "page": #0F172A,
|
|
|
+ // Very Dark Blue-Gray
|
|
|
+
|
|
|
+ "surface": #1E293B,
|
|
|
+ // Dark Blue-Gray (Cards)
|
|
|
+ "surface-light": #334155,
|
|
|
+ // Medium Blue-Gray
|
|
|
+ "surface-dark": #0F172A,
|
|
|
+ // Very Dark Blue-Gray
|
|
|
+
|
|
|
+ "text": #F1F5F9,
|
|
|
+ // Almost White
|
|
|
|
|
|
- // Black Background
|
|
|
// Status Colors - Adjusted for Dark Mode
|
|
|
- "success": #66bb6a,
|
|
|
- // Green 400
|
|
|
- "success-light": #81c784,
|
|
|
- // Green 300
|
|
|
- "success-dark": #388e3c,
|
|
|
-
|
|
|
- // Green 700
|
|
|
- "error": #f44336,
|
|
|
- // Red 500
|
|
|
- "error-light": #e57373,
|
|
|
- // Red 300
|
|
|
- "error-dark": #d32f2f,
|
|
|
-
|
|
|
- // Red 700
|
|
|
- "warning": #ffa726,
|
|
|
- // Orange 400
|
|
|
- "warning-light": #ffb74d,
|
|
|
- // Orange 300
|
|
|
- "warning-dark": #f57c00,
|
|
|
-
|
|
|
- // Orange 700
|
|
|
- "info": #29b6f6,
|
|
|
- // Light Blue 400
|
|
|
- "info-light": #4fc3f7,
|
|
|
- // Light Blue 300
|
|
|
- "info-dark": #0288d1 // Light Blue 700
|
|
|
+ "success": #34D399,
|
|
|
+ // Lighter Emerald for visibility
|
|
|
+ "success-light": #6EE7B7,
|
|
|
+ // Very Light Green
|
|
|
+ "success-dark": #10B981,
|
|
|
+ // Emerald
|
|
|
+
|
|
|
+ "error": #F87171,
|
|
|
+ // Lighter Red for visibility
|
|
|
+ "error-light": #FCA5A5,
|
|
|
+ // Very Light Red
|
|
|
+ "error-dark": #EF4444,
|
|
|
+ // Red
|
|
|
+
|
|
|
+ "warning": #FBBF24,
|
|
|
+ // Lighter Amber for visibility
|
|
|
+ "warning-light": #FDE68A,
|
|
|
+ // Very Light Amber
|
|
|
+ "warning-dark": #F59E0B,
|
|
|
+ // Amber
|
|
|
+
|
|
|
+ "info": #60A5FA,
|
|
|
+ // Lighter Blue for visibility
|
|
|
+ "info-light": #93C5FD,
|
|
|
+ // Very Light Blue
|
|
|
+ "info-dark": #3B82F6
|
|
|
+ // Blue
|
|
|
);
|
|
|
|
|
|
// Generate color utility classes for light theme
|