From f193e3e835b28988c60b5dd276197466681efc65 Mon Sep 17 00:00:00 2001
From: gjulivan <grandjulivan@gmail.com>
Date: Tue, 5 May 2026 11:49:49 +0200
Subject: [PATCH] chore: improve css variables support

---
 .../atlas_core/web/core/widgets/_modal.scss   | 19 ++++++++++---------
 .../atlas_core/web/core/widgets/_switch.scss  | 10 +++++-----
 2 files changed, 15 insertions(+), 14 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..43983ef3c 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
@@ -16,12 +16,13 @@
             border: var(--border-width-default) solid var(--modal-header-border-color);
             border-radius: 4px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            background-color: var(--bg-color-secondary, $bg-color-secondary);
 
             .modal-header {
                 padding: 15px 20px;
                 border-bottom-color: var(--modal-header-border-color);
                 border-radius: 0; // Because of the class .mx-window-active in mxui.css
-                background-color: var(--modal-header-bg);
+                background-color: var(--modal-header-bg, $modal-header-bg);
 
                 h2, h4 {
                     margin: 0;
@@ -39,13 +40,13 @@
                     text-shadow: none;
                     &:focus {
                         border-radius: 4px;
-                        outline: 2px solid var(--brand-primary);
+                        outline: 2px solid var(--brand-primary, $brand-primary);
                     }
                 }
             }
 
             .modal-body {
-                background-color: var(--modal-body-bg);
+                background-color: var(--modal-body-bg, $modal-body-bg);
             }
 
             .modal-footer {
@@ -54,7 +55,7 @@
                 margin-top: 0;
                 padding: 20px;
                 border-style: none;
-                background-color: var(--modal-footer-bg);
+                background-color: var(--modal-footer-bg, $modal-footer-bg);
             }
         }
     }
@@ -77,8 +78,8 @@
                 justify-content: flex-end;
                 margin: 0;
                 padding: 20px;
-                text-align: var(--dataview-controls-alignment);
-                border-top: 1px solid var(--modal-header-border-color);
+                text-align: var(--dataview-controls-alignment, $dataview-controls-alignment);
+                border-top: 1px solid var(--modal-header-border-color, $modal-header-border-color);
             }
         }
 
@@ -106,13 +107,13 @@
             input {
                 height: 56px;
                 padding: 12px 12px;
-                border: 1px solid var(--bg-color-secondary);
-                background: var(--bg-color-secondary);
+                border: 1px solid var(--bg-color-secondary, $bg-color-secondary);
+                background: var(--bg-color-secondary, $bg-color-secondary);
                 box-shadow: none;
                 font-size: 16px;
 
                 &:focus {
-                    border-color: var(--brand-primary-200);
+                    border-color: var(--brand-primary-200, $color-primary-light);
                 }
             }
         }
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..e7e7d4e40 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-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-android-color, $default-android-color));
 
                 .widget-switch-btn {
-                    background: $default-android-color;
+                    background: var(--switch-android-color, $default-android-color);
                 }
             }