Skip to content
This repository was archived by the owner on Sep 11, 2021. It is now read-only.

Commit 2823b95

Browse files
adamwathanadamwathan
committed
Better default options configuration
1 parent 4747a90 commit 2823b95

File tree

1 file changed

+81
-55
lines changed

1 file changed

+81
-55
lines changed

‎tailwind.config.js‎

Lines changed: 81 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,30 @@ const svgToDataUri = require('mini-svg-data-uri')
44
module.exports = {
55
theme: {
66
formElements: theme => ({
7-
horizontalPadding: theme('spacing.3'),
8-
verticalPadding: theme('spacing.2'),
9-
lineHeight: theme('lineHeight.normal'),
10-
fontSize: theme('fontSize.base'),
11-
borderColor: theme('borderColor.default'),
12-
borderWidth: theme('borderWidth.default'),
13-
borderRadius: theme('borderRadius.default'),
14-
backgroundColor: theme('colors.white'),
15-
focusBorderColor: theme('colors.blue.400'),
16-
focusShadow: theme('boxShadow.outline'),
17-
checkboxSize: '1em',
18-
radioSize: '1em',
19-
checkboxIcon: `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="M13.293 4.293a1 1 0 0 1 0 1.414L7 12a1 1 0 0 1-1.414 0L3.293 9.707a1 1 0 0 1 1.414-1.414l1.586 1.586 5.586-5.586a1 1 0 0 1 1.414 0z"/></svg>`,
20-
radioIcon: `<svg viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/></svg>`,
21-
checkedColor: 'currentColor',
22-
selectIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${theme('colors.gray.500')}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`,
23-
selectIconOffset: theme('spacing.2'),
24-
selectIconSize: '1.5em',
7+
// horizontalPadding: theme('spacing.3'),
8+
// verticalPadding: theme('spacing.2'),
9+
// lineHeight: theme('lineHeight.normal'),
10+
// fontSize: theme('fontSize.base'),
11+
// borderColor: theme('borderColor.default'),
12+
// borderWidth: theme('borderWidth.default'),
13+
// borderRadius: theme('borderRadius.default'),
14+
// backgroundColor: theme('colors.white'),
15+
// focusBorderColor: theme('colors.blue.400'),
16+
// focusShadow: theme('boxShadow.outline'),
17+
// checkboxSize: '1em',
18+
// radioSize: '1em',
19+
// checkboxIcon: `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="M13.293 4.293a1 1 0 0 1 0 1.414L7 12a1 1 0 0 1-1.414 0L3.293 9.707a1 1 0 0 1 1.414-1.414l1.586 1.586 5.586-5.586a1 1 0 0 1 1.414 0z"/></svg>`,
20+
// radioIcon: `<svg viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/></svg>`,
21+
// checkedColor: 'currentColor',
22+
// selectIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${theme('colors.gray.500')}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`,
23+
// selectIconOffset: theme('spacing.2'),
24+
// selectIconSize: '1.5em',
2525
}),
2626
extend: {},
2727
},
2828
variants: {},
2929
plugins: [
30+
// @tailwindcss/accessibility
3031
function ({ addUtilities }) {
3132
addUtilities({
3233
'.sr-only': {
@@ -41,29 +42,52 @@ module.exports = {
4142
}
4243
})
4344
},
45+
// @tailwindcss/custom-forms
4446
function ({ addComponents, theme }) {
47+
const options = {
48+
horizontalPadding: defaultTheme.spacing[3],
49+
verticalPadding: defaultTheme.spacing[2],
50+
lineHeight: defaultTheme.lineHeight.normal,
51+
fontSize: defaultTheme.fontSize.base,
52+
borderColor: defaultTheme.borderColor.default,
53+
borderWidth: defaultTheme.borderWidth.default,
54+
borderRadius: defaultTheme.borderRadius.default,
55+
backgroundColor: defaultTheme.colors.white,
56+
focusBorderColor: defaultTheme.colors.blue[400],
57+
focusShadow: defaultTheme.boxShadow.outline,
58+
checkboxSize: '1em',
59+
radioSize: '1em',
60+
checkboxIcon: `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="M13.293 4.293a1 1 0 0 1 0 1.414L7 12a1 1 0 0 1-1.414 0L3.293 9.707a1 1 0 0 1 1.414-1.414l1.586 1.586 5.586-5.586a1 1 0 0 1 1.414 0z"/></svg>`,
61+
radioIcon: `<svg viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/></svg>`,
62+
checkedColor: 'currentColor',
63+
selectIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`,
64+
selectIconOffset: defaultTheme.spacing[2],
65+
selectIconSize: '1.5em',
66+
...theme('formElements'),
67+
}
68+
4569
addComponents({
4670
'.form-checkbox': {
4771
appearance: 'none',
4872
display: 'inline-block',
49-
height: theme('formElements.checkboxSize'),
50-
width: theme('formElements.checkboxSize'),
73+
height: options.checkboxSize,
74+
width: options.checkboxSize,
5175
verticalAlign: 'middle',
52-
borderWidth: theme('formElements.borderWidth', defaultTheme.borderWidth.default),
53-
borderRadius: theme('formElements.borderRadius', defaultTheme.borderRadius.default),
54-
backgroundColor: theme('formElements.backgroundColor'),
76+
borderWidth: options.borderWidth,
77+
borderRadius: options.borderRadius,
78+
backgroundColor: options.backgroundColor,
5579
userSelect: 'none',
5680
'input[type=checkbox]:focus + &, input[type=checkbox]&:focus': {
5781
outline: 'none',
58-
boxShadow: theme('formElements.focusShadow', defaultTheme.boxShadow.outline),
82+
boxShadow: options.focusShadow,
5983
},
6084
'input[type=checkbox]:focus:not(:checked) + &, input[type=checkbox]&:focus:not(:checked)': {
61-
borderColor: theme('formElements.focusBorderColor', defaultTheme.colors.blue[400]),
85+
borderColor: options.focusBorderColor,
6286
},
6387
'input[type=checkbox]:checked + &, input[type=checkbox]&:checked': {
6488
backgroundColor: 'currentColor',
6589
borderColor: 'currentColor',
66-
backgroundImage: `url("${svgToDataUri(theme('formElements.checkboxIcon'))}")`,
90+
backgroundImage: `url("${svgToDataUri(options.checkboxIcon)}")`,
6791
backgroundSize: 'cover',
6892
backgroundPosition: 'center',
6993
backgroundRepeat: 'no-repeat',
@@ -72,63 +96,65 @@ module.exports = {
7296
'.form-radio': {
7397
appearance: 'none',
7498
display: 'inline-block',
75-
height: theme('formElements.radioSize'),
76-
width: theme('formElements.radioSize'),
99+
height: options.radioSize,
100+
width: options.radioSize,
77101
verticalAlign: 'middle',
78-
borderWidth: theme('formElements.borderWidth', defaultTheme.borderWidth.default),
102+
borderWidth: options.borderWidth,
79103
borderRadius: '9999px',
80-
backgroundColor: theme('formElements.backgroundColor'),
104+
backgroundColor: options.backgroundColor,
81105
userSelect: 'none',
82106
'input[type=radio]:focus + &, input[type=radio]&:focus': {
83107
outline: 'none',
84-
boxShadow: theme('formElements.focusShadow', defaultTheme.boxShadow.outline),
108+
boxShadow: options.focusShadow,
85109
},
86110
'input[type=radio]:focus:not(:checked) + &, input[type=radio]&:focus:not(:checked)': {
87-
borderColor: theme('formElements.focusBorderColor', defaultTheme.colors.blue[400]),
111+
borderColor: options.focusBorderColor,
88112
},
89113
'input[type=radio]:checked + &, input[type=radio]&:checked': {
90-
backgroundColor: theme('formElements.checkedColor', 'currentColor'),
91-
borderColor: theme('formElements.checkedColor', 'currentColor'),
92-
backgroundImage: `url("${svgToDataUri(theme('formElements.radioIcon'))}")`,
114+
backgroundColor: options.checkedColor,
115+
borderColor: options.checkedColor,
116+
backgroundImage: `url("${svgToDataUri(options.radioIcon)}")`,
93117
backgroundSize: 'cover',
94118
backgroundPosition: 'center',
95119
backgroundRepeat: 'no-repeat',
96120
},
97121
},
98122
'.form-input, .form-textarea, .form-multiselect': {
99123
appearance: 'none',
100-
backgroundColor: theme('formElements.backgroundColor'),
101-
borderWidth: theme('formElements.borderWidth', defaultTheme.borderWidth.default),
102-
borderRadius: theme('formElements.borderRadius', defaultTheme.borderRadius.default),
103-
padding: `${theme('formElements.verticalPadding', defaultTheme.spacing[2])} ${theme('formElements.horizontalPadding', defaultTheme.spacing[3])}`,
104-
lineHeight: theme('formElements.lineHeight', defaultTheme.lineHeight.normal),
124+
backgroundColor: options.backgroundColor,
125+
borderWidth: options.borderWidth,
126+
borderRadius: options.borderRadius,
127+
padding: `${options.verticalPadding} ${options.horizontalPadding}`,
128+
fontSize: options.fontSize,
129+
lineHeight: options.lineHeight,
105130
'&:focus': {
106131
outline: 'none',
107-
boxShadow: theme('formElements.focusShadow', defaultTheme.boxShadow.outline),
108-
borderColor: theme('formElements.focusBorderColor', defaultTheme.colors.blue[400]),
132+
boxShadow: options.focusShadow,
133+
borderColor: options.focusBorderColor,
109134
}
110135
},
111136
'.form-select': {
112-
backgroundColor: theme('formElements.backgroundColor'),
113-
borderWidth: theme('formElements.borderWidth', defaultTheme.borderWidth.default),
114-
borderRadius: theme('formElements.borderRadius', defaultTheme.borderRadius.default),
115-
paddingTop: theme('formElements.verticalPadding', defaultTheme.spacing[2]),
116-
paddingRight: `calc(${theme('formElements.selectIconOffset')} * 2 + ${theme('formElements.selectIconSize')})`,
117-
paddingBottom: theme('formElements.verticalPadding', defaultTheme.spacing[2]),
118-
paddingLeft: theme('formElements.horizontalPadding', defaultTheme.spacing[3]),
119-
lineHeight: theme('formElements.lineHeight', defaultTheme.lineHeight.normal),
137+
backgroundColor: options.backgroundColor,
138+
borderWidth: options.borderWidth,
139+
borderRadius: options.borderRadius,
140+
paddingTop: options.verticalPadding,
141+
paddingRight: `calc(${options.selectIconOffset} * 2 + ${options.selectIconSize})`,
142+
paddingBottom: options.verticalPadding,
143+
paddingLeft: options.horizontalPadding,
144+
fontSize: options.fontSize,
145+
lineHeight: options.lineHeight,
120146
appearance: 'none',
121-
backgroundImage: `url("${svgToDataUri(theme('formElements.selectIcon'))}")`,
122-
backgroundPosition: `right ${theme('formElements.selectIconOffset', defaultTheme.spacing[2])} center`,
147+
backgroundImage: `url("${svgToDataUri(options.selectIcon)}")`,
148+
backgroundPosition: `right ${options.selectIconOffset} center`,
123149
backgroundRepeat: 'no-repeat',
124-
backgroundSize: `${theme('formElements.selectIconSize', '1.5em')} ${theme('formElements.selectIconSize', '1.5em')}`,
150+
backgroundSize: `${options.selectIconSize} ${options.selectIconSize}`,
125151
'&::-ms-expand': {
126152
display: 'none',
127153
},
128154
'&:focus': {
129155
outline: 'none',
130-
boxShadow: theme('formElements.focusShadow', defaultTheme.boxShadow.outline),
131-
borderColor: theme('formElements.focusBorderColor', defaultTheme.colors.blue[400]),
156+
boxShadow: options.focusShadow,
157+
borderColor: options.focusBorderColor,
132158
}
133159
},
134160
})

0 commit comments

Comments
 (0)