nimpkgs/unocss.config.ts

98 lines
2.3 KiB
TypeScript
Raw Normal View History

2023-11-12 18:25:29 -06:00
import fs from "fs/promises";
import { variants } from "@catppuccin/palette";
2023-11-22 23:43:36 -06:00
import { defineConfig, presetUno, presetIcons } from "unocss";
2023-11-12 18:25:29 -06:00
2023-11-22 23:43:36 -06:00
const generatePalette = (): { [key: string]: string } => {
const colors: { [key: string]: string } = {};
2023-11-12 18:25:29 -06:00
Object.keys(variants.mocha).forEach((colorName) => {
const sanitizedName = colorName
.replace("0", "zero")
.replace("1", "one")
.replace("2", "two");
colors[sanitizedName] = variants.mocha[colorName].hex;
});
return colors;
};
const catppuccinColors = generatePalette()
export default defineConfig({
preflights: [
{
layer: "reset",
getCSS: () =>
fs.readFile("node_modules/@unocss/reset/tailwind.css", "utf-8"),
},
{
layer: "mycss",
2023-11-22 23:43:36 -06:00
getCSS: () => `
2023-11-12 18:25:29 -06:00
body {
font-family: 'Recursive', monospace;
font-variation-settings: 'MONO' 1;
}
#menu-toggle:checked + #menu {
display: block;
}
a {
text-decoration: underline dotted;
2023-11-22 23:43:36 -06:00
color: ${catppuccinColors.rosewater};
2023-11-12 18:25:29 -06:00
}
a:hover {
2023-11-22 23:43:36 -06:00
color: ${catppuccinColors.mauve};
cursor: pointer;
}
// loading animation
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
2023-11-12 18:25:29 -06:00
}
`,
},
],
// accent color is dynamically generated
safelist: Object.keys(catppuccinColors).flatMap((key: string) => [`text-ctp-${key}`, `b-ctp-${key}`]),
2023-11-22 23:43:36 -06:00
presets: [presetUno(), presetIcons()],
2023-11-12 18:25:29 -06:00
rules: [
["font-casual", { "font-variation-settings": "'CASL' 1;" }],
["font-mono-casual", { "font-variation-settings": "'MONO' 1, 'CASL' 1;" }],
],
shortcuts: {
2023-11-22 23:43:36 -06:00
link: "cursor-pointer text-ctp-rosewater hover:text-ctp-mauve",
2023-11-12 18:25:29 -06:00
},
theme: {
colors: {
2023-11-22 23:43:36 -06:00
ctp: catppuccinColors,
2023-11-12 18:25:29 -06:00
},
},
layers: {
reset: -1,
mycss: 0.5,
shortcuts: 0,
components: 1,
default: 2,
utilities: 3,
},
});