Replace 0.x colors with rough draft of 1.0 colors

These will 100% change, but the names are at least correct, and the colors are probably ~close. Hoping to finish fine-tuning these by the end of the week.
This commit is contained in:
Adam Wathan 2019-03-09 15:05:21 -05:00
parent 310b848bbf
commit beb83de208
4 changed files with 21285 additions and 14044 deletions

View File

@ -7,6 +7,6 @@
@responsive {
.example {
@apply .font-bold;
color: theme('colors.red');
color: theme('colors.red.500');
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -3,87 +3,119 @@ module.exports = function() {
colors: {
transparent: 'transparent',
black: '#22292f',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
grey: '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
white: '#ffffff',
black: '#000',
white: '#fff',
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',
'red-dark': '#cc1f1a',
red: '#e3342f',
'red-light': '#ef5753',
'red-lighter': '#f9acaa',
'red-lightest': '#fcebea',
'orange-darkest': '#462a16',
'orange-darker': '#613b1f',
'orange-dark': '#de751f',
orange: '#f6993f',
'orange-light': '#faad63',
'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb',
'yellow-darkest': '#453411',
'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024',
yellow: '#ffed4a',
'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
green: '#38c172',
'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',
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
blue: '#3490dc',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3',
indigo: '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
'purple-darkest': '#21183c',
'purple-darker': '#382b5f',
'purple-dark': '#794acf',
purple: '#9561e2',
'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff',
'pink-darkest': '#451225',
'pink-darker': '#6f213f',
'pink-dark': '#eb5286',
pink: '#f66d9b',
'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef',
teal: {
100: '#ebfffc',
200: '#b3f1e9',
300: '#82e1d7',
400: '#60cfc5',
500: '#49bab2',
600: '#3ea39f',
700: '#378786',
800: '#316769',
900: '#265152',
},
red: {
100: '#fff5f5',
200: '#fee3e3',
300: '#febcbc',
400: '#fd9292',
500: '#f95e5f',
600: '#ec454e',
700: '#dc3448',
800: '#b4203b',
900: '#801b33',
},
orange: {
100: '#fffaef',
200: '#fee8c1',
300: '#fbd087',
400: '#f6aa4f',
500: '#ec832b',
600: '#df6d22',
700: '#c55822',
800: '#9f4423',
900: '#70311e',
},
yellow: {
100: '#ffffeb',
200: '#fefcbf',
300: '#fbf189',
400: '#f6e05e',
500: '#ebc743',
600: '#d69e2e',
700: '#b7791f',
800: '#8d5415',
900: '#66390e',
},
green: {
100: '#e9ffe9',
200: '#c1f5c5',
300: '#9ae6a8',
400: '#68d391',
500: '#48bb87',
600: '#38a181',
700: '#2f8572',
800: '#28695c',
900: '#22544b',
},
blue: {
100: '#f1fafd',
200: '#caedfa',
300: '#87d3f3',
400: '#57b9ec',
500: '#3a9adf',
600: '#2b7cc4',
700: '#2762a3',
800: '#284f81',
900: '#294468',
},
indigo: {
100: '#eef6ff',
200: '#cbe0f9',
300: '#a6c5f0',
400: '#82a2e3',
500: '#6d80d3',
600: '#5e68bc',
700: '#5154a1',
800: '#42417f',
900: '#37366a',
},
purple: {
100: '#faf5ff',
200: '#eddffd',
300: '#dcc7fb',
400: '#b18af4',
500: '#976de9',
600: '#7c54d5',
700: '#6845b9',
800: '#4d368a',
900: '#3b2c6c',
},
pink: {
100: '#fff2f4',
200: '#fedee4',
300: '#fcbccb',
400: '#f786a7',
500: '#ed588b',
600: '#d9447b',
700: '#b32f62',
800: '#8d2450',
900: '#741c46',
},
grey: {
100: '#f8fcfe',
200: '#f1f5fb',
300: '#e2e9f0',
400: '#bbc5cf',
500: '#a3b0bd',
600: '#7a8996',
700: '#5a6977',
800: '#2e3a45',
900: '#1f2830',
},
},
spacing: {
px: '1px',
@ -203,7 +235,7 @@ module.exports = function() {
'8': '8px',
},
borderColor: theme => {
return global.Object.assign({ default: theme.colors['grey-light'] }, theme.colors)
return global.Object.assign({ default: theme.colors.grey[700] }, theme.colors)
},
borderRadius: {
none: '0',