feat: initial commit

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true

.envrc

@@ -0,0 +1,4 @@
+if ! has nix_direnv_version || ! nix_direnv_version 2.3.0; then
+    source_url "https://raw.githubusercontent.com/nix-community/nix-direnv/2.3.0/direnvrc" "sha256-Dmd+j63L84wuzgyjITIfSxSD57Tx7v51DMxVZOsiUD8="
+fi
+use flake

.gitignore

@@ -0,0 +1,2 @@
+.direnv/
+npm/

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "deno.enable": true,
+  "deno.lint": true,
+  "deno.unstable": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Suyashtnt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,15 @@
+# Kleur
+
+## Dark, tonal, beautiful
+
+**Also known as `kleurskema` on npm. Currently in heavy dev.**
+
+Kleur is a (dark only for now) color scheme based on
+[Catppuccin](https://catppuccin.com) and [Rosé Pine](https://rosepinetheme.com).
+It's designed to be:
+
+- Minimal. Very few colours are used, and they're designed to be used tonally.
+- Beautiful. What's the use of a colourscheme if it doesn't work?
+- Easy to read. Colours are AAA WCA certified for base, surface, overlay, and
+  text. Tonal colours are based on the base colour mixed in with the tone, so
+  they're easy to read too.

build.ts

@@ -0,0 +1,35 @@
+import { build, emptyDir } from "dnt";
+
+await emptyDir("./npm");
+
+await build({
+  entryPoints: ["./mod.ts"],
+  outDir: "./npm",
+  shims: {
+    // see JS docs for overview and more options
+    deno: true,
+  },
+  package: {
+    // package.json properties
+    name: "kleurskema",
+    version: "0.2.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");
+  },
+});

deno.json

@@ -0,0 +1,12 @@
+{
+  "imports": {
+    "std/": "https://deno.land/[email protected]/",
+    "culori": "https://esm.sh/[email protected]",
+    "dnt": "https://deno.land/x/[email protected]/mod.ts"
+  },
+  "importMap": "deno.jsonc",
+  "tasks": {
+    "dev": "deno run --watch mod.ts",
+    "build": "deno run -A build.ts"
+  }
+}

dev/colourChecker.ts

@@ -0,0 +1,43 @@
+import { formatCss as rgb } from "culori";
+import { dark } from "../palletes.ts";
+
+const colours = Object.entries(dark);
+// @ts-expect-error this works
+const foregroundColours = colours.map((
+  [name, colour],
+) => [name, rgb(colour.foreground ?? colour)]);
+// @ts-expect-error this works
+const backgroundColours = colours.map((
+  [name, colour],
+) => [name, rgb(colour.background ?? colour)]);
+
+const colourRows = backgroundColours.map(([name, background]) => {
+  return [
+    name,
+    foregroundColours.map(([name, foreground]) => {
+      return {
+        name,
+        background,
+        foreground,
+      };
+    }),
+  ] as const;
+});
+
+// display the columns
+for (const [name, colours] of colourRows) {
+  const thisRowsColour = colours.find(({ name }) => name === name)!;
+  console.log(
+    `%c${name}`,
+    `color: ${thisRowsColour.foreground}; background-color: ${thisRowsColour.background};`,
+  );
+
+  const colourRow = colours.reduce((acc, { name, background, foreground }) => {
+    acc.string += `%c${name} `;
+    acc.style.push(`color: ${foreground}; background-color: ${background};`);
+    return acc;
+  }, { string: "", style: [] as string[] });
+
+  console.log(colourRow.string, ...colourRow.style);
+  console.log();
+}

dev/printBase16.ts

@@ -0,0 +1,5 @@
+import { dark } from "../palletes.ts";
+import { toBase16 } from "../exporters/base16.ts";
+
+const theme = toBase16(dark);
+console.log(JSON.stringify(theme, null, 2));

dev/printTheme.ts

@@ -0,0 +1,4 @@
+import { toHex } from "../lib.ts";
+import { dark } from "../palletes.ts";
+
+console.log(JSON.stringify(toHex(dark), null, 2));

exporters/base16.ts

@@ -0,0 +1,11 @@
+import { fromObjectEntries, objectEntries } from "../lib.ts";
+import { Base16, Palette } from "../palletes.ts";
+import { formatCss } from "culori";
+
+export const toBase16 = (
+  // deno-lint-ignore no-unused-vars
+  { base, overlay, primary, secondary, surface, ...pallete }: Palette,
+): Base16<string> =>
+  fromObjectEntries(
+    objectEntries(pallete).map(([name, colour]) => [name, formatCss(colour)]),
+  );

exporters/css.ts

@@ -0,0 +1,47 @@
+import { formatCss } from "culori";
+import { HumanPalette } from "../palletes.ts";
+
+export const toCss = (pallete: HumanPalette): HumanPalette<string> => ({
+  base: {
+    background: formatCss(pallete.base.background),
+    foreground: formatCss(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),
+  overlay: {
+    background: formatCss(pallete.overlay.background),
+    foreground: formatCss(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),
+  },
+  surface: {
+    background: formatCss(pallete.surface.background),
+    foreground: formatCss(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),
+});

exporters/hex.ts

@@ -0,0 +1,47 @@
+import { formatCss } from "culori";
+import { HumanPalette } from "../palletes.ts";
+
+export const toHex = (pallete: HumanPalette): HumanPalette<string> => ({
+  base: {
+    background: formatCss(pallete.base.background),
+    foreground: formatCss(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),
+  overlay: {
+    background: formatCss(pallete.overlay.background),
+    foreground: formatCss(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),
+  },
+  surface: {
+    background: formatCss(pallete.surface.background),
+    foreground: formatCss(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),
+});

exporters/mod.ts

@@ -0,0 +1,3 @@
+export * from "./css.ts";
+export * from "./base16.ts";
+export * from "./hex.ts";