41 lines
1.8 KiB
JavaScript
41 lines
1.8 KiB
JavaScript
const fs = require('fs');
|
|
const colors = require('../app/theme/colors.js');
|
|
|
|
const flattenColors = (colors) => {
|
|
let flatColors = {};
|
|
for (const [key, value] of Object.entries(colors)) {
|
|
if (typeof value === 'object' && value !== null && key !== 'dark') {
|
|
for (const [nestedKey, nestedValue] of Object.entries(value)) {
|
|
flatColors[`${key}-${nestedKey}`] = `${key}-${nestedKey}`;
|
|
}
|
|
} else if (key !== 'dark') {
|
|
flatColors[key] = key;
|
|
}
|
|
}
|
|
return flatColors;
|
|
};
|
|
|
|
const flatColors = flattenColors(colors);
|
|
|
|
const generatedCSS = `/* Auto-generated, DO NOT EDIT */
|
|
/* Uses CSS variables (--color-*) generated by Tailwind config */
|
|
|
|
/* fill */
|
|
${Object.entries(flatColors).map(([name, key]) => `.fill-${name.replace(/ /g, '-')} { fill: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}
|
|
${Object.entries(flatColors).map(([name, key]) => `.hover-fill-${name.replace(/ /g, '-')}:hover svg { fill: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}
|
|
|
|
/* color */
|
|
${Object.entries(flatColors).map(([name, key]) => `.color-${name.replace(/ /g, '-')} { color: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}
|
|
|
|
/* hover color */
|
|
${Object.entries(flatColors).map(([name, key]) => `.hover-${name.replace(/ /g, '-')}:hover { color: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}
|
|
|
|
/* border color */
|
|
${Object.entries(flatColors).map(([name, key]) => `.border-${name.replace(/ /g, '-')} { border-color: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}
|
|
|
|
/* background color */
|
|
${Object.entries(flatColors).map(([name, key]) => `.bg-${name.replace(/ /g, '-')} { background-color: var(--color-${key.replace(/ /g, '-')}) }`).join('\n')}
|
|
`;
|
|
|
|
// Write the generated CSS to a file
|
|
fs.writeFileSync('app/styles/colors-autogen.css', generatedCSS);
|