@@ -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