@@ -4,200 +4,196 @@ const defaultTheme = require('tailwindcss/defaultTheme')
4
4
const [ baseFontSize , { lineHeight : baseLineHeight } ] = defaultTheme . fontSize . base
5
5
const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme
6
6
7
- const forms = plugin ( function ( { addBase, theme } ) {
8
- addBase ( {
9
- [ `
10
- [type='text'],
11
- [type='email'],
12
- [type='url'],
13
- [type='password'],
14
- [type='number'],
15
- [type='date'],
16
- [type='datetime-local'],
17
- [type='month'],
18
- [type='search'],
19
- [type='tel'],
20
- [type='time'],
21
- [type='week'],
22
- [multiple],
23
- textarea,
24
- select
25
- ` ] : {
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' : {
7
+ const forms = plugin . withOptions ( function ( options ) {
8
+ return function ( { addBase, theme } ) {
9
+ const swap = function ( initial , classes ) {
10
+ return options && options . useFormClasses === true ? classes : initial
11
+ }
12
+
13
+ const baseSelectors =
14
+ ( options && options . useFormClasses ) === true
15
+ ? '.form-input, .form-textarea, .form-select'
16
+ : "[type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select"
17
+
18
+ addBase ( {
19
+ [ baseSelectors . join ( ',' ) ] : {
20
+ appearance : 'none' ,
21
+ 'background-color' : '#fff' ,
22
+ 'border-color' : theme ( 'colors.gray.500' , colors . gray [ 500 ] ) ,
23
+ 'border-width' : borderWidth [ 'DEFAULT' ] ,
24
+ 'border-radius' : borderRadius . none ,
25
+ 'padding-top' : spacing [ 2 ] ,
26
+ 'padding-right' : spacing [ 3 ] ,
27
+ 'padding-bottom' : spacing [ 2 ] ,
28
+ 'padding-left' : spacing [ 3 ] ,
29
+ 'font-size' : baseFontSize ,
30
+ 'line-height' : baseLineHeight ,
31
+ '&:focus' : {
32
+ outline : outline . none [ 0 ] ,
33
+ 'outline-offset' : outline . none [ 1 ] ,
34
+ '--tw-ring-inset' : 'var(--tw-empty,/*!*/ /*!*/)' ,
35
+ '--tw-ring-offset-width' : '0px' ,
36
+ '--tw-ring-offset-color' : '#fff' ,
37
+ '--tw-ring-color' : theme ( 'colors.blue.600' , colors . blue [ 600 ] ) ,
38
+ '--tw-ring-offset-shadow' : `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)` ,
39
+ '--tw-ring-shadow' : `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)` ,
40
+ 'box-shadow' : `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)` ,
41
+ 'border-color' : theme ( 'colors.blue.600' , colors . blue [ 600 ] ) ,
42
+ } ,
43
+ } ,
44
+
45
+ [ swap (
46
+ `input::placeholder, textarea::placeholder` ,
47
+ `.form-input::placeholder .form-textarea::placeholder`
48
+ ) ] : {
49
+ color : theme ( 'colors.gray.500' , colors . gray [ 500 ] ) ,
50
+ opacity : '1' ,
51
+ } ,
52
+
53
+ [ swap (
54
+ `::-webkit-datetime-edit-fields-wrapper` ,
55
+ `.form-input::-webkit-datetime-edit-fields-wrapper`
56
+ ) ] : {
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
+ [ swap ( `::-webkit-date-and-time-value` , `.form-input::-webkit-date-and-time-value` ) ] : {
64
+ 'min-height' : '1.5em' ,
65
+ } ,
66
+
67
+ [ swap ( `select` , `.form-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
+ [ swap ( `[multiple]` , `.form-select[multiple], .form-input[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
+ [ swap ( `[type='checkbox'], [type='radio']` , `.form-checkbox, .form-radio` ) ] : {
91
+ appearance : 'none' ,
92
+ padding : '0' ,
93
+ 'color-adjust' : 'exact' ,
94
+ display : 'inline-block' ,
95
+ 'vertical-align' : 'middle' ,
96
+ 'background-origin' : 'border-box' ,
97
+ 'user-select' : 'none' ,
98
+ 'flex-shrink' : '0' ,
99
+ height : spacing [ 4 ] ,
100
+ width : spacing [ 4 ] ,
101
+ color : theme ( 'colors.blue.600' , colors . blue [ 600 ] ) ,
102
+ 'background-color' : '#fff' ,
103
+ 'border-color' : theme ( 'colors.gray.500' , colors . gray [ 500 ] ) ,
104
+ 'border-width' : borderWidth [ 'DEFAULT' ] ,
105
+ } ,
106
+
107
+ [ swap ( `[type='checkbox']` , `.form-checkbox` ) ] : {
108
+ 'border-radius' : borderRadius [ 'none' ] ,
109
+ } ,
110
+
111
+ [ swap ( `[type='radio']` , `.form-radio` ) ] : {
112
+ 'border-radius' : '100%' ,
113
+ } ,
114
+
115
+ [ swap (
116
+ `[type='checkbox']:focus, [type='radio']:focus` ,
117
+ `.form-checkbox:focus, .form-radio:focus`
118
+ ) ] : {
38
119
outline : outline . none [ 0 ] ,
39
120
'outline-offset' : outline . none [ 1 ] ,
40
121
'--tw-ring-inset' : 'var(--tw-empty,/*!*/ /*!*/)' ,
41
- '--tw-ring-offset-width' : '0px ' ,
122
+ '--tw-ring-offset-width' : '2px ' ,
42
123
'--tw-ring-offset-color' : '#fff' ,
43
124
'--tw-ring-color' : theme ( 'colors.blue.600' , colors . blue [ 600 ] ) ,
44
125
'--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)` ,
126
+ '--tw-ring-shadow' : `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)` ,
46
127
'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
- [ `
91
- [type='checkbox'],
92
- [type='radio']
93
- ` ] : {
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
- [ `
119
- [type='checkbox']:focus,
120
- [type='radio']:focus
121
- ` ] : {
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
- [ `
135
- [type='checkbox']:checked,
136
- [type='radio']:checked
137
- ` ] : {
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
- [ `
158
- [type='checkbox']:checked:hover,
159
- [type='checkbox']:checked:focus,
160
- [type='radio']:checked:hover,
161
- [type='radio']:checked:focus
162
- ` ] : {
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
- [ `
179
- [type='checkbox']:indeterminate:hover,
180
- [type='checkbox']:indeterminate:focus
181
- ` ] : {
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
- } ,
200
- } )
128
+ 'border-color' : theme ( 'colors.gray.500' , colors . gray [ 500 ] ) ,
129
+ } ,
130
+
131
+ [ swap (
132
+ `[type='checkbox']:checked, [type='radio']:checked` ,
133
+ `.form-checkbox:checked, .form-radio:checked`
134
+ ) ] : {
135
+ 'border-color' : `transparent` ,
136
+ 'background-color' : `currentColor` ,
137
+ 'background-size' : `100% 100%` ,
138
+ 'background-position' : `center` ,
139
+ 'background-repeat' : `no-repeat` ,
140
+ } ,
141
+
142
+ [ swap ( `[type='checkbox']:checked` , `.form-checkbox:checked` ) ] : {
143
+ 'background-image' : `url("${ svgToDataUri (
144
+ `<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>`
145
+ ) } ")`,
146
+ } ,
147
+
148
+ [ swap ( `[type='radio']:checked` , `.form-radio:checked` ) ] : {
149
+ 'background-image' : `url("${ svgToDataUri (
150
+ `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
151
+ ) } ")`,
152
+ } ,
153
+
154
+ [ swap (
155
+ `[type='checkbox']:checked:hover, [type='checkbox']:checked:focus, [type='radio']:checked:hover, [type='radio']:checked:focus` ,
156
+ `.form-checkbox:checked:hover, .form-checkbox:checked:focus, .form-radio:checked:hover, .form-radio:check:focus`
157
+ ) ] : {
158
+ 'border-color' : 'transparent' ,
159
+ 'background-color' : 'currentColor' ,
160
+ } ,
161
+
162
+ [ swap ( `[type='checkbox']:indeterminate` , `.form-checkbox:indeterminate` ) ] : {
163
+ 'background-image' : `url("${ svgToDataUri (
164
+ `<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>`
165
+ ) } ")`,
166
+ 'border-color' : `transparent` ,
167
+ 'background-color' : `currentColor` ,
168
+ 'background-size' : `100% 100%` ,
169
+ 'background-position' : `center` ,
170
+ 'background-repeat' : `no-repeat` ,
171
+ } ,
172
+
173
+ [ swap (
174
+ `[type='checkbox']:indeterminate:hover, [type='checkbox']:indeterminate:focus` ,
175
+ `.form-checkbox:indeterminate:hover, .form-checkbox:indeterminate:focus`
176
+ ) ] : {
177
+ 'border-color' : 'transparent' ,
178
+ 'background-color' : 'currentColor' ,
179
+ } ,
180
+
181
+ [ swap ( `[type='file']` , `.form-input[type='file']` ) ] : {
182
+ background : 'unset' ,
183
+ 'border-color' : 'inherit' ,
184
+ 'border-width' : '0' ,
185
+ 'border-radius' : '0' ,
186
+ padding : '0' ,
187
+ 'font-size' : 'unset' ,
188
+ 'line-height' : 'inherit' ,
189
+ } ,
190
+
191
+ [ swap ( `[type='file']:focus` , `.form-input[type='file']:focus` ) ] : {
192
+ outline : `1px solid ButtonText` ,
193
+ outline : `1px auto -webkit-focus-ring-color` ,
194
+ } ,
195
+ } )
196
+ }
201
197
} )
202
198
203
199
module . exports = forms
0 commit comments