refactor: clean up and standardize SCSS variables

Author: yordan-st

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

@@ -1,11 +1,3 @@
-$dg-hover-color: #f8f8f8;
-$dg-background-color: #fff;
-$dg-selected-color: #dadcde;
-$dg-border-color: #ced0d3;
-$dg-spacing-small: 8px;
-$arrow: "resources/dropdown-arrow.svg";
-$dg-item-min-height: 32px;
-
 @import "date-picker";
 
 @font-face {
@@ -193,7 +185,7 @@ $dg-item-min-height: 32px;
         caret-color: transparent;
         cursor: pointer;
 
-        background-image: url($arrow);
+        background-image: url($dg-arrow);
         background-repeat: no-repeat;
         background-position: center;
         background-position-x: right;

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

@@ -2,26 +2,6 @@
 @import "export-progress";
 @import "pseudo-modal";
 
-$dg-background-color: #fff;
-$dg-icon-color: #606671;
-$dg-icon-size: 14px;
-$dg-pagination-button-color: #3b4251;
-$dg-pagination-caption-color: #0a1325;
-$dragging-color-effect: rgba(10, 19, 37, 0.8);
-$dg-dragging-effect-size: 4px;
-
-$dg-grid-bg-striped: #fafafb;
-$dg-grid-bg-hover: #f5f6f6;
-$dg-spacing-small: 8px;
-$dg-spacing-medium: 16px;
-$dg-spacing-large: 24px;
-$dg-grid-border-color: #ced0d3;
-
-$dg-brand-primary: #264ae5;
-$dg-brand-light: #e6eaff;
-$dg-grid-selected-row-background: $dg-brand-light;
-$dg-skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%);
-
 $root: ".widget-datagrid";
 
 .table {
@@ -64,7 +44,7 @@ $root: ".widget-datagrid";
             top: 0;
             height: 100%;
             width: var(--spacing-smaller, $dg-dragging-effect-size);
-            background-color: $dragging-color-effect;
+            background-color: $dg-dragging-color-effect;
 
             z-index: 1;
         }

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

@@ -1,4 +1,5 @@
 @import "../../../theme/web/custom-variables";
+@import "variables";
 @import "datagrid";
 @import "datagrid-filters";
 @import "datagrid-dropdown-filter";

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

@@ -0,0 +1,61 @@
+// Atlas UI compatible variable naming for data widgets
+// Background colors
+$dg-background-color: #fff !default;
+$dg-grid-bg-striped: #fafafb !default;
+$dg-grid-bg-hover: #f5f6f6 !default;
+$dg-hover-color: #f8f8f8 !default;
+$dg-selected-color: #dadcde !default;
+
+// Brand colors
+$dg-brand-primary: #264ae5 !default;
+$dg-brand-light: #e6eaff !default;
+$dg-grid-selected-row-background: $dg-brand-light !default;
+
+// Text and icon colors
+$dg-icon-color: #606671 !default;
+$dg-pagination-button-color: #3b4251 !default;
+$dg-pagination-caption-color: #0a1325 !default;
+
+// Border colors
+$dg-border-color: #ced0d3 !default;
+$dg-grid-border-color: #ced0d3 !default;
+
+// Sizing and spacing
+$dg-icon-size: 14px !default;
+$dg-spacing-small: 8px !default;
+$dg-spacing-medium: 16px !default;
+$dg-spacing-large: 24px !default;
+$dg-item-min-height: 32px !default;
+
+// Effects and animations
+$dg-dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
+$dg-dragging-effect-size: 4px !default;
+$dg-skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;
+
+// Assets
+$dg-arrow: "resources/dropdown-arrow.svg" !default;
+
+:root {
+    --dg-background-color: #{$dg-background-color};
+    --dg-icon-color: #{$dg-icon-color};
+    --dg-icon-size: #{$dg-icon-size};
+    --dg-pagination-button-color: #{$dg-pagination-button-color};
+    --dg-pagination-caption-color: #{$dg-pagination-caption-color};
+    --dg-dragging-color-effect: #{$dg-dragging-color-effect};
+    --dg-dragging-effect-size: #{$dg-dragging-effect-size};
+    --dg-grid-bg-striped: #{$dg-grid-bg-striped};
+    --dg-grid-bg-hover: #{$dg-grid-bg-hover};
+    --dg-spacing-small: #{$dg-spacing-small};
+    --dg-spacing-medium: #{$dg-spacing-medium};
+    --dg-spacing-large: #{$dg-spacing-large};
+    --dg-grid-border-color: #{$dg-grid-border-color};
+    --dg-brand-primary: #{$dg-brand-primary};
+    --dg-brand-light: #{$dg-brand-light};
+    --dg-grid-selected-row-background: #{$dg-grid-selected-row-background};
+    --dg-skeleton-background: #{$dg-skeleton-background};
+    --dg-hover-color: #{$dg-hover-color};
+    --dg-selected-color: #{$dg-selected-color};
+    --dg-border-color: #{$dg-border-color};
+    --dg-item-min-height: #{$dg-item-min-height};
+    --dg-arrow: #{$dg-arrow};
+}