/ 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 });