From f45a2b96d292216e9e48dc46080197d3d29f5d3b Mon Sep 17 00:00:00 2001
From: maki <makiniqa@sutty.nl>
Date: Thu, 13 Jun 2024 16:13:40 -0300
Subject: [PATCH 1/4] btn en dark del media query #16489

---
 app/assets/stylesheets/application.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index a24af4c8..d5a5c483 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -52,6 +52,10 @@ $sizes: (
     --background: #{$black};
     --color: #{$cyan};
   }
+
+  .dropdown-toggle {
+    background-color: $cyan;;
+  }
 }
 
 // TODO: Encontrar la forma de generar esto desde los locales de Rails

From ba40fb647dd85788c1f1486daf0111991371fea9 Mon Sep 17 00:00:00 2001
From: maki <makiniqa@sutty.nl>
Date: Thu, 13 Jun 2024 16:19:50 -0300
Subject: [PATCH 2/4] fix: media query tiene mismas clases que dark.scss #16489

---
 app/assets/stylesheets/application.scss | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index d5a5c483..362b7cbc 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -53,9 +53,29 @@ $sizes: (
     --color: #{$cyan};
   }
 
-  .dropdown-toggle {
-    background-color: $cyan;;
+  .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;
+    }
+  }
+  
 }
 
 // TODO: Encontrar la forma de generar esto desde los locales de Rails

From fe33dd8caad6b5b40117ac34d938ffcdea633348 Mon Sep 17 00:00:00 2001
From: maki <makiniqa@sutty.nl>
Date: Thu, 13 Jun 2024 16:24:32 -0300
Subject: [PATCH 3/4] feat: colores legibles en modo oscuro #16489

---
 app/assets/stylesheets/application.scss |  9 +++++++++
 app/assets/stylesheets/dark.scss        | 10 ++++++++++
 2 files changed, 19 insertions(+)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 362b7cbc..ede3da96 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -76,6 +76,15 @@ $sizes: (
     }
   }
   
+  .card {
+    p, a, span {
+      color: $black;
+    }
+
+    a:hover {
+      color: $black;
+    }
+  }
 }
 
 // TODO: Encontrar la forma de generar esto desde los locales de Rails
diff --git a/app/assets/stylesheets/dark.scss b/app/assets/stylesheets/dark.scss
index f7f3a09d..9f6e27e2 100644
--- a/app/assets/stylesheets/dark.scss
+++ b/app/assets/stylesheets/dark.scss
@@ -31,4 +31,14 @@ $cyan: #13fefe;
   }
 }
 
+.card {
+  p, a, span {
+    color: $black;
+  }
+
+  a:hover {
+    color: $black;
+  }
+}
+
 

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 4/4] 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;
-  }
 }