fix: better css variable naming

Author: r0b1n

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

@@ -537,17 +537,17 @@ $root: ".widget-datagrid";
 
 .infinite-loading {
     .widget-datagrid-grid-head {
-        width: calc(var(--mx-grid-width) - var(--mx-grid-scrollbar-size));
+        width: calc(var(--widgets-grid-width) - var(--widgets-grid-scrollbar-size));
         overflow-x: hidden;
     }
     .widget-datagrid-grid-head[data-scrolled-y="true"] {
         box-shadow: 0 5px 5px -5px gray;
     }
 
     .widget-datagrid-grid-body {
-        width: var(--mx-grid-width);
+        width: var(--widgets-grid-width);
         overflow-y: auto;
-        max-height: var(--mx-grid-body-height);
+        max-height: var(--widgets-grid-body-height);
     }
 
     .widget-datagrid-grid-head[data-scrolled-x="true"]:after {
@@ -564,22 +564,22 @@ $root: ".widget-datagrid";
 .widget-datagrid-grid-head {
     display: grid;
 
-    // this head is not part of the grid, so it has dedicated column template  --mx-grid-template-columns-head
-    // but it might not be available at the initial render, so we use template from the grid --mx-grid-template-columns
+    // this head is not part of the grid, so it has dedicated column template  --widgets-grid-template-columns-head
+    // but it might not be available at the initial render, so we use template from the grid --widgets-grid-template-columns
     // using template from the grid might to misalignment from the grid itself,
     // but in practice:
     //   - grid has no data at that moment, so misalignment is not visible.
-    //   - as soon as the grid itself gets rendered --mx-grid-template-columns-head gets calculated
+    //   - as soon as the grid itself gets rendered --widgets-grid-template-columns-head gets calculated
     //     and everything looks like it should.
-    grid-template-columns: var(--mx-grid-template-columns-head, var(--mx-grid-template-columns));
+    grid-template-columns: var(--widgets-grid-template-columns-head, var(--widgets-grid-template-columns));
 }
 .widget-datagrid-grid-body {
     // this element has to position their children (columns or headers)
     // as grid and have those aligned with the parent grid
     display: grid;
     // this property makes sure we align our own grid columns
     // to the columns defined in the global grid
-    grid-template-columns: var(--mx-grid-template-columns);
+    grid-template-columns: var(--widgets-grid-template-columns);
 }
 
 .grid-mock-header {

packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Grid.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`Grid renders without crashing 1`] = `
   <div
     class="widget-datagrid-grid table"
     role="grid"
-    style="--mx-grid-template-columns: 1fr 1fr 54px;"
+    style="--widgets-grid-template-columns: 1fr 1fr 54px;"
   >
     Test
   </div>
@@ -17,7 +17,7 @@ exports[`Grid renders without selector column 1`] = `
   <div
     class="widget-datagrid-grid table"
     role="grid"
-    style="--mx-grid-template-columns: 1fr 1fr;"
+    style="--widgets-grid-template-columns: 1fr 1fr;"
   >
     Test
   </div>

packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts

@@ -16,14 +16,14 @@ export function gridStyleAtom(
     return computed(
         () =>
             ({
-                "--mx-grid-template-columns": templateColumns(columns.visibleColumns, {
+                "--widgets-grid-template-columns": templateColumns(columns.visibleColumns, {
                     checkboxColumn: config.checkboxColumnEnabled,
                     selectorColumn: config.selectorColumnEnabled
                 }),
-                "--mx-grid-template-columns-head": gridSizeStore.templateColumnsHead,
-                "--mx-grid-body-height": asPx(gridSizeStore.gridBodyHeight),
-                "--mx-grid-width": asPx(gridSizeStore.gridWidth),
-                "--mx-grid-scrollbar-size": asPx(gridSizeStore.scrollBarSize)
+                "--widgets-grid-template-columns-head": gridSizeStore.templateColumnsHead,
+                "--widgets-grid-body-height": asPx(gridSizeStore.gridBodyHeight),
+                "--widgets-grid-width": asPx(gridSizeStore.gridWidth),
+                "--widgets-grid-scrollbar-size": asPx(gridSizeStore.scrollBarSize)
             }) as CSSProperties
     );
 }