Move default values for borders/rounded/shadows next to modifiers

Moves rounded out to it's own `radiuses` config, provide fewer default
shadows, remove `defaults` key, instead add a default to each utility
that has a no-suffix variant.

__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);
   }

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',
   },

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,
     })

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)),
   ])
 }

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)),
   ])
 }

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,
     })
   })

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,