Standardise usage of CSS variables to work inside client and builder

packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte

@@ -138,7 +138,7 @@
     top: 100%;
     left: 0;
     width: 320px;
-    background: var(--background);
+    background: var(--grid-background-alt);
     border: var(--cell-border);
     padding: var(--cell-padding);
     box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -218,7 +218,7 @@
   .header-cell :global(.cell) {
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
   }
 
   .name {

packages/frontend-core/src/components/grid/cells/OptionsCell.svelte

@@ -240,7 +240,7 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--cell-spacing);
-    background-color: var(--background);
+    background-color: var(--grid-background-alt);
   }
   .option:hover,
   .option.focused {

packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte

@@ -453,7 +453,7 @@
       var(--max-cell-render-height) + var(--row-height) -
         var(--max-relationship-height)
     );
-    background: var(--background);
+    background: var(--grid-background-alt);
     border: var(--cell-border);
     box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
     display: flex;

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -168,6 +168,18 @@
 
 <style>
   .grid {
+    /* Variables */
+    --grid-background: var(--spectrum-global-color-gray-50);
+    --grid-background-alt: var(--spectrum-global-color-gray-100);
+    --cell-background: var(--grid-background);
+    --cell-background-hover: var(--grid-background-alt);
+    --cell-background-alt: var(--cell-background);
+    --cell-padding: 8px;
+    --cell-spacing: 4px;
+    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
+    --cell-font-size: 14px;
+    --controls-height: 50px;
+
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -175,17 +187,7 @@
     align-items: stretch;
     position: relative;
     overflow: hidden;
-    background: var(--cell-background);
-
-    /* Variables */
-    --cell-background: var(--spectrum-global-color-gray-50);
-    --cell-background-hover: var(--spectrum-global-color-gray-100);
-    --cell-background-alt: var(--cell-background);
-    --cell-padding: 8px;
-    --cell-spacing: 4px;
-    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
-    --cell-font-size: 14px;
-    --controls-height: 50px;
+    background: var(--grid-background);
   }
   .grid,
   .grid :global(*) {
@@ -234,7 +236,7 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
     z-index: 2;
   }
   .controls-left,
@@ -270,7 +272,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
     opacity: 0.6;
   }
 </style>

packages/frontend-core/src/components/grid/layout/HeaderRow.svelte

@@ -42,7 +42,7 @@
 
 <style>
   .header {
-    background: var(--background);
+    background: var(--grid-background-alt);
     border-bottom: var(--cell-border);
     position: relative;
     height: var(--default-row-height);
@@ -60,7 +60,7 @@
     border-left: var(--cell-border);
     border-right: var(--cell-border);
     border-bottom: var(--cell-border);
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
     z-index: 1;
   }
   .add:hover {

packages/frontend-core/src/components/grid/layout/StickyColumn.svelte

@@ -159,7 +159,7 @@
     z-index: 1;
   }
   .header :global(.cell) {
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
   }
   .row {
     display: flex;