111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
// https://github.dev/unocss/unocss/tree/main/examples/vite-vue3
|
||
|
||
import { defineConfig, presetAttributify, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss';
|
||
import { presetAnimations } from 'unocss-preset-animations';
|
||
// import presetChinese, { chineseTypography } from 'unocss-preset-chinese';
|
||
import { presetShadcn } from 'unocss-preset-shadcn';
|
||
|
||
// @unocss/preset-rem-to-px
|
||
|
||
export default defineConfig({
|
||
// 默认情况下，`.ts` 和 `.js` 文件不会被提取。
|
||
// 如果你想提取它们，请使用以下配置。
|
||
// 如果你使用 shadcn-vue 或 shadcn-svelte，则必须添加以下配置。
|
||
content: {
|
||
pipeline: {
|
||
include: [
|
||
// the default
|
||
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
|
||
'src/shadcn/components/**/*.{js,ts}',
|
||
'src/components/InspiraUI/**/*.{js,ts}',
|
||
],
|
||
},
|
||
},
|
||
presets: [
|
||
presetWind3({
|
||
/* prefix: "u-", */
|
||
dark: {
|
||
dark: '.app-dark',
|
||
},
|
||
}),
|
||
presetAnimations(),
|
||
// https://github.com/unocss-community/unocss-preset-shadcn?tab=readme-ov-file#usage
|
||
// npx shadcn-vue@latest add button
|
||
presetShadcn(
|
||
{
|
||
color: 'zinc',
|
||
// With default setting for SolidUI, you need to set the darkSelector option.
|
||
darkSelector: '.app-dark',
|
||
},
|
||
{
|
||
// If you are using reka ui.
|
||
componentLibrary: 'reka',
|
||
},
|
||
),
|
||
|
||
// chineseTypography(),
|
||
// presetChinese({
|
||
// chineseType: 'simplified', // 指定文本为简体中文
|
||
// }),
|
||
|
||
// https://unocss.dev/presets/attributify
|
||
presetAttributify(),
|
||
],
|
||
|
||
shortcuts: [
|
||
{
|
||
'logo-transform': 'i-icon:pacman w-6em h-6em transform transition-800',
|
||
pacman: 'i-icon:pacman text-(pink 36)',
|
||
},
|
||
{
|
||
// https://github.com/primefaces/tailwindcss-primeui/blob/d5e903377e015b7c63cb5edf42490b9d6954ef04/src/utils/preset.js
|
||
'text-muted-color': 'text-[var(--p-text-muted-color)]',
|
||
},
|
||
],
|
||
theme: {
|
||
// https://unocss.dev/presets/wind#differences-from-tailwind-css
|
||
// https://www.npmjs.com/package/unocss-preset-animations
|
||
// https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion
|
||
animation: {
|
||
counts: {
|
||
fadeout: '1',
|
||
scalein: '1',
|
||
},
|
||
durations: {
|
||
fadeout: '0.15s',
|
||
scalein: '0.15s',
|
||
},
|
||
keyframes: {
|
||
fadeout: '{0% { opacity: 1; } 100% { opacity: 0; }}',
|
||
scalein: '{0% { opacity: 0; transform: scaleY(0.8); } 100% { opacity: 1; transform: scaleY(1); }}',
|
||
},
|
||
properties: {
|
||
fadeout: {},
|
||
scalein: {
|
||
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)',
|
||
},
|
||
},
|
||
timingFns: {
|
||
fadeout: 'linear',
|
||
scalein: 'linear',
|
||
},
|
||
},
|
||
|
||
// https://unocss.dev/config/theme#usage
|
||
colors: {
|
||
'surface-0': 'var(--p-surface-0)', // text-surface-0
|
||
'surface-900': 'var(--p-surface-900)', // text-surface-900
|
||
},
|
||
},
|
||
transformers: [
|
||
//https://unocss.dev/transformers/variant-group
|
||
transformerVariantGroup(),
|
||
|
||
// https://unocss.dev/transformers/directives
|
||
transformerDirectives(),
|
||
],
|
||
});
|
||
|
||
// text-[var(--h-gray-1)]
|
||
// <div class="i-icon:pacman text-(pink 36)" />
|