Procházet zdrojové kódy

aplicando cores do sistema PT1

Gustavo Zanatta před 2 týdny
rodič
revize
ceea8d8917

+ 2 - 1
src/components/layout/DefaultHeaderPage.vue

@@ -6,10 +6,11 @@
         :key="breadcrumb?.name"
         :label="$t(breadcrumb?.title)"
         :to="{ name: breadcrumb?.name }"
+        class="gradient-diarista"
       />
     </q-breadcrumbs>
     <div class="flex items-center justify-between">
-      <span class="text-h5">{{ $t($route.meta?.title) }}</span>
+      <span class="text-h5 gradient-diarista">{{ $t($route.meta?.title) }}</span>
       <slot name="after" />
     </div>
     <q-separator class="q-my-sm" />

+ 14 - 0
src/css/app.scss

@@ -90,3 +90,17 @@ input[type="number"]::-webkit-outer-spin-button {
     display: none;
   }
 }
+
+.gradient-diarista {
+  background: linear-gradient(
+    90deg,
+    #6a11cb 0%,
+    #2575fc 100%
+  );
+
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  background-clip: text;
+  color: transparent;
+}

+ 134 - 119
src/css/quasar.variables.scss

@@ -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