🎨 style(global): definir paleta de cores, fontes e customizações do Quasar em app.scss

Fase: dev | Origin: melhoria-interna

src/css/app.scss

@@ -48,7 +48,18 @@ body.body--light {
   }
 
   .q-menu {
-    background: #{map.get($colors, "surface")};
+    background: $neutral-light !important;
+    color: $color-text !important;
+
+    .q-item {
+      color: $color-text;
+    }
+
+    .q-item--active,
+    .q-item:hover {
+      background: $violet-light !important;
+      color: $violet-normal !important;
+    }
   }
 
   .q-dialog {

src/css/quasar.variables.scss

@@ -7,7 +7,7 @@
 $primary:             #35a30a;
 $primary-4:           #cde8c2;
 
-// Violet (SerpRati brand)
+// Violet (SerPrati brand)
 $violet-light:        #f0e8f1;
 $violet-light-hover:  #e8ddea;
 $violet-light-active: #d0b9d4;

src/css/table.scss

@@ -1,12 +1,12 @@
 @use "sass:map";
 @use "src/css/quasar.variables.scss";
 .softpar-table {
-  .body--dark & {
-    --table-bg-color: #{map.get($colors-dark, "surface")}; // Using our dark background
-    --table-border-color: #{map.get($colors-dark, "surface-light")}; // Darker border
-    --table-header-color: #{map.get($colors-dark, "text")}; // Light text for dark mode
-    --table-ring-color: #505050;
-  }
+  // .body--dark & {
+  //   --table-bg-color: #{map.get($colors-dark, "surface")}; // Using our dark background
+  //   --table-border-color: #{map.get($colors-dark, "surface-light")}; // Darker border
+  //   --table-header-color: #{map.get($colors-dark, "text")}; // Light text for dark mode
+  //   --table-ring-color: #505050;
+  // }
 
   .body--light & {
     --table-bg-color: #{map.get($colors, "surface")}; // Light background
@@ -72,10 +72,10 @@
   margin-right: auto;
   margin-left: auto;
 
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "positive-1")};
-  }
+  // .body--dark & {
+  //   background: none;
+  //   border: 1px solid #{map.get($colors, "positive-1")};
+  // }
 
   .body--light & {
     background: #{map.get($colors, "positive-1")};
@@ -92,10 +92,10 @@
   margin-right: auto;
   margin-left: auto;
 
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "negative-1")};
-  }
+  // .body--dark & {
+  //   background: none;
+  //   border: 1px solid #{map.get($colors, "negative-1")};
+  // }
 
   .body--light & {
     background: #{map.get($colors, "negative-1")};
@@ -112,10 +112,10 @@
   margin-right: auto;
   margin-left: auto;
 
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "negative-1")};
-  }
+  // .body--dark & {
+  //   background: none;
+  //   border: 1px solid #{map.get($colors, "negative-1")};
+  // }
 
   .body--light & {
     background: #{map.get($colors, "negative-1")};
@@ -132,10 +132,10 @@
   margin-right: auto;
   margin-left: auto;
 
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "primary-1")};
-  }
+  // .body--dark & {
+  //   background: none;
+  //   border: 1px solid #{map.get($colors, "primary-1")};
+  // }
 
   .body--light & {
     background: #{map.get($colors, "primary-1")};
@@ -152,10 +152,10 @@
   margin-right: auto;
   margin-left: auto;
 
-  .body--dark & {
-    background: none;
-    border: 1px solid #{map.get($colors, "warning")};
-  }
+  // .body--dark & {
+  //   background: none;
+  //   border: 1px solid #{map.get($colors, "warning")};
+  // }
 
   .body--light & {
     background: #{map.get($colors, "warning")};
@@ -169,9 +169,9 @@
       background: #{map.get($colors, "page")};
     }
 
-    .body--dark & {
-      background: #{map.get($colors, "background-3")};
-    }
+    // .body--dark & {
+    //   background: #{map.get($colors, "background-3")};
+    // }
   }
 
   .q-table__bottom {
@@ -179,9 +179,9 @@
       background: #{map.get($colors, "page")};
     }
 
-    .body--dark & {
-      background: #{map.get($colors, "background-3")};
-    }
+    // .body--dark & {
+    //   background: #{map.get($colors, "background-3")};
+    // }
   }
 }
 
@@ -190,7 +190,7 @@
     background: #{map.get($colors, "dark")};
   }
 
-  .body--dark & {
-    background: #{map.get($colors, "background-3")};
-  }
+  // .body--dark & {
+  //   background: #{map.get($colors, "background-3")};
+  // }
 }