diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index 6bc408b05..4aadd34e2 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -1441,23 +1441,23 @@ button, } .border-0 { - border: 0 solid #c5ced6; + border: 0; } .border-t-0 { - border-top: 0 solid #c5ced6; + border-top: 0; } .border-r-0 { - border-right: 0 solid #c5ced6; + border-right: 0; } .border-b-0 { - border-bottom: 0 solid #c5ced6; + border-bottom: 0; } .border-l-0 { - border-left: 0 solid #c5ced6; + border-left: 0; } .border-2 { @@ -3004,26 +3004,18 @@ button, margin: -1px; } -.shadow-1 { +.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15); } -.shadow-2 { +.shadow-md { box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13); } -.shadow-3 { +.shadow-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13); } -.shadow-4 { - box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11); -} - -.shadow-5 { - box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11); -} - .shadow-inner { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } @@ -4163,23 +4155,23 @@ button, } .sm\:border-0 { - border: 0 solid #c5ced6; + border: 0; } .sm\:border-t-0 { - border-top: 0 solid #c5ced6; + border-top: 0; } .sm\:border-r-0 { - border-right: 0 solid #c5ced6; + border-right: 0; } .sm\:border-b-0 { - border-bottom: 0 solid #c5ced6; + border-bottom: 0; } .sm\:border-l-0 { - border-left: 0 solid #c5ced6; + border-left: 0; } .sm\:border-2 { @@ -5726,26 +5718,18 @@ button, margin: -1px; } - .sm\:shadow-1 { + .sm\:shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15); } - .sm\:shadow-2 { + .sm\:shadow-md { box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13); } - .sm\:shadow-3 { + .sm\:shadow-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13); } - .sm\:shadow-4 { - box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11); - } - - .sm\:shadow-5 { - box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11); - } - .sm\:shadow-inner { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } @@ -6886,23 +6870,23 @@ button, } .md\:border-0 { - border: 0 solid #c5ced6; + border: 0; } .md\:border-t-0 { - border-top: 0 solid #c5ced6; + border-top: 0; } .md\:border-r-0 { - border-right: 0 solid #c5ced6; + border-right: 0; } .md\:border-b-0 { - border-bottom: 0 solid #c5ced6; + border-bottom: 0; } .md\:border-l-0 { - border-left: 0 solid #c5ced6; + border-left: 0; } .md\:border-2 { @@ -8449,26 +8433,18 @@ button, margin: -1px; } - .md\:shadow-1 { + .md\:shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15); } - .md\:shadow-2 { + .md\:shadow-md { box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13); } - .md\:shadow-3 { + .md\:shadow-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13); } - .md\:shadow-4 { - box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11); - } - - .md\:shadow-5 { - box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11); - } - .md\:shadow-inner { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } @@ -9609,23 +9585,23 @@ button, } .lg\:border-0 { - border: 0 solid #c5ced6; + border: 0; } .lg\:border-t-0 { - border-top: 0 solid #c5ced6; + border-top: 0; } .lg\:border-r-0 { - border-right: 0 solid #c5ced6; + border-right: 0; } .lg\:border-b-0 { - border-bottom: 0 solid #c5ced6; + border-bottom: 0; } .lg\:border-l-0 { - border-left: 0 solid #c5ced6; + border-left: 0; } .lg\:border-2 { @@ -11172,26 +11148,18 @@ button, margin: -1px; } - .lg\:shadow-1 { + .lg\:shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15); } - .lg\:shadow-2 { + .lg\:shadow-md { box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13); } - .lg\:shadow-3 { + .lg\:shadow-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13); } - .lg\:shadow-4 { - box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11); - } - - .lg\:shadow-5 { - box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11); - } - .lg\:shadow-inner { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } @@ -12332,23 +12300,23 @@ button, } .xl\:border-0 { - border: 0 solid #c5ced6; + border: 0; } .xl\:border-t-0 { - border-top: 0 solid #c5ced6; + border-top: 0; } .xl\:border-r-0 { - border-right: 0 solid #c5ced6; + border-right: 0; } .xl\:border-b-0 { - border-bottom: 0 solid #c5ced6; + border-bottom: 0; } .xl\:border-l-0 { - border-left: 0 solid #c5ced6; + border-left: 0; } .xl\:border-2 { @@ -13895,26 +13863,18 @@ button, margin: -1px; } - .xl\:shadow-1 { + .xl\:shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15); } - .xl\:shadow-2 { + .xl\:shadow-md { box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13); } - .xl\:shadow-3 { + .xl\:shadow-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13); } - .xl\:shadow-4 { - box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11); - } - - .xl\:shadow-5 { - box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11); - } - .xl\:shadow-inner { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } diff --git a/src/defaultConfig.js b/src/defaultConfig.js index b0935b3c7..980349153 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -120,30 +120,26 @@ module.exports = { backgrounds: { colors: { ...colors - } + }, }, borders: { - defaults: { - width: '1px', - color: colors['slate-lighter'], - }, widths: { + default: '1px', '0': '0', '2': '2px', '4': '4px', '8': '8px', }, - rounded: { - default: '.25rem', - modifiers: { - sm: '.125rem', - lg: '.5rem', - pill: '9999px', - } - }, colors: { + default: colors['slate-lighter'], ...colors - } + }, + }, + radiuses: { + default: '.25rem', + sm: '.125rem', + lg: '.5rem', + pill: '9999px', }, sizing: { width: { @@ -254,11 +250,9 @@ module.exports = { }, }, shadows: { - '1': '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', - '2': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', - '3': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)', - '4': '0 14px 28px rgba(0,0,0,.16), 0 10px 10px rgba(0,0,0,.11)', - '5': '0 19px 38px rgba(0,0,0,.18), 0 15px 12px rgba(0,0,0,.11)', + default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', + 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', + 'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)', 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)', 'none': 'none', }, diff --git a/src/generators/borderColors.js b/src/generators/borderColors.js index 32b8fb850..cfb72b6bb 100644 --- a/src/generators/borderColors.js +++ b/src/generators/borderColors.js @@ -3,7 +3,7 @@ import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' export default function ({ colors, borders }) { - return hoverable(_.map(borders.colors, (color, className) => { + return hoverable(_.map(_.omit(borders.colors, 'default'), (color, className) => { return defineClass(`border-${className}`, { 'border-color': color, }) diff --git a/src/generators/borderWidths.js b/src/generators/borderWidths.js index 27247cb00..41da11190 100644 --- a/src/generators/borderWidths.js +++ b/src/generators/borderWidths.js @@ -45,10 +45,10 @@ function sizedBorder(size, width, color) { } module.exports = function({colors, borders}) { - const color = borders.defaults.color + const color = borders.colors.default return _.flatten([ - defaultBorder(borders.defaults.width, color), - ..._.map(borders.widths, (width, size) => sizedBorder(size, width, color)), + defaultBorder(borders.widths.default, color), + ..._.map(_.omit(borders.widths, 'default'), (width, size) => sizedBorder(size, width, color)), ]) } diff --git a/src/generators/rounded.js b/src/generators/rounded.js index cabe4c38c..e81de85b8 100644 --- a/src/generators/rounded.js +++ b/src/generators/rounded.js @@ -49,9 +49,9 @@ function roundedVariant(modifier, radius) { }) } -module.exports = function({borders}) { +module.exports = function({ radiuses }) { return _.flatten([ - defaultRounded(borders.rounded.default), - ..._.map(borders.rounded.modifiers, (radius, modifier) => roundedVariant(modifier, radius)), + defaultRounded(radiuses.default), + ..._.map(_.omit(radiuses, 'default'), (radius, modifier) => roundedVariant(modifier, radius)), ]) } diff --git a/src/generators/shadows.js b/src/generators/shadows.js index 20c30a787..c9a5bdc94 100644 --- a/src/generators/shadows.js +++ b/src/generators/shadows.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' export default function({shadows}) { - return _.map(shadows, (shadow, className) => { - return defineClass(`shadow-${className}`, { + return _.map(shadows, (shadow, modifier) => { + return defineClass(modifier === 'default' ? 'shadow' : `shadow-${modifier}`, { 'box-shadow': shadow, }) }) diff --git a/src/util/mergeConfig.js b/src/util/mergeConfig.js index 5490f2452..e83ea5310 100644 --- a/src/util/mergeConfig.js +++ b/src/util/mergeConfig.js @@ -15,14 +15,10 @@ const configTemplate = { colors: null, }, borders: { - defaults: null, widths: null, - rounded: { - default: null, - modifiers: null, - }, colors: null, }, + radiuses: null, sizing: { width: null, height: null,