Dark theme
This commit is contained in:
Danny Coates
parent
ea1ea2aa68
commit
c71c246959
37 changed files with 363 additions and 215 deletions
|
|
@ -1,89 +1,103 @@
|
|||
const colors = {
|
||||
transparent: 'transparent',
|
||||
|
||||
black: '#22292f',
|
||||
'grey-darkest': '#4a4a4f',
|
||||
'grey-darker': '#606f7b',
|
||||
'grey-dark': '#8795a1',
|
||||
grey: '#B1B1B3',
|
||||
'grey-light': '#dae1e7',
|
||||
black: '#000000',
|
||||
'grey-90': '#0c0c0d',
|
||||
'grey-80': '#2a2a2e',
|
||||
'grey-70': '#38383d',
|
||||
'grey-60': '#4a4a4f',
|
||||
'grey-50': '#737373',
|
||||
grey: '#b1b1b3',
|
||||
'grey-40': '#b1b1b3',
|
||||
'grey-30': '#d7d7db',
|
||||
'grey-banner': '#f0f0f4',
|
||||
'grey-transparent': 'hsla(250, 13%, 9%, .2)',
|
||||
'grey-lighter': '#f1f5f8',
|
||||
'grey-lightest': '#F9F9FA',
|
||||
'grey-20': '#ededf0',
|
||||
'grey-10': '#f9f9fa',
|
||||
white: '#ffffff',
|
||||
|
||||
'red-darkest': '#3b0d0c',
|
||||
'red-darker': '#621b18',
|
||||
'red-dark': '#cc1f1a',
|
||||
red: '#e3342f',
|
||||
'red-light': '#ef5753',
|
||||
'red-lighter': '#f9acaa',
|
||||
'red-lightest': '#fcebea',
|
||||
'red-90': '#3e0200',
|
||||
'red-80': '#5a0002',
|
||||
'red-70': '#a4000f',
|
||||
'red-60': '#d70022',
|
||||
red: '#d70022',
|
||||
'red-50': '#ff0039',
|
||||
// unspec
|
||||
'red-40': '#ff3363',
|
||||
'red-30': '#ff99aa',
|
||||
|
||||
'orange-darkest': '#462a16',
|
||||
'orange-darker': '#613b1f',
|
||||
'orange-dark': '#de751f',
|
||||
orange: '#f6993f',
|
||||
'orange-light': '#faad63',
|
||||
'orange-lighter': '#fcd9b6',
|
||||
'orange-lightest': '#fff5eb',
|
||||
'orange-90': '#3e1300',
|
||||
'orange-80': '#712b00',
|
||||
'orange-70': '#a44900',
|
||||
'orange-60': '#d76e00',
|
||||
'orange-50': '#ff9400',
|
||||
// unspec
|
||||
'orange-40': '#ffb24c',
|
||||
'orange-30': '#ffd399',
|
||||
|
||||
'yellow-darkest': '#453411',
|
||||
'yellow-darker': '#684f1d',
|
||||
'yellow-dark': '#f2d024',
|
||||
yellow: '#ffed4a',
|
||||
'yellow-light': '#fff382',
|
||||
'yellow-lighter': '#fff9c2',
|
||||
'yellow-lightest': '#fcfbeb',
|
||||
'yellow-90': '#3e2800',
|
||||
'yellow-80': '#715100',
|
||||
'yellow-70': '#a47f00',
|
||||
'yellow-60': '#d7b600',
|
||||
yellow: '#d7b600',
|
||||
'yellow-50': '#ffe900',
|
||||
'yellow-40': '#ffed4c',
|
||||
'yellow-30': '#fff599',
|
||||
|
||||
'green-darkest': '#003706',
|
||||
'green-darker': '#006504',
|
||||
'green-dark': '#058b00',
|
||||
green: '#12bc00',
|
||||
'green-light': '#51d88a',
|
||||
'green-lighter': '#a2f5bf',
|
||||
'green-lightest': '#e3fcec',
|
||||
// 'green-darkest': '#003706',
|
||||
// 'green-darker': '#006504',
|
||||
// 'green-dark': '#058b00',
|
||||
// green: '#12bc00',
|
||||
// 'green-light': '#51d88a',
|
||||
// 'green-lighter': '#a2f5bf',
|
||||
// 'green-lightest': '#e3fcec',
|
||||
|
||||
'teal-darkest': '#0d3331',
|
||||
'teal-darker': '#20504f',
|
||||
'teal-dark': '#38a89d',
|
||||
teal: '#4dc0b5',
|
||||
'teal-light': '#64d5ca',
|
||||
'teal-lighter': '#a0f0ed',
|
||||
'teal-lightest': '#e8fffe',
|
||||
// 'teal-darkest': '#0d3331',
|
||||
// 'teal-darker': '#20504f',
|
||||
// 'teal-dark': '#38a89d',
|
||||
// teal: '#4dc0b5',
|
||||
// 'teal-light': '#64d5ca',
|
||||
// 'teal-lighter': '#a0f0ed',
|
||||
// 'teal-lightest': '#e8fffe',
|
||||
|
||||
'blue-darkest': '#002275',
|
||||
'blue-darker': '#003eaa',
|
||||
'blue-dark': '#0060df',
|
||||
'blue-90': '#000f40',
|
||||
'blue-80': '#002275',
|
||||
'blue-70': '#003eaa',
|
||||
'blue-60': '#0060df',
|
||||
'blue-50': '#0a84ff',
|
||||
blue: '#0a84ff',
|
||||
'blue-light': '#6cb2eb',
|
||||
'blue-lighter': '#bcdefa',
|
||||
'blue-lightest': '#eff8ff',
|
||||
'blue-40': '#45a1ff',
|
||||
'blue-30': '#99ccff',
|
||||
'blue-20': '#cce6ff',
|
||||
|
||||
'indigo-darkest': '#191e38',
|
||||
'indigo-darker': '#2f365f',
|
||||
'indigo-dark': '#5661b3',
|
||||
indigo: '#6574cd',
|
||||
'indigo-light': '#7886d7',
|
||||
'indigo-lighter': '#b2b7ff',
|
||||
'indigo-lightest': '#e6e8ff',
|
||||
'ink-90': '#0f1126',
|
||||
'ink-80': '#202340',
|
||||
'ink-70': '#363959',
|
||||
|
||||
'purple-darkest': '#21183c',
|
||||
'purple-darker': '#382b5f',
|
||||
'purple-dark': '#794acf',
|
||||
purple: '#9561e2',
|
||||
'purple-light': '#a779e9',
|
||||
'purple-lighter': '#d6bbfc',
|
||||
'purple-lightest': '#f3ebff',
|
||||
// 'indigo-darkest': '#191e38',
|
||||
// 'indigo-darker': '#2f365f',
|
||||
// 'indigo-dark': '#5661b3',
|
||||
// indigo: '#6574cd',
|
||||
// 'indigo-light': '#7886d7',
|
||||
// 'indigo-lighter': '#b2b7ff',
|
||||
// 'indigo-lightest': '#e6e8ff',
|
||||
|
||||
'pink-darkest': '#451225',
|
||||
'pink-darker': '#6f213f',
|
||||
'pink-dark': '#eb5286',
|
||||
pink: '#f66d9b',
|
||||
'pink-light': '#fa7ea8',
|
||||
'pink-lighter': '#ffbbca',
|
||||
'pink-lightest': '#ffebef',
|
||||
'purple-90': '#25003e',
|
||||
'purple-80': '#440071',
|
||||
'purple-70': '#6200a4',
|
||||
'purple-60': '#8000d7',
|
||||
'purple-50': '#9400ff',
|
||||
'purple-40': '#ad3bff',
|
||||
'purple-30': '#c069ff',
|
||||
'purple-20': '#d7a3ff',
|
||||
|
||||
// 'pink-darkest': '#451225',
|
||||
// 'pink-darker': '#6f213f',
|
||||
// 'pink-dark': '#eb5286',
|
||||
// pink: '#f66d9b',
|
||||
// 'pink-light': '#fa7ea8',
|
||||
// 'pink-lighter': '#ffbbca',
|
||||
// 'pink-lightest': '#ffebef',
|
||||
cloud: 'rgba(255, 255, 255, 0.8)',
|
||||
violet: 'hsl(258, 57%, 35%)'
|
||||
};
|
||||
|
|
@ -95,7 +109,8 @@ module.exports = {
|
|||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px'
|
||||
xl: '1200px',
|
||||
dark: { raw: '(prefers-color-scheme: dark)' }
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
|
|
@ -181,10 +196,7 @@ module.exports = {
|
|||
'4': '4px',
|
||||
'8': '8px'
|
||||
},
|
||||
borderColor: global.Object.assign(
|
||||
{ default: colors['grey-light'] },
|
||||
colors
|
||||
),
|
||||
borderColor: global.Object.assign({ default: colors['grey-30'] }, colors),
|
||||
borderRadius: {
|
||||
none: '0',
|
||||
sm: '.125rem',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue