update theme-setup and project-setup script
This commit is contained in:
Somrat
109
exampleSite/tailwind-plugin/tw-bs-grid.js
Normal file
109
exampleSite/tailwind-plugin/tw-bs-grid.js
Normal file
@@ -0,0 +1,109 @@
|
||||
import plugin from "tailwindcss/plugin";
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
module.exports = plugin.withOptions(() => {
|
||||
return ({ addComponents }) => {
|
||||
const gridColumns = 12;
|
||||
const gridGutterWidth = "1.5rem";
|
||||
const gridGutters = {
|
||||
0: "0",
|
||||
1: "0.25rem",
|
||||
2: "0.5rem",
|
||||
3: "1rem",
|
||||
4: "1.5rem",
|
||||
5: "3rem",
|
||||
};
|
||||
const respectImportant = true;
|
||||
const columns = Array.from({ length: gridColumns }, (_, i) => i + 1);
|
||||
const rowColsSteps = columns.slice(0, Math.floor(gridColumns / 2));
|
||||
|
||||
// row
|
||||
addComponents(
|
||||
{
|
||||
".row": {
|
||||
"--bs-gutter-x": gridGutterWidth,
|
||||
"--bs-gutter-y": 0,
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
marginTop: "calc(var(--bs-gutter-y) * -1)",
|
||||
marginRight: "calc(var(--bs-gutter-x) / -2)",
|
||||
marginLeft: "calc(var(--bs-gutter-x) / -2)",
|
||||
"& > *": {
|
||||
boxSizing: "border-box",
|
||||
flexShrink: 0,
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
paddingRight: "calc(var(--bs-gutter-x) / 2)",
|
||||
paddingLeft: "calc(var(--bs-gutter-x) / 2)",
|
||||
marginTop: "var(--bs-gutter-y)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{ respectImportant },
|
||||
);
|
||||
|
||||
// columns
|
||||
addComponents(
|
||||
[
|
||||
{
|
||||
".col": { flex: "1 0 0%" },
|
||||
".row-cols-auto": { "& > *": { flex: "0 0 auto", width: "auto" } },
|
||||
},
|
||||
...rowColsSteps.map((num) => ({
|
||||
[`.row-cols-${num}`]: {
|
||||
"& > *": { flex: "0 0 auto", width: `${100 / num}%` },
|
||||
},
|
||||
})),
|
||||
{ ".col-auto": { flex: "0 0 auto", width: "auto" } },
|
||||
...columns.map((num) => ({
|
||||
[`.col-${num}`]: {
|
||||
flex: "0 0 auto",
|
||||
width: `${(100 / gridColumns) * num}%`,
|
||||
},
|
||||
})),
|
||||
],
|
||||
{ respectImportant },
|
||||
);
|
||||
|
||||
// offset
|
||||
addComponents(
|
||||
[0, ...columns.slice(0, -1)].map((num) => ({
|
||||
[`.offset-${num}`]: { marginLeft: `${(100 / gridColumns) * num}%` },
|
||||
})),
|
||||
{ respectImportant },
|
||||
);
|
||||
|
||||
// gutters
|
||||
if (Object.keys(gridGutters).length) {
|
||||
const gutterComponents = Object.entries(gridGutters).reduce(
|
||||
(acc, [key, value]) => {
|
||||
acc[`.g-${key}`] = {
|
||||
"--bs-gutter-x": value,
|
||||
"--bs-gutter-y": value,
|
||||
};
|
||||
acc[`.gx-${key}`] = { "--bs-gutter-x": value };
|
||||
acc[`.gy-${key}`] = { "--bs-gutter-y": value };
|
||||
return acc;
|
||||
},
|
||||
{},
|
||||
);
|
||||
addComponents(gutterComponents, { respectImportant });
|
||||
}
|
||||
|
||||
// order
|
||||
addComponents(
|
||||
[
|
||||
{
|
||||
".order-first": { order: "-1" },
|
||||
".order-last": { order: gridColumns + 1 },
|
||||
},
|
||||
...[0, ...columns].map((num) => ({
|
||||
[`.order-${num}`]: { order: String(num) },
|
||||
})),
|
||||
],
|
||||
{ respectImportant },
|
||||
);
|
||||
};
|
||||
});
|
||||
})();
|
||||
96
exampleSite/tailwind-plugin/tw-theme.js
Normal file
96
exampleSite/tailwind-plugin/tw-theme.js
Normal file
@@ -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"] },
|
||||
);
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user