tailwindcss/src/defaultConfig.js
2017-08-27 18:02:41 -04:00

176 lines
3.9 KiB
JavaScript

export default {
breakpoints: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
colors: {
black: '#000000',
grey900: '#212b35',
grey800: '#404e5c',
grey700: '#647382',
grey600: '#919eab',
grey500: '#c5ced6',
grey400: '#dfe3e8',
grey300: '#f0f2f5',
grey200: '#f7f9fa',
white: '#ffffff',
redDark: '#d43633',
red: '#f25451',
redLight: '#fa8785',
redLightest: '#fff1f0',
orangeDark: '#f29500',
orange: '#ffb82b',
orangeLight: '#ffd685',
orangeLightest: '#fff8eb',
yellowDark: '#ffc400',
yellow: '#ffe14a',
yellowLight: '#ffea83',
yellowLightest: '#fffbe5',
greenDark: '#34ae4c',
green: '#57d06f',
greenLight: '#b1f3be',
greenLightest: '#eefff1',
tealDark: '#249e9a',
teal: '#4dc0b5',
tealLight: '#9eebe4',
tealLightest: '#eefffd',
blueDark: '#3687c8',
blue: '#4aa2ea',
blueLight: '#acdaff',
blueLightest: '#f1f9ff',
indigoDark: '#4957a5',
indigo: '#6574cd',
indigoLight: '#bcc5fb',
indigoLightest: '#f4f5ff',
purpleDark: '#714cb4',
purple: '#976ae6',
purpleLight: '#ceb3ff',
purpleLightest: '#f7f3ff',
pinkDark: '#d84f7d',
pink: '#f66d9b',
pinkLight: '#ffa5c3',
pinkLightest: '#fdf2f5',
},
backgroundColors: [
{
light: 'white',
lightSoft: 'grey-200',
lightSofter: 'grey-300',
lightSoftest: 'grey-400',
dark: 'grey-900',
darkSoft: 'grey-800',
darkSofter: 'grey-700',
darkSoftest: 'grey-600',
},
'red-dark',
'red',
'red-light',
'red-lightest',
'orange-dark',
'orange',
'orange-light',
'orange-lightest',
'yellow-dark',
'yellow',
'yellow-light',
'yellow-lightest',
'green-dark',
'green',
'green-light',
'green-lightest',
'teal-dark',
'teal',
'teal-light',
'teal-lightest',
'blue-dark',
'blue',
'blue-light',
'blue-lightest',
'indigo-dark',
'indigo',
'indigo-light',
'indigo-lightest',
'purple-dark',
'purple',
'purple-light',
'purple-lightest',
'pink-dark',
'pink',
'pink-light',
'pink-lightest',
],
borders: {
defaults: {
width: '1px',
color: 'grey-500',
},
widths: {
0: '0',
2: '2px',
4: '4px',
8: '8px',
},
colors: [
{
light: 'white',
lightSoft: 'grey-200',
lightSofter: 'grey-300',
dark: 'grey-600',
darkSoft: 'grey-500',
darkSofter: 'grey-400',
lightOverlay: 'hsla(0, 0%, 0%, 20%)',
lightOverlaySoft: 'hsla(0, 0%, 0%, 10%)',
lightOverlaySofter: 'hsla(0, 0%, 0%, 5%)',
darkOverlay: 'hsla(0, 0%, 100%, 100%)',
darkOverlaySoft: 'hsla(0, 0%, 100%, 60%)',
darkOverlaySofter: 'hsla(0, 0%, 100%, 35%)',
},
'red-dark',
'red',
'red-light',
'red-lightest',
'orange-dark',
'orange',
'orange-light',
'orange-lightest',
'yellow-dark',
'yellow',
'yellow-light',
'yellow-lightest',
'green-dark',
'green',
'green-light',
'green-lightest',
'teal-dark',
'teal',
'teal-light',
'teal-lightest',
'blue-dark',
'blue',
'blue-light',
'blue-lightest',
'indigo-dark',
'indigo',
'indigo-light',
'indigo-lightest',
'purple-dark',
'purple',
'purple-light',
'purple-lightest',
'pink-dark',
'pink',
'pink-light',
'pink-lightest',
]
},
shadows: {
1: '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)',
2: '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)',
3: '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
4: '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
5: '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
},
}