@unocss/preset-mini 0.23.0 → 0.24.3
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/README.md +1 -1
- package/dist/chunks/default.cjs +3 -0
- package/dist/chunks/default.mjs +3 -1
- package/dist/chunks/default2.cjs +119 -133
- package/dist/chunks/default2.mjs +121 -134
- package/dist/chunks/default3.cjs +9 -4
- package/dist/chunks/default3.mjs +10 -5
- package/dist/chunks/utilities.cjs +129 -112
- package/dist/chunks/utilities.mjs +128 -114
- package/dist/chunks/variants.mjs +1 -1
- package/dist/{colors-db01a23e.d.ts → colors-06de139a.d.ts} +1 -1
- package/dist/colors.d.ts +2 -2
- package/dist/{default-c46850c2.d.ts → default-595a2a04.d.ts} +1 -1
- package/dist/index.d.ts +5 -5
- package/dist/rules.cjs +0 -1
- package/dist/rules.d.ts +2 -3
- package/dist/rules.mjs +1 -1
- package/dist/theme.cjs +1 -0
- package/dist/theme.d.ts +12 -5
- package/dist/theme.mjs +1 -1
- package/dist/{types-154878eb.d.ts → types-f185ef8d.d.ts} +1 -0
- package/dist/{utilities-8c324eff.d.ts → utilities-df1ea892.d.ts} +6 -5
- package/dist/utils.cjs +3 -0
- package/dist/utils.d.ts +5 -3
- package/dist/utils.mjs +2 -2
- package/dist/variants.d.ts +4 -4
- package/package.json +5 -5
package/README.md
CHANGED
package/dist/chunks/default.cjs
CHANGED
|
@@ -103,6 +103,7 @@ const breakpoints = {
|
|
|
103
103
|
"xl": "1280px",
|
|
104
104
|
"2xl": "1536px"
|
|
105
105
|
};
|
|
106
|
+
const verticalBreakpoints = { ...breakpoints };
|
|
106
107
|
const borderRadius = {
|
|
107
108
|
"DEFAULT": "0.25rem",
|
|
108
109
|
"none": "0px",
|
|
@@ -204,6 +205,7 @@ const theme = {
|
|
|
204
205
|
fontFamily,
|
|
205
206
|
fontSize,
|
|
206
207
|
breakpoints,
|
|
208
|
+
verticalBreakpoints,
|
|
207
209
|
borderRadius,
|
|
208
210
|
lineHeight,
|
|
209
211
|
letterSpacing,
|
|
@@ -235,5 +237,6 @@ exports.textIndent = textIndent;
|
|
|
235
237
|
exports.textShadow = textShadow;
|
|
236
238
|
exports.textStrokeWidth = textStrokeWidth;
|
|
237
239
|
exports.theme = theme;
|
|
240
|
+
exports.verticalBreakpoints = verticalBreakpoints;
|
|
238
241
|
exports.width = width;
|
|
239
242
|
exports.wordSpacing = wordSpacing;
|
package/dist/chunks/default.mjs
CHANGED
|
@@ -101,6 +101,7 @@ const breakpoints = {
|
|
|
101
101
|
"xl": "1280px",
|
|
102
102
|
"2xl": "1536px"
|
|
103
103
|
};
|
|
104
|
+
const verticalBreakpoints = { ...breakpoints };
|
|
104
105
|
const borderRadius = {
|
|
105
106
|
"DEFAULT": "0.25rem",
|
|
106
107
|
"none": "0px",
|
|
@@ -202,6 +203,7 @@ const theme = {
|
|
|
202
203
|
fontFamily,
|
|
203
204
|
fontSize,
|
|
204
205
|
breakpoints,
|
|
206
|
+
verticalBreakpoints,
|
|
205
207
|
borderRadius,
|
|
206
208
|
lineHeight,
|
|
207
209
|
letterSpacing,
|
|
@@ -215,4 +217,4 @@ const theme = {
|
|
|
215
217
|
easing
|
|
216
218
|
};
|
|
217
219
|
|
|
218
|
-
export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, borderRadius as j, boxShadow as k, lineHeight as l, easing as m, baseSize as n, width as o, maxWidth as p, height as q, maxHeight as r, theme as t, wordSpacing as w };
|
|
220
|
+
export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, borderRadius as j, boxShadow as k, lineHeight as l, easing as m, baseSize as n, width as o, maxWidth as p, height as q, maxHeight as r, theme as t, verticalBreakpoints as v, wordSpacing as w };
|
package/dist/chunks/default2.cjs
CHANGED
|
@@ -82,31 +82,28 @@ const borderColorResolver = (direction) => ([, body], { theme }) => {
|
|
|
82
82
|
const data = utilities.parseColor(body, theme);
|
|
83
83
|
if (!data)
|
|
84
84
|
return;
|
|
85
|
-
const { alpha,
|
|
86
|
-
if (
|
|
87
|
-
return;
|
|
88
|
-
if (rgba) {
|
|
85
|
+
const { alpha, color, cssColor } = data;
|
|
86
|
+
if (cssColor) {
|
|
89
87
|
if (alpha != null) {
|
|
90
88
|
return {
|
|
91
|
-
[`border${direction}-color`]:
|
|
89
|
+
[`border${direction}-color`]: utilities.colorToString(cssColor, alpha)
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
if (direction === "") {
|
|
93
|
+
return {
|
|
94
|
+
"--un-border-opacity": cssColor.alpha ?? 1,
|
|
95
|
+
[`border${direction}-color`]: utilities.colorToString(cssColor, `var(--un-border${direction}-opacity)`)
|
|
92
96
|
};
|
|
93
97
|
} else {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
} else {
|
|
100
|
-
return {
|
|
101
|
-
"--un-border-opacity": (opacity && utilities.handler.cssvar(opacity)) ?? 1,
|
|
102
|
-
[`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
|
|
103
|
-
[`border${direction}-color`]: `rgba(${rgba.join(",")},var(--un-border${direction}-opacity))`
|
|
104
|
-
};
|
|
105
|
-
}
|
|
98
|
+
return {
|
|
99
|
+
"--un-border-opacity": cssColor.alpha ?? 1,
|
|
100
|
+
[`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
|
|
101
|
+
[`border${direction}-color`]: utilities.colorToString(cssColor, `var(--un-border${direction}-opacity)`)
|
|
102
|
+
};
|
|
106
103
|
}
|
|
107
|
-
} else {
|
|
104
|
+
} else if (color) {
|
|
108
105
|
return {
|
|
109
|
-
[`border${direction}-color`]: color.replace("%alpha", `${alpha
|
|
106
|
+
[`border${direction}-color`]: color.replace("%alpha", `${alpha ?? 1}`)
|
|
110
107
|
};
|
|
111
108
|
}
|
|
112
109
|
};
|
|
@@ -204,118 +201,6 @@ const flex = [
|
|
|
204
201
|
["flex-nowrap", { "flex-wrap": "nowrap" }]
|
|
205
202
|
];
|
|
206
203
|
|
|
207
|
-
const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
|
|
208
|
-
const displays = [
|
|
209
|
-
["inline", { display: "inline" }],
|
|
210
|
-
["block", { display: "block" }],
|
|
211
|
-
["inline-block", { display: "inline-block" }],
|
|
212
|
-
["contents", { display: "contents" }],
|
|
213
|
-
["flow-root", { display: "flow-root" }],
|
|
214
|
-
["list-item", { display: "list-item" }],
|
|
215
|
-
["hidden", { display: "none" }],
|
|
216
|
-
[/^display-(.+)$/, ([, c]) => ({ display: utilities.handler.bracket.cssvar(c) || c })]
|
|
217
|
-
];
|
|
218
|
-
const appearances = [
|
|
219
|
-
["visible", { visibility: "visible" }],
|
|
220
|
-
["invisible", { visibility: "hidden" }],
|
|
221
|
-
["backface-visible", { "backface-visibility": "visible" }],
|
|
222
|
-
["backface-hidden", { "backface-visibility": "hidden" }]
|
|
223
|
-
];
|
|
224
|
-
const cursors = [
|
|
225
|
-
[/^cursor-(.+)$/, ([, c]) => ({ cursor: utilities.handler.bracket.cssvar(c) || c })]
|
|
226
|
-
];
|
|
227
|
-
const pointerEvents = [
|
|
228
|
-
["pointer-events-auto", { "pointer-events": "auto" }],
|
|
229
|
-
["pointer-events-none", { "pointer-events": "none" }]
|
|
230
|
-
];
|
|
231
|
-
const resizes = [
|
|
232
|
-
["resize-x", { resize: "horizontal" }],
|
|
233
|
-
["resize-y", { resize: "vertical" }],
|
|
234
|
-
["resize", { resize: "both" }],
|
|
235
|
-
["resize-none", { resize: "none" }]
|
|
236
|
-
];
|
|
237
|
-
const userSelects = [
|
|
238
|
-
["select-auto", { "user-select": "auto" }],
|
|
239
|
-
["select-all", { "user-select": "all" }],
|
|
240
|
-
["select-text", { "user-select": "text" }],
|
|
241
|
-
["select-none", { "user-select": "none" }]
|
|
242
|
-
];
|
|
243
|
-
const whitespaces = [
|
|
244
|
-
[/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
|
|
245
|
-
];
|
|
246
|
-
const contents = [
|
|
247
|
-
["content-empty", { content: '""' }],
|
|
248
|
-
["content-none", { content: '""' }]
|
|
249
|
-
];
|
|
250
|
-
const breaks = [
|
|
251
|
-
["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
|
|
252
|
-
["break-words", { "overflow-wrap": "break-word" }],
|
|
253
|
-
["break-all", { "word-break": "break-all" }]
|
|
254
|
-
];
|
|
255
|
-
const textOverflows = [
|
|
256
|
-
["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
|
|
257
|
-
["text-ellipsis", { "text-overflow": "ellipsis" }],
|
|
258
|
-
["text-clip", { "text-overflow": "clip" }]
|
|
259
|
-
];
|
|
260
|
-
const textTransforms = [
|
|
261
|
-
["case-upper", { "text-transform": "uppercase" }],
|
|
262
|
-
["case-lower", { "text-transform": "lowercase" }],
|
|
263
|
-
["case-capital", { "text-transform": "capitalize" }],
|
|
264
|
-
["case-normal", { "text-transform": "none" }]
|
|
265
|
-
];
|
|
266
|
-
const fontStyles = [
|
|
267
|
-
["italic", { "font-style": "italic" }],
|
|
268
|
-
["not-italic", { "font-style": "normal" }]
|
|
269
|
-
];
|
|
270
|
-
const fontSmoothings = [
|
|
271
|
-
["antialiased", {
|
|
272
|
-
"-webkit-font-smoothing": "antialiased",
|
|
273
|
-
"-moz-osx-font-smoothing": "grayscale",
|
|
274
|
-
"font-smoothing": "grayscale"
|
|
275
|
-
}],
|
|
276
|
-
["subpixel-antialiased", {
|
|
277
|
-
"-webkit-font-smoothing": "auto",
|
|
278
|
-
"-moz-osx-font-smoothing": "auto",
|
|
279
|
-
"font-smoothing": "auto"
|
|
280
|
-
}]
|
|
281
|
-
];
|
|
282
|
-
|
|
283
|
-
const shadowBase = {
|
|
284
|
-
[core.CONTROL_SHORTCUT_NO_MERGE]: "",
|
|
285
|
-
"--un-ring-offset-shadow": "0 0 #0000",
|
|
286
|
-
"--un-ring-shadow": "0 0 #0000",
|
|
287
|
-
"--un-shadow-inset": varEmpty,
|
|
288
|
-
"--un-shadow": "0 0 #0000"
|
|
289
|
-
};
|
|
290
|
-
const colorableShadows = (shadows, colorVar) => {
|
|
291
|
-
const colored = [];
|
|
292
|
-
shadows = core.toArray(shadows);
|
|
293
|
-
for (let i = 0; i < shadows.length; i++) {
|
|
294
|
-
const [size, color] = shadows[i].split(/\s(\S+)$/);
|
|
295
|
-
if (color.split("(").length !== color.split(")").length)
|
|
296
|
-
return shadows;
|
|
297
|
-
colored.push(`${size} var(${colorVar}, ${color})`);
|
|
298
|
-
}
|
|
299
|
-
return colored;
|
|
300
|
-
};
|
|
301
|
-
const boxShadows = [
|
|
302
|
-
[/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
|
|
303
|
-
const v = theme.boxShadow?.[d || "DEFAULT"];
|
|
304
|
-
if (v) {
|
|
305
|
-
return [
|
|
306
|
-
shadowBase,
|
|
307
|
-
{
|
|
308
|
-
"--un-shadow": colorableShadows(v, "--un-shadow-color").join(","),
|
|
309
|
-
"box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
|
|
310
|
-
}
|
|
311
|
-
];
|
|
312
|
-
}
|
|
313
|
-
}],
|
|
314
|
-
[/^shadow-(.+)$/, utilities.colorResolver("--un-shadow-color", "shadow")],
|
|
315
|
-
[/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent(opacity) })],
|
|
316
|
-
["shadow-inset", { "--un-shadow-inset": "inset" }]
|
|
317
|
-
];
|
|
318
|
-
|
|
319
204
|
const weightMap = {
|
|
320
205
|
thin: "100",
|
|
321
206
|
extralight: "200",
|
|
@@ -371,7 +256,7 @@ const textShadows = [
|
|
|
371
256
|
const v = theme.textShadow?.[s || "DEFAULT"];
|
|
372
257
|
if (v != null) {
|
|
373
258
|
return {
|
|
374
|
-
"--un-text-shadow": colorableShadows(v, "--un-text-shadow-color").join(","),
|
|
259
|
+
"--un-text-shadow": utilities.colorableShadows(v, "--un-text-shadow-color").join(","),
|
|
375
260
|
"text-shadow": "var(--un-text-shadow)"
|
|
376
261
|
};
|
|
377
262
|
}
|
|
@@ -547,6 +432,107 @@ const boxSizing = [
|
|
|
547
432
|
["box-content", { "box-sizing": "content-box" }]
|
|
548
433
|
];
|
|
549
434
|
|
|
435
|
+
const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
|
|
436
|
+
const displays = [
|
|
437
|
+
["inline", { display: "inline" }],
|
|
438
|
+
["block", { display: "block" }],
|
|
439
|
+
["inline-block", { display: "inline-block" }],
|
|
440
|
+
["contents", { display: "contents" }],
|
|
441
|
+
["flow-root", { display: "flow-root" }],
|
|
442
|
+
["list-item", { display: "list-item" }],
|
|
443
|
+
["hidden", { display: "none" }],
|
|
444
|
+
[/^display-(.+)$/, ([, c]) => ({ display: utilities.handler.bracket.cssvar(c) || c })]
|
|
445
|
+
];
|
|
446
|
+
const appearances = [
|
|
447
|
+
["visible", { visibility: "visible" }],
|
|
448
|
+
["invisible", { visibility: "hidden" }],
|
|
449
|
+
["backface-visible", { "backface-visibility": "visible" }],
|
|
450
|
+
["backface-hidden", { "backface-visibility": "hidden" }]
|
|
451
|
+
];
|
|
452
|
+
const cursors = [
|
|
453
|
+
[/^cursor-(.+)$/, ([, c]) => ({ cursor: utilities.handler.bracket.cssvar(c) || c })]
|
|
454
|
+
];
|
|
455
|
+
const pointerEvents = [
|
|
456
|
+
["pointer-events-auto", { "pointer-events": "auto" }],
|
|
457
|
+
["pointer-events-none", { "pointer-events": "none" }]
|
|
458
|
+
];
|
|
459
|
+
const resizes = [
|
|
460
|
+
["resize-x", { resize: "horizontal" }],
|
|
461
|
+
["resize-y", { resize: "vertical" }],
|
|
462
|
+
["resize", { resize: "both" }],
|
|
463
|
+
["resize-none", { resize: "none" }]
|
|
464
|
+
];
|
|
465
|
+
const userSelects = [
|
|
466
|
+
["select-auto", { "user-select": "auto" }],
|
|
467
|
+
["select-all", { "user-select": "all" }],
|
|
468
|
+
["select-text", { "user-select": "text" }],
|
|
469
|
+
["select-none", { "user-select": "none" }]
|
|
470
|
+
];
|
|
471
|
+
const whitespaces = [
|
|
472
|
+
[/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
|
|
473
|
+
];
|
|
474
|
+
const contents = [
|
|
475
|
+
["content-empty", { content: '""' }],
|
|
476
|
+
["content-none", { content: '""' }]
|
|
477
|
+
];
|
|
478
|
+
const breaks = [
|
|
479
|
+
["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
|
|
480
|
+
["break-words", { "overflow-wrap": "break-word" }],
|
|
481
|
+
["break-all", { "word-break": "break-all" }]
|
|
482
|
+
];
|
|
483
|
+
const textOverflows = [
|
|
484
|
+
["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
|
|
485
|
+
["text-ellipsis", { "text-overflow": "ellipsis" }],
|
|
486
|
+
["text-clip", { "text-overflow": "clip" }]
|
|
487
|
+
];
|
|
488
|
+
const textTransforms = [
|
|
489
|
+
["case-upper", { "text-transform": "uppercase" }],
|
|
490
|
+
["case-lower", { "text-transform": "lowercase" }],
|
|
491
|
+
["case-capital", { "text-transform": "capitalize" }],
|
|
492
|
+
["case-normal", { "text-transform": "none" }]
|
|
493
|
+
];
|
|
494
|
+
const fontStyles = [
|
|
495
|
+
["italic", { "font-style": "italic" }],
|
|
496
|
+
["not-italic", { "font-style": "normal" }]
|
|
497
|
+
];
|
|
498
|
+
const fontSmoothings = [
|
|
499
|
+
["antialiased", {
|
|
500
|
+
"-webkit-font-smoothing": "antialiased",
|
|
501
|
+
"-moz-osx-font-smoothing": "grayscale",
|
|
502
|
+
"font-smoothing": "grayscale"
|
|
503
|
+
}],
|
|
504
|
+
["subpixel-antialiased", {
|
|
505
|
+
"-webkit-font-smoothing": "auto",
|
|
506
|
+
"-moz-osx-font-smoothing": "auto",
|
|
507
|
+
"font-smoothing": "auto"
|
|
508
|
+
}]
|
|
509
|
+
];
|
|
510
|
+
|
|
511
|
+
const shadowBase = {
|
|
512
|
+
[core.CONTROL_SHORTCUT_NO_MERGE]: "",
|
|
513
|
+
"--un-ring-offset-shadow": "0 0 #0000",
|
|
514
|
+
"--un-ring-shadow": "0 0 #0000",
|
|
515
|
+
"--un-shadow-inset": varEmpty,
|
|
516
|
+
"--un-shadow": "0 0 #0000"
|
|
517
|
+
};
|
|
518
|
+
const boxShadows = [
|
|
519
|
+
[/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
|
|
520
|
+
const v = theme.boxShadow?.[d || "DEFAULT"];
|
|
521
|
+
if (v) {
|
|
522
|
+
return [
|
|
523
|
+
shadowBase,
|
|
524
|
+
{
|
|
525
|
+
"--un-shadow": utilities.colorableShadows(v, "--un-shadow-color").join(","),
|
|
526
|
+
"box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
|
|
527
|
+
}
|
|
528
|
+
];
|
|
529
|
+
}
|
|
530
|
+
}],
|
|
531
|
+
[/^shadow-(.+)$/, utilities.colorResolver("--un-shadow-color", "shadow")],
|
|
532
|
+
[/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent(opacity) })],
|
|
533
|
+
["shadow-inset", { "--un-shadow-inset": "inset" }]
|
|
534
|
+
];
|
|
535
|
+
|
|
550
536
|
const ringBase = {
|
|
551
537
|
...shadowBase,
|
|
552
538
|
"--un-ring-inset": varEmpty,
|
|
@@ -605,6 +591,7 @@ function getSizeValue(minmax, hw, theme, prop) {
|
|
|
605
591
|
const sizes = [
|
|
606
592
|
[/^(min-|max-)?([wh])-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
|
|
607
593
|
[/^(min-|max-)?(block|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
|
|
594
|
+
[/^(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.verticalBreakpoints?.[s] })],
|
|
608
595
|
[/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.breakpoints?.[s] })]
|
|
609
596
|
];
|
|
610
597
|
function getAspectRatio(prop) {
|
|
@@ -927,7 +914,6 @@ exports.borders = borders;
|
|
|
927
914
|
exports.boxShadows = boxShadows;
|
|
928
915
|
exports.boxSizing = boxSizing;
|
|
929
916
|
exports.breaks = breaks;
|
|
930
|
-
exports.colorableShadows = colorableShadows;
|
|
931
917
|
exports.contents = contents;
|
|
932
918
|
exports.cssProperty = cssProperty;
|
|
933
919
|
exports.cssVariables = cssVariables;
|
package/dist/chunks/default2.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as cornerMap, i as insetMap,
|
|
2
|
-
import {
|
|
1
|
+
import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as colorToString, b as cornerMap, e as colorableShadows, i as insetMap, f as directionSize, g as positionMap, x as xyzMap } from './utilities.mjs';
|
|
2
|
+
import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
|
|
3
3
|
|
|
4
4
|
const verticalAlignAlias = {
|
|
5
5
|
mid: "middle",
|
|
@@ -80,31 +80,28 @@ const borderColorResolver = (direction) => ([, body], { theme }) => {
|
|
|
80
80
|
const data = parseColor(body, theme);
|
|
81
81
|
if (!data)
|
|
82
82
|
return;
|
|
83
|
-
const { alpha,
|
|
84
|
-
if (
|
|
85
|
-
return;
|
|
86
|
-
if (rgba) {
|
|
83
|
+
const { alpha, color, cssColor } = data;
|
|
84
|
+
if (cssColor) {
|
|
87
85
|
if (alpha != null) {
|
|
88
86
|
return {
|
|
89
|
-
[`border${direction}-color`]:
|
|
87
|
+
[`border${direction}-color`]: colorToString(cssColor, alpha)
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
if (direction === "") {
|
|
91
|
+
return {
|
|
92
|
+
"--un-border-opacity": cssColor.alpha ?? 1,
|
|
93
|
+
[`border${direction}-color`]: colorToString(cssColor, `var(--un-border${direction}-opacity)`)
|
|
90
94
|
};
|
|
91
95
|
} else {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
} else {
|
|
98
|
-
return {
|
|
99
|
-
"--un-border-opacity": (opacity && handler.cssvar(opacity)) ?? 1,
|
|
100
|
-
[`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
|
|
101
|
-
[`border${direction}-color`]: `rgba(${rgba.join(",")},var(--un-border${direction}-opacity))`
|
|
102
|
-
};
|
|
103
|
-
}
|
|
96
|
+
return {
|
|
97
|
+
"--un-border-opacity": cssColor.alpha ?? 1,
|
|
98
|
+
[`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
|
|
99
|
+
[`border${direction}-color`]: colorToString(cssColor, `var(--un-border${direction}-opacity)`)
|
|
100
|
+
};
|
|
104
101
|
}
|
|
105
|
-
} else {
|
|
102
|
+
} else if (color) {
|
|
106
103
|
return {
|
|
107
|
-
[`border${direction}-color`]: color.replace("%alpha", `${alpha
|
|
104
|
+
[`border${direction}-color`]: color.replace("%alpha", `${alpha ?? 1}`)
|
|
108
105
|
};
|
|
109
106
|
}
|
|
110
107
|
};
|
|
@@ -202,118 +199,6 @@ const flex = [
|
|
|
202
199
|
["flex-nowrap", { "flex-wrap": "nowrap" }]
|
|
203
200
|
];
|
|
204
201
|
|
|
205
|
-
const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
|
|
206
|
-
const displays = [
|
|
207
|
-
["inline", { display: "inline" }],
|
|
208
|
-
["block", { display: "block" }],
|
|
209
|
-
["inline-block", { display: "inline-block" }],
|
|
210
|
-
["contents", { display: "contents" }],
|
|
211
|
-
["flow-root", { display: "flow-root" }],
|
|
212
|
-
["list-item", { display: "list-item" }],
|
|
213
|
-
["hidden", { display: "none" }],
|
|
214
|
-
[/^display-(.+)$/, ([, c]) => ({ display: handler.bracket.cssvar(c) || c })]
|
|
215
|
-
];
|
|
216
|
-
const appearances = [
|
|
217
|
-
["visible", { visibility: "visible" }],
|
|
218
|
-
["invisible", { visibility: "hidden" }],
|
|
219
|
-
["backface-visible", { "backface-visibility": "visible" }],
|
|
220
|
-
["backface-hidden", { "backface-visibility": "hidden" }]
|
|
221
|
-
];
|
|
222
|
-
const cursors = [
|
|
223
|
-
[/^cursor-(.+)$/, ([, c]) => ({ cursor: handler.bracket.cssvar(c) || c })]
|
|
224
|
-
];
|
|
225
|
-
const pointerEvents = [
|
|
226
|
-
["pointer-events-auto", { "pointer-events": "auto" }],
|
|
227
|
-
["pointer-events-none", { "pointer-events": "none" }]
|
|
228
|
-
];
|
|
229
|
-
const resizes = [
|
|
230
|
-
["resize-x", { resize: "horizontal" }],
|
|
231
|
-
["resize-y", { resize: "vertical" }],
|
|
232
|
-
["resize", { resize: "both" }],
|
|
233
|
-
["resize-none", { resize: "none" }]
|
|
234
|
-
];
|
|
235
|
-
const userSelects = [
|
|
236
|
-
["select-auto", { "user-select": "auto" }],
|
|
237
|
-
["select-all", { "user-select": "all" }],
|
|
238
|
-
["select-text", { "user-select": "text" }],
|
|
239
|
-
["select-none", { "user-select": "none" }]
|
|
240
|
-
];
|
|
241
|
-
const whitespaces = [
|
|
242
|
-
[/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
|
|
243
|
-
];
|
|
244
|
-
const contents = [
|
|
245
|
-
["content-empty", { content: '""' }],
|
|
246
|
-
["content-none", { content: '""' }]
|
|
247
|
-
];
|
|
248
|
-
const breaks = [
|
|
249
|
-
["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
|
|
250
|
-
["break-words", { "overflow-wrap": "break-word" }],
|
|
251
|
-
["break-all", { "word-break": "break-all" }]
|
|
252
|
-
];
|
|
253
|
-
const textOverflows = [
|
|
254
|
-
["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
|
|
255
|
-
["text-ellipsis", { "text-overflow": "ellipsis" }],
|
|
256
|
-
["text-clip", { "text-overflow": "clip" }]
|
|
257
|
-
];
|
|
258
|
-
const textTransforms = [
|
|
259
|
-
["case-upper", { "text-transform": "uppercase" }],
|
|
260
|
-
["case-lower", { "text-transform": "lowercase" }],
|
|
261
|
-
["case-capital", { "text-transform": "capitalize" }],
|
|
262
|
-
["case-normal", { "text-transform": "none" }]
|
|
263
|
-
];
|
|
264
|
-
const fontStyles = [
|
|
265
|
-
["italic", { "font-style": "italic" }],
|
|
266
|
-
["not-italic", { "font-style": "normal" }]
|
|
267
|
-
];
|
|
268
|
-
const fontSmoothings = [
|
|
269
|
-
["antialiased", {
|
|
270
|
-
"-webkit-font-smoothing": "antialiased",
|
|
271
|
-
"-moz-osx-font-smoothing": "grayscale",
|
|
272
|
-
"font-smoothing": "grayscale"
|
|
273
|
-
}],
|
|
274
|
-
["subpixel-antialiased", {
|
|
275
|
-
"-webkit-font-smoothing": "auto",
|
|
276
|
-
"-moz-osx-font-smoothing": "auto",
|
|
277
|
-
"font-smoothing": "auto"
|
|
278
|
-
}]
|
|
279
|
-
];
|
|
280
|
-
|
|
281
|
-
const shadowBase = {
|
|
282
|
-
[CONTROL_SHORTCUT_NO_MERGE]: "",
|
|
283
|
-
"--un-ring-offset-shadow": "0 0 #0000",
|
|
284
|
-
"--un-ring-shadow": "0 0 #0000",
|
|
285
|
-
"--un-shadow-inset": varEmpty,
|
|
286
|
-
"--un-shadow": "0 0 #0000"
|
|
287
|
-
};
|
|
288
|
-
const colorableShadows = (shadows, colorVar) => {
|
|
289
|
-
const colored = [];
|
|
290
|
-
shadows = toArray(shadows);
|
|
291
|
-
for (let i = 0; i < shadows.length; i++) {
|
|
292
|
-
const [size, color] = shadows[i].split(/\s(\S+)$/);
|
|
293
|
-
if (color.split("(").length !== color.split(")").length)
|
|
294
|
-
return shadows;
|
|
295
|
-
colored.push(`${size} var(${colorVar}, ${color})`);
|
|
296
|
-
}
|
|
297
|
-
return colored;
|
|
298
|
-
};
|
|
299
|
-
const boxShadows = [
|
|
300
|
-
[/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
|
|
301
|
-
const v = theme.boxShadow?.[d || "DEFAULT"];
|
|
302
|
-
if (v) {
|
|
303
|
-
return [
|
|
304
|
-
shadowBase,
|
|
305
|
-
{
|
|
306
|
-
"--un-shadow": colorableShadows(v, "--un-shadow-color").join(","),
|
|
307
|
-
"box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
|
|
308
|
-
}
|
|
309
|
-
];
|
|
310
|
-
}
|
|
311
|
-
}],
|
|
312
|
-
[/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
|
|
313
|
-
[/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
|
|
314
|
-
["shadow-inset", { "--un-shadow-inset": "inset" }]
|
|
315
|
-
];
|
|
316
|
-
|
|
317
202
|
const weightMap = {
|
|
318
203
|
thin: "100",
|
|
319
204
|
extralight: "200",
|
|
@@ -545,6 +430,107 @@ const boxSizing = [
|
|
|
545
430
|
["box-content", { "box-sizing": "content-box" }]
|
|
546
431
|
];
|
|
547
432
|
|
|
433
|
+
const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
|
|
434
|
+
const displays = [
|
|
435
|
+
["inline", { display: "inline" }],
|
|
436
|
+
["block", { display: "block" }],
|
|
437
|
+
["inline-block", { display: "inline-block" }],
|
|
438
|
+
["contents", { display: "contents" }],
|
|
439
|
+
["flow-root", { display: "flow-root" }],
|
|
440
|
+
["list-item", { display: "list-item" }],
|
|
441
|
+
["hidden", { display: "none" }],
|
|
442
|
+
[/^display-(.+)$/, ([, c]) => ({ display: handler.bracket.cssvar(c) || c })]
|
|
443
|
+
];
|
|
444
|
+
const appearances = [
|
|
445
|
+
["visible", { visibility: "visible" }],
|
|
446
|
+
["invisible", { visibility: "hidden" }],
|
|
447
|
+
["backface-visible", { "backface-visibility": "visible" }],
|
|
448
|
+
["backface-hidden", { "backface-visibility": "hidden" }]
|
|
449
|
+
];
|
|
450
|
+
const cursors = [
|
|
451
|
+
[/^cursor-(.+)$/, ([, c]) => ({ cursor: handler.bracket.cssvar(c) || c })]
|
|
452
|
+
];
|
|
453
|
+
const pointerEvents = [
|
|
454
|
+
["pointer-events-auto", { "pointer-events": "auto" }],
|
|
455
|
+
["pointer-events-none", { "pointer-events": "none" }]
|
|
456
|
+
];
|
|
457
|
+
const resizes = [
|
|
458
|
+
["resize-x", { resize: "horizontal" }],
|
|
459
|
+
["resize-y", { resize: "vertical" }],
|
|
460
|
+
["resize", { resize: "both" }],
|
|
461
|
+
["resize-none", { resize: "none" }]
|
|
462
|
+
];
|
|
463
|
+
const userSelects = [
|
|
464
|
+
["select-auto", { "user-select": "auto" }],
|
|
465
|
+
["select-all", { "user-select": "all" }],
|
|
466
|
+
["select-text", { "user-select": "text" }],
|
|
467
|
+
["select-none", { "user-select": "none" }]
|
|
468
|
+
];
|
|
469
|
+
const whitespaces = [
|
|
470
|
+
[/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
|
|
471
|
+
];
|
|
472
|
+
const contents = [
|
|
473
|
+
["content-empty", { content: '""' }],
|
|
474
|
+
["content-none", { content: '""' }]
|
|
475
|
+
];
|
|
476
|
+
const breaks = [
|
|
477
|
+
["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
|
|
478
|
+
["break-words", { "overflow-wrap": "break-word" }],
|
|
479
|
+
["break-all", { "word-break": "break-all" }]
|
|
480
|
+
];
|
|
481
|
+
const textOverflows = [
|
|
482
|
+
["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
|
|
483
|
+
["text-ellipsis", { "text-overflow": "ellipsis" }],
|
|
484
|
+
["text-clip", { "text-overflow": "clip" }]
|
|
485
|
+
];
|
|
486
|
+
const textTransforms = [
|
|
487
|
+
["case-upper", { "text-transform": "uppercase" }],
|
|
488
|
+
["case-lower", { "text-transform": "lowercase" }],
|
|
489
|
+
["case-capital", { "text-transform": "capitalize" }],
|
|
490
|
+
["case-normal", { "text-transform": "none" }]
|
|
491
|
+
];
|
|
492
|
+
const fontStyles = [
|
|
493
|
+
["italic", { "font-style": "italic" }],
|
|
494
|
+
["not-italic", { "font-style": "normal" }]
|
|
495
|
+
];
|
|
496
|
+
const fontSmoothings = [
|
|
497
|
+
["antialiased", {
|
|
498
|
+
"-webkit-font-smoothing": "antialiased",
|
|
499
|
+
"-moz-osx-font-smoothing": "grayscale",
|
|
500
|
+
"font-smoothing": "grayscale"
|
|
501
|
+
}],
|
|
502
|
+
["subpixel-antialiased", {
|
|
503
|
+
"-webkit-font-smoothing": "auto",
|
|
504
|
+
"-moz-osx-font-smoothing": "auto",
|
|
505
|
+
"font-smoothing": "auto"
|
|
506
|
+
}]
|
|
507
|
+
];
|
|
508
|
+
|
|
509
|
+
const shadowBase = {
|
|
510
|
+
[CONTROL_SHORTCUT_NO_MERGE]: "",
|
|
511
|
+
"--un-ring-offset-shadow": "0 0 #0000",
|
|
512
|
+
"--un-ring-shadow": "0 0 #0000",
|
|
513
|
+
"--un-shadow-inset": varEmpty,
|
|
514
|
+
"--un-shadow": "0 0 #0000"
|
|
515
|
+
};
|
|
516
|
+
const boxShadows = [
|
|
517
|
+
[/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
|
|
518
|
+
const v = theme.boxShadow?.[d || "DEFAULT"];
|
|
519
|
+
if (v) {
|
|
520
|
+
return [
|
|
521
|
+
shadowBase,
|
|
522
|
+
{
|
|
523
|
+
"--un-shadow": colorableShadows(v, "--un-shadow-color").join(","),
|
|
524
|
+
"box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
|
|
525
|
+
}
|
|
526
|
+
];
|
|
527
|
+
}
|
|
528
|
+
}],
|
|
529
|
+
[/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
|
|
530
|
+
[/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
|
|
531
|
+
["shadow-inset", { "--un-shadow-inset": "inset" }]
|
|
532
|
+
];
|
|
533
|
+
|
|
548
534
|
const ringBase = {
|
|
549
535
|
...shadowBase,
|
|
550
536
|
"--un-ring-inset": varEmpty,
|
|
@@ -603,6 +589,7 @@ function getSizeValue(minmax, hw, theme, prop) {
|
|
|
603
589
|
const sizes = [
|
|
604
590
|
[/^(min-|max-)?([wh])-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
|
|
605
591
|
[/^(min-|max-)?(block|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
|
|
592
|
+
[/^(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.verticalBreakpoints?.[s] })],
|
|
606
593
|
[/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: theme.breakpoints?.[s] })]
|
|
607
594
|
];
|
|
608
595
|
function getAspectRatio(prop) {
|
|
@@ -916,4 +903,4 @@ const rules = [
|
|
|
916
903
|
questionMark
|
|
917
904
|
].flat(1);
|
|
918
905
|
|
|
919
|
-
export {
|
|
906
|
+
export { cssVariables as $, boxShadows as A, sizes as B, aspectRatio as C, paddings as D, margins as E, varEmpty as F, displays as G, appearances as H, cursors as I, pointerEvents as J, resizes as K, userSelects as L, whitespaces as M, contents as N, breaks as O, textOverflows as P, textTransforms as Q, fontStyles as R, fontSmoothings as S, svgUtilities as T, transforms as U, transitions as V, fonts as W, tabSizes as X, textIndents as Y, textStrokes as Z, textShadows as _, appearance as a, cssProperty as a0, textDecorations as a1, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, shadowBase as y, zIndexes as z };
|