10h30/astroplate
1
0
Fork 0
mirror of https://github.com/10h30/astroplate.git synced 2026-07-16 05:03:26 +09:00
Code Issues Packages Projects Releases Wiki Activity

remove custom tailwind plugins and added a script to generate theme.css

Browse Source
This commit is contained in:
Somrat
2025-12-01 11:54:22 +06:00
parent cf6bcfee6c
commit c0a555a477
6 changed files with 246 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/generated-theme.css
+47
View File
@@ -0,0 +1,47 @@
/**
* Auto-generated from "src/config/theme.json"
* DO NOT EDIT THIS FILE MANUALLY
* Run: node scripts/themeGenerator.js
*/
@theme {
/* === Colors === */
--color-primary: #121212;
--color-body: #fff;
--color-border: #eaeaea;
--color-light: #f6f6f6;
--color-dark: #040404;
--color-text: #444444;
--color-text-dark: #040404;
--color-text-light: #717171;
/* === Darkmode Colors === */
--color-darkmode-primary: #fff;
--color-darkmode-body: #1c1c1c;
--color-darkmode-border: #3E3E3E;
--color-darkmode-light: #222222;
--color-darkmode-dark: #fff;
--color-darkmode-text: #B4AFB6;
--color-darkmode-text-dark: #fff;
--color-darkmode-text-light: #B4AFB6;
/* === Font Families === */
--font-primary: Heebo, sans-serif;
--font-secondary: Signika, sans-serif;
/* === Font Sizes === */
--text-base: 16px;
--text-base-sm: 12.8px;
--text-h6: 1.2rem;
--text-h6-sm: 1.08rem;
--text-h5: 1.44rem;
--text-h5-sm: 1.296rem;
--text-h4: 1.728rem;
--text-h4-sm: 1.5552rem;
--text-h3: 2.0736rem;
--text-h3-sm: 1.86624rem;
--text-h2: 2.48832rem;
--text-h2-sm: 2.239488rem;
--text-h1: 2.9859839999999997rem;
--text-h1-sm: 2.6873856rem;
}
src/styles/main.css
+4 -3
View File
@@ -1,11 +1,12 @@
@import "tailwindcss";
@plugin "../tailwind-plugin/tw-theme";
@plugin "../tailwind-plugin/tw-bs-grid";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin 'tailwind-bootstrap-grid';
@custom-variant dark (&:where(.dark, .dark *));
/* Auto-generated theme from "theme.json"*/
@import "./generated-theme.css";
@import "./safe.css";
@import "./utilities.css";
src/tailwind-plugin/tw-bs-grid.js
-122
View File
@@ -1,122 +0,0 @@
const plugin = require("tailwindcss/plugin");
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 + helper row-cols
addComponents([
{
".col": {
flex: "1 0 0%",
width: "initial",
display: "initial",
},
".row-cols-auto": {
"> *": {
flex: "0 0 auto",
width: "auto",
},
},
},
...rowColsSteps.map((rowCol) => ({
[`.row-cols-${rowCol}`]: {
"> *": {
flex: "0 0 auto",
width: `${100 / rowCol}%`,
display: "initial",
},
},
})),
{
".col-auto": {
flex: "0 0 auto",
width: "auto",
},
},
// explicit sized columns
...columns.map((size) => ({
[`.col-${size}`]: {
flex: "0 0 auto",
width: `${(100 / gridColumns) * size}%`,
},
})),
]);
// Offsets
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 });
}
// Ordering helpers
addComponents(
[
{
".order-first": { order: "-1" },
".order-last": { order: String(gridColumns + 1) },
},
...[0, ...columns].map((num) => ({
[`.order-${num}`]: { order: String(num) },
})),
],
{ respectImportant },
);
};
});
src/tailwind-plugin/tw-theme.js
-139
View File
@@ -1,139 +0,0 @@
const plugin = require("tailwindcss/plugin");
const themeConfig = require("../config/theme.json");
// Helper to extract a clean font name.
const findFont = (fontStr) =>
fontStr.replace(/\+/g, " ").replace(/:[^:]+/g, "");
// Set font families dynamically, filtering out 'type' keys
const fontFamilies = Object.entries(themeConfig.fonts.font_family)
.filter(([key]) => !key.includes("type"))
.reduce((acc, [key, font]) => {
acc[key] =
`${findFont(font)}, ${themeConfig.fonts.font_family[`${key}_type`] || "sans-serif"}`;
return acc;
}, {});
const defaultColorGroups = [
{ colors: themeConfig.colors.default.theme_color, prefix: "" },
{ colors: themeConfig.colors.default.text_color, prefix: "" },
];
const darkColorGroups = [];
if (themeConfig.colors.darkmode?.theme_color) {
darkColorGroups.push({
colors: themeConfig.colors.darkmode.theme_color,
prefix: "darkmode-",
});
}
if (themeConfig.colors.darkmode?.text_color) {
darkColorGroups.push({
colors: themeConfig.colors.darkmode.text_color,
prefix: "darkmode-",
});
}
const getVars = (groups) => {
const vars = {};
groups.forEach(({ colors, prefix }) => {
Object.entries(colors).forEach(([k, v]) => {
const cssKey = k.replace(/_/g, "-");
vars[`--color-${prefix}${cssKey}`] = v;
});
});
return vars;
};
const defaultVars = getVars(defaultColorGroups);
const darkVars = getVars(darkColorGroups);
const baseSize = Number(themeConfig.fonts.font_size.base);
const scale = Number(themeConfig.fonts.font_size.scale);
const calculateFontSizes = (base, scale) => {
const sizes = {};
let currentSize = scale;
for (let i = 6; i >= 1; i--) {
sizes[`h${i}`] = `${currentSize}rem`;
sizes[`h${i}-sm`] = `${currentSize * 0.9}rem`;
currentSize *= scale;
}
sizes.base = `${base}px`;
sizes["base-sm"] = `${base * 0.8}px`;
return sizes;
};
const fontSizes = calculateFontSizes(baseSize, scale);
const fontVars = {};
Object.entries(fontSizes).forEach(([key, value]) => {
fontVars[`--text-${key}`] = value;
});
Object.entries(fontFamilies).forEach(([key, font]) => {
fontVars[`--font-${key}`] = font;
});
const baseVars = { ...fontVars, ...defaultVars };
// Build a colorsMap including both sets
const colorsMap = {};
[...defaultColorGroups, ...darkColorGroups].forEach(({ colors, prefix }) => {
Object.entries(colors).forEach(([key]) => {
const cssKey = key.replace(/_/g, "-");
colorsMap[prefix + cssKey] = `var(--color-${prefix}${cssKey})`;
});
});
module.exports = plugin.withOptions(() => {
return function ({ addBase, addUtilities, matchUtilities }) {
// Default vars on :root; dark vars on .dark
addBase({
":root": baseVars,
".dark": darkVars,
});
const fontUtils = {};
Object.keys(fontFamilies).forEach((key) => {
fontUtils[`.font-${key}`] = { fontFamily: `var(--font-${key})` };
});
Object.keys(fontSizes).forEach((key) => {
fontUtils[`.text-${key}`] = { fontSize: `var(--text-${key})` };
});
addUtilities(fontUtils, {
variants: ["responsive", "hover", "focus", "active", "disabled"],
});
matchUtilities(
{
bg: (value) => ({ backgroundColor: value }),
text: (value) => ({ color: value }),
border: (value) => ({ borderColor: value }),
fill: (value) => ({ fill: value }),
stroke: (value) => ({ stroke: value }),
},
{ values: colorsMap, type: "color" },
);
matchUtilities(
{
from: (value) => ({
"--tw-gradient-from": value,
"--tw-gradient-via-stops":
"var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
"--tw-gradient-stops":
"var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
}),
to: (value) => ({
"--tw-gradient-to": value,
"--tw-gradient-via-stops":
"var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
"--tw-gradient-stops":
"var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))",
}),
via: (value) => ({
"--tw-gradient-via": value,
"--tw-gradient-via-stops":
"var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)",
}),
},
{ values: colorsMap, type: "color" },
);
};
});