90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
// https://github.dev/unocss/unocss/tree/main/examples/vite-vue3
|
|
import { defineConfig, presetAttributify, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss';
|
|
|
|
export default defineConfig({
|
|
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: {
|
|
keyframes: {
|
|
scalein: '{0% { opacity: 0; transform: scaleY(0.8); } 100% { opacity: 1; transform: scaleY(1); }}',
|
|
fadeout: '{0% { opacity: 1; } 100% { opacity: 0; }}',
|
|
},
|
|
durations: {
|
|
scalein: '0.15s',
|
|
fadeout: '0.15s',
|
|
},
|
|
timingFns: {
|
|
scalein: 'linear',
|
|
fadeout: 'linear',
|
|
},
|
|
properties: {
|
|
scalein: {
|
|
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)',
|
|
},
|
|
fadeout: {},
|
|
},
|
|
counts: {
|
|
scalein: '1',
|
|
fadeout: '1',
|
|
},
|
|
},
|
|
|
|
// https://unocss.dev/config/theme#usage
|
|
colors: {
|
|
// TODO: Add colors
|
|
'surface-0': 'var(--p-surface-0)',
|
|
},
|
|
},
|
|
|
|
shortcuts: [
|
|
{
|
|
'logo-transform': 'i-icon:pacman w-6em h-6em transform transition-800',
|
|
pacman: 'i-icon:pacman text-(pink 36)',
|
|
},
|
|
],
|
|
presets: [
|
|
presetUno({
|
|
/* prefix: "u-", */
|
|
}),
|
|
|
|
// https://unocss.dev/presets/rem-to-px
|
|
// presetRemToPx({ baseFontSize: 4 }),
|
|
|
|
// https://unocss.dev/presets/attributify
|
|
presetAttributify(),
|
|
|
|
// presetIcons({
|
|
// /*extraProperties: {
|
|
// display: "inline-block",
|
|
// "vertical-align": "middle",
|
|
// },*/
|
|
// cdn: 'https://esm.sh/',
|
|
// customizations: {
|
|
// iconCustomizer(collection, icon, props) {
|
|
// props.width = '1em';
|
|
// props.height = '1em';
|
|
// },
|
|
// },
|
|
// collections: {
|
|
// icon: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
|
|
// return svg.replace(/#000000|#000/g, 'currentColor');
|
|
// }),
|
|
// carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default),
|
|
// },
|
|
// warn: true,
|
|
// }), // https://unocss.dev/presets/icons
|
|
],
|
|
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)" />
|