Skip to content

Commit b71e60f

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent a036bd9 commit b71e60f

9 files changed

Lines changed: 578 additions & 4 deletions

File tree

‎packages/headwind/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ export * from './parser'
55
export * from './rules'
66
export * from './scanner'
77
export * from './types'
8+
export * from './preflight'
9+
export * from './preflight-forms'

‎packages/headwind/src/parser.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ export function parseClass(className: string): ParsedClass {
9595
'space-y',
9696
'ring-offset',
9797
'underline-offset',
98+
'outline-offset',
9899
'backdrop-blur',
99100
'backdrop-brightness',
100101
'backdrop-contrast',
@@ -103,7 +104,24 @@ export function parseClass(className: string): ParsedClass {
103104
'backdrop-saturate',
104105
'backdrop-sepia',
105106
'hue-rotate',
107+
'drop-shadow',
108+
'mask-clip',
109+
'mask-composite',
110+
'mask-image',
111+
'mask-mode',
112+
'mask-origin',
113+
'mask-position',
114+
'mask-repeat',
115+
'mask-size',
116+
'mask-type',
117+
'perspective-origin',
106118
'justify-self',
119+
'form-input',
120+
'form-textarea',
121+
'form-select',
122+
'form-multiselect',
123+
'form-checkbox',
124+
'form-radio',
107125
]
108126

109127
// Special case for divide-x and divide-y (without values, they should be treated as compound)

‎packages/headwind/src/preflight-forms.ts‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
import type { Preflight } from './types'
2+
3+
/**
4+
* Tailwind Forms preflight styles
5+
* Provides default styling for form elements to make them easy to customize with utilities
6+
*/
7+
export const tailwindFormsPreflight: Preflight = {
8+
getCSS: () => `
9+
/* Tailwind Forms */
10+
11+
[type='text'],
12+
[type='email'],
13+
[type='url'],
14+
[type='password'],
15+
[type='number'],
16+
[type='date'],
17+
[type='datetime-local'],
18+
[type='month'],
19+
[type='search'],
20+
[type='tel'],
21+
[type='time'],
22+
[type='week'],
23+
textarea,
24+
select {
25+
appearance: none;
26+
background-color: #fff;
27+
border-color: #6b7280;
28+
border-width: 1px;
29+
border-radius: 0px;
30+
padding-top: 0.5rem;
31+
padding-right: 0.75rem;
32+
padding-bottom: 0.5rem;
33+
padding-left: 0.75rem;
34+
font-size: 1rem;
35+
line-height: 1.5rem;
36+
--tw-shadow: 0 0 #0000;
37+
}
38+
39+
[type='text']:focus,
40+
[type='email']:focus,
41+
[type='url']:focus,
42+
[type='password']:focus,
43+
[type='number']:focus,
44+
[type='date']:focus,
45+
[type='datetime-local']:focus,
46+
[type='month']:focus,
47+
[type='search']:focus,
48+
[type='tel']:focus,
49+
[type='time']:focus,
50+
[type='week']:focus,
51+
textarea:focus,
52+
select:focus {
53+
outline: 2px solid transparent;
54+
outline-offset: 2px;
55+
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
56+
--tw-ring-offset-width: 0px;
57+
--tw-ring-offset-color: #fff;
58+
--tw-ring-color: #2563eb;
59+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
60+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
61+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
62+
border-color: #2563eb;
63+
}
64+
65+
input::placeholder,
66+
textarea::placeholder {
67+
color: #6b7280;
68+
opacity: 1;
69+
}
70+
71+
::-webkit-datetime-edit-fields-wrapper {
72+
padding: 0;
73+
}
74+
75+
::-webkit-date-and-time-value {
76+
min-height: 1.5em;
77+
text-align: inherit;
78+
}
79+
80+
::-webkit-datetime-edit {
81+
display: inline-flex;
82+
}
83+
84+
::-webkit-datetime-edit,
85+
::-webkit-datetime-edit-year-field,
86+
::-webkit-datetime-edit-month-field,
87+
::-webkit-datetime-edit-day-field,
88+
::-webkit-datetime-edit-hour-field,
89+
::-webkit-datetime-edit-minute-field,
90+
::-webkit-datetime-edit-second-field,
91+
::-webkit-datetime-edit-millisecond-field,
92+
::-webkit-datetime-edit-meridiem-field {
93+
padding-top: 0;
94+
padding-bottom: 0;
95+
}
96+
97+
select {
98+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
99+
background-position: right 0.5rem center;
100+
background-repeat: no-repeat;
101+
background-size: 1.5em 1.5em;
102+
padding-right: 2.5rem;
103+
print-color-adjust: exact;
104+
}
105+
106+
select[multiple],
107+
select[size]:where([size]:not([size="1"])) {
108+
background-image: initial;
109+
background-position: initial;
110+
background-repeat: unset;
111+
background-size: initial;
112+
padding-right: 0.75rem;
113+
print-color-adjust: unset;
114+
}
115+
116+
[type='checkbox'],
117+
[type='radio'] {
118+
appearance: none;
119+
padding: 0;
120+
print-color-adjust: exact;
121+
display: inline-block;
122+
vertical-align: middle;
123+
background-origin: border-box;
124+
user-select: none;
125+
flex-shrink: 0;
126+
height: 1rem;
127+
width: 1rem;
128+
color: #2563eb;
129+
background-color: #fff;
130+
border-color: #6b7280;
131+
border-width: 1px;
132+
--tw-shadow: 0 0 #0000;
133+
}
134+
135+
[type='checkbox'] {
136+
border-radius: 0px;
137+
}
138+
139+
[type='radio'] {
140+
border-radius: 100%;
141+
}
142+
143+
[type='checkbox']:focus,
144+
[type='radio']:focus {
145+
outline: 2px solid transparent;
146+
outline-offset: 2px;
147+
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
148+
--tw-ring-offset-width: 2px;
149+
--tw-ring-offset-color: #fff;
150+
--tw-ring-color: #2563eb;
151+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
152+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
153+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
154+
}
155+
156+
[type='checkbox']:checked,
157+
[type='radio']:checked {
158+
border-color: transparent;
159+
background-color: currentColor;
160+
background-size: 100% 100%;
161+
background-position: center;
162+
background-repeat: no-repeat;
163+
}
164+
165+
[type='checkbox']:checked {
166+
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath 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'/%3e%3c/svg%3e");
167+
}
168+
169+
@media (forced-colors: active) {
170+
[type='checkbox']:checked {
171+
appearance: auto;
172+
}
173+
}
174+
175+
[type='radio']:checked {
176+
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
177+
}
178+
179+
@media (forced-colors: active) {
180+
[type='radio']:checked {
181+
appearance: auto;
182+
}
183+
}
184+
185+
[type='checkbox']:checked:hover,
186+
[type='checkbox']:checked:focus,
187+
[type='radio']:checked:hover,
188+
[type='radio']:checked:focus {
189+
border-color: transparent;
190+
background-color: currentColor;
191+
}
192+
193+
[type='checkbox']:indeterminate {
194+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
195+
border-color: transparent;
196+
background-color: currentColor;
197+
background-size: 100% 100%;
198+
background-position: center;
199+
background-repeat: no-repeat;
200+
}
201+
202+
@media (forced-colors: active) {
203+
[type='checkbox']:indeterminate {
204+
appearance: auto;
205+
}
206+
}
207+
208+
[type='checkbox']:indeterminate:hover,
209+
[type='checkbox']:indeterminate:focus {
210+
border-color: transparent;
211+
background-color: currentColor;
212+
}
213+
214+
[type='file'] {
215+
background: unset;
216+
border-color: inherit;
217+
border-width: 0;
218+
border-radius: 0;
219+
padding: 0;
220+
font-size: unset;
221+
line-height: inherit;
222+
}
223+
224+
[type='file']:focus {
225+
outline: 1px solid ButtonText;
226+
outline: 1px auto -webkit-focus-ring-color;
227+
}
228+
`,
229+
}

0 commit comments

Comments
 (0)