|
@@ -1,109 +1,72 @@
|
|
|
-// Quasar SCSS Variables with Material Design Color System
|
|
|
|
|
-// --------------------------------------------------
|
|
|
|
|
|
|
+$primary: #003e29;
|
|
|
|
|
+$secondary: #ff8340;
|
|
|
|
|
+$accent: #e91e63;
|
|
|
|
|
|
|
|
-// Primary Theme Colors
|
|
|
|
|
-$primary: #1976d2; // Material Blue 700
|
|
|
|
|
-$secondary: #9c27b0; // Material Purple 500
|
|
|
|
|
-$accent: #e91e63; // Material Pink 500
|
|
|
|
|
-
|
|
|
|
|
-// Dark Theme Base Colors
|
|
|
|
|
$dark: #1d1d1d;
|
|
$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: #2e7d32;
|
|
|
|
|
+$negative: #d32f2f;
|
|
|
|
|
+$info: #0288d1;
|
|
|
|
|
+$warning: #ed6c02;
|
|
|
|
|
|
|
|
-// Extended Color System with Light/Dark Variants
|
|
|
|
|
$colors: (
|
|
$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
|
|
|
|
|
- // Background Colors
|
|
|
|
|
- "page": #f1f1f1,
|
|
|
|
|
-
|
|
|
|
|
- // Surface Colors
|
|
|
|
|
- "surface": #ffffff,
|
|
|
|
|
- "surface-light": #f5f5f5,
|
|
|
|
|
- "surface-dark": #f1f1f1,
|
|
|
|
|
-
|
|
|
|
|
- //text color
|
|
|
|
|
- "text": #000000,
|
|
|
|
|
-
|
|
|
|
|
- // 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
|
|
|
|
|
|
|
+ "primary": #003e29,
|
|
|
|
|
+ "primary-2": #406e5f,
|
|
|
|
|
+ "primary-3": #809f94,
|
|
|
|
|
+ "primary-4": #c0cfca,
|
|
|
|
|
+
|
|
|
|
|
+ "secondary": #ff8340,
|
|
|
|
|
+ "secondary-2": #ffa270,
|
|
|
|
|
+ "secondary-3": #ffc1a0,
|
|
|
|
|
+ "secondary-4": #ffe0d0,
|
|
|
|
|
+
|
|
|
|
|
+ "terciary": #ace4e4,
|
|
|
|
|
+ "terciary-2": #c1ebeb,
|
|
|
|
|
+ "terciary-3": #d6f2f2,
|
|
|
|
|
+ "terciary-4": #eaf8f8,
|
|
|
|
|
+
|
|
|
|
|
+ "background": #ececf0,
|
|
|
|
|
+ "background-2": #f1f1f4,
|
|
|
|
|
+ "background-3": #f6f6f8,
|
|
|
|
|
+ "background-4": #fafafb,
|
|
|
|
|
+
|
|
|
|
|
+ "suface": #ffffff,
|
|
|
|
|
+
|
|
|
|
|
+ "stroke": #c9c9c9,
|
|
|
|
|
+ "stroke-2": #d7d7d7,
|
|
|
|
|
+ "stroke-3": #e4e4e4,
|
|
|
|
|
+ "stroke-4": #f2f2f2,
|
|
|
|
|
+
|
|
|
|
|
+ "alert": #e6cc00,
|
|
|
|
|
+ "alert-2": #edd940,
|
|
|
|
|
+ "alert-3": #f3e580,
|
|
|
|
|
+ "alert-4": #f9f2c0,
|
|
|
|
|
+
|
|
|
|
|
+ "approved": #00e339,
|
|
|
|
|
+ "approved-2": #40ea6b,
|
|
|
|
|
+ "approved-3": #80f19c,
|
|
|
|
|
+ "approved-4": #c0f8ce,
|
|
|
|
|
+
|
|
|
|
|
+ "declined": #ff383c,
|
|
|
|
|
+ "declined-2": #ff6a6d,
|
|
|
|
|
+ "declined-3": #ff9c9e,
|
|
|
|
|
+ "declined-4": #ffcecf,
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
-// Dark Theme Color Overrides
|
|
|
|
|
|
|
+// Modo dark fora do escopo
|
|
|
$colors-dark: (
|
|
$colors-dark: (
|
|
|
- // Primary Colors and Variants
|
|
|
|
|
"primary": #1976d2,
|
|
"primary": #1976d2,
|
|
|
- // Base - Blue 700
|
|
|
|
|
"primary-light": #42a5f5,
|
|
"primary-light": #42a5f5,
|
|
|
- // Blue 50
|
|
|
|
|
"primary-dark": #1565c0,
|
|
"primary-dark": #1565c0,
|
|
|
|
|
|
|
|
"dark": #1d1d1d,
|
|
"dark": #1d1d1d,
|
|
|
|
|
|
|
|
- // Blue 400
|
|
|
|
|
- // Secondary Colors - Lighter in Dark Mode
|
|
|
|
|
"secondary": #ce93d8,
|
|
"secondary": #ce93d8,
|
|
|
- // Purple 200
|
|
|
|
|
"secondary-light": #f3e5f5,
|
|
"secondary-light": #f3e5f5,
|
|
|
- // Purple 50
|
|
|
|
|
"secondary-dark": #ab47bc,
|
|
"secondary-dark": #ab47bc,
|
|
|
|
|
|
|
|
- //Terceary Colors - Lighter in Dark Mode
|
|
|
|
|
"terciary": #ffd191,
|
|
"terciary": #ffd191,
|
|
|
- // Yellow 200
|
|
|
|
|
"terciary-light": #ffecb3,
|
|
"terciary-light": #ffecb3,
|
|
|
- // Yellow 50
|
|
|
|
|
"terciary-dark": #ffab40,
|
|
"terciary-dark": #ffab40,
|
|
|
|
|
|
|
|
"page": #121212,
|
|
"page": #121212,
|
|
@@ -114,37 +77,23 @@ $colors-dark: (
|
|
|
|
|
|
|
|
"text": #ffffff,
|
|
"text": #ffffff,
|
|
|
|
|
|
|
|
- // Black Background
|
|
|
|
|
- // Status Colors - Adjusted for Dark Mode
|
|
|
|
|
"success": #66bb6a,
|
|
"success": #66bb6a,
|
|
|
- // Green 400
|
|
|
|
|
"success-light": #81c784,
|
|
"success-light": #81c784,
|
|
|
- // Green 300
|
|
|
|
|
"success-dark": #388e3c,
|
|
"success-dark": #388e3c,
|
|
|
|
|
|
|
|
- // Green 700
|
|
|
|
|
"error": #f44336,
|
|
"error": #f44336,
|
|
|
- // Red 500
|
|
|
|
|
"error-light": #e57373,
|
|
"error-light": #e57373,
|
|
|
- // Red 300
|
|
|
|
|
"error-dark": #d32f2f,
|
|
"error-dark": #d32f2f,
|
|
|
|
|
|
|
|
- // Red 700
|
|
|
|
|
"warning": #ffa726,
|
|
"warning": #ffa726,
|
|
|
- // Orange 400
|
|
|
|
|
"warning-light": #ffb74d,
|
|
"warning-light": #ffb74d,
|
|
|
- // Orange 300
|
|
|
|
|
"warning-dark": #f57c00,
|
|
"warning-dark": #f57c00,
|
|
|
|
|
|
|
|
- // Orange 700
|
|
|
|
|
"info": #29b6f6,
|
|
"info": #29b6f6,
|
|
|
- // Light Blue 400
|
|
|
|
|
"info-light": #4fc3f7,
|
|
"info-light": #4fc3f7,
|
|
|
- // Light Blue 300
|
|
|
|
|
- "info-dark": #0288d1 // Light Blue 700
|
|
|
|
|
|
|
+ "info-dark": #0288d1
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
-// Generate color utility classes for light theme
|
|
|
|
|
@each $name, $color in $colors {
|
|
@each $name, $color in $colors {
|
|
|
.text-#{$name} {
|
|
.text-#{$name} {
|
|
|
color: $color !important;
|
|
color: $color !important;
|
|
@@ -154,7 +103,6 @@ $colors-dark: (
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// Generate color utility classes for dark theme
|
|
|
|
|
.body--dark {
|
|
.body--dark {
|
|
|
@each $name, $color in $colors-dark {
|
|
@each $name, $color in $colors-dark {
|
|
|
.text-#{$name} {
|
|
.text-#{$name} {
|