/ uno.config.ts
uno.config.ts
  1  // uno.config.ts
  2  import {
  3  	defineConfig,
  4  	presetTypography,
  5  	transformerDirectives,
  6  	presetIcons,
  7  	presetWebFonts,
  8  	transformerVariantGroup,
  9  	presetWind3,
 10  	Preset
 11  } from "unocss";
 12  import { presetScrollbar } from 'unocss-preset-scrollbar'
 13  import presetCorvu from '@corvu/unocss'
 14  
 15  
 16  export default defineConfig({
 17  	transformers: [transformerDirectives(), transformerVariantGroup()],
 18  	shortcuts: {
 19  		btn: "py-2 px-4 font-semibold rounded-lg shadow-md",
 20  	},
 21  
 22  	theme: {
 23  		fontSize: {
 24  			sm: "15px",
 25  			md: "17px",
 26  		},
 27  
 28  		fontFamily: {
 29  			sans: ["PingFang SC", "Hiragino Sans GB", "Wotfard", "TsangerYunHei W04"],
 30  			serif: ["PingFang SC", "Hiragino Sans GB", "Wotfard", "Microsoft YaHei"],
 31  			mono: ["Microsoft YaHei"]
 32  		},
 33  
 34  		breakpoints: {
 35  			sm: "640px",
 36  			md: "768px",
 37  			lg: "1024px",
 38  			xl: "1280px",
 39  			"2xl": "1440px",
 40  			"3xl": "1920px",
 41  			"4xl": "2560px",
 42  		},
 43  		animation: {
 44  			keyframes: {
 45  				expand: '{0% { height: 0px; } 100% { height: var(--corvu-disclosure-content-height); }}',
 46  				collapse: '{0% { height: var(--corvu-disclosure-content-height); } 100% { height: 0px; }}'
 47  			},
 48  			durations: {
 49  				expand: "300ms",
 50  				collapse: "200ms"
 51  			},
 52  			timingFns: {
 53  				expand: "cubic-bezier(0.32,0.72,0,0.75)",
 54  				collapse: "cubic-bezier(0.32,0.72,0,0.75)"
 55  			},
 56  		},
 57  		colors: {
 58  			sprout: {
 59  				50: "#f3f6ef",
 60  				100: "#e4ecdb",
 61  				200: "#ccdabc",
 62  				300: "#b5caa0",
 63  				400: "#8dab70",
 64  				500: "#6f9052",
 65  				600: "#55713f",
 66  				700: "#435833",
 67  				800: "#39472d",
 68  				900: "#313e29",
 69  				950: "#182013",
 70  			},
 71  			chill: {
 72  				50: "#f2f9f9",
 73  				100: "#ddeff0",
 74  				200: "#bfe0e2",
 75  				300: "#92cace",
 76  				400: "#5faab1",
 77  				500: "#438e96",
 78  				600: "#3b757f",
 79  				700: "#356169",
 80  				800: "#325158",
 81  				900: "#2d464c",
 82  				950: "#1a2c32",
 83  			},
 84  			ouchi: {
 85  				50: "#f8f7fb",
 86  				100: "#f0f0f7",
 87  				200: "#e5e4f0",
 88  				300: "#d0cde5",
 89  				400: "#b7b0d5",
 90  				500: "#9b90c2",
 91  				600: "#8776b1",
 92  				700: "#75649d",
 93  				800: "#625384",
 94  				900: "#52466c",
 95  				950: "#342d48",
 96  			},
 97  			corvu: {
 98  				bg: '#f3f1fe',
 99  				100: '#e6e2fd',
100  				200: '#d4cbfb',
101  				300: '#bcacf6',
102  				400: '#a888f1',
103  				text: '#180f24',
104  			},
105  			cerise: {
106  				50: "#fef2f4",
107  				100: "#fde6e9",
108  				200: "#fbd0d9",
109  				300: "#f7aab9",
110  				400: "#f27a93",
111  				500: "#e63f66",
112  				600: "#d42a5b",
113  				700: "#b21e4b",
114  				800: "#951c45",
115  				900: "#801b40",
116  				950: "#470a1f",
117  			},
118  		},
119  	},
120  	presets: [
121  		presetWind3(),
122  		presetTypography({
123  			cssExtend: {
124  				"blockquote p:first-of-type::before": { content: "none" },
125  				"blockquote p:first-of-type::after": { content: "none" },
126  				"code::before": {
127  					content: "none",
128  				},
129  				"code::after": {
130  					content: "none",
131  				},
132  				a: {
133  					"text-decoration-color": "#b5caa0",
134  				},
135  				h1: {
136  					margin: "1rem 0", // h1 is always at the top of the page, so only margin 1 * root font size
137  					"font-size": "1.65em",
138  				},
139  				h2: {
140  					margin: "1.75em 0 .5em",
141  					"font-size": "1.55em",
142  				},
143  			},
144  		}),
145  		presetCorvu() as unknown as Preset<any>,
146  		presetIcons(),
147  		presetScrollbar({}),
148  		presetWebFonts({
149  			provider: 'bunny',
150  			fonts: {
151  				mono: ['Fira Code:300,500'],
152  				serif: ['spectral']
153  			},
154  		}),
155  	],
156  });