tailwind-softpop-plugin 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/index.css +1 -0
- package/src/index.js +266 -46
package/package.json
CHANGED
package/src/index.css
CHANGED
package/src/index.js
CHANGED
|
@@ -25,6 +25,7 @@ module.exports = plugin(function ({ addComponents }) {
|
|
|
25
25
|
},
|
|
26
26
|
".btn": {
|
|
27
27
|
display: "inline-flex",
|
|
28
|
+
textWrap: "nowrap",
|
|
28
29
|
alignItems: "center",
|
|
29
30
|
justifyContent: "center",
|
|
30
31
|
gap: "0.5rem",
|
|
@@ -33,92 +34,311 @@ module.exports = plugin(function ({ addComponents }) {
|
|
|
33
34
|
cursor: "pointer",
|
|
34
35
|
userSelect: "none",
|
|
35
36
|
textDecoration: "none",
|
|
36
|
-
|
|
37
37
|
fontFamily: "var(--font-heading)",
|
|
38
38
|
fontWeight: "700",
|
|
39
39
|
fontSize: "1.125rem",
|
|
40
|
-
|
|
41
|
-
borderRadius: "999px",
|
|
40
|
+
borderRadius: "9999px",
|
|
42
41
|
borderWidth: "2px",
|
|
43
42
|
borderStyle: "solid",
|
|
44
|
-
borderColor: "var(--color-neutral-
|
|
45
|
-
|
|
46
|
-
boxShadow:
|
|
47
|
-
padding: "1rem 2rem",
|
|
43
|
+
borderColor: "var(--color-neutral-900)", // standard dark border
|
|
44
|
+
padding: "0.75rem 1.5rem", // Standard size
|
|
45
|
+
boxShadow: "4px 4px 0px var(--color-neutral-900)",
|
|
48
46
|
|
|
49
47
|
"&:hover": {
|
|
50
48
|
transform: "translate(-2px, -2px)",
|
|
51
|
-
boxShadow:
|
|
49
|
+
boxShadow: "6px 6px 0px var(--color-neutral-900)",
|
|
52
50
|
},
|
|
53
51
|
"&:active": {
|
|
54
52
|
transform: "translate(2px, 2px)",
|
|
55
|
-
boxShadow:
|
|
53
|
+
boxShadow: "2px 2px 0px var(--color-neutral-900)",
|
|
56
54
|
},
|
|
55
|
+
"&:disabled": {
|
|
56
|
+
opacity: "0.6",
|
|
57
|
+
cursor: "not-allowed",
|
|
58
|
+
transform: "none",
|
|
59
|
+
boxShadow: "none",
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
".btn-sm": {
|
|
63
|
+
padding: "0.5rem 1rem",
|
|
64
|
+
fontSize: "0.875rem",
|
|
65
|
+
},
|
|
66
|
+
".btn-lg": {
|
|
67
|
+
padding: "1rem 2rem",
|
|
68
|
+
fontSize: "1.25rem",
|
|
69
|
+
},
|
|
70
|
+
".btn-block": {
|
|
71
|
+
width: "100%",
|
|
72
|
+
display: "flex",
|
|
57
73
|
},
|
|
58
74
|
".btn-primary": {
|
|
59
|
-
backgroundColor: "var(--color-primary-
|
|
75
|
+
backgroundColor: "var(--color-primary-600)",
|
|
60
76
|
color: "#ffffff",
|
|
77
|
+
borderColor: "var(--color-neutral-900)",
|
|
78
|
+
"&:hover": {
|
|
79
|
+
backgroundColor: "var(--color-primary-700)",
|
|
80
|
+
},
|
|
61
81
|
},
|
|
62
82
|
".btn-secondary": {
|
|
63
83
|
backgroundColor: "var(--color-secondary-300)",
|
|
64
|
-
color: "var(--color-neutral-
|
|
84
|
+
color: "var(--color-neutral-900)",
|
|
85
|
+
borderColor: "var(--color-neutral-900)",
|
|
86
|
+
"&:hover": {
|
|
87
|
+
backgroundColor: "var(--color-secondary-400)",
|
|
88
|
+
},
|
|
65
89
|
},
|
|
66
90
|
".btn-outline": {
|
|
67
91
|
backgroundColor: "transparent",
|
|
68
|
-
color: "var(--color-neutral-
|
|
92
|
+
color: "var(--color-neutral-900)",
|
|
93
|
+
borderColor: "var(--color-neutral-900)",
|
|
94
|
+
"&:hover": {
|
|
95
|
+
backgroundColor: "var(--color-neutral-50)",
|
|
96
|
+
},
|
|
69
97
|
},
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
containerName: "card",
|
|
73
|
-
|
|
98
|
+
// New White Variant commonly used
|
|
99
|
+
".btn-white": {
|
|
74
100
|
backgroundColor: "#ffffff",
|
|
75
|
-
|
|
76
|
-
borderColor: "var(--color-neutral-
|
|
77
|
-
|
|
78
|
-
|
|
101
|
+
color: "var(--color-neutral-900)",
|
|
102
|
+
borderColor: "var(--color-neutral-900)",
|
|
103
|
+
"&:hover": {
|
|
104
|
+
backgroundColor: "var(--color-neutral-50)",
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
|
|
108
|
+
// CARDS
|
|
109
|
+
".card": {
|
|
110
|
+
position: "relative",
|
|
79
111
|
display: "flex",
|
|
80
112
|
flexDirection: "column",
|
|
81
|
-
|
|
82
|
-
borderRadius: "
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
113
|
+
backgroundColor: "#ffffff",
|
|
114
|
+
borderRadius: "1rem", // rounded-xl
|
|
115
|
+
borderWidth: "2px",
|
|
116
|
+
borderStyle: "solid",
|
|
117
|
+
borderColor: "var(--color-neutral-800)",
|
|
118
|
+
padding: "1.5rem", // p-6
|
|
119
|
+
boxShadow: "4px 4px 0px var(--color-neutral-800)", // shadow-hard
|
|
120
|
+
overflow: "hidden", // helpful for keeping children inside
|
|
121
|
+
},
|
|
122
|
+
".card-primary": {
|
|
123
|
+
backgroundColor: "var(--color-primary-50)",
|
|
124
|
+
borderColor: "var(--color-primary-600)", // specific border override
|
|
125
|
+
boxShadow: "4px 4px 0px var(--color-neutral-800)", // shadow usually stays dark
|
|
126
|
+
},
|
|
127
|
+
".card-secondary": {
|
|
128
|
+
backgroundColor: "var(--color-secondary-50)",
|
|
129
|
+
borderColor: "var(--color-neutral-800)",
|
|
130
|
+
},
|
|
131
|
+
".card-interactive": {
|
|
132
|
+
transitionProperty: "all",
|
|
133
|
+
transitionDuration: "200ms",
|
|
134
|
+
cursor: "pointer",
|
|
86
135
|
"&:hover": {
|
|
87
136
|
transform: "translateY(-4px)",
|
|
137
|
+
boxShadow: "6px 6px 0px var(--color-neutral-800)", // shadow-hard-hover equivalent
|
|
88
138
|
},
|
|
89
139
|
},
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
140
|
+
// Responsive Card Behavior using Container Queries
|
|
141
|
+
".card-wrapper": {
|
|
142
|
+
containerType: "inline-size",
|
|
143
|
+
width: "100%",
|
|
144
|
+
},
|
|
145
|
+
".card-responsive": {
|
|
146
|
+
gap: "1.5rem", // gap-6
|
|
147
|
+
// Default uses flex-col from .card base
|
|
148
|
+
|
|
149
|
+
// When card is wider than 450px, switch to horizontal
|
|
150
|
+
"@container (min-width: 450px)": {
|
|
151
|
+
flexDirection: "row",
|
|
152
|
+
alignItems: "center",
|
|
153
|
+
|
|
154
|
+
"& > .card-image-wrapper": {
|
|
155
|
+
marginBottom: "0",
|
|
156
|
+
flexShrink: "0",
|
|
157
|
+
},
|
|
158
|
+
"& > .card-content": {
|
|
159
|
+
textAlign: "left",
|
|
160
|
+
},
|
|
161
|
+
"& > .btn": {
|
|
162
|
+
width: "auto", // reset any full width buttons if needed
|
|
163
|
+
},
|
|
97
164
|
},
|
|
98
165
|
},
|
|
166
|
+
// Card Children Helpers
|
|
99
167
|
".card-title": {
|
|
168
|
+
fontFamily: "var(--font-heading)",
|
|
100
169
|
fontWeight: "700",
|
|
101
|
-
fontSize: "1.25rem",
|
|
102
|
-
lineHeight: "1.75rem",
|
|
170
|
+
fontSize: "1.25rem", // text-xl
|
|
103
171
|
marginBottom: "0.5rem",
|
|
104
172
|
color: "var(--color-neutral-800)",
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
173
|
+
},
|
|
174
|
+
".card-body": {
|
|
175
|
+
color: "var(--color-neutral-600)",
|
|
176
|
+
fontSize: "1rem",
|
|
177
|
+
},
|
|
178
|
+
".input": {
|
|
179
|
+
width: "100%",
|
|
180
|
+
borderRadius: "0.5rem",
|
|
181
|
+
borderWidth: "2px",
|
|
182
|
+
borderColor: "var(--color-neutral-300)",
|
|
183
|
+
backgroundColor: "#ffffff",
|
|
184
|
+
paddingBlock: "0.75rem",
|
|
185
|
+
paddingInline: "1rem", // pl-4 by default, override if icon present
|
|
186
|
+
fontWeight: "500",
|
|
187
|
+
color: "var(--color-neutral-800)",
|
|
188
|
+
boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
189
|
+
transitionProperty: "all",
|
|
190
|
+
transitionDuration: "150ms",
|
|
191
|
+
"&::placeholder": {
|
|
192
|
+
color: "var(--color-neutral-400)",
|
|
193
|
+
},
|
|
194
|
+
"&:focus": {
|
|
195
|
+
outline: "2px solid transparent",
|
|
196
|
+
outlineOffset: "2px",
|
|
197
|
+
borderColor: "var(--color-primary-600)",
|
|
198
|
+
boxShadow: "0 0 0 4px var(--color-primary-100)",
|
|
108
199
|
},
|
|
109
200
|
},
|
|
110
|
-
".
|
|
111
|
-
"
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
201
|
+
".input-error": {
|
|
202
|
+
borderColor: "rgb(239 68 68)", // red-500
|
|
203
|
+
backgroundColor: "rgb(254 242 242)", // red-50
|
|
204
|
+
color: "rgb(127 29 29)", // red-900
|
|
205
|
+
"&:focus": {
|
|
206
|
+
borderColor: "rgb(239 68 68)", // red-500
|
|
207
|
+
boxShadow: "0 0 0 4px rgb(254 226 226)", // red-100
|
|
116
208
|
},
|
|
117
209
|
},
|
|
118
|
-
".
|
|
119
|
-
"
|
|
120
|
-
|
|
210
|
+
".input-success": {
|
|
211
|
+
borderColor: "rgb(34 197 94)", // green-500
|
|
212
|
+
backgroundColor: "rgb(240 253 244)", // green-50
|
|
213
|
+
color: "rgb(20 83 45)", // green-900
|
|
214
|
+
"&:focus": {
|
|
215
|
+
borderColor: "rgb(34 197 94)", // green-500
|
|
216
|
+
boxShadow: "0 0 0 4px rgb(220 252 231)", // green-100
|
|
121
217
|
},
|
|
122
218
|
},
|
|
219
|
+
".textarea": {
|
|
220
|
+
width: "100%",
|
|
221
|
+
borderRadius: "0.5rem",
|
|
222
|
+
borderWidth: "2px",
|
|
223
|
+
borderColor: "var(--color-neutral-300)",
|
|
224
|
+
backgroundColor: "#ffffff",
|
|
225
|
+
paddingBlock: "0.75rem",
|
|
226
|
+
paddingInline: "1rem",
|
|
227
|
+
fontWeight: "500",
|
|
228
|
+
color: "var(--color-neutral-800)",
|
|
229
|
+
boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
230
|
+
transitionProperty: "all",
|
|
231
|
+
transitionDuration: "150ms",
|
|
232
|
+
resize: "none",
|
|
233
|
+
"&::placeholder": {
|
|
234
|
+
color: "var(--color-neutral-400)",
|
|
235
|
+
},
|
|
236
|
+
"&:focus": {
|
|
237
|
+
outline: "2px solid transparent",
|
|
238
|
+
outlineOffset: "2px",
|
|
239
|
+
borderColor: "var(--color-primary-600)",
|
|
240
|
+
boxShadow: "0 0 0 4px var(--color-primary-100)",
|
|
241
|
+
},
|
|
242
|
+
},
|
|
243
|
+
".select": {
|
|
244
|
+
width: "100%",
|
|
245
|
+
cursor: "pointer",
|
|
246
|
+
appearance: "none",
|
|
247
|
+
borderRadius: "0.5rem",
|
|
248
|
+
borderWidth: "2px",
|
|
249
|
+
borderColor: "var(--color-neutral-300)",
|
|
250
|
+
backgroundColor: "#ffffff",
|
|
251
|
+
paddingBlock: "0.75rem",
|
|
252
|
+
paddingRight: "2.5rem",
|
|
253
|
+
paddingLeft: "1rem",
|
|
254
|
+
fontWeight: "500",
|
|
255
|
+
color: "var(--color-neutral-800)",
|
|
256
|
+
boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
257
|
+
transitionProperty: "all",
|
|
258
|
+
transitionDuration: "150ms",
|
|
259
|
+
"&:focus": {
|
|
260
|
+
outline: "2px solid transparent",
|
|
261
|
+
outlineOffset: "2px",
|
|
262
|
+
borderColor: "var(--color-primary-600)",
|
|
263
|
+
boxShadow: "0 0 0 4px var(--color-primary-100)",
|
|
264
|
+
},
|
|
265
|
+
},
|
|
266
|
+
".checkbox": {
|
|
267
|
+
appearance: "none",
|
|
268
|
+
height: "1.5rem",
|
|
269
|
+
width: "1.5rem",
|
|
270
|
+
flexShrink: 0,
|
|
271
|
+
cursor: "pointer",
|
|
272
|
+
borderRadius: "0.25rem",
|
|
273
|
+
borderWidth: "2px",
|
|
274
|
+
borderColor: "var(--color-neutral-400)",
|
|
275
|
+
backgroundColor: "#ffffff",
|
|
276
|
+
color: "var(--color-primary-600)",
|
|
277
|
+
transitionProperty: "all",
|
|
278
|
+
transitionDuration: "150ms",
|
|
279
|
+
"&:focus": {
|
|
280
|
+
outline: "2px solid transparent",
|
|
281
|
+
outlineOffset: "2px",
|
|
282
|
+
boxShadow: "0 0 0 4px var(--color-primary-200)",
|
|
283
|
+
borderColor: "var(--color-primary-600)",
|
|
284
|
+
},
|
|
285
|
+
"&:checked": {
|
|
286
|
+
backgroundColor: "currentColor",
|
|
287
|
+
borderColor: "currentColor",
|
|
288
|
+
backgroundImage: `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")`,
|
|
289
|
+
},
|
|
290
|
+
},
|
|
291
|
+
".radio": {
|
|
292
|
+
appearance: "none",
|
|
293
|
+
height: "1.25rem",
|
|
294
|
+
width: "1.25rem",
|
|
295
|
+
flexShrink: 0,
|
|
296
|
+
cursor: "pointer",
|
|
297
|
+
borderRadius: "9999px",
|
|
298
|
+
borderWidth: "2px",
|
|
299
|
+
borderColor: "var(--color-neutral-400)",
|
|
300
|
+
color: "var(--color-primary-600)",
|
|
301
|
+
backgroundColor: "#ffffff",
|
|
302
|
+
transitionProperty: "all",
|
|
303
|
+
transitionDuration: "150ms",
|
|
304
|
+
"&:focus": {
|
|
305
|
+
outline: "2px solid transparent",
|
|
306
|
+
outlineOffset: "2px",
|
|
307
|
+
boxShadow: "0 0 0 4px var(--color-primary-200)",
|
|
308
|
+
borderColor: "var(--color-primary-600)",
|
|
309
|
+
},
|
|
310
|
+
"&:checked": {
|
|
311
|
+
borderColor: "currentColor",
|
|
312
|
+
borderWidth: "6px",
|
|
313
|
+
},
|
|
314
|
+
},
|
|
315
|
+
".badge": {
|
|
316
|
+
display: "inline-flex",
|
|
317
|
+
width: "fit-content",
|
|
318
|
+
alignItems: "center",
|
|
319
|
+
paddingInline: "calc(var(--spacing) * 3) /* 0.75rem = 12px */",
|
|
320
|
+
paddingBlock: "calc(var(--spacing) * 1) /* 0.25rem = 4px */",
|
|
321
|
+
borderRadius: "calc(infinity * 1px)",
|
|
322
|
+
fontSize: "var(--text-sm) /* 0.875rem = 14px */",
|
|
323
|
+
lineHeight: "var(--tw-leading, var(--text-sm--line-height))",
|
|
324
|
+
fontWeight: "var(--font-weight-bold) /* 700 */",
|
|
325
|
+
borderStyle: "var(--tw-border-style)",
|
|
326
|
+
borderWidth: "2px",
|
|
327
|
+
},
|
|
328
|
+
".badge-primary": {
|
|
329
|
+
backgroundColor: "var(--color-primary-100)",
|
|
330
|
+
color: "var(--color-primary-800)",
|
|
331
|
+
borderColor: "var(--color-primary-800)",
|
|
332
|
+
},
|
|
333
|
+
".badge-secondary": {
|
|
334
|
+
backgroundColor: "var(--color-secondary-100)",
|
|
335
|
+
color: "var(--color-secondary-800)",
|
|
336
|
+
borderColor: "var(--color-secondary-800)",
|
|
337
|
+
},
|
|
338
|
+
".badge-outline": {
|
|
339
|
+
backgroundColor: "transparent",
|
|
340
|
+
color: "var(--color-neutral-800)",
|
|
341
|
+
borderColor: "var(--color-neutral-800)",
|
|
342
|
+
},
|
|
123
343
|
});
|
|
124
344
|
});
|