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

Commit f31a4ab

Browse files
adamwathanadamwathan
committed
Rewrite with much more flexible configuration support
It would be nice if I had more than one commit here but c'est la vie. This commit history would have been a dumpster fire of me constantly changing my mind and implementing, unimplemeneting, then reimplementing the same things over and over anyways.
1 parent a0c04a6 commit f31a4ab

File tree

4 files changed

+338
-164
lines changed

4 files changed

+338
-164
lines changed

‎index.js‎

Lines changed: 0 additions & 163 deletions
This file was deleted.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
"tailwindcss": "^1.0"
1818
},
1919
"dependencies": {
20-
"mini-svg-data-uri": "^1.0.3"
20+
"lodash": "^4.17.11",
21+
"mini-svg-data-uri": "^1.0.3",
22+
"traverse": "^0.6.6"
2123
},
2224
"devDependencies": {
2325
"@fullhuman/postcss-purgecss": "^1.2.0",

‎src/defaultOptions.js‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
const defaultTheme = require('tailwindcss/resolveConfig')(require('tailwindcss/defaultConfig')).theme
2+
3+
module.exports = {
4+
input: {
5+
appearance: 'none',
6+
backgroundColor: defaultTheme.colors.white,
7+
borderColor: defaultTheme.borderColor.default,
8+
borderWidth: defaultTheme.borderWidth.default,
9+
borderRadius: defaultTheme.borderRadius.default,
10+
paddingTop: defaultTheme.spacing[2],
11+
paddingRight: defaultTheme.spacing[3],
12+
paddingBottom: defaultTheme.spacing[2],
13+
paddingLeft: defaultTheme.spacing[3],
14+
fontSize: defaultTheme.fontSize.base,
15+
lineHeight: defaultTheme.lineHeight.normal,
16+
'&::placeholder': {
17+
color: defaultTheme.colors.gray[500],
18+
opacity: '1',
19+
},
20+
'&:focus': {
21+
outline: 'none',
22+
boxShadow: defaultTheme.boxShadow.outline,
23+
borderColor: defaultTheme.colors.blue[400],
24+
},
25+
},
26+
textarea: {
27+
appearance: 'none',
28+
backgroundColor: defaultTheme.colors.white,
29+
borderColor: defaultTheme.borderColor.default,
30+
borderWidth: defaultTheme.borderWidth.default,
31+
borderRadius: defaultTheme.borderRadius.default,
32+
paddingTop: defaultTheme.spacing[2],
33+
paddingRight: defaultTheme.spacing[3],
34+
paddingBottom: defaultTheme.spacing[2],
35+
paddingLeft: defaultTheme.spacing[3],
36+
fontSize: defaultTheme.fontSize.base,
37+
lineHeight: defaultTheme.lineHeight.normal,
38+
'&::placeholder': {
39+
color: defaultTheme.colors.gray[500],
40+
opacity: '1',
41+
},
42+
'&:focus': {
43+
outline: 'none',
44+
boxShadow: defaultTheme.boxShadow.outline,
45+
borderColor: defaultTheme.colors.blue[400],
46+
},
47+
},
48+
multiselect: {
49+
appearance: 'none',
50+
backgroundColor: defaultTheme.colors.white,
51+
borderColor: defaultTheme.borderColor.default,
52+
borderWidth: defaultTheme.borderWidth.default,
53+
borderRadius: defaultTheme.borderRadius.default,
54+
paddingTop: defaultTheme.spacing[2],
55+
paddingRight: defaultTheme.spacing[3],
56+
paddingBottom: defaultTheme.spacing[2],
57+
paddingLeft: defaultTheme.spacing[3],
58+
fontSize: defaultTheme.fontSize.base,
59+
lineHeight: defaultTheme.lineHeight.normal,
60+
'&:focus': {
61+
outline: 'none',
62+
boxShadow: defaultTheme.boxShadow.outline,
63+
borderColor: defaultTheme.colors.blue[400],
64+
},
65+
},
66+
select: {
67+
appearance: 'none',
68+
colorAdjust: 'exact',
69+
'&::-ms-expand': {
70+
border: 'none', // The select padding is causing some whitespace around the chevron which looks weird with a border
71+
'@media not print': {
72+
display: 'none',
73+
},
74+
},
75+
backgroundRepeat: 'no-repeat',
76+
backgroundColor: defaultTheme.colors.white,
77+
borderColor: defaultTheme.borderColor.default,
78+
borderWidth: defaultTheme.borderWidth.default,
79+
borderRadius: defaultTheme.borderRadius.default,
80+
paddingTop: defaultTheme.spacing[2],
81+
paddingRight: defaultTheme.spacing[10],
82+
paddingBottom: defaultTheme.spacing[2],
83+
paddingLeft: defaultTheme.spacing[3],
84+
fontSize: defaultTheme.fontSize.base,
85+
lineHeight: defaultTheme.lineHeight.normal,
86+
iconColor: defaultTheme.colors.gray[500],
87+
backgroundPosition: `right ${defaultTheme.spacing[2]} center`,
88+
backgroundSize: `1.5em 1.5em`,
89+
'&:focus': {
90+
outline: 'none',
91+
boxShadow: defaultTheme.boxShadow.outline,
92+
borderColor: defaultTheme.colors.blue[400],
93+
},
94+
},
95+
checkbox: {
96+
appearance: 'none',
97+
colorAdjust: 'exact',
98+
'&::-ms-check': {
99+
'@media not print': {
100+
color: 'transparent', // Hide the check
101+
background: 'inherit',
102+
borderColor: 'inherit',
103+
borderRadius: 'inherit',
104+
}
105+
},
106+
display: 'inline-block',
107+
verticalAlign: 'middle',
108+
backgroundOrigin: 'border-box',
109+
userSelect: 'none',
110+
flexShrink: 0,
111+
height: '1em',
112+
width: '1em',
113+
borderColor: defaultTheme.borderColor.default,
114+
borderWidth: defaultTheme.borderWidth.default,
115+
borderRadius: defaultTheme.borderRadius.default,
116+
backgroundColor: defaultTheme.colors.white,
117+
'&:focus': {
118+
outline: 'none',
119+
boxShadow: defaultTheme.boxShadow.outline,
120+
borderColor: defaultTheme.colors.blue[400],
121+
},
122+
'&:checked': {
123+
backgroundColor: defaultTheme.colors.blue[500],
124+
borderColor: defaultTheme.colors.blue[500],
125+
backgroundSize: '100% 100%',
126+
backgroundPosition: 'center',
127+
backgroundRepeat: 'no-repeat',
128+
iconColor: defaultTheme.colors.white,
129+
},
130+
},
131+
radio: {
132+
appearance: 'none',
133+
colorAdjust: 'exact',
134+
'&::-ms-check': {
135+
'@media not print': {
136+
color: 'transparent', // Hide the check
137+
background: 'inherit',
138+
borderColor: 'inherit',
139+
borderRadius: 'inherit',
140+
}
141+
},
142+
display: 'inline-block',
143+
verticalAlign: 'middle',
144+
backgroundOrigin: 'border-box',
145+
userSelect: 'none',
146+
flexShrink: 0,
147+
borderRadius: '100%',
148+
height: '1em',
149+
width: '1em',
150+
borderColor: defaultTheme.borderColor.default,
151+
borderWidth: defaultTheme.borderWidth.default,
152+
backgroundColor: defaultTheme.colors.white,
153+
'&:focus': {
154+
outline: 'none',
155+
boxShadow: defaultTheme.boxShadow.outline,
156+
borderColor: defaultTheme.colors.blue[400],
157+
},
158+
'&:checked': {
159+
backgroundColor: defaultTheme.colors.blue[500],
160+
borderColor: defaultTheme.colors.blue[500],
161+
backgroundSize: '100% 100%',
162+
backgroundPosition: 'center',
163+
backgroundRepeat: 'no-repeat',
164+
iconColor: defaultTheme.colors.white,
165+
},
166+
}
167+
}

0 commit comments

Comments
 (0)