121 lines
2.8 KiB
TypeScript
121 lines
2.8 KiB
TypeScript
import fs from "fs/promises";
|
|
import { flavors } from "@catppuccin/palette";
|
|
import { defineConfig, presetUno, presetIcons } from "unocss";
|
|
|
|
const generatePalette = (): { [key: string]: string } => {
|
|
const colors: { [key: string]: string } = {};
|
|
|
|
Object.keys(flavors.mocha.colors).forEach((colorName) => {
|
|
const sanitizedName = colorName
|
|
.replace("0", "zero")
|
|
.replace("1", "one")
|
|
.replace("2", "two");
|
|
colors[sanitizedName] = flavors.mocha.colors[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",
|
|
getCSS: () => `
|
|
body {
|
|
font-family: 'Recursive', monospace;
|
|
font-variation-settings: 'MONO' 1;
|
|
}
|
|
#menu-toggle:checked + #menu {
|
|
display: block;
|
|
}
|
|
a {
|
|
text-decoration: underline dotted;
|
|
color: ${catppuccinColors.rosewater};
|
|
}
|
|
a:hover {
|
|
color: ${catppuccinColors.mauve};
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* width */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: ${catppuccinColors.crust};
|
|
border-radius: 5px;
|
|
}
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: ${catppuccinColors.mantle};
|
|
border: 1px solid transparent;
|
|
border-color: ${catppuccinColors.rosewater};
|
|
border-radius: 5px;
|
|
}
|
|
/* Handle on hover */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: ${catppuccinColors.roswater};
|
|
}
|
|
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
`,
|
|
},
|
|
],
|
|
// accent color is dynamically generated
|
|
safelist: Object.keys(catppuccinColors).flatMap((key: string) => [`text-ctp-${key}`, `b-ctp-${key}`]),
|
|
presets: [presetUno(), presetIcons()],
|
|
rules: [
|
|
["font-casual", { "font-variation-settings": "'CASL' 1;" }],
|
|
["font-mono-casual", { "font-variation-settings": "'MONO' 1, 'CASL' 1;" }],
|
|
],
|
|
shortcuts: {
|
|
link: "cursor-pointer text-ctp-rosewater hover:text-ctp-mauve",
|
|
},
|
|
theme: {
|
|
colors: {
|
|
ctp: catppuccinColors,
|
|
},
|
|
},
|
|
layers: {
|
|
reset: -1,
|
|
mycss: 0.5,
|
|
shortcuts: 0,
|
|
components: 1,
|
|
default: 2,
|
|
utilities: 3,
|
|
},
|
|
});
|