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

Commit 4747a90

Browse files
adamwathanadamwathan
committed
Prep plugin for configurability
1 parent be6113b commit 4747a90

File tree

2 files changed

+62
-39
lines changed

2 files changed

+62
-39
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"cssnano": "^4.1.10",
1616
"dedent": "^0.7.0",
1717
"highlight.js": "^9.15.6",
18+
"mini-svg-data-uri": "^1.0.3",
1819
"next": "^8.1.1-canary.34",
1920
"postcss-custom-properties": "^8.0.10",
2021
"postcss-import": "^12.0.1",

‎tailwind.config.js‎

Lines changed: 61 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,33 @@
11
const defaultTheme = require('tailwindcss/defaultTheme')
2+
const svgToDataUri = require('mini-svg-data-uri')
23

34
module.exports = {
45
theme: {
6+
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',
25+
}),
526
extend: {},
627
},
728
variants: {},
829
plugins: [
9-
function ({ addUtilities, addComponents, theme }) {
30+
function ({ addUtilities }) {
1031
addUtilities({
1132
'.sr-only': {
1233
position: 'absolute',
@@ -19,29 +40,30 @@ module.exports = {
1940
border: '0',
2041
}
2142
})
22-
43+
},
44+
function ({ addComponents, theme }) {
2345
addComponents({
2446
'.form-checkbox': {
2547
appearance: 'none',
2648
display: 'inline-block',
27-
height: '1em',
28-
width: '1em',
49+
height: theme('formElements.checkboxSize'),
50+
width: theme('formElements.checkboxSize'),
2951
verticalAlign: 'middle',
30-
borderWidth: theme('borderWidth.default', defaultTheme.borderWidth.default),
31-
borderRadius: theme('borderRadius.default', defaultTheme.borderRadius.default),
32-
backgroundColor: '#fff',
52+
borderWidth: theme('formElements.borderWidth', defaultTheme.borderWidth.default),
53+
borderRadius: theme('formElements.borderRadius', defaultTheme.borderRadius.default),
54+
backgroundColor: theme('formElements.backgroundColor'),
3355
userSelect: 'none',
3456
'input[type=checkbox]:focus + &, input[type=checkbox]&:focus': {
3557
outline: 'none',
36-
boxShadow: theme('boxShadow.outline', defaultTheme.boxShadow.outline),
58+
boxShadow: theme('formElements.focusShadow', defaultTheme.boxShadow.outline),
3759
},
3860
'input[type=checkbox]:focus:not(:checked) + &, input[type=checkbox]&:focus:not(:checked)': {
39-
borderColor: defaultTheme.colors.blue[400],
61+
borderColor: theme('formElements.focusBorderColor', defaultTheme.colors.blue[400]),
4062
},
4163
'input[type=checkbox]:checked + &, input[type=checkbox]&:checked': {
4264
backgroundColor: 'currentColor',
4365
borderColor: 'currentColor',
44-
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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'/%3E%3C/svg%3E")`,
66+
backgroundImage: `url("${svgToDataUri(theme('formElements.checkboxIcon'))}")`,
4567
backgroundSize: 'cover',
4668
backgroundPosition: 'center',
4769
backgroundRepeat: 'no-repeat',
@@ -50,63 +72,63 @@ module.exports = {
5072
'.form-radio': {
5173
appearance: 'none',
5274
display: 'inline-block',
53-
height: '1em',
54-
width: '1em',
75+
height: theme('formElements.radioSize'),
76+
width: theme('formElements.radioSize'),
5577
verticalAlign: 'middle',
56-
borderWidth: theme('borderWidth.default', defaultTheme.borderWidth.default),
78+
borderWidth: theme('formElements.borderWidth', defaultTheme.borderWidth.default),
5779
borderRadius: '9999px',
58-
backgroundColor: '#fff',
80+
backgroundColor: theme('formElements.backgroundColor'),
5981
userSelect: 'none',
6082
'input[type=radio]:focus + &, input[type=radio]&:focus': {
6183
outline: 'none',
62-
boxShadow: theme('boxShadow.outline', defaultTheme.boxShadow.outline),
84+
boxShadow: theme('formElements.focusShadow', defaultTheme.boxShadow.outline),
6385
},
6486
'input[type=radio]:focus:not(:checked) + &, input[type=radio]&:focus:not(:checked)': {
65-
borderColor: defaultTheme.colors.blue[400],
87+
borderColor: theme('formElements.focusBorderColor', defaultTheme.colors.blue[400]),
6688
},
6789
'input[type=radio]:checked + &, input[type=radio]&:checked': {
68-
backgroundColor: 'currentColor',
69-
borderColor: 'currentColor',
70-
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E")`,
90+
backgroundColor: theme('formElements.checkedColor', 'currentColor'),
91+
borderColor: theme('formElements.checkedColor', 'currentColor'),
92+
backgroundImage: `url("${svgToDataUri(theme('formElements.radioIcon'))}")`,
7193
backgroundSize: 'cover',
7294
backgroundPosition: 'center',
7395
backgroundRepeat: 'no-repeat',
7496
},
7597
},
7698
'.form-input, .form-textarea, .form-multiselect': {
7799
appearance: 'none',
78-
backgroundColor: '#fff',
79-
borderWidth: theme('borderWidth.default', defaultTheme.borderWidth.default),
80-
borderRadius: theme('borderRadius.default', defaultTheme.borderRadius.default),
81-
padding: `${theme('spacing.2', defaultTheme.spacing[2])} ${theme('spacing.3', defaultTheme.spacing[3])}`,
82-
lineHeight: theme('lineHeight.normal', defaultTheme.lineHeight.normal),
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),
83105
'&:focus': {
84106
outline: 'none',
85-
boxShadow: theme('boxShadow.outline', defaultTheme.boxShadow.outline),
86-
borderColor: defaultTheme.colors.blue[400],
107+
boxShadow: theme('formElements.focusShadow', defaultTheme.boxShadow.outline),
108+
borderColor: theme('formElements.focusBorderColor', defaultTheme.colors.blue[400]),
87109
}
88110
},
89111
'.form-select': {
90-
backgroundColor: '#fff',
91-
borderWidth: theme('borderWidth.default', defaultTheme.borderWidth.default),
92-
borderRadius: theme('borderRadius.default', defaultTheme.borderRadius.default),
93-
paddingTop: `${theme('spacing.2', defaultTheme.spacing[2])}`,
94-
paddingRight: `${theme('spacing.10', defaultTheme.spacing[10])}`,
95-
paddingBottom: `${theme('spacing.2', defaultTheme.spacing[2])}`,
96-
paddingLeft: `${theme('spacing.3', defaultTheme.spacing[3])}`,
97-
lineHeight: theme('lineHeight.normal', defaultTheme.lineHeight.normal),
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),
98120
appearance: 'none',
99-
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='${theme('colors.gray.500', defaultTheme.colors.gray[500]).replace('#', '%23')}' viewBox='0 0 24 24' %3E%3Cpath 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'/%3E%3C/svg%3E")`,
100-
backgroundPosition: `right ${theme('spacing.2', defaultTheme.spacing[2])} center`,
121+
backgroundImage: `url("${svgToDataUri(theme('formElements.selectIcon'))}")`,
122+
backgroundPosition: `right ${theme('formElements.selectIconOffset', defaultTheme.spacing[2])} center`,
101123
backgroundRepeat: 'no-repeat',
102-
backgroundSize: '1.5em 1.5em',
124+
backgroundSize: `${theme('formElements.selectIconSize', '1.5em')} ${theme('formElements.selectIconSize', '1.5em')}`,
103125
'&::-ms-expand': {
104126
display: 'none',
105127
},
106128
'&:focus': {
107129
outline: 'none',
108-
boxShadow: theme('boxShadow.outline', defaultTheme.boxShadow.outline),
109-
borderColor: defaultTheme.colors.blue[400],
130+
boxShadow: theme('formElements.focusShadow', defaultTheme.boxShadow.outline),
131+
borderColor: theme('formElements.focusBorderColor', defaultTheme.colors.blue[400]),
110132
}
111133
},
112134
})

0 commit comments

Comments
 (0)