update tailwind v4, remove sass and postcss dependency

tailwind-plugin/tw-theme.js

@@ -0,0 +1,96 @@
+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"] },
+    );
+  };
+});