Respect users chosen accent colour in grids

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

@@ -132,7 +132,7 @@
     --cell-color: var(--user-color);
   }
   .cell.focused {
-    --cell-color: var(--spectrum-global-color-blue-400);
+    --cell-color: var(--accent-color);
   }
   .cell.error {
     --cell-color: var(--spectrum-global-color-red-500);

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

@@ -132,10 +132,7 @@
             {option}
           </div>
           {#if values.includes(option)}
-            <Icon
-              name="Checkmark"
-              color="var(--spectrum-global-color-blue-400)"
-            />
+            <Icon name="Checkmark" color="var(--accent-color)" />
           {/if}
         </div>
       {/each}

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

@@ -323,11 +323,7 @@
                 </span>
               </div>
               {#if isRowSelected(row)}
-                <Icon
-                  size="S"
-                  name="Checkmark"
-                  color="var(--spectrum-global-color-blue-400)"
-                />
+                <Icon size="S" name="Checkmark" color="var(--accent-color)" />
               {/if}
             </div>
           {/each}

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

@@ -190,6 +190,7 @@
   /* Core grid */
   .grid {
     /* Variables */
+    --accent-color: var(--primaryColor, var(--spectrum-global-color-blue-400));
     --grid-background: var(--spectrum-global-color-gray-50);
     --grid-background-alt: var(--spectrum-global-color-gray-100);
     --cell-background: var(--grid-background);

packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte

@@ -57,7 +57,7 @@
     position: absolute;
     top: 0;
     width: 2px;
-    background: var(--spectrum-global-color-blue-400);
+    background: var(--accent-color);
     margin-left: -2px;
   }
 </style>

packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte

@@ -65,6 +65,6 @@
     margin-left: -1px;
     width: 2px;
     height: 100%;
-    background: var(--spectrum-global-color-blue-400);
+    background: var(--accent-color);
   }
 </style>