diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss
index e0b3e6f91e..c685215f4d 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss
@@ -1,5 +1,9 @@
 @import "date-picker";
 
+$filter-box-shadow:
+    0 2px 20px 1px rgba(5, 15, 129, 0.05),
+    0 2px 16px 0 rgba(33, 43, 54, 0.08) !default;
+
 @font-face {
     font-family: "datagrid-filters";
     src: url("./fonts/datagrid-filters.eot");
@@ -70,9 +74,7 @@
     z-index: 51;
     border-radius: 8px;
     list-style-type: none;
-    box-shadow:
-        0 2px 20px 1px rgba(5, 15, 129, 0.05),
-        0 2px 16px 0 rgba(33, 43, 54, 0.08);
+    box-shadow: var(--wdf-filter-box-shadow, $filter-box-shadow);
     overflow: hidden;
 
     .filter-listitem,
@@ -142,9 +144,7 @@
 :not(.dropdown-content) > .dropdown-list {
     background: var(--bg-color-secondary, $bg-color-secondary);
     border-radius: 8px;
-    box-shadow:
-        0 2px 20px 1px rgba(5, 15, 129, 0.05),
-        0 2px 16px 0 rgba(33, 43, 54, 0.08);
+    box-shadow: var(--wdf-filter-box-shadow, $filter-box-shadow);
     max-height: 40vh;
     z-index: 102;
 }
@@ -152,9 +152,7 @@
 .dropdown-content {
     background: var(--bg-color-secondary, $bg-color-secondary);
     border-radius: 8px;
-    box-shadow:
-        0 2px 20px 1px rgba(5, 15, 129, 0.05),
-        0 2px 16px 0 rgba(33, 43, 54, 0.08);
+    box-shadow: var(--wdf-filter-box-shadow, $filter-box-shadow);
     max-height: 40vh;
     z-index: 140;
 }
@@ -205,9 +203,7 @@
         z-index: 102;
         border-radius: 8px;
         list-style-type: none;
-        box-shadow:
-            0 2px 20px 1px rgba(5, 15, 129, 0.05),
-            0 2px 16px 0 rgba(33, 43, 54, 0.08);
+        box-shadow: var(--wdf-filter-box-shadow, $filter-box-shadow);
         overflow-x: hidden;
         max-height: 40vh;
 
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_export-alert.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_export-alert.scss
index 42883df20c..1e7c0bfded 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_export-alert.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_export-alert.scss
@@ -1,7 +1,7 @@
 .widget-datagrid-export-alert {
-    background-color: rgba(255, 255, 255, 1);
+    background-color: var(--bg-color-secondary, $bg-color-secondary);
     border-radius: 4px;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--export-alert-box-shadow, $export-alert-box-shadow);
     display: flex;
     flex-direction: column;
     padding: 54px;
@@ -26,7 +26,7 @@
     }
 
     &-message {
-        color: rgba(38, 74, 229, 1);
+        color: var(--brand-primary, $brand-primary);
         font-size: 18px;
         font-weight: 700;
         display: flex;
@@ -37,7 +37,7 @@
 
     &-failed {
         .widget-datagrid-export-progress-indicator {
-            background-color: rgba(227, 63, 78, 1);
+            background-color: var(--brand-danger, $brand-danger);
         }
     }
 }
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_export-progress.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_export-progress.scss
index cb54a0b0d3..9c4c53325a 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_export-progress.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_export-progress.scss
@@ -1,6 +1,6 @@
 .widget-datagrid-export-progress {
     align-items: center;
-    background-color: rgba(240, 241, 242, 1);
+    background-color: var(--color-default-lighter, $color-default-lighter);
     border-radius: 4px;
     display: flex;
     height: 18px;
@@ -10,7 +10,7 @@
     width: 100%;
 
     &-indicator {
-        background-color: rgba(38, 74, 229, 1);
+        background-color: var(--brand-primary, $brand-primary);
         border-radius: 4px;
         height: 17px;
         transition: transform 100ms cubic-bezier(0.65, 0, 0.35, 1);
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss
index 26fe35a669..9d2c521412 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss
@@ -63,7 +63,7 @@
         background-color: var(--grid-bg-striped, $grid-bg-striped);
     }
     .widget-gallery-item:nth-child(even) {
-        background-color: #fff;
+        background-color: var(--bg-color-secondary, $bg-color-secondary);
     }
 }
 
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_pseudo-modal.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_pseudo-modal.scss
index 54c9190886..138e4d140e 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_pseudo-modal.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_pseudo-modal.scss
@@ -1,7 +1,7 @@
 .widget-datagrid-modal {
     &-overlay {
         animation: fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
-        background-color: rgba(128, 128, 128, 0.5);
+        background-color: var(--shadow-color, $shadow-color);
         position: absolute;
         top: 0;
         right: 0;
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_tree-node.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_tree-node.scss
index fad607654e..2f39093748 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_tree-node.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_tree-node.scss
@@ -93,7 +93,7 @@
             position: absolute;
             top: 0;
             left: 7px;
-            border: 1px solid #b6b8be;
+            border: var(--widget-tree-node-border, $border-default);
         }
     }
 
@@ -105,7 +105,7 @@
             position: absolute;
             width: 10px;
             height: 0;
-            border: 1px solid #b6b8be;
+            border: var(--widget-tree-node-border, $border-default);
             top: 50%;
             left: -16px;
             transform: translate(0, -50%);
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 cc64802653..920034d0eb 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss
@@ -2,6 +2,7 @@
 
 // Brand colors
 $brand-primary: #264ae5 !default;
+$brand-danger: #e33f4e !default;
 $brand-light: #e6eaff !default;
 $grid-selected-row-background: $brand-light !default;
 $color-contrast: #000 !default;
@@ -32,6 +33,7 @@ $btn-primary-color: $color-base !default;
 // Border colors
 $border-color-default: #ced0d3 !default;
 $grid-border-color: #ced0d3 !default;
+$border-default: 1px solid $border-color-default !default;
 
 // Sizing and spacing
 $btn-font-size: 14px !default;
@@ -46,6 +48,8 @@ $gallery-gap: $spacing-small !default;
 
 // Effects and animations
 $dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
+$shadow-color: rgba($gray-primary, 0.66) !default;
+$export-alert-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !default;
 $skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;
 
 // Assets