fix(ui): lighten shadows in light theme

fix #2680

renderer/themes/base.js

@@ -1,10 +1,10 @@
 export const space = [0, 4, 8, 16, 32, 45, 72, 108]
 
 export const shadows = {
-  xs: '0 2px 4px 0 rgba(0, 0, 0, 0.5)',
-  s: ' 0 3px 4px 0 rgba(0, 0, 0, 0.3)',
+  xs: '0 2px 3px 0 rgba(0, 0, 0, 0.3)',
+  s: '0 2px 4px 0 rgba(0, 0, 0, 0.4)',
   m: '0 2px 24px 0 rgba(0, 0, 0, 0.5)',
-  l: '0 20px 70px rgba(0, 0, 0, 0.55)',
+  l: '0 20px 70px 0 rgba(0, 0, 0, 0.6)',
 }
 
 export const palette = {

renderer/themes/dark/index.js

@@ -1,4 +1,4 @@
 import createThemeVariant from '../util'
 import colors from './colors'
 
-export default createThemeVariant('dark', colors)
+export default createThemeVariant('dark', { colors })

renderer/themes/light/index.js

@@ -1,4 +1,7 @@
 import createThemeVariant from '../util'
 import colors from './colors'
+import shadows from './shadows'
 
-export default createThemeVariant('light', colors)
+const theme = createThemeVariant('light', { colors, shadows })
+
+export default theme

renderer/themes/light/shadows.js

@@ -0,0 +1,3 @@
+export default {
+  m: '0 2px 12px 0 rgba(0, 0, 0, 0.2)',
+}

renderer/themes/util.js

@@ -1,7 +1,10 @@
 import { tint } from 'polished'
+import merge from 'lodash/merge'
 import base from './base'
 
-const createThemeVariant = (name, colors) => {
+const createThemeVariant = (name, overrides = {}) => {
+  const { colors, ...rest } = overrides
+
   const buttons = {
     normal: {
       backgroundColor: colors.tertiaryColor,
@@ -82,14 +85,16 @@ const createThemeVariant = (name, colors) => {
     },
   }
 
-  return {
+  const theme = {
     name,
     ...base,
     colors,
     buttons,
     cards,
     messages,
   }
+
+  return merge({}, theme, rest)
 }
 
 export default createThemeVariant

stories/_general/color.stories.js

@@ -11,9 +11,8 @@ const Swatch = ({ name, color }) => (
   <Element>
     <Flex mb={2}>
       <Card
-        // bg={color}
         borderRadius={8}
-        boxShadow="0 2px 6px rgba(0, 0, 0, 0.3)"
+        boxShadow="s"
         css={`
           background: ${color};
           height: 50px;