experimenting with making decentralized fanfic archives on atproto. github mirror: https://github.com/haetae-bit/fanfic-atproto
haetae.tngl.sh
1import { defineConfig, presetTypography, presetWind4, presetIcons, transformerDirectives, type PresetWind4Theme, transformerVariantGroup } from "unocss";
2import { presetDaisy } from "@ameinhardt/unocss-preset-daisy";
3// @ts-expect-error
4import theme from 'daisyui/functions/variables.js';
5
6export default defineConfig<PresetWind4Theme>({
7 outputToCssLayers: true,
8 layers: {
9 'properties': -6,
10 'theme': -5,
11 'base': -4,
12 'daisy-base': -3,
13 'daisy-components': -2,
14 'shortcuts': -1,
15 'custom-theme': 0,
16 'custom-components': 1,
17 'default': 2,
18 'typography': 3,
19 },
20 presets: [
21 presetWind4(),
22 presetDaisy(),
23 presetIcons({
24 collections: {
25 lca: () => import("@iconify-json/lucide-lab/icons.json").then(i => i.default),
26 lc: () => import("@iconify-json/lucide/icons.json").then(i => i.default),
27 },
28 extraProperties: {
29 display: 'inline-block',
30 }
31 }),
32 presetTypography({
33 colorScheme: {
34 "body": ["color-mix(in oklab,var(--color-base-content)80%,#0000)", "color-mix(in oklab,var(--color-base-content)80%,#0000)"],
35 "headings": ["var(--color-base-content)", "var(--color-base-content)"],
36 "lead": ["var(--color-base-content)", "var(--color-base-content)"],
37 "links": ["var(--color-content)", "var(--color-content)"],
38 "bold": ["var(--color-base-content)", "var(--color-base-content)"],
39 "counters": ["var(--color-base-content)", "var(--color-base-content)"],
40 "bullets": ["color-mix(in oklab,var(--color-base-content)50%,#0000)", "color-mix(in oklab,var(--color-base-content)50%,#0000)"],
41 "hr": ["color-mix(in oklab,var(--color-base-content)20%,#0000)", "color-mix(in oklab,var(--color-base-content)20%,#0000)"],
42 "quotes": ["var(--color-base-content)", "var(--color-base-content)"],
43 "quote-borders": ["color-mix(in oklab,var(--color-base-content)20%,#0000)", "color-mix(in oklab,var(--color-base-content)20%,#0000)"],
44 "captions": ["color-mix(in oklab,var(--color-base-content)50%,#0000)", "color-mix(in oklab,var(--color-base-content)50%,#0000)"],
45 "kbd": ["color-mix(in oklab,var(--color-base-content)80%,#0000)", "color-mix(in oklab,var(--color-base-content)80%,#0000)"],
46 "kbd-shadows": ["oklab(21% -.00316127 -.0338527/.1)", "oklab(21% -.00316127 -.0338527/.1)"],
47 "code": ["var(--color-base-content)", "var(--color-base-content)"],
48 "pre-code": ["var(--color-neutral-content)", "var(--color-neutral-content)"],
49 "pre-bg": ["var(--color-neutral)", "var(--color-neutral)"],
50 "th-borders": ["color-mix(in oklab,var(--color-base-content)50%,#0000)", "color-mix(in oklab,var(--color-base-content)50%,#0000)"],
51 "td-borders": ["color-mix(in oklab,var(--color-base-content)20%,#0000)", "color-mix(in oklab,var(--color-base-content)20%,#0000)"]
52 },
53 }),
54 ],
55 separators: [":"],
56 shortcuts: {
57 "heading-1": "font-display text-5xl",
58 "heading-2": "font-display text-4xl",
59 "heading-3": "font-display text-3xl",
60 "heading-4": "font-sans text-2xl",
61 "heading-5": "font-sans text-xl",
62 "heading-6": "font-sans text-lg",
63 },
64 transformers: [
65 transformerDirectives(),
66 transformerVariantGroup(),
67 ],
68 theme: {
69 ...theme,
70 font: {
71 sans: "var(--quattro)",
72 mono: "var(--intel-mono)",
73 display: "var(--jacquard-12)",
74 },
75 leading: 1.5,
76 text: {
77 xs: {
78 fontSize: "var(--step--2)",
79 },
80 sm: {
81 fontSize: "var(--step--1)",
82 },
83 base: {
84 fontSize: "var(--step-0)",
85 },
86 lg: {
87 fontSize: "var(--step-1)",
88 },
89 xl: {
90 fontSize: "var(--step-2)",
91 },
92 "2xl": {
93 fontSize: "var(--step-3)",
94 },
95 "3xl": {
96 fontSize: "var(--step-4)",
97 },
98 "4xl": {
99 fontSize: "var(--step-5)",
100 },
101 "5xl": {
102 fontSize: "var(--step-6)",
103 },
104 "6xl": {
105 fontSize: "var(--step-7)",
106 },
107 "7xl": {
108 fontSize: "var(--step-8)",
109 },
110 "8xl": {
111 fontSize: "var(--step-9)",
112 },
113 "9xl": {
114 fontSize: "var(--step-10)",
115 },
116 },
117 },
118});