Adds elevations to floating container, adjusts canvas color on light mode

components/shared.tsx

@@ -464,6 +464,23 @@ export const FloatingContainer = styled('div', {
   position: 'relative',
   userSelect: 'none',
   zIndex: 200,
+
+  variants: {
+    elevation: {
+      0: {
+        boxShadow: 'none',
+      },
+      2: {
+        boxShadow: '$2',
+      },
+      3: {
+        boxShadow: '$3',
+      },
+      4: {
+        boxShadow: '$4',
+      },
+    },
+  },
 })
 
 /* -------------------------------------------------- */

styles/stitches.config.ts

@@ -16,7 +16,7 @@ const { styled, global, css, theme, getCssString } = createCss({
       highlight: 'rgba(65, 132, 244, 0.15)',
       overlay: 'rgba(0, 0, 0, 0.15)',
       border: '#aaa',
-      canvas: '#fafafa',
+      canvas: '#f8f9fa',
       panel: '#fefefe',
       inactive: '#cccccf',
       hover: '#efefef',