update tw-theme plugin for color opacity
This commit is contained in:
Somrat
parent
bea3ff009e
commit
d8b9f23e61
@ -18,16 +18,41 @@ const fontFamilies = Object.entries(themeConfig.fonts.font_family)
|
|||||||
return acc;
|
return acc;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
// main plugin
|
const defaultColorGroups = [
|
||||||
module.exports = plugin.withOptions(() => {
|
{ colors: themeConfig.colors.default.theme_color, prefix: "" },
|
||||||
return ({ addBase, addUtilities }) => {
|
{ colors: themeConfig.colors.default.text_color, prefix: "" },
|
||||||
const rootVars = {};
|
];
|
||||||
|
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-",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Parse base font size and scaling factor.
|
const getVars = (groups) => {
|
||||||
const baseSize = Number(themeConfig.fonts.font_size.base);
|
const vars = {};
|
||||||
const scale = Number(themeConfig.fonts.font_size.scale);
|
groups.forEach(({ colors, prefix }) => {
|
||||||
|
Object.entries(colors).forEach(([k, v]) => {
|
||||||
|
const cssKey = k.replace(/_/g, "-");
|
||||||
|
vars[`--color-${prefix}${cssKey}`] = v;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return vars;
|
||||||
|
};
|
||||||
|
|
||||||
const calculateFontSizes = (base, scale) => {
|
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 = {};
|
const sizes = {};
|
||||||
let currentSize = scale;
|
let currentSize = scale;
|
||||||
for (let i = 6; i >= 1; i--) {
|
for (let i = 6; i >= 1; i--) {
|
||||||
@ -38,101 +63,79 @@ module.exports = plugin.withOptions(() => {
|
|||||||
sizes.base = `${base}px`;
|
sizes.base = `${base}px`;
|
||||||
sizes["base-sm"] = `${base * 0.8}px`;
|
sizes["base-sm"] = `${base * 0.8}px`;
|
||||||
return sizes;
|
return sizes;
|
||||||
};
|
};
|
||||||
|
const fontSizes = calculateFontSizes(baseSize, scale);
|
||||||
|
|
||||||
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;
|
||||||
|
});
|
||||||
|
|
||||||
// Set font and text size variables.
|
const baseVars = { ...fontVars, ...defaultVars };
|
||||||
Object.entries(fontSizes).forEach(([key, value]) => {
|
|
||||||
rootVars[`--text-${key}`] = value;
|
// 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})`;
|
||||||
});
|
});
|
||||||
Object.entries(fontFamilies).forEach(([key, font]) => {
|
});
|
||||||
rootVars[`--font-${key}`] = font;
|
|
||||||
|
module.exports = plugin.withOptions(() => {
|
||||||
|
return function ({ addBase, addUtilities, matchUtilities }) {
|
||||||
|
// Default vars on :root; dark vars on .dark
|
||||||
|
addBase({
|
||||||
|
":root": baseVars,
|
||||||
|
".dark": darkVars,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Define color groups.
|
|
||||||
const groups = [
|
|
||||||
{ colors: themeConfig.colors.default.theme_color, prefix: "" },
|
|
||||||
{ colors: themeConfig.colors.default.text_color, prefix: "" },
|
|
||||||
...(themeConfig.colors.darkmode?.theme_color
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
colors: themeConfig.colors.darkmode.theme_color,
|
|
||||||
prefix: "darkmode-",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: []),
|
|
||||||
...(themeConfig.colors.darkmode?.text_color
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
colors: themeConfig.colors.darkmode.text_color,
|
|
||||||
prefix: "darkmode-",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: []),
|
|
||||||
];
|
|
||||||
|
|
||||||
// Set color variables.
|
|
||||||
groups.forEach(({ colors, prefix }) => {
|
|
||||||
Object.entries(colors).forEach(([k, v]) => {
|
|
||||||
const cssKey = k.replace(/_/g, "-");
|
|
||||||
rootVars[`--color-${prefix}${cssKey}`] = v;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add variables to root.
|
|
||||||
addBase({ ":root": rootVars });
|
|
||||||
|
|
||||||
const generateColorUtils = (colors, prefix) => {
|
|
||||||
const utils = {};
|
|
||||||
Object.keys(colors).forEach((k) => {
|
|
||||||
const cls = k.replace(/_/g, "-");
|
|
||||||
const varRef = `var(--color-${prefix}${cls})`;
|
|
||||||
utils[`.bg-${prefix}${cls}`] = { backgroundColor: varRef };
|
|
||||||
utils[`.text-${prefix}${cls}`] = { color: varRef };
|
|
||||||
utils[`.border-${prefix}${cls}`] = { borderColor: varRef };
|
|
||||||
utils[`.fill-${prefix}${cls}`] = { fill: varRef };
|
|
||||||
utils[`.stroke-${prefix}${cls}`] = { stroke: varRef };
|
|
||||||
utils[`.from-${prefix}${cls}`] = {
|
|
||||||
"--tw-gradient-from": varRef,
|
|
||||||
"--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))",
|
|
||||||
};
|
|
||||||
utils[`.to-${prefix}${cls}`] = {
|
|
||||||
"--tw-gradient-to": varRef,
|
|
||||||
"--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))",
|
|
||||||
};
|
|
||||||
utils[`.via-${prefix}${cls}`] = {
|
|
||||||
"--tw-gradient-via": varRef,
|
|
||||||
"--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)",
|
|
||||||
};
|
|
||||||
});
|
|
||||||
return utils;
|
|
||||||
};
|
|
||||||
|
|
||||||
const colorUtils = groups.reduce((acc, { colors, prefix }) => {
|
|
||||||
return { ...acc, ...generateColorUtils(colors, prefix) };
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
// Add font and text size utilities.
|
|
||||||
const fontUtils = {};
|
const fontUtils = {};
|
||||||
Object.keys(fontFamilies).forEach((key) => {
|
Object.keys(fontFamilies).forEach((key) => {
|
||||||
fontUtils[`.font-${key}`] = { fontFamily: `var(--font-${key})` };
|
fontUtils[`.font-${key}`] = { fontFamily: `var(--font-${key})` };
|
||||||
});
|
});
|
||||||
Object.keys(fontSizes).forEach((k) => {
|
Object.keys(fontSizes).forEach((key) => {
|
||||||
fontUtils[`.text-${k}`] = { fontSize: `var(--text-${k})` };
|
fontUtils[`.text-${key}`] = { fontSize: `var(--text-${key})` };
|
||||||
|
});
|
||||||
|
addUtilities(fontUtils, {
|
||||||
|
variants: ["responsive", "hover", "focus", "active", "disabled"],
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add the generated utilities with the desired variants.
|
matchUtilities(
|
||||||
addUtilities(
|
{
|
||||||
{ ...colorUtils, ...fontUtils },
|
bg: (value) => ({ backgroundColor: value }),
|
||||||
{ variants: ["responsive", "hover", "focus", "active", "disabled"] },
|
text: (value) => ({ color: value }),
|
||||||
|
border: (value) => ({ borderColor: 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" },
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user