chore: improve css variables mapping

Author: gjulivan

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss

@@ -1,5 +1,9 @@
 @import "date-picker";
 
+$filter-shadow-color:
+    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(--filter-shadow-color, $filter-shadow-color);
     overflow: hidden;
 
     .filter-listitem,
@@ -142,19 +144,15 @@
 :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(--filter-shadow-color, $filter-shadow-color);
     max-height: 40vh;
     z-index: 102;
 }
 
 .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(--filter-shadow-color, $filter-shadow-color);
     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(--filter-shadow-color, $filter-shadow-color);
         overflow-x: hidden;
         max-height: 40vh;
 

packages/modules/data-widgets/src/themesource/datawidgets/web/_export-alert.scss

@@ -1,5 +1,5 @@
 .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);
     display: flex;
@@ -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);
         }
     }
 }

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(--brand-default, $brand-default);
     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);

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);
     }
 }
 

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;

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(--border-default, $border-default);
         }
     }
 
@@ -105,7 +105,7 @@
             position: absolute;
             width: 10px;
             height: 0;
-            border: 1px solid #b6b8be;
+            border: var(--border-default, $border-default);
             top: 50%;
             left: -16px;
             transform: translate(0, -50%);

packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss

@@ -32,6 +32,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 +47,7 @@ $gallery-gap: $spacing-small !default;
 
 // Effects and animations
 $dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
+$shadow-color: rgba($gray-primary, 0.5) !default;
 $skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;
 
 // Assets