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

love-versions.json

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

source/pages/index.html

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

source/scripts/pages.ts

@@ -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();
 }

source/scripts/version.ts

@@ -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;