Make default designs less opinionated

Author: adamwathan

src/index.js

@@ -25,9 +25,9 @@ const forms = plugin(function ({ addBase, theme }) {
     `]: {
       appearance: 'none',
       'background-color': '#fff',
-      'border-color': theme('colors.gray.300', colors.gray[300]),
+      'border-color': theme('colors.gray.500', colors.gray[500]),
       'border-width': borderWidth['DEFAULT'],
-      'border-radius': borderRadius.md,
+      'border-radius': borderRadius.none,
       'padding-top': spacing[2],
       'padding-right': spacing[3],
       'padding-bottom': spacing[2],
@@ -49,7 +49,7 @@ const forms = plugin(function ({ addBase, theme }) {
     },
 
     'input::placeholder, textarea::placeholder': {
-      color: theme('colors.gray.400', colors.gray[400]),
+      color: theme('colors.gray.500', colors.gray[500]),
       opacity: '1',
     },
 
@@ -67,8 +67,8 @@ const forms = plugin(function ({ addBase, theme }) {
     select: {
       'background-image': `url("${svgToDataUri(
         `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
-          'colors.gray.400',
-          colors.gray[400]
+          'colors.gray.500',
+          colors.gray[500]
         )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
       )}")`,
       'background-position': `right ${spacing[2]} center`,
@@ -103,12 +103,12 @@ const forms = plugin(function ({ addBase, theme }) {
       width: spacing[4],
       color: theme('colors.blue.600', colors.blue[600]),
       'background-color': '#fff',
-      'border-color': theme('colors.gray.300', colors.gray[300]),
+      'border-color': theme('colors.gray.500', colors.gray[500]),
       'border-width': borderWidth['DEFAULT'],
     },
 
     [`[type='checkbox']`]: {
-      'border-radius': borderRadius['DEFAULT'],
+      'border-radius': borderRadius['none'],
     },
 
     [`[type='radio']`]: {
@@ -128,7 +128,7 @@ const forms = plugin(function ({ addBase, theme }) {
       '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
       '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
       'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
-      'border-color': theme('colors.gray.400', colors.gray[400]),
+      'border-color': theme('colors.gray.500', colors.gray[500]),
     },
 
     [`