From def3a04548f2a2c0ec87536325a73e3122a0c65d Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Fri, 26 Jun 2026 08:43:04 -0300
Subject: [PATCH] style: refactor button styles and theme variables for
 improved consistency

---
 src/_theme.scss                               | 10 ++++
 .../components/button/button.component.scss   | 56 +++++++++++++++++++
 src/styles.scss                               | 27 +--------
 3 files changed, 67 insertions(+), 26 deletions(-)
 create mode 100644 src/_theme.scss

diff --git a/src/_theme.scss b/src/_theme.scss
new file mode 100644
index 0000000..2fa6eb4
--- /dev/null
+++ b/src/_theme.scss
@@ -0,0 +1,10 @@
+$primary:#6376F3;
+$danger: #FF8888;
+$secondary:#A0A0A0;
+
+$primary-button-hover-shade-amount: 40%;
+$primary-button-disabled-tint-amount: 50%;
+$secondary-button-hover-active-shade-amount: 25.625%;
+$secondary-button-disabled-alpha: 0.5;
+$danger-button-hover-active-bg: #9D5252;
+$danger-button-disabled-alpha: 0.5;
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index d0c6ef5..8c94a4e 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -1,3 +1,7 @@
+@use "sass:color";
+
+@import "../../../../_theme";
+
 :host {
   display: inline-block;
 }
@@ -6,3 +10,55 @@
   min-height: 40px;
   font-weight: 600;
 }
+
+.btn-primary,
+.btn-secondary,
+.btn-danger {
+  --bs-btn-color: #fff;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-active-color: #fff;
+}
+
+.btn-outline-primary,
+.btn-outline-danger {
+  --bs-btn-hover-color: #fff;
+  --bs-btn-active-color: #fff;
+}
+
+.btn-primary {
+  $primary-disabled-bg: color.mix(white, $primary, $weight: $primary-button-disabled-tint-amount);
+
+  --bs-btn-hover-bg: #{color.mix(black, $primary, $weight: $primary-button-hover-shade-amount)};
+  --bs-btn-hover-border-color: #{color.mix(black, $primary, $weight: $primary-button-hover-shade-amount)};
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #{$primary-disabled-bg};
+  --bs-btn-disabled-border-color: #{$primary-disabled-bg};
+  --bs-btn-disabled-opacity: 1;
+}
+
+.btn-secondary {
+  $secondary-hover-active-bg: color.mix(black, $secondary, $weight: $secondary-button-hover-active-shade-amount);
+  $secondary-disabled-bg: color.change($secondary, $alpha: $secondary-button-disabled-alpha);
+
+  --bs-btn-hover-bg: #{$secondary-hover-active-bg};
+  --bs-btn-hover-border-color: #{$secondary-hover-active-bg};
+  --bs-btn-active-bg: #{$secondary-hover-active-bg};
+  --bs-btn-active-border-color: #{$secondary-hover-active-bg};
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #{$secondary-disabled-bg};
+  --bs-btn-disabled-border-color: #{$secondary-disabled-bg};
+  --bs-btn-disabled-opacity: 1;
+}
+
+.btn-danger {
+  $danger-disabled-bg: color.change($danger, $alpha: $danger-button-disabled-alpha);
+
+  --bs-btn-hover-bg: #{$danger-button-hover-active-bg};
+  --bs-btn-hover-border-color: #{$danger-button-hover-active-bg};
+  --bs-btn-active-bg: #{$danger-button-hover-active-bg};
+  --bs-btn-active-border-color: #{$danger-button-hover-active-bg};
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #{$danger-disabled-bg};
+  --bs-btn-disabled-border-color: #{$danger-disabled-bg};
+  --bs-btn-disabled-opacity: 1;
+}
diff --git a/src/styles.scss b/src/styles.scss
index fb7c3bb..dc6ab40 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,33 +1,8 @@
 
-
-$primary:#6376F3;
-$danger: #FF8888;
-$secondary:#A0A0A0;
-
-$primary-button-hover-shade-amount: 40%;
-$primary-button-disabled-tint-amount: 50%;
+@import "./theme";
 
 @import "../node_modules/bootstrap/scss/bootstrap";
 
-.btn-primary,
-.btn-secondary,
-.btn-danger {
-  --bs-btn-color: #fff;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-active-color: #fff;
-}
-
-.btn-primary {
-  $primary-disabled-bg: tint-color($primary, $primary-button-disabled-tint-amount);
-
-  --bs-btn-hover-bg: #{shade-color($primary, $primary-button-hover-shade-amount)};
-  --bs-btn-hover-border-color: #{shade-color($primary, $primary-button-hover-shade-amount)};
-  --bs-btn-disabled-color: #{color-contrast($primary-disabled-bg)};
-  --bs-btn-disabled-bg: #{$primary-disabled-bg};
-  --bs-btn-disabled-border-color: #{$primary-disabled-bg};
-  --bs-btn-disabled-opacity: 1;
-}
-
 :root {
   --bs-body-font-family: "Gotham", sans-serif;