Tom Kirkpatrick
6 years ago
4 changed files with 186 additions and 0 deletions
@ -0,0 +1,60 @@ |
|||||
|
export const space = [0, 4, 8, 16, 32, 64, 128, 256] |
||||
|
|
||||
|
export const palette = { |
||||
|
white: '#ffffff', |
||||
|
black: '#000', |
||||
|
gray: '#959595', |
||||
|
lightningOrange: '#fd9800', |
||||
|
lightningBrown: '#4a2c00', |
||||
|
deepseaBlue: '#242633', |
||||
|
seaBlue: '#313340', |
||||
|
underwaterBlue: '#353745', |
||||
|
superGreen: '#39e673', |
||||
|
pineGreen: '#0d331a', |
||||
|
superRed: '#e63939', |
||||
|
mudBrown: '#330d0d' |
||||
|
} |
||||
|
|
||||
|
export const fontSizes = { |
||||
|
xxs: '8px', |
||||
|
xs: '10px', |
||||
|
s: '11px', |
||||
|
m: '13px', |
||||
|
l: '15px', |
||||
|
xl: '18px', |
||||
|
xxl: '30px', |
||||
|
xxxl: '60px' |
||||
|
} |
||||
|
fontSizes[0] = fontSizes['xxs'] |
||||
|
fontSizes[1] = fontSizes['xs'] |
||||
|
fontSizes[2] = fontSizes['s'] |
||||
|
fontSizes[3] = fontSizes['m'] |
||||
|
fontSizes[4] = fontSizes['l'] |
||||
|
fontSizes[5] = fontSizes['xl'] |
||||
|
fontSizes[6] = fontSizes['xxl'] |
||||
|
fontSizes[7] = fontSizes['xxxl'] |
||||
|
|
||||
|
export const fontWeights = { |
||||
|
normal: 400, |
||||
|
bold: 600 |
||||
|
} |
||||
|
|
||||
|
export const fonts = { |
||||
|
0: '"Roboto Light", Roboto, system-ui, sans-serif', |
||||
|
sans: '"Roboto Light", Roboto, system-ui, sans-serif', |
||||
|
mono: '"SF Mono", "Roboto Mono", Menlo, monospace' |
||||
|
} |
||||
|
|
||||
|
export const letterSpacings = { |
||||
|
normal: 'normal', |
||||
|
caps: '0.025em' |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
space, |
||||
|
fontSizes, |
||||
|
fontWeights, |
||||
|
fonts, |
||||
|
letterSpacings, |
||||
|
palette |
||||
|
} |
@ -0,0 +1,55 @@ |
|||||
|
import base, { palette } from './base' |
||||
|
|
||||
|
const colors = { |
||||
|
...palette, |
||||
|
invisibleGray: '#555', |
||||
|
darkestBackground: '#242633', |
||||
|
lightBackground: '#313340', |
||||
|
lightestBackground: '#373947', |
||||
|
highlight: '#353745', |
||||
|
primaryText: '#fff', |
||||
|
gradient: 'linear-gradient(270deg, #868b9f 0%, #333c5e 100%)' |
||||
|
} |
||||
|
|
||||
|
const buttons = { |
||||
|
normal: { |
||||
|
backgroundColor: colors.lightBackground, |
||||
|
color: colors.lightningOrange, |
||||
|
'&:hover:enabled': { |
||||
|
backgroundColor: colors.highlight |
||||
|
} |
||||
|
}, |
||||
|
primary: { |
||||
|
backgroundColor: colors.lightningOrange, |
||||
|
color: colors.white |
||||
|
}, |
||||
|
secondary: { |
||||
|
backgroundColor: 'transparent', |
||||
|
color: colors.white, |
||||
|
'&:hover:enabled': { |
||||
|
color: colors.lightningOrange |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
const cards = { |
||||
|
success: { |
||||
|
backgroundColor: colors.pineGreen, |
||||
|
color: colors.superGreen |
||||
|
}, |
||||
|
warning: { |
||||
|
backgroundColor: colors.lightningBrown, |
||||
|
color: colors.lightningOrange |
||||
|
}, |
||||
|
error: { |
||||
|
backgroundColor: colors.mudBrown, |
||||
|
color: colors.superRed |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: 'dark', |
||||
|
...base, |
||||
|
colors, |
||||
|
buttons, |
||||
|
cards |
||||
|
} |
@ -0,0 +1,4 @@ |
|||||
|
import dark from './dark' |
||||
|
import light from './light' |
||||
|
|
||||
|
export { dark, light } |
@ -0,0 +1,67 @@ |
|||||
|
import base, { palette } from './base' |
||||
|
|
||||
|
const colors = { |
||||
|
...palette, |
||||
|
invisibleGray: '#555', |
||||
|
darkestBackground: '#fff', |
||||
|
lightBackground: '#ebebeb', |
||||
|
lightestBackground: '#f3f3f3', |
||||
|
highlight: '#f6f6f6', |
||||
|
primaryText: '#000', |
||||
|
gradient: 'linear-gradient(270deg, #fd9800 0%, #ffbd59 100%)' |
||||
|
} |
||||
|
|
||||
|
const buttons = { |
||||
|
normal: { |
||||
|
backgroundColor: colors.lightBackground, |
||||
|
color: colors.lightningOrange, |
||||
|
'&:hover:enabled': { |
||||
|
backgroundColor: colors.highlight |
||||
|
} |
||||
|
}, |
||||
|
primary: { |
||||
|
backgroundColor: colors.lightningOrange, |
||||
|
color: colors.white |
||||
|
}, |
||||
|
secondary: { |
||||
|
backgroundColor: 'transparent', |
||||
|
color: colors.lightningOrange, |
||||
|
'&:hover:enabled': { |
||||
|
color: colors.black |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
const cards = { |
||||
|
success: { |
||||
|
backgroundColor: colors.pineGreen, |
||||
|
color: colors.superGreen |
||||
|
}, |
||||
|
warning: { |
||||
|
backgroundColor: colors.lightningBrown, |
||||
|
color: colors.lightningOrange |
||||
|
}, |
||||
|
error: { |
||||
|
backgroundColor: colors.mudBrown, |
||||
|
color: colors.superRed |
||||
|
} |
||||
|
} |
||||
|
const messages = { |
||||
|
success: { |
||||
|
color: colors.superGreen |
||||
|
}, |
||||
|
warning: { |
||||
|
color: colors.lightningOrange |
||||
|
}, |
||||
|
error: { |
||||
|
color: colors.superRed |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: 'light', |
||||
|
...base, |
||||
|
colors, |
||||
|
buttons, |
||||
|
cards, |
||||
|
messages |
||||
|
} |
Loading…
Reference in new issue