mirror of
https://github.com/moeru-ai/airi.git
synced 2026-04-28 06:29:33 +00:00
283 lines
9.5 KiB
TypeScript
283 lines
9.5 KiB
TypeScript
import type { Preset } from 'unocss'
|
|
|
|
import { presetChromatic } from '@proj-airi/unocss-preset-chromatic'
|
|
import { blackA, cyan, grass, green, indigo, mauve, purple, red, slate, teal, violet } from '@radix-ui/colors'
|
|
import { defineConfig, presetAttributify, presetIcons, presetTypography, presetWebFonts, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss'
|
|
|
|
export default defineConfig({
|
|
presets: [
|
|
presetAttributify(),
|
|
presetTypography({
|
|
cssExtend: {
|
|
'a': {
|
|
'color': '#223f5dff',
|
|
'text-decoration': 'underline',
|
|
'text-decoration-style': 'dotted',
|
|
'text-decoration-color': '#9fa4b1ff',
|
|
'transition': 'color 0.2s ease-in-out',
|
|
},
|
|
'a:hover': {
|
|
'--primary': '207 62% 59%',
|
|
'color': 'hsl(var(--primary))',
|
|
},
|
|
'.dark a': {
|
|
'color': '#9ca0a4',
|
|
'text-decoration-color': '#4b5056',
|
|
},
|
|
'code::before': {
|
|
content: 'normal',
|
|
},
|
|
'code::after': {
|
|
content: 'normal',
|
|
},
|
|
'pre': {
|
|
'margin-top': '0.5rem',
|
|
'margin-bottom': '0',
|
|
},
|
|
'details': {
|
|
'margin-top': '0.5rem',
|
|
'margin-bottom': '0.5rem',
|
|
'padding': '0.5rem 1rem',
|
|
'background-color': '#a6ceef1a',
|
|
},
|
|
'.dark details': {
|
|
'background-color': '#5870840f',
|
|
},
|
|
'ul': {
|
|
'margin-top': '0.25rem',
|
|
'margin-bottom': '0.25rem',
|
|
},
|
|
'li': {
|
|
'margin-top': '0',
|
|
'margin-bottom': '0',
|
|
},
|
|
},
|
|
}),
|
|
presetWind3(),
|
|
presetWebFonts({
|
|
fonts: {
|
|
'sans': {
|
|
name: 'DM Sans Variable',
|
|
provider: 'none',
|
|
},
|
|
'serif': {
|
|
name: 'DM Serif Display',
|
|
provider: 'none',
|
|
},
|
|
'mono': {
|
|
name: 'DM Mono',
|
|
provider: 'none',
|
|
},
|
|
'sans-rounded': {
|
|
name: 'Comfortaa Variable',
|
|
provider: 'none',
|
|
},
|
|
'mystery-quest': {
|
|
name: 'Mystery Quest',
|
|
},
|
|
'grandstander': {
|
|
name: 'Grandstander',
|
|
},
|
|
},
|
|
}),
|
|
presetIcons(),
|
|
presetChromatic({
|
|
baseHue: 220.44,
|
|
colors: {
|
|
primary: 0,
|
|
complementary: 180,
|
|
},
|
|
}) as Preset,
|
|
],
|
|
content: {
|
|
filesystem: [
|
|
'.vitepress/**/*.{js,ts,vue}',
|
|
'content/**/*.md',
|
|
],
|
|
},
|
|
safelist: [
|
|
'-ml-8',
|
|
'top-0',
|
|
'hidden',
|
|
'border-0',
|
|
'opacity-0',
|
|
'group-hover:opacity-100',
|
|
'focus:opacity-100',
|
|
'lg:flex',
|
|
'transition-opacity',
|
|
'duration-200',
|
|
'ease-in-out',
|
|
'[&_span]:focus:opacity-100',
|
|
'[&_span_>_span]:focus:outline',
|
|
],
|
|
theme: {
|
|
fontFamily: {
|
|
'sans': `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
|
|
'sans-rounded': `"DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
|
|
'sans-serif-halloween-secondary': `"Grandstander", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
|
|
'sans-serif-halloween': `"Mystery Quest", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
|
|
},
|
|
colors: {
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
code: 'hsl(var(--code))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))',
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))',
|
|
},
|
|
...blackA,
|
|
...mauve,
|
|
...violet,
|
|
...green,
|
|
...red,
|
|
...grass,
|
|
...teal,
|
|
...cyan,
|
|
...indigo,
|
|
...purple,
|
|
...slate,
|
|
},
|
|
/**
|
|
* https://github.com/unocss/unocss/blob/1031312057a3bea1082b7d938eb2ad640f57613a/packages-presets/preset-wind4/src/theme/animate.ts
|
|
* https://unocss.dev/presets/wind4#transformdirectives
|
|
*/
|
|
animation: {
|
|
keyframes: {
|
|
overlayShow: '{from{opacity:0}to{opacity:1}}',
|
|
contentShow: '{from{opacity:0;transform:translate(-50%, -48%) scale(0.96)}to{opacity:1;transform:translate(-50%, -50%) scale(1)}}',
|
|
slideDownAndFade: '{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}',
|
|
slideLeftAndFade: '{from{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}',
|
|
slideUpAndFade: '{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}',
|
|
slideRightAndFade: '{from{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}',
|
|
slideDown: '{from{height:0}to{height:var(--reka-collapsible-content-height)}}',
|
|
slideUp: '{from{height:var(--reka-collapsible-content-height)}to{height:0}}',
|
|
enterFromRight: '{from{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}',
|
|
enterFromLeft: '{from{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}',
|
|
exitToRight: '{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}',
|
|
exitToLeft: '{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}',
|
|
scaleIn: '{from{opacity:0;transform:rotateX(-10deg) scale(0.9)}to{opacity:1;transform:rotateX(0deg) scale(1)}}',
|
|
scaleOut: '{from{opacity:1;transform:rotateX(0deg) scale(1)}to{opacity:0;transform:rotateX(-10deg) scale(0.95)}}',
|
|
fadeIn: '{from{opacity:0}to{opacity:1}}',
|
|
fadeOut: '{from{opacity:1}to{opacity:0}}',
|
|
hide: '{from{opacity:1}to{opacity:0}}',
|
|
slideIn: '{from{transform:translateX(calc(100% + var(--viewport-padding)))}to{transform:translateX(0)}}',
|
|
swipeOut: '{from{transform:translateX(var(--reka-toast-swipe-end-x))}to{transform:translateX(calc(100% + var(--viewport-padding)))}}',
|
|
text: '{0%,100%{background-size:200% 200%;background-position:left center}50%{background-size:200% 200%;background-position:right center}}',
|
|
progress: '{0%{background-position:0 0}100%{background-position:30px 30px}}',
|
|
},
|
|
durations: {
|
|
overlayShow: '150ms',
|
|
contentShow: '150ms',
|
|
slideDownAndFade: '400ms',
|
|
slideLeftAndFade: '400ms',
|
|
slideUpAndFade: '400ms',
|
|
slideRightAndFade: '400ms',
|
|
slideDown: '300ms',
|
|
slideUp: '300ms',
|
|
scaleIn: '200ms',
|
|
scaleOut: '200ms',
|
|
fadeIn: '200ms',
|
|
fadeOut: '200ms',
|
|
enterFromLeft: '250ms',
|
|
enterFromRight: '250ms',
|
|
exitToLeft: '250ms',
|
|
exitToRight: '250ms',
|
|
hide: '100ms',
|
|
slideIn: '150ms',
|
|
swipeOut: '100ms',
|
|
text: '5s',
|
|
progress: '1s',
|
|
},
|
|
timingFns: {
|
|
overlayShow: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
contentShow: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
slideDownAndFade: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
slideLeftAndFade: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
slideUpAndFade: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
slideRightAndFade: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
slideDown: 'cubic-bezier(0.87, 0, 0.13, 1)',
|
|
slideUp: 'cubic-bezier(0.87, 0, 0.13, 1)',
|
|
scaleIn: 'ease',
|
|
scaleOut: 'ease',
|
|
fadeIn: 'ease',
|
|
fadeOut: 'ease',
|
|
enterFromLeft: 'ease',
|
|
enterFromRight: 'ease',
|
|
exitToLeft: 'ease',
|
|
exitToRight: 'ease',
|
|
hide: 'ease-in',
|
|
slideIn: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
swipeOut: 'ease-out',
|
|
text: 'ease',
|
|
progress: 'linear',
|
|
},
|
|
counts: {
|
|
text: 'infinite',
|
|
progress: 'infinite',
|
|
},
|
|
},
|
|
},
|
|
shortcuts: {
|
|
'bg-gradient-radial': 'bg-gradient-radial-[var(--tw-gradient-stops)]',
|
|
},
|
|
rules: [
|
|
[/^bg-gradient-radial-\[(.+)\]$/, ([, d]) => ({ 'background-image': `radial-gradient(${d})` })],
|
|
],
|
|
preflights: [
|
|
{
|
|
getCSS: () => {
|
|
return `
|
|
html,:host {
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%;
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
tab-size: 4;
|
|
font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
font-feature-settings: normal;
|
|
font-variation-settings: normal;
|
|
-webkit-tap-highlight-color: transparent
|
|
}
|
|
|
|
code,kbd,samp,pre {
|
|
font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-feature-settings: normal;
|
|
font-variation-settings: normal;
|
|
font-size: 1em
|
|
}
|
|
`
|
|
},
|
|
},
|
|
],
|
|
transformers: [
|
|
transformerDirectives(),
|
|
transformerVariantGroup(),
|
|
],
|
|
})
|