feat: 🚧 work on new exporters

most look fine but vscode looks really bad rn

Signed-off-by: Suyashtnt <[email protected]>

build.ts

@@ -1,34 +1,93 @@
+import { parseArgs } from "@std/cli/parse-args";
+import { Theme } from "@adobe/leonardo-contrast-colors";
 import {
-  darkTheme,
+  dark,
+  light,
+  toBase16,
+  toCss,
   toHex,
   toVscodeTheme,
   toWindowsTerminalTheme,
 } from "./mod.ts";
 import * as YAML from "yaml";
+import { colorListToObj } from "./generate.ts";
 
-const dark = toHex(darkTheme);
-
-// export dark.json
-const darkJson = JSON.stringify(dark);
-await Deno.writeTextFile("build/dark.json", darkJson);
-
-// export dark-base16.yaml
-const darkYaml = YAML.stringify(dark);
-await Deno.writeTextFile("build/dark-base16.yaml", darkYaml);
-
-// export windows-terminal.json
-const windowsTerminal = await toWindowsTerminalTheme(darkTheme);
-await Deno.writeTextFile("build/windows-terminal.json", windowsTerminal);
-
-// export vscode
-const vscode = await toVscodeTheme(darkTheme);
-await Deno.writeTextFile("build/vscode/theme.json", vscode);
-// also copy over LICENSE
-await Deno.copyFile("LICENSE", "build/vscode/LICENSE");
-// and package
-const packageOutput = await new Deno.Command("vsce", {
-  args: ["package"],
-  cwd: "build/vscode",
-}).output();
-console.log(new TextDecoder().decode(packageOutput.stdout));
-console.error(new TextDecoder().decode(packageOutput.stderr));
+const { "vsce-path": vscePath } = parseArgs(
+  Deno.args,
+);
+
+if (!vscePath) {
+  console.error(
+    "Please provide a path to the vsce executable with --vsce-path",
+  );
+  Deno.exit(1);
+}
+
+/**
+ * Builds themes for apps or formats that don't support multiple themes bundled together
+ *
+ * @param theme The theme to build
+ * @param name The name of the theme
+ */
+const buildSingleThemes = async (theme: Theme, type: string) => {
+  console.log(`Building ${type} themes`);
+  const capitalizedType = type.charAt(0).toUpperCase() + type.slice(1);
+  const name = `Kleur ${capitalizedType}`;
+
+  const [background, ...colorList] = theme.contrastColors;
+
+  const lch = {
+    background,
+    ...colorListToObj(colorList),
+  };
+  const lchJson = JSON.stringify(lch);
+  await Deno.writeTextFile(`build/${type}/kleur-lch.json`, lchJson);
+
+  const hex = toHex(theme);
+  const hexJson = JSON.stringify(hex, null, 2);
+  await Deno.writeTextFile(`build/${type}/kleur-.json`, hexJson);
+
+  const base16 = toBase16(theme);
+  const base16Yaml = YAML.stringify(base16);
+  await Deno.writeTextFile(`build/${type}/kleur.yaml`, base16Yaml);
+
+  const windowsTerminal = await toWindowsTerminalTheme(theme, name);
+  await Deno.writeTextFile(
+    `build/${type}/windows-terminal.json`,
+    windowsTerminal,
+  );
+
+  const css = toCss(theme);
+  await Deno.writeTextFile(`build/${type}/kleur.css`, css);
+
+  console.log(`Built ${type} themes`);
+};
+
+const buildVscode = async () => {
+  // Build Vscode
+  console.log("Building vscode themes");
+
+  const darkCode = await toVscodeTheme(dark, "Kleur Dark");
+  const lightCode = await toVscodeTheme(light, "Kleur Light");
+  await Deno.writeTextFile(`build/vscode/dark.json`, darkCode);
+  await Deno.writeTextFile(`build/vscode/light.json`, lightCode);
+
+  await Deno.copyFile("LICENSE", "build/vscode/LICENSE");
+  const packageOutput = await new Deno.Command(vscePath, {
+    args: ["package"],
+    cwd: "build/vscode",
+  }).output();
+
+  console.log(new TextDecoder().decode(packageOutput.stdout));
+  console.error(new TextDecoder().decode(packageOutput.stderr));
+
+  console.log("Built vscode themes");
+};
+
+// TODO: zed
+
+await Promise.all([
+  buildSingleThemes(dark, "dark"),
+  buildSingleThemes(light, "light"),
+  buildVscode(),
+]);

build/dark/kleur-.json

@@ -0,0 +1,95 @@
+{
+  "background": {
+    "background": "#080815"
+  },
+  "base": {
+    "100": "#2c2d3b",
+    "200": "#424451",
+    "300": "#5a5b67",
+    "400": "#72737f",
+    "500": "#8d8d97",
+    "600": "#a7a7af",
+    "700": "#c3c3c9",
+    "800": "#dedee1"
+  },
+  "blue": {
+    "100": "#003148",
+    "200": "#004a69",
+    "300": "#00628a",
+    "400": "#007cad",
+    "500": "#0098d0",
+    "600": "#00b4f2",
+    "700": "#41d3ff",
+    "800": "#92ecff"
+  },
+  "green": {
+    "100": "#003612",
+    "200": "#00501f",
+    "300": "#006a2c",
+    "400": "#00863b",
+    "500": "#00a34b",
+    "600": "#00c15f",
+    "700": "#2cdf79",
+    "800": "#78f7a1"
+  },
+  "orange": {
+    "100": "#432700",
+    "200": "#633c00",
+    "300": "#815100",
+    "400": "#a26700",
+    "500": "#c47f00",
+    "600": "#e49800",
+    "700": "#ffb536",
+    "800": "#ffda90"
+  },
+  "purple": {
+    "100": "#2e294f",
+    "200": "#453e73",
+    "300": "#5b5395",
+    "400": "#746ab9",
+    "500": "#8d82dd",
+    "600": "#a79cfe",
+    "700": "#c4bcff",
+    "800": "#dfdbff"
+  },
+  "red": {
+    "100": "#620508",
+    "200": "#8b1012",
+    "300": "#b12120",
+    "400": "#d73733",
+    "500": "#f6574e",
+    "600": "#ff8478",
+    "700": "#ffafa4",
+    "800": "#ffd5ce"
+  },
+  "teal": {
+    "100": "#003431",
+    "200": "#004e4a",
+    "300": "#006762",
+    "400": "#00827c",
+    "500": "#009e97",
+    "600": "#00bcb3",
+    "700": "#03dad0",
+    "800": "#64f4eb"
+  },
+  "primary": {
+    "100": "#2e294f",
+    "200": "#453e73",
+    "300": "#5b5395",
+    "400": "#746ab9",
+    "500": "#8d82dd",
+    "600": "#a79cfe",
+    "700": "#c4bcff",
+    "800": "#dfdbff"
+  },
+  "secondary": {
+    "100": "#003148",
+    "200": "#004a69",
+    "300": "#00628a",
+    "400": "#007cad",
+    "500": "#0098d0",
+    "600": "#00b4f2",
+    "700": "#41d3ff",
+    "800": "#92ecff"
+  }
+}

build/dark/kleur-lch.json

@@ -0,0 +1 @@
+{"background":{"background":"lch(3%, 7, 290deg)"},"base":{"100":"lch(19%, 10, 290deg)","200":"lch(29%, 8, 286deg)","300":"lch(39%, 7, 288deg)","400":"lch(49%, 7, 288deg)","500":"lch(59%, 6, 291deg)","600":"lch(69%, 4, 291deg)","700":"lch(79%, 3, 290deg)","800":"lch(89%, 2, 290deg)"},"blue":{"100":"lch(19%, 19, 254deg)","200":"lch(29%, 25, 252deg)","300":"lch(39%, 30, 253deg)","400":"lch(49%, 36, 253deg)","500":"lch(59%, 40, 251deg)","600":"lch(69%, 45, 248deg)","700":"lch(79%, 40, 233deg)","800":"lch(89%, 28, 218deg)"},"green":{"100":"lch(19%, 32, 146deg)","200":"lch(29%, 41, 146deg)","300":"lch(39%, 49, 147deg)","400":"lch(49%, 58, 147deg)","500":"lch(59%, 66, 147deg)","600":"lch(69%, 73, 149deg)","700":"lch(79%, 75, 150deg)","800":"lch(88%, 62, 150deg)"},"orange":{"100":"lch(19%, 29, 70deg)","200":"lch(29%, 41, 72deg)","300":"lch(39%, 50, 73deg)","400":"lch(49%, 59, 73deg)","500":"lch(59%, 68, 74deg)","600":"lch(69%, 76, 75deg)","700":"lch(79%, 72, 77deg)","800":"lch(89%, 41, 85deg)"},"purple":{"100":"lch(19%, 26, 300deg)","200":"lch(29%, 34, 300deg)","300":"lch(39%, 41, 300deg)","400":"lch(49%, 47, 300deg)","500":"lch(59%, 52, 299deg)","600":"lch(69%, 54, 299deg)","700":"lch(79%, 36, 297deg)","800":"lch(89%, 19, 296deg)"},"red":{"100":"lch(19%, 46, 34deg)","200":"lch(29%, 59, 35deg)","300":"lch(39%, 68, 34deg)","400":"lch(49%, 73, 34deg)","500":"lch(59%, 71, 33deg)","600":"lch(69%, 53, 32deg)","700":"lch(79%, 33, 32deg)","800":"lch(89%, 16, 33deg)"},"teal":{"100":"lch(19%, 17, 189deg)","200":"lch(29%, 22, 189deg)","300":"lch(39%, 27, 190deg)","400":"lch(49%, 32, 190deg)","500":"lch(59%, 36, 190deg)","600":"lch(69%, 41, 189deg)","700":"lch(79%, 46, 190deg)","800":"lch(89%, 41, 190deg)"},"primary":{"100":"lch(19%, 26, 300deg)","200":"lch(29%, 34, 300deg)","300":"lch(39%, 41, 300deg)","400":"lch(49%, 47, 300deg)","500":"lch(59%, 52, 299deg)","600":"lch(69%, 54, 299deg)","700":"lch(79%, 36, 297deg)","800":"lch(89%, 19, 296deg)"},"secondary":{"100":"lch(19%, 19, 254deg)","200":"lch(29%, 25, 252deg)","300":"lch(39%, 30, 253deg)","400":"lch(49%, 36, 253deg)","500":"lch(59%, 40, 251deg)","600":"lch(69%, 45, 248deg)","700":"lch(79%, 40, 233deg)","800":"lch(89%, 28, 218deg)"}}

build/dark/kleur.css

@@ -1,57 +1,73 @@
-:root {
-  --background: lch(3%, 7, 290);
-  --base100: lch(25%, 9, 289);
-  --base200: lch(36%, 8, 289);
-  --base300: lch(46%, 7, 284);
-  --base400: lch(56%, 5, 287);
-  --base500: lch(67%, 4, 291);
-  --base600: lch(77%, 3, 290);
-  --blue100: lch(25%, 23, 253);
-  --blue200: lch(36%, 28, 252);
-  --blue300: lch(46%, 34, 253);
-  --blue400: lch(57%, 39, 252);
-  --blue500: lch(67%, 44, 249);
-  --blue600: lch(77%, 42, 237);
-  --green100: lch(25%, 37, 146);
-  --green200: lch(35%, 47, 146);
-  --green300: lch(46%, 56, 147);
-  --green400: lch(56%, 64, 147);
-  --green500: lch(67%, 72, 148);
-  --green600: lch(77%, 76, 150);
-  --orange100: lch(25%, 37, 72);
-  --orange200: lch(36%, 47, 73);
-  --orange300: lch(46%, 56, 73);
-  --orange400: lch(56%, 66, 73);
-  --orange500: lch(67%, 74, 75);
-  --orange600: lch(77%, 75, 76);
-  --purple100: lch(25%, 30, 300);
-  --purple200: lch(36%, 38, 299);
-  --purple300: lch(46%, 44, 299);
-  --purple400: lch(56%, 50, 299);
-  --purple500: lch(67%, 54, 299);
-  --purple600: lch(77%, 39, 299);
-  --red100: lch(25%, 55, 35);
-  --red200: lch(35%, 65, 35);
-  --red300: lch(46%, 72, 34);
-  --red400: lch(56%, 73, 33);
-  --red500: lch(67%, 58, 32);
-  --red600: lch(77%, 36, 32);
-  --teal100: lch(25%, 20, 189);
-  --teal200: lch(35%, 25, 189);
-  --teal300: lch(46%, 30, 189);
-  --teal400: lch(56%, 35, 190);
-  --teal500: lch(67%, 40, 190);
-  --teal600: lch(77%, 45, 190);
-  --primary100: lch(25%, 30, 300);
-  --primary200: lch(36%, 38, 299);
-  --primary300: lch(46%, 44, 299);
-  --primary400: lch(56%, 50, 299);
-  --primary500: lch(67%, 54, 299);
-  --primary600: lch(77%, 39, 298);
-  --secondary100: lch(25%, 23, 253);
-  --secondary200: lch(36%, 28, 252);
-  --secondary300: lch(46%, 34, 253);
-  --secondary400: lch(57%, 39, 252);
-  --secondary500: lch(67%, 44, 249);
-  --secondary600: lch(77%, 42, 237);
-}
+--background: lch(3%, 7, 290);
+--base100: lch(19%, 10, 290);
+--base200: lch(29%, 8, 286);
+--base300: lch(39%, 7, 288);
+--base400: lch(49%, 7, 288);
+--base500: lch(59%, 6, 291);
+--base600: lch(69%, 4, 291);
+--base700: lch(79%, 3, 290);
+--base800: lch(89%, 2, 290);
+--blue100: lch(19%, 19, 254);
+--blue200: lch(29%, 25, 252);
+--blue300: lch(39%, 30, 253);
+--blue400: lch(49%, 36, 253);
+--blue500: lch(59%, 40, 251);
+--blue600: lch(69%, 45, 248);
+--blue700: lch(79%, 40, 233);
+--blue800: lch(89%, 28, 218);
+--green100: lch(19%, 32, 146);
+--green200: lch(29%, 41, 146);
+--green300: lch(39%, 49, 147);
+--green400: lch(49%, 58, 147);
+--green500: lch(59%, 66, 147);
+--green600: lch(69%, 73, 149);
+--green700: lch(79%, 75, 150);
+--green800: lch(88%, 62, 150);
+--orange100: lch(19%, 29, 70);
+--orange200: lch(29%, 41, 72);
+--orange300: lch(39%, 50, 73);
+--orange400: lch(49%, 59, 73);
+--orange500: lch(59%, 68, 74);
+--orange600: lch(69%, 76, 75);
+--orange700: lch(79%, 72, 77);
+--orange800: lch(89%, 41, 85);
+--purple100: lch(19%, 26, 300);
+--purple200: lch(29%, 34, 300);
+--purple300: lch(39%, 41, 300);
+--purple400: lch(49%, 47, 300);
+--purple500: lch(59%, 52, 299);
+--purple600: lch(69%, 54, 299);
+--purple700: lch(79%, 36, 297);
+--purple800: lch(89%, 19, 296);
+--red100: lch(19%, 46, 34);
+--red200: lch(29%, 59, 35);
+--red300: lch(39%, 68, 34);
+--red400: lch(49%, 73, 34);
+--red500: lch(59%, 71, 33);
+--red600: lch(69%, 53, 32);
+--red700: lch(79%, 33, 32);
+--red800: lch(89%, 16, 33);
+--teal100: lch(19%, 17, 189);
+--teal200: lch(29%, 22, 189);
+--teal300: lch(39%, 27, 190);
+--teal400: lch(49%, 32, 190);
+--teal500: lch(59%, 36, 190);
+--teal600: lch(69%, 41, 189);
+--teal700: lch(79%, 46, 190);
+--teal800: lch(89%, 41, 190);
+--primary100: lch(19%, 26, 300);
+--primary200: lch(29%, 34, 300);
+--primary300: lch(39%, 41, 300);
+--primary400: lch(49%, 47, 300);
+--primary500: lch(59%, 52, 299);
+--primary600: lch(69%, 54, 299);
+--primary700: lch(79%, 36, 297);
+--primary800: lch(89%, 19, 296);
+--secondary100: lch(19%, 19, 254);
+--secondary200: lch(29%, 25, 252);
+--secondary300: lch(39%, 30, 253);
+--secondary400: lch(49%, 36, 253);
+--secondary500: lch(59%, 40, 251);
+--secondary600: lch(69%, 45, 248);
+--secondary700: lch(79%, 40, 233);
+--secondary800: lch(89%, 28, 218);

build/dark/kleur.yaml

@@ -0,0 +1,16 @@
+base00: "#080815"
+base01: "#2c2d3b"
+base02: "#424451"
+base03: "#5a5b67"
+base04: "#5a5b67"
+base05: "#72737f"
+base06: "#8d8d97"
+base07: "#a7a7af"
+base08: "#a79cfe"
+base09: "#00c15f"
+base0A: "#00b4f2"
+base0B: "#00c15f"
+base0C: "#ff8478"
+base0D: "#a79cfe"
+base0E: "#00b4f2"
+base0F: "#e49800"

build/dark/windows-terminal.json

@@ -0,0 +1,23 @@
+{
+  "name": "Kleur Dark",
+  "foreground": "#72737f",
+  "background": "#080815",
+  "cursorColor": "#72737f",
+  "selectionBackground": "#424451",
+  "black": "#080815",
+  "red": "#",
+  "green": "#",
+  "yellow": "#",
+  "blue": "#",
+  "purple": "#",
+  "cyan": "#",
+  "white": "#72737f",
+  "brightBlack": "#5a5b67",
+  "brightRed": "#",
+  "brightGreen": "#",
+  "brightYellow": "#",
+  "brightBlue": "#",
+  "brightPurple": "#",
+  "brightCyan": "#",
+  "brightWhite": "#a7a7af"
+}