@unmail/react 0.1.0
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 +212 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.d.ts +211 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3653 -0
- package/dist/index.mjs +3605 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +68 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,3605 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import React, { Suspense } from "react";
|
|
3
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Renderer, marked } from "marked";
|
|
5
|
+
import { convert } from "html-to-text";
|
|
6
|
+
import * as prettier from "prettier/standalone";
|
|
7
|
+
import * as prettierHtml from "prettier/plugins/html";
|
|
8
|
+
import { Writable } from "node:stream";
|
|
9
|
+
import { List, clone, find, generate, parse, string, walk } from "css-tree";
|
|
10
|
+
import { compile } from "tailwindcss";
|
|
11
|
+
|
|
12
|
+
//#region src/components/body.tsx
|
|
13
|
+
const marginProperties = [
|
|
14
|
+
"margin",
|
|
15
|
+
"marginTop",
|
|
16
|
+
"marginBottom",
|
|
17
|
+
"marginRight",
|
|
18
|
+
"marginLeft",
|
|
19
|
+
"marginInline",
|
|
20
|
+
"marginBlock",
|
|
21
|
+
"marginBlockStart",
|
|
22
|
+
"marginBlockEnd",
|
|
23
|
+
"marginInlineStart",
|
|
24
|
+
"marginInlineEnd"
|
|
25
|
+
];
|
|
26
|
+
const Body = React$1.forwardRef(({ children, style,...props }, ref) => {
|
|
27
|
+
const bodyStyle = {
|
|
28
|
+
background: style?.background,
|
|
29
|
+
backgroundColor: style?.backgroundColor
|
|
30
|
+
};
|
|
31
|
+
if (style) for (const property of marginProperties) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
|
|
32
|
+
return /* @__PURE__ */ jsx("body", {
|
|
33
|
+
...props,
|
|
34
|
+
style: bodyStyle,
|
|
35
|
+
ref,
|
|
36
|
+
children: /* @__PURE__ */ jsx("table", {
|
|
37
|
+
border: 0,
|
|
38
|
+
width: "100%",
|
|
39
|
+
cellPadding: "0",
|
|
40
|
+
cellSpacing: "0",
|
|
41
|
+
role: "presentation",
|
|
42
|
+
align: "center",
|
|
43
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
|
|
44
|
+
style,
|
|
45
|
+
children
|
|
46
|
+
}) }) })
|
|
47
|
+
})
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
Body.displayName = "Body";
|
|
51
|
+
|
|
52
|
+
//#endregion
|
|
53
|
+
//#region src/utils/parse-padding.ts
|
|
54
|
+
function convertToPx(value) {
|
|
55
|
+
let px = 0;
|
|
56
|
+
if (!value) return px;
|
|
57
|
+
if (typeof value === "number") return value;
|
|
58
|
+
const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
|
|
59
|
+
if (matches && matches.length === 3) {
|
|
60
|
+
const numValue = Number.parseFloat(matches[1]);
|
|
61
|
+
switch (matches[2]) {
|
|
62
|
+
case "px": return numValue;
|
|
63
|
+
case "em":
|
|
64
|
+
case "rem":
|
|
65
|
+
px = numValue * 16;
|
|
66
|
+
return px;
|
|
67
|
+
case "%":
|
|
68
|
+
px = numValue / 100 * 600;
|
|
69
|
+
return px;
|
|
70
|
+
default: return numValue;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return 0;
|
|
74
|
+
}
|
|
75
|
+
function parsePaddingValue(value) {
|
|
76
|
+
if (typeof value === "number") return {
|
|
77
|
+
paddingTop: value,
|
|
78
|
+
paddingBottom: value,
|
|
79
|
+
paddingLeft: value,
|
|
80
|
+
paddingRight: value
|
|
81
|
+
};
|
|
82
|
+
if (typeof value === "string") {
|
|
83
|
+
const values = value.toString().trim().split(/\s+/);
|
|
84
|
+
if (values.length === 1) return {
|
|
85
|
+
paddingTop: values[0],
|
|
86
|
+
paddingBottom: values[0],
|
|
87
|
+
paddingLeft: values[0],
|
|
88
|
+
paddingRight: values[0]
|
|
89
|
+
};
|
|
90
|
+
if (values.length === 2) return {
|
|
91
|
+
paddingTop: values[0],
|
|
92
|
+
paddingRight: values[1],
|
|
93
|
+
paddingBottom: values[0],
|
|
94
|
+
paddingLeft: values[1]
|
|
95
|
+
};
|
|
96
|
+
if (values.length === 3) return {
|
|
97
|
+
paddingTop: values[0],
|
|
98
|
+
paddingRight: values[1],
|
|
99
|
+
paddingBottom: values[2],
|
|
100
|
+
paddingLeft: values[1]
|
|
101
|
+
};
|
|
102
|
+
if (values.length === 4) return {
|
|
103
|
+
paddingTop: values[0],
|
|
104
|
+
paddingRight: values[1],
|
|
105
|
+
paddingBottom: values[2],
|
|
106
|
+
paddingLeft: values[3]
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
return {
|
|
110
|
+
paddingTop: void 0,
|
|
111
|
+
paddingBottom: void 0,
|
|
112
|
+
paddingLeft: void 0,
|
|
113
|
+
paddingRight: void 0
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
function parsePadding(properties) {
|
|
117
|
+
let paddingTop;
|
|
118
|
+
let paddingRight;
|
|
119
|
+
let paddingBottom;
|
|
120
|
+
let paddingLeft;
|
|
121
|
+
for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
|
|
122
|
+
else if (key === "paddingTop") paddingTop = value;
|
|
123
|
+
else if (key === "paddingRight") paddingRight = value;
|
|
124
|
+
else if (key === "paddingBottom") paddingBottom = value;
|
|
125
|
+
else if (key === "paddingLeft") paddingLeft = value;
|
|
126
|
+
return {
|
|
127
|
+
paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
|
|
128
|
+
paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
|
|
129
|
+
paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
|
|
130
|
+
paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
//#endregion
|
|
135
|
+
//#region src/utils/px-to-pt.ts
|
|
136
|
+
const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
|
|
137
|
+
|
|
138
|
+
//#endregion
|
|
139
|
+
//#region src/components/button.tsx
|
|
140
|
+
const maxFontWidth = 5;
|
|
141
|
+
function computeFontWidthAndSpaceCount(expectedWidth) {
|
|
142
|
+
if (expectedWidth === 0) return [0, 0];
|
|
143
|
+
let smallestSpaceCount = 0;
|
|
144
|
+
const computeRequiredFontWidth = () => {
|
|
145
|
+
if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
|
|
146
|
+
return Number.POSITIVE_INFINITY;
|
|
147
|
+
};
|
|
148
|
+
while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
|
|
149
|
+
return [computeRequiredFontWidth(), smallestSpaceCount];
|
|
150
|
+
}
|
|
151
|
+
const Button = React$1.forwardRef(({ children, style, target = "_blank",...props }, ref) => {
|
|
152
|
+
const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style ?? {});
|
|
153
|
+
const textRaise = pxToPt((paddingTop ?? 0) + (paddingBottom ?? 0));
|
|
154
|
+
const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
|
|
155
|
+
const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
|
|
156
|
+
return /* @__PURE__ */ jsxs("a", {
|
|
157
|
+
...props,
|
|
158
|
+
ref,
|
|
159
|
+
style: {
|
|
160
|
+
lineHeight: "100%",
|
|
161
|
+
textDecoration: "none",
|
|
162
|
+
display: "inline-block",
|
|
163
|
+
maxWidth: "100%",
|
|
164
|
+
msoPaddingAlt: "0px",
|
|
165
|
+
...style,
|
|
166
|
+
paddingTop,
|
|
167
|
+
paddingRight,
|
|
168
|
+
paddingBottom,
|
|
169
|
+
paddingLeft
|
|
170
|
+
},
|
|
171
|
+
target,
|
|
172
|
+
children: [
|
|
173
|
+
/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${" ".repeat(plSpaceCount)}</i><![endif]-->` } }),
|
|
174
|
+
/* @__PURE__ */ jsx("span", {
|
|
175
|
+
style: {
|
|
176
|
+
maxWidth: "100%",
|
|
177
|
+
display: "inline-block",
|
|
178
|
+
lineHeight: "120%",
|
|
179
|
+
msoPaddingAlt: "0px",
|
|
180
|
+
msoTextRaise: pxToPt(paddingBottom)
|
|
181
|
+
},
|
|
182
|
+
children
|
|
183
|
+
}),
|
|
184
|
+
/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${" ".repeat(prSpaceCount)}​</i><![endif]-->` } })
|
|
185
|
+
]
|
|
186
|
+
});
|
|
187
|
+
});
|
|
188
|
+
Button.displayName = "Button";
|
|
189
|
+
|
|
190
|
+
//#endregion
|
|
191
|
+
//#region src/components/column.tsx
|
|
192
|
+
const Column = React$1.forwardRef(({ children, style,...props }, ref) => {
|
|
193
|
+
return /* @__PURE__ */ jsx("td", {
|
|
194
|
+
...props,
|
|
195
|
+
ref,
|
|
196
|
+
style,
|
|
197
|
+
children
|
|
198
|
+
});
|
|
199
|
+
});
|
|
200
|
+
Column.displayName = "Column";
|
|
201
|
+
|
|
202
|
+
//#endregion
|
|
203
|
+
//#region src/components/container.tsx
|
|
204
|
+
const Container = React$1.forwardRef(({ children, style,...props }, ref) => {
|
|
205
|
+
return /* @__PURE__ */ jsx("table", {
|
|
206
|
+
align: "center",
|
|
207
|
+
width: "100%",
|
|
208
|
+
...props,
|
|
209
|
+
border: 0,
|
|
210
|
+
cellPadding: "0",
|
|
211
|
+
cellSpacing: "0",
|
|
212
|
+
ref,
|
|
213
|
+
role: "presentation",
|
|
214
|
+
style: {
|
|
215
|
+
maxWidth: "37.5em",
|
|
216
|
+
...style
|
|
217
|
+
},
|
|
218
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
|
|
219
|
+
style: { width: "100%" },
|
|
220
|
+
children: /* @__PURE__ */ jsx("td", { children })
|
|
221
|
+
}) })
|
|
222
|
+
});
|
|
223
|
+
});
|
|
224
|
+
Container.displayName = "Container";
|
|
225
|
+
|
|
226
|
+
//#endregion
|
|
227
|
+
//#region src/components/font.tsx
|
|
228
|
+
/** The component MUST be placed inside the <Head> component */
|
|
229
|
+
const Font = ({ fontFamily, fallbackFontFamily, webFont, fontStyle = "normal", fontWeight = 400 }) => {
|
|
230
|
+
const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
|
|
231
|
+
return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
|
|
232
|
+
@font-face {
|
|
233
|
+
font-family: '${fontFamily}';
|
|
234
|
+
font-style: ${fontStyle};
|
|
235
|
+
font-weight: ${fontWeight};
|
|
236
|
+
mso-font-alt: '${Array.isArray(fallbackFontFamily) ? fallbackFontFamily[0] : fallbackFontFamily}';
|
|
237
|
+
${src}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
* {
|
|
241
|
+
font-family: '${fontFamily}', ${Array.isArray(fallbackFontFamily) ? fallbackFontFamily.join(", ") : fallbackFontFamily};
|
|
242
|
+
}
|
|
243
|
+
` } });
|
|
244
|
+
};
|
|
245
|
+
|
|
246
|
+
//#endregion
|
|
247
|
+
//#region src/components/head.tsx
|
|
248
|
+
const Head = React$1.forwardRef(({ children,...props }, ref) => /* @__PURE__ */ jsxs("head", {
|
|
249
|
+
...props,
|
|
250
|
+
ref,
|
|
251
|
+
children: [
|
|
252
|
+
/* @__PURE__ */ jsx("meta", {
|
|
253
|
+
content: "text/html; charset=UTF-8",
|
|
254
|
+
httpEquiv: "Content-Type"
|
|
255
|
+
}),
|
|
256
|
+
/* @__PURE__ */ jsx("meta", { name: "x-apple-disable-message-reformatting" }),
|
|
257
|
+
children
|
|
258
|
+
]
|
|
259
|
+
}));
|
|
260
|
+
Head.displayName = "Head";
|
|
261
|
+
|
|
262
|
+
//#endregion
|
|
263
|
+
//#region src/utils/spaces.ts
|
|
264
|
+
const withSpace = (value, properties) => {
|
|
265
|
+
const styles = {};
|
|
266
|
+
if (value === void 0) return styles;
|
|
267
|
+
if (Number.isNaN(Number.parseFloat(String(value)))) return styles;
|
|
268
|
+
for (const property of properties) styles[property] = `${value}px`;
|
|
269
|
+
return styles;
|
|
270
|
+
};
|
|
271
|
+
const withMargin = (props) => {
|
|
272
|
+
const candidates = [
|
|
273
|
+
withSpace(props.m, ["margin"]),
|
|
274
|
+
withSpace(props.mx, ["marginLeft", "marginRight"]),
|
|
275
|
+
withSpace(props.my, ["marginTop", "marginBottom"]),
|
|
276
|
+
withSpace(props.mt, ["marginTop"]),
|
|
277
|
+
withSpace(props.mr, ["marginRight"]),
|
|
278
|
+
withSpace(props.mb, ["marginBottom"]),
|
|
279
|
+
withSpace(props.ml, ["marginLeft"])
|
|
280
|
+
];
|
|
281
|
+
const mergedStyles = {};
|
|
282
|
+
for (const style of candidates) if (Object.keys(style).length > 0) Object.assign(mergedStyles, style);
|
|
283
|
+
return mergedStyles;
|
|
284
|
+
};
|
|
285
|
+
|
|
286
|
+
//#endregion
|
|
287
|
+
//#region src/components/heading.tsx
|
|
288
|
+
const Heading = React$1.forwardRef(({ as: Tag = "h1", children, style, m, mx, my, mt, mr, mb, ml,...props }, ref) => {
|
|
289
|
+
return /* @__PURE__ */ jsx(Tag, {
|
|
290
|
+
...props,
|
|
291
|
+
ref,
|
|
292
|
+
style: {
|
|
293
|
+
...withMargin({
|
|
294
|
+
m,
|
|
295
|
+
mx,
|
|
296
|
+
my,
|
|
297
|
+
mt,
|
|
298
|
+
mr,
|
|
299
|
+
mb,
|
|
300
|
+
ml
|
|
301
|
+
}),
|
|
302
|
+
...style
|
|
303
|
+
},
|
|
304
|
+
children
|
|
305
|
+
});
|
|
306
|
+
});
|
|
307
|
+
Heading.displayName = "Heading";
|
|
308
|
+
|
|
309
|
+
//#endregion
|
|
310
|
+
//#region src/components/hr.tsx
|
|
311
|
+
const Hr = React$1.forwardRef(({ style,...props }, ref) => /* @__PURE__ */ jsx("hr", {
|
|
312
|
+
...props,
|
|
313
|
+
ref,
|
|
314
|
+
style: {
|
|
315
|
+
width: "100%",
|
|
316
|
+
border: "none",
|
|
317
|
+
borderTop: "1px solid #eaeaea",
|
|
318
|
+
...style
|
|
319
|
+
}
|
|
320
|
+
}));
|
|
321
|
+
Hr.displayName = "Hr";
|
|
322
|
+
|
|
323
|
+
//#endregion
|
|
324
|
+
//#region src/components/html.tsx
|
|
325
|
+
const Html = React$1.forwardRef(({ children, lang = "en", dir = "ltr",...props }, ref) => /* @__PURE__ */ jsx("html", {
|
|
326
|
+
...props,
|
|
327
|
+
dir,
|
|
328
|
+
lang,
|
|
329
|
+
ref,
|
|
330
|
+
children
|
|
331
|
+
}));
|
|
332
|
+
Html.displayName = "Html";
|
|
333
|
+
|
|
334
|
+
//#endregion
|
|
335
|
+
//#region src/components/img.tsx
|
|
336
|
+
const Img = React$1.forwardRef(({ alt, src, width, height, style,...props }, ref) => /* @__PURE__ */ jsx("img", {
|
|
337
|
+
...props,
|
|
338
|
+
alt,
|
|
339
|
+
height,
|
|
340
|
+
ref,
|
|
341
|
+
src,
|
|
342
|
+
style: {
|
|
343
|
+
display: "block",
|
|
344
|
+
outline: "none",
|
|
345
|
+
border: "none",
|
|
346
|
+
textDecoration: "none",
|
|
347
|
+
...style
|
|
348
|
+
},
|
|
349
|
+
width
|
|
350
|
+
}));
|
|
351
|
+
Img.displayName = "Img";
|
|
352
|
+
|
|
353
|
+
//#endregion
|
|
354
|
+
//#region src/components/link.tsx
|
|
355
|
+
const Link = React$1.forwardRef(({ target = "_blank", style,...props }, ref) => /* @__PURE__ */ jsx("a", {
|
|
356
|
+
...props,
|
|
357
|
+
ref,
|
|
358
|
+
style: {
|
|
359
|
+
color: "#067df7",
|
|
360
|
+
textDecorationLine: "none",
|
|
361
|
+
...style
|
|
362
|
+
},
|
|
363
|
+
target,
|
|
364
|
+
children: props.children
|
|
365
|
+
}));
|
|
366
|
+
Link.displayName = "Link";
|
|
367
|
+
|
|
368
|
+
//#endregion
|
|
369
|
+
//#region src/utils/markdown-styles.ts
|
|
370
|
+
const emptyStyle = {};
|
|
371
|
+
const baseHeaderStyles = {
|
|
372
|
+
fontWeight: "500",
|
|
373
|
+
paddingTop: 20
|
|
374
|
+
};
|
|
375
|
+
const codeInline = {
|
|
376
|
+
color: "#212529",
|
|
377
|
+
fontSize: "87.5%",
|
|
378
|
+
display: "inline",
|
|
379
|
+
background: " #f8f8f8",
|
|
380
|
+
fontFamily: "SFMono-Regular,Menlo,Monaco,Consolas,monospace"
|
|
381
|
+
};
|
|
382
|
+
const codeBlock = {
|
|
383
|
+
...codeInline,
|
|
384
|
+
display: "block",
|
|
385
|
+
paddingTop: 10,
|
|
386
|
+
paddingRight: 10,
|
|
387
|
+
paddingLeft: 10,
|
|
388
|
+
paddingBottom: 1,
|
|
389
|
+
marginBottom: 20,
|
|
390
|
+
background: " #f8f8f8"
|
|
391
|
+
};
|
|
392
|
+
const defaultMarkdownStyles = {
|
|
393
|
+
h1: {
|
|
394
|
+
...baseHeaderStyles,
|
|
395
|
+
fontSize: "2.5rem"
|
|
396
|
+
},
|
|
397
|
+
h2: {
|
|
398
|
+
...baseHeaderStyles,
|
|
399
|
+
fontSize: "2rem"
|
|
400
|
+
},
|
|
401
|
+
h3: {
|
|
402
|
+
...baseHeaderStyles,
|
|
403
|
+
fontSize: "1.75rem"
|
|
404
|
+
},
|
|
405
|
+
h4: {
|
|
406
|
+
...baseHeaderStyles,
|
|
407
|
+
fontSize: "1.5rem"
|
|
408
|
+
},
|
|
409
|
+
h5: {
|
|
410
|
+
...baseHeaderStyles,
|
|
411
|
+
fontSize: "1.25rem"
|
|
412
|
+
},
|
|
413
|
+
h6: {
|
|
414
|
+
...baseHeaderStyles,
|
|
415
|
+
fontSize: "1rem"
|
|
416
|
+
},
|
|
417
|
+
blockQuote: {
|
|
418
|
+
background: "#f9f9f9",
|
|
419
|
+
borderLeft: "10px solid #ccc",
|
|
420
|
+
margin: "1.5em 10px",
|
|
421
|
+
padding: "1em 10px"
|
|
422
|
+
},
|
|
423
|
+
bold: { fontWeight: "bold" },
|
|
424
|
+
italic: { fontStyle: "italic" },
|
|
425
|
+
link: {
|
|
426
|
+
color: "#007bff",
|
|
427
|
+
textDecoration: "underline",
|
|
428
|
+
backgroundColor: "transparent"
|
|
429
|
+
},
|
|
430
|
+
codeBlock: {
|
|
431
|
+
...codeBlock,
|
|
432
|
+
wordWrap: "break-word"
|
|
433
|
+
},
|
|
434
|
+
codeInline: {
|
|
435
|
+
...codeInline,
|
|
436
|
+
wordWrap: "break-word"
|
|
437
|
+
},
|
|
438
|
+
p: emptyStyle,
|
|
439
|
+
li: emptyStyle,
|
|
440
|
+
ul: emptyStyle,
|
|
441
|
+
ol: emptyStyle,
|
|
442
|
+
image: emptyStyle,
|
|
443
|
+
br: emptyStyle,
|
|
444
|
+
hr: emptyStyle,
|
|
445
|
+
table: emptyStyle,
|
|
446
|
+
thead: emptyStyle,
|
|
447
|
+
tbody: emptyStyle,
|
|
448
|
+
th: emptyStyle,
|
|
449
|
+
td: emptyStyle,
|
|
450
|
+
tr: emptyStyle,
|
|
451
|
+
strikethrough: emptyStyle
|
|
452
|
+
};
|
|
453
|
+
|
|
454
|
+
//#endregion
|
|
455
|
+
//#region src/utils/parse-css-in-js-to-inline-css.ts
|
|
456
|
+
function camelToKebabCase(str) {
|
|
457
|
+
return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
458
|
+
}
|
|
459
|
+
function escapeQuotes(value) {
|
|
460
|
+
if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, "'");
|
|
461
|
+
return value;
|
|
462
|
+
}
|
|
463
|
+
const numericalCssProperties = [
|
|
464
|
+
"width",
|
|
465
|
+
"height",
|
|
466
|
+
"margin",
|
|
467
|
+
"marginTop",
|
|
468
|
+
"marginRight",
|
|
469
|
+
"marginBottom",
|
|
470
|
+
"marginLeft",
|
|
471
|
+
"padding",
|
|
472
|
+
"paddingTop",
|
|
473
|
+
"paddingRight",
|
|
474
|
+
"paddingBottom",
|
|
475
|
+
"paddingLeft",
|
|
476
|
+
"borderWidth",
|
|
477
|
+
"borderTopWidth",
|
|
478
|
+
"borderRightWidth",
|
|
479
|
+
"borderBottomWidth",
|
|
480
|
+
"borderLeftWidth",
|
|
481
|
+
"outlineWidth",
|
|
482
|
+
"top",
|
|
483
|
+
"right",
|
|
484
|
+
"bottom",
|
|
485
|
+
"left",
|
|
486
|
+
"fontSize",
|
|
487
|
+
"letterSpacing",
|
|
488
|
+
"wordSpacing",
|
|
489
|
+
"maxWidth",
|
|
490
|
+
"minWidth",
|
|
491
|
+
"maxHeight",
|
|
492
|
+
"minHeight",
|
|
493
|
+
"borderRadius",
|
|
494
|
+
"borderTopLeftRadius",
|
|
495
|
+
"borderTopRightRadius",
|
|
496
|
+
"borderBottomLeftRadius",
|
|
497
|
+
"borderBottomRightRadius",
|
|
498
|
+
"textIndent",
|
|
499
|
+
"gridColumnGap",
|
|
500
|
+
"gridRowGap",
|
|
501
|
+
"gridGap",
|
|
502
|
+
"translateX",
|
|
503
|
+
"translateY"
|
|
504
|
+
];
|
|
505
|
+
function parseCssInJsToInlineCss(cssProperties) {
|
|
506
|
+
if (!cssProperties) return "";
|
|
507
|
+
return Object.entries(cssProperties).map(([property, value]) => {
|
|
508
|
+
if (typeof value === "number" && numericalCssProperties.includes(property)) return `${camelToKebabCase(property)}:${value}px`;
|
|
509
|
+
const escapedValue = escapeQuotes(value);
|
|
510
|
+
return `${camelToKebabCase(property)}:${escapedValue}`;
|
|
511
|
+
}).join(";");
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
//#endregion
|
|
515
|
+
//#region src/components/markdown.tsx
|
|
516
|
+
const Markdown = React$1.forwardRef(({ children, markdownContainerStyles, markdownCustomStyles,...props }, ref) => {
|
|
517
|
+
const finalStyles = {
|
|
518
|
+
...defaultMarkdownStyles,
|
|
519
|
+
...markdownCustomStyles
|
|
520
|
+
};
|
|
521
|
+
const renderer = new Renderer();
|
|
522
|
+
renderer.blockquote = ({ tokens }) => {
|
|
523
|
+
const text = renderer.parser.parse(tokens);
|
|
524
|
+
return `<blockquote${parseCssInJsToInlineCss(finalStyles.blockQuote) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.blockQuote)}"` : ""}>\n${text}</blockquote>\n`;
|
|
525
|
+
};
|
|
526
|
+
renderer.br = () => {
|
|
527
|
+
return `<br${parseCssInJsToInlineCss(finalStyles.br) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.br)}"` : ""} />`;
|
|
528
|
+
};
|
|
529
|
+
renderer.code = ({ text }) => {
|
|
530
|
+
const escaped = `${text.replace(/\n$/, "")}\n`;
|
|
531
|
+
return `<pre${parseCssInJsToInlineCss(finalStyles.codeBlock) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.codeBlock)}"` : ""}><code>${escaped}</code></pre>\n`;
|
|
532
|
+
};
|
|
533
|
+
renderer.codespan = ({ text }) => {
|
|
534
|
+
return `<code${parseCssInJsToInlineCss(finalStyles.codeInline) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.codeInline)}"` : ""}>${text}</code>`;
|
|
535
|
+
};
|
|
536
|
+
renderer.del = ({ tokens }) => {
|
|
537
|
+
const text = renderer.parser.parseInline(tokens);
|
|
538
|
+
return `<del${parseCssInJsToInlineCss(finalStyles.strikethrough) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.strikethrough)}"` : ""}>${text}</del>`;
|
|
539
|
+
};
|
|
540
|
+
renderer.em = ({ tokens }) => {
|
|
541
|
+
const text = renderer.parser.parseInline(tokens);
|
|
542
|
+
return `<em${parseCssInJsToInlineCss(finalStyles.italic) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.italic)}"` : ""}>${text}</em>`;
|
|
543
|
+
};
|
|
544
|
+
renderer.heading = ({ tokens, depth }) => {
|
|
545
|
+
const text = renderer.parser.parseInline(tokens);
|
|
546
|
+
return `<h${depth}${parseCssInJsToInlineCss(finalStyles[`h${depth}`]) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles[`h${depth}`])}"` : ""}>${text}</h${depth}>`;
|
|
547
|
+
};
|
|
548
|
+
renderer.hr = () => {
|
|
549
|
+
return `<hr${parseCssInJsToInlineCss(finalStyles.hr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.hr)}"` : ""} />\n`;
|
|
550
|
+
};
|
|
551
|
+
renderer.image = ({ href, text, title }) => {
|
|
552
|
+
return `<img src="${href.replaceAll("\"", """)}" alt="${text.replaceAll("\"", """)}"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.image) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"` : ""}>`;
|
|
553
|
+
};
|
|
554
|
+
renderer.link = ({ href, title, tokens }) => {
|
|
555
|
+
const text = renderer.parser.parseInline(tokens);
|
|
556
|
+
return `<a href="${href}" target="_blank"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.link) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"` : ""}>${text}</a>`;
|
|
557
|
+
};
|
|
558
|
+
renderer.listitem = ({ tokens }) => {
|
|
559
|
+
const text = tokens.some((token) => token.type === "list") ? renderer.parser.parse(tokens) : renderer.parser.parseInline(tokens);
|
|
560
|
+
return `<li${parseCssInJsToInlineCss(finalStyles.li) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.li)}"` : ""}>${text}</li>\n`;
|
|
561
|
+
};
|
|
562
|
+
renderer.list = ({ items, ordered, start }) => {
|
|
563
|
+
const type = ordered ? "ol" : "ul";
|
|
564
|
+
const startAt = ordered && start !== 1 ? ` start="${start}"` : "";
|
|
565
|
+
const styles = parseCssInJsToInlineCss(finalStyles[ordered ? "ol" : "ul"]);
|
|
566
|
+
return `<${type}${startAt}${styles !== "" ? ` style="${styles}"` : ""}>\n` + items.map((item) => renderer.listitem(item)).join("") + `</${type}>\n`;
|
|
567
|
+
};
|
|
568
|
+
renderer.paragraph = ({ tokens }) => {
|
|
569
|
+
const text = renderer.parser.parseInline(tokens);
|
|
570
|
+
return `<p${parseCssInJsToInlineCss(finalStyles.p) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.p)}"` : ""}>${text}</p>\n`;
|
|
571
|
+
};
|
|
572
|
+
renderer.strong = ({ tokens }) => {
|
|
573
|
+
const text = renderer.parser.parseInline(tokens);
|
|
574
|
+
return `<strong${parseCssInJsToInlineCss(finalStyles.bold) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.bold)}"` : ""}>${text}</strong>`;
|
|
575
|
+
};
|
|
576
|
+
renderer.table = ({ header, rows }) => {
|
|
577
|
+
const styleTable = parseCssInJsToInlineCss(finalStyles.table);
|
|
578
|
+
const styleThead = parseCssInJsToInlineCss(finalStyles.thead);
|
|
579
|
+
const styleTbody = parseCssInJsToInlineCss(finalStyles.tbody);
|
|
580
|
+
const theadRow = renderer.tablerow({ text: header.map((cell) => renderer.tablecell(cell)).join("") });
|
|
581
|
+
const tbodyRows = rows.map((row) => renderer.tablerow({ text: row.map((cell) => renderer.tablecell(cell)).join("") })).join("");
|
|
582
|
+
const thead = `<thead${styleThead ? ` style="${styleThead}"` : ""}>\n${theadRow}</thead>`;
|
|
583
|
+
const tbody = `<tbody${styleTbody ? ` style="${styleTbody}"` : ""}>${tbodyRows}</tbody>`;
|
|
584
|
+
return `<table${styleTable ? ` style="${styleTable}"` : ""}>\n${thead}\n${tbody}</table>\n`;
|
|
585
|
+
};
|
|
586
|
+
renderer.tablecell = ({ tokens, align, header }) => {
|
|
587
|
+
const text = renderer.parser.parseInline(tokens);
|
|
588
|
+
const type = header ? "th" : "td";
|
|
589
|
+
return `${align ? `<${type} align="${align}"${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>` : `<${type}${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>`}${text}</${type}>\n`;
|
|
590
|
+
};
|
|
591
|
+
renderer.tablerow = ({ text }) => {
|
|
592
|
+
return `<tr${parseCssInJsToInlineCss(finalStyles.tr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.tr)}"` : ""}>\n${text}</tr>\n`;
|
|
593
|
+
};
|
|
594
|
+
return /* @__PURE__ */ jsx("div", {
|
|
595
|
+
...props,
|
|
596
|
+
dangerouslySetInnerHTML: { __html: marked.parse(children, {
|
|
597
|
+
renderer,
|
|
598
|
+
async: false
|
|
599
|
+
}) },
|
|
600
|
+
ref,
|
|
601
|
+
style: markdownContainerStyles
|
|
602
|
+
});
|
|
603
|
+
});
|
|
604
|
+
Markdown.displayName = "Markdown";
|
|
605
|
+
|
|
606
|
+
//#endregion
|
|
607
|
+
//#region src/components/preview.tsx
|
|
608
|
+
const PREVIEW_MAX_LENGTH = 150;
|
|
609
|
+
const whiteSpaceCodes = "\xA0";
|
|
610
|
+
const renderWhiteSpace = (text) => {
|
|
611
|
+
if (text.length >= PREVIEW_MAX_LENGTH) return null;
|
|
612
|
+
return /* @__PURE__ */ jsx("div", { children: whiteSpaceCodes.repeat(PREVIEW_MAX_LENGTH - text.length) });
|
|
613
|
+
};
|
|
614
|
+
const Preview = React$1.forwardRef(({ children = "",...props }, ref) => {
|
|
615
|
+
const text = (Array.isArray(children) ? children.join("") : children).substring(0, PREVIEW_MAX_LENGTH);
|
|
616
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
617
|
+
style: {
|
|
618
|
+
display: "none",
|
|
619
|
+
overflow: "hidden",
|
|
620
|
+
lineHeight: "1px",
|
|
621
|
+
opacity: 0,
|
|
622
|
+
maxHeight: 0,
|
|
623
|
+
maxWidth: 0
|
|
624
|
+
},
|
|
625
|
+
...props,
|
|
626
|
+
ref,
|
|
627
|
+
children: [text, renderWhiteSpace(text)]
|
|
628
|
+
});
|
|
629
|
+
});
|
|
630
|
+
Preview.displayName = "Preview";
|
|
631
|
+
|
|
632
|
+
//#endregion
|
|
633
|
+
//#region src/components/row.tsx
|
|
634
|
+
const Row = React$1.forwardRef(({ children, style,...props }, ref) => {
|
|
635
|
+
return /* @__PURE__ */ jsx("table", {
|
|
636
|
+
align: "center",
|
|
637
|
+
width: "100%",
|
|
638
|
+
border: 0,
|
|
639
|
+
cellPadding: "0",
|
|
640
|
+
cellSpacing: "0",
|
|
641
|
+
role: "presentation",
|
|
642
|
+
...props,
|
|
643
|
+
ref,
|
|
644
|
+
style,
|
|
645
|
+
children: /* @__PURE__ */ jsx("tbody", {
|
|
646
|
+
style: { width: "100%" },
|
|
647
|
+
children: /* @__PURE__ */ jsx("tr", {
|
|
648
|
+
style: { width: "100%" },
|
|
649
|
+
children
|
|
650
|
+
})
|
|
651
|
+
})
|
|
652
|
+
});
|
|
653
|
+
});
|
|
654
|
+
Row.displayName = "Row";
|
|
655
|
+
|
|
656
|
+
//#endregion
|
|
657
|
+
//#region src/components/section.tsx
|
|
658
|
+
const Section = React$1.forwardRef(({ children, style,...props }, ref) => {
|
|
659
|
+
return /* @__PURE__ */ jsx("table", {
|
|
660
|
+
align: "center",
|
|
661
|
+
width: "100%",
|
|
662
|
+
border: 0,
|
|
663
|
+
cellPadding: "0",
|
|
664
|
+
cellSpacing: "0",
|
|
665
|
+
role: "presentation",
|
|
666
|
+
...props,
|
|
667
|
+
ref,
|
|
668
|
+
style,
|
|
669
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { children }) }) })
|
|
670
|
+
});
|
|
671
|
+
});
|
|
672
|
+
Section.displayName = "Section";
|
|
673
|
+
|
|
674
|
+
//#endregion
|
|
675
|
+
//#region src/utils/compute-margins.ts
|
|
676
|
+
function parseMarginValue(value) {
|
|
677
|
+
if (typeof value === "number") return {
|
|
678
|
+
marginTop: value,
|
|
679
|
+
marginBottom: value,
|
|
680
|
+
marginLeft: value,
|
|
681
|
+
marginRight: value
|
|
682
|
+
};
|
|
683
|
+
if (typeof value === "string") {
|
|
684
|
+
const values = value.toString().trim().split(/\s+/);
|
|
685
|
+
if (values.length === 1) return {
|
|
686
|
+
marginTop: values[0],
|
|
687
|
+
marginBottom: values[0],
|
|
688
|
+
marginLeft: values[0],
|
|
689
|
+
marginRight: values[0]
|
|
690
|
+
};
|
|
691
|
+
if (values.length === 2) return {
|
|
692
|
+
marginTop: values[0],
|
|
693
|
+
marginRight: values[1],
|
|
694
|
+
marginBottom: values[0],
|
|
695
|
+
marginLeft: values[1]
|
|
696
|
+
};
|
|
697
|
+
if (values.length === 3) return {
|
|
698
|
+
marginTop: values[0],
|
|
699
|
+
marginRight: values[1],
|
|
700
|
+
marginBottom: values[2],
|
|
701
|
+
marginLeft: values[1]
|
|
702
|
+
};
|
|
703
|
+
if (values.length === 4) return {
|
|
704
|
+
marginTop: values[0],
|
|
705
|
+
marginRight: values[1],
|
|
706
|
+
marginBottom: values[2],
|
|
707
|
+
marginLeft: values[3]
|
|
708
|
+
};
|
|
709
|
+
}
|
|
710
|
+
return {
|
|
711
|
+
marginTop: void 0,
|
|
712
|
+
marginBottom: void 0,
|
|
713
|
+
marginLeft: void 0,
|
|
714
|
+
marginRight: void 0
|
|
715
|
+
};
|
|
716
|
+
}
|
|
717
|
+
function computeMargins(properties) {
|
|
718
|
+
let result = {
|
|
719
|
+
marginTop: void 0,
|
|
720
|
+
marginRight: void 0,
|
|
721
|
+
marginBottom: void 0,
|
|
722
|
+
marginLeft: void 0
|
|
723
|
+
};
|
|
724
|
+
for (const [key, value] of Object.entries(properties)) if (key === "margin") result = parseMarginValue(value);
|
|
725
|
+
else if (key === "marginTop") result.marginTop = value;
|
|
726
|
+
else if (key === "marginRight") result.marginRight = value;
|
|
727
|
+
else if (key === "marginBottom") result.marginBottom = value;
|
|
728
|
+
else if (key === "marginLeft") result.marginLeft = value;
|
|
729
|
+
return result;
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
//#endregion
|
|
733
|
+
//#region src/components/text.tsx
|
|
734
|
+
const Text = React$1.forwardRef(({ style,...props }, ref) => {
|
|
735
|
+
const defaultMargins = {};
|
|
736
|
+
if (style?.marginTop === void 0) defaultMargins.marginTop = "16px";
|
|
737
|
+
if (style?.marginBottom === void 0) defaultMargins.marginBottom = "16px";
|
|
738
|
+
const margins = computeMargins({
|
|
739
|
+
...defaultMargins,
|
|
740
|
+
...style
|
|
741
|
+
});
|
|
742
|
+
return /* @__PURE__ */ jsx("p", {
|
|
743
|
+
...props,
|
|
744
|
+
ref,
|
|
745
|
+
style: {
|
|
746
|
+
fontSize: "14px",
|
|
747
|
+
lineHeight: "24px",
|
|
748
|
+
...style,
|
|
749
|
+
...margins
|
|
750
|
+
}
|
|
751
|
+
});
|
|
752
|
+
});
|
|
753
|
+
Text.displayName = "Text";
|
|
754
|
+
|
|
755
|
+
//#endregion
|
|
756
|
+
//#region src/render/plain-text-selectors.ts
|
|
757
|
+
const plainTextSelectors = [
|
|
758
|
+
{
|
|
759
|
+
selector: "img",
|
|
760
|
+
format: "skip"
|
|
761
|
+
},
|
|
762
|
+
{
|
|
763
|
+
selector: "[data-skip-in-text]",
|
|
764
|
+
format: "skip"
|
|
765
|
+
},
|
|
766
|
+
{
|
|
767
|
+
selector: "a",
|
|
768
|
+
options: { linkBrackets: false }
|
|
769
|
+
}
|
|
770
|
+
];
|
|
771
|
+
|
|
772
|
+
//#endregion
|
|
773
|
+
//#region src/render/pretty.ts
|
|
774
|
+
async function pretty(html) {
|
|
775
|
+
return prettier.format(html, {
|
|
776
|
+
parser: "html",
|
|
777
|
+
plugins: [prettierHtml],
|
|
778
|
+
htmlWhitespaceSensitivity: "ignore"
|
|
779
|
+
});
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
//#endregion
|
|
783
|
+
//#region src/render/read-stream.ts
|
|
784
|
+
async function readStream(stream) {
|
|
785
|
+
let result = "";
|
|
786
|
+
const decoder = new TextDecoder("utf-8");
|
|
787
|
+
if ("pipeTo" in stream) {
|
|
788
|
+
const writableStream = new WritableStream({
|
|
789
|
+
write(chunk) {
|
|
790
|
+
result += decoder.decode(chunk, { stream: true });
|
|
791
|
+
},
|
|
792
|
+
close() {
|
|
793
|
+
result += decoder.decode();
|
|
794
|
+
}
|
|
795
|
+
});
|
|
796
|
+
await stream.pipeTo(writableStream);
|
|
797
|
+
} else {
|
|
798
|
+
const writable = new Writable({
|
|
799
|
+
write(chunk, _encoding, callback) {
|
|
800
|
+
result += decoder.decode(chunk, { stream: true });
|
|
801
|
+
callback();
|
|
802
|
+
},
|
|
803
|
+
final(callback) {
|
|
804
|
+
result += decoder.decode();
|
|
805
|
+
callback();
|
|
806
|
+
}
|
|
807
|
+
});
|
|
808
|
+
await new Promise((resolve, reject) => {
|
|
809
|
+
writable.on("pipe", (source) => {
|
|
810
|
+
source.on("error", (err) => {
|
|
811
|
+
writable.destroy(err);
|
|
812
|
+
});
|
|
813
|
+
});
|
|
814
|
+
writable.on("error", reject);
|
|
815
|
+
writable.on("close", () => {
|
|
816
|
+
resolve();
|
|
817
|
+
});
|
|
818
|
+
stream.pipe(writable);
|
|
819
|
+
});
|
|
820
|
+
}
|
|
821
|
+
return result;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
//#endregion
|
|
825
|
+
//#region src/render/error-boundary.tsx
|
|
826
|
+
function createErrorBoundary(reject) {
|
|
827
|
+
if (!React.Component) return (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
|
|
828
|
+
return class ErrorBoundary extends React.Component {
|
|
829
|
+
componentDidCatch(error) {
|
|
830
|
+
reject(error);
|
|
831
|
+
}
|
|
832
|
+
render() {
|
|
833
|
+
return this.props.children;
|
|
834
|
+
}
|
|
835
|
+
};
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
//#endregion
|
|
839
|
+
//#region src/render/render.tsx
|
|
840
|
+
const doctype = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
|
|
841
|
+
async function render(element, options) {
|
|
842
|
+
const reactDOMServer = await import("react-dom/server").then((m) => {
|
|
843
|
+
if ("default" in m) return m.default;
|
|
844
|
+
return m;
|
|
845
|
+
});
|
|
846
|
+
let markup;
|
|
847
|
+
await new Promise((resolve, reject) => {
|
|
848
|
+
if (Object.hasOwn(reactDOMServer, "renderToReadableStream") && typeof WritableStream !== "undefined") {
|
|
849
|
+
const ErrorBoundary = createErrorBoundary(reject);
|
|
850
|
+
reactDOMServer.renderToReadableStream(/* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: element }) }), {
|
|
851
|
+
progressiveChunkSize: Number.POSITIVE_INFINITY,
|
|
852
|
+
onError(error) {
|
|
853
|
+
throw error;
|
|
854
|
+
}
|
|
855
|
+
}).then((stream) => readStream(stream)).then((result) => {
|
|
856
|
+
markup = result;
|
|
857
|
+
resolve();
|
|
858
|
+
}).catch(reject);
|
|
859
|
+
} else {
|
|
860
|
+
const ErrorBoundary = createErrorBoundary(reject);
|
|
861
|
+
const stream = reactDOMServer.renderToPipeableStream(/* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: element }) }), {
|
|
862
|
+
async onAllReady() {
|
|
863
|
+
markup = await readStream(stream);
|
|
864
|
+
resolve();
|
|
865
|
+
},
|
|
866
|
+
onError(error) {
|
|
867
|
+
reject(error);
|
|
868
|
+
},
|
|
869
|
+
progressiveChunkSize: Number.POSITIVE_INFINITY
|
|
870
|
+
});
|
|
871
|
+
}
|
|
872
|
+
});
|
|
873
|
+
if (options?.plainText) return convert(markup, {
|
|
874
|
+
selectors: plainTextSelectors,
|
|
875
|
+
...options.plainText === true ? options.htmlToTextOptions : {}
|
|
876
|
+
});
|
|
877
|
+
const html = `${doctype}${markup.replace(/<!DOCTYPE.*?>/, "")}`;
|
|
878
|
+
if (options?.pretty) return pretty(html);
|
|
879
|
+
return html;
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
//#endregion
|
|
883
|
+
//#region src/tailwind/utils/is-rule-inlinable.ts
|
|
884
|
+
function isRuleInlinable(rule) {
|
|
885
|
+
const hasAtRuleInside = find(rule, (node) => node.type === "Atrule") !== null;
|
|
886
|
+
const hasPseudoSelector = find(rule, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null;
|
|
887
|
+
return !hasAtRuleInside && !hasPseudoSelector;
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
//#endregion
|
|
891
|
+
//#region src/tailwind/utils/is-part-inlinable.ts
|
|
892
|
+
function isPartInlinable(part) {
|
|
893
|
+
const hasAtRuleInside = find(part, (node) => node.type === "Atrule") !== null;
|
|
894
|
+
const hasPseudoSelector = find(part, (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") !== null;
|
|
895
|
+
return !hasAtRuleInside && !hasPseudoSelector;
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
//#endregion
|
|
899
|
+
//#region src/tailwind/utils/split-mixed-rule.ts
|
|
900
|
+
function splitMixedRule(rule) {
|
|
901
|
+
const ruleCloneInlinable = clone(rule);
|
|
902
|
+
const ruleCloneNonInlinable = clone(rule);
|
|
903
|
+
const inlinableParts = [];
|
|
904
|
+
const nonInlinableParts = [];
|
|
905
|
+
for (const part of ruleCloneInlinable.block.children.toArray()) if (isPartInlinable(part)) inlinableParts.push(part);
|
|
906
|
+
else nonInlinableParts.push(part);
|
|
907
|
+
return {
|
|
908
|
+
inlinablePart: inlinableParts.length > 0 ? {
|
|
909
|
+
...ruleCloneInlinable,
|
|
910
|
+
block: {
|
|
911
|
+
type: "Block",
|
|
912
|
+
children: new List().fromArray(inlinableParts)
|
|
913
|
+
}
|
|
914
|
+
} : null,
|
|
915
|
+
nonInlinablePart: nonInlinableParts.length > 0 ? {
|
|
916
|
+
...ruleCloneNonInlinable,
|
|
917
|
+
block: {
|
|
918
|
+
type: "Block",
|
|
919
|
+
children: new List().fromArray(nonInlinableParts)
|
|
920
|
+
}
|
|
921
|
+
} : null
|
|
922
|
+
};
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
//#endregion
|
|
926
|
+
//#region src/tailwind/utils/extract-rules-per-class.ts
|
|
927
|
+
function extractRulesPerClass(root, classes) {
|
|
928
|
+
const classSet = new Set(classes);
|
|
929
|
+
const inlinableRules = /* @__PURE__ */ new Map();
|
|
930
|
+
const nonInlinableRules = /* @__PURE__ */ new Map();
|
|
931
|
+
walk(root, {
|
|
932
|
+
visit: "Rule",
|
|
933
|
+
enter(rule) {
|
|
934
|
+
const selectorClasses = [];
|
|
935
|
+
walk(rule, {
|
|
936
|
+
visit: "ClassSelector",
|
|
937
|
+
enter(classSelector) {
|
|
938
|
+
selectorClasses.push(string.decode(classSelector.name));
|
|
939
|
+
}
|
|
940
|
+
});
|
|
941
|
+
if (isRuleInlinable(rule)) {
|
|
942
|
+
for (const className of selectorClasses) if (classSet.has(className)) inlinableRules.set(className, rule);
|
|
943
|
+
} else {
|
|
944
|
+
const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
|
|
945
|
+
for (const className of selectorClasses) {
|
|
946
|
+
if (!classSet.has(className)) continue;
|
|
947
|
+
if (inlinablePart) inlinableRules.set(className, inlinablePart);
|
|
948
|
+
if (nonInlinablePart) nonInlinableRules.set(className, nonInlinablePart);
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
}
|
|
952
|
+
});
|
|
953
|
+
return {
|
|
954
|
+
inlinable: inlinableRules,
|
|
955
|
+
nonInlinable: nonInlinableRules
|
|
956
|
+
};
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
//#endregion
|
|
960
|
+
//#region src/tailwind/utils/get-custom-properties.ts
|
|
961
|
+
function getCustomProperties(node) {
|
|
962
|
+
const customProperties = /* @__PURE__ */ new Map();
|
|
963
|
+
walk(node, {
|
|
964
|
+
visit: "Atrule",
|
|
965
|
+
enter(atrule) {
|
|
966
|
+
if (atrule.name === "property" && atrule.prelude) {
|
|
967
|
+
const prelude = generate(atrule.prelude);
|
|
968
|
+
if (prelude.startsWith("--")) {
|
|
969
|
+
let syntax;
|
|
970
|
+
let inherits;
|
|
971
|
+
let initialValue;
|
|
972
|
+
walk(atrule, {
|
|
973
|
+
visit: "Declaration",
|
|
974
|
+
enter(declaration) {
|
|
975
|
+
if (declaration.property === "syntax") syntax = declaration;
|
|
976
|
+
if (declaration.property === "inherits") inherits = declaration;
|
|
977
|
+
if (declaration.property === "initial-value") initialValue = declaration;
|
|
978
|
+
}
|
|
979
|
+
});
|
|
980
|
+
customProperties.set(prelude, {
|
|
981
|
+
syntax,
|
|
982
|
+
inherits,
|
|
983
|
+
initialValue
|
|
984
|
+
});
|
|
985
|
+
}
|
|
986
|
+
}
|
|
987
|
+
}
|
|
988
|
+
});
|
|
989
|
+
return customProperties;
|
|
990
|
+
}
|
|
991
|
+
|
|
992
|
+
//#endregion
|
|
993
|
+
//#region src/tailwind/utils/from-dash-case-to-camel-case.ts
|
|
994
|
+
const fromDashCaseToCamelCase = (text) => {
|
|
995
|
+
return text.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
|
|
996
|
+
};
|
|
997
|
+
|
|
998
|
+
//#endregion
|
|
999
|
+
//#region src/tailwind/utils/get-react-property.ts
|
|
1000
|
+
function getReactProperty(prop) {
|
|
1001
|
+
const modifiedProp = prop.toLowerCase();
|
|
1002
|
+
if (modifiedProp.startsWith("--")) return modifiedProp;
|
|
1003
|
+
if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
|
|
1004
|
+
return fromDashCaseToCamelCase(modifiedProp);
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
//#endregion
|
|
1008
|
+
//#region src/tailwind/utils/unwrap-value.ts
|
|
1009
|
+
function unwrapValue(value) {
|
|
1010
|
+
if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
|
|
1011
|
+
return value;
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
//#endregion
|
|
1015
|
+
//#region src/tailwind/utils/make-inline-styles-for.ts
|
|
1016
|
+
function makeInlineStylesFor(inlinableRules, customProperties) {
|
|
1017
|
+
const styles = {};
|
|
1018
|
+
const localVariableDeclarations = /* @__PURE__ */ new Map();
|
|
1019
|
+
for (const rule of inlinableRules) walk(rule, {
|
|
1020
|
+
visit: "Declaration",
|
|
1021
|
+
enter(declaration) {
|
|
1022
|
+
if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
|
|
1023
|
+
}
|
|
1024
|
+
});
|
|
1025
|
+
for (const rule of inlinableRules) {
|
|
1026
|
+
walk(rule, {
|
|
1027
|
+
visit: "Function",
|
|
1028
|
+
enter(func, funcParentListItem) {
|
|
1029
|
+
if (func.name === "var") {
|
|
1030
|
+
let variableName;
|
|
1031
|
+
walk(func, {
|
|
1032
|
+
visit: "Identifier",
|
|
1033
|
+
enter(identifier) {
|
|
1034
|
+
variableName = identifier.name;
|
|
1035
|
+
return this.break;
|
|
1036
|
+
}
|
|
1037
|
+
});
|
|
1038
|
+
if (variableName) {
|
|
1039
|
+
const definition = localVariableDeclarations.get(variableName);
|
|
1040
|
+
if (definition) funcParentListItem.data = unwrapValue(definition.value);
|
|
1041
|
+
else {
|
|
1042
|
+
const customProperty = customProperties.get(variableName);
|
|
1043
|
+
if (customProperty?.initialValue) funcParentListItem.data = unwrapValue(customProperty.initialValue.value);
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
1047
|
+
}
|
|
1048
|
+
});
|
|
1049
|
+
walk(rule, {
|
|
1050
|
+
visit: "Declaration",
|
|
1051
|
+
enter(declaration) {
|
|
1052
|
+
if (declaration.property.startsWith("--")) return;
|
|
1053
|
+
styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
|
|
1054
|
+
}
|
|
1055
|
+
});
|
|
1056
|
+
}
|
|
1057
|
+
return styles;
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
//#endregion
|
|
1061
|
+
//#region src/tailwind/utils/resolve-all-css-variables.ts
|
|
1062
|
+
function doSelectorsIntersect(first, second) {
|
|
1063
|
+
if (generate(first) === generate(second)) return true;
|
|
1064
|
+
let hasSomeUniversal = false;
|
|
1065
|
+
const walker = (node, _parentListItem, parentList) => {
|
|
1066
|
+
if (hasSomeUniversal) return;
|
|
1067
|
+
if (node.type === "PseudoClassSelector" && node.name === "root") hasSomeUniversal = true;
|
|
1068
|
+
if (node.type === "TypeSelector" && node.name === "*" && parentList.size === 1) hasSomeUniversal = true;
|
|
1069
|
+
};
|
|
1070
|
+
walk(first, walker);
|
|
1071
|
+
walk(second, walker);
|
|
1072
|
+
if (hasSomeUniversal) return true;
|
|
1073
|
+
return false;
|
|
1074
|
+
}
|
|
1075
|
+
function resolveAllCssVariables(node) {
|
|
1076
|
+
const variableDefinitions = /* @__PURE__ */ new Set();
|
|
1077
|
+
const variableUses = /* @__PURE__ */ new Set();
|
|
1078
|
+
const path = [];
|
|
1079
|
+
walk(node, {
|
|
1080
|
+
leave() {
|
|
1081
|
+
path.shift();
|
|
1082
|
+
},
|
|
1083
|
+
enter(node$1) {
|
|
1084
|
+
if (node$1.type === "Declaration") {
|
|
1085
|
+
const declaration = node$1;
|
|
1086
|
+
if (path.some((ancestor) => ancestor.type === "Atrule" && ancestor.name === "layer" && ancestor.prelude !== null && generate(ancestor.prelude).includes("properties"))) {
|
|
1087
|
+
path.unshift(node$1);
|
|
1088
|
+
return;
|
|
1089
|
+
}
|
|
1090
|
+
if (/--[\S]+/.test(declaration.property)) variableDefinitions.add({
|
|
1091
|
+
declaration,
|
|
1092
|
+
path: [...path],
|
|
1093
|
+
variableName: declaration.property,
|
|
1094
|
+
definition: generate(declaration.value)
|
|
1095
|
+
});
|
|
1096
|
+
else {
|
|
1097
|
+
function parseVariableUsesFrom(node$2) {
|
|
1098
|
+
walk(node$2, {
|
|
1099
|
+
visit: "Function",
|
|
1100
|
+
enter(funcNode) {
|
|
1101
|
+
if (funcNode.name === "var") {
|
|
1102
|
+
const children = funcNode.children.toArray();
|
|
1103
|
+
const name = generate(children[0]);
|
|
1104
|
+
const fallback = children[2] ? generate(children[2]) : void 0;
|
|
1105
|
+
variableUses.add({
|
|
1106
|
+
declaration,
|
|
1107
|
+
path: [...path],
|
|
1108
|
+
fallback,
|
|
1109
|
+
variableName: name,
|
|
1110
|
+
raw: generate(funcNode)
|
|
1111
|
+
});
|
|
1112
|
+
if (fallback?.includes("var(")) parseVariableUsesFrom(parse(fallback, { context: "value" }));
|
|
1113
|
+
}
|
|
1114
|
+
}
|
|
1115
|
+
});
|
|
1116
|
+
}
|
|
1117
|
+
parseVariableUsesFrom(declaration.value);
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
path.unshift(node$1);
|
|
1121
|
+
}
|
|
1122
|
+
});
|
|
1123
|
+
for (const use of variableUses) {
|
|
1124
|
+
let hasReplaced = false;
|
|
1125
|
+
for (const definition of variableDefinitions) {
|
|
1126
|
+
if (use.variableName !== definition.variableName) continue;
|
|
1127
|
+
if (use.path[0]?.type === "Block" && use.path[1]?.type === "Atrule" && use.path[2]?.type === "Block" && use.path[3]?.type === "Rule" && definition.path[0].type === "Block" && definition.path[1].type === "Rule" && doSelectorsIntersect(use.path[3].prelude, definition.path[1].prelude)) {
|
|
1128
|
+
use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
|
|
1129
|
+
hasReplaced = true;
|
|
1130
|
+
break;
|
|
1131
|
+
}
|
|
1132
|
+
if (use.path[0]?.type === "Block" && use.path[1]?.type === "Rule" && definition.path[0]?.type === "Block" && definition.path[1]?.type === "Rule" && doSelectorsIntersect(use.path[1].prelude, definition.path[1].prelude)) {
|
|
1133
|
+
use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
|
|
1134
|
+
hasReplaced = true;
|
|
1135
|
+
break;
|
|
1136
|
+
}
|
|
1137
|
+
}
|
|
1138
|
+
if (!hasReplaced && use.fallback) use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, use.fallback), { context: "value" });
|
|
1139
|
+
}
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
//#endregion
|
|
1143
|
+
//#region src/tailwind/utils/resolve-calc-expressions.ts
|
|
1144
|
+
/**
|
|
1145
|
+
* Intentionally only resolves `*` and `/` operations without dealing with parenthesis,
|
|
1146
|
+
* because this is the only thing required to run Tailwind v4.
|
|
1147
|
+
*/
|
|
1148
|
+
function resolveCalcExpressions(node) {
|
|
1149
|
+
walk(node, {
|
|
1150
|
+
visit: "Function",
|
|
1151
|
+
enter(func, funcListItem) {
|
|
1152
|
+
if (func.name === "calc") {
|
|
1153
|
+
func.children.forEach((child, item) => {
|
|
1154
|
+
const left = item.prev;
|
|
1155
|
+
const right = item.next;
|
|
1156
|
+
if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number" || left.data.type === "Percentage") && (right.data.type === "Dimension" || right.data.type === "Number" || right.data.type === "Percentage")) {
|
|
1157
|
+
if (child.value === "*" || child.value === "/") {
|
|
1158
|
+
const value = (() => {
|
|
1159
|
+
if (child.value === "*") return String(Number.parseFloat(left.data.value) * Number.parseFloat(right.data.value));
|
|
1160
|
+
if (right.data.value === "0") return "0";
|
|
1161
|
+
return String(Number.parseFloat(left.data.value) / Number.parseFloat(right.data.value));
|
|
1162
|
+
})();
|
|
1163
|
+
if (left.data.type === "Dimension" && right.data.type === "Number") {
|
|
1164
|
+
item.data = {
|
|
1165
|
+
type: "Dimension",
|
|
1166
|
+
unit: left.data.unit,
|
|
1167
|
+
value
|
|
1168
|
+
};
|
|
1169
|
+
func.children.remove(left);
|
|
1170
|
+
func.children.remove(right);
|
|
1171
|
+
} else if (left.data.type === "Number" && right.data.type === "Dimension") {
|
|
1172
|
+
item.data = {
|
|
1173
|
+
type: "Dimension",
|
|
1174
|
+
unit: right.data.unit,
|
|
1175
|
+
value
|
|
1176
|
+
};
|
|
1177
|
+
func.children.remove(left);
|
|
1178
|
+
func.children.remove(right);
|
|
1179
|
+
} else if (left.data.type === "Number" && right.data.type === "Number") {
|
|
1180
|
+
item.data = {
|
|
1181
|
+
type: "Number",
|
|
1182
|
+
value
|
|
1183
|
+
};
|
|
1184
|
+
func.children.remove(left);
|
|
1185
|
+
func.children.remove(right);
|
|
1186
|
+
} else if (left.data.type === "Dimension" && right.data.type === "Dimension" && left.data.unit === right.data.unit) {
|
|
1187
|
+
if (child.value === "/") item.data = {
|
|
1188
|
+
type: "Number",
|
|
1189
|
+
value
|
|
1190
|
+
};
|
|
1191
|
+
else item.data = {
|
|
1192
|
+
type: "Dimension",
|
|
1193
|
+
unit: left.data.unit,
|
|
1194
|
+
value
|
|
1195
|
+
};
|
|
1196
|
+
func.children.remove(left);
|
|
1197
|
+
func.children.remove(right);
|
|
1198
|
+
} else if (left.data.type === "Percentage" && right.data.type === "Number") {
|
|
1199
|
+
item.data = {
|
|
1200
|
+
type: "Percentage",
|
|
1201
|
+
value
|
|
1202
|
+
};
|
|
1203
|
+
func.children.remove(left);
|
|
1204
|
+
func.children.remove(right);
|
|
1205
|
+
} else if (left.data.type === "Number" && right.data.type === "Percentage") {
|
|
1206
|
+
item.data = {
|
|
1207
|
+
type: "Percentage",
|
|
1208
|
+
value
|
|
1209
|
+
};
|
|
1210
|
+
func.children.remove(left);
|
|
1211
|
+
func.children.remove(right);
|
|
1212
|
+
} else if (left.data.type === "Percentage" && right.data.type === "Percentage") {
|
|
1213
|
+
if (child.value === "/") item.data = {
|
|
1214
|
+
type: "Number",
|
|
1215
|
+
value
|
|
1216
|
+
};
|
|
1217
|
+
else item.data = {
|
|
1218
|
+
type: "Percentage",
|
|
1219
|
+
value
|
|
1220
|
+
};
|
|
1221
|
+
func.children.remove(left);
|
|
1222
|
+
func.children.remove(right);
|
|
1223
|
+
}
|
|
1224
|
+
}
|
|
1225
|
+
}
|
|
1226
|
+
});
|
|
1227
|
+
if (func.children.size === 1 && func.children.first) funcListItem.data = func.children.first;
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
});
|
|
1231
|
+
}
|
|
1232
|
+
|
|
1233
|
+
//#endregion
|
|
1234
|
+
//#region src/tailwind/utils/sanitize-declarations.ts
|
|
1235
|
+
function rgbNode(r, g, b, alpha) {
|
|
1236
|
+
const children = new List();
|
|
1237
|
+
children.appendData({
|
|
1238
|
+
type: "Number",
|
|
1239
|
+
value: r.toFixed(0)
|
|
1240
|
+
});
|
|
1241
|
+
children.appendData({
|
|
1242
|
+
type: "Operator",
|
|
1243
|
+
value: ","
|
|
1244
|
+
});
|
|
1245
|
+
children.appendData({
|
|
1246
|
+
type: "Number",
|
|
1247
|
+
value: g.toFixed(0)
|
|
1248
|
+
});
|
|
1249
|
+
children.appendData({
|
|
1250
|
+
type: "Operator",
|
|
1251
|
+
value: ","
|
|
1252
|
+
});
|
|
1253
|
+
children.appendData({
|
|
1254
|
+
type: "Number",
|
|
1255
|
+
value: b.toFixed(0)
|
|
1256
|
+
});
|
|
1257
|
+
if (alpha !== 1 && alpha !== void 0) {
|
|
1258
|
+
children.appendData({
|
|
1259
|
+
type: "Operator",
|
|
1260
|
+
value: ","
|
|
1261
|
+
});
|
|
1262
|
+
children.appendData({
|
|
1263
|
+
type: "Number",
|
|
1264
|
+
value: alpha.toString()
|
|
1265
|
+
});
|
|
1266
|
+
}
|
|
1267
|
+
return {
|
|
1268
|
+
type: "Function",
|
|
1269
|
+
name: "rgb",
|
|
1270
|
+
children
|
|
1271
|
+
};
|
|
1272
|
+
}
|
|
1273
|
+
const LAB_TO_LMS = {
|
|
1274
|
+
l: [.3963377773761749, .2158037573099136],
|
|
1275
|
+
m: [-.1055613458156586, -.0638541728258133],
|
|
1276
|
+
s: [-.0894841775298119, -1.2914855480194092]
|
|
1277
|
+
};
|
|
1278
|
+
const LSM_TO_RGB = {
|
|
1279
|
+
r: [
|
|
1280
|
+
4.076741636075958,
|
|
1281
|
+
-3.307711539258063,
|
|
1282
|
+
.2309699031821043
|
|
1283
|
+
],
|
|
1284
|
+
g: [
|
|
1285
|
+
-1.2684379732850315,
|
|
1286
|
+
2.609757349287688,
|
|
1287
|
+
-.341319376002657
|
|
1288
|
+
],
|
|
1289
|
+
b: [
|
|
1290
|
+
-.0041960761386756,
|
|
1291
|
+
-.7034186179359362,
|
|
1292
|
+
1.7076146940746117
|
|
1293
|
+
]
|
|
1294
|
+
};
|
|
1295
|
+
function lrgbToRgb(input) {
|
|
1296
|
+
const absoluteNumber = Math.abs(input);
|
|
1297
|
+
const sign = input < 0 ? -1 : 1;
|
|
1298
|
+
if (absoluteNumber > .0031308) return sign * (absoluteNumber ** (1 / 2.4) * 1.055 - .055);
|
|
1299
|
+
return input * 12.92;
|
|
1300
|
+
}
|
|
1301
|
+
function clamp(value, min, max) {
|
|
1302
|
+
return Math.min(Math.max(value, min), max);
|
|
1303
|
+
}
|
|
1304
|
+
function oklchToOklab(oklch) {
|
|
1305
|
+
return {
|
|
1306
|
+
l: oklch.l,
|
|
1307
|
+
a: oklch.c * Math.cos(oklch.h / 180 * Math.PI),
|
|
1308
|
+
b: oklch.c * Math.sin(oklch.h / 180 * Math.PI)
|
|
1309
|
+
};
|
|
1310
|
+
}
|
|
1311
|
+
/** Convert oklch to RGB */
|
|
1312
|
+
function oklchToRgb(oklch) {
|
|
1313
|
+
const oklab = oklchToOklab(oklch);
|
|
1314
|
+
const l = (oklab.l + LAB_TO_LMS.l[0] * oklab.a + LAB_TO_LMS.l[1] * oklab.b) ** 3;
|
|
1315
|
+
const m = (oklab.l + LAB_TO_LMS.m[0] * oklab.a + LAB_TO_LMS.m[1] * oklab.b) ** 3;
|
|
1316
|
+
const s = (oklab.l + LAB_TO_LMS.s[0] * oklab.a + LAB_TO_LMS.s[1] * oklab.b) ** 3;
|
|
1317
|
+
const r = 255 * lrgbToRgb(LSM_TO_RGB.r[0] * l + LSM_TO_RGB.r[1] * m + LSM_TO_RGB.r[2] * s);
|
|
1318
|
+
const g = 255 * lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
|
|
1319
|
+
const b = 255 * lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
|
|
1320
|
+
return {
|
|
1321
|
+
r: clamp(r, 0, 255),
|
|
1322
|
+
g: clamp(g, 0, 255),
|
|
1323
|
+
b: clamp(b, 0, 255)
|
|
1324
|
+
};
|
|
1325
|
+
}
|
|
1326
|
+
function separateShorthandDeclaration(shorthandToReplace, [start, end]) {
|
|
1327
|
+
shorthandToReplace.property = start;
|
|
1328
|
+
const values = shorthandToReplace.value.type === "Value" ? shorthandToReplace.value.children.toArray().filter((child) => child.type === "Dimension" || child.type === "Number" || child.type === "Percentage") : [shorthandToReplace.value];
|
|
1329
|
+
let endValue = shorthandToReplace.value;
|
|
1330
|
+
if (values.length === 2) {
|
|
1331
|
+
endValue = {
|
|
1332
|
+
type: "Value",
|
|
1333
|
+
children: new List().fromArray([values[1]])
|
|
1334
|
+
};
|
|
1335
|
+
shorthandToReplace.value = {
|
|
1336
|
+
type: "Value",
|
|
1337
|
+
children: new List().fromArray([values[0]])
|
|
1338
|
+
};
|
|
1339
|
+
}
|
|
1340
|
+
return {
|
|
1341
|
+
type: "Declaration",
|
|
1342
|
+
property: end,
|
|
1343
|
+
value: endValue,
|
|
1344
|
+
important: shorthandToReplace.important
|
|
1345
|
+
};
|
|
1346
|
+
}
|
|
1347
|
+
/**
|
|
1348
|
+
* Does all the necessary transformations on a per-declaration basis to have the best email client
|
|
1349
|
+
* support possible:
|
|
1350
|
+
* - convert `rgb` with space-based syntax into comma-based
|
|
1351
|
+
* - convert `oklch` values into `rgb`
|
|
1352
|
+
* - convert hex values into `rgb`
|
|
1353
|
+
* - convert `color-mix(in oklab, rgb(...) opacity, transparent)` into `rgb` with alpha
|
|
1354
|
+
* - convert `padding-inline` into `padding-left` and `padding-right`
|
|
1355
|
+
* - convert `padding-block` into `padding-top` and `padding-bottom`
|
|
1356
|
+
* - convert `margin-inline` into `margin-left` and `margin-right`
|
|
1357
|
+
* - convert `margin-block` into `margin-top` and `margin-bottom`
|
|
1358
|
+
* - convert `border-radius: calc(infinity * 1px)` into `border-radius: 9999px`
|
|
1359
|
+
*/
|
|
1360
|
+
function sanitizeDeclarations(nodeContainingDeclarations) {
|
|
1361
|
+
walk(nodeContainingDeclarations, {
|
|
1362
|
+
visit: "Declaration",
|
|
1363
|
+
enter(declaration, item, list) {
|
|
1364
|
+
if (declaration.value.type === "Raw") declaration.value = parse(declaration.value.value, { context: "value" });
|
|
1365
|
+
if (/border-radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(generate(declaration))) declaration.value = parse("9999px", { context: "value" });
|
|
1366
|
+
walk(declaration, {
|
|
1367
|
+
visit: "Function",
|
|
1368
|
+
enter(func, funcParentListItem) {
|
|
1369
|
+
const children = func.children.toArray();
|
|
1370
|
+
if (func.name === "oklch") {
|
|
1371
|
+
let l;
|
|
1372
|
+
let c;
|
|
1373
|
+
let h;
|
|
1374
|
+
let a;
|
|
1375
|
+
for (const child of children) {
|
|
1376
|
+
if (child.type === "Number") {
|
|
1377
|
+
if (l === void 0) {
|
|
1378
|
+
l = Number.parseFloat(child.value);
|
|
1379
|
+
continue;
|
|
1380
|
+
}
|
|
1381
|
+
if (c === void 0) {
|
|
1382
|
+
c = Number.parseFloat(child.value);
|
|
1383
|
+
continue;
|
|
1384
|
+
}
|
|
1385
|
+
if (h === void 0) {
|
|
1386
|
+
h = Number.parseFloat(child.value);
|
|
1387
|
+
continue;
|
|
1388
|
+
}
|
|
1389
|
+
if (a === void 0) {
|
|
1390
|
+
a = Number.parseFloat(child.value);
|
|
1391
|
+
continue;
|
|
1392
|
+
}
|
|
1393
|
+
}
|
|
1394
|
+
if (child.type === "Dimension" && child.unit === "deg") {
|
|
1395
|
+
if (h === void 0) {
|
|
1396
|
+
h = Number.parseFloat(child.value);
|
|
1397
|
+
continue;
|
|
1398
|
+
}
|
|
1399
|
+
}
|
|
1400
|
+
if (child.type === "Percentage") {
|
|
1401
|
+
if (l === void 0) {
|
|
1402
|
+
l = Number.parseFloat(child.value) / 100;
|
|
1403
|
+
continue;
|
|
1404
|
+
}
|
|
1405
|
+
if (a === void 0) a = Number.parseFloat(child.value) / 100;
|
|
1406
|
+
}
|
|
1407
|
+
}
|
|
1408
|
+
if (l === void 0 || c === void 0 || h === void 0) throw new Error("Could not determine the parameters of an oklch() function.", { cause: declaration });
|
|
1409
|
+
const rgb = oklchToRgb({
|
|
1410
|
+
l,
|
|
1411
|
+
c,
|
|
1412
|
+
h
|
|
1413
|
+
});
|
|
1414
|
+
funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
|
|
1415
|
+
}
|
|
1416
|
+
if (func.name === "rgb") {
|
|
1417
|
+
let r;
|
|
1418
|
+
let g;
|
|
1419
|
+
let b;
|
|
1420
|
+
let a;
|
|
1421
|
+
for (const child of children) {
|
|
1422
|
+
if (child.type === "Number") {
|
|
1423
|
+
if (r === void 0) {
|
|
1424
|
+
r = Number.parseFloat(child.value);
|
|
1425
|
+
continue;
|
|
1426
|
+
}
|
|
1427
|
+
if (g === void 0) {
|
|
1428
|
+
g = Number.parseFloat(child.value);
|
|
1429
|
+
continue;
|
|
1430
|
+
}
|
|
1431
|
+
if (b === void 0) {
|
|
1432
|
+
b = Number.parseFloat(child.value);
|
|
1433
|
+
continue;
|
|
1434
|
+
}
|
|
1435
|
+
if (a === void 0) {
|
|
1436
|
+
a = Number.parseFloat(child.value);
|
|
1437
|
+
continue;
|
|
1438
|
+
}
|
|
1439
|
+
}
|
|
1440
|
+
if (child.type === "Percentage") {
|
|
1441
|
+
if (r === void 0) {
|
|
1442
|
+
r = Number.parseFloat(child.value) * 255 / 100;
|
|
1443
|
+
continue;
|
|
1444
|
+
}
|
|
1445
|
+
if (g === void 0) {
|
|
1446
|
+
g = Number.parseFloat(child.value) * 255 / 100;
|
|
1447
|
+
continue;
|
|
1448
|
+
}
|
|
1449
|
+
if (b === void 0) {
|
|
1450
|
+
b = Number.parseFloat(child.value) * 255 / 100;
|
|
1451
|
+
continue;
|
|
1452
|
+
}
|
|
1453
|
+
if (a === void 0) a = Number.parseFloat(child.value) / 100;
|
|
1454
|
+
}
|
|
1455
|
+
}
|
|
1456
|
+
if (r === void 0 || g === void 0 || b === void 0) throw new Error("Could not determine the parameters of an rgb() function.", { cause: declaration });
|
|
1457
|
+
if (a === void 0 || a === 1) funcParentListItem.data = rgbNode(r, g, b);
|
|
1458
|
+
else funcParentListItem.data = rgbNode(r, g, b, a);
|
|
1459
|
+
}
|
|
1460
|
+
}
|
|
1461
|
+
});
|
|
1462
|
+
walk(declaration, {
|
|
1463
|
+
visit: "Hash",
|
|
1464
|
+
enter(hash, hashParentListItem) {
|
|
1465
|
+
const hex = hash.value.trim();
|
|
1466
|
+
if (hex.length === 3) {
|
|
1467
|
+
hashParentListItem.data = rgbNode(Number.parseInt(hex.charAt(0) + hex.charAt(0), 16), Number.parseInt(hex.charAt(1) + hex.charAt(1), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16));
|
|
1468
|
+
return;
|
|
1469
|
+
}
|
|
1470
|
+
if (hex.length === 4) {
|
|
1471
|
+
hashParentListItem.data = rgbNode(Number.parseInt(hex.charAt(0) + hex.charAt(0), 16), Number.parseInt(hex.charAt(1) + hex.charAt(1), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16), Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255);
|
|
1472
|
+
return;
|
|
1473
|
+
}
|
|
1474
|
+
if (hex.length === 5) {
|
|
1475
|
+
hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16), Number.parseInt(hex.charAt(3) + hex.charAt(3), 16), Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255);
|
|
1476
|
+
return;
|
|
1477
|
+
}
|
|
1478
|
+
if (hex.length === 6) {
|
|
1479
|
+
hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16));
|
|
1480
|
+
return;
|
|
1481
|
+
}
|
|
1482
|
+
if (hex.length === 7) {
|
|
1483
|
+
hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16), Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255);
|
|
1484
|
+
return;
|
|
1485
|
+
}
|
|
1486
|
+
hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16), Number.parseInt(hex.slice(6, 8), 16) / 255);
|
|
1487
|
+
}
|
|
1488
|
+
});
|
|
1489
|
+
walk(declaration, {
|
|
1490
|
+
visit: "Function",
|
|
1491
|
+
enter(func, parentListItem) {
|
|
1492
|
+
if (func.name === "color-mix") {
|
|
1493
|
+
const children = func.children.toArray();
|
|
1494
|
+
const color = children[3];
|
|
1495
|
+
const opacity = children[4];
|
|
1496
|
+
if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && color?.type === "Function" && color?.name === "rgb" && opacity) {
|
|
1497
|
+
color.children.appendData({
|
|
1498
|
+
type: "Operator",
|
|
1499
|
+
value: ","
|
|
1500
|
+
});
|
|
1501
|
+
color.children.appendData(opacity);
|
|
1502
|
+
parentListItem.data = color;
|
|
1503
|
+
}
|
|
1504
|
+
}
|
|
1505
|
+
}
|
|
1506
|
+
});
|
|
1507
|
+
if (declaration.property === "padding-inline") {
|
|
1508
|
+
const paddingRight = separateShorthandDeclaration(declaration, ["padding-left", "padding-right"]);
|
|
1509
|
+
list.insertData(paddingRight, item);
|
|
1510
|
+
}
|
|
1511
|
+
if (declaration.property === "padding-block") {
|
|
1512
|
+
const paddingBottom = separateShorthandDeclaration(declaration, ["padding-top", "padding-bottom"]);
|
|
1513
|
+
list.insertData(paddingBottom, item);
|
|
1514
|
+
}
|
|
1515
|
+
if (declaration.property === "margin-inline") {
|
|
1516
|
+
const marginRight = separateShorthandDeclaration(declaration, ["margin-left", "margin-right"]);
|
|
1517
|
+
list.insertData(marginRight, item);
|
|
1518
|
+
}
|
|
1519
|
+
if (declaration.property === "margin-block") {
|
|
1520
|
+
const marginBottom = separateShorthandDeclaration(declaration, ["margin-top", "margin-bottom"]);
|
|
1521
|
+
list.insertData(marginBottom, item);
|
|
1522
|
+
}
|
|
1523
|
+
}
|
|
1524
|
+
});
|
|
1525
|
+
}
|
|
1526
|
+
|
|
1527
|
+
//#endregion
|
|
1528
|
+
//#region src/tailwind/sanitize-stylesheet.ts
|
|
1529
|
+
function sanitizeStyleSheet(styleSheet) {
|
|
1530
|
+
resolveAllCssVariables(styleSheet);
|
|
1531
|
+
resolveCalcExpressions(styleSheet);
|
|
1532
|
+
sanitizeDeclarations(styleSheet);
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
//#endregion
|
|
1536
|
+
//#region src/tailwind/use-suspended-promise.ts
|
|
1537
|
+
const promiseStates = /* @__PURE__ */ new Map();
|
|
1538
|
+
function useSuspensedPromise(promiseFn, key) {
|
|
1539
|
+
const previousState = promiseStates.get(key);
|
|
1540
|
+
if (previousState) {
|
|
1541
|
+
if ("error" in previousState) throw previousState.error;
|
|
1542
|
+
if ("result" in previousState) return previousState.result;
|
|
1543
|
+
throw previousState.promise;
|
|
1544
|
+
}
|
|
1545
|
+
const state = { promise: promiseFn().then((result) => state.result = result).catch((error) => state.error = error) };
|
|
1546
|
+
promiseStates.set(key, state);
|
|
1547
|
+
throw state.promise;
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
//#endregion
|
|
1551
|
+
//#region src/tailwind/utils/sanitize-class-name.ts
|
|
1552
|
+
const digitToNameMap = {
|
|
1553
|
+
"0": "zero",
|
|
1554
|
+
"1": "one",
|
|
1555
|
+
"2": "two",
|
|
1556
|
+
"3": "three",
|
|
1557
|
+
"4": "four",
|
|
1558
|
+
"5": "five",
|
|
1559
|
+
"6": "six",
|
|
1560
|
+
"7": "seven",
|
|
1561
|
+
"8": "eight",
|
|
1562
|
+
"9": "nine"
|
|
1563
|
+
};
|
|
1564
|
+
function sanitizeClassName(className) {
|
|
1565
|
+
return className.replaceAll("+", "plus").replaceAll("[", "").replaceAll("%", "pc").replaceAll("]", "").replaceAll("(", "").replaceAll(")", "").replaceAll("!", "imprtnt").replaceAll(">", "gt").replaceAll("<", "lt").replaceAll("=", "eq").replace(/^[0-9]/, (digit) => {
|
|
1566
|
+
return digitToNameMap[digit];
|
|
1567
|
+
}).replace(/[^a-zA-Z0-9\-_]/g, "_");
|
|
1568
|
+
}
|
|
1569
|
+
|
|
1570
|
+
//#endregion
|
|
1571
|
+
//#region src/tailwind/utils/sanitize-non-inlinable-rules.ts
|
|
1572
|
+
/**
|
|
1573
|
+
* Ensures the best email client support for non-inlinable rules:
|
|
1574
|
+
* 1. Converts all declarations in non-inlinable rules into !important
|
|
1575
|
+
* 2. Sanitizes class selectors of all non-inlinable rules
|
|
1576
|
+
*/
|
|
1577
|
+
function sanitizeNonInlinableRules(node) {
|
|
1578
|
+
walk(node, {
|
|
1579
|
+
visit: "Rule",
|
|
1580
|
+
enter(rule) {
|
|
1581
|
+
if (!isRuleInlinable(rule)) {
|
|
1582
|
+
walk(rule.prelude, (node$1) => {
|
|
1583
|
+
if (node$1.type === "ClassSelector") node$1.name = sanitizeClassName(string.decode(node$1.name));
|
|
1584
|
+
});
|
|
1585
|
+
walk(rule, {
|
|
1586
|
+
visit: "Declaration",
|
|
1587
|
+
enter(declaration) {
|
|
1588
|
+
declaration.important = true;
|
|
1589
|
+
}
|
|
1590
|
+
});
|
|
1591
|
+
}
|
|
1592
|
+
}
|
|
1593
|
+
});
|
|
1594
|
+
}
|
|
1595
|
+
|
|
1596
|
+
//#endregion
|
|
1597
|
+
//#region src/tailwind/is-component.ts
|
|
1598
|
+
/**
|
|
1599
|
+
* Components that render standard HTML elements and should be treated as
|
|
1600
|
+
* elements (not traversed through) by the Tailwind tree mapper.
|
|
1601
|
+
*/
|
|
1602
|
+
const componentsToTreatAsElements = [
|
|
1603
|
+
Body,
|
|
1604
|
+
Button,
|
|
1605
|
+
Container,
|
|
1606
|
+
Heading,
|
|
1607
|
+
Hr,
|
|
1608
|
+
Img,
|
|
1609
|
+
Link,
|
|
1610
|
+
Preview,
|
|
1611
|
+
Text
|
|
1612
|
+
];
|
|
1613
|
+
const isComponent = (element) => {
|
|
1614
|
+
return (typeof element.type === "function" || element.type.render !== void 0) && !componentsToTreatAsElements.includes(element.type);
|
|
1615
|
+
};
|
|
1616
|
+
|
|
1617
|
+
//#endregion
|
|
1618
|
+
//#region src/tailwind/map-react-tree.ts
|
|
1619
|
+
/**
|
|
1620
|
+
* Deep maps a React tree from a node, even through its components.
|
|
1621
|
+
* For all the components it finds, it renders them by directly calling them.
|
|
1622
|
+
*
|
|
1623
|
+
* @param process - Callback called every time a new element has been reached.
|
|
1624
|
+
* For components, this is called both before rendering (on props.children)
|
|
1625
|
+
* and after rendering.
|
|
1626
|
+
*/
|
|
1627
|
+
function mapReactTree(value, process) {
|
|
1628
|
+
const mapped = React.Children.map(value, (node) => {
|
|
1629
|
+
if (React.isValidElement(node)) {
|
|
1630
|
+
const newProps = { ...node.props };
|
|
1631
|
+
if (node.props.children && !isComponent(node)) newProps.children = mapReactTree(node.props.children, process);
|
|
1632
|
+
const processed = process(React.cloneElement(node, newProps, newProps.children));
|
|
1633
|
+
if (React.isValidElement(processed) && isComponent(processed)) return mapReactTree((typeof processed.type === "object" ? processed.type.render : processed.type)(processed.props), process);
|
|
1634
|
+
return processed;
|
|
1635
|
+
}
|
|
1636
|
+
return process(node);
|
|
1637
|
+
});
|
|
1638
|
+
return mapped && mapped.length === 1 ? mapped[0] : mapped;
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
//#endregion
|
|
1642
|
+
//#region src/tailwind/clone-element-with-inlined-styles.ts
|
|
1643
|
+
function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRules, customProperties) {
|
|
1644
|
+
const propsToOverwrite = {};
|
|
1645
|
+
if (element.props.className && !isComponent(element)) {
|
|
1646
|
+
const classes = element.props.className.trim().split(/\s+/);
|
|
1647
|
+
const residualClasses = [];
|
|
1648
|
+
const rules = [];
|
|
1649
|
+
for (const className of classes) {
|
|
1650
|
+
const rule = inlinableRules.get(className);
|
|
1651
|
+
if (rule) rules.push(rule);
|
|
1652
|
+
if (nonInlinableRules.has(className)) residualClasses.push(className);
|
|
1653
|
+
else if (!rule) residualClasses.push(className);
|
|
1654
|
+
}
|
|
1655
|
+
propsToOverwrite.style = {
|
|
1656
|
+
...makeInlineStylesFor(rules, customProperties),
|
|
1657
|
+
...element.props.style
|
|
1658
|
+
};
|
|
1659
|
+
if (residualClasses.length > 0) propsToOverwrite.className = residualClasses.map((className) => {
|
|
1660
|
+
if (nonInlinableRules.has(className)) return sanitizeClassName(className);
|
|
1661
|
+
return className;
|
|
1662
|
+
}).join(" ");
|
|
1663
|
+
else propsToOverwrite.className = void 0;
|
|
1664
|
+
}
|
|
1665
|
+
const newProps = {
|
|
1666
|
+
...element.props,
|
|
1667
|
+
...propsToOverwrite
|
|
1668
|
+
};
|
|
1669
|
+
return React.cloneElement(element, newProps, newProps.children);
|
|
1670
|
+
}
|
|
1671
|
+
|
|
1672
|
+
//#endregion
|
|
1673
|
+
//#region src/tailwind/css/index.ts
|
|
1674
|
+
const css$3 = `
|
|
1675
|
+
@layer theme, base, components, utilities;
|
|
1676
|
+
|
|
1677
|
+
@layer theme {
|
|
1678
|
+
@theme default {
|
|
1679
|
+
--font-sans:
|
|
1680
|
+
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
1681
|
+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
1682
|
+
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
1683
|
+
--font-mono:
|
|
1684
|
+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
1685
|
+
"Courier New", monospace;
|
|
1686
|
+
|
|
1687
|
+
--color-red-50: oklch(97.1% 0.013 17.38);
|
|
1688
|
+
--color-red-100: oklch(93.6% 0.032 17.717);
|
|
1689
|
+
--color-red-200: oklch(88.5% 0.062 18.334);
|
|
1690
|
+
--color-red-300: oklch(80.8% 0.114 19.571);
|
|
1691
|
+
--color-red-400: oklch(70.4% 0.191 22.216);
|
|
1692
|
+
--color-red-500: oklch(63.7% 0.237 25.331);
|
|
1693
|
+
--color-red-600: oklch(57.7% 0.245 27.325);
|
|
1694
|
+
--color-red-700: oklch(50.5% 0.213 27.518);
|
|
1695
|
+
--color-red-800: oklch(44.4% 0.177 26.899);
|
|
1696
|
+
--color-red-900: oklch(39.6% 0.141 25.723);
|
|
1697
|
+
--color-red-950: oklch(25.8% 0.092 26.042);
|
|
1698
|
+
|
|
1699
|
+
--color-orange-50: oklch(98% 0.016 73.684);
|
|
1700
|
+
--color-orange-100: oklch(95.4% 0.038 75.164);
|
|
1701
|
+
--color-orange-200: oklch(90.1% 0.076 70.697);
|
|
1702
|
+
--color-orange-300: oklch(83.7% 0.128 66.29);
|
|
1703
|
+
--color-orange-400: oklch(75% 0.183 55.934);
|
|
1704
|
+
--color-orange-500: oklch(70.5% 0.213 47.604);
|
|
1705
|
+
--color-orange-600: oklch(64.6% 0.222 41.116);
|
|
1706
|
+
--color-orange-700: oklch(55.3% 0.195 38.402);
|
|
1707
|
+
--color-orange-800: oklch(47% 0.157 37.304);
|
|
1708
|
+
--color-orange-900: oklch(40.8% 0.123 38.172);
|
|
1709
|
+
--color-orange-950: oklch(26.6% 0.079 36.259);
|
|
1710
|
+
|
|
1711
|
+
--color-amber-50: oklch(98.7% 0.022 95.277);
|
|
1712
|
+
--color-amber-100: oklch(96.2% 0.059 95.617);
|
|
1713
|
+
--color-amber-200: oklch(92.4% 0.12 95.746);
|
|
1714
|
+
--color-amber-300: oklch(87.9% 0.169 91.605);
|
|
1715
|
+
--color-amber-400: oklch(82.8% 0.189 84.429);
|
|
1716
|
+
--color-amber-500: oklch(76.9% 0.188 70.08);
|
|
1717
|
+
--color-amber-600: oklch(66.6% 0.179 58.318);
|
|
1718
|
+
--color-amber-700: oklch(55.5% 0.163 48.998);
|
|
1719
|
+
--color-amber-800: oklch(47.3% 0.137 46.201);
|
|
1720
|
+
--color-amber-900: oklch(41.4% 0.112 45.904);
|
|
1721
|
+
--color-amber-950: oklch(27.9% 0.077 45.635);
|
|
1722
|
+
|
|
1723
|
+
--color-yellow-50: oklch(98.7% 0.026 102.212);
|
|
1724
|
+
--color-yellow-100: oklch(97.3% 0.071 103.193);
|
|
1725
|
+
--color-yellow-200: oklch(94.5% 0.129 101.54);
|
|
1726
|
+
--color-yellow-300: oklch(90.5% 0.182 98.111);
|
|
1727
|
+
--color-yellow-400: oklch(85.2% 0.199 91.936);
|
|
1728
|
+
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
|
1729
|
+
--color-yellow-600: oklch(68.1% 0.162 75.834);
|
|
1730
|
+
--color-yellow-700: oklch(55.4% 0.135 66.442);
|
|
1731
|
+
--color-yellow-800: oklch(47.6% 0.114 61.907);
|
|
1732
|
+
--color-yellow-900: oklch(42.1% 0.095 57.708);
|
|
1733
|
+
--color-yellow-950: oklch(28.6% 0.066 53.813);
|
|
1734
|
+
|
|
1735
|
+
--color-lime-50: oklch(98.6% 0.031 120.757);
|
|
1736
|
+
--color-lime-100: oklch(96.7% 0.067 122.328);
|
|
1737
|
+
--color-lime-200: oklch(93.8% 0.127 124.321);
|
|
1738
|
+
--color-lime-300: oklch(89.7% 0.196 126.665);
|
|
1739
|
+
--color-lime-400: oklch(84.1% 0.238 128.85);
|
|
1740
|
+
--color-lime-500: oklch(76.8% 0.233 130.85);
|
|
1741
|
+
--color-lime-600: oklch(64.8% 0.2 131.684);
|
|
1742
|
+
--color-lime-700: oklch(53.2% 0.157 131.589);
|
|
1743
|
+
--color-lime-800: oklch(45.3% 0.124 130.933);
|
|
1744
|
+
--color-lime-900: oklch(40.5% 0.101 131.063);
|
|
1745
|
+
--color-lime-950: oklch(27.4% 0.072 132.109);
|
|
1746
|
+
|
|
1747
|
+
--color-green-50: oklch(98.2% 0.018 155.826);
|
|
1748
|
+
--color-green-100: oklch(96.2% 0.044 156.743);
|
|
1749
|
+
--color-green-200: oklch(92.5% 0.084 155.995);
|
|
1750
|
+
--color-green-300: oklch(87.1% 0.15 154.449);
|
|
1751
|
+
--color-green-400: oklch(79.2% 0.209 151.711);
|
|
1752
|
+
--color-green-500: oklch(72.3% 0.219 149.579);
|
|
1753
|
+
--color-green-600: oklch(62.7% 0.194 149.214);
|
|
1754
|
+
--color-green-700: oklch(52.7% 0.154 150.069);
|
|
1755
|
+
--color-green-800: oklch(44.8% 0.119 151.328);
|
|
1756
|
+
--color-green-900: oklch(39.3% 0.095 152.535);
|
|
1757
|
+
--color-green-950: oklch(26.6% 0.065 152.934);
|
|
1758
|
+
|
|
1759
|
+
--color-emerald-50: oklch(97.9% 0.021 166.113);
|
|
1760
|
+
--color-emerald-100: oklch(95% 0.052 163.051);
|
|
1761
|
+
--color-emerald-200: oklch(90.5% 0.093 164.15);
|
|
1762
|
+
--color-emerald-300: oklch(84.5% 0.143 164.978);
|
|
1763
|
+
--color-emerald-400: oklch(76.5% 0.177 163.223);
|
|
1764
|
+
--color-emerald-500: oklch(69.6% 0.17 162.48);
|
|
1765
|
+
--color-emerald-600: oklch(59.6% 0.145 163.225);
|
|
1766
|
+
--color-emerald-700: oklch(50.8% 0.118 165.612);
|
|
1767
|
+
--color-emerald-800: oklch(43.2% 0.095 166.913);
|
|
1768
|
+
--color-emerald-900: oklch(37.8% 0.077 168.94);
|
|
1769
|
+
--color-emerald-950: oklch(26.2% 0.051 172.552);
|
|
1770
|
+
|
|
1771
|
+
--color-teal-50: oklch(98.4% 0.014 180.72);
|
|
1772
|
+
--color-teal-100: oklch(95.3% 0.051 180.801);
|
|
1773
|
+
--color-teal-200: oklch(91% 0.096 180.426);
|
|
1774
|
+
--color-teal-300: oklch(85.5% 0.138 181.071);
|
|
1775
|
+
--color-teal-400: oklch(77.7% 0.152 181.912);
|
|
1776
|
+
--color-teal-500: oklch(70.4% 0.14 182.503);
|
|
1777
|
+
--color-teal-600: oklch(60% 0.118 184.704);
|
|
1778
|
+
--color-teal-700: oklch(51.1% 0.096 186.391);
|
|
1779
|
+
--color-teal-800: oklch(43.7% 0.078 188.216);
|
|
1780
|
+
--color-teal-900: oklch(38.6% 0.063 188.416);
|
|
1781
|
+
--color-teal-950: oklch(27.7% 0.046 192.524);
|
|
1782
|
+
|
|
1783
|
+
--color-cyan-50: oklch(98.4% 0.019 200.873);
|
|
1784
|
+
--color-cyan-100: oklch(95.6% 0.045 203.388);
|
|
1785
|
+
--color-cyan-200: oklch(91.7% 0.08 205.041);
|
|
1786
|
+
--color-cyan-300: oklch(86.5% 0.127 207.078);
|
|
1787
|
+
--color-cyan-400: oklch(78.9% 0.154 211.53);
|
|
1788
|
+
--color-cyan-500: oklch(71.5% 0.143 215.221);
|
|
1789
|
+
--color-cyan-600: oklch(60.9% 0.126 221.723);
|
|
1790
|
+
--color-cyan-700: oklch(52% 0.105 223.128);
|
|
1791
|
+
--color-cyan-800: oklch(45% 0.085 224.283);
|
|
1792
|
+
--color-cyan-900: oklch(39.8% 0.07 227.392);
|
|
1793
|
+
--color-cyan-950: oklch(30.2% 0.056 229.695);
|
|
1794
|
+
|
|
1795
|
+
--color-sky-50: oklch(97.7% 0.013 236.62);
|
|
1796
|
+
--color-sky-100: oklch(95.1% 0.026 236.824);
|
|
1797
|
+
--color-sky-200: oklch(90.1% 0.058 230.902);
|
|
1798
|
+
--color-sky-300: oklch(82.8% 0.111 230.318);
|
|
1799
|
+
--color-sky-400: oklch(74.6% 0.16 232.661);
|
|
1800
|
+
--color-sky-500: oklch(68.5% 0.169 237.323);
|
|
1801
|
+
--color-sky-600: oklch(58.8% 0.158 241.966);
|
|
1802
|
+
--color-sky-700: oklch(50% 0.134 242.749);
|
|
1803
|
+
--color-sky-800: oklch(44.3% 0.11 240.79);
|
|
1804
|
+
--color-sky-900: oklch(39.1% 0.09 240.876);
|
|
1805
|
+
--color-sky-950: oklch(29.3% 0.066 243.157);
|
|
1806
|
+
|
|
1807
|
+
--color-blue-50: oklch(97% 0.014 254.604);
|
|
1808
|
+
--color-blue-100: oklch(93.2% 0.032 255.585);
|
|
1809
|
+
--color-blue-200: oklch(88.2% 0.059 254.128);
|
|
1810
|
+
--color-blue-300: oklch(80.9% 0.105 251.813);
|
|
1811
|
+
--color-blue-400: oklch(70.7% 0.165 254.624);
|
|
1812
|
+
--color-blue-500: oklch(62.3% 0.214 259.815);
|
|
1813
|
+
--color-blue-600: oklch(54.6% 0.245 262.881);
|
|
1814
|
+
--color-blue-700: oklch(48.8% 0.243 264.376);
|
|
1815
|
+
--color-blue-800: oklch(42.4% 0.199 265.638);
|
|
1816
|
+
--color-blue-900: oklch(37.9% 0.146 265.522);
|
|
1817
|
+
--color-blue-950: oklch(28.2% 0.091 267.935);
|
|
1818
|
+
|
|
1819
|
+
--color-indigo-50: oklch(96.2% 0.018 272.314);
|
|
1820
|
+
--color-indigo-100: oklch(93% 0.034 272.788);
|
|
1821
|
+
--color-indigo-200: oklch(87% 0.065 274.039);
|
|
1822
|
+
--color-indigo-300: oklch(78.5% 0.115 274.713);
|
|
1823
|
+
--color-indigo-400: oklch(67.3% 0.182 276.935);
|
|
1824
|
+
--color-indigo-500: oklch(58.5% 0.233 277.117);
|
|
1825
|
+
--color-indigo-600: oklch(51.1% 0.262 276.966);
|
|
1826
|
+
--color-indigo-700: oklch(45.7% 0.24 277.023);
|
|
1827
|
+
--color-indigo-800: oklch(39.8% 0.195 277.366);
|
|
1828
|
+
--color-indigo-900: oklch(35.9% 0.144 278.697);
|
|
1829
|
+
--color-indigo-950: oklch(25.7% 0.09 281.288);
|
|
1830
|
+
|
|
1831
|
+
--color-violet-50: oklch(96.9% 0.016 293.756);
|
|
1832
|
+
--color-violet-100: oklch(94.3% 0.029 294.588);
|
|
1833
|
+
--color-violet-200: oklch(89.4% 0.057 293.283);
|
|
1834
|
+
--color-violet-300: oklch(81.1% 0.111 293.571);
|
|
1835
|
+
--color-violet-400: oklch(70.2% 0.183 293.541);
|
|
1836
|
+
--color-violet-500: oklch(60.6% 0.25 292.717);
|
|
1837
|
+
--color-violet-600: oklch(54.1% 0.281 293.009);
|
|
1838
|
+
--color-violet-700: oklch(49.1% 0.27 292.581);
|
|
1839
|
+
--color-violet-800: oklch(43.2% 0.232 292.759);
|
|
1840
|
+
--color-violet-900: oklch(38% 0.189 293.745);
|
|
1841
|
+
--color-violet-950: oklch(28.3% 0.141 291.089);
|
|
1842
|
+
|
|
1843
|
+
--color-purple-50: oklch(97.7% 0.014 308.299);
|
|
1844
|
+
--color-purple-100: oklch(94.6% 0.033 307.174);
|
|
1845
|
+
--color-purple-200: oklch(90.2% 0.063 306.703);
|
|
1846
|
+
--color-purple-300: oklch(82.7% 0.119 306.383);
|
|
1847
|
+
--color-purple-400: oklch(71.4% 0.203 305.504);
|
|
1848
|
+
--color-purple-500: oklch(62.7% 0.265 303.9);
|
|
1849
|
+
--color-purple-600: oklch(55.8% 0.288 302.321);
|
|
1850
|
+
--color-purple-700: oklch(49.6% 0.265 301.924);
|
|
1851
|
+
--color-purple-800: oklch(43.8% 0.218 303.724);
|
|
1852
|
+
--color-purple-900: oklch(38.1% 0.176 304.987);
|
|
1853
|
+
--color-purple-950: oklch(29.1% 0.149 302.717);
|
|
1854
|
+
|
|
1855
|
+
--color-fuchsia-50: oklch(97.7% 0.017 320.058);
|
|
1856
|
+
--color-fuchsia-100: oklch(95.2% 0.037 318.852);
|
|
1857
|
+
--color-fuchsia-200: oklch(90.3% 0.076 319.62);
|
|
1858
|
+
--color-fuchsia-300: oklch(83.3% 0.145 321.434);
|
|
1859
|
+
--color-fuchsia-400: oklch(74% 0.238 322.16);
|
|
1860
|
+
--color-fuchsia-500: oklch(66.7% 0.295 322.15);
|
|
1861
|
+
--color-fuchsia-600: oklch(59.1% 0.293 322.896);
|
|
1862
|
+
--color-fuchsia-700: oklch(51.8% 0.253 323.949);
|
|
1863
|
+
--color-fuchsia-800: oklch(45.2% 0.211 324.591);
|
|
1864
|
+
--color-fuchsia-900: oklch(40.1% 0.17 325.612);
|
|
1865
|
+
--color-fuchsia-950: oklch(29.3% 0.136 325.661);
|
|
1866
|
+
|
|
1867
|
+
--color-pink-50: oklch(97.1% 0.014 343.198);
|
|
1868
|
+
--color-pink-100: oklch(94.8% 0.028 342.258);
|
|
1869
|
+
--color-pink-200: oklch(89.9% 0.061 343.231);
|
|
1870
|
+
--color-pink-300: oklch(82.3% 0.12 346.018);
|
|
1871
|
+
--color-pink-400: oklch(71.8% 0.202 349.761);
|
|
1872
|
+
--color-pink-500: oklch(65.6% 0.241 354.308);
|
|
1873
|
+
--color-pink-600: oklch(59.2% 0.249 0.584);
|
|
1874
|
+
--color-pink-700: oklch(52.5% 0.223 3.958);
|
|
1875
|
+
--color-pink-800: oklch(45.9% 0.187 3.815);
|
|
1876
|
+
--color-pink-900: oklch(40.8% 0.153 2.432);
|
|
1877
|
+
--color-pink-950: oklch(28.4% 0.109 3.907);
|
|
1878
|
+
|
|
1879
|
+
--color-rose-50: oklch(96.9% 0.015 12.422);
|
|
1880
|
+
--color-rose-100: oklch(94.1% 0.03 12.58);
|
|
1881
|
+
--color-rose-200: oklch(89.2% 0.058 10.001);
|
|
1882
|
+
--color-rose-300: oklch(81% 0.117 11.638);
|
|
1883
|
+
--color-rose-400: oklch(71.2% 0.194 13.428);
|
|
1884
|
+
--color-rose-500: oklch(64.5% 0.246 16.439);
|
|
1885
|
+
--color-rose-600: oklch(58.6% 0.253 17.585);
|
|
1886
|
+
--color-rose-700: oklch(51.4% 0.222 16.935);
|
|
1887
|
+
--color-rose-800: oklch(45.5% 0.188 13.697);
|
|
1888
|
+
--color-rose-900: oklch(41% 0.159 10.272);
|
|
1889
|
+
--color-rose-950: oklch(27.1% 0.105 12.094);
|
|
1890
|
+
|
|
1891
|
+
--color-slate-50: oklch(98.4% 0.003 247.858);
|
|
1892
|
+
--color-slate-100: oklch(96.8% 0.007 247.896);
|
|
1893
|
+
--color-slate-200: oklch(92.9% 0.013 255.508);
|
|
1894
|
+
--color-slate-300: oklch(86.9% 0.022 252.894);
|
|
1895
|
+
--color-slate-400: oklch(70.4% 0.04 256.788);
|
|
1896
|
+
--color-slate-500: oklch(55.4% 0.046 257.417);
|
|
1897
|
+
--color-slate-600: oklch(44.6% 0.043 257.281);
|
|
1898
|
+
--color-slate-700: oklch(37.2% 0.044 257.287);
|
|
1899
|
+
--color-slate-800: oklch(27.9% 0.041 260.031);
|
|
1900
|
+
--color-slate-900: oklch(20.8% 0.042 265.755);
|
|
1901
|
+
--color-slate-950: oklch(12.9% 0.042 264.695);
|
|
1902
|
+
|
|
1903
|
+
--color-gray-50: oklch(98.5% 0.002 247.839);
|
|
1904
|
+
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
1905
|
+
--color-gray-200: oklch(92.8% 0.006 264.531);
|
|
1906
|
+
--color-gray-300: oklch(87.2% 0.01 258.338);
|
|
1907
|
+
--color-gray-400: oklch(70.7% 0.022 261.325);
|
|
1908
|
+
--color-gray-500: oklch(55.1% 0.027 264.364);
|
|
1909
|
+
--color-gray-600: oklch(44.6% 0.03 256.802);
|
|
1910
|
+
--color-gray-700: oklch(37.3% 0.034 259.733);
|
|
1911
|
+
--color-gray-800: oklch(27.8% 0.033 256.848);
|
|
1912
|
+
--color-gray-900: oklch(21% 0.034 264.665);
|
|
1913
|
+
--color-gray-950: oklch(13% 0.028 261.692);
|
|
1914
|
+
|
|
1915
|
+
--color-zinc-50: oklch(98.5% 0 0);
|
|
1916
|
+
--color-zinc-100: oklch(96.7% 0.001 286.375);
|
|
1917
|
+
--color-zinc-200: oklch(92% 0.004 286.32);
|
|
1918
|
+
--color-zinc-300: oklch(87.1% 0.006 286.286);
|
|
1919
|
+
--color-zinc-400: oklch(70.5% 0.015 286.067);
|
|
1920
|
+
--color-zinc-500: oklch(55.2% 0.016 285.938);
|
|
1921
|
+
--color-zinc-600: oklch(44.2% 0.017 285.786);
|
|
1922
|
+
--color-zinc-700: oklch(37% 0.013 285.805);
|
|
1923
|
+
--color-zinc-800: oklch(27.4% 0.006 286.033);
|
|
1924
|
+
--color-zinc-900: oklch(21% 0.006 285.885);
|
|
1925
|
+
--color-zinc-950: oklch(14.1% 0.005 285.823);
|
|
1926
|
+
|
|
1927
|
+
--color-neutral-50: oklch(98.5% 0 0);
|
|
1928
|
+
--color-neutral-100: oklch(97% 0 0);
|
|
1929
|
+
--color-neutral-200: oklch(92.2% 0 0);
|
|
1930
|
+
--color-neutral-300: oklch(87% 0 0);
|
|
1931
|
+
--color-neutral-400: oklch(70.8% 0 0);
|
|
1932
|
+
--color-neutral-500: oklch(55.6% 0 0);
|
|
1933
|
+
--color-neutral-600: oklch(43.9% 0 0);
|
|
1934
|
+
--color-neutral-700: oklch(37.1% 0 0);
|
|
1935
|
+
--color-neutral-800: oklch(26.9% 0 0);
|
|
1936
|
+
--color-neutral-900: oklch(20.5% 0 0);
|
|
1937
|
+
--color-neutral-950: oklch(14.5% 0 0);
|
|
1938
|
+
|
|
1939
|
+
--color-stone-50: oklch(98.5% 0.001 106.423);
|
|
1940
|
+
--color-stone-100: oklch(97% 0.001 106.424);
|
|
1941
|
+
--color-stone-200: oklch(92.3% 0.003 48.717);
|
|
1942
|
+
--color-stone-300: oklch(86.9% 0.005 56.366);
|
|
1943
|
+
--color-stone-400: oklch(70.9% 0.01 56.259);
|
|
1944
|
+
--color-stone-500: oklch(55.3% 0.013 58.071);
|
|
1945
|
+
--color-stone-600: oklch(44.4% 0.011 73.639);
|
|
1946
|
+
--color-stone-700: oklch(37.4% 0.01 67.558);
|
|
1947
|
+
--color-stone-800: oklch(26.8% 0.007 34.298);
|
|
1948
|
+
--color-stone-900: oklch(21.6% 0.006 56.043);
|
|
1949
|
+
--color-stone-950: oklch(14.7% 0.004 49.25);
|
|
1950
|
+
|
|
1951
|
+
--color-black: #000;
|
|
1952
|
+
--color-white: #fff;
|
|
1953
|
+
|
|
1954
|
+
--spacing: 0.25rem;
|
|
1955
|
+
|
|
1956
|
+
--breakpoint-sm: 40rem;
|
|
1957
|
+
--breakpoint-md: 48rem;
|
|
1958
|
+
--breakpoint-lg: 64rem;
|
|
1959
|
+
--breakpoint-xl: 80rem;
|
|
1960
|
+
--breakpoint-2xl: 96rem;
|
|
1961
|
+
|
|
1962
|
+
--container-3xs: 16rem;
|
|
1963
|
+
--container-2xs: 18rem;
|
|
1964
|
+
--container-xs: 20rem;
|
|
1965
|
+
--container-sm: 24rem;
|
|
1966
|
+
--container-md: 28rem;
|
|
1967
|
+
--container-lg: 32rem;
|
|
1968
|
+
--container-xl: 36rem;
|
|
1969
|
+
--container-2xl: 42rem;
|
|
1970
|
+
--container-3xl: 48rem;
|
|
1971
|
+
--container-4xl: 56rem;
|
|
1972
|
+
--container-5xl: 64rem;
|
|
1973
|
+
--container-6xl: 72rem;
|
|
1974
|
+
--container-7xl: 80rem;
|
|
1975
|
+
|
|
1976
|
+
--text-xs: 0.75rem;
|
|
1977
|
+
--text-xs--line-height: calc(1 / 0.75);
|
|
1978
|
+
--text-sm: 0.875rem;
|
|
1979
|
+
--text-sm--line-height: calc(1.25 / 0.875);
|
|
1980
|
+
--text-base: 1rem;
|
|
1981
|
+
--text-base--line-height: calc(1.5 / 1);
|
|
1982
|
+
--text-lg: 1.125rem;
|
|
1983
|
+
--text-lg--line-height: calc(1.75 / 1.125);
|
|
1984
|
+
--text-xl: 1.25rem;
|
|
1985
|
+
--text-xl--line-height: calc(1.75 / 1.25);
|
|
1986
|
+
--text-2xl: 1.5rem;
|
|
1987
|
+
--text-2xl--line-height: calc(2 / 1.5);
|
|
1988
|
+
--text-3xl: 1.875rem;
|
|
1989
|
+
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
1990
|
+
--text-4xl: 2.25rem;
|
|
1991
|
+
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
1992
|
+
--text-5xl: 3rem;
|
|
1993
|
+
--text-5xl--line-height: 1;
|
|
1994
|
+
--text-6xl: 3.75rem;
|
|
1995
|
+
--text-6xl--line-height: 1;
|
|
1996
|
+
--text-7xl: 4.5rem;
|
|
1997
|
+
--text-7xl--line-height: 1;
|
|
1998
|
+
--text-8xl: 6rem;
|
|
1999
|
+
--text-8xl--line-height: 1;
|
|
2000
|
+
--text-9xl: 8rem;
|
|
2001
|
+
--text-9xl--line-height: 1;
|
|
2002
|
+
|
|
2003
|
+
--font-weight-thin: 100;
|
|
2004
|
+
--font-weight-extralight: 200;
|
|
2005
|
+
--font-weight-light: 300;
|
|
2006
|
+
--font-weight-normal: 400;
|
|
2007
|
+
--font-weight-medium: 500;
|
|
2008
|
+
--font-weight-semibold: 600;
|
|
2009
|
+
--font-weight-bold: 700;
|
|
2010
|
+
--font-weight-extrabold: 800;
|
|
2011
|
+
--font-weight-black: 900;
|
|
2012
|
+
|
|
2013
|
+
--tracking-tighter: -0.05em;
|
|
2014
|
+
--tracking-tight: -0.025em;
|
|
2015
|
+
--tracking-normal: 0em;
|
|
2016
|
+
--tracking-wide: 0.025em;
|
|
2017
|
+
--tracking-wider: 0.05em;
|
|
2018
|
+
--tracking-widest: 0.1em;
|
|
2019
|
+
|
|
2020
|
+
--leading-tight: 1.25;
|
|
2021
|
+
--leading-snug: 1.375;
|
|
2022
|
+
--leading-normal: 1.5;
|
|
2023
|
+
--leading-relaxed: 1.625;
|
|
2024
|
+
--leading-loose: 2;
|
|
2025
|
+
|
|
2026
|
+
--radius-xs: 0.125rem;
|
|
2027
|
+
--radius-sm: 0.25rem;
|
|
2028
|
+
--radius-md: 0.375rem;
|
|
2029
|
+
--radius-lg: 0.5rem;
|
|
2030
|
+
--radius-xl: 0.75rem;
|
|
2031
|
+
--radius-2xl: 1rem;
|
|
2032
|
+
--radius-3xl: 1.5rem;
|
|
2033
|
+
--radius-4xl: 2rem;
|
|
2034
|
+
|
|
2035
|
+
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
|
|
2036
|
+
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
2037
|
+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
2038
|
+
--shadow-md:
|
|
2039
|
+
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
2040
|
+
--shadow-lg:
|
|
2041
|
+
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
2042
|
+
--shadow-xl:
|
|
2043
|
+
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
2044
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
2045
|
+
|
|
2046
|
+
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
|
|
2047
|
+
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
|
|
2048
|
+
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
|
|
2049
|
+
|
|
2050
|
+
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
|
|
2051
|
+
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
|
|
2052
|
+
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
|
|
2053
|
+
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
|
|
2054
|
+
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
|
|
2055
|
+
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
|
|
2056
|
+
|
|
2057
|
+
--text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
|
|
2058
|
+
--text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
|
|
2059
|
+
--text-shadow-sm:
|
|
2060
|
+
0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
|
|
2061
|
+
0px 2px 2px rgb(0 0 0 / 0.075);
|
|
2062
|
+
--text-shadow-md:
|
|
2063
|
+
0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),
|
|
2064
|
+
0px 2px 4px rgb(0 0 0 / 0.1);
|
|
2065
|
+
--text-shadow-lg:
|
|
2066
|
+
0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),
|
|
2067
|
+
0px 4px 8px rgb(0 0 0 / 0.1);
|
|
2068
|
+
|
|
2069
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
2070
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
2071
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2072
|
+
|
|
2073
|
+
--animate-spin: spin 1s linear infinite;
|
|
2074
|
+
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
2075
|
+
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
2076
|
+
--animate-bounce: bounce 1s infinite;
|
|
2077
|
+
|
|
2078
|
+
@keyframes spin {
|
|
2079
|
+
to {
|
|
2080
|
+
transform: rotate(360deg);
|
|
2081
|
+
}
|
|
2082
|
+
}
|
|
2083
|
+
|
|
2084
|
+
@keyframes ping {
|
|
2085
|
+
75%,
|
|
2086
|
+
100% {
|
|
2087
|
+
transform: scale(2);
|
|
2088
|
+
opacity: 0;
|
|
2089
|
+
}
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
@keyframes pulse {
|
|
2093
|
+
50% {
|
|
2094
|
+
opacity: 0.5;
|
|
2095
|
+
}
|
|
2096
|
+
}
|
|
2097
|
+
|
|
2098
|
+
@keyframes bounce {
|
|
2099
|
+
0%,
|
|
2100
|
+
100% {
|
|
2101
|
+
transform: translateY(-25%);
|
|
2102
|
+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
2103
|
+
}
|
|
2104
|
+
|
|
2105
|
+
50% {
|
|
2106
|
+
transform: none;
|
|
2107
|
+
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2108
|
+
}
|
|
2109
|
+
}
|
|
2110
|
+
|
|
2111
|
+
--blur-xs: 4px;
|
|
2112
|
+
--blur-sm: 8px;
|
|
2113
|
+
--blur-md: 12px;
|
|
2114
|
+
--blur-lg: 16px;
|
|
2115
|
+
--blur-xl: 24px;
|
|
2116
|
+
--blur-2xl: 40px;
|
|
2117
|
+
--blur-3xl: 64px;
|
|
2118
|
+
|
|
2119
|
+
--perspective-dramatic: 100px;
|
|
2120
|
+
--perspective-near: 300px;
|
|
2121
|
+
--perspective-normal: 500px;
|
|
2122
|
+
--perspective-midrange: 800px;
|
|
2123
|
+
--perspective-distant: 1200px;
|
|
2124
|
+
|
|
2125
|
+
--aspect-video: 16 / 9;
|
|
2126
|
+
|
|
2127
|
+
--default-transition-duration: 150ms;
|
|
2128
|
+
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2129
|
+
--default-font-family: --theme(--font-sans, initial);
|
|
2130
|
+
--default-font-feature-settings: --theme(
|
|
2131
|
+
--font-sans--font-feature-settings,
|
|
2132
|
+
initial
|
|
2133
|
+
);
|
|
2134
|
+
--default-font-variation-settings: --theme(
|
|
2135
|
+
--font-sans--font-variation-settings,
|
|
2136
|
+
initial
|
|
2137
|
+
);
|
|
2138
|
+
--default-mono-font-family: --theme(--font-mono, initial);
|
|
2139
|
+
--default-mono-font-feature-settings: --theme(
|
|
2140
|
+
--font-mono--font-feature-settings,
|
|
2141
|
+
initial
|
|
2142
|
+
);
|
|
2143
|
+
--default-mono-font-variation-settings: --theme(
|
|
2144
|
+
--font-mono--font-variation-settings,
|
|
2145
|
+
initial
|
|
2146
|
+
);
|
|
2147
|
+
}
|
|
2148
|
+
|
|
2149
|
+
/* Deprecated */
|
|
2150
|
+
@theme default inline reference {
|
|
2151
|
+
--blur: 8px;
|
|
2152
|
+
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
2153
|
+
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
2154
|
+
--drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
|
|
2155
|
+
--radius: 0.25rem;
|
|
2156
|
+
--max-width-prose: 65ch;
|
|
2157
|
+
}
|
|
2158
|
+
}
|
|
2159
|
+
|
|
2160
|
+
@layer base {
|
|
2161
|
+
/*
|
|
2162
|
+
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
2163
|
+
2. Remove default margins and padding
|
|
2164
|
+
3. Reset all borders.
|
|
2165
|
+
*/
|
|
2166
|
+
|
|
2167
|
+
*,
|
|
2168
|
+
::after,
|
|
2169
|
+
::before,
|
|
2170
|
+
::backdrop,
|
|
2171
|
+
::file-selector-button {
|
|
2172
|
+
box-sizing: border-box; /* 1 */
|
|
2173
|
+
margin: 0; /* 2 */
|
|
2174
|
+
padding: 0; /* 2 */
|
|
2175
|
+
border: 0 solid; /* 3 */
|
|
2176
|
+
}
|
|
2177
|
+
|
|
2178
|
+
/*
|
|
2179
|
+
1. Use a consistent sensible line-height in all browsers.
|
|
2180
|
+
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
2181
|
+
3. Use a more readable tab size.
|
|
2182
|
+
4. Use the user's configured \`sans\` font-family by default.
|
|
2183
|
+
5. Use the user's configured \`sans\` font-feature-settings by default.
|
|
2184
|
+
6. Use the user's configured \`sans\` font-variation-settings by default.
|
|
2185
|
+
7. Disable tap highlights on iOS.
|
|
2186
|
+
*/
|
|
2187
|
+
|
|
2188
|
+
html,
|
|
2189
|
+
:host {
|
|
2190
|
+
line-height: 1.5; /* 1 */
|
|
2191
|
+
-webkit-text-size-adjust: 100%; /* 2 */
|
|
2192
|
+
tab-size: 4; /* 3 */
|
|
2193
|
+
font-family: --theme(
|
|
2194
|
+
--default-font-family,
|
|
2195
|
+
ui-sans-serif,
|
|
2196
|
+
system-ui,
|
|
2197
|
+
sans-serif,
|
|
2198
|
+
"Apple Color Emoji",
|
|
2199
|
+
"Segoe UI Emoji",
|
|
2200
|
+
"Segoe UI Symbol",
|
|
2201
|
+
"Noto Color Emoji"
|
|
2202
|
+
); /* 4 */
|
|
2203
|
+
font-feature-settings: --theme(
|
|
2204
|
+
--default-font-feature-settings,
|
|
2205
|
+
normal
|
|
2206
|
+
); /* 5 */
|
|
2207
|
+
font-variation-settings: --theme(
|
|
2208
|
+
--default-font-variation-settings,
|
|
2209
|
+
normal
|
|
2210
|
+
); /* 6 */
|
|
2211
|
+
-webkit-tap-highlight-color: transparent; /* 7 */
|
|
2212
|
+
}
|
|
2213
|
+
|
|
2214
|
+
/*
|
|
2215
|
+
1. Add the correct height in Firefox.
|
|
2216
|
+
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
|
2217
|
+
3. Reset the default border style to a 1px solid border.
|
|
2218
|
+
*/
|
|
2219
|
+
|
|
2220
|
+
hr {
|
|
2221
|
+
height: 0; /* 1 */
|
|
2222
|
+
color: inherit; /* 2 */
|
|
2223
|
+
border-top-width: 1px; /* 3 */
|
|
2224
|
+
}
|
|
2225
|
+
|
|
2226
|
+
/*
|
|
2227
|
+
Add the correct text decoration in Chrome, Edge, and Safari.
|
|
2228
|
+
*/
|
|
2229
|
+
|
|
2230
|
+
abbr:where([title]) {
|
|
2231
|
+
-webkit-text-decoration: underline dotted;
|
|
2232
|
+
text-decoration: underline dotted;
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
/*
|
|
2236
|
+
Remove the default font size and weight for headings.
|
|
2237
|
+
*/
|
|
2238
|
+
|
|
2239
|
+
h1,
|
|
2240
|
+
h2,
|
|
2241
|
+
h3,
|
|
2242
|
+
h4,
|
|
2243
|
+
h5,
|
|
2244
|
+
h6 {
|
|
2245
|
+
font-size: inherit;
|
|
2246
|
+
font-weight: inherit;
|
|
2247
|
+
}
|
|
2248
|
+
|
|
2249
|
+
/*
|
|
2250
|
+
Reset links to optimize for opt-in styling instead of opt-out.
|
|
2251
|
+
*/
|
|
2252
|
+
|
|
2253
|
+
a {
|
|
2254
|
+
color: inherit;
|
|
2255
|
+
-webkit-text-decoration: inherit;
|
|
2256
|
+
text-decoration: inherit;
|
|
2257
|
+
}
|
|
2258
|
+
|
|
2259
|
+
/*
|
|
2260
|
+
Add the correct font weight in Edge and Safari.
|
|
2261
|
+
*/
|
|
2262
|
+
|
|
2263
|
+
b,
|
|
2264
|
+
strong {
|
|
2265
|
+
font-weight: bolder;
|
|
2266
|
+
}
|
|
2267
|
+
|
|
2268
|
+
/*
|
|
2269
|
+
1. Use the user's configured \`mono\` font-family by default.
|
|
2270
|
+
2. Use the user's configured \`mono\` font-feature-settings by default.
|
|
2271
|
+
3. Use the user's configured \`mono\` font-variation-settings by default.
|
|
2272
|
+
4. Correct the odd \`em\` font sizing in all browsers.
|
|
2273
|
+
*/
|
|
2274
|
+
|
|
2275
|
+
code,
|
|
2276
|
+
kbd,
|
|
2277
|
+
samp,
|
|
2278
|
+
pre {
|
|
2279
|
+
font-family: --theme(
|
|
2280
|
+
--default-mono-font-family,
|
|
2281
|
+
ui-monospace,
|
|
2282
|
+
SFMono-Regular,
|
|
2283
|
+
Menlo,
|
|
2284
|
+
Monaco,
|
|
2285
|
+
Consolas,
|
|
2286
|
+
"Liberation Mono",
|
|
2287
|
+
"Courier New",
|
|
2288
|
+
monospace
|
|
2289
|
+
); /* 1 */
|
|
2290
|
+
font-feature-settings: --theme(
|
|
2291
|
+
--default-mono-font-feature-settings,
|
|
2292
|
+
normal
|
|
2293
|
+
); /* 2 */
|
|
2294
|
+
font-variation-settings: --theme(
|
|
2295
|
+
--default-mono-font-variation-settings,
|
|
2296
|
+
normal
|
|
2297
|
+
); /* 3 */
|
|
2298
|
+
font-size: 1em; /* 4 */
|
|
2299
|
+
}
|
|
2300
|
+
|
|
2301
|
+
/*
|
|
2302
|
+
Add the correct font size in all browsers.
|
|
2303
|
+
*/
|
|
2304
|
+
|
|
2305
|
+
small {
|
|
2306
|
+
font-size: 80%;
|
|
2307
|
+
}
|
|
2308
|
+
|
|
2309
|
+
/*
|
|
2310
|
+
Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
|
|
2311
|
+
*/
|
|
2312
|
+
|
|
2313
|
+
sub,
|
|
2314
|
+
sup {
|
|
2315
|
+
font-size: 75%;
|
|
2316
|
+
line-height: 0;
|
|
2317
|
+
position: relative;
|
|
2318
|
+
vertical-align: baseline;
|
|
2319
|
+
}
|
|
2320
|
+
|
|
2321
|
+
sub {
|
|
2322
|
+
bottom: -0.25em;
|
|
2323
|
+
}
|
|
2324
|
+
|
|
2325
|
+
sup {
|
|
2326
|
+
top: -0.5em;
|
|
2327
|
+
}
|
|
2328
|
+
|
|
2329
|
+
/*
|
|
2330
|
+
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
|
2331
|
+
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
|
2332
|
+
3. Remove gaps between table borders by default.
|
|
2333
|
+
*/
|
|
2334
|
+
|
|
2335
|
+
table {
|
|
2336
|
+
text-indent: 0; /* 1 */
|
|
2337
|
+
border-color: inherit; /* 2 */
|
|
2338
|
+
border-collapse: collapse; /* 3 */
|
|
2339
|
+
}
|
|
2340
|
+
|
|
2341
|
+
/*
|
|
2342
|
+
Use the modern Firefox focus style for all focusable elements.
|
|
2343
|
+
*/
|
|
2344
|
+
|
|
2345
|
+
:-moz-focusring {
|
|
2346
|
+
outline: auto;
|
|
2347
|
+
}
|
|
2348
|
+
|
|
2349
|
+
/*
|
|
2350
|
+
Add the correct vertical alignment in Chrome and Firefox.
|
|
2351
|
+
*/
|
|
2352
|
+
|
|
2353
|
+
progress {
|
|
2354
|
+
vertical-align: baseline;
|
|
2355
|
+
}
|
|
2356
|
+
|
|
2357
|
+
/*
|
|
2358
|
+
Add the correct display in Chrome and Safari.
|
|
2359
|
+
*/
|
|
2360
|
+
|
|
2361
|
+
summary {
|
|
2362
|
+
display: list-item;
|
|
2363
|
+
}
|
|
2364
|
+
|
|
2365
|
+
/*
|
|
2366
|
+
Make lists unstyled by default.
|
|
2367
|
+
*/
|
|
2368
|
+
|
|
2369
|
+
ol,
|
|
2370
|
+
ul,
|
|
2371
|
+
menu {
|
|
2372
|
+
list-style: none;
|
|
2373
|
+
}
|
|
2374
|
+
|
|
2375
|
+
/*
|
|
2376
|
+
1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
2377
|
+
2. Add \`vertical - align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
|
2378
|
+
This can trigger a poorly considered lint error in some tools but is included by design.
|
|
2379
|
+
*/
|
|
2380
|
+
|
|
2381
|
+
img,
|
|
2382
|
+
svg,
|
|
2383
|
+
video,
|
|
2384
|
+
canvas,
|
|
2385
|
+
audio,
|
|
2386
|
+
iframe,
|
|
2387
|
+
embed,
|
|
2388
|
+
object {
|
|
2389
|
+
display: block; /* 1 */
|
|
2390
|
+
vertical-align: middle; /* 2 */
|
|
2391
|
+
}
|
|
2392
|
+
|
|
2393
|
+
/*
|
|
2394
|
+
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
2395
|
+
*/
|
|
2396
|
+
|
|
2397
|
+
img,
|
|
2398
|
+
video {
|
|
2399
|
+
max-width: 100%;
|
|
2400
|
+
height: auto;
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
/*
|
|
2404
|
+
1. Inherit font styles in all browsers.
|
|
2405
|
+
2. Remove border radius in all browsers.
|
|
2406
|
+
3. Remove background color in all browsers.
|
|
2407
|
+
4. Ensure consistent opacity for disabled states in all browsers.
|
|
2408
|
+
*/
|
|
2409
|
+
|
|
2410
|
+
button,
|
|
2411
|
+
input,
|
|
2412
|
+
select,
|
|
2413
|
+
optgroup,
|
|
2414
|
+
textarea,
|
|
2415
|
+
::file-selector-button {
|
|
2416
|
+
font: inherit; /* 1 */
|
|
2417
|
+
font-feature-settings: inherit; /* 1 */
|
|
2418
|
+
font-variation-settings: inherit; /* 1 */
|
|
2419
|
+
letter-spacing: inherit; /* 1 */
|
|
2420
|
+
color: inherit; /* 1 */
|
|
2421
|
+
border-radius: 0; /* 2 */
|
|
2422
|
+
background-color: transparent; /* 3 */
|
|
2423
|
+
opacity: 1; /* 4 */
|
|
2424
|
+
}
|
|
2425
|
+
|
|
2426
|
+
/*
|
|
2427
|
+
Restore default font weight.
|
|
2428
|
+
*/
|
|
2429
|
+
|
|
2430
|
+
:where(select:is([multiple], [size])) optgroup {
|
|
2431
|
+
font-weight: bolder;
|
|
2432
|
+
}
|
|
2433
|
+
|
|
2434
|
+
/*
|
|
2435
|
+
Restore indentation.
|
|
2436
|
+
*/
|
|
2437
|
+
|
|
2438
|
+
:where(select:is([multiple], [size])) optgroup option {
|
|
2439
|
+
padding-inline-start: 20px;
|
|
2440
|
+
}
|
|
2441
|
+
|
|
2442
|
+
/*
|
|
2443
|
+
Restore space after button.
|
|
2444
|
+
*/
|
|
2445
|
+
|
|
2446
|
+
::file-selector-button {
|
|
2447
|
+
margin-inline-end: 4px;
|
|
2448
|
+
}
|
|
2449
|
+
|
|
2450
|
+
/*
|
|
2451
|
+
Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
|
2452
|
+
*/
|
|
2453
|
+
|
|
2454
|
+
::placeholder {
|
|
2455
|
+
opacity: 1;
|
|
2456
|
+
}
|
|
2457
|
+
|
|
2458
|
+
/*
|
|
2459
|
+
Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
|
|
2460
|
+
crash when using \`color - mix(…)\` with \`currentcolor\`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
|
|
2461
|
+
*/
|
|
2462
|
+
|
|
2463
|
+
@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
|
|
2464
|
+
(contain-intrinsic-size: 1px) /* Safari 17+ */ {
|
|
2465
|
+
::placeholder {
|
|
2466
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
2467
|
+
}
|
|
2468
|
+
}
|
|
2469
|
+
|
|
2470
|
+
/*
|
|
2471
|
+
Prevent resizing textareas horizontally by default.
|
|
2472
|
+
*/
|
|
2473
|
+
|
|
2474
|
+
textarea {
|
|
2475
|
+
resize: vertical;
|
|
2476
|
+
}
|
|
2477
|
+
|
|
2478
|
+
/*
|
|
2479
|
+
Remove the inner padding in Chrome and Safari on macOS.
|
|
2480
|
+
*/
|
|
2481
|
+
|
|
2482
|
+
::-webkit-search-decoration {
|
|
2483
|
+
-webkit-appearance: none;
|
|
2484
|
+
}
|
|
2485
|
+
|
|
2486
|
+
/*
|
|
2487
|
+
1. Ensure date/time inputs have the same height when empty in iOS Safari.
|
|
2488
|
+
2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
|
|
2489
|
+
*/
|
|
2490
|
+
|
|
2491
|
+
::-webkit-date-and-time-value {
|
|
2492
|
+
min-height: 1lh; /* 1 */
|
|
2493
|
+
text-align: inherit; /* 2 */
|
|
2494
|
+
}
|
|
2495
|
+
|
|
2496
|
+
/*
|
|
2497
|
+
Prevent height from changing on date/time inputs in macOS Safari when the input is set to \`display: block\`.
|
|
2498
|
+
*/
|
|
2499
|
+
|
|
2500
|
+
::-webkit-datetime-edit {
|
|
2501
|
+
display: inline-flex;
|
|
2502
|
+
}
|
|
2503
|
+
|
|
2504
|
+
/*
|
|
2505
|
+
Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
|
|
2506
|
+
*/
|
|
2507
|
+
|
|
2508
|
+
::-webkit-datetime-edit-fields-wrapper {
|
|
2509
|
+
padding: 0;
|
|
2510
|
+
}
|
|
2511
|
+
|
|
2512
|
+
::-webkit-datetime-edit,
|
|
2513
|
+
::-webkit-datetime-edit-year-field,
|
|
2514
|
+
::-webkit-datetime-edit-month-field,
|
|
2515
|
+
::-webkit-datetime-edit-day-field,
|
|
2516
|
+
::-webkit-datetime-edit-hour-field,
|
|
2517
|
+
::-webkit-datetime-edit-minute-field,
|
|
2518
|
+
::-webkit-datetime-edit-second-field,
|
|
2519
|
+
::-webkit-datetime-edit-millisecond-field,
|
|
2520
|
+
::-webkit-datetime-edit-meridiem-field {
|
|
2521
|
+
padding-block: 0;
|
|
2522
|
+
}
|
|
2523
|
+
|
|
2524
|
+
/*
|
|
2525
|
+
Center dropdown marker shown on inputs with paired \`<datalist>\`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
|
|
2526
|
+
*/
|
|
2527
|
+
|
|
2528
|
+
::-webkit-calendar-picker-indicator {
|
|
2529
|
+
line-height: 1;
|
|
2530
|
+
}
|
|
2531
|
+
|
|
2532
|
+
/*
|
|
2533
|
+
Remove the additional \`: invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
|
2534
|
+
*/
|
|
2535
|
+
|
|
2536
|
+
:-moz-ui-invalid {
|
|
2537
|
+
box-shadow: none;
|
|
2538
|
+
}
|
|
2539
|
+
|
|
2540
|
+
/*
|
|
2541
|
+
Correct the inability to style the border radius in iOS Safari.
|
|
2542
|
+
*/
|
|
2543
|
+
|
|
2544
|
+
button,
|
|
2545
|
+
input:where([type="button"], [type="reset"], [type="submit"]),
|
|
2546
|
+
::file-selector-button {
|
|
2547
|
+
appearance: button;
|
|
2548
|
+
}
|
|
2549
|
+
|
|
2550
|
+
/*
|
|
2551
|
+
Correct the cursor style of increment and decrement buttons in Safari.
|
|
2552
|
+
*/
|
|
2553
|
+
|
|
2554
|
+
::-webkit-inner-spin-button,
|
|
2555
|
+
::-webkit-outer-spin-button {
|
|
2556
|
+
height: auto;
|
|
2557
|
+
}
|
|
2558
|
+
|
|
2559
|
+
/*
|
|
2560
|
+
Make elements with the HTML hidden attribute stay hidden by default.
|
|
2561
|
+
*/
|
|
2562
|
+
|
|
2563
|
+
[hidden]:where(:not([hidden="until-found"])) {
|
|
2564
|
+
display: none !important;
|
|
2565
|
+
}
|
|
2566
|
+
}
|
|
2567
|
+
|
|
2568
|
+
@layer utilities {
|
|
2569
|
+
@tailwind utilities;
|
|
2570
|
+
}
|
|
2571
|
+
`;
|
|
2572
|
+
var css_default = css$3;
|
|
2573
|
+
|
|
2574
|
+
//#endregion
|
|
2575
|
+
//#region src/tailwind/css/preflight.ts
|
|
2576
|
+
const css$2 = `
|
|
2577
|
+
/*
|
|
2578
|
+
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
2579
|
+
2. Remove default margins and padding
|
|
2580
|
+
3. Reset all borders.
|
|
2581
|
+
*/
|
|
2582
|
+
|
|
2583
|
+
*,
|
|
2584
|
+
::after,
|
|
2585
|
+
::before,
|
|
2586
|
+
::backdrop,
|
|
2587
|
+
::file-selector-button {
|
|
2588
|
+
box-sizing: border-box; /* 1 */
|
|
2589
|
+
margin: 0; /* 2 */
|
|
2590
|
+
padding: 0; /* 2 */
|
|
2591
|
+
border: 0 solid; /* 3 */
|
|
2592
|
+
}
|
|
2593
|
+
|
|
2594
|
+
/*
|
|
2595
|
+
1. Use a consistent sensible line-height in all browsers.
|
|
2596
|
+
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
2597
|
+
3. Use a more readable tab size.
|
|
2598
|
+
4. Use the user's configured \`sans\` font-family by default.
|
|
2599
|
+
5. Use the user's configured \`sans\` font-feature-settings by default.
|
|
2600
|
+
6. Use the user's configured \`sans\` font-variation-settings by default.
|
|
2601
|
+
7. Disable tap highlights on iOS.
|
|
2602
|
+
*/
|
|
2603
|
+
|
|
2604
|
+
html,
|
|
2605
|
+
:host {
|
|
2606
|
+
line-height: 1.5; /* 1 */
|
|
2607
|
+
-webkit-text-size-adjust: 100%; /* 2 */
|
|
2608
|
+
tab-size: 4; /* 3 */
|
|
2609
|
+
font-family: --theme(
|
|
2610
|
+
--default-font-family,
|
|
2611
|
+
ui-sans-serif,
|
|
2612
|
+
system-ui,
|
|
2613
|
+
sans-serif,
|
|
2614
|
+
'Apple Color Emoji',
|
|
2615
|
+
'Segoe UI Emoji',
|
|
2616
|
+
'Segoe UI Symbol',
|
|
2617
|
+
'Noto Color Emoji'
|
|
2618
|
+
); /* 4 */
|
|
2619
|
+
font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
|
|
2620
|
+
font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
|
|
2621
|
+
-webkit-tap-highlight-color: transparent; /* 7 */
|
|
2622
|
+
}
|
|
2623
|
+
|
|
2624
|
+
/*
|
|
2625
|
+
1. Add the correct height in Firefox.
|
|
2626
|
+
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
|
2627
|
+
3. Reset the default border style to a 1px solid border.
|
|
2628
|
+
*/
|
|
2629
|
+
|
|
2630
|
+
hr {
|
|
2631
|
+
height: 0; /* 1 */
|
|
2632
|
+
color: inherit; /* 2 */
|
|
2633
|
+
border-top-width: 1px; /* 3 */
|
|
2634
|
+
}
|
|
2635
|
+
|
|
2636
|
+
/*
|
|
2637
|
+
Add the correct text decoration in Chrome, Edge, and Safari.
|
|
2638
|
+
*/
|
|
2639
|
+
|
|
2640
|
+
abbr:where([title]) {
|
|
2641
|
+
-webkit-text-decoration: underline dotted;
|
|
2642
|
+
text-decoration: underline dotted;
|
|
2643
|
+
}
|
|
2644
|
+
|
|
2645
|
+
/*
|
|
2646
|
+
Remove the default font size and weight for headings.
|
|
2647
|
+
*/
|
|
2648
|
+
|
|
2649
|
+
h1,
|
|
2650
|
+
h2,
|
|
2651
|
+
h3,
|
|
2652
|
+
h4,
|
|
2653
|
+
h5,
|
|
2654
|
+
h6 {
|
|
2655
|
+
font-size: inherit;
|
|
2656
|
+
font-weight: inherit;
|
|
2657
|
+
}
|
|
2658
|
+
|
|
2659
|
+
/*
|
|
2660
|
+
Reset links to optimize for opt-in styling instead of opt-out.
|
|
2661
|
+
*/
|
|
2662
|
+
|
|
2663
|
+
a {
|
|
2664
|
+
color: inherit;
|
|
2665
|
+
-webkit-text-decoration: inherit;
|
|
2666
|
+
text-decoration: inherit;
|
|
2667
|
+
}
|
|
2668
|
+
|
|
2669
|
+
/*
|
|
2670
|
+
Add the correct font weight in Edge and Safari.
|
|
2671
|
+
*/
|
|
2672
|
+
|
|
2673
|
+
b,
|
|
2674
|
+
strong {
|
|
2675
|
+
font-weight: bolder;
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2678
|
+
/*
|
|
2679
|
+
1. Use the user's configured \`mono\` font-family by default.
|
|
2680
|
+
2. Use the user's configured \`mono\` font-feature-settings by default.
|
|
2681
|
+
3. Use the user's configured \`mono\` font-variation-settings by default.
|
|
2682
|
+
4. Correct the odd \`em\` font sizing in all browsers.
|
|
2683
|
+
*/
|
|
2684
|
+
|
|
2685
|
+
code,
|
|
2686
|
+
kbd,
|
|
2687
|
+
samp,
|
|
2688
|
+
pre {
|
|
2689
|
+
font-family: --theme(
|
|
2690
|
+
--default-mono-font-family,
|
|
2691
|
+
ui-monospace,
|
|
2692
|
+
SFMono-Regular,
|
|
2693
|
+
Menlo,
|
|
2694
|
+
Monaco,
|
|
2695
|
+
Consolas,
|
|
2696
|
+
'Liberation Mono',
|
|
2697
|
+
'Courier New',
|
|
2698
|
+
monospace
|
|
2699
|
+
); /* 1 */
|
|
2700
|
+
font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
|
|
2701
|
+
font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
|
|
2702
|
+
font-size: 1em; /* 4 */
|
|
2703
|
+
}
|
|
2704
|
+
|
|
2705
|
+
/*
|
|
2706
|
+
Add the correct font size in all browsers.
|
|
2707
|
+
*/
|
|
2708
|
+
|
|
2709
|
+
small {
|
|
2710
|
+
font-size: 80%;
|
|
2711
|
+
}
|
|
2712
|
+
|
|
2713
|
+
/*
|
|
2714
|
+
Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
|
|
2715
|
+
*/
|
|
2716
|
+
|
|
2717
|
+
sub,
|
|
2718
|
+
sup {
|
|
2719
|
+
font-size: 75%;
|
|
2720
|
+
line-height: 0;
|
|
2721
|
+
position: relative;
|
|
2722
|
+
vertical-align: baseline;
|
|
2723
|
+
}
|
|
2724
|
+
|
|
2725
|
+
sub {
|
|
2726
|
+
bottom: -0.25em;
|
|
2727
|
+
}
|
|
2728
|
+
|
|
2729
|
+
sup {
|
|
2730
|
+
top: -0.5em;
|
|
2731
|
+
}
|
|
2732
|
+
|
|
2733
|
+
/*
|
|
2734
|
+
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
|
2735
|
+
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
|
2736
|
+
3. Remove gaps between table borders by default.
|
|
2737
|
+
*/
|
|
2738
|
+
|
|
2739
|
+
table {
|
|
2740
|
+
text-indent: 0; /* 1 */
|
|
2741
|
+
border-color: inherit; /* 2 */
|
|
2742
|
+
border-collapse: collapse; /* 3 */
|
|
2743
|
+
}
|
|
2744
|
+
|
|
2745
|
+
/*
|
|
2746
|
+
Use the modern Firefox focus style for all focusable elements.
|
|
2747
|
+
*/
|
|
2748
|
+
|
|
2749
|
+
:-moz-focusring {
|
|
2750
|
+
outline: auto;
|
|
2751
|
+
}
|
|
2752
|
+
|
|
2753
|
+
/*
|
|
2754
|
+
Add the correct vertical alignment in Chrome and Firefox.
|
|
2755
|
+
*/
|
|
2756
|
+
|
|
2757
|
+
progress {
|
|
2758
|
+
vertical-align: baseline;
|
|
2759
|
+
}
|
|
2760
|
+
|
|
2761
|
+
/*
|
|
2762
|
+
Add the correct display in Chrome and Safari.
|
|
2763
|
+
*/
|
|
2764
|
+
|
|
2765
|
+
summary {
|
|
2766
|
+
display: list-item;
|
|
2767
|
+
}
|
|
2768
|
+
|
|
2769
|
+
/*
|
|
2770
|
+
Make lists unstyled by default.
|
|
2771
|
+
*/
|
|
2772
|
+
|
|
2773
|
+
ol,
|
|
2774
|
+
ul,
|
|
2775
|
+
menu {
|
|
2776
|
+
list-style: none;
|
|
2777
|
+
}
|
|
2778
|
+
|
|
2779
|
+
/*
|
|
2780
|
+
1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
2781
|
+
2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
|
2782
|
+
This can trigger a poorly considered lint error in some tools but is included by design.
|
|
2783
|
+
*/
|
|
2784
|
+
|
|
2785
|
+
img,
|
|
2786
|
+
svg,
|
|
2787
|
+
video,
|
|
2788
|
+
canvas,
|
|
2789
|
+
audio,
|
|
2790
|
+
iframe,
|
|
2791
|
+
embed,
|
|
2792
|
+
object {
|
|
2793
|
+
display: block; /* 1 */
|
|
2794
|
+
vertical-align: middle; /* 2 */
|
|
2795
|
+
}
|
|
2796
|
+
|
|
2797
|
+
/*
|
|
2798
|
+
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
2799
|
+
*/
|
|
2800
|
+
|
|
2801
|
+
img,
|
|
2802
|
+
video {
|
|
2803
|
+
max-width: 100%;
|
|
2804
|
+
height: auto;
|
|
2805
|
+
}
|
|
2806
|
+
|
|
2807
|
+
/*
|
|
2808
|
+
1. Inherit font styles in all browsers.
|
|
2809
|
+
2. Remove border radius in all browsers.
|
|
2810
|
+
3. Remove background color in all browsers.
|
|
2811
|
+
4. Ensure consistent opacity for disabled states in all browsers.
|
|
2812
|
+
*/
|
|
2813
|
+
|
|
2814
|
+
button,
|
|
2815
|
+
input,
|
|
2816
|
+
select,
|
|
2817
|
+
optgroup,
|
|
2818
|
+
textarea,
|
|
2819
|
+
::file-selector-button {
|
|
2820
|
+
font: inherit; /* 1 */
|
|
2821
|
+
font-feature-settings: inherit; /* 1 */
|
|
2822
|
+
font-variation-settings: inherit; /* 1 */
|
|
2823
|
+
letter-spacing: inherit; /* 1 */
|
|
2824
|
+
color: inherit; /* 1 */
|
|
2825
|
+
border-radius: 0; /* 2 */
|
|
2826
|
+
background-color: transparent; /* 3 */
|
|
2827
|
+
opacity: 1; /* 4 */
|
|
2828
|
+
}
|
|
2829
|
+
|
|
2830
|
+
/*
|
|
2831
|
+
Restore default font weight.
|
|
2832
|
+
*/
|
|
2833
|
+
|
|
2834
|
+
:where(select:is([multiple], [size])) optgroup {
|
|
2835
|
+
font-weight: bolder;
|
|
2836
|
+
}
|
|
2837
|
+
|
|
2838
|
+
/*
|
|
2839
|
+
Restore indentation.
|
|
2840
|
+
*/
|
|
2841
|
+
|
|
2842
|
+
:where(select:is([multiple], [size])) optgroup option {
|
|
2843
|
+
padding-inline-start: 20px;
|
|
2844
|
+
}
|
|
2845
|
+
|
|
2846
|
+
/*
|
|
2847
|
+
Restore space after button.
|
|
2848
|
+
*/
|
|
2849
|
+
|
|
2850
|
+
::file-selector-button {
|
|
2851
|
+
margin-inline-end: 4px;
|
|
2852
|
+
}
|
|
2853
|
+
|
|
2854
|
+
/*
|
|
2855
|
+
Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
|
2856
|
+
*/
|
|
2857
|
+
|
|
2858
|
+
::placeholder {
|
|
2859
|
+
opacity: 1;
|
|
2860
|
+
}
|
|
2861
|
+
|
|
2862
|
+
/*
|
|
2863
|
+
Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
|
|
2864
|
+
crash when using \`color-mix(…)\` with \`currentcolor\`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
|
|
2865
|
+
*/
|
|
2866
|
+
|
|
2867
|
+
@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
|
|
2868
|
+
(contain-intrinsic-size: 1px) /* Safari 17+ */ {
|
|
2869
|
+
::placeholder {
|
|
2870
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
2871
|
+
}
|
|
2872
|
+
}
|
|
2873
|
+
|
|
2874
|
+
/*
|
|
2875
|
+
Prevent resizing textareas horizontally by default.
|
|
2876
|
+
*/
|
|
2877
|
+
|
|
2878
|
+
textarea {
|
|
2879
|
+
resize: vertical;
|
|
2880
|
+
}
|
|
2881
|
+
|
|
2882
|
+
/*
|
|
2883
|
+
Remove the inner padding in Chrome and Safari on macOS.
|
|
2884
|
+
*/
|
|
2885
|
+
|
|
2886
|
+
::-webkit-search-decoration {
|
|
2887
|
+
-webkit-appearance: none;
|
|
2888
|
+
}
|
|
2889
|
+
|
|
2890
|
+
/*
|
|
2891
|
+
1. Ensure date/time inputs have the same height when empty in iOS Safari.
|
|
2892
|
+
2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
|
|
2893
|
+
*/
|
|
2894
|
+
|
|
2895
|
+
::-webkit-date-and-time-value {
|
|
2896
|
+
min-height: 1lh; /* 1 */
|
|
2897
|
+
text-align: inherit; /* 2 */
|
|
2898
|
+
}
|
|
2899
|
+
|
|
2900
|
+
/*
|
|
2901
|
+
Prevent height from changing on date/time inputs in macOS Safari when the input is set to \`display: block\`.
|
|
2902
|
+
*/
|
|
2903
|
+
|
|
2904
|
+
::-webkit-datetime-edit {
|
|
2905
|
+
display: inline-flex;
|
|
2906
|
+
}
|
|
2907
|
+
|
|
2908
|
+
/*
|
|
2909
|
+
Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
|
|
2910
|
+
*/
|
|
2911
|
+
|
|
2912
|
+
::-webkit-datetime-edit-fields-wrapper {
|
|
2913
|
+
padding: 0;
|
|
2914
|
+
}
|
|
2915
|
+
|
|
2916
|
+
::-webkit-datetime-edit,
|
|
2917
|
+
::-webkit-datetime-edit-year-field,
|
|
2918
|
+
::-webkit-datetime-edit-month-field,
|
|
2919
|
+
::-webkit-datetime-edit-day-field,
|
|
2920
|
+
::-webkit-datetime-edit-hour-field,
|
|
2921
|
+
::-webkit-datetime-edit-minute-field,
|
|
2922
|
+
::-webkit-datetime-edit-second-field,
|
|
2923
|
+
::-webkit-datetime-edit-millisecond-field,
|
|
2924
|
+
::-webkit-datetime-edit-meridiem-field {
|
|
2925
|
+
padding-block: 0;
|
|
2926
|
+
}
|
|
2927
|
+
|
|
2928
|
+
/*
|
|
2929
|
+
Center dropdown marker shown on inputs with paired \`<datalist>\`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
|
|
2930
|
+
*/
|
|
2931
|
+
|
|
2932
|
+
::-webkit-calendar-picker-indicator {
|
|
2933
|
+
line-height: 1;
|
|
2934
|
+
}
|
|
2935
|
+
|
|
2936
|
+
/*
|
|
2937
|
+
Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
|
2938
|
+
*/
|
|
2939
|
+
|
|
2940
|
+
:-moz-ui-invalid {
|
|
2941
|
+
box-shadow: none;
|
|
2942
|
+
}
|
|
2943
|
+
|
|
2944
|
+
/*
|
|
2945
|
+
Correct the inability to style the border radius in iOS Safari.
|
|
2946
|
+
*/
|
|
2947
|
+
|
|
2948
|
+
button,
|
|
2949
|
+
input:where([type='button'], [type='reset'], [type='submit']),
|
|
2950
|
+
::file-selector-button {
|
|
2951
|
+
appearance: button;
|
|
2952
|
+
}
|
|
2953
|
+
|
|
2954
|
+
/*
|
|
2955
|
+
Correct the cursor style of increment and decrement buttons in Safari.
|
|
2956
|
+
*/
|
|
2957
|
+
|
|
2958
|
+
::-webkit-inner-spin-button,
|
|
2959
|
+
::-webkit-outer-spin-button {
|
|
2960
|
+
height: auto;
|
|
2961
|
+
}
|
|
2962
|
+
|
|
2963
|
+
/*
|
|
2964
|
+
Make elements with the HTML hidden attribute stay hidden by default.
|
|
2965
|
+
*/
|
|
2966
|
+
|
|
2967
|
+
[hidden]:where(:not([hidden='until-found'])) {
|
|
2968
|
+
display: none !important;
|
|
2969
|
+
}
|
|
2970
|
+
`;
|
|
2971
|
+
var preflight_default = css$2;
|
|
2972
|
+
|
|
2973
|
+
//#endregion
|
|
2974
|
+
//#region src/tailwind/css/theme.ts
|
|
2975
|
+
const css$1 = `
|
|
2976
|
+
@theme default {
|
|
2977
|
+
--font-sans:
|
|
2978
|
+
ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
2979
|
+
'Noto Color Emoji';
|
|
2980
|
+
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
2981
|
+
--font-mono:
|
|
2982
|
+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
|
2983
|
+
monospace;
|
|
2984
|
+
|
|
2985
|
+
--color-red-50: oklch(97.1% 0.013 17.38);
|
|
2986
|
+
--color-red-100: oklch(93.6% 0.032 17.717);
|
|
2987
|
+
--color-red-200: oklch(88.5% 0.062 18.334);
|
|
2988
|
+
--color-red-300: oklch(80.8% 0.114 19.571);
|
|
2989
|
+
--color-red-400: oklch(70.4% 0.191 22.216);
|
|
2990
|
+
--color-red-500: oklch(63.7% 0.237 25.331);
|
|
2991
|
+
--color-red-600: oklch(57.7% 0.245 27.325);
|
|
2992
|
+
--color-red-700: oklch(50.5% 0.213 27.518);
|
|
2993
|
+
--color-red-800: oklch(44.4% 0.177 26.899);
|
|
2994
|
+
--color-red-900: oklch(39.6% 0.141 25.723);
|
|
2995
|
+
--color-red-950: oklch(25.8% 0.092 26.042);
|
|
2996
|
+
|
|
2997
|
+
--color-orange-50: oklch(98% 0.016 73.684);
|
|
2998
|
+
--color-orange-100: oklch(95.4% 0.038 75.164);
|
|
2999
|
+
--color-orange-200: oklch(90.1% 0.076 70.697);
|
|
3000
|
+
--color-orange-300: oklch(83.7% 0.128 66.29);
|
|
3001
|
+
--color-orange-400: oklch(75% 0.183 55.934);
|
|
3002
|
+
--color-orange-500: oklch(70.5% 0.213 47.604);
|
|
3003
|
+
--color-orange-600: oklch(64.6% 0.222 41.116);
|
|
3004
|
+
--color-orange-700: oklch(55.3% 0.195 38.402);
|
|
3005
|
+
--color-orange-800: oklch(47% 0.157 37.304);
|
|
3006
|
+
--color-orange-900: oklch(40.8% 0.123 38.172);
|
|
3007
|
+
--color-orange-950: oklch(26.6% 0.079 36.259);
|
|
3008
|
+
|
|
3009
|
+
--color-amber-50: oklch(98.7% 0.022 95.277);
|
|
3010
|
+
--color-amber-100: oklch(96.2% 0.059 95.617);
|
|
3011
|
+
--color-amber-200: oklch(92.4% 0.12 95.746);
|
|
3012
|
+
--color-amber-300: oklch(87.9% 0.169 91.605);
|
|
3013
|
+
--color-amber-400: oklch(82.8% 0.189 84.429);
|
|
3014
|
+
--color-amber-500: oklch(76.9% 0.188 70.08);
|
|
3015
|
+
--color-amber-600: oklch(66.6% 0.179 58.318);
|
|
3016
|
+
--color-amber-700: oklch(55.5% 0.163 48.998);
|
|
3017
|
+
--color-amber-800: oklch(47.3% 0.137 46.201);
|
|
3018
|
+
--color-amber-900: oklch(41.4% 0.112 45.904);
|
|
3019
|
+
--color-amber-950: oklch(27.9% 0.077 45.635);
|
|
3020
|
+
|
|
3021
|
+
--color-yellow-50: oklch(98.7% 0.026 102.212);
|
|
3022
|
+
--color-yellow-100: oklch(97.3% 0.071 103.193);
|
|
3023
|
+
--color-yellow-200: oklch(94.5% 0.129 101.54);
|
|
3024
|
+
--color-yellow-300: oklch(90.5% 0.182 98.111);
|
|
3025
|
+
--color-yellow-400: oklch(85.2% 0.199 91.936);
|
|
3026
|
+
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
|
3027
|
+
--color-yellow-600: oklch(68.1% 0.162 75.834);
|
|
3028
|
+
--color-yellow-700: oklch(55.4% 0.135 66.442);
|
|
3029
|
+
--color-yellow-800: oklch(47.6% 0.114 61.907);
|
|
3030
|
+
--color-yellow-900: oklch(42.1% 0.095 57.708);
|
|
3031
|
+
--color-yellow-950: oklch(28.6% 0.066 53.813);
|
|
3032
|
+
|
|
3033
|
+
--color-lime-50: oklch(98.6% 0.031 120.757);
|
|
3034
|
+
--color-lime-100: oklch(96.7% 0.067 122.328);
|
|
3035
|
+
--color-lime-200: oklch(93.8% 0.127 124.321);
|
|
3036
|
+
--color-lime-300: oklch(89.7% 0.196 126.665);
|
|
3037
|
+
--color-lime-400: oklch(84.1% 0.238 128.85);
|
|
3038
|
+
--color-lime-500: oklch(76.8% 0.233 130.85);
|
|
3039
|
+
--color-lime-600: oklch(64.8% 0.2 131.684);
|
|
3040
|
+
--color-lime-700: oklch(53.2% 0.157 131.589);
|
|
3041
|
+
--color-lime-800: oklch(45.3% 0.124 130.933);
|
|
3042
|
+
--color-lime-900: oklch(40.5% 0.101 131.063);
|
|
3043
|
+
--color-lime-950: oklch(27.4% 0.072 132.109);
|
|
3044
|
+
|
|
3045
|
+
--color-green-50: oklch(98.2% 0.018 155.826);
|
|
3046
|
+
--color-green-100: oklch(96.2% 0.044 156.743);
|
|
3047
|
+
--color-green-200: oklch(92.5% 0.084 155.995);
|
|
3048
|
+
--color-green-300: oklch(87.1% 0.15 154.449);
|
|
3049
|
+
--color-green-400: oklch(79.2% 0.209 151.711);
|
|
3050
|
+
--color-green-500: oklch(72.3% 0.219 149.579);
|
|
3051
|
+
--color-green-600: oklch(62.7% 0.194 149.214);
|
|
3052
|
+
--color-green-700: oklch(52.7% 0.154 150.069);
|
|
3053
|
+
--color-green-800: oklch(44.8% 0.119 151.328);
|
|
3054
|
+
--color-green-900: oklch(39.3% 0.095 152.535);
|
|
3055
|
+
--color-green-950: oklch(26.6% 0.065 152.934);
|
|
3056
|
+
|
|
3057
|
+
--color-emerald-50: oklch(97.9% 0.021 166.113);
|
|
3058
|
+
--color-emerald-100: oklch(95% 0.052 163.051);
|
|
3059
|
+
--color-emerald-200: oklch(90.5% 0.093 164.15);
|
|
3060
|
+
--color-emerald-300: oklch(84.5% 0.143 164.978);
|
|
3061
|
+
--color-emerald-400: oklch(76.5% 0.177 163.223);
|
|
3062
|
+
--color-emerald-500: oklch(69.6% 0.17 162.48);
|
|
3063
|
+
--color-emerald-600: oklch(59.6% 0.145 163.225);
|
|
3064
|
+
--color-emerald-700: oklch(50.8% 0.118 165.612);
|
|
3065
|
+
--color-emerald-800: oklch(43.2% 0.095 166.913);
|
|
3066
|
+
--color-emerald-900: oklch(37.8% 0.077 168.94);
|
|
3067
|
+
--color-emerald-950: oklch(26.2% 0.051 172.552);
|
|
3068
|
+
|
|
3069
|
+
--color-teal-50: oklch(98.4% 0.014 180.72);
|
|
3070
|
+
--color-teal-100: oklch(95.3% 0.051 180.801);
|
|
3071
|
+
--color-teal-200: oklch(91% 0.096 180.426);
|
|
3072
|
+
--color-teal-300: oklch(85.5% 0.138 181.071);
|
|
3073
|
+
--color-teal-400: oklch(77.7% 0.152 181.912);
|
|
3074
|
+
--color-teal-500: oklch(70.4% 0.14 182.503);
|
|
3075
|
+
--color-teal-600: oklch(60% 0.118 184.704);
|
|
3076
|
+
--color-teal-700: oklch(51.1% 0.096 186.391);
|
|
3077
|
+
--color-teal-800: oklch(43.7% 0.078 188.216);
|
|
3078
|
+
--color-teal-900: oklch(38.6% 0.063 188.416);
|
|
3079
|
+
--color-teal-950: oklch(27.7% 0.046 192.524);
|
|
3080
|
+
|
|
3081
|
+
--color-cyan-50: oklch(98.4% 0.019 200.873);
|
|
3082
|
+
--color-cyan-100: oklch(95.6% 0.045 203.388);
|
|
3083
|
+
--color-cyan-200: oklch(91.7% 0.08 205.041);
|
|
3084
|
+
--color-cyan-300: oklch(86.5% 0.127 207.078);
|
|
3085
|
+
--color-cyan-400: oklch(78.9% 0.154 211.53);
|
|
3086
|
+
--color-cyan-500: oklch(71.5% 0.143 215.221);
|
|
3087
|
+
--color-cyan-600: oklch(60.9% 0.126 221.723);
|
|
3088
|
+
--color-cyan-700: oklch(52% 0.105 223.128);
|
|
3089
|
+
--color-cyan-800: oklch(45% 0.085 224.283);
|
|
3090
|
+
--color-cyan-900: oklch(39.8% 0.07 227.392);
|
|
3091
|
+
--color-cyan-950: oklch(30.2% 0.056 229.695);
|
|
3092
|
+
|
|
3093
|
+
--color-sky-50: oklch(97.7% 0.013 236.62);
|
|
3094
|
+
--color-sky-100: oklch(95.1% 0.026 236.824);
|
|
3095
|
+
--color-sky-200: oklch(90.1% 0.058 230.902);
|
|
3096
|
+
--color-sky-300: oklch(82.8% 0.111 230.318);
|
|
3097
|
+
--color-sky-400: oklch(74.6% 0.16 232.661);
|
|
3098
|
+
--color-sky-500: oklch(68.5% 0.169 237.323);
|
|
3099
|
+
--color-sky-600: oklch(58.8% 0.158 241.966);
|
|
3100
|
+
--color-sky-700: oklch(50% 0.134 242.749);
|
|
3101
|
+
--color-sky-800: oklch(44.3% 0.11 240.79);
|
|
3102
|
+
--color-sky-900: oklch(39.1% 0.09 240.876);
|
|
3103
|
+
--color-sky-950: oklch(29.3% 0.066 243.157);
|
|
3104
|
+
|
|
3105
|
+
--color-blue-50: oklch(97% 0.014 254.604);
|
|
3106
|
+
--color-blue-100: oklch(93.2% 0.032 255.585);
|
|
3107
|
+
--color-blue-200: oklch(88.2% 0.059 254.128);
|
|
3108
|
+
--color-blue-300: oklch(80.9% 0.105 251.813);
|
|
3109
|
+
--color-blue-400: oklch(70.7% 0.165 254.624);
|
|
3110
|
+
--color-blue-500: oklch(62.3% 0.214 259.815);
|
|
3111
|
+
--color-blue-600: oklch(54.6% 0.245 262.881);
|
|
3112
|
+
--color-blue-700: oklch(48.8% 0.243 264.376);
|
|
3113
|
+
--color-blue-800: oklch(42.4% 0.199 265.638);
|
|
3114
|
+
--color-blue-900: oklch(37.9% 0.146 265.522);
|
|
3115
|
+
--color-blue-950: oklch(28.2% 0.091 267.935);
|
|
3116
|
+
|
|
3117
|
+
--color-indigo-50: oklch(96.2% 0.018 272.314);
|
|
3118
|
+
--color-indigo-100: oklch(93% 0.034 272.788);
|
|
3119
|
+
--color-indigo-200: oklch(87% 0.065 274.039);
|
|
3120
|
+
--color-indigo-300: oklch(78.5% 0.115 274.713);
|
|
3121
|
+
--color-indigo-400: oklch(67.3% 0.182 276.935);
|
|
3122
|
+
--color-indigo-500: oklch(58.5% 0.233 277.117);
|
|
3123
|
+
--color-indigo-600: oklch(51.1% 0.262 276.966);
|
|
3124
|
+
--color-indigo-700: oklch(45.7% 0.24 277.023);
|
|
3125
|
+
--color-indigo-800: oklch(39.8% 0.195 277.366);
|
|
3126
|
+
--color-indigo-900: oklch(35.9% 0.144 278.697);
|
|
3127
|
+
--color-indigo-950: oklch(25.7% 0.09 281.288);
|
|
3128
|
+
|
|
3129
|
+
--color-violet-50: oklch(96.9% 0.016 293.756);
|
|
3130
|
+
--color-violet-100: oklch(94.3% 0.029 294.588);
|
|
3131
|
+
--color-violet-200: oklch(89.4% 0.057 293.283);
|
|
3132
|
+
--color-violet-300: oklch(81.1% 0.111 293.571);
|
|
3133
|
+
--color-violet-400: oklch(70.2% 0.183 293.541);
|
|
3134
|
+
--color-violet-500: oklch(60.6% 0.25 292.717);
|
|
3135
|
+
--color-violet-600: oklch(54.1% 0.281 293.009);
|
|
3136
|
+
--color-violet-700: oklch(49.1% 0.27 292.581);
|
|
3137
|
+
--color-violet-800: oklch(43.2% 0.232 292.759);
|
|
3138
|
+
--color-violet-900: oklch(38% 0.189 293.745);
|
|
3139
|
+
--color-violet-950: oklch(28.3% 0.141 291.089);
|
|
3140
|
+
|
|
3141
|
+
--color-purple-50: oklch(97.7% 0.014 308.299);
|
|
3142
|
+
--color-purple-100: oklch(94.6% 0.033 307.174);
|
|
3143
|
+
--color-purple-200: oklch(90.2% 0.063 306.703);
|
|
3144
|
+
--color-purple-300: oklch(82.7% 0.119 306.383);
|
|
3145
|
+
--color-purple-400: oklch(71.4% 0.203 305.504);
|
|
3146
|
+
--color-purple-500: oklch(62.7% 0.265 303.9);
|
|
3147
|
+
--color-purple-600: oklch(55.8% 0.288 302.321);
|
|
3148
|
+
--color-purple-700: oklch(49.6% 0.265 301.924);
|
|
3149
|
+
--color-purple-800: oklch(43.8% 0.218 303.724);
|
|
3150
|
+
--color-purple-900: oklch(38.1% 0.176 304.987);
|
|
3151
|
+
--color-purple-950: oklch(29.1% 0.149 302.717);
|
|
3152
|
+
|
|
3153
|
+
--color-fuchsia-50: oklch(97.7% 0.017 320.058);
|
|
3154
|
+
--color-fuchsia-100: oklch(95.2% 0.037 318.852);
|
|
3155
|
+
--color-fuchsia-200: oklch(90.3% 0.076 319.62);
|
|
3156
|
+
--color-fuchsia-300: oklch(83.3% 0.145 321.434);
|
|
3157
|
+
--color-fuchsia-400: oklch(74% 0.238 322.16);
|
|
3158
|
+
--color-fuchsia-500: oklch(66.7% 0.295 322.15);
|
|
3159
|
+
--color-fuchsia-600: oklch(59.1% 0.293 322.896);
|
|
3160
|
+
--color-fuchsia-700: oklch(51.8% 0.253 323.949);
|
|
3161
|
+
--color-fuchsia-800: oklch(45.2% 0.211 324.591);
|
|
3162
|
+
--color-fuchsia-900: oklch(40.1% 0.17 325.612);
|
|
3163
|
+
--color-fuchsia-950: oklch(29.3% 0.136 325.661);
|
|
3164
|
+
|
|
3165
|
+
--color-pink-50: oklch(97.1% 0.014 343.198);
|
|
3166
|
+
--color-pink-100: oklch(94.8% 0.028 342.258);
|
|
3167
|
+
--color-pink-200: oklch(89.9% 0.061 343.231);
|
|
3168
|
+
--color-pink-300: oklch(82.3% 0.12 346.018);
|
|
3169
|
+
--color-pink-400: oklch(71.8% 0.202 349.761);
|
|
3170
|
+
--color-pink-500: oklch(65.6% 0.241 354.308);
|
|
3171
|
+
--color-pink-600: oklch(59.2% 0.249 0.584);
|
|
3172
|
+
--color-pink-700: oklch(52.5% 0.223 3.958);
|
|
3173
|
+
--color-pink-800: oklch(45.9% 0.187 3.815);
|
|
3174
|
+
--color-pink-900: oklch(40.8% 0.153 2.432);
|
|
3175
|
+
--color-pink-950: oklch(28.4% 0.109 3.907);
|
|
3176
|
+
|
|
3177
|
+
--color-rose-50: oklch(96.9% 0.015 12.422);
|
|
3178
|
+
--color-rose-100: oklch(94.1% 0.03 12.58);
|
|
3179
|
+
--color-rose-200: oklch(89.2% 0.058 10.001);
|
|
3180
|
+
--color-rose-300: oklch(81% 0.117 11.638);
|
|
3181
|
+
--color-rose-400: oklch(71.2% 0.194 13.428);
|
|
3182
|
+
--color-rose-500: oklch(64.5% 0.246 16.439);
|
|
3183
|
+
--color-rose-600: oklch(58.6% 0.253 17.585);
|
|
3184
|
+
--color-rose-700: oklch(51.4% 0.222 16.935);
|
|
3185
|
+
--color-rose-800: oklch(45.5% 0.188 13.697);
|
|
3186
|
+
--color-rose-900: oklch(41% 0.159 10.272);
|
|
3187
|
+
--color-rose-950: oklch(27.1% 0.105 12.094);
|
|
3188
|
+
|
|
3189
|
+
--color-slate-50: oklch(98.4% 0.003 247.858);
|
|
3190
|
+
--color-slate-100: oklch(96.8% 0.007 247.896);
|
|
3191
|
+
--color-slate-200: oklch(92.9% 0.013 255.508);
|
|
3192
|
+
--color-slate-300: oklch(86.9% 0.022 252.894);
|
|
3193
|
+
--color-slate-400: oklch(70.4% 0.04 256.788);
|
|
3194
|
+
--color-slate-500: oklch(55.4% 0.046 257.417);
|
|
3195
|
+
--color-slate-600: oklch(44.6% 0.043 257.281);
|
|
3196
|
+
--color-slate-700: oklch(37.2% 0.044 257.287);
|
|
3197
|
+
--color-slate-800: oklch(27.9% 0.041 260.031);
|
|
3198
|
+
--color-slate-900: oklch(20.8% 0.042 265.755);
|
|
3199
|
+
--color-slate-950: oklch(12.9% 0.042 264.695);
|
|
3200
|
+
|
|
3201
|
+
--color-gray-50: oklch(98.5% 0.002 247.839);
|
|
3202
|
+
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
3203
|
+
--color-gray-200: oklch(92.8% 0.006 264.531);
|
|
3204
|
+
--color-gray-300: oklch(87.2% 0.01 258.338);
|
|
3205
|
+
--color-gray-400: oklch(70.7% 0.022 261.325);
|
|
3206
|
+
--color-gray-500: oklch(55.1% 0.027 264.364);
|
|
3207
|
+
--color-gray-600: oklch(44.6% 0.03 256.802);
|
|
3208
|
+
--color-gray-700: oklch(37.3% 0.034 259.733);
|
|
3209
|
+
--color-gray-800: oklch(27.8% 0.033 256.848);
|
|
3210
|
+
--color-gray-900: oklch(21% 0.034 264.665);
|
|
3211
|
+
--color-gray-950: oklch(13% 0.028 261.692);
|
|
3212
|
+
|
|
3213
|
+
--color-zinc-50: oklch(98.5% 0 0);
|
|
3214
|
+
--color-zinc-100: oklch(96.7% 0.001 286.375);
|
|
3215
|
+
--color-zinc-200: oklch(92% 0.004 286.32);
|
|
3216
|
+
--color-zinc-300: oklch(87.1% 0.006 286.286);
|
|
3217
|
+
--color-zinc-400: oklch(70.5% 0.015 286.067);
|
|
3218
|
+
--color-zinc-500: oklch(55.2% 0.016 285.938);
|
|
3219
|
+
--color-zinc-600: oklch(44.2% 0.017 285.786);
|
|
3220
|
+
--color-zinc-700: oklch(37% 0.013 285.805);
|
|
3221
|
+
--color-zinc-800: oklch(27.4% 0.006 286.033);
|
|
3222
|
+
--color-zinc-900: oklch(21% 0.006 285.885);
|
|
3223
|
+
--color-zinc-950: oklch(14.1% 0.005 285.823);
|
|
3224
|
+
|
|
3225
|
+
--color-neutral-50: oklch(98.5% 0 0);
|
|
3226
|
+
--color-neutral-100: oklch(97% 0 0);
|
|
3227
|
+
--color-neutral-200: oklch(92.2% 0 0);
|
|
3228
|
+
--color-neutral-300: oklch(87% 0 0);
|
|
3229
|
+
--color-neutral-400: oklch(70.8% 0 0);
|
|
3230
|
+
--color-neutral-500: oklch(55.6% 0 0);
|
|
3231
|
+
--color-neutral-600: oklch(43.9% 0 0);
|
|
3232
|
+
--color-neutral-700: oklch(37.1% 0 0);
|
|
3233
|
+
--color-neutral-800: oklch(26.9% 0 0);
|
|
3234
|
+
--color-neutral-900: oklch(20.5% 0 0);
|
|
3235
|
+
--color-neutral-950: oklch(14.5% 0 0);
|
|
3236
|
+
|
|
3237
|
+
--color-stone-50: oklch(98.5% 0.001 106.423);
|
|
3238
|
+
--color-stone-100: oklch(97% 0.001 106.424);
|
|
3239
|
+
--color-stone-200: oklch(92.3% 0.003 48.717);
|
|
3240
|
+
--color-stone-300: oklch(86.9% 0.005 56.366);
|
|
3241
|
+
--color-stone-400: oklch(70.9% 0.01 56.259);
|
|
3242
|
+
--color-stone-500: oklch(55.3% 0.013 58.071);
|
|
3243
|
+
--color-stone-600: oklch(44.4% 0.011 73.639);
|
|
3244
|
+
--color-stone-700: oklch(37.4% 0.01 67.558);
|
|
3245
|
+
--color-stone-800: oklch(26.8% 0.007 34.298);
|
|
3246
|
+
--color-stone-900: oklch(21.6% 0.006 56.043);
|
|
3247
|
+
--color-stone-950: oklch(14.7% 0.004 49.25);
|
|
3248
|
+
|
|
3249
|
+
--color-black: #000;
|
|
3250
|
+
--color-white: #fff;
|
|
3251
|
+
|
|
3252
|
+
--spacing: 0.25rem;
|
|
3253
|
+
|
|
3254
|
+
--breakpoint-sm: 40rem;
|
|
3255
|
+
--breakpoint-md: 48rem;
|
|
3256
|
+
--breakpoint-lg: 64rem;
|
|
3257
|
+
--breakpoint-xl: 80rem;
|
|
3258
|
+
--breakpoint-2xl: 96rem;
|
|
3259
|
+
|
|
3260
|
+
--container-3xs: 16rem;
|
|
3261
|
+
--container-2xs: 18rem;
|
|
3262
|
+
--container-xs: 20rem;
|
|
3263
|
+
--container-sm: 24rem;
|
|
3264
|
+
--container-md: 28rem;
|
|
3265
|
+
--container-lg: 32rem;
|
|
3266
|
+
--container-xl: 36rem;
|
|
3267
|
+
--container-2xl: 42rem;
|
|
3268
|
+
--container-3xl: 48rem;
|
|
3269
|
+
--container-4xl: 56rem;
|
|
3270
|
+
--container-5xl: 64rem;
|
|
3271
|
+
--container-6xl: 72rem;
|
|
3272
|
+
--container-7xl: 80rem;
|
|
3273
|
+
|
|
3274
|
+
--text-xs: 0.75rem;
|
|
3275
|
+
--text-xs--line-height: calc(1 / 0.75);
|
|
3276
|
+
--text-sm: 0.875rem;
|
|
3277
|
+
--text-sm--line-height: calc(1.25 / 0.875);
|
|
3278
|
+
--text-base: 1rem;
|
|
3279
|
+
--text-base--line-height: calc(1.5 / 1);
|
|
3280
|
+
--text-lg: 1.125rem;
|
|
3281
|
+
--text-lg--line-height: calc(1.75 / 1.125);
|
|
3282
|
+
--text-xl: 1.25rem;
|
|
3283
|
+
--text-xl--line-height: calc(1.75 / 1.25);
|
|
3284
|
+
--text-2xl: 1.5rem;
|
|
3285
|
+
--text-2xl--line-height: calc(2 / 1.5);
|
|
3286
|
+
--text-3xl: 1.875rem;
|
|
3287
|
+
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
3288
|
+
--text-4xl: 2.25rem;
|
|
3289
|
+
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
3290
|
+
--text-5xl: 3rem;
|
|
3291
|
+
--text-5xl--line-height: 1;
|
|
3292
|
+
--text-6xl: 3.75rem;
|
|
3293
|
+
--text-6xl--line-height: 1;
|
|
3294
|
+
--text-7xl: 4.5rem;
|
|
3295
|
+
--text-7xl--line-height: 1;
|
|
3296
|
+
--text-8xl: 6rem;
|
|
3297
|
+
--text-8xl--line-height: 1;
|
|
3298
|
+
--text-9xl: 8rem;
|
|
3299
|
+
--text-9xl--line-height: 1;
|
|
3300
|
+
|
|
3301
|
+
--font-weight-thin: 100;
|
|
3302
|
+
--font-weight-extralight: 200;
|
|
3303
|
+
--font-weight-light: 300;
|
|
3304
|
+
--font-weight-normal: 400;
|
|
3305
|
+
--font-weight-medium: 500;
|
|
3306
|
+
--font-weight-semibold: 600;
|
|
3307
|
+
--font-weight-bold: 700;
|
|
3308
|
+
--font-weight-extrabold: 800;
|
|
3309
|
+
--font-weight-black: 900;
|
|
3310
|
+
|
|
3311
|
+
--tracking-tighter: -0.05em;
|
|
3312
|
+
--tracking-tight: -0.025em;
|
|
3313
|
+
--tracking-normal: 0em;
|
|
3314
|
+
--tracking-wide: 0.025em;
|
|
3315
|
+
--tracking-wider: 0.05em;
|
|
3316
|
+
--tracking-widest: 0.1em;
|
|
3317
|
+
|
|
3318
|
+
--leading-tight: 1.25;
|
|
3319
|
+
--leading-snug: 1.375;
|
|
3320
|
+
--leading-normal: 1.5;
|
|
3321
|
+
--leading-relaxed: 1.625;
|
|
3322
|
+
--leading-loose: 2;
|
|
3323
|
+
|
|
3324
|
+
--radius-xs: 0.125rem;
|
|
3325
|
+
--radius-sm: 0.25rem;
|
|
3326
|
+
--radius-md: 0.375rem;
|
|
3327
|
+
--radius-lg: 0.5rem;
|
|
3328
|
+
--radius-xl: 0.75rem;
|
|
3329
|
+
--radius-2xl: 1rem;
|
|
3330
|
+
--radius-3xl: 1.5rem;
|
|
3331
|
+
--radius-4xl: 2rem;
|
|
3332
|
+
|
|
3333
|
+
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
|
|
3334
|
+
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
3335
|
+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
3336
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
3337
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
3338
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
3339
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
3340
|
+
|
|
3341
|
+
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
|
|
3342
|
+
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
|
|
3343
|
+
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
|
|
3344
|
+
|
|
3345
|
+
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
|
|
3346
|
+
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
|
|
3347
|
+
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
|
|
3348
|
+
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
|
|
3349
|
+
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
|
|
3350
|
+
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
|
|
3351
|
+
|
|
3352
|
+
--text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
|
|
3353
|
+
--text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
|
|
3354
|
+
--text-shadow-sm:
|
|
3355
|
+
0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
|
|
3356
|
+
--text-shadow-md:
|
|
3357
|
+
0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
|
|
3358
|
+
--text-shadow-lg:
|
|
3359
|
+
0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
|
|
3360
|
+
|
|
3361
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
3362
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
3363
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3364
|
+
|
|
3365
|
+
--animate-spin: spin 1s linear infinite;
|
|
3366
|
+
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
3367
|
+
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
3368
|
+
--animate-bounce: bounce 1s infinite;
|
|
3369
|
+
|
|
3370
|
+
@keyframes spin {
|
|
3371
|
+
to {
|
|
3372
|
+
transform: rotate(360deg);
|
|
3373
|
+
}
|
|
3374
|
+
}
|
|
3375
|
+
|
|
3376
|
+
@keyframes ping {
|
|
3377
|
+
75%,
|
|
3378
|
+
100% {
|
|
3379
|
+
transform: scale(2);
|
|
3380
|
+
opacity: 0;
|
|
3381
|
+
}
|
|
3382
|
+
}
|
|
3383
|
+
|
|
3384
|
+
@keyframes pulse {
|
|
3385
|
+
50% {
|
|
3386
|
+
opacity: 0.5;
|
|
3387
|
+
}
|
|
3388
|
+
}
|
|
3389
|
+
|
|
3390
|
+
@keyframes bounce {
|
|
3391
|
+
0%,
|
|
3392
|
+
100% {
|
|
3393
|
+
transform: translateY(-25%);
|
|
3394
|
+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
3395
|
+
}
|
|
3396
|
+
|
|
3397
|
+
50% {
|
|
3398
|
+
transform: none;
|
|
3399
|
+
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
3400
|
+
}
|
|
3401
|
+
}
|
|
3402
|
+
|
|
3403
|
+
--blur-xs: 4px;
|
|
3404
|
+
--blur-sm: 8px;
|
|
3405
|
+
--blur-md: 12px;
|
|
3406
|
+
--blur-lg: 16px;
|
|
3407
|
+
--blur-xl: 24px;
|
|
3408
|
+
--blur-2xl: 40px;
|
|
3409
|
+
--blur-3xl: 64px;
|
|
3410
|
+
|
|
3411
|
+
--perspective-dramatic: 100px;
|
|
3412
|
+
--perspective-near: 300px;
|
|
3413
|
+
--perspective-normal: 500px;
|
|
3414
|
+
--perspective-midrange: 800px;
|
|
3415
|
+
--perspective-distant: 1200px;
|
|
3416
|
+
|
|
3417
|
+
--aspect-video: 16 / 9;
|
|
3418
|
+
|
|
3419
|
+
--default-transition-duration: 150ms;
|
|
3420
|
+
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3421
|
+
--default-font-family: --theme(--font-sans, initial);
|
|
3422
|
+
--default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);
|
|
3423
|
+
--default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);
|
|
3424
|
+
--default-mono-font-family: --theme(--font-mono, initial);
|
|
3425
|
+
--default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial);
|
|
3426
|
+
--default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial);
|
|
3427
|
+
}
|
|
3428
|
+
|
|
3429
|
+
/* Deprecated */
|
|
3430
|
+
@theme default inline reference {
|
|
3431
|
+
--blur: 8px;
|
|
3432
|
+
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
3433
|
+
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
3434
|
+
--drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
|
|
3435
|
+
--radius: 0.25rem;
|
|
3436
|
+
--max-width-prose: 65ch;
|
|
3437
|
+
}
|
|
3438
|
+
`;
|
|
3439
|
+
var theme_default = css$1;
|
|
3440
|
+
|
|
3441
|
+
//#endregion
|
|
3442
|
+
//#region src/tailwind/css/utilities.ts
|
|
3443
|
+
const css = `
|
|
3444
|
+
@tailwind utilities;
|
|
3445
|
+
`;
|
|
3446
|
+
var utilities_default = css;
|
|
3447
|
+
|
|
3448
|
+
//#endregion
|
|
3449
|
+
//#region src/tailwind/setup-tailwind.ts
|
|
3450
|
+
async function setupTailwind(config) {
|
|
3451
|
+
const baseCss = `
|
|
3452
|
+
@layer theme, base, components, utilities;
|
|
3453
|
+
@import "tailwindcss/theme.css" layer(theme);
|
|
3454
|
+
@import "tailwindcss/utilities.css" layer(utilities);
|
|
3455
|
+
@config;
|
|
3456
|
+
`;
|
|
3457
|
+
const compiler = await compile(baseCss, {
|
|
3458
|
+
async loadModule(id, base, resourceHint) {
|
|
3459
|
+
if (resourceHint === "config") return {
|
|
3460
|
+
path: id,
|
|
3461
|
+
base,
|
|
3462
|
+
module: config
|
|
3463
|
+
};
|
|
3464
|
+
throw new Error(`NO-OP: should we implement support for ${resourceHint}?`);
|
|
3465
|
+
},
|
|
3466
|
+
polyfills: 0,
|
|
3467
|
+
async loadStylesheet(id, base) {
|
|
3468
|
+
if (id === "tailwindcss") return {
|
|
3469
|
+
base,
|
|
3470
|
+
path: "tailwindcss/index.css",
|
|
3471
|
+
content: css_default
|
|
3472
|
+
};
|
|
3473
|
+
if (id === "tailwindcss/preflight.css") return {
|
|
3474
|
+
base,
|
|
3475
|
+
path: id,
|
|
3476
|
+
content: preflight_default
|
|
3477
|
+
};
|
|
3478
|
+
if (id === "tailwindcss/theme.css") return {
|
|
3479
|
+
base,
|
|
3480
|
+
path: id,
|
|
3481
|
+
content: theme_default
|
|
3482
|
+
};
|
|
3483
|
+
if (id === "tailwindcss/utilities.css") return {
|
|
3484
|
+
base,
|
|
3485
|
+
path: id,
|
|
3486
|
+
content: utilities_default
|
|
3487
|
+
};
|
|
3488
|
+
throw new Error("stylesheet not supported, you can only import the ones from tailwindcss");
|
|
3489
|
+
}
|
|
3490
|
+
});
|
|
3491
|
+
let css$4 = baseCss;
|
|
3492
|
+
return {
|
|
3493
|
+
addUtilities: function addUtilities(candidates) {
|
|
3494
|
+
css$4 = compiler.build(candidates);
|
|
3495
|
+
},
|
|
3496
|
+
getStyleSheet: function getCss() {
|
|
3497
|
+
return parse(css$4);
|
|
3498
|
+
}
|
|
3499
|
+
};
|
|
3500
|
+
}
|
|
3501
|
+
|
|
3502
|
+
//#endregion
|
|
3503
|
+
//#region src/tailwind/tailwind.tsx
|
|
3504
|
+
const pixelBasedPreset = { theme: { extend: {
|
|
3505
|
+
fontSize: {
|
|
3506
|
+
xs: ["12px", { lineHeight: "16px" }],
|
|
3507
|
+
sm: ["14px", { lineHeight: "20px" }],
|
|
3508
|
+
base: ["16px", { lineHeight: "24px" }],
|
|
3509
|
+
lg: ["18px", { lineHeight: "28px" }],
|
|
3510
|
+
xl: ["20px", { lineHeight: "28px" }],
|
|
3511
|
+
"2xl": ["24px", { lineHeight: "32px" }],
|
|
3512
|
+
"3xl": ["30px", { lineHeight: "36px" }],
|
|
3513
|
+
"4xl": ["36px", { lineHeight: "36px" }],
|
|
3514
|
+
"5xl": ["48px", { lineHeight: "1" }],
|
|
3515
|
+
"6xl": ["60px", { lineHeight: "1" }],
|
|
3516
|
+
"7xl": ["72px", { lineHeight: "1" }],
|
|
3517
|
+
"8xl": ["96px", { lineHeight: "1" }],
|
|
3518
|
+
"9xl": ["144px", { lineHeight: "1" }]
|
|
3519
|
+
},
|
|
3520
|
+
spacing: {
|
|
3521
|
+
px: "1px",
|
|
3522
|
+
0: "0",
|
|
3523
|
+
.5: "2px",
|
|
3524
|
+
1: "4px",
|
|
3525
|
+
1.5: "6px",
|
|
3526
|
+
2: "8px",
|
|
3527
|
+
2.5: "10px",
|
|
3528
|
+
3: "12px",
|
|
3529
|
+
3.5: "14px",
|
|
3530
|
+
4: "16px",
|
|
3531
|
+
5: "20px",
|
|
3532
|
+
6: "24px",
|
|
3533
|
+
7: "28px",
|
|
3534
|
+
8: "32px",
|
|
3535
|
+
9: "36px",
|
|
3536
|
+
10: "40px",
|
|
3537
|
+
11: "44px",
|
|
3538
|
+
12: "48px",
|
|
3539
|
+
14: "56px",
|
|
3540
|
+
16: "64px",
|
|
3541
|
+
20: "80px",
|
|
3542
|
+
24: "96px",
|
|
3543
|
+
28: "112px",
|
|
3544
|
+
32: "128px",
|
|
3545
|
+
36: "144px",
|
|
3546
|
+
40: "160px",
|
|
3547
|
+
44: "176px",
|
|
3548
|
+
48: "192px",
|
|
3549
|
+
52: "208px",
|
|
3550
|
+
56: "224px",
|
|
3551
|
+
60: "240px",
|
|
3552
|
+
64: "256px",
|
|
3553
|
+
72: "288px",
|
|
3554
|
+
80: "320px",
|
|
3555
|
+
96: "384px"
|
|
3556
|
+
}
|
|
3557
|
+
} } };
|
|
3558
|
+
function Tailwind({ children, config }) {
|
|
3559
|
+
const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config, (_key, value) => typeof value === "function" ? value.toString() : value));
|
|
3560
|
+
let classesUsed = [];
|
|
3561
|
+
let mappedChildren = mapReactTree(children, (node) => {
|
|
3562
|
+
if (React$1.isValidElement(node)) {
|
|
3563
|
+
if (node.props.className) {
|
|
3564
|
+
const classes = node.props.className?.split(/\s+/);
|
|
3565
|
+
classesUsed = [...classesUsed, ...classes];
|
|
3566
|
+
tailwindSetup.addUtilities(classes);
|
|
3567
|
+
}
|
|
3568
|
+
}
|
|
3569
|
+
return node;
|
|
3570
|
+
});
|
|
3571
|
+
const styleSheet = tailwindSetup.getStyleSheet();
|
|
3572
|
+
sanitizeStyleSheet(styleSheet);
|
|
3573
|
+
const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
|
|
3574
|
+
const customProperties = getCustomProperties(styleSheet);
|
|
3575
|
+
const nonInlineStyles = {
|
|
3576
|
+
type: "StyleSheet",
|
|
3577
|
+
children: new List().fromArray(Array.from(nonInlinableRules.values()))
|
|
3578
|
+
};
|
|
3579
|
+
sanitizeNonInlinableRules(nonInlineStyles);
|
|
3580
|
+
const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
|
|
3581
|
+
let appliedNonInlineStyles = false;
|
|
3582
|
+
mappedChildren = mapReactTree(mappedChildren, (node) => {
|
|
3583
|
+
if (React$1.isValidElement(node)) {
|
|
3584
|
+
const elementWithInlinedStyles = cloneElementWithInlinedStyles(node, inlinableRules, nonInlinableRules, customProperties);
|
|
3585
|
+
if (elementWithInlinedStyles.type === "head") {
|
|
3586
|
+
appliedNonInlineStyles = true;
|
|
3587
|
+
const styleElement = /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: generate(nonInlineStyles) } });
|
|
3588
|
+
return React$1.cloneElement(elementWithInlinedStyles, elementWithInlinedStyles.props, styleElement, elementWithInlinedStyles.props.children);
|
|
3589
|
+
}
|
|
3590
|
+
return elementWithInlinedStyles;
|
|
3591
|
+
}
|
|
3592
|
+
return node;
|
|
3593
|
+
});
|
|
3594
|
+
if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(nonInlinableRules.keys()).join(" ")}.
|
|
3595
|
+
For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag.
|
|
3596
|
+
The Tailwind component tried finding a <head> element but was unable to find it.
|
|
3597
|
+
|
|
3598
|
+
Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth.
|
|
3599
|
+
This can also be unmail's <Head> component.`);
|
|
3600
|
+
return mappedChildren;
|
|
3601
|
+
}
|
|
3602
|
+
|
|
3603
|
+
//#endregion
|
|
3604
|
+
export { Body, Button, Column, Container, Font, Head, Heading, Hr, Html, Img, Link, Markdown, Preview, Row, Section, Tailwind, Text, pixelBasedPreset, render };
|
|
3605
|
+
//# sourceMappingURL=index.mjs.map
|