wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Remove magic color matching from config

Browse source 
Make the config just a dumb object instead of doing magic color string
matching. Let people do that sort of thing in their config JS file;
they have the full power of JS there to do whatever they want with
variables and stuff.
This commit is contained in:
Adam Wathan 2017-10-10 21:24:35 -04:00
parent a4ac5c704f
commit 57cb4159a4
5 changed files with 195 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

390
src/defaultConfig.js
View file

@ -1,58 +1,60 @@
const colors = {
'black': '#000000',
'grey-900': '#212b35',
'grey-800': '#404e5c',
'grey-700': '#647382',
'grey-600': '#919eab',
'grey-500': '#c5ced6',
'grey-400': '#dfe3e8',
'grey-300': '#f0f2f5',
'grey-200': '#f7f9fa',
'white': '#ffffff',
'red-dark': '#d43633',
'red': '#f25451',
'red-light': '#fa8785',
'red-lightest': '#fff1f0',
'orange-dark': '#f29500',
'orange': '#ffb82b',
'orange-light': '#ffd685',
'orange-lightest': '#fff8eb',
'yellow-dark': '#ffc400',
'yellow': '#ffe14a',
'yellow-light': '#ffea83',
'yellow-lightest': '#fffbe5',
'green-dark': '#34ae4c',
'green': '#57d06f',
'green-light': '#b1f3be',
'green-lightest': '#eefff1',
'teal-dark': '#249e9a',
'teal': '#4dc0b5',
'teal-light': '#9eebe4',
'teal-lightest': '#eefffd',
'blue-dark': '#3687c8',
'blue': '#4aa2ea',
'blue-light': '#acdaff',
'blue-lightest': '#f1f9ff',
'indigo-dark': '#4957a5',
'indigo': '#6574cd',
'indigo-light': '#bcc5fb',
'indigo-lightest': '#f4f5ff',
'purple-dark': '#714cb4',
'purple': '#976ae6',
'purple-light': '#ceb3ff',
'purple-lightest': '#f7f3ff',
'pink-dark': '#d84f7d',
'pink': '#f66d9b',
'pink-light': '#ffa5c3',
'pink-lightest': '#fdf2f5',
}
export default {
colors,
breakpoints: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
colors: {
'black': '#000000',
'grey-900': '#212b35',
'grey-800': '#404e5c',
'grey-700': '#647382',
'grey-600': '#919eab',
'grey-500': '#c5ced6',
'grey-400': '#dfe3e8',
'grey-300': '#f0f2f5',
'grey-200': '#f7f9fa',
'white': '#ffffff',
'red-dark': '#d43633',
'red': '#f25451',
'red-light': '#fa8785',
'red-lightest': '#fff1f0',
'orange-dark': '#f29500',
'orange': '#ffb82b',
'orange-light': '#ffd685',
'orange-lightest': '#fff8eb',
'yellow-dark': '#ffc400',
'yellow': '#ffe14a',
'yellow-light': '#ffea83',
'yellow-lightest': '#fffbe5',
'green-dark': '#34ae4c',
'green': '#57d06f',
'green-light': '#b1f3be',
'green-lightest': '#eefff1',
'teal-dark': '#249e9a',
'teal': '#4dc0b5',
'teal-light': '#9eebe4',
'teal-lightest': '#eefffd',
'blue-dark': '#3687c8',
'blue': '#4aa2ea',
'blue-light': '#acdaff',
'blue-lightest': '#f1f9ff',
'indigo-dark': '#4957a5',
'indigo': '#6574cd',
'indigo-light': '#bcc5fb',
'indigo-lightest': '#f4f5ff',
'purple-dark': '#714cb4',
'purple': '#976ae6',
'purple-light': '#ceb3ff',
'purple-lightest': '#f7f3ff',
'pink-dark': '#d84f7d',
'pink': '#f66d9b',
'pink-light': '#ffa5c3',
'pink-lightest': '#fdf2f5',
},
text: {
fonts: {
'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
@ -88,109 +90,105 @@ export default {
'normal': '0',
'wide': '0.1em',
},
colors: [
{
'light': 'white',
'light-soft': 'rgba(255,255,255,.6)',
'light-softer': 'rgba(255,255,255,.45)',
'light-softest': 'rgba(255,255,255,.35)',
'dark': 'grey-900',
'dark-soft': 'grey-700',
'dark-softer': 'grey-600',
'dark-softest': 'grey-500',
},
'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',
]
colors: {
'light': colors['white'],
'light-soft': 'rgba(255,255,255,.6)',
'light-softer': 'rgba(255,255,255,.45)',
'light-softest': 'rgba(255,255,255,.35)',
'dark': colors['grey-900'],
'dark-soft': colors['grey-700'],
'dark-softer': colors['grey-600'],
'dark-softest': colors['grey-500'],
'red-dark': colors['red-dark'],
'red': colors['red'],
'red-light': colors['red-light'],
'red-lightest': colors['red-lightest'],
'orange-dark': colors['orange-dark'],
'orange': colors['orange'],
'orange-light': colors['orange-light'],
'orange-lightest': colors['orange-lightest'],
'yellow-dark': colors['yellow-dark'],
'yellow': colors['yellow'],
'yellow-light': colors['yellow-light'],
'yellow-lightest': colors['yellow-lightest'],
'green-dark': colors['green-dark'],
'green': colors['green'],
'green-light': colors['green-light'],
'green-lightest': colors['green-lightest'],
'teal-dark': colors['teal-dark'],
'teal': colors['teal'],
'teal-light': colors['teal-light'],
'teal-lightest': colors['teal-lightest'],
'blue-dark': colors['blue-dark'],
'blue': colors['blue'],
'blue-light': colors['blue-light'],
'blue-lightest': colors['blue-lightest'],
'indigo-dark': colors['indigo-dark'],
'indigo': colors['indigo'],
'indigo-light': colors['indigo-light'],
'indigo-lightest': colors['indigo-lightest'],
'purple-dark': colors['purple-dark'],
'purple': colors['purple'],
'purple-light': colors['purple-light'],
'purple-lightest': colors['purple-lightest'],
'pink-dark': colors['pink-dark'],
'pink': colors['pink'],
'pink-light': colors['pink-light'],
'pink-lightest': colors['pink-lightest'],
},
},
backgrounds: {
colors: [
{
'light': 'white',
'light-soft': 'grey-200',
'light-softer': 'grey-300',
'light-softest': 'grey-400',
'dark': 'grey-900',
'dark-soft': 'grey-800',
'dark-softer': 'grey-700',
'dark-softest': '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',
]
colors: {
'light': colors['white'],
'light-soft': colors['grey-200'],
'light-softer': colors['grey-300'],
'light-softest': colors['grey-400'],
'dark': colors['grey-900'],
'dark-soft': colors['grey-800'],
'dark-softer': colors['grey-700'],
'dark-softest': colors['grey-600'],
'red-dark': colors['red-dark'],
'red': colors['red'],
'red-light': colors['red-light'],
'red-lightest': colors['red-lightest'],
'orange-dark': colors['orange-dark'],
'orange': colors['orange'],
'orange-light': colors['orange-light'],
'orange-lightest': colors['orange-lightest'],
'yellow-dark': colors['yellow-dark'],
'yellow': colors['yellow'],
'yellow-light': colors['yellow-light'],
'yellow-lightest': colors['yellow-lightest'],
'green-dark': colors['green-dark'],
'green': colors['green'],
'green-light': colors['green-light'],
'green-lightest': colors['green-lightest'],
'teal-dark': colors['teal-dark'],
'teal': colors['teal'],
'teal-light': colors['teal-light'],
'teal-lightest': colors['teal-lightest'],
'blue-dark': colors['blue-dark'],
'blue': colors['blue'],
'blue-light': colors['blue-light'],
'blue-lightest': colors['blue-lightest'],
'indigo-dark': colors['indigo-dark'],
'indigo': colors['indigo'],
'indigo-light': colors['indigo-light'],
'indigo-lightest': colors['indigo-lightest'],
'purple-dark': colors['purple-dark'],
'purple': colors['purple'],
'purple-light': colors['purple-light'],
'purple-lightest': colors['purple-lightest'],
'pink-dark': colors['pink-dark'],
'pink': colors['pink'],
'pink-light': colors['pink-light'],
'pink-lightest': colors['pink-lightest'],
}
},
borders: {
defaults: {
width: '1px',
color: 'grey-500',
color: colors['grey-500'],
},
widths: {
'0': '0',
@ -206,58 +204,56 @@ export default {
pill: '9999px',
}
},
colors: [
{
'light': 'white',
'light-soft': 'grey-200',
'light-softer': 'grey-300',
'dark': 'grey-600',
'dark-soft': 'grey-500',
'dark-softer': 'grey-400',
'light-overlay': 'hsla(0,0%,0%,.2)',
'light-overlay-soft': 'hsla(0,0%,0%,.1)',
'light-overlay-softer': 'hsla(0,0%,0%,.05)',
'dark-overlay': 'hsla(0,0%,100%,1)',
'dark-overlay-soft': 'hsla(0,0%,100%,.6)',
'dark-overlay-softer': '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',
]
colors: {
'light-overlay': 'hsla(0,0%,0%,.2)',
'light-overlay-soft': 'hsla(0,0%,0%,.1)',
'light-overlay-softer': 'hsla(0,0%,0%,.05)',
'dark-overlay': 'hsla(0,0%,100%,1)',
'dark-overlay-soft': 'hsla(0,0%,100%,.6)',
'dark-overlay-softer': 'hsla(0,0%,100%,.35)',
'light': colors['white'],
'light-soft': colors['grey-200'],
'light-softer': colors['grey-300'],
'dark': colors['grey-600'],
'dark-soft': colors['grey-500'],
'dark-softer': colors['grey-400'],
'red-dark': colors['red-dark'],
'red': colors['red'],
'red-light': colors['red-light'],
'red-lightest': colors['red-lightest'],
'orange-dark': colors['orange-dark'],
'orange': colors['orange'],
'orange-light': colors['orange-light'],
'orange-lightest': colors['orange-lightest'],
'yellow-dark': colors['yellow-dark'],
'yellow': colors['yellow'],
'yellow-light': colors['yellow-light'],
'yellow-lightest': colors['yellow-lightest'],
'green-dark': colors['green-dark'],
'green': colors['green'],
'green-light': colors['green-light'],
'green-lightest': colors['green-lightest'],
'teal-dark': colors['teal-dark'],
'teal': colors['teal'],
'teal-light': colors['teal-light'],
'teal-lightest': colors['teal-lightest'],
'blue-dark': colors['blue-dark'],
'blue': colors['blue'],
'blue-light': colors['blue-light'],
'blue-lightest': colors['blue-lightest'],
'indigo-dark': colors['indigo-dark'],
'indigo': colors['indigo'],
'indigo-light': colors['indigo-light'],
'indigo-lightest': colors['indigo-lightest'],
'purple-dark': colors['purple-dark'],
'purple': colors['purple'],
'purple-light': colors['purple-light'],
'purple-lightest': colors['purple-lightest'],
'pink-dark': colors['pink-dark'],
'pink': colors['pink'],
'pink-light': colors['pink-light'],
'pink-lightest': colors['pink-lightest'],
}
},
sizing: {
width: {

3
src/generators/borderWidths.js
View file

@ -1,7 +1,6 @@
import _ from 'lodash'
import defineClass from '../util/defineClass'
import defineClasses from '../util/defineClasses'
import findColor from '../util/findColor'
function defaultBorder(width, color) {
return defineClasses({
@ -44,7 +43,7 @@ function sizedBorder(size, width, color) {
}
module.exports = function({colors, borders}) {
const color = findColor(colors, borders.defaults.color)
const color = borders.defaults.color
return _.flatten([
defaultBorder(borders.defaults.width, color),

5
src/util/findColor.js
View file

@ -1,5 +0,0 @@
import _ from 'lodash'
export default function findColor(colors, color) {
return _.get(colors, color, color)
}

16
src/util/mergeConfig.js
View file

@ -1,6 +1,4 @@
import _ from 'lodash'
import normalizeColorList from './normalizeColorList'
import findColor from './findColor'
const configTemplate = {
breakpoints: null,
@ -65,19 +63,7 @@ function appendConfig(base, appends) {
})
}
function normalizeConfigColors(config, colorPalette) {
const cloned = _.cloneDeep(config)
cloned.text.colors = normalizeColorList(cloned.text.colors, colorPalette)
cloned.borders.defaults.color = findColor(colorPalette, cloned.borders.defaults.color)
cloned.borders.colors = normalizeColorList(cloned.borders.colors, colorPalette)
cloned.backgrounds.colors = normalizeColorList(cloned.backgrounds.colors, colorPalette)
return cloned
}
export default function mergeConfig(base, other) {
const replaced = replaceDefaults(configTemplate, base, other)
const config = appendConfig(replaced, _.get(other, 'extend', {}))
return normalizeConfigColors(config, config.colors)
return appendConfig(replaced, _.get(other, 'extend', {}))
}

18
src/util/normalizeColorList.js
View file

@ -1,18 +0,0 @@
import _ from 'lodash'
import defineClass from './defineClass'
import findColor from './findColor'
export default function (colors, colorPool) {
if (_.isArray(colors)) {
colors = _(colors).flatMap(color => {
if (_.isString(color)) {
return [[color, color]]
}
return _.toPairs(color)
}).fromPairs().value()
}
return _.mapValues(colors, (color) => {
return findColor(colorPool, color)
})
}