From 0d5d502dac957b0f731bcb509ee884ec3b94e2ac Mon Sep 17 00:00:00 2001 From: Marc Dix Date: Wed, 17 Feb 2021 11:29:03 +0100 Subject: [PATCH] make it possible to override ring and border color on plugin level --- README.md | 20 ++++ src/index.js | 324 ++++++++++++++++++++++++++------------------------- 2 files changed, 183 insertions(+), 161 deletions(-) diff --git a/README.md b/README.md index 74d3ec2..664319b 100644 --- a/README.md +++ b/README.md @@ -71,4 +71,24 @@ Every element has been normalized/reset to a simple visually consistent style th ``` +## Customization +You can provide a configuration with custom values for the ringColors and borderColors: +```js +// tailwind.config.js +module.exports = { + theme: { + // ... + }, + plugins: [ + require('@tailwindcss/forms')({ + colors: { + borderColor: '#BADA55', + ringColor: '#C0FFEE', + } + }), + // ... + ], +} +``` + More customization examples and best practices coming soon. diff --git a/src/index.js b/src/index.js index dc22410..171a1e8 100644 --- a/src/index.js +++ b/src/index.js @@ -4,9 +4,10 @@ const defaultTheme = require('tailwindcss/defaultTheme') const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme -const forms = plugin(function ({ addBase, theme }) { - addBase({ - [` +const forms = function(pluginConfiguration = {}) { + return plugin(function ({ addBase, theme }) { + addBase({ + [` [type='text'], [type='email'], [type='url'], @@ -23,181 +24,182 @@ const forms = plugin(function ({ addBase, theme }) { textarea, select `]: { - appearance: 'none', - 'background-color': '#fff', - 'border-color': theme('colors.gray.500', colors.gray[500]), - 'border-width': borderWidth['DEFAULT'], - 'border-radius': borderRadius.none, - 'padding-top': spacing[2], - 'padding-right': spacing[3], - 'padding-bottom': spacing[2], - 'padding-left': spacing[3], - 'font-size': baseFontSize, - 'line-height': baseLineHeight, - '&:focus': { - outline: outline.none[0], - 'outline-offset': outline.none[1], - '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-ring-offset-width': '0px', - '--tw-ring-offset-color': '#fff', - '--tw-ring-color': theme('colors.blue.600', colors.blue[600]), - '--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(1px + 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.blue.600', colors.blue[600]), - }, - }, - - 'input::placeholder, textarea::placeholder': { - color: theme('colors.gray.500', colors.gray[500]), - opacity: '1', - }, - - '::-webkit-datetime-edit-fields-wrapper': { - padding: '0', - }, - - // Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed. - // This sucks because users can't change line-height with a utility on date inputs now. - // Reference: https://github.com/twbs/bootstrap/pull/31993 - '::-webkit-date-and-time-value': { - 'min-height': '1.5em', - }, - - select: { - 'background-image': `url("${svgToDataUri( - `` - )}")`, - 'background-position': `right ${spacing[2]} center`, - 'background-repeat': `no-repeat`, - 'background-size': `1.5em 1.5em`, - 'padding-right': spacing[10], - 'color-adjust': `exact`, - }, - - '[multiple]': { - 'background-image': 'initial', - 'background-position': 'initial', - 'background-repeat': 'unset', - 'background-size': 'initial', - 'padding-right': spacing[3], - 'color-adjust': 'unset', - }, - - [` + appearance: 'none', + 'background-color': '#fff', + 'border-color': theme('colors.gray.500', colors.gray[500]), + 'border-width': borderWidth['DEFAULT'], + 'border-radius': borderRadius.none, + 'padding-top': spacing[2], + 'padding-right': spacing[3], + 'padding-bottom': spacing[2], + 'padding-left': spacing[3], + 'font-size': baseFontSize, + 'line-height': baseLineHeight, + '&:focus': { + outline: outline.none[0], + 'outline-offset': outline.none[1], + '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-ring-offset-width': '0px', + '--tw-ring-offset-color': '#fff', + '--tw-ring-color': pluginConfiguration.colors && pluginConfiguration.colors.ringColor || theme('colors.blue.600', colors.blue[600]), + '--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(1px + 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': pluginConfiguration.colors && pluginConfiguration.colors.borderColor || theme('colors.blue.600', colors.blue[600]), + }, + }, + + 'input::placeholder, textarea::placeholder': { + color: theme('colors.gray.500', colors.gray[500]), + opacity: '1', + }, + + '::-webkit-datetime-edit-fields-wrapper': { + padding: '0', + }, + + // Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed. + // This sucks because users can't change line-height with a utility on date inputs now. + // Reference: https://github.com/twbs/bootstrap/pull/31993 + '::-webkit-date-and-time-value': { + 'min-height': '1.5em', + }, + + select: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + 'background-position': `right ${spacing[2]} center`, + 'background-repeat': `no-repeat`, + 'background-size': `1.5em 1.5em`, + 'padding-right': spacing[10], + 'color-adjust': `exact`, + }, + + '[multiple]': { + 'background-image': 'initial', + 'background-position': 'initial', + 'background-repeat': 'unset', + 'background-size': 'initial', + 'padding-right': spacing[3], + 'color-adjust': 'unset', + }, + + [` [type='checkbox'], [type='radio'] `]: { - appearance: 'none', - padding: '0', - 'color-adjust': 'exact', - display: 'inline-block', - 'vertical-align': 'middle', - 'background-origin': 'border-box', - 'user-select': 'none', - 'flex-shrink': '0', - height: spacing[4], - width: spacing[4], - color: theme('colors.blue.600', colors.blue[600]), - 'background-color': '#fff', - 'border-color': theme('colors.gray.500', colors.gray[500]), - 'border-width': borderWidth['DEFAULT'], - }, - - [`[type='checkbox']`]: { - 'border-radius': borderRadius['none'], - }, - - [`[type='radio']`]: { - 'border-radius': '100%', - }, - - [` + appearance: 'none', + padding: '0', + 'color-adjust': 'exact', + display: 'inline-block', + 'vertical-align': 'middle', + 'background-origin': 'border-box', + 'user-select': 'none', + 'flex-shrink': '0', + height: spacing[4], + width: spacing[4], + color: theme('colors.blue.600', colors.blue[600]), + 'background-color': '#fff', + 'border-color': theme('colors.gray.500', colors.gray[500]), + 'border-width': borderWidth['DEFAULT'], + }, + + [`[type='checkbox']`]: { + 'border-radius': borderRadius['none'], + }, + + [`[type='radio']`]: { + 'border-radius': '100%', + }, + + [` [type='checkbox']:focus, [type='radio']:focus `]: { - outline: outline.none[0], - 'outline-offset': outline.none[1], - '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-ring-offset-width': '2px', - '--tw-ring-offset-color': '#fff', - '--tw-ring-color': theme('colors.blue.600', colors.blue[600]), - '--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.500', colors.gray[500]), - }, - - [` + outline: outline.none[0], + 'outline-offset': outline.none[1], + '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-ring-offset-width': '2px', + '--tw-ring-offset-color': '#fff', + '--tw-ring-color': pluginConfiguration.colors && pluginConfiguration.colors.ringColor || theme('colors.blue.600', colors.blue[600]), + '--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': pluginConfiguration.colors && pluginConfiguration.colors.borderColor || theme('colors.gray.500', colors.gray[500]), + }, + + [` [type='checkbox']:checked, [type='radio']:checked `]: { - 'border-color': `transparent`, - 'background-color': `currentColor`, - 'background-size': `100% 100%`, - 'background-position': `center`, - 'background-repeat': `no-repeat`, - }, - - [`[type='checkbox']:checked`]: { - 'background-image': `url("${svgToDataUri( - `` - )}")`, - }, - - [`[type='radio']:checked`]: { - 'background-image': `url("${svgToDataUri( - `` - )}")`, - }, - - [` + 'border-color': `transparent`, + 'background-color': `currentColor`, + 'background-size': `100% 100%`, + 'background-position': `center`, + 'background-repeat': `no-repeat`, + }, + + [`[type='checkbox']:checked`]: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + }, + + [`[type='radio']:checked`]: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + }, + + [` [type='checkbox']:checked:hover, [type='checkbox']:checked:focus, [type='radio']:checked:hover, [type='radio']:checked:focus `]: { - 'border-color': 'transparent', - 'background-color': 'currentColor', - }, - - [`[type='checkbox']:indeterminate`]: { - 'background-image': `url("${svgToDataUri( - `` - )}")`, - 'border-color': `transparent`, - 'background-color': `currentColor`, - 'background-size': `100% 100%`, - 'background-position': `center`, - 'background-repeat': `no-repeat`, - }, - - [` + 'border-color': 'transparent', + 'background-color': 'currentColor', + }, + + [`[type='checkbox']:indeterminate`]: { + 'background-image': `url("${svgToDataUri( + `` + )}")`, + 'border-color': `transparent`, + 'background-color': `currentColor`, + 'background-size': `100% 100%`, + 'background-position': `center`, + 'background-repeat': `no-repeat`, + }, + + [` [type='checkbox']:indeterminate:hover, [type='checkbox']:indeterminate:focus `]: { - 'border-color': 'transparent', - 'background-color': 'currentColor', - }, - - [`[type='file']`]: { - background: 'unset', - 'border-color': 'inherit', - 'border-width': '0', - 'border-radius': '0', - padding: '0', - 'font-size': 'unset', - 'line-height': 'inherit', - }, - - [`[type='file']:focus`]: { - outline: `1px solid ButtonText`, - outline: `1px auto -webkit-focus-ring-color`, - }, + 'border-color': 'transparent', + 'background-color': 'currentColor', + }, + + [`[type='file']`]: { + background: 'unset', + 'border-color': 'inherit', + 'border-width': '0', + 'border-radius': '0', + padding: '0', + 'font-size': 'unset', + 'line-height': 'inherit', + }, + + [`[type='file']:focus`]: { + outline: `1px solid ButtonText`, + outline: `1px auto -webkit-focus-ring-color`, + }, + }) }) -}) +} module.exports = forms