Skip to content
Permalink
Browse files

fix(ui): lighten shadows in light theme

fix #2680
  • Loading branch information...
mrfelton committed Aug 5, 2019
1 parent 029bcdc commit 90fcc84bf10611bfdab8c29b4354b5ff072bd03a
@@ -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 = {
@@ -1,4 +1,4 @@
import createThemeVariant from '../util'
import colors from './colors'

export default createThemeVariant('dark', colors)
export default createThemeVariant('dark', { colors })
@@ -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
@@ -0,0 +1,3 @@
export default {
m: '0 2px 12px 0 rgba(0, 0, 0, 0.2)',
}
@@ -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
@@ -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;

0 comments on commit 90fcc84

Please sign in to comment.
You can’t perform that action at this time.