feature: vor und nachteile

This commit is contained in:
Hikyu
2026-05-31 13:54:31 +02:00
parent 552a947a1c
commit e3dad17446
23270 changed files with 3024794 additions and 200 deletions
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,748 @@
import * as _unocss_core from '@unocss/core';
import { C as Colors } from './preset-mini.BjJC-NnU.mjs';
declare const theme: {
width: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
auto: string;
};
height: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
auto: string;
};
maxWidth: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
maxHeight: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
minWidth: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
minHeight: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
inlineSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
auto: string;
};
blockSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
auto: string;
};
maxInlineSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
maxBlockSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
minInlineSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
minBlockSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
colors: {
inherit: string;
current: string;
transparent: string;
black: string;
white: string;
rose: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
pink: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
fuchsia: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
purple: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
violet: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
indigo: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
blue: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
sky: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
cyan: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
teal: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
emerald: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
green: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
lime: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
yellow: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
amber: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
orange: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
red: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
slate: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
zinc: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
neutral: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
stone: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
light: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
dark: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
readonly lightblue: string | (Colors & {
DEFAULT?: string;
});
readonly lightBlue: string | (Colors & {
DEFAULT?: string;
});
readonly warmgray: string | (Colors & {
DEFAULT?: string;
});
readonly warmGray: string | (Colors & {
DEFAULT?: string;
});
readonly truegray: string | (Colors & {
DEFAULT?: string;
});
readonly trueGray: string | (Colors & {
DEFAULT?: string;
});
readonly coolgray: string | (Colors & {
DEFAULT?: string;
});
readonly coolGray: string | (Colors & {
DEFAULT?: string;
});
readonly bluegray: string | (Colors & {
DEFAULT?: string;
});
readonly blueGray: string | (Colors & {
DEFAULT?: string;
});
};
fontFamily: {
sans: string;
serif: string;
mono: string;
};
fontSize: Record<string, string | [string, string | _unocss_core.CSSObject] | [string, string, string]> | undefined;
fontWeight: {
thin: string;
extralight: string;
light: string;
normal: string;
medium: string;
semibold: string;
bold: string;
extrabold: string;
black: string;
};
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
verticalBreakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
borderRadius: {
DEFAULT: string;
none: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
full: string;
};
lineHeight: {
none: string;
tight: string;
snug: string;
normal: string;
relaxed: string;
loose: string;
};
letterSpacing: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
widest: string;
};
wordSpacing: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
widest: string;
};
boxShadow: {
DEFAULT: string[];
none: string;
sm: string;
md: string[];
lg: string[];
xl: string[];
'2xl': string;
inner: string;
};
textIndent: Record<string, string> | undefined;
textShadow: {
DEFAULT: string[];
none: string;
sm: string;
md: string[];
lg: string[];
xl: string[];
};
textStrokeWidth: Record<string, string> | undefined;
blur: {
DEFAULT: string;
'0': string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
};
dropShadow: {
DEFAULT: string[];
sm: string;
md: string[];
lg: string[];
xl: string[];
'2xl': string;
none: string;
};
easing: {
DEFAULT: string;
linear: string;
in: string;
out: string;
'in-out': string;
};
transitionProperty: {
none: string;
all: string;
colors: string;
opacity: string;
shadow: string;
transform: string;
readonly DEFAULT: string;
};
lineWidth: {
DEFAULT: string;
none: string;
};
spacing: {
DEFAULT: string;
none: string;
xs: string;
sm: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
'8xl': string;
'9xl': string;
};
duration: {
DEFAULT: string;
none: string;
75: string;
100: string;
150: string;
200: string;
300: string;
500: string;
700: string;
1000: string;
};
ringWidth: {
DEFAULT: string;
none: string;
};
preflightBase: {
'--un-ring-inset': string;
'--un-ring-offset-width': string;
'--un-ring-offset-color': string;
'--un-ring-width': string;
'--un-ring-color': string;
'--un-shadow': string;
'--un-ring-offset-shadow': string;
'--un-ring-shadow': string;
'--un-shadow-inset': string;
'--un-rotate': number;
'--un-rotate-x': number;
'--un-rotate-y': number;
'--un-rotate-z': number;
'--un-scale-x': number;
'--un-scale-y': number;
'--un-scale-z': number;
'--un-skew-x': number;
'--un-skew-y': number;
'--un-translate-x': number;
'--un-translate-y': number;
'--un-translate-z': number;
};
containers: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
};
zIndex: {
auto: string;
};
media: {
mouse: string;
};
};
export { theme as t };
@@ -0,0 +1,79 @@
import { CSSObject, Arrayable } from '@unocss/core';
interface ThemeAnimation {
keyframes?: Record<string, string>;
durations?: Record<string, string>;
timingFns?: Record<string, string>;
properties?: Record<string, object>;
counts?: Record<string, string | number>;
category?: Record<string, string>;
}
interface Colors {
[key: string]: Colors & {
DEFAULT?: string;
} | string;
}
interface Theme {
width?: Record<string, string>;
height?: Record<string, string>;
maxWidth?: Record<string, string>;
maxHeight?: Record<string, string>;
minWidth?: Record<string, string>;
minHeight?: Record<string, string>;
inlineSize?: Record<string, string>;
blockSize?: Record<string, string>;
maxInlineSize?: Record<string, string>;
maxBlockSize?: Record<string, string>;
minInlineSize?: Record<string, string>;
minBlockSize?: Record<string, string>;
borderRadius?: Record<string, string>;
breakpoints?: Record<string, string>;
verticalBreakpoints?: Record<string, string>;
colors?: Colors;
borderColor?: Colors;
backgroundColor?: Colors;
textColor?: Colors;
shadowColor?: Colors;
accentColor?: Colors;
fontFamily?: Record<string, string>;
fontSize?: Record<string, string | [string, string | CSSObject] | [string, string, string]>;
fontWeight?: Record<string, string>;
lineHeight?: Record<string, string>;
letterSpacing?: Record<string, string>;
wordSpacing?: Record<string, string>;
boxShadow?: Record<string, string | string[]>;
textIndent?: Record<string, string>;
textShadow?: Record<string, string | string[]>;
textStrokeWidth?: Record<string, string>;
ringWidth?: Record<string, string>;
lineWidth?: Record<string, string>;
spacing?: Record<string, string>;
duration?: Record<string, string>;
aria?: Record<string, string>;
data?: Record<string, string>;
zIndex?: Record<string, string>;
blur?: Record<string, string>;
dropShadow?: Record<string, string | string[]>;
easing?: Record<string, string>;
transitionProperty?: Record<string, string>;
media?: Record<string, string>;
supports?: Record<string, string>;
containers?: Record<string, string>;
animation?: ThemeAnimation;
gridAutoColumn?: Record<string, string>;
gridAutoRow?: Record<string, string>;
gridColumn?: Record<string, string>;
gridRow?: Record<string, string>;
gridTemplateColumn?: Record<string, string>;
gridTemplateRow?: Record<string, string>;
container?: {
center?: boolean;
padding?: string | Record<string, string>;
maxWidth?: Record<string, string>;
};
/** Used to generate CSS custom properties placeholder in preflight */
preflightRoot?: Arrayable<string>;
preflightBase?: Record<string, string | number>;
}
export type { Colors as C, Theme as T, ThemeAnimation as a };
@@ -0,0 +1,79 @@
import { CSSObject, Arrayable } from '@unocss/core';
interface ThemeAnimation {
keyframes?: Record<string, string>;
durations?: Record<string, string>;
timingFns?: Record<string, string>;
properties?: Record<string, object>;
counts?: Record<string, string | number>;
category?: Record<string, string>;
}
interface Colors {
[key: string]: Colors & {
DEFAULT?: string;
} | string;
}
interface Theme {
width?: Record<string, string>;
height?: Record<string, string>;
maxWidth?: Record<string, string>;
maxHeight?: Record<string, string>;
minWidth?: Record<string, string>;
minHeight?: Record<string, string>;
inlineSize?: Record<string, string>;
blockSize?: Record<string, string>;
maxInlineSize?: Record<string, string>;
maxBlockSize?: Record<string, string>;
minInlineSize?: Record<string, string>;
minBlockSize?: Record<string, string>;
borderRadius?: Record<string, string>;
breakpoints?: Record<string, string>;
verticalBreakpoints?: Record<string, string>;
colors?: Colors;
borderColor?: Colors;
backgroundColor?: Colors;
textColor?: Colors;
shadowColor?: Colors;
accentColor?: Colors;
fontFamily?: Record<string, string>;
fontSize?: Record<string, string | [string, string | CSSObject] | [string, string, string]>;
fontWeight?: Record<string, string>;
lineHeight?: Record<string, string>;
letterSpacing?: Record<string, string>;
wordSpacing?: Record<string, string>;
boxShadow?: Record<string, string | string[]>;
textIndent?: Record<string, string>;
textShadow?: Record<string, string | string[]>;
textStrokeWidth?: Record<string, string>;
ringWidth?: Record<string, string>;
lineWidth?: Record<string, string>;
spacing?: Record<string, string>;
duration?: Record<string, string>;
aria?: Record<string, string>;
data?: Record<string, string>;
zIndex?: Record<string, string>;
blur?: Record<string, string>;
dropShadow?: Record<string, string | string[]>;
easing?: Record<string, string>;
transitionProperty?: Record<string, string>;
media?: Record<string, string>;
supports?: Record<string, string>;
containers?: Record<string, string>;
animation?: ThemeAnimation;
gridAutoColumn?: Record<string, string>;
gridAutoRow?: Record<string, string>;
gridColumn?: Record<string, string>;
gridRow?: Record<string, string>;
gridTemplateColumn?: Record<string, string>;
gridTemplateRow?: Record<string, string>;
container?: {
center?: boolean;
padding?: string | Record<string, string>;
maxWidth?: Record<string, string>;
};
/** Used to generate CSS custom properties placeholder in preflight */
preflightRoot?: Arrayable<string>;
preflightBase?: Record<string, string | number>;
}
export type { Colors as C, Theme as T, ThemeAnimation as a };
@@ -0,0 +1,351 @@
import { a as h, q as makeGlobalStaticRules, g as globalKeywords, l as colorResolver, t as isCSSMathFn, n as hasParseableColor, m as colorableShadows, p as positionMap, w as transformXYZ } from './preset-mini.DcESQHgx.mjs';
const cursorValues = ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"];
const containValues = ["none", "strict", "content", "size", "inline-size", "layout", "style", "paint"];
const varEmpty = " ";
const displays = [
["inline", { display: "inline" }],
["block", { display: "block" }],
["inline-block", { display: "inline-block" }],
["contents", { display: "contents" }],
["flow-root", { display: "flow-root" }],
["list-item", { display: "list-item" }],
["hidden", { display: "none" }],
[/^display-(.+)$/, ([, c]) => ({ display: h.bracket.cssvar.global(c) })]
];
const appearances = [
["visible", { visibility: "visible" }],
["invisible", { visibility: "hidden" }],
["backface-visible", { "backface-visibility": "visible" }],
["backface-hidden", { "backface-visibility": "hidden" }],
...makeGlobalStaticRules("backface", "backface-visibility")
];
const cursors = [
[/^cursor-(.+)$/, ([, c]) => ({ cursor: h.bracket.cssvar.global(c) })],
...cursorValues.map((v) => [`cursor-${v}`, { cursor: v }])
];
const contains = [
[/^contain-(.*)$/, ([, d]) => {
if (h.bracket(d) != null) {
return {
contain: h.bracket(d).split(" ").map((e) => h.cssvar.fraction(e) ?? e).join(" ")
};
}
return containValues.includes(d) ? { contain: d } : void 0;
}]
];
const pointerEvents = [
["pointer-events-auto", { "pointer-events": "auto" }],
["pointer-events-none", { "pointer-events": "none" }],
...makeGlobalStaticRules("pointer-events")
];
const resizes = [
["resize-x", { resize: "horizontal" }],
["resize-y", { resize: "vertical" }],
["resize", { resize: "both" }],
["resize-none", { resize: "none" }],
...makeGlobalStaticRules("resize")
];
const userSelects = [
["select-auto", { "-webkit-user-select": "auto", "user-select": "auto" }],
["select-all", { "-webkit-user-select": "all", "user-select": "all" }],
["select-text", { "-webkit-user-select": "text", "user-select": "text" }],
["select-none", { "-webkit-user-select": "none", "user-select": "none" }],
...makeGlobalStaticRules("select", "user-select")
];
const whitespaces = [
[
/^(?:whitespace-|ws-)([-\w]+)$/,
([, v]) => ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces", ...globalKeywords].includes(v) ? { "white-space": v } : void 0,
{ autocomplete: "(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)" }
]
];
const contentVisibility = [
[/^intrinsic-size-(.+)$/, ([, d]) => ({ "contain-intrinsic-size": h.bracket.cssvar.global.fraction.rem(d) }), { autocomplete: "intrinsic-size-<num>" }],
["content-visibility-visible", { "content-visibility": "visible" }],
["content-visibility-hidden", { "content-visibility": "hidden" }],
["content-visibility-auto", { "content-visibility": "auto" }],
...makeGlobalStaticRules("content-visibility")
];
const contents = [
[/^content-(.+)$/, ([, v]) => ({ content: h.bracket.cssvar(v) })],
["content-empty", { content: '""' }],
["content-none", { content: "none" }]
];
const breaks = [
["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
["break-words", { "overflow-wrap": "break-word" }],
["break-all", { "word-break": "break-all" }],
["break-keep", { "word-break": "keep-all" }],
["break-anywhere", { "overflow-wrap": "anywhere" }]
];
const textWraps = [
["text-wrap", { "text-wrap": "wrap" }],
["text-nowrap", { "text-wrap": "nowrap" }],
["text-balance", { "text-wrap": "balance" }],
["text-pretty", { "text-wrap": "pretty" }]
];
const textOverflows = [
["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
["text-truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
["text-ellipsis", { "text-overflow": "ellipsis" }],
["text-clip", { "text-overflow": "clip" }]
];
const textTransforms = [
["case-upper", { "text-transform": "uppercase" }],
["case-lower", { "text-transform": "lowercase" }],
["case-capital", { "text-transform": "capitalize" }],
["case-normal", { "text-transform": "none" }],
...makeGlobalStaticRules("case", "text-transform")
];
const fontStyles = [
["italic", { "font-style": "italic" }],
["not-italic", { "font-style": "normal" }],
["font-italic", { "font-style": "italic" }],
["font-not-italic", { "font-style": "normal" }],
["oblique", { "font-style": "oblique" }],
["not-oblique", { "font-style": "normal" }],
["font-oblique", { "font-style": "oblique" }],
["font-not-oblique", { "font-style": "normal" }]
];
const fontSmoothings = [
["antialiased", {
"-webkit-font-smoothing": "antialiased",
"-moz-osx-font-smoothing": "grayscale"
}],
["subpixel-antialiased", {
"-webkit-font-smoothing": "auto",
"-moz-osx-font-smoothing": "auto"
}]
];
const ringBase = {
"--un-ring-inset": varEmpty,
"--un-ring-offset-width": "0px",
"--un-ring-offset-color": "#fff",
"--un-ring-width": "0px",
"--un-ring-color": "rgb(147 197 253 / 0.5)",
"--un-shadow": "0 0 rgb(0 0 0 / 0)"
};
const preflightKeys$2 = Object.keys(ringBase);
const rings = [
// ring
[/^ring(?:-(.+))?$/, ([, d], { theme }) => {
const value = theme.ringWidth?.[d || "DEFAULT"] ?? h.px(d || "1");
if (value) {
return {
"--un-ring-width": value,
"--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
"--un-ring-shadow": "var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color)",
"box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
};
}
}, { custom: { preflightKeys: preflightKeys$2 }, autocomplete: "ring-$ringWidth" }],
// size
[/^ring-(?:width-|size-)(.+)$/, handleWidth, { autocomplete: "ring-(width|size)-$lineWidth" }],
// offset size
["ring-offset", { "--un-ring-offset-width": "1px" }],
[/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: "ring-offset-(width|size)-$lineWidth" }],
// colors
[/^ring-(.+)$/, handleColorOrWidth, { autocomplete: "ring-$colors" }],
[/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "ring-(op|opacity)-<percent>" }],
// offset color
[/^ring-offset-(.+)$/, colorResolver("--un-ring-offset-color", "ring-offset", "borderColor"), { autocomplete: "ring-offset-$colors" }],
[/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "ring-offset-(op|opacity)-<percent>" }],
// style
["ring-inset", { "--un-ring-inset": "inset" }]
];
function handleWidth([, b], { theme }) {
return { "--un-ring-width": theme.ringWidth?.[b] ?? h.bracket.cssvar.px(b) };
}
function handleColorOrWidth(match, ctx) {
if (isCSSMathFn(h.bracket(match[1])))
return handleWidth(match, ctx);
return colorResolver("--un-ring-color", "ring", "borderColor")(match, ctx);
}
const boxShadowsBase = {
"--un-ring-offset-shadow": "0 0 rgb(0 0 0 / 0)",
"--un-ring-shadow": "0 0 rgb(0 0 0 / 0)",
"--un-shadow-inset": varEmpty,
"--un-shadow": "0 0 rgb(0 0 0 / 0)"
};
const preflightKeys$1 = Object.keys(boxShadowsBase);
const boxShadows = [
// color
[/^shadow(?:-(.+))?$/, (match, context) => {
const [, d] = match;
const { theme } = context;
const v = theme.boxShadow?.[d || "DEFAULT"];
const c = d ? h.bracket.cssvar(d) : void 0;
if ((v != null || c != null) && !hasParseableColor(c, theme, "shadowColor")) {
return {
"--un-shadow": colorableShadows(v || c, "--un-shadow-color").join(","),
"box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
};
}
return colorResolver("--un-shadow-color", "shadow", "shadowColor")(match, context);
}, { custom: { preflightKeys: preflightKeys$1 }, autocomplete: ["shadow-$colors", "shadow-$boxShadow"] }],
[/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": h.bracket.percent.cssvar(opacity) }), { autocomplete: "shadow-(op|opacity)-<percent>" }],
// inset
["shadow-inset", { "--un-shadow-inset": "inset" }]
];
const transformValues = [
"translate",
"rotate",
"scale"
];
const transformCpu = [
"translateX(var(--un-translate-x))",
"translateY(var(--un-translate-y))",
// 'translateZ(var(--un-translate-z))',
"rotate(var(--un-rotate))",
// 'rotateX(var(--un-rotate-x))',
// 'rotateY(var(--un-rotate-y))',
"rotateZ(var(--un-rotate-z))",
"skewX(var(--un-skew-x))",
"skewY(var(--un-skew-y))",
"scaleX(var(--un-scale-x))",
"scaleY(var(--un-scale-y))"
// 'scaleZ(var(--un-scale-z))',
].join(" ");
const transform = [
"translateX(var(--un-translate-x))",
"translateY(var(--un-translate-y))",
"translateZ(var(--un-translate-z))",
"rotate(var(--un-rotate))",
"rotateX(var(--un-rotate-x))",
"rotateY(var(--un-rotate-y))",
"rotateZ(var(--un-rotate-z))",
"skewX(var(--un-skew-x))",
"skewY(var(--un-skew-y))",
"scaleX(var(--un-scale-x))",
"scaleY(var(--un-scale-y))",
"scaleZ(var(--un-scale-z))"
].join(" ");
const transformGpu = [
"translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))",
"rotate(var(--un-rotate))",
"rotateX(var(--un-rotate-x))",
"rotateY(var(--un-rotate-y))",
"rotateZ(var(--un-rotate-z))",
"skewX(var(--un-skew-x))",
"skewY(var(--un-skew-y))",
"scaleX(var(--un-scale-x))",
"scaleY(var(--un-scale-y))",
"scaleZ(var(--un-scale-z))"
].join(" ");
const transformBase = {
// transform
"--un-rotate": 0,
"--un-rotate-x": 0,
"--un-rotate-y": 0,
"--un-rotate-z": 0,
"--un-scale-x": 1,
"--un-scale-y": 1,
"--un-scale-z": 1,
"--un-skew-x": 0,
"--un-skew-y": 0,
"--un-translate-x": 0,
"--un-translate-y": 0,
"--un-translate-z": 0
};
const preflightKeys = Object.keys(transformBase);
const transforms = [
// origins
[
/^(?:transform-)?origin-(.+)$/,
([, s]) => ({ "transform-origin": positionMap[s] ?? h.bracket.cssvar(s) }),
{ autocomplete: [`transform-origin-(${Object.keys(positionMap).join("|")})`, `origin-(${Object.keys(positionMap).join("|")})`] }
],
// perspectives
[/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
const v = h.bracket.cssvar.px.numberWithUnit(s);
if (v != null) {
return {
"-webkit-perspective": v,
"perspective": v
};
}
}],
// skip 1 & 2 letters shortcut
[/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
const v = h.bracket.cssvar(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
if (v != null) {
return {
"-webkit-perspective-origin": v,
"perspective-origin": v
};
}
}],
// modifiers
[/^(?:transform-)?translate-()(.+)$/, handleTranslate, { custom: { preflightKeys } }],
[/^(?:transform-)?translate-([xyz])-(.+)$/, handleTranslate, { custom: { preflightKeys } }],
[/^(?:transform-)?rotate-()(.+)$/, handleRotate, { custom: { preflightKeys } }],
[/^(?:transform-)?rotate-([xyz])-(.+)$/, handleRotate, { custom: { preflightKeys } }],
[/^(?:transform-)?skew-()(.+)$/, handleSkew, { custom: { preflightKeys } }],
[/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew, { custom: { preflightKeys }, autocomplete: ["transform-skew-(x|y)-<percent>", "skew-(x|y)-<percent>"] }],
[/^(?:transform-)?scale-()(.+)$/, handleScale, { custom: { preflightKeys } }],
[/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale, { custom: { preflightKeys }, autocomplete: [`transform-(${transformValues.join("|")})-<percent>`, `transform-(${transformValues.join("|")})-(x|y|z)-<percent>`, `(${transformValues.join("|")})-<percent>`, `(${transformValues.join("|")})-(x|y|z)-<percent>`] }],
// style
[/^(?:transform-)?preserve-3d$/, () => ({ "transform-style": "preserve-3d" })],
[/^(?:transform-)?preserve-flat$/, () => ({ "transform-style": "flat" })],
// base
["transform", { transform }, { custom: { preflightKeys } }],
["transform-cpu", { transform: transformCpu }, {
custom: { preflightKeys: ["--un-translate-x", "--un-translate-y", "--un-rotate", "--un-rotate-z", "--un-skew-x", "--un-skew-y", "--un-scale-x", "--un-scale-y"] }
}],
["transform-gpu", { transform: transformGpu }, { custom: { preflightKeys } }],
["transform-none", { transform: "none" }],
...makeGlobalStaticRules("transform")
];
function handleTranslate([, d, b], { theme }) {
const v = theme.spacing?.[b] ?? h.bracket.cssvar.fraction.rem(b);
if (v != null) {
return [
...transformXYZ(d, v, "translate"),
["transform", transform]
];
}
}
function handleScale([, d, b]) {
const v = h.bracket.cssvar.fraction.percent(b);
if (v != null) {
return [
...transformXYZ(d, v, "scale"),
["transform", transform]
];
}
}
function handleRotate([, d = "", b]) {
const v = h.bracket.cssvar.degree(b);
if (v != null) {
if (d) {
return {
"--un-rotate": 0,
[`--un-rotate-${d}`]: v,
"transform": transform
};
} else {
return {
"--un-rotate-x": 0,
"--un-rotate-y": 0,
"--un-rotate-z": 0,
"--un-rotate": v,
"transform": transform
};
}
}
}
function handleSkew([, d, b]) {
const v = h.bracket.cssvar.degree(b);
if (v != null) {
return [
...transformXYZ(d, v, "skew"),
["transform", transform]
];
}
}
export { rings as a, boxShadowsBase as b, boxShadows as c, displays as d, appearances as e, cursors as f, contains as g, resizes as h, contentVisibility as i, contents as j, breaks as k, textOverflows as l, textTransforms as m, fontStyles as n, fontSmoothings as o, pointerEvents as p, transformBase as q, ringBase as r, transforms as s, textWraps as t, userSelects as u, varEmpty as v, whitespaces as w };
@@ -0,0 +1,76 @@
import { DynamicMatcher, CSSObject, VariantContext, StaticRule } from '@unocss/core';
import { ParsedColorValue } from '@unocss/rule-utils';
import { T as Theme } from './preset-mini.BjJC-NnU.js';
declare const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
/**
* Provide {@link DynamicMatcher} function returning spacing definition. See spacing rules.
*
* @param propertyPrefix - Property for the css value to be created. Postfix will be appended according to direction matched.
* @see {@link directionMap}
*/
declare function directionSize(propertyPrefix: string): DynamicMatcher;
type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor' | 'shadowColor' | 'accentColor';
/**
* Split utility shorthand delimited by / or :
*/
declare function splitShorthand(body: string, type: string): string[] | undefined;
/**
* Parse color string into {@link ParsedColorValue} (if possible). Color value will first be matched to theme object before parsing.
* See also color.tests.ts for more examples.
*
* @example Parseable strings:
* 'red' // From theme, if 'red' is available
* 'red-100' // From theme, plus scale
* 'red-100/20' // From theme, plus scale/opacity
* '[rgb(100 2 3)]/[var(--op)]' // Bracket with rgb color and bracket with opacity
*
* @param body - Color string to be parsed.
* @param theme - {@link Theme} object.
* @return object if string is parseable.
*/
declare function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): ParsedColorValue | undefined;
/**
* Provide {@link DynamicMatcher} function to produce color value matched from rule.
*
* @see {@link parseColor}
*
* @example Resolving 'red' from theme:
* colorResolver('background-color', 'background')('', 'red')
* return { 'background-color': '#f12' }
*
* @example Resolving 'red-100' from theme:
* colorResolver('background-color', 'background')('', 'red-100')
* return { '--un-background-opacity': '1', 'background-color': 'rgb(254 226 226 / var(--un-background-opacity))' }
*
* @example Resolving 'red-100/20' from theme:
* colorResolver('background-color', 'background')('', 'red-100/20')
* return { 'background-color': 'rgb(204 251 241 / 0.22)' }
*
* @example Resolving 'hex-124':
* colorResolver('color', 'text')('', 'hex-124')
* return { '--un-text-opacity': '1', 'color': 'rgb(17 34 68 / var(--un-text-opacity))' }
*
* @param property - Property for the css value to be created.
* @param varName - Base name for the opacity variable.
* @param [key] - Theme key to select the color from.
* @param [shouldPass] - Function to decide whether to pass the css.
* @return object.
*/
declare function colorResolver(property: string, varName: string, key?: ThemeColorKeys, shouldPass?: (css: CSSObject) => boolean): DynamicMatcher;
declare function colorableShadows(shadows: string | string[], colorVar: string): string[];
declare function hasParseableColor(color: string | undefined, theme: Theme, key: ThemeColorKeys): boolean;
declare function resolveBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>, key?: 'breakpoints' | 'verticalBreakpoints'): {
point: string;
size: string;
}[] | undefined;
declare function resolveVerticalBreakpoints(context: Readonly<VariantContext<Theme>>): {
point: string;
size: string;
}[] | undefined;
declare function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[];
declare function isCSSMathFn(value: string | undefined): boolean;
declare function isSize(str: string): boolean;
declare function transformXYZ(d: string, v: string, name: string): [string, string][];
export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, isSize as e, hasParseableColor as h, isCSSMathFn as i, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s, transformXYZ as t };
@@ -0,0 +1,304 @@
import { colors } from '../colors.mjs';
import { q as transformBase, b as boxShadowsBase, r as ringBase } from './preset-mini.C5mgDWy5.mjs';
const blur = {
"DEFAULT": "8px",
"0": "0",
"sm": "4px",
"md": "12px",
"lg": "16px",
"xl": "24px",
"2xl": "40px",
"3xl": "64px"
};
const dropShadow = {
"DEFAULT": ["0 1px 2px rgb(0 0 0 / 0.1)", "0 1px 1px rgb(0 0 0 / 0.06)"],
"sm": "0 1px 1px rgb(0 0 0 / 0.05)",
"md": ["0 4px 3px rgb(0 0 0 / 0.07)", "0 2px 2px rgb(0 0 0 / 0.06)"],
"lg": ["0 10px 8px rgb(0 0 0 / 0.04)", "0 4px 3px rgb(0 0 0 / 0.1)"],
"xl": ["0 20px 13px rgb(0 0 0 / 0.03)", "0 8px 5px rgb(0 0 0 / 0.08)"],
"2xl": "0 25px 25px rgb(0 0 0 / 0.15)",
"none": "0 0 rgb(0 0 0 / 0)"
};
const fontFamily = {
sans: [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
'"Noto Sans"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"'
].join(","),
serif: [
"ui-serif",
"Georgia",
"Cambria",
'"Times New Roman"',
"Times",
"serif"
].join(","),
mono: [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
'"Liberation Mono"',
'"Courier New"',
"monospace"
].join(",")
};
const fontSize = {
"xs": ["0.75rem", "1rem"],
"sm": ["0.875rem", "1.25rem"],
"base": ["1rem", "1.5rem"],
"lg": ["1.125rem", "1.75rem"],
"xl": ["1.25rem", "1.75rem"],
"2xl": ["1.5rem", "2rem"],
"3xl": ["1.875rem", "2.25rem"],
"4xl": ["2.25rem", "2.5rem"],
"5xl": ["3rem", "1"],
"6xl": ["3.75rem", "1"],
"7xl": ["4.5rem", "1"],
"8xl": ["6rem", "1"],
"9xl": ["8rem", "1"]
};
const textIndent = {
"DEFAULT": "1.5rem",
"xs": "0.5rem",
"sm": "1rem",
"md": "1.5rem",
"lg": "2rem",
"xl": "2.5rem",
"2xl": "3rem",
"3xl": "4rem"
};
const textStrokeWidth = {
DEFAULT: "1.5rem",
none: "0",
sm: "thin",
md: "medium",
lg: "thick"
};
const textShadow = {
DEFAULT: ["0 0 1px rgb(0 0 0 / 0.2)", "0 0 1px rgb(1 0 5 / 0.1)"],
none: "0 0 rgb(0 0 0 / 0)",
sm: "1px 1px 3px rgb(36 37 47 / 0.25)",
md: ["0 1px 2px rgb(30 29 39 / 0.19)", "1px 2px 4px rgb(54 64 147 / 0.18)"],
lg: ["3px 3px 6px rgb(0 0 0 / 0.26)", "0 0 5px rgb(15 3 86 / 0.22)"],
xl: ["1px 1px 3px rgb(0 0 0 / 0.29)", "2px 4px 7px rgb(73 64 125 / 0.35)"]
};
const lineHeight = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2"
};
const letterSpacing = {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0em",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em"
};
const fontWeight = {
thin: "100",
extralight: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900"
// int[0, 900] -> int
};
const wordSpacing = letterSpacing;
const breakpoints = {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px"
};
const verticalBreakpoints = { ...breakpoints };
const lineWidth = {
DEFAULT: "1px",
none: "0"
};
const spacing = {
"DEFAULT": "1rem",
"none": "0",
"xs": "0.75rem",
"sm": "0.875rem",
"lg": "1.125rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem"
};
const duration = {
DEFAULT: "150ms",
none: "0s",
75: "75ms",
100: "100ms",
150: "150ms",
200: "200ms",
300: "300ms",
500: "500ms",
700: "700ms",
1e3: "1000ms"
};
const borderRadius = {
"DEFAULT": "0.25rem",
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"full": "9999px"
};
const boxShadow = {
"DEFAULT": ["var(--un-shadow-inset) 0 1px 3px 0 rgb(0 0 0 / 0.1)", "var(--un-shadow-inset) 0 1px 2px -1px rgb(0 0 0 / 0.1)"],
"none": "0 0 rgb(0 0 0 / 0)",
"sm": "var(--un-shadow-inset) 0 1px 2px 0 rgb(0 0 0 / 0.05)",
"md": ["var(--un-shadow-inset) 0 4px 6px -1px rgb(0 0 0 / 0.1)", "var(--un-shadow-inset) 0 2px 4px -2px rgb(0 0 0 / 0.1)"],
"lg": ["var(--un-shadow-inset) 0 10px 15px -3px rgb(0 0 0 / 0.1)", "var(--un-shadow-inset) 0 4px 6px -4px rgb(0 0 0 / 0.1)"],
"xl": ["var(--un-shadow-inset) 0 20px 25px -5px rgb(0 0 0 / 0.1)", "var(--un-shadow-inset) 0 8px 10px -6px rgb(0 0 0 / 0.1)"],
"2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgb(0 0 0 / 0.25)",
"inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
};
const ringWidth = {
DEFAULT: "3px",
none: "0"
};
const zIndex = {
auto: "auto"
};
const media = {
mouse: "(hover) and (pointer: fine)"
};
const preflightBase = {
...transformBase,
...boxShadowsBase,
...ringBase
};
const baseSize = {
"xs": "20rem",
"sm": "24rem",
"md": "28rem",
"lg": "32rem",
"xl": "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
"prose": "65ch"
};
const width = {
auto: "auto",
...baseSize,
screen: "100vw"
};
const maxWidth = {
none: "none",
...baseSize,
screen: "100vw"
};
const height = {
auto: "auto",
...baseSize,
screen: "100vh"
};
const maxHeight = {
none: "none",
...baseSize,
screen: "100vh"
};
const containers = { ...baseSize };
const easing = {
"DEFAULT": "cubic-bezier(0.4, 0, 0.2, 1)",
"linear": "linear",
"in": "cubic-bezier(0.4, 0, 1, 1)",
"out": "cubic-bezier(0, 0, 0.2, 1)",
"in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
};
const transitionProperty = {
none: "none",
all: "all",
colors: ["color", "background-color", "border-color", "text-decoration-color", "fill", "stroke"].join(","),
opacity: "opacity",
shadow: "box-shadow",
transform: "transform",
get DEFAULT() {
return [this.colors, "opacity", "box-shadow", "transform", "filter", "backdrop-filter"].join(",");
}
};
const theme = {
width,
height,
maxWidth,
maxHeight,
minWidth: maxWidth,
minHeight: maxHeight,
inlineSize: width,
blockSize: height,
maxInlineSize: maxWidth,
maxBlockSize: maxHeight,
minInlineSize: maxWidth,
minBlockSize: maxHeight,
colors,
fontFamily,
fontSize,
fontWeight,
breakpoints,
verticalBreakpoints,
borderRadius,
lineHeight,
letterSpacing,
wordSpacing,
boxShadow,
textIndent,
textShadow,
textStrokeWidth,
blur,
dropShadow,
easing,
transitionProperty,
lineWidth,
spacing,
duration,
ringWidth,
preflightBase,
containers,
zIndex,
media
};
export { height as A, maxHeight as B, containers as C, fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, fontWeight as i, breakpoints as j, lineWidth as k, lineHeight as l, duration as m, borderRadius as n, boxShadow as o, media as p, preflightBase as q, ringWidth as r, spacing as s, theme as t, baseSize as u, verticalBreakpoints as v, wordSpacing as w, width as x, maxWidth as y, zIndex as z };
@@ -0,0 +1,748 @@
import * as _unocss_core from '@unocss/core';
import { C as Colors } from './preset-mini.BjJC-NnU.js';
declare const theme: {
width: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
auto: string;
};
height: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
auto: string;
};
maxWidth: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
maxHeight: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
minWidth: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
minHeight: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
inlineSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
auto: string;
};
blockSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
auto: string;
};
maxInlineSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
maxBlockSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
minInlineSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
minBlockSize: {
screen: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
none: string;
};
colors: {
inherit: string;
current: string;
transparent: string;
black: string;
white: string;
rose: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
pink: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
fuchsia: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
purple: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
violet: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
indigo: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
blue: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
sky: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
cyan: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
teal: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
emerald: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
green: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
lime: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
yellow: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
amber: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
orange: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
red: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
slate: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
zinc: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
neutral: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
stone: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
light: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
dark: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
readonly lightblue: string | (Colors & {
DEFAULT?: string;
});
readonly lightBlue: string | (Colors & {
DEFAULT?: string;
});
readonly warmgray: string | (Colors & {
DEFAULT?: string;
});
readonly warmGray: string | (Colors & {
DEFAULT?: string;
});
readonly truegray: string | (Colors & {
DEFAULT?: string;
});
readonly trueGray: string | (Colors & {
DEFAULT?: string;
});
readonly coolgray: string | (Colors & {
DEFAULT?: string;
});
readonly coolGray: string | (Colors & {
DEFAULT?: string;
});
readonly bluegray: string | (Colors & {
DEFAULT?: string;
});
readonly blueGray: string | (Colors & {
DEFAULT?: string;
});
};
fontFamily: {
sans: string;
serif: string;
mono: string;
};
fontSize: Record<string, string | [string, string | _unocss_core.CSSObject] | [string, string, string]> | undefined;
fontWeight: {
thin: string;
extralight: string;
light: string;
normal: string;
medium: string;
semibold: string;
bold: string;
extrabold: string;
black: string;
};
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
verticalBreakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
borderRadius: {
DEFAULT: string;
none: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
full: string;
};
lineHeight: {
none: string;
tight: string;
snug: string;
normal: string;
relaxed: string;
loose: string;
};
letterSpacing: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
widest: string;
};
wordSpacing: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
widest: string;
};
boxShadow: {
DEFAULT: string[];
none: string;
sm: string;
md: string[];
lg: string[];
xl: string[];
'2xl': string;
inner: string;
};
textIndent: Record<string, string> | undefined;
textShadow: {
DEFAULT: string[];
none: string;
sm: string;
md: string[];
lg: string[];
xl: string[];
};
textStrokeWidth: Record<string, string> | undefined;
blur: {
DEFAULT: string;
'0': string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
};
dropShadow: {
DEFAULT: string[];
sm: string;
md: string[];
lg: string[];
xl: string[];
'2xl': string;
none: string;
};
easing: {
DEFAULT: string;
linear: string;
in: string;
out: string;
'in-out': string;
};
transitionProperty: {
none: string;
all: string;
colors: string;
opacity: string;
shadow: string;
transform: string;
readonly DEFAULT: string;
};
lineWidth: {
DEFAULT: string;
none: string;
};
spacing: {
DEFAULT: string;
none: string;
xs: string;
sm: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
'8xl': string;
'9xl': string;
};
duration: {
DEFAULT: string;
none: string;
75: string;
100: string;
150: string;
200: string;
300: string;
500: string;
700: string;
1000: string;
};
ringWidth: {
DEFAULT: string;
none: string;
};
preflightBase: {
'--un-ring-inset': string;
'--un-ring-offset-width': string;
'--un-ring-offset-color': string;
'--un-ring-width': string;
'--un-ring-color': string;
'--un-shadow': string;
'--un-ring-offset-shadow': string;
'--un-ring-shadow': string;
'--un-shadow-inset': string;
'--un-rotate': number;
'--un-rotate-x': number;
'--un-rotate-y': number;
'--un-rotate-z': number;
'--un-scale-x': number;
'--un-scale-y': number;
'--un-scale-z': number;
'--un-skew-x': number;
'--un-skew-y': number;
'--un-translate-x': number;
'--un-translate-y': number;
'--un-translate-z': number;
};
containers: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
prose: string;
};
zIndex: {
auto: string;
};
media: {
mouse: string;
};
};
export { theme as t };
@@ -0,0 +1,580 @@
import { escapeSelector, toArray } from '@unocss/core';
import { createValueHandler, getStringComponent, parseCssColor, colorToString, colorOpacityToString, getStringComponents } from '@unocss/rule-utils';
const directionMap = {
"l": ["-left"],
"r": ["-right"],
"t": ["-top"],
"b": ["-bottom"],
"s": ["-inline-start"],
"e": ["-inline-end"],
"x": ["-left", "-right"],
"y": ["-top", "-bottom"],
"": [""],
"bs": ["-block-start"],
"be": ["-block-end"],
"is": ["-inline-start"],
"ie": ["-inline-end"],
"block": ["-block-start", "-block-end"],
"inline": ["-inline-start", "-inline-end"]
};
const insetMap = {
...directionMap,
s: ["-inset-inline-start"],
start: ["-inset-inline-start"],
e: ["-inset-inline-end"],
end: ["-inset-inline-end"],
bs: ["-inset-block-start"],
be: ["-inset-block-end"],
is: ["-inset-inline-start"],
ie: ["-inset-inline-end"],
block: ["-inset-block-start", "-inset-block-end"],
inline: ["-inset-inline-start", "-inset-inline-end"]
};
const cornerMap = {
"l": ["-top-left", "-bottom-left"],
"r": ["-top-right", "-bottom-right"],
"t": ["-top-left", "-top-right"],
"b": ["-bottom-left", "-bottom-right"],
"tl": ["-top-left"],
"lt": ["-top-left"],
"tr": ["-top-right"],
"rt": ["-top-right"],
"bl": ["-bottom-left"],
"lb": ["-bottom-left"],
"br": ["-bottom-right"],
"rb": ["-bottom-right"],
"": [""],
"bs": ["-start-start", "-start-end"],
"be": ["-end-start", "-end-end"],
"s": ["-end-start", "-start-start"],
"is": ["-end-start", "-start-start"],
"e": ["-start-end", "-end-end"],
"ie": ["-start-end", "-end-end"],
"ss": ["-start-start"],
"bs-is": ["-start-start"],
"is-bs": ["-start-start"],
"se": ["-start-end"],
"bs-ie": ["-start-end"],
"ie-bs": ["-start-end"],
"es": ["-end-start"],
"be-is": ["-end-start"],
"is-be": ["-end-start"],
"ee": ["-end-end"],
"be-ie": ["-end-end"],
"ie-be": ["-end-end"]
};
const xyzMap = {
"x": ["-x"],
"y": ["-y"],
"z": ["-z"],
"": ["-x", "-y"]
};
const xyzArray = ["x", "y", "z"];
const basePositionMap = [
"top",
"top center",
"top left",
"top right",
"bottom",
"bottom center",
"bottom left",
"bottom right",
"left",
"left center",
"left top",
"left bottom",
"right",
"right center",
"right top",
"right bottom",
"center",
"center top",
"center bottom",
"center left",
"center right",
"center center"
];
const positionMap = Object.assign(
{},
...basePositionMap.map((p) => ({ [p.replace(/ /, "-")]: p })),
...basePositionMap.map((p) => ({ [p.replace(/\b(\w)\w+/g, "$1").replace(/ /, "")]: p }))
);
const globalKeywords = [
"inherit",
"initial",
"revert",
"revert-layer",
"unset"
];
const cssMathFnRE = /^(calc|clamp|min|max)\s*\((.+)\)(.*)/;
const cssVarFnRE = /^(var)\s*\((.+)\)(.*)/;
const numberWithUnitRE = /^(-?\d*(?:\.\d+)?)(px|pt|pc|%|r?(?:em|ex|lh|cap|ch|ic)|(?:[sld]?v|cq)(?:[whib]|min|max)|in|cm|mm|rpx)?$/i;
const numberRE = /^(-?\d*(?:\.\d+)?)$/;
const unitOnlyRE = /^(px|[sld]?v[wh])$/i;
const unitOnlyMap = {
px: 1,
vw: 100,
vh: 100,
svw: 100,
svh: 100,
dvw: 100,
dvh: 100,
lvh: 100,
lvw: 100
};
const bracketTypeRe = /^\[(color|image|length|size|position|quoted|string):/i;
const splitComma = /,(?![^()]*\))/g;
const cssProps = [
// basic props
"color",
"border-color",
"background-color",
"outline-color",
"text-decoration-color",
"flex-grow",
"flex",
"flex-shrink",
"caret-color",
"font",
"gap",
"opacity",
"visibility",
"z-index",
"font-weight",
"zoom",
"text-shadow",
"transform",
"box-shadow",
"border",
// positions
"background-position",
"left",
"right",
"top",
"bottom",
"object-position",
// sizes
"max-height",
"min-height",
"max-width",
"min-width",
"height",
"width",
"border-width",
"margin",
"padding",
"outline-width",
"outline-offset",
"font-size",
"line-height",
"text-indent",
"vertical-align",
"border-spacing",
"letter-spacing",
"word-spacing",
// enhances
"stroke",
"filter",
"backdrop-filter",
"fill",
"mask",
"mask-size",
"mask-border",
"clip-path",
"clip",
"border-radius"
];
function round(n) {
return +n.toFixed(10);
}
function numberWithUnit(str) {
const match = str.match(numberWithUnitRE);
if (!match)
return;
const [, n, unit] = match;
const num = Number.parseFloat(n);
if (unit && !Number.isNaN(num))
return `${round(num)}${unit}`;
}
function auto(str) {
if (str === "auto" || str === "a")
return "auto";
}
function rem(str) {
if (!str)
return;
if (unitOnlyRE.test(str))
return `${unitOnlyMap[str]}${str}`;
const match = str.match(numberWithUnitRE);
if (!match)
return;
const [, n, unit] = match;
const num = Number.parseFloat(n);
if (!Number.isNaN(num)) {
if (num === 0)
return "0";
return unit ? `${round(num)}${unit}` : `${round(num / 4)}rem`;
}
}
function px(str) {
if (unitOnlyRE.test(str))
return `${unitOnlyMap[str]}${str}`;
const match = str.match(numberWithUnitRE);
if (!match)
return;
const [, n, unit] = match;
const num = Number.parseFloat(n);
if (!Number.isNaN(num))
return unit ? `${round(num)}${unit}` : `${round(num)}px`;
}
function number(str) {
if (!numberRE.test(str))
return;
const num = Number.parseFloat(str);
if (!Number.isNaN(num))
return round(num);
}
function percent(str) {
if (str.endsWith("%"))
str = str.slice(0, -1);
if (!numberRE.test(str))
return;
const num = Number.parseFloat(str);
if (!Number.isNaN(num))
return `${round(num / 100)}`;
}
function fraction(str) {
if (!str)
return;
if (str === "full")
return "100%";
const [left, right] = str.split("/");
const num = Number.parseFloat(left) / Number.parseFloat(right);
if (!Number.isNaN(num)) {
if (num === 0)
return "0";
return `${round(num * 100)}%`;
}
}
function bracketWithType(str, requiredType) {
if (str && str.startsWith("[") && str.endsWith("]")) {
let base;
let hintedType;
const match = str.match(bracketTypeRe);
if (!match) {
base = str.slice(1, -1);
} else {
if (!requiredType)
hintedType = match[1];
base = str.slice(match[0].length, -1);
}
if (!base)
return;
if (base === '=""')
return;
if (base.startsWith("--"))
base = `var(${base})`;
let curly = 0;
for (const i of base) {
if (i === "[") {
curly += 1;
} else if (i === "]") {
curly -= 1;
if (curly < 0)
return;
}
}
if (curly)
return;
switch (hintedType) {
case "string":
return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_");
case "quoted":
return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(["\\])/g, "\\$1").replace(/^(.+)$/, '"$1"');
}
return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(?:calc|clamp|max|min)\((.*)/g, (match2) => {
const vars = [];
return match2.replace(/var\((--.+?)[,)]/g, (match3, g1) => {
vars.push(g1);
return match3.replace(g1, "--un-calc");
}).replace(/(-?\d*\.?\d(?!-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ").replace(/--un-calc/g, () => vars.shift());
});
}
}
function bracket(str) {
return bracketWithType(str);
}
function bracketOfColor(str) {
return bracketWithType(str, "color");
}
function bracketOfLength(str) {
return bracketWithType(str, "length");
}
function bracketOfPosition(str) {
return bracketWithType(str, "position");
}
function cssvar(str) {
if (/^\$[^\s'"`;{}]/.test(str)) {
const [name, defaultValue] = str.slice(1).split(",");
return `var(--${escapeSelector(name)}${defaultValue ? `, ${defaultValue}` : ""})`;
}
}
function time(str) {
const match = str.match(/^(-?[0-9.]+)(s|ms)?$/i);
if (!match)
return;
const [, n, unit] = match;
const num = Number.parseFloat(n);
if (!Number.isNaN(num)) {
if (num === 0 && !unit)
return "0s";
return unit ? `${round(num)}${unit}` : `${round(num)}ms`;
}
}
function degree(str) {
const match = str.match(/^(-?[0-9.]+)(deg|rad|grad|turn)?$/i);
if (!match)
return;
const [, n, unit] = match;
const num = Number.parseFloat(n);
if (!Number.isNaN(num)) {
if (num === 0)
return "0";
return unit ? `${round(num)}${unit}` : `${round(num)}deg`;
}
}
function global(str) {
if (globalKeywords.includes(str))
return str;
}
function properties(str) {
if (str.split(",").every((prop) => cssProps.includes(prop)))
return str;
}
function position(str) {
if (["top", "left", "right", "bottom", "center"].includes(str))
return str;
}
const valueHandlers = {
__proto__: null,
auto: auto,
bracket: bracket,
bracketOfColor: bracketOfColor,
bracketOfLength: bracketOfLength,
bracketOfPosition: bracketOfPosition,
cssvar: cssvar,
degree: degree,
fraction: fraction,
global: global,
number: number,
numberWithUnit: numberWithUnit,
percent: percent,
position: position,
properties: properties,
px: px,
rem: rem,
time: time
};
const handler = createValueHandler(valueHandlers);
const h = handler;
const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
function directionSize(propertyPrefix) {
return ([_, direction, size], { theme }) => {
const v = theme.spacing?.[size || "DEFAULT"] ?? h.bracket.cssvar.global.auto.fraction.rem(size);
if (v != null) {
return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
} else if (size?.startsWith("-")) {
const v2 = theme.spacing?.[size.slice(1)];
if (v2 != null)
return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, `calc(${v2} * -1)`]);
}
};
}
function getThemeColorForKey(theme, colors, key = "colors") {
let obj = theme[key];
let index = -1;
for (const c of colors) {
index += 1;
if (obj && typeof obj !== "string") {
const camel = colors.slice(index).join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase());
if (obj[camel])
return obj[camel];
if (obj[c]) {
obj = obj[c];
continue;
}
}
return void 0;
}
return obj;
}
function getThemeColor(theme, colors, key) {
return getThemeColorForKey(theme, colors, key) || getThemeColorForKey(theme, colors, "colors");
}
function splitShorthand(body, type) {
const [front, rest] = getStringComponent(body, "[", "]", ["/", ":"]) ?? [];
if (front != null) {
const match = (front.match(bracketTypeRe) ?? [])[1];
if (match == null || match === type)
return [front, rest];
}
}
function parseColor(body, theme, key) {
const split = splitShorthand(body, "color");
if (!split)
return;
const [main, opacity] = split;
const colors = main.replace(/([a-z])(\d)/g, "$1-$2").split(/-/g);
const [name] = colors;
if (!name)
return;
let color;
const bracket = h.bracketOfColor(main);
const bracketOrMain = bracket || main;
if (h.numberWithUnit(bracketOrMain))
return;
if (/^#[\da-f]+$/i.test(bracketOrMain))
color = bracketOrMain;
else if (/^hex-[\da-fA-F]+$/.test(bracketOrMain))
color = `#${bracketOrMain.slice(4)}`;
else if (main.startsWith("$"))
color = h.cssvar(main);
color = color || bracket;
if (!color) {
const colorData = getThemeColor(theme, [main], key);
if (typeof colorData === "string")
color = colorData;
}
let no = "DEFAULT";
if (!color) {
let keys = colors;
let _no;
const [scale] = colors.slice(-1);
if (/^\d+$/.test(scale)) {
no = _no = scale;
keys = colors.slice(0, -1);
}
const colorData = getThemeColor(theme, keys, key);
if (typeof colorData === "object") {
color = colorData[_no ?? no];
} else if (typeof colorData === "string" && !_no) {
color = colorData;
}
}
return {
opacity,
name,
no,
color,
cssColor: parseCssColor(color),
alpha: h.bracket.cssvar.percent(opacity ?? "")
};
}
function colorResolver(property, varName, key, shouldPass) {
return ([, body], { theme, generator }) => {
const data = parseColor(body, theme, key);
if (!data)
return;
const { alpha, color, cssColor } = data;
const isDev = generator.config.envMode === "dev";
const rawColorComment = isDev && color ? ` /* ${color} */` : "";
const css = {};
if (cssColor) {
if (alpha != null) {
css[property] = colorToString(cssColor, alpha) + rawColorComment;
} else {
const opacityVar = `--un-${varName}-opacity`;
const result = colorToString(cssColor, `var(${opacityVar})`);
if (result.includes(opacityVar))
css[opacityVar] = colorOpacityToString(cssColor);
css[property] = result + rawColorComment;
}
} else if (color) {
if (alpha != null) {
css[property] = colorToString(color, alpha) + rawColorComment;
} else {
const opacityVar = `--un-${varName}-opacity`;
const result = colorToString(color, `var(${opacityVar})`);
if (result.includes(opacityVar))
css[opacityVar] = 1;
css[property] = result + rawColorComment;
}
}
if (shouldPass?.(css) !== false)
return css;
};
}
function colorableShadows(shadows, colorVar) {
const colored = [];
shadows = toArray(shadows);
for (let i = 0; i < shadows.length; i++) {
const components = getStringComponents(shadows[i], " ", 6);
if (!components || components.length < 3)
return shadows;
let isInset = false;
const pos = components.indexOf("inset");
if (pos !== -1) {
components.splice(pos, 1);
isInset = true;
}
let colorVarValue = "";
const lastComp = components.at(-1);
if (parseCssColor(components.at(0))) {
const color = parseCssColor(components.shift());
if (color)
colorVarValue = `, ${colorToString(color)}`;
} else if (parseCssColor(lastComp)) {
const color = parseCssColor(components.pop());
if (color)
colorVarValue = `, ${colorToString(color)}`;
} else if (lastComp && cssVarFnRE.test(lastComp)) {
const color = components.pop();
colorVarValue = `, ${color}`;
}
colored.push(`${isInset ? "inset " : ""}${components.join(" ")} var(${colorVar}${colorVarValue})`);
}
return colored;
}
function hasParseableColor(color, theme, key) {
return color != null && !!parseColor(color, theme, key)?.color;
}
const reLetters = /[a-z]+/gi;
const resolvedBreakpoints = /* @__PURE__ */ new WeakMap();
function resolveBreakpoints({ theme, generator }, key = "breakpoints") {
const breakpoints = generator?.userConfig?.theme?.[key] || theme[key];
if (!breakpoints)
return void 0;
if (resolvedBreakpoints.has(theme))
return resolvedBreakpoints.get(theme);
const resolved = Object.entries(breakpoints).sort((a, b) => Number.parseInt(a[1].replace(reLetters, "")) - Number.parseInt(b[1].replace(reLetters, ""))).map(([point, size]) => ({ point, size }));
resolvedBreakpoints.set(theme, resolved);
return resolved;
}
function resolveVerticalBreakpoints(context) {
return resolveBreakpoints(context, "verticalBreakpoints");
}
function makeGlobalStaticRules(prefix, property) {
return globalKeywords.map((keyword) => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]);
}
function isCSSMathFn(value) {
return value != null && cssMathFnRE.test(value);
}
function isSize(str) {
if (str[0] === "[" && str.slice(-1) === "]")
str = str.slice(1, -1);
return cssMathFnRE.test(str) || numberWithUnitRE.test(str);
}
function transformXYZ(d, v, name) {
const values = v.split(splitComma);
if (d || !d && values.length === 1)
return xyzMap[d].map((i) => [`--un-${name}${i}`, v]);
return values.map((v2, i) => [`--un-${name}-${xyzArray[i]}`, v2]);
}
export { CONTROL_MINI_NO_NEGATIVE as C, h as a, xyzArray as b, cornerMap as c, directionMap as d, cssMathFnRE as e, cssVarFnRE as f, globalKeywords as g, handler as h, insetMap as i, directionSize as j, parseColor as k, colorResolver as l, colorableShadows as m, hasParseableColor as n, resolveVerticalBreakpoints as o, positionMap as p, makeGlobalStaticRules as q, resolveBreakpoints as r, splitShorthand as s, isCSSMathFn as t, isSize as u, valueHandlers as v, transformXYZ as w, xyzMap as x };
@@ -0,0 +1,856 @@
import { variantGetParameter, variantMatcher, variantGetBracket, variantParentMatcher, getBracket, hasThemeFn, transformThemeFn, getStringComponent } from '@unocss/rule-utils';
import { a as h, r as resolveBreakpoints, C as CONTROL_MINI_NO_NEGATIVE, e as cssMathFnRE, f as cssVarFnRE } from './preset-mini.DcESQHgx.mjs';
import { escapeRegExp, escapeSelector } from '@unocss/core';
const variantAria = {
name: "aria",
match(matcher, ctx) {
const variant = variantGetParameter("aria-", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
const aria = h.bracket(match) ?? ctx.theme.aria?.[match] ?? "";
if (aria) {
return {
matcher: rest,
selector: (s) => `${s}[aria-${aria}]`
};
}
}
}
};
function taggedAria(tagName) {
return {
name: `${tagName}-aria`,
match(matcher, ctx) {
const variant = variantGetParameter(`${tagName}-aria-`, matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
const ariaAttribute = h.bracket(match) ?? ctx.theme.aria?.[match] ?? "";
if (ariaAttribute) {
return {
matcher: `${tagName}-[[aria-${ariaAttribute}]]:${rest}`
};
}
}
}
};
}
const variantTaggedAriaAttributes = [
taggedAria("group"),
taggedAria("peer"),
taggedAria("parent"),
taggedAria("previous")
];
function calcMaxWidthBySize(size) {
const value = size.match(/^-?\d+\.?\d*/)?.[0] || "";
const unit = size.slice(value.length);
if (unit === "px") {
const maxWidth = Number.parseFloat(value) - 0.1;
return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`;
}
return `calc(${size} - 0.1px)`;
}
const sizePseudo = /(max|min)-\[([^\]]*)\]:/;
function variantBreakpoints() {
const regexCache = {};
return {
name: "breakpoints",
match(matcher, context) {
if (sizePseudo.test(matcher)) {
const match = matcher.match(sizePseudo);
const m = matcher.replace(match[0], "");
return {
matcher: m,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (${match[1]}-width: ${match[2]})`
// parentOrder: order,
})
};
}
const variantEntries = (resolveBreakpoints(context) ?? []).map(({ point, size }, idx) => [point, size, idx]);
for (const [point, size, idx] of variantEntries) {
if (!regexCache[point])
regexCache[point] = new RegExp(`^((?:([al]t-|[<~]|max-))?${point}(?:${context.generator.config.separators.join("|")}))`);
const match = matcher.match(regexCache[point]);
if (!match)
continue;
const [, pre] = match;
const m = matcher.slice(pre.length);
if (m === "container")
continue;
const isLtPrefix = pre.startsWith("lt-") || pre.startsWith("<") || pre.startsWith("max-");
const isAtPrefix = pre.startsWith("at-") || pre.startsWith("~");
let order = 3e3;
if (isLtPrefix) {
order -= idx + 1;
return {
matcher: m,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (max-width: ${calcMaxWidthBySize(size)})`,
parentOrder: order
})
};
}
order += idx + 1;
if (isAtPrefix && idx < variantEntries.length - 1) {
return {
matcher: m,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (min-width: ${size}) and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})`,
parentOrder: order
})
};
}
return {
matcher: m,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (min-width: ${size})`,
parentOrder: order
})
};
}
},
multiPass: true,
autocomplete: "(at-|lt-|max-|)$breakpoints:"
};
}
const variantChildren = [
variantMatcher("*", (input) => ({ selector: `${input.selector} > *` }))
];
function scopeMatcher(name, combinator) {
return {
name: `combinator:${name}`,
match(matcher, ctx) {
if (!matcher.startsWith(name))
return;
const separators = ctx.generator.config.separators;
let body = variantGetBracket(`${name}-`, matcher, separators);
if (!body) {
for (const separator of separators) {
if (matcher.startsWith(`${name}${separator}`)) {
body = ["", matcher.slice(name.length + separator.length)];
break;
}
}
if (!body)
return;
}
let bracketValue = h.bracket(body[0]) ?? "";
if (bracketValue === "")
bracketValue = "*";
return {
matcher: body[1],
selector: (s) => `${s}${combinator}${bracketValue}`
};
},
multiPass: true
};
}
const variantCombinators = [
scopeMatcher("all", " "),
scopeMatcher("children", ">"),
scopeMatcher("next", "+"),
scopeMatcher("sibling", "+"),
scopeMatcher("siblings", "~")
];
const variantContainerQuery = {
name: "@",
match(matcher, ctx) {
if (matcher.startsWith("@container"))
return;
const variant = variantGetParameter("@", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest, label] = variant;
const unbracket = h.bracket(match);
let container;
if (unbracket) {
container = h.numberWithUnit(unbracket);
} else {
container = ctx.theme.containers?.[match] ?? "";
}
if (container) {
let order = 1e3 + Object.keys(ctx.theme.containers ?? {}).indexOf(match);
if (label)
order += 1e3;
return {
matcher: rest,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ""}@container${label ? ` ${label} ` : " "}(min-width: ${container})`,
parentOrder: order
})
};
}
}
},
multiPass: true
};
function variantColorsMediaOrClass(options = {}) {
if (options?.dark === "class" || typeof options.dark === "object") {
const { dark = ".dark", light = ".light" } = typeof options.dark === "string" ? {} : options.dark;
return [
variantMatcher("dark", (input) => ({ prefix: `${dark} $$ ${input.prefix}` })),
variantMatcher("light", (input) => ({ prefix: `${light} $$ ${input.prefix}` }))
];
}
return [
variantParentMatcher("dark", "@media (prefers-color-scheme: dark)"),
variantParentMatcher("light", "@media (prefers-color-scheme: light)")
];
}
const variantDataAttribute = {
name: "data",
match(matcher, ctx) {
const variant = variantGetParameter("data-", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? "";
if (dataAttribute) {
return {
matcher: rest,
selector: (s) => `${s}[data-${dataAttribute}]`
};
}
}
}
};
function taggedData(tagName) {
return {
name: `${tagName}-data`,
match(matcher, ctx) {
const variant = variantGetParameter(`${tagName}-data-`, matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest, label] = variant;
const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? "";
if (dataAttribute) {
return {
matcher: `${tagName}-[[data-${dataAttribute}]]${label ? `/${label}` : ""}:${rest}`
};
}
}
}
};
}
const variantTaggedDataAttributes = [
taggedData("group"),
taggedData("peer"),
taggedData("parent"),
taggedData("previous")
];
const variantLanguageDirections = [
variantMatcher("rtl", (input) => ({ prefix: `[dir="rtl"] $$ ${input.prefix}` })),
variantMatcher("ltr", (input) => ({ prefix: `[dir="ltr"] $$ ${input.prefix}` }))
];
function variantImportant() {
let re;
return {
name: "important",
match(matcher, ctx) {
if (!re)
re = new RegExp(`^(important(?:${ctx.generator.config.separators.join("|")})|!)`);
let base;
const match = matcher.match(re);
if (match)
base = matcher.slice(match[0].length);
else if (matcher.endsWith("!"))
base = matcher.slice(0, -1);
if (base) {
return {
matcher: base,
body: (body) => {
body.forEach((v) => {
if (v[1] != null)
v[1] += " !important";
});
return body;
}
};
}
}
};
}
const variantPrint = variantParentMatcher("print", "@media print");
const variantCustomMedia = {
name: "media",
match(matcher, ctx) {
const variant = variantGetParameter("media-", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
let media = h.bracket(match) ?? "";
if (media === "")
media = ctx.theme.media?.[match] ?? "";
if (media) {
return {
matcher: rest,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ""}@media ${media}`
})
};
}
}
},
multiPass: true
};
const variantSelector = {
name: "selector",
match(matcher, ctx) {
const variant = variantGetBracket("selector-", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
const selector = h.bracket(match);
if (selector) {
return {
matcher: rest,
selector: () => selector
};
}
}
}
};
const variantCssLayer = {
name: "layer",
match(matcher, ctx) {
const variant = variantGetParameter("layer-", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
const layer = h.bracket(match) ?? match;
if (layer) {
return {
matcher: rest,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ""}@layer ${layer}`
})
};
}
}
}
};
const variantInternalLayer = {
name: "uno-layer",
match(matcher, ctx) {
const variant = variantGetParameter("uno-layer-", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
const layer = h.bracket(match) ?? match;
if (layer) {
return {
matcher: rest,
layer
};
}
}
}
};
const variantScope = {
name: "scope",
match(matcher, ctx) {
const variant = variantGetBracket("scope-", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
const scope = h.bracket(match);
if (scope) {
return {
matcher: rest,
selector: (s) => `${scope} $$ ${s}`
};
}
}
}
};
const variantVariables = {
name: "variables",
match(matcher, ctx) {
if (!matcher.startsWith("["))
return;
const [match, rest] = getBracket(matcher, "[", "]") ?? [];
if (!(match && rest))
return;
let newMatcher;
for (const separator of ctx.generator.config.separators) {
if (rest.startsWith(separator)) {
newMatcher = rest.slice(separator.length);
break;
}
}
if (newMatcher == null)
return;
const variant = h.bracket(match) ?? "";
const useParent = variant.startsWith("@");
if (!(useParent || variant.includes("&")))
return;
return {
matcher: newMatcher,
handle(input, next) {
const updates = useParent ? {
parent: `${input.parent ? `${input.parent} $$ ` : ""}${variant}`
} : {
selector: variant.replace(/&/g, input.selector)
};
return next({
...input,
...updates
});
}
};
},
multiPass: true
};
const variantTheme = {
name: "theme-variables",
match(matcher, ctx) {
if (!hasThemeFn(matcher))
return;
return {
matcher,
handle(input, next) {
return next({
...input,
// entries: [ [ '--css-spacing', '28px' ] ],
entries: JSON.parse(transformThemeFn(JSON.stringify(input.entries), ctx.theme))
});
}
};
}
};
const anchoredNumberRE = /^-?[0-9.]+(?:[a-z]+|%)?$/;
const numberRE = /-?[0-9.]+(?:[a-z]+|%)?/;
const ignoreProps = [
/\b(opacity|color|flex|backdrop-filter|^filter|transform)\b/
];
function negateMathFunction(value) {
const match = value.match(cssMathFnRE) || value.match(cssVarFnRE);
if (match) {
const [fnBody, rest] = getStringComponent(`(${match[2]})${match[3]}`, "(", ")", " ") ?? [];
if (fnBody)
return `calc(${match[1]}${fnBody} * -1)${rest ? ` ${rest}` : ""}`;
}
}
const negateFunctionBodyRE = /\b(hue-rotate)\s*(\(.*)/;
function negateFunctionBody(value) {
const match = value.match(negateFunctionBodyRE);
if (match) {
const [fnBody, rest] = getStringComponent(match[2], "(", ")", " ") ?? [];
if (fnBody) {
const body = anchoredNumberRE.test(fnBody.slice(1, -1)) ? fnBody.replace(numberRE, (i) => i.startsWith("-") ? i.slice(1) : `-${i}`) : `(calc(${fnBody} * -1))`;
return `${match[1]}${body}${rest ? ` ${rest}` : ""}`;
}
}
}
const variantNegative = {
name: "negative",
match(matcher) {
if (!matcher.startsWith("-"))
return;
return {
matcher: matcher.slice(1),
body: (body) => {
if (body.find((v) => v[0] === CONTROL_MINI_NO_NEGATIVE))
return;
let changed = false;
body.forEach((v) => {
const value = v[1]?.toString();
if (!value || value === "0")
return;
if (ignoreProps.some((i) => i.test(v[0])))
return;
const negatedFn = negateMathFunction(value);
if (negatedFn) {
v[1] = negatedFn;
changed = true;
return;
}
const negatedBody = negateFunctionBody(value);
if (negatedBody) {
v[1] = negatedBody;
changed = true;
return;
}
if (anchoredNumberRE.test(value)) {
v[1] = value.replace(numberRE, (i) => i.startsWith("-") ? i.slice(1) : `-${i}`);
changed = true;
}
});
if (changed)
return body;
return [];
}
};
}
};
const PseudoClasses = Object.fromEntries([
// pseudo elements part 1
["first-letter", "::first-letter"],
["first-line", "::first-line"],
// location
"any-link",
"link",
"visited",
"target",
["open", "[open]"],
// forms
"default",
"checked",
"indeterminate",
"placeholder-shown",
"autofill",
"optional",
"required",
"valid",
"invalid",
"user-valid",
"user-invalid",
"in-range",
"out-of-range",
"read-only",
"read-write",
// content
"empty",
// interactions
"focus-within",
"hover",
"focus",
"focus-visible",
"active",
"enabled",
"disabled",
"popover-open",
// tree-structural
"root",
"empty",
["even-of-type", ":nth-of-type(even)"],
["even", ":nth-child(even)"],
["odd-of-type", ":nth-of-type(odd)"],
["odd", ":nth-child(odd)"],
"first-of-type",
["first", ":first-child"],
"last-of-type",
["last", ":last-child"],
"only-child",
"only-of-type",
// pseudo elements part 2
["backdrop-element", "::backdrop"],
["placeholder", "::placeholder"],
["before", "::before"],
["after", "::after"],
["file", "::file-selector-button"]
].map((key) => Array.isArray(key) ? key : [key, `:${key}`]));
const PseudoClassesKeys = Object.keys(PseudoClasses);
const PseudoClassesColon = Object.fromEntries([
["backdrop", "::backdrop"]
].map((key) => Array.isArray(key) ? key : [key, `:${key}`]));
const PseudoClassesColonKeys = Object.keys(PseudoClassesColon);
const PseudoClassFunctions = [
"not",
"is",
"where",
"has"
];
const PseudoClassesMulti = Object.fromEntries([
["selection", ["::selection", " *::selection"]],
["marker", ["::marker", " *::marker"]]
]);
const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).sort((a, b) => b.length - a.length).join("|");
const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).sort((a, b) => b.length - a.length).join("|");
const PseudoClassFunctionsStr = PseudoClassFunctions.join("|");
const PseudoClassesMultiStr = Object.keys(PseudoClassesMulti).sort((a, b) => b.length - a.length).join("|");
function taggedPseudoClassMatcher(tag, parent, combinator) {
const rawRE = new RegExp(`^(${escapeRegExp(parent)}:)(\\S+)${escapeRegExp(combinator)}\\1`);
let splitRE;
let pseudoRE;
let pseudoColonRE;
let pseudoVarRE;
const matchBracket = (input) => {
const body = variantGetBracket(`${tag}-`, input, []);
if (!body)
return;
const [match, rest] = body;
const bracketValue = h.bracket(match);
if (bracketValue == null)
return;
const label = rest.split(splitRE, 1)?.[0] ?? "";
const prefix = `${parent}${escapeSelector(label)}`;
return [
label,
input.slice(input.length - (rest.length - label.length - 1)),
bracketValue.includes("&") ? bracketValue.replace(/&/g, prefix) : `${prefix}${bracketValue}`
];
};
const matchPseudo = (input) => {
const match = input.match(pseudoRE) || input.match(pseudoColonRE);
if (!match)
return;
const [original, fn, pseudoKey] = match;
const label = match[3] ?? "";
let pseudo = PseudoClasses[pseudoKey] || PseudoClassesColon[pseudoKey] || `:${pseudoKey}`;
if (fn)
pseudo = `:${fn}(${pseudo})`;
return [
label,
input.slice(original.length),
`${parent}${escapeSelector(label)}${pseudo}`,
pseudoKey
];
};
const matchPseudoVar = (input) => {
const match = input.match(pseudoVarRE);
if (!match)
return;
const [original, fn, pseudoValue] = match;
const label = match[3] ?? "";
const pseudo = `:${fn}(${pseudoValue})`;
return [
label,
input.slice(original.length),
`${parent}${escapeSelector(label)}${pseudo}`
];
};
return {
name: `pseudo:${tag}`,
match(input, ctx) {
if (!(splitRE && pseudoRE && pseudoColonRE)) {
splitRE = new RegExp(`(?:${ctx.generator.config.separators.join("|")})`);
pseudoRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))(?:(/\\w+))?(?:${ctx.generator.config.separators.join("|")})`);
pseudoColonRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))(?:(/\\w+))?(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
pseudoVarRE = new RegExp(`^${tag}-(?:(${PseudoClassFunctionsStr})-)?\\[(.+)\\](?:(/\\w+))?(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
}
if (!input.startsWith(tag))
return;
const result = matchBracket(input) || matchPseudo(input) || matchPseudoVar(input);
if (!result)
return;
const [_label, matcher, prefix, pseudoName = ""] = result;
return {
matcher,
handle: (input2, next) => next({
...input2,
prefix: `${prefix}${combinator}${input2.prefix}`.replace(rawRE, "$1$2:"),
sort: PseudoClassesKeys.indexOf(pseudoName) ?? PseudoClassesColonKeys.indexOf(pseudoName)
})
};
},
multiPass: true
};
}
const excludedPseudo = [
"::-webkit-resizer",
"::-webkit-scrollbar",
"::-webkit-scrollbar-button",
"::-webkit-scrollbar-corner",
"::-webkit-scrollbar-thumb",
"::-webkit-scrollbar-track",
"::-webkit-scrollbar-track-piece",
"::file-selector-button"
];
const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).sort((a, b) => b.length - a.length).join("|");
const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).sort((a, b) => b.length - a.length).join("|");
function variantPseudoClassesAndElements() {
let PseudoClassesAndElementsRE;
let PseudoClassesAndElementsColonRE;
let PseudoClassesMultiRE;
return [
{
name: "pseudo",
match(input, ctx) {
if (!(PseudoClassesAndElementsRE && PseudoClassesAndElementsColonRE)) {
PseudoClassesAndElementsRE = new RegExp(`^(${PseudoClassesAndElementsStr})(?:${ctx.generator.config.separators.join("|")})`);
PseudoClassesAndElementsColonRE = new RegExp(`^(${PseudoClassesAndElementsColonStr})(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
}
const match = input.match(PseudoClassesAndElementsRE) || input.match(PseudoClassesAndElementsColonRE);
if (match) {
const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}`;
let index = PseudoClassesKeys.indexOf(match[1]);
if (index === -1)
index = PseudoClassesColonKeys.indexOf(match[1]);
if (index === -1)
index = void 0;
return {
matcher: input.slice(match[0].length),
handle: (input2, next) => {
const selectors = pseudo.includes("::") && !excludedPseudo.includes(pseudo) ? {
pseudo: `${input2.pseudo}${pseudo}`
} : {
selector: `${input2.selector}${pseudo}`
};
return next({
...input2,
...selectors,
sort: index,
noMerge: true
});
}
};
}
},
multiPass: true,
autocomplete: `(${PseudoClassesAndElementsStr}|${PseudoClassesAndElementsColonStr}):`
},
{
name: "pseudo:multi",
match(input, ctx) {
if (!PseudoClassesMultiRE) {
PseudoClassesMultiRE = new RegExp(`^(${PseudoClassesMultiStr})(?:${ctx.generator.config.separators.join("|")})`);
}
const match = input.match(PseudoClassesMultiRE);
if (match) {
const pseudos = PseudoClassesMulti[match[1]];
return pseudos.map((pseudo) => {
return {
matcher: input.slice(match[0].length),
handle: (input2, next) => next({
...input2,
pseudo: `${input2.pseudo}${pseudo}`
})
};
});
}
},
multiPass: false,
autocomplete: `(${PseudoClassesMultiStr}):`
}
];
}
function variantPseudoClassFunctions() {
let PseudoClassFunctionsRE;
let PseudoClassColonFunctionsRE;
let PseudoClassVarFunctionRE;
return {
match(input, ctx) {
if (!(PseudoClassFunctionsRE && PseudoClassColonFunctionsRE)) {
PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})(?:${ctx.generator.config.separators.join("|")})`);
PseudoClassColonFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesColonStr})(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
PseudoClassVarFunctionRE = new RegExp(`^(${PseudoClassFunctionsStr})-(\\[.+\\])(?:${ctx.generator.config.separators.filter((x) => x !== "-").join("|")})`);
}
const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE) || input.match(PseudoClassVarFunctionRE);
if (match) {
const fn = match[1];
const fnVal = getBracket(match[2], "[", "]");
const pseudo = fnVal ? h.bracket(match[2]) : PseudoClasses[match[2]] || PseudoClassesColon[match[2]] || `:${match[2]}`;
return {
matcher: input.slice(match[0].length),
selector: (s) => `${s}:${fn}(${pseudo})`
};
}
},
multiPass: true,
autocomplete: `(${PseudoClassFunctionsStr})-(${PseudoClassesStr}|${PseudoClassesColonStr}):`
};
}
function variantTaggedPseudoClasses(options = {}) {
const attributify = !!options?.attributifyPseudo;
let firstPrefix = options?.prefix ?? "";
firstPrefix = (Array.isArray(firstPrefix) ? firstPrefix : [firstPrefix]).filter(Boolean)[0] ?? "";
const tagWithPrefix = (tag, combinator) => taggedPseudoClassMatcher(tag, attributify ? `[${firstPrefix}${tag}=""]` : `.${firstPrefix}${tag}`, combinator);
return [
tagWithPrefix("group", " "),
tagWithPrefix("peer", "~"),
tagWithPrefix("parent", ">"),
tagWithPrefix("previous", "+"),
tagWithPrefix("group-aria", " "),
tagWithPrefix("peer-aria", "~"),
tagWithPrefix("parent-aria", ">"),
tagWithPrefix("previous-aria", "+")
];
}
const PartClassesRE = /(part-\[(.+)\]:)(.+)/;
const variantPartClasses = {
match(input) {
const match = input.match(PartClassesRE);
if (match) {
const part = `part(${match[2]})`;
return {
matcher: input.slice(match[1].length),
selector: (s) => `${s}::${part}`
};
}
},
multiPass: true
};
const variantStartingStyle = {
name: "starting",
match(matcher) {
if (!matcher.startsWith("starting:"))
return;
return {
matcher: matcher.slice(9),
handle: (input, next) => next({
...input,
parent: `@starting-style`
})
};
}
};
const variantSupports = {
name: "supports",
match(matcher, ctx) {
const variant = variantGetParameter("supports-", matcher, ctx.generator.config.separators);
if (variant) {
const [match, rest] = variant;
let supports = h.bracket(match) ?? "";
if (supports === "")
supports = ctx.theme.supports?.[match] ?? "";
if (supports) {
return {
matcher: rest,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ""}@supports ${supports}`
})
};
}
}
},
multiPass: true
};
function variants(options) {
return [
variantAria,
variantDataAttribute,
variantCssLayer,
variantSelector,
variantInternalLayer,
variantNegative,
variantStartingStyle,
variantImportant(),
variantSupports,
variantPrint,
variantCustomMedia,
variantBreakpoints(),
...variantCombinators,
...variantPseudoClassesAndElements(),
variantPseudoClassFunctions(),
...variantTaggedPseudoClasses(options),
variantPartClasses,
...variantColorsMediaOrClass(options),
...variantLanguageDirections,
variantScope,
...variantChildren,
variantContainerQuery,
variantVariables,
...variantTaggedDataAttributes,
...variantTaggedAriaAttributes,
variantTheme
];
}
export { variantStartingStyle as A, variantSupports as B, variantTaggedAriaAttributes as a, variantBreakpoints as b, calcMaxWidthBySize as c, variantChildren as d, variantCombinators as e, variantContainerQuery as f, variantColorsMediaOrClass as g, variantDataAttribute as h, variantTaggedDataAttributes as i, variants as j, variantLanguageDirections as k, variantImportant as l, variantPrint as m, variantCustomMedia as n, variantSelector as o, variantCssLayer as p, variantInternalLayer as q, variantScope as r, variantVariables as s, variantTheme as t, variantNegative as u, variantAria as v, variantPseudoClassesAndElements as w, variantPseudoClassFunctions as x, variantTaggedPseudoClasses as y, variantPartClasses as z };
@@ -0,0 +1,76 @@
import { DynamicMatcher, CSSObject, VariantContext, StaticRule } from '@unocss/core';
import { ParsedColorValue } from '@unocss/rule-utils';
import { T as Theme } from './preset-mini.BjJC-NnU.mjs';
declare const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
/**
* Provide {@link DynamicMatcher} function returning spacing definition. See spacing rules.
*
* @param propertyPrefix - Property for the css value to be created. Postfix will be appended according to direction matched.
* @see {@link directionMap}
*/
declare function directionSize(propertyPrefix: string): DynamicMatcher;
type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor' | 'shadowColor' | 'accentColor';
/**
* Split utility shorthand delimited by / or :
*/
declare function splitShorthand(body: string, type: string): string[] | undefined;
/**
* Parse color string into {@link ParsedColorValue} (if possible). Color value will first be matched to theme object before parsing.
* See also color.tests.ts for more examples.
*
* @example Parseable strings:
* 'red' // From theme, if 'red' is available
* 'red-100' // From theme, plus scale
* 'red-100/20' // From theme, plus scale/opacity
* '[rgb(100 2 3)]/[var(--op)]' // Bracket with rgb color and bracket with opacity
*
* @param body - Color string to be parsed.
* @param theme - {@link Theme} object.
* @return object if string is parseable.
*/
declare function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): ParsedColorValue | undefined;
/**
* Provide {@link DynamicMatcher} function to produce color value matched from rule.
*
* @see {@link parseColor}
*
* @example Resolving 'red' from theme:
* colorResolver('background-color', 'background')('', 'red')
* return { 'background-color': '#f12' }
*
* @example Resolving 'red-100' from theme:
* colorResolver('background-color', 'background')('', 'red-100')
* return { '--un-background-opacity': '1', 'background-color': 'rgb(254 226 226 / var(--un-background-opacity))' }
*
* @example Resolving 'red-100/20' from theme:
* colorResolver('background-color', 'background')('', 'red-100/20')
* return { 'background-color': 'rgb(204 251 241 / 0.22)' }
*
* @example Resolving 'hex-124':
* colorResolver('color', 'text')('', 'hex-124')
* return { '--un-text-opacity': '1', 'color': 'rgb(17 34 68 / var(--un-text-opacity))' }
*
* @param property - Property for the css value to be created.
* @param varName - Base name for the opacity variable.
* @param [key] - Theme key to select the color from.
* @param [shouldPass] - Function to decide whether to pass the css.
* @return object.
*/
declare function colorResolver(property: string, varName: string, key?: ThemeColorKeys, shouldPass?: (css: CSSObject) => boolean): DynamicMatcher;
declare function colorableShadows(shadows: string | string[], colorVar: string): string[];
declare function hasParseableColor(color: string | undefined, theme: Theme, key: ThemeColorKeys): boolean;
declare function resolveBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>, key?: 'breakpoints' | 'verticalBreakpoints'): {
point: string;
size: string;
}[] | undefined;
declare function resolveVerticalBreakpoints(context: Readonly<VariantContext<Theme>>): {
point: string;
size: string;
}[] | undefined;
declare function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[];
declare function isCSSMathFn(value: string | undefined): boolean;
declare function isSize(str: string): boolean;
declare function transformXYZ(d: string, v: string, name: string): [string, string][];
export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, isSize as e, hasParseableColor as h, isCSSMathFn as i, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s, transformXYZ as t };