From 00ee275caaf3398f586b7729bdda95c0d17159f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <joao.manuel.ferreira@outsystems.com>
Date: Tue, 4 Nov 2025 17:07:22 +0000
Subject: [PATCH] - remove var usage;

---
 core/src/components/button/button.ionic.scss | 41 ++++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index 3ec07c7804..f2fe9b65c5 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -43,44 +43,58 @@
 // --------------------------------------------------
 
 :host(.button-solid) {
-  --background-activated: var(--ion-color-shade, #{globals.ion-color(primary, shade)});
-  --background-hover: var(--ion-color-shade, #{globals.ion-color(primary, shade)});
+  --background-activated: #{globals.$ion-bg-primary-base-press};
+  --background-hover: #{globals.$ion-bg-primary-base-press};
   --background-focused: transparent;
   --background-hover-opacity: 1;
-  --background: var(--ion-color-base, #{globals.ion-color(primary, base)});
-  --color: var(--ion-color-contrast, #{globals.ion-color(primary, contrast)});
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
 
+:host(.button-solid.ion-color) {
+  --background-activated: #{globals.current-color(shade)};
+  --background-hover: #{globals.current-color(shade)};
+  --background: #{globals.current-color(base)};
+  --color: #{globals.current-color(contrast)};
+}
+
 // Outline Button
 // --------------------------------------------------
 
 :host(.button-outline) {
   --border-width: #{globals.$ion-border-size-025};
   --border-style: #{globals.$ion-border-style-solid};
-  --background-activated: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)});
+  --background-activated: #{globals.$ion-bg-primary-subtle-press};
   --background-focused: transparent;
-  --background-hover: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)});
+  --background-hover: #{globals.$ion-bg-primary-subtle-press};
   --background-hover-opacity: 1;
-  --border-color: var(--ion-color-base, #{globals.ion-color(primary, base)});
-  --color: var(--ion-color-base, #{globals.ion-color(primary, base)});
+  --border-color: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, base)};
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
 
+:host(.button-outline.ion-color) {
+  --background-activated: #{globals.current-color(shade, $subtle: true)};
+  --background-hover: #{globals.current-color(shade, $subtle: true)};
+  --border-color: #{globals.current-color(base)};
+  --color: #{globals.current-color(base)};
+}
+
 // Warning Outline Button - use foreground color for text and border
 :host(.button-outline.ion-color-warning) .button-native {
-  --ion-color-base: var(--ion-color-warning-foreground);
+  --ion-color-base: #{globals.ion-color(warning, foreground)};
 }
 
 // Clear Button
 // --------------------------------------------------
 
 :host(.button-clear) {
-  --background-activated: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)});
+  --background-activated: #{globals.$ion-bg-primary-subtle-press};
   --background-focused: transparent;
-  --background-hover: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)});
+  --background-hover: #{globals.$ion-bg-primary-subtle-press};
   --background-hover-opacity: 1;
   --color: #{globals.ion-color(primary, foreground)};
   --ripple-opacity: var(--background-activated-opacity, 1);
@@ -88,8 +102,11 @@
 }
 
 :host(.button-clear.ion-color) {
+  --background-activated: #{globals.current-color(shade, $subtle: true)};
+  --background-hover: #{globals.current-color(shade, $subtle: true)};
+
   .button-native {
-    --ion-color-base: var(--ion-color-foreground, #{globals.current-color(foreground)});
+    --ion-color-base: #{globals.current-color(foreground)};
   }
 }