Add custom colors for drop shadows and blue-100 to all themes, fix sticky column shadow

packages/bbui/src/bbui.css

@@ -97,4 +97,22 @@
 
 a {
   text-decoration: none;
-}
+}
+
+/* Custom theme additions */
+.spectrum--darkest {
+  --drop-shadow: rgba(0, 0, 0, 0.6);
+  --spectrum-global-color-blue-100: rgb(28, 33, 43);
+}
+.spectrum--dark {
+  --drop-shadow: rgba(0, 0, 0, 0.3);
+  --spectrum-global-color-blue-100: rgb(42, 47, 57);
+}
+.spectrum--light {
+  --drop-shadow: rgba(0, 0, 0, 0.075);
+  --spectrum-global-color-blue-100: rgb(240, 245, 255);
+}
+.spectrum--lightest {
+  --drop-shadow: rgba(0, 0, 0, 0.05);
+  --spectrum-global-color-blue-100: rgb(240, 244, 255);
+}

packages/frontend-core/src/components/sheet/cells/SheetCell.svelte

@@ -110,13 +110,13 @@
   .cell:hover {
     cursor: default;
   }
-  .cell.row-selected,
+  .cell.row-hovered,
   .cell.row-focused {
-    --cell-background: var(--spectrum-global-color-gray-75);
-  }
-  .cell.row-hovered {
     --cell-background: var(--cell-background-hover);
   }
+  .cell.row-selected {
+    --cell-background: var(--spectrum-global-color-blue-100);
+  }
   .cell.center {
     justify-content: center;
   }

packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte

@@ -87,7 +87,7 @@
         <div
           class="sticky-column"
           style="flex: 0 0 {width}px"
-          class:scrolled={scrollLeft > 0}
+          class:scrolled={$scrollLeft > 0}
         >
           <SheetCell width={gutterWidth} {rowHovered} {rowFocused}>
             <div class="gutter">

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

@@ -57,7 +57,7 @@
 <div
   class="sticky-column"
   style="flex: 0 0 {width}px"
-  class:scrolled={scrollLeft > 0}
+  class:scrolled={$scrollLeft > 0}
 >
   <div class="header row">
     <SheetCell width={gutterWidth}>
@@ -159,23 +159,31 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    border-right: var(--cell-border);
     z-index: 2;
   }
 
-  /*Add shadow when scrolled */
-  .sticky-column.scrolled:after {
+  /* Add right border */
+  .sticky-column:before {
+    position: absolute;
     content: "";
-    width: 10px;
+    width: 0;
+    height: 100%;
+    left: calc(100% - 1px);
+    top: 0;
+    border-left: var(--cell-border);
+  }
+
+  /* Add shadow when scrolled */
+  .sticky-column.scrolled:after {
+    position: absolute;
+    content: "";
+    width: 16px;
     height: 100%;
-    background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
     left: 100%;
     top: 0;
-    position: absolute;
-    /*z-index: 1;*/
-  }
-  .sticky-column.scrolled {
-    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+    opacity: 1;
+    background: linear-gradient(to right, var(--drop-shadow), transparent);
+    z-index: -1;
   }
 
   /* Don't show borders between cells in the sticky column */

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

@@ -12,7 +12,7 @@
     scrollLeft,
   } = getContext("sheet")
 
-  $: cutoff = scrollLeft + gutterWidth + ($columns[0]?.width || 0)
+  $: cutoff = $scrollLeft + gutterWidth + ($columns[0]?.width || 0)
   $: offset = gutterWidth + ($stickyColumn?.width || 0)
   $: activeColumn = $resize.column
 

packages/frontend-core/src/components/sheet/stores/scroll.js

@@ -29,17 +29,17 @@ export const deriveStores = context => {
     focusedRow,
     focusedCellId,
     gutterWidth,
+    scrollTop,
+    scrollLeft,
+    width,
+    height,
   } = context
   const padding = 264
 
   // Memoize store primitives
-  const scrollTop = derived(scroll, $scroll => $scroll.top, 0)
-  const scrollLeft = derived(scroll, $scroll => $scroll.left, 0)
   const stickyColumnWidth = derived(stickyColumn, $col => $col?.width || 0, 0)
 
   // Derive vertical limits
-  const height = derived(bounds, $bounds => $bounds.height, 0)
-  const width = derived(bounds, $bounds => $bounds.width, 0)
   const contentHeight = derived(
     [rows, rowHeight],
     ([$rows, $rowHeight]) => $rows.length * $rowHeight + padding,

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

@@ -13,6 +13,9 @@
     --spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 85%);
     --spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%);
 
+    /* Custom additions */
     --modal-background: var(--spectrum-global-color-gray-50);
+    --drop-shadow: rgba(0, 0, 0, 0.25) !important;
+    --spectrum-global-color-blue-100: rgba(35, 40, 50) !important;
 }
 

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

@@ -46,5 +46,8 @@
   --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
   --spectrum-alias-background-color-hover-overlay: rgba(169, 177, 193, 0.1);
 
+  /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
+  --drop-shadow: rgba(0, 0, 0, 0.15) !important;
+  --spectrum-global-color-blue-100: rgb(56, 65, 84) !important;
 }