Add a CSS file with the colors defined as custom properties.

This commit is contained in:
Bauke 2020-08-18 14:34:42 +02:00
parent edde8e7f4d
commit 0a1cecda0d
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
4 changed files with 43 additions and 0 deletions

View File

@ -1,4 +1,5 @@
{
"css-custom-properties": "0.1.0",
"firefox": "0.1.1",
"kitty": "0.1.1",
"sublime-text": "0.1.1",

View File

@ -146,6 +146,9 @@
File Formats
</h3>
<ul>
<li>
<a href="/love.css">CSS</a>
</li>
<li>
<a href="/love.json">JSON</a>
</li>

View File

@ -134,6 +134,8 @@ ${love[1].colors.grays
htmlclean(nunjucks.render('get.html', {love, markdown, title}))
);
}
await writeCustomProperties(love, versions['css-custom-properties']);
}
export function capitalize(word: string): string {
@ -145,6 +147,42 @@ export async function writeJSON(path: string, data: unknown): Promise<void> {
await fsp.writeFile(path, JSON.stringify(data, null, 2));
}
export async function writeCustomProperties(
love: LoveVariant[],
version: string
): Promise<void> {
let css = `/*
The Love Theme CSS Custom Properties
https://love.holllo.cc - version ${version}
MIT license
*/
.love {\n`;
for (const variant of love) {
const prefix = variant.name === 'dark' ? 'd' : 'l';
css += ` /* Love ${capitalize(variant.name)} */\n`;
css += ` --${prefix}f-1: ${variant.colors.foreground1};\n`;
css += ` --${prefix}f-2: ${variant.colors.foreground2};\n`;
css += ` --${prefix}b-1: ${variant.colors.background1};\n`;
css += ` --${prefix}b-2: ${variant.colors.background2};\n`;
for (const [index, color] of variant.colors.accents.entries()) {
css += ` --${prefix}a-${index + 1}: ${color};\n`;
}
for (const [index, color] of variant.colors.grays.entries()) {
css += ` --${prefix}g-${index + 1}: ${color};\n`;
}
css += '\n';
}
css = css.trim();
css += '\n}\n';
await fsp.writeFile(join(__dirname, '../../public/love.css'), css);
}
if (require.main === module) {
void main();
}

View File

@ -5,6 +5,7 @@ import semver from 'semver';
export interface Versions {
[index: string]: string;
'css-custom-properties': string;
firefox: string;
kitty: string;
'sublime-text': string;