Skip to content

Commit 0d5d502

Browse files
mdixmdix
committed
make it possible to override ring and border color on plugin level
1 parent 98f7619 commit 0d5d502

File tree

2 files changed

+183
-161
lines changed

2 files changed

+183
-161
lines changed

‎README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,4 +71,24 @@ Every element has been normalized/reset to a simple visually consistent style th
7171
<input type="checkbox" class="rounded text-pink-500" />
7272
```
7373

74+
## Customization
75+
You can provide a configuration with custom values for the ringColors and borderColors:
76+
```js
77+
// tailwind.config.js
78+
module.exports = {
79+
theme: {
80+
// ...
81+
},
82+
plugins: [
83+
require('@tailwindcss/forms')({
84+
colors: {
85+
borderColor: '#BADA55',
86+
ringColor: '#C0FFEE',
87+
}
88+
}),
89+
// ...
90+
],
91+
}
92+
```
93+
7494
More customization examples and best practices coming soon.

‎src/index.js

Lines changed: 163 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ const defaultTheme = require('tailwindcss/defaultTheme')
44
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
55
const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme
66

7-
const forms = plugin(function ({ addBase, theme }) {
8-
addBase({
9-
[`
7+
const forms = function(pluginConfiguration = {}) {
8+
return plugin(function ({ addBase, theme }) {
9+
addBase({
10+
[`
1011
[type='text'],
1112
[type='email'],
1213
[type='url'],
@@ -23,181 +24,182 @@ const forms = plugin(function ({ addBase, theme }) {
2324
textarea,
2425
select
2526
`]: {
26-
appearance: 'none',
27-
'background-color': '#fff',
28-
'border-color': theme('colors.gray.500', colors.gray[500]),
29-
'border-width': borderWidth['DEFAULT'],
30-
'border-radius': borderRadius.none,
31-
'padding-top': spacing[2],
32-
'padding-right': spacing[3],
33-
'padding-bottom': spacing[2],
34-
'padding-left': spacing[3],
35-
'font-size': baseFontSize,
36-
'line-height': baseLineHeight,
37-
'&:focus': {
38-
outline: outline.none[0],
39-
'outline-offset': outline.none[1],
40-
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
41-
'--tw-ring-offset-width': '0px',
42-
'--tw-ring-offset-color': '#fff',
43-
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
44-
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
45-
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
46-
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
47-
'border-color': theme('colors.blue.600', colors.blue[600]),
48-
},
49-
},
50-
51-
'input::placeholder, textarea::placeholder': {
52-
color: theme('colors.gray.500', colors.gray[500]),
53-
opacity: '1',
54-
},
55-
56-
'::-webkit-datetime-edit-fields-wrapper': {
57-
padding: '0',
58-
},
59-
60-
// Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
61-
// This sucks because users can't change line-height with a utility on date inputs now.
62-
// Reference: https://github.com/twbs/bootstrap/pull/31993
63-
'::-webkit-date-and-time-value': {
64-
'min-height': '1.5em',
65-
},
66-
67-
select: {
68-
'background-image': `url("${svgToDataUri(
69-
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
70-
'colors.gray.500',
71-
colors.gray[500]
72-
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
73-
)}")`,
74-
'background-position': `right ${spacing[2]} center`,
75-
'background-repeat': `no-repeat`,
76-
'background-size': `1.5em 1.5em`,
77-
'padding-right': spacing[10],
78-
'color-adjust': `exact`,
79-
},
80-
81-
'[multiple]': {
82-
'background-image': 'initial',
83-
'background-position': 'initial',
84-
'background-repeat': 'unset',
85-
'background-size': 'initial',
86-
'padding-right': spacing[3],
87-
'color-adjust': 'unset',
88-
},
89-
90-
[`
27+
appearance: 'none',
28+
'background-color': '#fff',
29+
'border-color': theme('colors.gray.500', colors.gray[500]),
30+
'border-width': borderWidth['DEFAULT'],
31+
'border-radius': borderRadius.none,
32+
'padding-top': spacing[2],
33+
'padding-right': spacing[3],
34+
'padding-bottom': spacing[2],
35+
'padding-left': spacing[3],
36+
'font-size': baseFontSize,
37+
'line-height': baseLineHeight,
38+
'&:focus': {
39+
outline: outline.none[0],
40+
'outline-offset': outline.none[1],
41+
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
42+
'--tw-ring-offset-width': '0px',
43+
'--tw-ring-offset-color': '#fff',
44+
'--tw-ring-color': pluginConfiguration.colors && pluginConfiguration.colors.ringColor || theme('colors.blue.600', colors.blue[600]),
45+
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
46+
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
47+
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
48+
'border-color': pluginConfiguration.colors && pluginConfiguration.colors.borderColor || theme('colors.blue.600', colors.blue[600]),
49+
},
50+
},
51+
52+
'input::placeholder, textarea::placeholder': {
53+
color: theme('colors.gray.500', colors.gray[500]),
54+
opacity: '1',
55+
},
56+
57+
'::-webkit-datetime-edit-fields-wrapper': {
58+
padding: '0',
59+
},
60+
61+
// Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
62+
// This sucks because users can't change line-height with a utility on date inputs now.
63+
// Reference: https://github.com/twbs/bootstrap/pull/31993
64+
'::-webkit-date-and-time-value': {
65+
'min-height': '1.5em',
66+
},
67+
68+
select: {
69+
'background-image': `url("${svgToDataUri(
70+
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
71+
'colors.gray.500',
72+
colors.gray[500]
73+
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
74+
)}")`,
75+
'background-position': `right ${spacing[2]} center`,
76+
'background-repeat': `no-repeat`,
77+
'background-size': `1.5em 1.5em`,
78+
'padding-right': spacing[10],
79+
'color-adjust': `exact`,
80+
},
81+
82+
'[multiple]': {
83+
'background-image': 'initial',
84+
'background-position': 'initial',
85+
'background-repeat': 'unset',
86+
'background-size': 'initial',
87+
'padding-right': spacing[3],
88+
'color-adjust': 'unset',
89+
},
90+
91+
[`
9192
[type='checkbox'],
9293
[type='radio']
9394
`]: {
94-
appearance: 'none',
95-
padding: '0',
96-
'color-adjust': 'exact',
97-
display: 'inline-block',
98-
'vertical-align': 'middle',
99-
'background-origin': 'border-box',
100-
'user-select': 'none',
101-
'flex-shrink': '0',
102-
height: spacing[4],
103-
width: spacing[4],
104-
color: theme('colors.blue.600', colors.blue[600]),
105-
'background-color': '#fff',
106-
'border-color': theme('colors.gray.500', colors.gray[500]),
107-
'border-width': borderWidth['DEFAULT'],
108-
},
109-
110-
[`[type='checkbox']`]: {
111-
'border-radius': borderRadius['none'],
112-
},
113-
114-
[`[type='radio']`]: {
115-
'border-radius': '100%',
116-
},
117-
118-
[`
95+
appearance: 'none',
96+
padding: '0',
97+
'color-adjust': 'exact',
98+
display: 'inline-block',
99+
'vertical-align': 'middle',
100+
'background-origin': 'border-box',
101+
'user-select': 'none',
102+
'flex-shrink': '0',
103+
height: spacing[4],
104+
width: spacing[4],
105+
color: theme('colors.blue.600', colors.blue[600]),
106+
'background-color': '#fff',
107+
'border-color': theme('colors.gray.500', colors.gray[500]),
108+
'border-width': borderWidth['DEFAULT'],
109+
},
110+
111+
[`[type='checkbox']`]: {
112+
'border-radius': borderRadius['none'],
113+
},
114+
115+
[`[type='radio']`]: {
116+
'border-radius': '100%',
117+
},
118+
119+
[`
119120
[type='checkbox']:focus,
120121
[type='radio']:focus
121122
`]: {
122-
outline: outline.none[0],
123-
'outline-offset': outline.none[1],
124-
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
125-
'--tw-ring-offset-width': '2px',
126-
'--tw-ring-offset-color': '#fff',
127-
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
128-
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
129-
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
130-
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
131-
'border-color': theme('colors.gray.500', colors.gray[500]),
132-
},
133-
134-
[`
123+
outline: outline.none[0],
124+
'outline-offset': outline.none[1],
125+
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
126+
'--tw-ring-offset-width': '2px',
127+
'--tw-ring-offset-color': '#fff',
128+
'--tw-ring-color': pluginConfiguration.colors && pluginConfiguration.colors.ringColor || theme('colors.blue.600', colors.blue[600]),
129+
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
130+
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
131+
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
132+
'border-color': pluginConfiguration.colors && pluginConfiguration.colors.borderColor || theme('colors.gray.500', colors.gray[500]),
133+
},
134+
135+
[`
135136
[type='checkbox']:checked,
136137
[type='radio']:checked
137138
`]: {
138-
'border-color': `transparent`,
139-
'background-color': `currentColor`,
140-
'background-size': `100% 100%`,
141-
'background-position': `center`,
142-
'background-repeat': `no-repeat`,
143-
},
144-
145-
[`[type='checkbox']:checked`]: {
146-
'background-image': `url("${svgToDataUri(
147-
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
148-
)}")`,
149-
},
150-
151-
[`[type='radio']:checked`]: {
152-
'background-image': `url("${svgToDataUri(
153-
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
154-
)}")`,
155-
},
156-
157-
[`
139+
'border-color': `transparent`,
140+
'background-color': `currentColor`,
141+
'background-size': `100% 100%`,
142+
'background-position': `center`,
143+
'background-repeat': `no-repeat`,
144+
},
145+
146+
[`[type='checkbox']:checked`]: {
147+
'background-image': `url("${svgToDataUri(
148+
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
149+
)}")`,
150+
},
151+
152+
[`[type='radio']:checked`]: {
153+
'background-image': `url("${svgToDataUri(
154+
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
155+
)}")`,
156+
},
157+
158+
[`
158159
[type='checkbox']:checked:hover,
159160
[type='checkbox']:checked:focus,
160161
[type='radio']:checked:hover,
161162
[type='radio']:checked:focus
162163
`]: {
163-
'border-color': 'transparent',
164-
'background-color': 'currentColor',
165-
},
166-
167-
[`[type='checkbox']:indeterminate`]: {
168-
'background-image': `url("${svgToDataUri(
169-
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`
170-
)}")`,
171-
'border-color': `transparent`,
172-
'background-color': `currentColor`,
173-
'background-size': `100% 100%`,
174-
'background-position': `center`,
175-
'background-repeat': `no-repeat`,
176-
},
177-
178-
[`
164+
'border-color': 'transparent',
165+
'background-color': 'currentColor',
166+
},
167+
168+
[`[type='checkbox']:indeterminate`]: {
169+
'background-image': `url("${svgToDataUri(
170+
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`
171+
)}")`,
172+
'border-color': `transparent`,
173+
'background-color': `currentColor`,
174+
'background-size': `100% 100%`,
175+
'background-position': `center`,
176+
'background-repeat': `no-repeat`,
177+
},
178+
179+
[`
179180
[type='checkbox']:indeterminate:hover,
180181
[type='checkbox']:indeterminate:focus
181182
`]: {
182-
'border-color': 'transparent',
183-
'background-color': 'currentColor',
184-
},
185-
186-
[`[type='file']`]: {
187-
background: 'unset',
188-
'border-color': 'inherit',
189-
'border-width': '0',
190-
'border-radius': '0',
191-
padding: '0',
192-
'font-size': 'unset',
193-
'line-height': 'inherit',
194-
},
195-
196-
[`[type='file']:focus`]: {
197-
outline: `1px solid ButtonText`,
198-
outline: `1px auto -webkit-focus-ring-color`,
199-
},
183+
'border-color': 'transparent',
184+
'background-color': 'currentColor',
185+
},
186+
187+
[`[type='file']`]: {
188+
background: 'unset',
189+
'border-color': 'inherit',
190+
'border-width': '0',
191+
'border-radius': '0',
192+
padding: '0',
193+
'font-size': 'unset',
194+
'line-height': 'inherit',
195+
},
196+
197+
[`[type='file']:focus`]: {
198+
outline: `1px solid ButtonText`,
199+
outline: `1px auto -webkit-focus-ring-color`,
200+
},
201+
})
200202
})
201-
})
203+
}
202204

203205
module.exports = forms

0 commit comments

Comments
 (0)