diff --git a/src/defaultConfig.js b/src/defaultConfig.js index cc93e6846..f2f4b2e85 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -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: { diff --git a/src/generators/borderWidths.js b/src/generators/borderWidths.js index 0b21e5d43..71f63329e 100644 --- a/src/generators/borderWidths.js +++ b/src/generators/borderWidths.js @@ -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), diff --git a/src/util/findColor.js b/src/util/findColor.js deleted file mode 100644 index 1e58f847c..000000000 --- a/src/util/findColor.js +++ /dev/null @@ -1,5 +0,0 @@ -import _ from 'lodash' - -export default function findColor(colors, color) { - return _.get(colors, color, color) -} diff --git a/src/util/mergeConfig.js b/src/util/mergeConfig.js index e5edc9960..24db80900 100644 --- a/src/util/mergeConfig.js +++ b/src/util/mergeConfig.js @@ -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', {})) } diff --git a/src/util/normalizeColorList.js b/src/util/normalizeColorList.js deleted file mode 100644 index bd17c743a..000000000 --- a/src/util/normalizeColorList.js +++ /dev/null @@ -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) - }) -}