97 lines
3.2 KiB
JavaScript
97 lines
3.2 KiB
JavaScript
const plugin = require("tailwindcss/plugin");
|
|
const fs = require("fs");
|
|
const path = require("path");
|
|
const themePath = path.join(__dirname, "../data/theme.json");
|
|
const themeRead = fs.readFileSync(themePath, "utf8");
|
|
const themeConfig = JSON.parse(themeRead);
|
|
|
|
const findFont = (fontStr) =>
|
|
fontStr.replace(/\+/g, " ").replace(/:[^:]+/g, "");
|
|
|
|
module.exports = plugin.withOptions(() => {
|
|
return ({ addBase, addUtilities }) => {
|
|
const rootVars = {};
|
|
|
|
const baseSize = Number(themeConfig.fonts.font_size.base);
|
|
const scale = Number(themeConfig.fonts.font_size.scale);
|
|
|
|
// Set font sizes
|
|
const fontSizes = {
|
|
base: `${baseSize}px`,
|
|
"base-sm": `${baseSize * 0.8}px`,
|
|
h1: `${scale ** 5}rem`,
|
|
"h1-sm": `${scale ** 5 * 0.9}rem`,
|
|
h2: `${scale ** 4}rem`,
|
|
"h2-sm": `${scale ** 4 * 0.9}rem`,
|
|
h3: `${scale ** 3}rem`,
|
|
"h3-sm": `${scale ** 3 * 0.9}rem`,
|
|
h4: `${scale ** 2}rem`,
|
|
h5: `${scale}rem`,
|
|
h6: `${scale}rem`,
|
|
};
|
|
Object.entries(fontSizes).forEach(([k, v]) => {
|
|
rootVars[`--text-${k}`] = v;
|
|
});
|
|
|
|
// Set font families
|
|
rootVars["--font-primary"] =
|
|
`${findFont(themeConfig.fonts.font_family.primary)}, ${themeConfig.fonts.font_family.primary_type}`;
|
|
rootVars["--font-secondary"] =
|
|
`${findFont(themeConfig.fonts.font_family.secondary)}, ${themeConfig.fonts.font_family.secondary_type}`;
|
|
|
|
// Define color groups
|
|
const groups = [
|
|
{ colors: themeConfig.colors.default.theme_color, prefix: "" },
|
|
{ colors: themeConfig.colors.default.text_color, prefix: "" },
|
|
{
|
|
colors: themeConfig.colors.darkmode.theme_color,
|
|
prefix: "darkmode-",
|
|
},
|
|
{ colors: themeConfig.colors.darkmode.text_color, prefix: "darkmode-" },
|
|
];
|
|
|
|
// Set color variables
|
|
groups.forEach(({ colors, prefix }) => {
|
|
Object.entries(colors).forEach(([k, v]) => {
|
|
rootVars[`--color-${prefix}${k.replace(/_/g, "-")}`] = v;
|
|
});
|
|
});
|
|
|
|
addBase({ ":root": rootVars });
|
|
|
|
// Generate color utilities
|
|
const colorUtils = {};
|
|
groups.forEach(({ colors, prefix }) => {
|
|
Object.keys(colors).forEach((k) => {
|
|
const cls = k.replace(/_/g, "-");
|
|
const varRef = `var(--color-${prefix}${cls})`;
|
|
colorUtils[`.bg-${prefix}${cls}`] = { backgroundColor: varRef };
|
|
colorUtils[`.text-${prefix}${cls}`] = { color: varRef };
|
|
colorUtils[`.border-${prefix}${cls}`] = { borderColor: varRef };
|
|
colorUtils[`.fill-${prefix}${cls}`] = { fill: varRef };
|
|
colorUtils[`.from-${prefix}${cls}`] = {
|
|
"--tw-gradient-from": varRef,
|
|
};
|
|
colorUtils[`.to-${prefix}${cls}`] = { "--tw-gradient-to": varRef };
|
|
colorUtils[`.via-${prefix}${cls}`] = {
|
|
"--tw-gradient-stops": varRef,
|
|
};
|
|
});
|
|
});
|
|
|
|
// Generate font utilities
|
|
const fontUtils = {
|
|
".font-primary": { fontFamily: "var(--font-primary)" },
|
|
".font-secondary": { fontFamily: "var(--font-secondary)" },
|
|
};
|
|
Object.keys(fontSizes).forEach((k) => {
|
|
fontUtils[`.text-${k}`] = { fontSize: `var(--text-${k})` };
|
|
});
|
|
|
|
addUtilities(
|
|
{ ...colorUtils, ...fontUtils },
|
|
{ variants: ["responsive", "hover", "focus", "active", "disabled"] },
|
|
);
|
|
};
|
|
});
|