Cleans up borders, canvas color

components/canvas/canvas.tsx

@@ -76,6 +76,7 @@ const MainSVG = styled('svg', {
   height: '100%',
   touchAction: 'none',
   zIndex: 100,
+  backgroundColor: '$canvas',
 
   '& *': {
     userSelect: 'none',

components/panel.tsx

@@ -5,18 +5,19 @@ export const Root = styled('div', {
   backgroundColor: '$panel',
   borderRadius: '4px',
   overflow: 'hidden',
-  border: '1px solid $border',
   pointerEvents: 'all',
   userSelect: 'none',
   zIndex: 200,
-  boxShadow: '0px 2px 25px rgba(0,0,0,.16)',
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
 
   variants: {
     isOpen: {
       true: {},
       false: {
-        height: 34,
-        width: 34,
+        padding: 2,
+        height: 38,
+        width: 38,
       },
     },
   },
@@ -42,7 +43,7 @@ export const Header = styled('div', {
   width: '100%',
   alignItems: 'center',
   justifyContent: 'space-between',
-  borderBottom: '1px solid $border',
+  padding: 2,
   position: 'relative',
 
   '& h3': {
@@ -91,5 +92,4 @@ export const Footer = styled('div', {
   padding: '0 12px',
   display: 'flex',
   alignItems: 'center',
-  borderTop: '1px solid $border',
 })

components/style-panel/style-panel.tsx

@@ -212,13 +212,16 @@ const StylePanelRoot = styled(Panel.Root, {
   maxWidth: 184,
   overflow: 'hidden',
   position: 'relative',
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
 
   variants: {
     isOpen: {
       true: {},
       false: {
-        height: 34,
-        width: 34,
+        padding: 2,
+        height: 38,
+        width: 38,
       },
     },
   },

components/tools-panel/tools-panel.tsx

@@ -170,12 +170,13 @@ const Container = styled('div', {
   backgroundColor: '$panel',
   borderRadius: '4px',
   overflow: 'hidden',
-  border: '1px solid $border',
+  border: '1px solid $panel',
   pointerEvents: 'all',
   userSelect: 'none',
   height: '100%',
   display: 'flex',
   padding: 4,
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
 
   '& svg': {
     strokeWidth: 0,

components/tools-panel/undo-redo.tsx

@@ -31,11 +31,11 @@ const Container = styled('div', {
   borderRadius: '4px',
   overflow: 'hidden',
   alignSelf: 'flex-end',
-  border: '1px solid $border',
   pointerEvents: 'all',
   userSelect: 'none',
   zIndex: 200,
-  boxShadow: '0px 2px 12px rgba(0,0,0,.08)',
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
   display: 'flex',
   padding: 4,
 

components/tools-panel/zoom.tsx

@@ -39,11 +39,11 @@ const Container = styled('div', {
   borderRadius: '4px',
   overflow: 'hidden',
   alignSelf: 'flex-end',
-  border: '1px solid $border',
   pointerEvents: 'all',
   userSelect: 'none',
   zIndex: 200,
-  boxShadow: '0px 2px 12px rgba(0,0,0,.08)',
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
   display: 'flex',
   padding: 4,
 

styles/stitches.config.ts

@@ -13,6 +13,7 @@ const { styled, global, css, theme, getCssString } = createCss({
       bounds: 'rgba(65, 132, 244, 1.000)',
       boundsBg: 'rgba(65, 132, 244, 0.100)',
       border: '#aaa',
+      canvas: '#fafafa',
       panel: '#fefefe',
       inactive: '#cccccf',
       hover: '#efefef',