118 lines
3.1 KiB
TypeScript
118 lines
3.1 KiB
TypeScript
import {
|
|
defineConfig,
|
|
presetAttributify,
|
|
presetIcons,
|
|
presetUno,
|
|
presetWebFonts,
|
|
transformerDirectives,
|
|
transformerVariantGroup
|
|
} from "unocss";
|
|
import { i18n } from "./configs/i18n";
|
|
import presetAnimations from "unocss-preset-animations";
|
|
import { presetShadcn } from "unocss-preset-shadcn";
|
|
|
|
export default defineConfig({
|
|
shortcuts: [
|
|
{
|
|
"flex-center": "flex items-center justify-center",
|
|
hstack: "flex items-center",
|
|
"hide-on-mobile": "lt-md:hidden",
|
|
"ring-when-focus":
|
|
"ring-offset-background focus-visible:(outline-none ring-2 ring-ring ring-offset-2)",
|
|
"shadow-c": "shadow shadow-gray-300 dark:shadow-neutral-900",
|
|
"resume-card":
|
|
"relative mx-auto rounded-md duration-150 hover:(-translate-y-3 drop-shadow-xl)"
|
|
}
|
|
],
|
|
preflights: [
|
|
{
|
|
getCSS: () => `
|
|
:root {
|
|
--success: 142 71% 29%;
|
|
--info: 224 77% 48%;
|
|
}
|
|
|
|
.dark {
|
|
--success: 142 76% 40%;
|
|
--info: 209 87% 57%;
|
|
}
|
|
`
|
|
}
|
|
],
|
|
theme: {
|
|
breakpoints: {
|
|
sm: "641px",
|
|
md: "769px",
|
|
lg: "1025px"
|
|
},
|
|
colors: {
|
|
success: "hsl(var(--success))",
|
|
info: "hsl(var(--info))"
|
|
}
|
|
},
|
|
presets: [
|
|
presetUno(),
|
|
presetAttributify(),
|
|
presetIcons({
|
|
extraProperties: {
|
|
display: "inline-block"
|
|
}
|
|
}),
|
|
presetWebFonts({
|
|
fonts: {
|
|
ui: "Lato:400,700"
|
|
}
|
|
}),
|
|
presetAnimations(),
|
|
presetShadcn(
|
|
{
|
|
color: {
|
|
base: "orange",
|
|
light: {
|
|
background: "0 0% 100%",
|
|
foreground: "215 25% 27%",
|
|
card: "0 0% 100%",
|
|
"card-foreground": "215 25% 27%",
|
|
popover: "0 0% 100%",
|
|
"popover-foreground": "215 25% 27%",
|
|
secondary: "220 13% 91%",
|
|
"secondary-foreground": "220.9 39.3% 11%", // gray
|
|
muted: "220 14.3% 95.9%", // gray
|
|
"muted-foreground": "220 8.9% 46.1%", // gray
|
|
accent: "220 14.3% 95.9%", // gray
|
|
"accent-foreground": "220.9 39.3% 11%", // gray
|
|
border: "216 12% 85%",
|
|
input: "216 12% 85%"
|
|
},
|
|
dark: {
|
|
background: "213 12% 15%",
|
|
foreground: "0 0% 90%",
|
|
card: "213 12% 15%",
|
|
"card-foreground": "0 0% 90%",
|
|
popover: "213 12% 15%",
|
|
"popover-foreground": "0 0% 90%",
|
|
secondary: "230 5% 36%",
|
|
"secondary-foreground": "0 0% 98%", // neutral
|
|
muted: "220 10% 21%",
|
|
"muted-foreground": "0 0% 63.9%", // neutral
|
|
accent: "220 10% 21%",
|
|
"accent-foreground": "0 0% 98%", // neutral
|
|
border: "0 0% 45%",
|
|
input: "0 0% 45%"
|
|
}
|
|
}
|
|
},
|
|
false
|
|
)
|
|
],
|
|
transformers: [transformerDirectives(), transformerVariantGroup()],
|
|
content: {
|
|
pipeline: {
|
|
// https://github.com/fisand/unocss-preset-shadcn
|
|
include: [/\.ts/, /\.vue$/, /\.vue\?vue/]
|
|
}
|
|
},
|
|
// @ts-expect-error icon is a customized key
|
|
safelist: i18n.locales.map((item) => item.icon)
|
|
});
|