|
|
@@ -88,76 +88,76 @@ $colors: (
|
|
|
);
|
|
|
|
|
|
// Dark Theme Color Overrides
|
|
|
-$colors-dark: (
|
|
|
- // 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": #F9FAFB,
|
|
|
- // Very Light Gray (App Background)
|
|
|
-
|
|
|
- // Surface Colors (Cards, Panels)
|
|
|
- "surface": #FFFFFF,
|
|
|
- // Pure White
|
|
|
- "surface-light": #F9FAFB,
|
|
|
- // Very Light Gray
|
|
|
- "surface-dark": #F3F4F6,
|
|
|
- // Light Gray
|
|
|
-
|
|
|
- // Text Colors
|
|
|
- "text": #111827,
|
|
|
- // Very Dark Gray (almost black)
|
|
|
-
|
|
|
- // Status Colors with Variants
|
|
|
- "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
|
|
|
-);
|
|
|
+// $colors-dark: (
|
|
|
+// // 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": #F9FAFB,
|
|
|
+// // Very Light Gray (App Background)
|
|
|
+
|
|
|
+// // Surface Colors (Cards, Panels)
|
|
|
+// "surface": #FFFFFF,
|
|
|
+// // Pure White
|
|
|
+// "surface-light": #F9FAFB,
|
|
|
+// // Very Light Gray
|
|
|
+// "surface-dark": #F3F4F6,
|
|
|
+// // Light Gray
|
|
|
+
|
|
|
+// // Text Colors
|
|
|
+// "text": #111827,
|
|
|
+// // Very Dark Gray (almost black)
|
|
|
+
|
|
|
+// // Status Colors with Variants
|
|
|
+// "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
|
|
|
+// );
|
|
|
|
|
|
// Generate color utility classes for light theme
|
|
|
@each $name, $color in $colors {
|
|
|
@@ -170,13 +170,13 @@ $colors-dark: (
|
|
|
}
|
|
|
|
|
|
// Generate color utility classes for dark theme
|
|
|
-.body--dark {
|
|
|
- @each $name, $color in $colors-dark {
|
|
|
- .text-#{$name} {
|
|
|
- color: $color !important;
|
|
|
- }
|
|
|
- .bg-#{$name} {
|
|
|
- background: $color !important;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+// .body--dark {
|
|
|
+// @each $name, $color in $colors-dark {
|
|
|
+// .text-#{$name} {
|
|
|
+// color: $color !important;
|
|
|
+// }
|
|
|
+// .bg-#{$name} {
|
|
|
+// background: $color !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|