feat: introduce gallery gap variable and refactor grid spacing styles

Author: yordan-st

packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss

@@ -4,10 +4,6 @@
 //== Design Properties
 //## Helper classes to change the look and feel of the component
 ========================================================================== */
-:root {
-    --gallery-gap: var(--spacing-small, $dg-spacing-small);
-}
-
 // All borders
 .widget-gallery-bordered-all {
     .widget-gallery-item {
@@ -73,34 +69,22 @@
 
 // Grid spacing none
 .widget-gallery.widget-gallery-gridgap-none {
-    .widget-gallery-items {
-        --gallery-gap: 0px;
-        gap: 0;
-    }
+    --gallery-gap: 0px;
 }
 
 // Grid spacing small
 .widget-gallery.widget-gallery-gridgap-small {
-    .widget-gallery-items {
-        --gallery-gap: var(--spacing-small, $dg-spacing-small);
-        gap: var(--spacing-small, $spacing-small);
-    }
+    --gallery-gap: var(--spacing-small, $spacing-small);
 }
 
 // Grid spacing medium
 .widget-gallery.widget-gallery-gridgap-medium {
-    .widget-gallery-items {
-        --gallery-gap: var(--spacing-medium, $dg-spacing-medium);
-        gap: var(--spacing-medium, $spacing-medium);
-    }
+    --gallery-gap: var(--spacing-medium, $spacing-medium);
 }
 
 // Grid spacing large
 .widget-gallery.widget-gallery-gridgap-large {
-    .widget-gallery-items {
-        --gallery-gap: var(--spacing-large, $dg-spacing-large);
-        gap: var(--spacing-large, $spacing-large);
-    }
+    --gallery-gap: var(--spacing-large, $spacing-large);
 }
 
 // Pagination left
@@ -122,6 +106,7 @@
 }
 
 .widget-gallery-disable-selected-items-highlight {
-    // placeholder
-    // this class in needed to disable standard styles of highlighted items
+    // This class is needed to disable standard styles of highlighted items
+    // Currently no specific styles need to be overridden
+    /* stylelint-disable-line no-empty-rules */
 }

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

@@ -23,9 +23,11 @@ $gallery-screen-md: $screen-md;
 }
 
 .widget-gallery {
+    --gallery-gap: var(--spacing-small, $gallery-gap);
+
     .widget-gallery-items {
         display: grid;
-        grid-gap: var(--spacing-small, $spacing-small);
+        grid-gap: var(--gallery-gap);
 
         /*
          Desktop widths

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

@@ -29,6 +29,9 @@ $spacing-medium: 16px !default;
 $spacing-large: 24px !default;
 $spacing-larger: 32px !default;
 
+// Gallery specific spacing
+$gallery-gap: $spacing-small !default;
+
 // Effects and animations
 $dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
 $skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;