Forráskód Böngészése

feat: adiciona variaveis de cores

ebagabee 1 hónapja
szülő
commit
73f72183a4
1 módosított fájl, 50 hozzáadás és 102 törlés
  1. 50 102
      src/css/quasar.variables.scss

+ 50 - 102
src/css/quasar.variables.scss

@@ -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;
 
-// 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: (
-  // 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: (
-  // Primary Colors and Variants
   "primary": #1976d2,
-  // Base - Blue 700
   "primary-light": #42a5f5,
-  // Blue 50
   "primary-dark": #1565c0,
 
   "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,
@@ -114,37 +77,23 @@ $colors-dark: (
 
   "text": #ffffff,
 
-  // 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
+  "info-dark": #0288d1
 );
 
-// Generate color utility classes for light theme
 @each $name, $color in $colors {
   .text-#{$name} {
     color: $color !important;
@@ -154,7 +103,6 @@ $colors-dark: (
   }
 }
 
-// Generate color utility classes for dark theme
 .body--dark {
   @each $name, $color in $colors-dark {
     .text-#{$name} {