feat: update theme and add a base16 style

.helix/languages.toml

@@ -0,0 +1,56 @@
+[[language]]
+name = "javascript"
+language-id = "javascript"
+scope = "source.js"
+injection-regex = "^(js|javascript)$"
+file-types = ["js", "jsx", "mjs"]
+shebangs = ["deno", "node"]
+roots = ["deno.json", "package.json", "tsconfig.json"]
+comment-token = "//"
+indent = { tab-width = 2, unit = "  " }
+grammar = "javascript"
+language-servers = ["deno-lsp"]
+
+[[language]]
+name = "jsx"
+language-id = "javascriptreact"
+scope = "source.jsx"
+injection-regex = "jsx"
+file-types = ["jsx"]
+shebangs = ["deno", "node"]
+roots = ["deno.json", "package.json", "tsconfig.json"]
+comment-token = "//"
+indent = { tab-width = 2, unit = "  " }
+grammar = "javascript"
+language-servers = ["deno-lsp"]
+
+[[language]]
+name = "typescript"
+language-id = "typescript"
+scope = "source.ts"
+injection-regex = "^(ts|typescript)$"
+file-types = ["ts"]
+shebangs = ["deno", "node"]
+roots = ["deno.json", "package.json", "tsconfig.json"]
+comment-token = "//"
+indent = { tab-width = 2, unit = "  " }
+grammar = "typescript"
+language-servers = ["deno-lsp"]
+
+[[language]]
+name = "tsx"
+language-id = "typescriptreact"
+scope = "source.tsx"
+injection-regex = "^(tsx)$" # |typescript
+file-types = ["tsx"]
+shebangs = ["deno", "node"]
+roots = ["deno.json", "package.json", "tsconfig.json"]
+comment-token = "//"
+indent = { tab-width = 2, unit = "  " }
+grammar = "typescript"
+language-servers = ["deno-lsp"]
+
+[language-server.deno-lsp]
+command = "deno"
+args = ["lsp", "--unstable"]
+config = { enable = true, lint = true, unstable = true }

build.ts

@@ -1,46 +1,5 @@
-import { build, emptyDir } from "dnt";
+import { darkTheme, toHex } from "./mod.ts"
 
-await emptyDir("./npm");
-
-await build({
-  entryPoints: ["./mod.ts"],
-  outDir: "./npm",
-  shims: {
-    deno: true,
-  },
-  package: {
-    // package.json properties
-    name: "kleurskema",
-    version: "0.3.0",
-    description: "Dark, tonal, beautiful.",
-    license: "MIT",
-    repository: {
-      type: "git",
-      url: "git+https://github.com/Suyashtnt/kleur.git",
-    },
-    bugs: {
-      url: "https://github.com/Suyashtnt/kleur/issues",
-    },
-    devDependencies: {
-      "@types/culori": "2.0.4",
-    },
-  },
-  importMap: "deno.json",
-  postBuild() {
-    // steps to run after building and before running the tests
-    Deno.copyFileSync("LICENSE", "npm/LICENSE");
-    Deno.copyFileSync("README.md", "npm/README.md");
-  },
-});
-
-// mark package as side-effect free
-const currentPackage = JSON.parse(
-  await Deno.readTextFile("./npm/package.json"),
-);
-
-currentPackage.sideEffects = false;
-
-await Deno.writeTextFile(
-  "./npm/package.json",
-  JSON.stringify(currentPackage, null, 2),
-);
+// export dark.json
+const darkJson = JSON.stringify(toHex(darkTheme));
+await Deno.writeTextFile("build/dark.json", darkJson);

build/dark.json

@@ -0,0 +1 @@
+{"base":{"background":"#060613","foreground":"#d4d5eb"},"base00":"#060613","base01":"#09071f","base02":"#141327","base03":"#2b2b41","base04":"#60607a","base05":"#dadbf8","base06":"#e7e8ff","base07":"#a89dff","base08":"#a89dff","base09":"#f1a400","base0A":"#e6443d","base0B":"#11d770","base0C":"#00dad0","base0D":"#a89dff","base0E":"#00c0ff","base0F":"#2b2b41","overlay":{"background":"#14122c","foreground":"#e5e6ff"},"primary":{"background":"#39079b","foreground":"#a89dff"},"surface":{"background":"#09071f","foreground":"#d9daff"},"secondary":"#00c0ff","green":"#11d770","mauve":"#a89dff","orange":"#f1a400","red":"#e6443d","subtle":"#2b2b41","teal":"#00dad0","blue":"#00c0ff"}

dev/colourChecker.ts

@@ -4,9 +4,11 @@ import { dark } from "../palletes.ts";
 const colours = Object.entries(dark);
 const foregroundColours = colours.map((
   [name, colour],
+  // @ts-expect-error this works due to the ??
 ) => [name, rgb(colour.foreground ?? colour)]);
 const backgroundColours = colours.map((
   [name, colour],
+  // @ts-expect-error this works due to the ??
 ) => [name, rgb(colour.background ?? colour)]);
 
 const colourRows = backgroundColours.map(([name, background]) => {

dev/newlineHex.ts

@@ -0,0 +1,9 @@
+import { toHex } from "../exporters/mod.ts";
+import { darkTheme } from "../mod.ts";
+
+const themeFlattened = Object.values(toHex(darkTheme)).map((value) => {
+  if (typeof value === "string") return value;
+  return Object.values(value);
+}).flat();
+
+console.log(themeFlattened.join("\n"));

exporters/hex.ts

@@ -1,47 +1,45 @@
-import { formatCss } from "culori/fn";
+import { formatHex } from "culori/fn";
 import { HumanPalette } from "../palletes.ts";
 
 export const toHex = (pallete: HumanPalette): HumanPalette<string> => ({
   base: {
-    background: formatCss(pallete.base.background),
-    foreground: formatCss(pallete.base.foreground),
+    background: formatHex(pallete.base.background),
+    foreground: formatHex(pallete.base.foreground),
   },
-  base00: formatCss(pallete.base00),
-  base01: formatCss(pallete.base01),
-  base02: formatCss(pallete.base02),
-  base03: formatCss(pallete.base03),
-  base04: formatCss(pallete.base04),
-  base05: formatCss(pallete.base05),
-  base06: formatCss(pallete.base06),
-  base07: formatCss(pallete.base07),
-  base08: formatCss(pallete.base08),
-  base09: formatCss(pallete.base09),
-  base0A: formatCss(pallete.base0A),
-  base0B: formatCss(pallete.base0B),
-  base0C: formatCss(pallete.base0C),
-  base0D: formatCss(pallete.base0D),
-  base0E: formatCss(pallete.base0E),
-  base0F: formatCss(pallete.base0F),
+  base00: formatHex(pallete.base00),
+  base01: formatHex(pallete.base01),
+  base02: formatHex(pallete.base02),
+  base03: formatHex(pallete.base03),
+  base04: formatHex(pallete.base04),
+  base05: formatHex(pallete.base05),
+  base06: formatHex(pallete.base06),
+  base07: formatHex(pallete.base07),
+  base08: formatHex(pallete.base08),
+  base09: formatHex(pallete.base09),
+  base0A: formatHex(pallete.base0A),
+  base0B: formatHex(pallete.base0B),
+  base0C: formatHex(pallete.base0C),
+  base0D: formatHex(pallete.base0D),
+  base0E: formatHex(pallete.base0E),
+  base0F: formatHex(pallete.base0F),
   overlay: {
-    background: formatCss(pallete.overlay.background),
-    foreground: formatCss(pallete.overlay.foreground),
+    background: formatHex(pallete.overlay.background),
+    foreground: formatHex(pallete.overlay.foreground),
   },
   primary: {
-    background: formatCss(pallete.primary.background),
-    foreground: formatCss(pallete.primary.foreground),
-  },
-  secondary: {
-    background: formatCss(pallete.secondary.background),
-    foreground: formatCss(pallete.secondary.foreground),
+    background: formatHex(pallete.primary.background),
+    foreground: formatHex(pallete.primary.foreground),
   },
   surface: {
-    background: formatCss(pallete.surface.background),
-    foreground: formatCss(pallete.surface.foreground),
+    background: formatHex(pallete.surface.background),
+    foreground: formatHex(pallete.surface.foreground),
   },
-  green: formatCss(pallete.green),
-  mauve: formatCss(pallete.mauve),
-  orange: formatCss(pallete.orange),
-  red: formatCss(pallete.red),
-  subtle: formatCss(pallete.subtle),
-  teal: formatCss(pallete.teal),
+  secondary: formatHex(pallete.secondary),
+  green: formatHex(pallete.green),
+  mauve: formatHex(pallete.mauve),
+  orange: formatHex(pallete.orange),
+  red: formatHex(pallete.red),
+  subtle: formatHex(pallete.subtle),
+  teal: formatHex(pallete.teal),
+  blue: formatHex(pallete.blue),
 });

flake.nix

@@ -1,14 +1,25 @@
 {
   description = "A basic flake with a shell";
-  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
-  inputs.flake-utils.url = "github:numtide/flake-utils";
 
-  outputs = { self, nixpkgs, flake-utils }:
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+    base16.url = "github:SenchoPens/base16.nix";
+  };
+
+  outputs = { self, nixpkgs, base16, flake-utils }:
     flake-utils.lib.eachDefaultSystem (system: let
       pkgs = nixpkgs.legacyPackages.${system};
+
+      base16-lib = pkgs.callPackage base16.lib {};
+      dark-theme = base16-lib.mkSchemeAttrs ./build/dark.json;
     in {
       devShells.default = pkgs.mkShell {
-        packages = [ pkgs.deno pkgs.nodejs pkgs.nil pkgs.alejandra ];
+        packages = [ pkgs.deno pkgs.nil pkgs.alejandra ];
+      };
+
+      themes = {
+        dark = dark-theme;
       };
     });
 }

mod.ts

@@ -16,6 +16,7 @@ const processPalette = (pallete: Palette): HumanPalette => ({
   green: pallete.base0B,
   teal: pallete.base0C,
   subtle: pallete.base0F,
+  blue: pallete.secondary
 });
 
 export const darkTheme = processPalette(dark);