From 0523ec184f1152bc27455fee3b751300bef74b67 Mon Sep 17 00:00:00 2001
From: gjulivan <grandjulivan@gmail.com>
Date: Thu, 19 Feb 2026 13:15:31 +0100
Subject: [PATCH 1/3] fix: provide better css variables mapping

---
 .../web/_datagrid-dropdown-filter.scss        | 33 ++++++++++---------
 .../datawidgets/web/_datagrid.scss            | 10 +++---
 .../datawidgets/web/_date-picker.scss         | 27 +++++++--------
 .../themesource/datawidgets/web/_gallery.scss | 10 +++---
 .../datawidgets/web/variables.scss            | 20 +++++++----
 5 files changed, 54 insertions(+), 46 deletions(-)

diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
index c25ddaead3..26e76f6177 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
@@ -1,10 +1,11 @@
+$scroll-shadow: /* Shadow Cover TOP */
+    linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
+    /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
+    /* Shadow TOP */ linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center top,
+    /* Shadow BOTTOM */ linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center bottom !default;
+
 @mixin scroll-shadow {
-    background:
-        /* Shadow Cover TOP */
-        linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
-        /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
-        /* Shadow TOP */ linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center top,
-        /* Shadow BOTTOM */ linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center bottom;
+    background: var(--scroll-shadow, $scroll-shadow);
 
     background-repeat: no-repeat;
     background-size:
@@ -20,7 +21,7 @@
         stroke-width: 0;
     }
     &:hover {
-        color: var(--brand-primary, #264ae5);
+        color: var(--brand-primary, $brand-primary);
         path {
             stroke-width: 1px;
         }
@@ -37,13 +38,13 @@ $root: ".widget-dropdown-filter";
     --wdf-popover-z-index: 50;
     --wdf-popover-shadow: 0px 0px var(--wdf-outer-spacing) 0px var(--shadow-color-border, rgba(0, 0, 0, 0.2));
     --wdf-bd-radius: var(--dropdown-border-radius, 7px);
-    --wdf-menu-bg-color: var(--label-info-color, #ffffff);
+    --wdf-menu-bg-color: var(--label-info-color, $label-info-color);
     --wdf-menu-max-height: var(--dropdown-menu-max-height, 320px);
     --wdf-menu-item-padding: 6px 10px;
-    --wdf-highlighted-bg-color: var(--color-default-light, #f5f6f6);
-    --wdf-selected-bg-color: var(--color-primary-lighter, #e6eaff);
+    --wdf-highlighted-bg-color: var(--color-default-light, $color-default-light);
+    --wdf-selected-bg-color: var(--color-primary-lighter, $color-primary-lighter);
     --wdf-button-spacing: 8px;
-    --wdf-color: var(--gray-dark, black);
+    --wdf-color: var(--font-color-contrast, $color-contrast);
     --wdf-state-icon-size: 16px;
     --wdf-toggle-width: calc(4px + var(--wdf-state-icon-size) + var(--wdf-button-spacing));
     --wdf-toggle-inline-end: var(--wdf-toggle-width);
@@ -243,7 +244,7 @@ $root: ".widget-dropdown-filter";
 }
 
 :where(#{$root}.variant-select[data-empty]) {
-    --wdf-input-placeholder-color: rgb(117, 117, 117);
+    --wdf-input-placeholder-color: var(--form-input-placeholder-color, $form-input-placeholder-color);
     #{$root}-toggle {
         color: var(--wdf-input-placeholder-color);
     }
@@ -262,9 +263,9 @@ $root: ".widget-dropdown-filter";
 :where(#{$root}.variant-tag-picker) {
     #{$root}-selected-item {
         align-items: center;
-        background-color: var(--color-primary-lighter, #e6eaff);
+        background-color: var(--color-primary-lighter, $color-primary-lighter);
         border-radius: 26px;
-        color: #000;
+        color: var(--wdf-color);
         display: inline-flex;
         flex-flow: row nowrap;
         font-size: var(--font-size-small, 12px);
@@ -274,7 +275,7 @@ $root: ".widget-dropdown-filter";
         padding: var(--wdf-tag-padding);
         margin: var(--spacing-smallest, 2px);
         &:focus-visible {
-            outline: var(--brand-primary, #264ae5) auto 1px;
+            outline: var(--brand-primary, $brand-primary) auto 1px;
         }
         &:focus {
             background-color: var(--color-primary-light, $color-primary-light);
@@ -322,7 +323,7 @@ $root: ".widget-dropdown-filter";
         }
 
         &:focus-visible {
-            outline: var(--brand-primary, #264ae5) solid 1px;
+            outline: var(--brand-primary, $brand-primary) solid 1px;
             outline-offset: 2px;
         }
     }
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
index e0bb1bcadd..6be154962e 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
@@ -44,7 +44,7 @@ $root: ".widget-datagrid";
             top: 0;
             height: 100%;
             width: var(--spacing-smaller, $spacing-smaller);
-            background-color: $dragging-color-effect;
+            background-color: var(--dragging-color-effect, $dragging-color-effect);
 
             z-index: 1;
         }
@@ -371,7 +371,7 @@ $root: ".widget-datagrid";
 
     &.widget-datagrid-selection-method-click {
         .tr.tr-selected .td {
-            background-color: $grid-selected-row-background;
+            background-color: var(--grid-selected-row-background, $grid-selected-row-background);
         }
     }
 
@@ -400,7 +400,7 @@ $root: ".widget-datagrid";
 
     &-loader-container {
         align-items: center;
-        background-color: rgba(255, 255, 255, 1);
+        background-color: var(--bg-color-secondary, $bg-color-secondary);
         display: flex;
         height: 400px;
         justify-content: center;
@@ -590,7 +590,7 @@ $root: ".widget-datagrid";
 
     &:hover,
     &:focus-visible {
-        background-color: var(--brand-primary-50, #e6e7f2);
+        background-color: var(--brand-primary-50, $bg-color-secondary);
     }
 }
 
@@ -603,7 +603,7 @@ $root: ".widget-datagrid";
 
 :where(#{$root}-select-all-bar) {
     grid-column: 1 / -1;
-    background-color: #f0f1f2;
+    background-color: var(--bg-color, $bg-color);
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_date-picker.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_date-picker.scss
index 46ae0b8db4..e0f8f4a826 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_date-picker.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_date-picker.scss
@@ -1,16 +1,17 @@
 /**
     Classes for React Date-Picker font-unit and color adjustments
 */
-$dg-day-color: #555;
-$dg-day-range-color: #000;
-$dg-day-range-background: #eaeaea;
-$dg-outside-month-color: #c8c8c8;
-$dg-text-color: #fff;
-$dg-border-color: #d7d7d7;
+$dg-day-color: #555 !default;
+$dg-day-range-color: #000 !default;
+$dg-day-range-background: #eaeaea !default;
+$dg-outside-month-color: #c8c8c8 !default;
+$dg-text-color: #fff !default;
+$dg-border-color: #d7d7d7 !default;
+$datepicker-border-color: #ccc !default;
 
 .react-datepicker {
     font-size: 1em;
-    border: 1px solid $border-color-default;
+    border: 1px solid var(--border-color-default, $border-color-default);
 }
 
 .react-datepicker-wrapper {
@@ -54,7 +55,7 @@ $dg-border-color: #d7d7d7;
 
 .react-datepicker__day,
 .react-datepicker__day--in-range {
-    color: $dg-day-color;
+    color: var(--dg-day-color, $dg-day-color);
     border-radius: 50%;
 
     &:hover {
@@ -70,7 +71,7 @@ $dg-border-color: #d7d7d7;
 }
 
 .react-datepicker__day--outside-month {
-    color: $dg-outside-month-color;
+    color: var(--dg-outside-month-color, $dg-outside-month-color);
 }
 
 .react-datepicker__day--today:not(.react-datepicker__day--in-range),
@@ -108,8 +109,8 @@ $dg-border-color: #d7d7d7;
         .react-datepicker__year-text--in-range,
         .react-datepicker__day--selecting-range-start
     ) {
-    background-color: $dg-day-range-background;
-    color: $dg-day-range-color;
+    background-color: var(--dg-day-range-background, $dg-day-range-background);
+    color: var(--dg-day-range-color, $dg-day-range-color);
 
     &:hover {
         background-color: var(--brand-primary, $brand-primary);
@@ -133,13 +134,13 @@ button.react-datepicker__close-icon::after {
 }
 
 .react-datepicker__navigation--previous {
-    border-right-color: #ccc;
+    border-right-color: var(--datepicker-border-color, $datepicker-border-color);
     left: 8px;
     border: none;
 }
 
 .react-datepicker__navigation--next {
-    border-left-color: #ccc;
+    border-left-color: var(--datepicker-border-color, $datepicker-border-color);
     right: 8px;
     border: none;
 }
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss
index 304fce1540..3131562563 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss
@@ -3,9 +3,9 @@
 
    Override styles of Gallery widget
 ========================================================================== */
-$gallery-screen-lg: $screen-lg;
-$gallery-screen-md: $screen-md;
-$root: ".widget-gallery";
+$gallery-screen-lg: $screen-lg !default;
+$gallery-screen-md: $screen-md !default;
+$root: ".widget-gallery" !default;
 
 @mixin grid-items($number, $suffix) {
     @for $i from 1 through $number {
@@ -28,7 +28,7 @@ $root: ".widget-gallery";
 
     .widget-gallery-items {
         display: grid;
-        grid-gap: var(--gallery-gap);
+        grid-gap: var(--gallery-gap, $gallery-gap);
 
         /*
          Desktop widths
@@ -67,7 +67,7 @@ $root: ".widget-gallery";
 
     &:not(.widget-gallery-disable-selected-items-highlight) {
         .widget-gallery-item.widget-gallery-clickable.widget-gallery-selected {
-            background: $brand-light;
+            background: var(--brand-primary-100, $brand-light);
         }
     }
 
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
index 8756e6e96b..6eb7a58632 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
@@ -1,21 +1,27 @@
 // Atlas UI compatible variable naming for data widgets
-// Background colors
+
+// Brand colors
+$brand-primary: #264ae5 !default;
+$brand-light: #e6eaff !default;
+$grid-selected-row-background: $brand-light !default;
+$color-contrast: #000 !default;
+
+// Background
 $bg-color: #fff !default;
 $bg-color-secondary: #f5f8fd !default;
 $grid-bg-striped: #fafafb !default;
 $grid-bg-hover: #f5f6f6 !default;
 $hover-color: #f8f8f8 !default;
 $selected-color: #dadcde !default;
-
-// Brand colors
-$brand-primary: #264ae5 !default;
-$brand-light: #e6eaff !default;
-$grid-selected-row-background: $brand-light !default;
+$label-info-color: $bg-color !default;
+$color-default-light: $grid-bg-hover !default;
+$color-primary-lighter: $brand-light !default;
 
 // Text and icon colors
 $gray-dark: #606671 !default;
 $gray-darker: #3b4251 !default;
-$pagination-caption-color: #0a1325 !default;
+$caption-color: #0a1325 !default;
+$form-input-placeholder-color: #757575 !default;
 
 // Border colors
 $border-color-default: #ced0d3 !default;

From 7836b17e2c58c62579b33ce9a29b912df33f7f06 Mon Sep 17 00:00:00 2001
From: gjulivan <grandjulivan@gmail.com>
Date: Thu, 5 Mar 2026 15:07:40 +0100
Subject: [PATCH 2/3] chore: three state checkbox css variables

---
 .../datawidgets/web/_three-state-checkbox.scss   | 16 ++++++++--------
 .../themesource/datawidgets/web/variables.scss   |  7 +++++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss
index 3ca401f383..5fccb21b6b 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss
@@ -28,7 +28,7 @@ input[type="checkbox"].three-state-checkbox {
         width: 100%;
         height: 100%;
         content: "";
-        border: 1px solid #e7e7e9;
+        border: 1px solid var(--form-input-border-color, $form-input-border-color);
         border-radius: 4px;
         background-color: transparent;
     }
@@ -40,7 +40,7 @@ input[type="checkbox"].three-state-checkbox {
         margin: 5px 4px;
         transform: rotate(-45deg);
         pointer-events: none;
-        border: 2px solid #ffffff;
+        border: 2px solid var(--btn-primary-color, $btn-primary-color);
         border-top: 0;
         border-right: 0;
     }
@@ -59,13 +59,13 @@ input[type="checkbox"].three-state-checkbox {
 
     &:not(:disabled):not(:checked):hover:after {
         content: "";
-        border-color: #e7e7e9; // color of checkmark on hover
+        border-color: var(--form-input-border-color, $form-input-border-color); // color of checkmark on hover
     }
 
     &:indeterminate:before,
     &:checked:before {
-        border-color: #264ae5;
-        background-color: #264ae5;
+        border-color: var(--brand-primary, $brand-primary);
+        background-color: var(--brand-primary, $brand-primary);
     }
 
     &:indeterminate:after,
@@ -74,17 +74,17 @@ input[type="checkbox"].three-state-checkbox {
     }
 
     &:disabled:before {
-        background-color: #f8f8f8;
+        background-color: var(--gray-50, #f8f8f8);
     }
 
     &:indeterminate:disabled:before,
     &:checked:disabled:before {
         border-color: transparent;
-        background-color: rgba(#264ae5, 0.4);
+        background-color: var(--brand-primary-200, $brand-light);
     }
 
     &:disabled:after {
-        border-color: #f8f8f8;
+        border-color: var(--gray-50, #f8f8f8);
     }
 
     & + .control-label {
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
index 6eb7a58632..1a5b29f3f7 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
@@ -5,15 +5,16 @@ $brand-primary: #264ae5 !default;
 $brand-light: #e6eaff !default;
 $grid-selected-row-background: $brand-light !default;
 $color-contrast: #000 !default;
+$color-base: #fff !default;
 
 // Background
-$bg-color: #fff !default;
+$bg-color: $color-base !default;
 $bg-color-secondary: #f5f8fd !default;
 $grid-bg-striped: #fafafb !default;
 $grid-bg-hover: #f5f6f6 !default;
 $hover-color: #f8f8f8 !default;
 $selected-color: #dadcde !default;
-$label-info-color: $bg-color !default;
+$label-info-color: $color-base !default;
 $color-default-light: $grid-bg-hover !default;
 $color-primary-lighter: $brand-light !default;
 
@@ -22,6 +23,8 @@ $gray-dark: #606671 !default;
 $gray-darker: #3b4251 !default;
 $caption-color: #0a1325 !default;
 $form-input-placeholder-color: #757575 !default;
+$form-input-border-color: $brand-primary !default;
+$btn-primary-color: $color-base !default;
 
 // Border colors
 $border-color-default: #ced0d3 !default;

From 7ef75325ad39415fa045f42c955e8844e2adeee9 Mon Sep 17 00:00:00 2001
From: gjulivan <grandjulivan@gmail.com>
Date: Thu, 5 Mar 2026 15:09:24 +0100
Subject: [PATCH 3/3] chore: update changelog

---
 packages/modules/data-widgets/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/modules/data-widgets/CHANGELOG.md b/packages/modules/data-widgets/CHANGELOG.md
index d5aaffbe71..ed98dc9847 100644
--- a/packages/modules/data-widgets/CHANGELOG.md
+++ b/packages/modules/data-widgets/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We changed some stylings hardcoded values to have a better support for css variables
+
 ## [3.8.1] DataWidgets - 2026-02-19
 
 ### [3.8.1] DatagridDateFilter