@unocss/preset-wind 0.64.1 → 0.65.0-beta.1
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/dist/index.d.mts +5 -8
- package/dist/index.d.ts +5 -8
- package/dist/index.mjs +13 -1349
- package/dist/rules.d.mts +95 -0
- package/dist/rules.d.ts +95 -0
- package/dist/rules.mjs +7 -0
- package/dist/shared/preset-wind.BwVsieym.mjs +85 -0
- package/dist/shared/preset-wind.BzmnsdqZ.mjs +67 -0
- package/dist/shared/preset-wind.DRADYSMV.d.mts +6 -0
- package/dist/shared/preset-wind.DRADYSMV.d.ts +6 -0
- package/dist/shared/preset-wind.TzkR3UCF.mjs +263 -0
- package/dist/shared/preset-wind.aiu9p7G7.mjs +634 -0
- package/dist/shortcuts.d.mts +6 -0
- package/dist/shortcuts.d.ts +6 -0
- package/dist/shortcuts.mjs +9 -0
- package/dist/theme.d.mts +5 -0
- package/dist/theme.d.ts +5 -0
- package/dist/theme.mjs +315 -0
- package/dist/variants.d.mts +21 -0
- package/dist/variants.d.ts +21 -0
- package/dist/variants.mjs +4 -0
- package/package.json +21 -4
- package/rules.d.ts +1 -0
- package/shortcuts.d.ts +1 -0
- package/theme.d.ts +1 -0
- package/variants.d.ts +1 -0
package/dist/rules.d.mts
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { Rule, Shortcut } from '@unocss/core';
|
|
2
|
+
import { Theme } from '@unocss/preset-mini';
|
|
3
|
+
export { r as rules } from './shared/preset-wind.DRADYSMV.mjs';
|
|
4
|
+
|
|
5
|
+
declare const animations: Rule<Theme>[];
|
|
6
|
+
|
|
7
|
+
declare const backgroundStyles: Rule[];
|
|
8
|
+
|
|
9
|
+
declare const listStyle: Rule[];
|
|
10
|
+
declare const accents: Rule[];
|
|
11
|
+
declare const carets: Rule[];
|
|
12
|
+
declare const imageRenderings: Rule[];
|
|
13
|
+
declare const overscrolls: Rule[];
|
|
14
|
+
declare const scrollBehaviors: Rule[];
|
|
15
|
+
|
|
16
|
+
declare const columns: Rule[];
|
|
17
|
+
|
|
18
|
+
declare const container: Rule<Theme>[];
|
|
19
|
+
declare const containerShortcuts: Shortcut<Theme>[];
|
|
20
|
+
|
|
21
|
+
declare const divides: Rule[];
|
|
22
|
+
|
|
23
|
+
declare const filterBase: {
|
|
24
|
+
'--un-blur': string;
|
|
25
|
+
'--un-brightness': string;
|
|
26
|
+
'--un-contrast': string;
|
|
27
|
+
'--un-drop-shadow': string;
|
|
28
|
+
'--un-grayscale': string;
|
|
29
|
+
'--un-hue-rotate': string;
|
|
30
|
+
'--un-invert': string;
|
|
31
|
+
'--un-saturate': string;
|
|
32
|
+
'--un-sepia': string;
|
|
33
|
+
};
|
|
34
|
+
declare const backdropFilterBase: {
|
|
35
|
+
'--un-backdrop-blur': string;
|
|
36
|
+
'--un-backdrop-brightness': string;
|
|
37
|
+
'--un-backdrop-contrast': string;
|
|
38
|
+
'--un-backdrop-grayscale': string;
|
|
39
|
+
'--un-backdrop-hue-rotate': string;
|
|
40
|
+
'--un-backdrop-invert': string;
|
|
41
|
+
'--un-backdrop-opacity': string;
|
|
42
|
+
'--un-backdrop-saturate': string;
|
|
43
|
+
'--un-backdrop-sepia': string;
|
|
44
|
+
};
|
|
45
|
+
declare const filters: Rule<Theme>[];
|
|
46
|
+
|
|
47
|
+
declare const lineClamps: Rule[];
|
|
48
|
+
|
|
49
|
+
declare const placeholders: Rule[];
|
|
50
|
+
|
|
51
|
+
declare const scrollSnapTypeBase: {
|
|
52
|
+
'--un-scroll-snap-strictness': string;
|
|
53
|
+
};
|
|
54
|
+
declare const scrolls: Rule[];
|
|
55
|
+
|
|
56
|
+
declare const spaces: Rule[];
|
|
57
|
+
|
|
58
|
+
declare const textTransforms: Rule[];
|
|
59
|
+
declare const hyphens: Rule[];
|
|
60
|
+
declare const writingModes: Rule[];
|
|
61
|
+
declare const writingOrientations: Rule[];
|
|
62
|
+
declare const screenReadersAccess: Rule[];
|
|
63
|
+
declare const isolations: Rule[];
|
|
64
|
+
declare const objectPositions: Rule[];
|
|
65
|
+
declare const backgroundBlendModes: Rule[];
|
|
66
|
+
declare const mixBlendModes: Rule[];
|
|
67
|
+
declare const dynamicViewportHeight: Rule[];
|
|
68
|
+
|
|
69
|
+
declare const borderSpacingBase: {
|
|
70
|
+
'--un-border-spacing-x': number;
|
|
71
|
+
'--un-border-spacing-y': number;
|
|
72
|
+
};
|
|
73
|
+
declare const tables: Rule<Theme>[];
|
|
74
|
+
|
|
75
|
+
declare const touchActionBase: {
|
|
76
|
+
'--un-pan-x': string;
|
|
77
|
+
'--un-pan-y': string;
|
|
78
|
+
'--un-pinch-zoom': string;
|
|
79
|
+
};
|
|
80
|
+
declare const touchActions: Rule[];
|
|
81
|
+
|
|
82
|
+
declare const fontVariantNumericBase: {
|
|
83
|
+
'--un-ordinal': string;
|
|
84
|
+
'--un-slashed-zero': string;
|
|
85
|
+
'--un-numeric-figure': string;
|
|
86
|
+
'--un-numeric-spacing': string;
|
|
87
|
+
'--un-numeric-fraction': string;
|
|
88
|
+
};
|
|
89
|
+
declare const fontVariantNumeric: Rule[];
|
|
90
|
+
|
|
91
|
+
declare const cssVariables: Rule[];
|
|
92
|
+
|
|
93
|
+
declare const viewTransition: Rule[];
|
|
94
|
+
|
|
95
|
+
export { accents, animations, backdropFilterBase, backgroundBlendModes, backgroundStyles, borderSpacingBase, carets, columns, container, containerShortcuts, cssVariables, divides, dynamicViewportHeight, filterBase, filters, fontVariantNumeric, fontVariantNumericBase, hyphens, imageRenderings, isolations, lineClamps, listStyle, mixBlendModes, objectPositions, overscrolls, placeholders, screenReadersAccess, scrollBehaviors, scrollSnapTypeBase, scrolls, spaces, tables, textTransforms, touchActionBase, touchActions, viewTransition, writingModes, writingOrientations };
|
package/dist/rules.d.ts
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { Rule, Shortcut } from '@unocss/core';
|
|
2
|
+
import { Theme } from '@unocss/preset-mini';
|
|
3
|
+
export { r as rules } from './shared/preset-wind.DRADYSMV.js';
|
|
4
|
+
|
|
5
|
+
declare const animations: Rule<Theme>[];
|
|
6
|
+
|
|
7
|
+
declare const backgroundStyles: Rule[];
|
|
8
|
+
|
|
9
|
+
declare const listStyle: Rule[];
|
|
10
|
+
declare const accents: Rule[];
|
|
11
|
+
declare const carets: Rule[];
|
|
12
|
+
declare const imageRenderings: Rule[];
|
|
13
|
+
declare const overscrolls: Rule[];
|
|
14
|
+
declare const scrollBehaviors: Rule[];
|
|
15
|
+
|
|
16
|
+
declare const columns: Rule[];
|
|
17
|
+
|
|
18
|
+
declare const container: Rule<Theme>[];
|
|
19
|
+
declare const containerShortcuts: Shortcut<Theme>[];
|
|
20
|
+
|
|
21
|
+
declare const divides: Rule[];
|
|
22
|
+
|
|
23
|
+
declare const filterBase: {
|
|
24
|
+
'--un-blur': string;
|
|
25
|
+
'--un-brightness': string;
|
|
26
|
+
'--un-contrast': string;
|
|
27
|
+
'--un-drop-shadow': string;
|
|
28
|
+
'--un-grayscale': string;
|
|
29
|
+
'--un-hue-rotate': string;
|
|
30
|
+
'--un-invert': string;
|
|
31
|
+
'--un-saturate': string;
|
|
32
|
+
'--un-sepia': string;
|
|
33
|
+
};
|
|
34
|
+
declare const backdropFilterBase: {
|
|
35
|
+
'--un-backdrop-blur': string;
|
|
36
|
+
'--un-backdrop-brightness': string;
|
|
37
|
+
'--un-backdrop-contrast': string;
|
|
38
|
+
'--un-backdrop-grayscale': string;
|
|
39
|
+
'--un-backdrop-hue-rotate': string;
|
|
40
|
+
'--un-backdrop-invert': string;
|
|
41
|
+
'--un-backdrop-opacity': string;
|
|
42
|
+
'--un-backdrop-saturate': string;
|
|
43
|
+
'--un-backdrop-sepia': string;
|
|
44
|
+
};
|
|
45
|
+
declare const filters: Rule<Theme>[];
|
|
46
|
+
|
|
47
|
+
declare const lineClamps: Rule[];
|
|
48
|
+
|
|
49
|
+
declare const placeholders: Rule[];
|
|
50
|
+
|
|
51
|
+
declare const scrollSnapTypeBase: {
|
|
52
|
+
'--un-scroll-snap-strictness': string;
|
|
53
|
+
};
|
|
54
|
+
declare const scrolls: Rule[];
|
|
55
|
+
|
|
56
|
+
declare const spaces: Rule[];
|
|
57
|
+
|
|
58
|
+
declare const textTransforms: Rule[];
|
|
59
|
+
declare const hyphens: Rule[];
|
|
60
|
+
declare const writingModes: Rule[];
|
|
61
|
+
declare const writingOrientations: Rule[];
|
|
62
|
+
declare const screenReadersAccess: Rule[];
|
|
63
|
+
declare const isolations: Rule[];
|
|
64
|
+
declare const objectPositions: Rule[];
|
|
65
|
+
declare const backgroundBlendModes: Rule[];
|
|
66
|
+
declare const mixBlendModes: Rule[];
|
|
67
|
+
declare const dynamicViewportHeight: Rule[];
|
|
68
|
+
|
|
69
|
+
declare const borderSpacingBase: {
|
|
70
|
+
'--un-border-spacing-x': number;
|
|
71
|
+
'--un-border-spacing-y': number;
|
|
72
|
+
};
|
|
73
|
+
declare const tables: Rule<Theme>[];
|
|
74
|
+
|
|
75
|
+
declare const touchActionBase: {
|
|
76
|
+
'--un-pan-x': string;
|
|
77
|
+
'--un-pan-y': string;
|
|
78
|
+
'--un-pinch-zoom': string;
|
|
79
|
+
};
|
|
80
|
+
declare const touchActions: Rule[];
|
|
81
|
+
|
|
82
|
+
declare const fontVariantNumericBase: {
|
|
83
|
+
'--un-ordinal': string;
|
|
84
|
+
'--un-slashed-zero': string;
|
|
85
|
+
'--un-numeric-figure': string;
|
|
86
|
+
'--un-numeric-spacing': string;
|
|
87
|
+
'--un-numeric-fraction': string;
|
|
88
|
+
};
|
|
89
|
+
declare const fontVariantNumeric: Rule[];
|
|
90
|
+
|
|
91
|
+
declare const cssVariables: Rule[];
|
|
92
|
+
|
|
93
|
+
declare const viewTransition: Rule[];
|
|
94
|
+
|
|
95
|
+
export { accents, animations, backdropFilterBase, backgroundBlendModes, backgroundStyles, borderSpacingBase, carets, columns, container, containerShortcuts, cssVariables, divides, dynamicViewportHeight, filterBase, filters, fontVariantNumeric, fontVariantNumericBase, hyphens, imageRenderings, isolations, lineClamps, listStyle, mixBlendModes, objectPositions, overscrolls, placeholders, screenReadersAccess, scrollBehaviors, scrollSnapTypeBase, scrolls, spaces, tables, textTransforms, touchActionBase, touchActions, viewTransition, writingModes, writingOrientations };
|
package/dist/rules.mjs
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { c as accents, a as animations, u as backgroundBlendModes, b as backgroundStyles, d as carets, e as columns, y as cssVariables, f as divides, x as dynamicViewportHeight, j as hyphens, i as imageRenderings, n as isolations, g as lineClamps, l as listStyle, v as mixBlendModes, q as objectPositions, o as overscrolls, p as placeholders, r as rules, m as screenReadersAccess, s as scrollBehaviors, h as spaces, t as textTransforms, z as viewTransition, w as writingModes, k as writingOrientations } from './shared/preset-wind.aiu9p7G7.mjs';
|
|
2
|
+
export { c as container, a as containerShortcuts } from './shared/preset-wind.BzmnsdqZ.mjs';
|
|
3
|
+
export { b as backdropFilterBase, d as borderSpacingBase, f as filterBase, a as filters, i as fontVariantNumeric, h as fontVariantNumericBase, s as scrollSnapTypeBase, c as scrolls, t as tables, e as touchActionBase, g as touchActions } from './shared/preset-wind.TzkR3UCF.mjs';
|
|
4
|
+
import '@unocss/preset-mini/rules';
|
|
5
|
+
import '@unocss/preset-mini/utils';
|
|
6
|
+
import '@unocss/rule-utils';
|
|
7
|
+
import '@unocss/core';
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { variants as variants$1 } from '@unocss/preset-mini/variants';
|
|
2
|
+
import { variantMatcher, variantParentMatcher, hasParseableColor, h } from '@unocss/preset-mini/utils';
|
|
3
|
+
import { variantMatcher as variantMatcher$1 } from '@unocss/rule-utils';
|
|
4
|
+
|
|
5
|
+
const variantCombinators = [
|
|
6
|
+
variantMatcher("svg", (input) => ({ selector: `${input.selector} svg` }))
|
|
7
|
+
];
|
|
8
|
+
|
|
9
|
+
const variantColorsScheme = [
|
|
10
|
+
variantMatcher(".dark", (input) => ({ prefix: `.dark $$ ${input.prefix}` })),
|
|
11
|
+
variantMatcher(".light", (input) => ({ prefix: `.light $$ ${input.prefix}` })),
|
|
12
|
+
variantParentMatcher("@dark", "@media (prefers-color-scheme: dark)"),
|
|
13
|
+
variantParentMatcher("@light", "@media (prefers-color-scheme: light)")
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
const variantContrasts = [
|
|
17
|
+
variantParentMatcher("contrast-more", "@media (prefers-contrast: more)"),
|
|
18
|
+
variantParentMatcher("contrast-less", "@media (prefers-contrast: less)")
|
|
19
|
+
];
|
|
20
|
+
const variantMotions = [
|
|
21
|
+
variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
|
|
22
|
+
variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
|
|
23
|
+
];
|
|
24
|
+
const variantOrientations = [
|
|
25
|
+
variantParentMatcher("landscape", "@media (orientation: landscape)"),
|
|
26
|
+
variantParentMatcher("portrait", "@media (orientation: portrait)")
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const variantSpaceAndDivide = (matcher) => {
|
|
30
|
+
if (matcher.startsWith("_"))
|
|
31
|
+
return;
|
|
32
|
+
if (/space-[xy]-.+$/.test(matcher) || /divide-/.test(matcher)) {
|
|
33
|
+
return {
|
|
34
|
+
matcher,
|
|
35
|
+
selector: (input) => {
|
|
36
|
+
const not = ">:not([hidden])~:not([hidden])";
|
|
37
|
+
return input.includes(not) ? input : `${input}${not}`;
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const variantStickyHover = [
|
|
43
|
+
variantMatcher$1("@hover", (input) => ({
|
|
44
|
+
parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (hover: hover) and (pointer: fine)`,
|
|
45
|
+
selector: `${input.selector || ""}:hover`
|
|
46
|
+
}))
|
|
47
|
+
];
|
|
48
|
+
|
|
49
|
+
const placeholderModifier = (input, { theme }) => {
|
|
50
|
+
const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
|
|
51
|
+
if (m) {
|
|
52
|
+
const [, pre = "", p, body] = m;
|
|
53
|
+
if (hasParseableColor(body, theme, "accentColor") || hasOpacityValue(body)) {
|
|
54
|
+
return {
|
|
55
|
+
// Append `placeholder-$ ` (with space!) to the rule to be matched.
|
|
56
|
+
// The `placeholder-` is added for placeholder variant processing, and
|
|
57
|
+
// the `$ ` is added for rule matching after `placeholder-` is removed by the variant.
|
|
58
|
+
// See rules/placeholder.
|
|
59
|
+
matcher: `${pre}placeholder-$ ${p}${body}`
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
function hasOpacityValue(body) {
|
|
65
|
+
const match = body.match(/^op(?:acity)?-?(.+)$/);
|
|
66
|
+
if (match && match[1] != null)
|
|
67
|
+
return h.bracket.percent(match[1]) != null;
|
|
68
|
+
return false;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
function variants(options) {
|
|
72
|
+
return [
|
|
73
|
+
placeholderModifier,
|
|
74
|
+
variantSpaceAndDivide,
|
|
75
|
+
...variants$1(options),
|
|
76
|
+
...variantContrasts,
|
|
77
|
+
...variantOrientations,
|
|
78
|
+
...variantMotions,
|
|
79
|
+
...variantCombinators,
|
|
80
|
+
...variantColorsScheme,
|
|
81
|
+
...variantStickyHover
|
|
82
|
+
];
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
export { variantColorsScheme as a, variants as b, variantContrasts as c, variantMotions as d, variantOrientations as e, variantSpaceAndDivide as f, variantStickyHover as g, placeholderModifier as p, variantCombinators as v };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { isString } from '@unocss/core';
|
|
2
|
+
import { resolveBreakpoints } from '@unocss/preset-mini/utils';
|
|
3
|
+
|
|
4
|
+
const queryMatcher = /@media \(min-width: (.+)\)/;
|
|
5
|
+
const container = [
|
|
6
|
+
[
|
|
7
|
+
/^__container$/,
|
|
8
|
+
(m, context) => {
|
|
9
|
+
const { theme, variantHandlers } = context;
|
|
10
|
+
const themePadding = theme.container?.padding;
|
|
11
|
+
let padding;
|
|
12
|
+
if (isString(themePadding))
|
|
13
|
+
padding = themePadding;
|
|
14
|
+
else
|
|
15
|
+
padding = themePadding?.DEFAULT;
|
|
16
|
+
const themeMaxWidth = theme.container?.maxWidth;
|
|
17
|
+
let maxWidth;
|
|
18
|
+
for (const v of variantHandlers) {
|
|
19
|
+
const query = v.handle?.({}, (x) => x)?.parent;
|
|
20
|
+
if (isString(query)) {
|
|
21
|
+
const match = query.match(queryMatcher)?.[1];
|
|
22
|
+
if (match) {
|
|
23
|
+
const bp = resolveBreakpoints(context) ?? [];
|
|
24
|
+
const matchBp = bp.find((i) => i.size === match)?.point;
|
|
25
|
+
if (!themeMaxWidth)
|
|
26
|
+
maxWidth = match;
|
|
27
|
+
else if (matchBp)
|
|
28
|
+
maxWidth = themeMaxWidth?.[matchBp];
|
|
29
|
+
if (matchBp && !isString(themePadding))
|
|
30
|
+
padding = themePadding?.[matchBp] ?? padding;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
const css = {
|
|
35
|
+
"max-width": maxWidth
|
|
36
|
+
};
|
|
37
|
+
if (!variantHandlers.length)
|
|
38
|
+
css.width = "100%";
|
|
39
|
+
if (theme.container?.center) {
|
|
40
|
+
css["margin-left"] = "auto";
|
|
41
|
+
css["margin-right"] = "auto";
|
|
42
|
+
}
|
|
43
|
+
if (themePadding) {
|
|
44
|
+
css["padding-left"] = padding;
|
|
45
|
+
css["padding-right"] = padding;
|
|
46
|
+
}
|
|
47
|
+
return css;
|
|
48
|
+
},
|
|
49
|
+
{ internal: true }
|
|
50
|
+
]
|
|
51
|
+
];
|
|
52
|
+
const containerShortcuts = [
|
|
53
|
+
[/^(?:(\w+)[:-])?container$/, ([, bp], context) => {
|
|
54
|
+
let points = (resolveBreakpoints(context) ?? []).map((i) => i.point);
|
|
55
|
+
if (bp) {
|
|
56
|
+
if (!points.includes(bp))
|
|
57
|
+
return;
|
|
58
|
+
points = points.slice(points.indexOf(bp));
|
|
59
|
+
}
|
|
60
|
+
const shortcuts = points.map((p) => `${p}:__container`);
|
|
61
|
+
if (!bp)
|
|
62
|
+
shortcuts.unshift("__container");
|
|
63
|
+
return shortcuts;
|
|
64
|
+
}]
|
|
65
|
+
];
|
|
66
|
+
|
|
67
|
+
export { containerShortcuts as a, container as c };
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
import { varEmpty } from '@unocss/preset-mini/rules';
|
|
2
|
+
import { colorResolver, h, globalKeywords, colorableShadows, directionSize, makeGlobalStaticRules } from '@unocss/preset-mini/utils';
|
|
3
|
+
|
|
4
|
+
const filterBase = {
|
|
5
|
+
"--un-blur": varEmpty,
|
|
6
|
+
"--un-brightness": varEmpty,
|
|
7
|
+
"--un-contrast": varEmpty,
|
|
8
|
+
"--un-drop-shadow": varEmpty,
|
|
9
|
+
"--un-grayscale": varEmpty,
|
|
10
|
+
"--un-hue-rotate": varEmpty,
|
|
11
|
+
"--un-invert": varEmpty,
|
|
12
|
+
"--un-saturate": varEmpty,
|
|
13
|
+
"--un-sepia": varEmpty
|
|
14
|
+
};
|
|
15
|
+
const filterProperty = "var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)";
|
|
16
|
+
const backdropFilterBase = {
|
|
17
|
+
"--un-backdrop-blur": varEmpty,
|
|
18
|
+
"--un-backdrop-brightness": varEmpty,
|
|
19
|
+
"--un-backdrop-contrast": varEmpty,
|
|
20
|
+
"--un-backdrop-grayscale": varEmpty,
|
|
21
|
+
"--un-backdrop-hue-rotate": varEmpty,
|
|
22
|
+
"--un-backdrop-invert": varEmpty,
|
|
23
|
+
"--un-backdrop-opacity": varEmpty,
|
|
24
|
+
"--un-backdrop-saturate": varEmpty,
|
|
25
|
+
"--un-backdrop-sepia": varEmpty
|
|
26
|
+
};
|
|
27
|
+
const backdropFilterProperty = "var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)";
|
|
28
|
+
function percentWithDefault(str) {
|
|
29
|
+
let v = h.bracket.cssvar(str || "");
|
|
30
|
+
if (v != null)
|
|
31
|
+
return v;
|
|
32
|
+
v = str ? h.percent(str) : "1";
|
|
33
|
+
if (v != null && Number.parseFloat(v) <= 1)
|
|
34
|
+
return v;
|
|
35
|
+
}
|
|
36
|
+
function toFilter(varName, resolver) {
|
|
37
|
+
return ([, b, s], { theme }) => {
|
|
38
|
+
const value = resolver(s, theme) ?? (s === "none" ? "0" : "");
|
|
39
|
+
if (value !== "") {
|
|
40
|
+
if (b) {
|
|
41
|
+
return {
|
|
42
|
+
[`--un-${b}${varName}`]: `${varName}(${value})`,
|
|
43
|
+
"-webkit-backdrop-filter": backdropFilterProperty,
|
|
44
|
+
"backdrop-filter": backdropFilterProperty
|
|
45
|
+
};
|
|
46
|
+
} else {
|
|
47
|
+
return {
|
|
48
|
+
[`--un-${varName}`]: `${varName}(${value})`,
|
|
49
|
+
filter: filterProperty
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
function dropShadowResolver([, s], { theme }) {
|
|
56
|
+
let v = theme.dropShadow?.[s || "DEFAULT"];
|
|
57
|
+
if (v != null) {
|
|
58
|
+
const shadows = colorableShadows(v, "--un-drop-shadow-color");
|
|
59
|
+
return {
|
|
60
|
+
"--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`,
|
|
61
|
+
"filter": filterProperty
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
v = h.bracket.cssvar(s);
|
|
65
|
+
if (v != null) {
|
|
66
|
+
return {
|
|
67
|
+
"--un-drop-shadow": `drop-shadow(${v})`,
|
|
68
|
+
"filter": filterProperty
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
const filters = [
|
|
73
|
+
// filters
|
|
74
|
+
[/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || h.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur", "filter-blur"] }],
|
|
75
|
+
[/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }],
|
|
76
|
+
[/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-contrast-<percent>", "contrast-<percent>"] }],
|
|
77
|
+
// drop-shadow only on filter
|
|
78
|
+
[/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver, {
|
|
79
|
+
autocomplete: [
|
|
80
|
+
"filter-drop",
|
|
81
|
+
"filter-drop-shadow",
|
|
82
|
+
"filter-drop-shadow-color",
|
|
83
|
+
"drop-shadow",
|
|
84
|
+
"drop-shadow-color",
|
|
85
|
+
"filter-drop-shadow-$dropShadow",
|
|
86
|
+
"drop-shadow-$dropShadow",
|
|
87
|
+
"filter-drop-shadow-color-$colors",
|
|
88
|
+
"drop-shadow-color-$colors",
|
|
89
|
+
"filter-drop-shadow-color-(op|opacity)",
|
|
90
|
+
"drop-shadow-color-(op|opacity)",
|
|
91
|
+
"filter-drop-shadow-color-(op|opacity)-<percent>",
|
|
92
|
+
"drop-shadow-color-(op|opacity)-<percent>"
|
|
93
|
+
]
|
|
94
|
+
}],
|
|
95
|
+
[/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow", "shadowColor")],
|
|
96
|
+
[/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": h.bracket.percent(opacity) })],
|
|
97
|
+
[/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter("grayscale", percentWithDefault), { autocomplete: ["(backdrop|filter)-grayscale", "(backdrop|filter)-grayscale-<percent>", "grayscale-<percent>"] }],
|
|
98
|
+
[/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => h.bracket.cssvar.degree(s))],
|
|
99
|
+
[/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter("invert", percentWithDefault), { autocomplete: ["(backdrop|filter)-invert", "(backdrop|filter)-invert-<percent>", "invert-<percent>"] }],
|
|
100
|
+
// opacity only on backdrop-filter
|
|
101
|
+
[/^(backdrop-)op(?:acity)?-(.+)$/, toFilter("opacity", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }],
|
|
102
|
+
[/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter("saturate", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-saturate", "(backdrop|filter)-saturate-<percent>", "saturate-<percent>"] }],
|
|
103
|
+
[/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter("sepia", percentWithDefault), { autocomplete: ["(backdrop|filter)-sepia", "(backdrop|filter)-sepia-<percent>", "sepia-<percent>"] }],
|
|
104
|
+
// base
|
|
105
|
+
["filter", { filter: filterProperty }],
|
|
106
|
+
["backdrop-filter", {
|
|
107
|
+
"-webkit-backdrop-filter": backdropFilterProperty,
|
|
108
|
+
"backdrop-filter": backdropFilterProperty
|
|
109
|
+
}],
|
|
110
|
+
// nones
|
|
111
|
+
["filter-none", { filter: "none" }],
|
|
112
|
+
["backdrop-filter-none", {
|
|
113
|
+
"-webkit-backdrop-filter": "none",
|
|
114
|
+
"backdrop-filter": "none"
|
|
115
|
+
}],
|
|
116
|
+
...globalKeywords.map((keyword) => [`filter-${keyword}`, { filter: keyword }]),
|
|
117
|
+
...globalKeywords.map((keyword) => [`backdrop-filter-${keyword}`, {
|
|
118
|
+
"-webkit-backdrop-filter": keyword,
|
|
119
|
+
"backdrop-filter": keyword
|
|
120
|
+
}])
|
|
121
|
+
];
|
|
122
|
+
|
|
123
|
+
const scrollSnapTypeBase = {
|
|
124
|
+
"--un-scroll-snap-strictness": "proximity"
|
|
125
|
+
};
|
|
126
|
+
const scrolls = [
|
|
127
|
+
// snap type
|
|
128
|
+
[/^snap-(x|y)$/, ([, d]) => ({
|
|
129
|
+
"scroll-snap-type": `${d} var(--un-scroll-snap-strictness)`
|
|
130
|
+
}), { autocomplete: "snap-(x|y|both)" }],
|
|
131
|
+
[/^snap-both$/, () => ({
|
|
132
|
+
"scroll-snap-type": "both var(--un-scroll-snap-strictness)"
|
|
133
|
+
})],
|
|
134
|
+
["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }],
|
|
135
|
+
["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }],
|
|
136
|
+
["snap-none", { "scroll-snap-type": "none" }],
|
|
137
|
+
// snap align
|
|
138
|
+
["snap-start", { "scroll-snap-align": "start" }],
|
|
139
|
+
["snap-end", { "scroll-snap-align": "end" }],
|
|
140
|
+
["snap-center", { "scroll-snap-align": "center" }],
|
|
141
|
+
["snap-align-none", { "scroll-snap-align": "none" }],
|
|
142
|
+
// snap stop
|
|
143
|
+
["snap-normal", { "scroll-snap-stop": "normal" }],
|
|
144
|
+
["snap-always", { "scroll-snap-stop": "always" }],
|
|
145
|
+
// scroll margin
|
|
146
|
+
[/^scroll-ma?()-?(.+)$/, directionSize("scroll-margin"), {
|
|
147
|
+
autocomplete: [
|
|
148
|
+
"scroll-(m|p|ma|pa|block|inline)",
|
|
149
|
+
"scroll-(m|p|ma|pa|block|inline)-$spacing",
|
|
150
|
+
"scroll-(m|p|ma|pa|block|inline)-(x|y|r|l|t|b|bs|be|is|ie)",
|
|
151
|
+
"scroll-(m|p|ma|pa|block|inline)-(x|y|r|l|t|b|bs|be|is|ie)-$spacing"
|
|
152
|
+
]
|
|
153
|
+
}],
|
|
154
|
+
[/^scroll-m-?([xy])-?(.+)$/, directionSize("scroll-margin")],
|
|
155
|
+
[/^scroll-m-?([rltb])-?(.+)$/, directionSize("scroll-margin")],
|
|
156
|
+
[/^scroll-m-(block|inline)-(.+)$/, directionSize("scroll-margin")],
|
|
157
|
+
[/^scroll-m-?([bi][se])-?(.+)$/, directionSize("scroll-margin")],
|
|
158
|
+
// scroll padding
|
|
159
|
+
[/^scroll-pa?()-?(.+)$/, directionSize("scroll-padding")],
|
|
160
|
+
[/^scroll-p-?([xy])-?(.+)$/, directionSize("scroll-padding")],
|
|
161
|
+
[/^scroll-p-?([rltb])-?(.+)$/, directionSize("scroll-padding")],
|
|
162
|
+
[/^scroll-p-(block|inline)-(.+)$/, directionSize("scroll-padding")],
|
|
163
|
+
[/^scroll-p-?([bi][se])-?(.+)$/, directionSize("scroll-padding")]
|
|
164
|
+
];
|
|
165
|
+
|
|
166
|
+
const borderSpacingBase = {
|
|
167
|
+
"--un-border-spacing-x": 0,
|
|
168
|
+
"--un-border-spacing-y": 0
|
|
169
|
+
};
|
|
170
|
+
const borderSpacingProperty = "var(--un-border-spacing-x) var(--un-border-spacing-y)";
|
|
171
|
+
const tables = [
|
|
172
|
+
// displays
|
|
173
|
+
["inline-table", { display: "inline-table" }],
|
|
174
|
+
["table", { display: "table" }],
|
|
175
|
+
["table-caption", { display: "table-caption" }],
|
|
176
|
+
["table-cell", { display: "table-cell" }],
|
|
177
|
+
["table-column", { display: "table-column" }],
|
|
178
|
+
["table-column-group", { display: "table-column-group" }],
|
|
179
|
+
["table-footer-group", { display: "table-footer-group" }],
|
|
180
|
+
["table-header-group", { display: "table-header-group" }],
|
|
181
|
+
["table-row", { display: "table-row" }],
|
|
182
|
+
["table-row-group", { display: "table-row-group" }],
|
|
183
|
+
// layouts
|
|
184
|
+
["border-collapse", { "border-collapse": "collapse" }],
|
|
185
|
+
["border-separate", { "border-collapse": "separate" }],
|
|
186
|
+
[/^border-spacing-(.+)$/, ([, s], { theme }) => {
|
|
187
|
+
const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.auto.fraction.rem(s);
|
|
188
|
+
if (v != null) {
|
|
189
|
+
return {
|
|
190
|
+
"--un-border-spacing-x": v,
|
|
191
|
+
"--un-border-spacing-y": v,
|
|
192
|
+
"border-spacing": borderSpacingProperty
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
}, { autocomplete: ["border-spacing", "border-spacing-$spacing"] }],
|
|
196
|
+
[/^border-spacing-([xy])-(.+)$/, ([, d, s], { theme }) => {
|
|
197
|
+
const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.auto.fraction.rem(s);
|
|
198
|
+
if (v != null) {
|
|
199
|
+
return {
|
|
200
|
+
[`--un-border-spacing-${d}`]: v,
|
|
201
|
+
"border-spacing": borderSpacingProperty
|
|
202
|
+
};
|
|
203
|
+
}
|
|
204
|
+
}, { autocomplete: ["border-spacing-(x|y)", "border-spacing-(x|y)-$spacing"] }],
|
|
205
|
+
["caption-top", { "caption-side": "top" }],
|
|
206
|
+
["caption-bottom", { "caption-side": "bottom" }],
|
|
207
|
+
["table-auto", { "table-layout": "auto" }],
|
|
208
|
+
["table-fixed", { "table-layout": "fixed" }],
|
|
209
|
+
["table-empty-cells-visible", { "empty-cells": "show" }],
|
|
210
|
+
["table-empty-cells-hidden", { "empty-cells": "hide" }]
|
|
211
|
+
];
|
|
212
|
+
|
|
213
|
+
const touchActionBase = {
|
|
214
|
+
"--un-pan-x": varEmpty,
|
|
215
|
+
"--un-pan-y": varEmpty,
|
|
216
|
+
"--un-pinch-zoom": varEmpty
|
|
217
|
+
};
|
|
218
|
+
const touchActionProperty = "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)";
|
|
219
|
+
const touchActions = [
|
|
220
|
+
[/^touch-pan-(x|left|right)$/, ([, d]) => ({
|
|
221
|
+
"--un-pan-x": `pan-${d}`,
|
|
222
|
+
"touch-action": touchActionProperty
|
|
223
|
+
}), { autocomplete: ["touch-pan", "touch-pan-(x|left|right|y|up|down)"] }],
|
|
224
|
+
[/^touch-pan-(y|up|down)$/, ([, d]) => ({
|
|
225
|
+
"--un-pan-y": `pan-${d}`,
|
|
226
|
+
"touch-action": touchActionProperty
|
|
227
|
+
})],
|
|
228
|
+
["touch-pinch-zoom", {
|
|
229
|
+
"--un-pinch-zoom": "pinch-zoom",
|
|
230
|
+
"touch-action": touchActionProperty
|
|
231
|
+
}],
|
|
232
|
+
["touch-auto", { "touch-action": "auto" }],
|
|
233
|
+
["touch-manipulation", { "touch-action": "manipulation" }],
|
|
234
|
+
["touch-none", { "touch-action": "none" }],
|
|
235
|
+
...makeGlobalStaticRules("touch", "touch-action")
|
|
236
|
+
];
|
|
237
|
+
|
|
238
|
+
const fontVariantNumericBase = {
|
|
239
|
+
"--un-ordinal": varEmpty,
|
|
240
|
+
"--un-slashed-zero": varEmpty,
|
|
241
|
+
"--un-numeric-figure": varEmpty,
|
|
242
|
+
"--un-numeric-spacing": varEmpty,
|
|
243
|
+
"--un-numeric-fraction": varEmpty
|
|
244
|
+
};
|
|
245
|
+
function toEntries(entry) {
|
|
246
|
+
return {
|
|
247
|
+
...entry,
|
|
248
|
+
"font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)"
|
|
249
|
+
};
|
|
250
|
+
}
|
|
251
|
+
const fontVariantNumeric = [
|
|
252
|
+
[/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" }), { autocomplete: "ordinal" }],
|
|
253
|
+
[/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" }), { autocomplete: "slashed-zero" }],
|
|
254
|
+
[/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" }), { autocomplete: "lining-nums" }],
|
|
255
|
+
[/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" }), { autocomplete: "oldstyle-nums" }],
|
|
256
|
+
[/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" }), { autocomplete: "proportional-nums" }],
|
|
257
|
+
[/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" }), { autocomplete: "tabular-nums" }],
|
|
258
|
+
[/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" }), { autocomplete: "diagonal-fractions" }],
|
|
259
|
+
[/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" }), { autocomplete: "stacked-fractions" }],
|
|
260
|
+
["normal-nums", { "font-variant-numeric": "normal" }]
|
|
261
|
+
];
|
|
262
|
+
|
|
263
|
+
export { filters as a, backdropFilterBase as b, scrolls as c, borderSpacingBase as d, touchActionBase as e, filterBase as f, touchActions as g, fontVariantNumericBase as h, fontVariantNumeric as i, scrollSnapTypeBase as s, tables as t };
|