Update table border colour to work better with coloured cells

packages/bbui/src/bbui.css

@@ -119,6 +119,7 @@ a {
   --spectrum-global-color-blue-100: #002651;
   --spectrum-global-color-indigo-100: #1a1d61;
   --spectrum-global-color-magenta-100: #530329;
+  --translucent-grey: rgba(255, 255, 255, 0.1);
 }
 .spectrum--dark {
   --drop-shadow: rgba(0, 0, 0, 0.3);
@@ -130,6 +131,7 @@ a {
   --spectrum-global-color-blue-100: #003877;
   --spectrum-global-color-indigo-100: #282c8c;
   --spectrum-global-color-magenta-100: #76003a;
+  --translucent-grey: rgba(255, 255, 255, 0.065);
 }
 .spectrum--light,
 .spectrum--lightest {
@@ -142,4 +144,5 @@ a {
   --spectrum-global-color-blue-100: #e0f2ff;
   --spectrum-global-color-indigo-100: #edeeff;
   --spectrum-global-color-magenta-100: #ffeaf1;
+  --translucent-grey: rgba(0, 0, 0, 0.085);
 }

packages/client/src/components/app/GridBlock.svelte

@@ -194,7 +194,7 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    border: 1px solid var(--spectrum-global-color-gray-300);
+    border: 1px solid var(--translucent-grey);
     border-radius: 4px;
     overflow: hidden;
     height: 410px;

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

@@ -50,7 +50,7 @@
   on:mouseup
   on:click
   on:contextmenu
-  on:touchstart
+  on:touchstart|passive
   on:touchend
   on:touchcancel
   on:mouseenter

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

@@ -232,7 +232,7 @@
     --cell-background-alt: var(--cell-background);
     --cell-padding: 8px;
     --cell-spacing: 4px;
-    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
+    --cell-border: 1px solid var(--grid-border-color, var(--translucent-grey));
     --cell-font-size: 14px;
     --cell-font-color: var(--spectrum-global-color-gray-800);
     flex: 1 1 auto;
@@ -290,7 +290,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
+    border-bottom: var(--cell-border);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
     background: var(--grid-background-alt);

packages/frontend-core/src/themes/midnight.css

@@ -17,4 +17,5 @@
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.25) !important;
   --spectrum-global-color-blue-100: hsl(var(--hue), 48%, 24%) !important;
+  --translucent-grey: rgba(255, 255, 255, 0.075) !important;
 }

packages/frontend-core/src/themes/nord.css

@@ -50,4 +50,5 @@
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.15) !important;
   --spectrum-global-color-blue-100: hsl(213, 36%, 30%) !important;
+  --translucent-grey: hsla(213, 36%, 80%, 0.11) !important;
 }