Use more CSS variables and add utils to spreadsheets

packages/client/src/components/app/spreadsheet/DateCell.svelte

@@ -48,13 +48,13 @@
 
 <style>
   .container {
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex: 1 1 auto;
-    gap: 4px;
+    gap: var(--cell-spacing);
   }
   .value {
     flex: 1 1 auto;

packages/client/src/components/app/spreadsheet/OptionsCell.svelte

@@ -1,5 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
+  import { getColor } from "./utils"
 
   export let value
   export let schema
@@ -22,12 +23,9 @@
     }
   }
 
-  const getColor = value => {
+  const getOptionColor = value => {
-    const index = options.indexOf(value)
+    const index = value ? options.indexOf(value) : null
-    if (!value || index === -1) {
+    return getColor(index)
-      return null
-    }
-    return `hsla(${((index + 1) * 222) % 360}, 90%, 75%, 0.3)`
   }
 
   const toggleOption = option => {
@@ -60,7 +58,7 @@
 >
   <div class="values">
     {#each values as val (val)}
-      {@const color = getColor(val)}
+      {@const color = getOptionColor(val)}
       {#if color}
         <div class="badge text" style="--color: {color}">
           {val}
@@ -80,7 +78,7 @@
   {#if open}
     <div class="options">
       {#each values as val (val)}
-        {@const color = getColor(val)}
+        {@const color = getOptionColor(val)}
         <div class="option" on:click={() => toggleOption(val)}>
           <div class="badge text" style="--color: {color}">
             {val}
@@ -93,7 +91,7 @@
       {/each}
       {#each unselectedOptions as option (option)}
         <div class="option" on:click={() => toggleOption(option)}>
-          <div class="badge text" style="--color: {getColor(option)}">
+          <div class="badge text" style="--color: {getOptionColor(option)}">
             {option}
           </div>
         </div>
@@ -121,9 +119,9 @@
     align-items: center;
     flex: 1 1 auto;
     width: 0;
-    gap: 4px;
+    gap: var(--cell-spacing);
     overflow: hidden;
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
   }
   .text {
     overflow: hidden;
@@ -134,9 +132,9 @@
     flex: 0 0 auto;
   }
   .badge {
-    padding: 2px 8px;
+    padding: 2px var(--cell-padding);
     background: var(--color);
-    border-radius: 8px;
+    border-radius: var(--cell-padding);
     user-select: none;
   }
   .arrow {
@@ -153,6 +151,13 @@
       var(--cell-background) 40%
     );
   }
+  :global(.cell.hovered) .arrow {
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--cell-background-hover) 40%
+    );
+  }
   .options {
     min-width: 100%;
     position: absolute;
@@ -168,19 +173,19 @@
     z-index: 1;
   }
   .option {
-    flex: 0 0 32px;
+    flex: 0 0 var(--cell-height);
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    gap: 4px;
+    gap: var(--cell-spacing);
-    background-color: var(--spectrum-global-color-gray-50);
+    background-color: var(--cell-background);
   }
   .option:first-child {
-    flex: 0 0 31px;
+    flex: 0 0 calc(var(--cell-height) - 1px);
   }
   .option:hover {
-    background-color: var(--spectrum-global-color-gray-100);
+    background-color: var(--cell-background-hover);
   }
 </style>

packages/client/src/components/app/spreadsheet/RelationshipCell.svelte

@@ -1,14 +1,7 @@
 <script>
+  import { getColor } from "./utils"
+
   export let value
-
-  $: console.log(value)
-
-  const getColor = idx => {
-    if (!value || idx === -1) {
-      return null
-    }
-    return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
-  }
 </script>
 
 <div class="container">
@@ -24,17 +17,17 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     flex: 1 1 auto;
     width: 0;
-    gap: 4px;
+    gap: var(--cell-spacing);
     overflow: hidden;
   }
   .badge {
     flex: 0 0 auto;
-    padding: 2px 8px;
+    padding: 2px var(--cell-padding);
     background: var(--color);
-    border-radius: 8px;
+    border-radius: var(--cell-padding);
     user-select: none;
   }
 </style>

packages/client/src/components/app/spreadsheet/Spreadsheet.svelte

@@ -369,6 +369,10 @@
     /* Variables */
     --cell-background: var(--spectrum-global-color-gray-50);
     --cell-background-hover: var(--spectrum-global-color-gray-100);
+    --cell-padding: 8px;
+    --cell-spacing: 4px;
+    --cell-height: 32px;
+    --cell-font-size: 14px;
   }
   .spreadsheet {
     display: grid;
@@ -407,7 +411,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: 4px;
+    gap: var(--cell-spacing);
   }
   .delete {
     display: flex;
@@ -424,7 +428,7 @@
   }
 
   .cell {
-    height: 32px;
+    height: var(--cell-height);
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     border-right: 1px solid var(--spectrum-global-color-gray-300);
     display: flex;
@@ -432,14 +436,13 @@
     justify-content: flex-start;
     align-items: center;
     color: var(--spectrum-global-color-gray-900);
-    font-size: 14px;
+    font-size: var(--cell-font-size);
-    gap: 4px;
+    gap: var(--cell-spacing);
     background: var(--cell-background);
     position: relative;
   }
   .cell.hovered {
     background: var(--cell-background-hover);
-    --cell-background: var(--cell-background-hover);
   }
   .cell.selected {
     box-shadow: inset 0 0 0 2px var(--spectrum-global-color-blue-400);
@@ -470,7 +473,7 @@
     background: var(--spectrum-global-color-gray-200);
     position: sticky;
     top: 0;
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     z-index: 3;
     border-color: var(--spectrum-global-color-gray-400);
   }

packages/client/src/components/app/spreadsheet/TextCell.svelte

@@ -22,7 +22,7 @@
 
 <style>
   .text-cell {
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -30,12 +30,12 @@
   input {
     border: none;
     padding: 0;
-    margin: 0 8px;
+    margin: 0 var(--cell-padding);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     background: none;
-    font-size: 14px;
+    font-size: var(--cell-font-size);
     font-family: var(--font-sans);
     color: inherit;
   }

packages/client/src/components/app/spreadsheet/utils.js

@@ -0,0 +1,6 @@
+export const getColor = idx => {
+  if (idx == null || idx === -1) {
+    return null
+  }
+  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
+}