From 713caa63cbdb779acfb31f2d580c33d15b902ba1 Mon Sep 17 00:00:00 2001
From: gjulivan <grandjulivan@gmail.com>
Date: Tue, 24 Feb 2026 14:39:05 +0100
Subject: [PATCH] chore(atlas-core): improve css variables usage

---
 .../atlas_core/web/core/widgets/_modal.scss            |  3 ++-
 .../atlas_core/web/core/widgets/_switch.scss           | 10 +++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss
index e9fefbd1f..9ff80c6d3 100644
--- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss
+++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss
@@ -103,6 +103,7 @@
         }
 
         .modal-content {
+            background-color: var(--bg-color-secondary, $bg-color-secondary);
             input {
                 height: 56px;
                 padding: 12px 12px;
@@ -127,7 +128,7 @@
         }
 
         h2, h4 {
-            color: #aaaaaa;
+            color: var(--font-color-detail, $font-color-detail);
             font-size: 20px;
             font-weight: var(--font-weight-bold);
         }
diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss
index 9b6b8463b..acc560f2b 100644
--- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss
+++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss
@@ -5,8 +5,8 @@
 // To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
 //
 
-$default-android-color: #6fbeb5;
-$default-ios-color: rgb(100, 189, 99);
+$default-android-color: #6fbeb5 !default;
+$default-ios-color: rgb(100, 189, 99) !default;
 
 @mixin bootstrap-style-ios($brand-style) {
     border-color: $brand-style;
@@ -48,7 +48,7 @@ $default-ios-color: rgb(100, 189, 99);
     .widget-switch-btn-wrapper {
         &.checked {
             &.widget-switch-btn-wrapper-default {
-                @include bootstrap-style-ios($default-ios-color);
+                @include bootstrap-style-ios(var(--switch-default-ios-color, $default-ios-color));
             }
 
             &.widget-switch-btn-wrapper-success {
@@ -83,10 +83,10 @@ $default-ios-color: rgb(100, 189, 99);
     .widget-switch-btn-wrapper {
         &.checked {
             &.widget-switch-btn-wrapper-default {
-                @include bootstrap-style-android($default-android-color);
+                @include bootstrap-style-android(var(--switch-default-android-color, $default-android-color));
 
                 .widget-switch-btn {
-                    background: $default-android-color;
+                    background: var(--switch-default-android-color, $default-android-color);
                 }
             }