From 089602a7a9515a1810739c660be8a5eb37d5e8b6 Mon Sep 17 00:00:00 2001
From: maki <makiniqa@sutty.nl>
Date: Fri, 14 Jun 2024 14:26:06 -0300
Subject: [PATCH] fix: colores en modo oscuro (media query y dark.scss) usando
 variables #16489

---
 app/assets/stylesheets/application.scss | 42 +++++++++----------------
 app/assets/stylesheets/dark.scss        | 32 ++-----------------
 2 files changed, 18 insertions(+), 56 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index ede3da96..8fa4a32a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -20,6 +20,13 @@ $form-feedback-valid-color: $black;
 $form-feedback-invalid-color: $magenta;
 $form-feedback-icon-valid-color: $black;
 $component-active-bg: $magenta;
+$modal-content-bg: var(--background);
+$card-bg: var(--background);
+$card-border-color: var(--card-border-color);
+$input-bg: var(--background);
+$input-color: var(--foreground);
+$btn-bg-color: var(--btn-bg-color);
+$btn-color: var(--btn-color);
 
 $spacers: (
   2-plus: 0.75rem
@@ -44,6 +51,9 @@ $sizes: (
   --foreground: #{$black};
   --background: #{$white};
   --color: #{$magenta};
+  --card-border-color: #{rgba($black, .125)};
+  --btn-bg-color: #{$black};
+  --btn-color: #{$white};
 }
 
 @media (prefers-color-scheme: dark) {
@@ -51,40 +61,16 @@ $sizes: (
     --foreground: #{$white};
     --background: #{$black};
     --color: #{$cyan};
+    --card-border-color: #{rgba($white, .250)};
+    --btn-bg-color: #{$white};
+    --btn-color: #{$black};
   }
 
-  .btn {
-    background-color: $white;
-  }
   
   .btn-secondary {
-    background-color: $white;
-    color: $black;
     border: none;
-  
-    &:hover {
-      color: $black;
-      background-color: $cyan;
-    }
-  
-    &:active {
-      background-color: $cyan;
-    }
-  
-    &:focus {
-      box-shadow: 0 0 0 0.2rem $cyan;
-    }
   }
-  
-  .card {
-    p, a, span {
-      color: $black;
-    }
 
-    a:hover {
-      color: $black;
-    }
-  }
 }
 
 // TODO: Encontrar la forma de generar esto desde los locales de Rails
@@ -239,6 +225,8 @@ svg {
 .btn {
   margin-right: 0.3rem;
   margin-bottom: 0.3rem;
+  background-color: $btn-bg-color;
+  color: $btn-color;
 
   &:hover {
     color: var(--background);
diff --git a/app/assets/stylesheets/dark.scss b/app/assets/stylesheets/dark.scss
index 9f6e27e2..e8ed1862 100644
--- a/app/assets/stylesheets/dark.scss
+++ b/app/assets/stylesheets/dark.scss
@@ -6,39 +6,13 @@ $cyan: #13fefe;
   --foreground: #{$white};
   --background: #{$black};
   --color: #{$cyan};
-}
-
-.btn {
-  background-color: $white;
+  --card-border-color: #{rgba($white, .250)};
+  --btn-bg-color: #{$white};
+  --btn-color: #{$black};
 }
 
 .btn-secondary {
-  background-color: $white;
-  color: $black;
   border: none;
-
-  &:hover {
-    color: $black;
-    background-color: $cyan;
-  }
-
-  &:active {
-    background-color: $cyan;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 0.2rem $cyan;
-  }
-}
-
-.card {
-  p, a, span {
-    color: $black;
-  }
-
-  a:hover {
-    color: $black;
-  }
 }