From 21421fafd786bc3e1848a65f4443a6f6d813b98b Mon Sep 17 00:00:00 2001 From: sgoudham Date: Sun, 20 Oct 2024 19:58:50 +0100 Subject: [PATCH 01/18] feat: add ANSI colours --- deno.lock | 2 + import_map.json | 3 +- mod.ts | 63 +++++++ palette.json | 362 ++++++++++++++++++++++++++++++++++++++++- scripts/gen_palette.ts | 111 ++++++++++++- 5 files changed, 536 insertions(+), 5 deletions(-) diff --git a/deno.lock b/deno.lock index f1cacef..093bce5 100644 --- a/deno.lock +++ b/deno.lock @@ -225,6 +225,8 @@ "https://esm.sh/v135/ase-utils@0.1.1/X-ZS8q/denonext/ase-utils.mjs": "9d0e2be7b2d03916d65550a835698138af18d05f329fe64660cce9a20558dbf5", "https://esm.sh/v135/bytebuffer@3.5.4": "25eccd4416d3aba412d5f763b17c2d38e64907a40248d35c0e33b584939db02e", "https://esm.sh/v135/bytebuffer@3.5.4/denonext/bytebuffer.mjs": "82e7ac0bcc2d2706322705b77cbe85e7f7fc3f0dfdb187fb82c6db931f1b6e47", + "https://esm.sh/v135/colorjs.io@0.5.2": "2a1b7be172392fda207281c9d51a54e910e8eaec9fb8bf24bc0a5704b9af8cc7", + "https://esm.sh/v135/colorjs.io@0.5.2/denonext/colorjs.io.mjs": "20be67148544b6e6b6d09836684862cb38041a62272f065f66d7d81ed1ea4f3e", "https://esm.sh/v135/jszip@3.10.1/denonext/jszip.mjs": "e9883ef00252932b610e53a2ae9ef19fd7bc498cd0fb34068f72497e5c5fc4f7", "https://esm.sh/v135/long@2.4.0/denonext/long.mjs": "5859b34edc28854d4d04ed38defd66feb33341a0ac9bff6f4d3fa1abb3b7e529", "https://esm.sh/v135/procreate-swatches@0.1.1/X-ZS8q/denonext/procreate-swatches.mjs": "ef1eaea19420a0ef8f87d38b6600376ccb55f778104bcbeae00080ebe07258d9", diff --git a/import_map.json b/import_map.json index 5caa5ea..6185217 100644 --- a/import_map.json +++ b/import_map.json @@ -10,7 +10,8 @@ "dnt": "https://deno.land/x/dnt@0.39.0/mod.ts", "ase-utils": "https://esm.sh/v135/*ase-utils@0.1.1", "procreate-swatches": "https://esm.sh/v135/*procreate-swatches@0.1.1", - "tinycolor2": "https://esm.sh/v135/tinycolor2@1.6.0" + "tinycolor2": "https://esm.sh/v135/tinycolor2@1.6.0", + "colorjs": "https://esm.sh/v135/colorjs.io@0.5.2" }, "scopes": { "https://esm.sh/v135/": { diff --git a/mod.ts b/mod.ts index e307036..d829683 100644 --- a/mod.ts +++ b/mod.ts @@ -49,6 +49,16 @@ export type MonochromaticName = | "mantle" | "crust"; +type AnsiName = + | "black" + | "red" + | "green" + | "yellow" + | "blue" + | "purple" + | "cyan" + | "white"; + /** * All color names of Catppuccin */ @@ -59,6 +69,11 @@ export type ColorName = AccentName | MonochromaticName; */ export type Colors = Record; +/** + * Generic to map type T to all ANSI color names + */ +export type AnsiColors = Record; + /** * A flavor of Catppuccin */ @@ -88,10 +103,20 @@ export type CatppuccinFlavor = Readonly<{ */ colors: CatppuccinColors; + /** + * An object containing all the ANSI color mappings of the flavor + */ + ansi: CatppuccinAnsiColors; + /** * A typed Object.entries iterable of the colors of the flavor */ colorEntries: Entries; + + /** + * A typed Object.entries iterable of the ANSI colors of the flavor + */ + ansiColorEntries: Entries; }>; /** @@ -99,6 +124,11 @@ export type CatppuccinFlavor = Readonly<{ */ export type CatppuccinColors = Readonly>; +/** + * All ANSI color mappings of Catppuccin + */ +export type CatppuccinAnsiColors = Readonly>; + /** * All flavors of Catppuccin */ @@ -187,6 +217,38 @@ export type ColorFormat = Readonly<{ accent: boolean; }>; +export type AnsiColorFormat = Readonly<{ + /** + * The name of the Catppuccin color that this ANSI color maps to. + * @example "pink" + */ + mapping: string; + + /** + * The ANSI "normal" colors, which are the 8 standard colors from 0 to 7. + */ + normal: AnsiColorProperties; + + /** + * The ANSI "bright" colors, which are the 8 standard colors from 8 to 15. + */ + bright: AnsiColorProperties; +}>; + +export type AnsiColorProperties = { + /** + * String-formatted hex value + * @example "#babbf1" + */ + hex: string; + + /** + * The ANSI color code + * @example 4 + */ + code: number; +}; + const { version: _, ...jsonFlavors } = definitions; /** @@ -203,6 +265,7 @@ export const flavors: CatppuccinFlavors = entriesFromObject( acc[flavorName] = { ...flavor, colorEntries: entriesFromObject(flavor.colors), + ansiColorEntries: entriesFromObject(flavor.ansi), }; return acc; }, {} as CatppuccinFlavors); diff --git a/palette.json b/palette.json index 46d86ff..df9313b 100644 --- a/palette.json +++ b/palette.json @@ -422,6 +422,96 @@ }, "accent": false } + }, + "ansi": { + "black": { + "mapping": "surface2", + "normal": { + "hex": "#acb0be", + "code": 0 + }, + "bright": { + "hex": "#b3b8c6", + "code": 8 + } + }, + "red": { + "mapping": "red", + "normal": { + "hex": "#d20f39", + "code": 1 + }, + "bright": { + "hex": "#d91641", + "code": 9 + } + }, + "green": { + "mapping": "green", + "normal": { + "hex": "#40a02b", + "code": 2 + }, + "bright": { + "hex": "#4da62e", + "code": 10 + } + }, + "yellow": { + "mapping": "yellow", + "normal": { + "hex": "#df8e1d", + "code": 3 + }, + "bright": { + "hex": "#ea9329", + "code": 11 + } + }, + "blue": { + "mapping": "blue", + "normal": { + "hex": "#1e66f5", + "code": 4 + }, + "bright": { + "hex": "#046cfc", + "code": 12 + } + }, + "purple": { + "mapping": "pink", + "normal": { + "hex": "#ea76cb", + "code": 5 + }, + "bright": { + "hex": "#f07ed6", + "code": 13 + } + }, + "cyan": { + "mapping": "teal", + "normal": { + "hex": "#179299", + "code": 6 + }, + "bright": { + "hex": "#23989d", + "code": 14 + } + }, + "white": { + "mapping": "subtext1", + "normal": { + "hex": "#5c5f77", + "code": 7 + }, + "bright": { + "hex": "#5f637b", + "code": 15 + } + } } }, "frappe": { @@ -846,6 +936,96 @@ }, "accent": false } + }, + "ansi": { + "black": { + "mapping": "surface2", + "normal": { + "hex": "#626880", + "code": 0 + }, + "bright": { + "hex": "#5a6388", + "code": 8 + } + }, + "red": { + "mapping": "red", + "normal": { + "hex": "#e78284", + "code": 1 + }, + "bright": { + "hex": "#ea7475", + "code": 9 + } + }, + "green": { + "mapping": "green", + "normal": { + "hex": "#a6d189", + "code": 2 + }, + "bright": { + "hex": "#93cb76", + "code": 10 + } + }, + "yellow": { + "mapping": "yellow", + "normal": { + "hex": "#e5c890", + "code": 3 + }, + "bright": { + "hex": "#debf78", + "code": 11 + } + }, + "blue": { + "mapping": "blue", + "normal": { + "hex": "#8caaee", + "code": 4 + }, + "bright": { + "hex": "#7fa2f4", + "code": 12 + } + }, + "purple": { + "mapping": "pink", + "normal": { + "hex": "#f4b8e4", + "code": 5 + }, + "bright": { + "hex": "#f6a9df", + "code": 13 + } + }, + "cyan": { + "mapping": "teal", + "normal": { + "hex": "#81c8be", + "code": 6 + }, + "bright": { + "hex": "#5ec3b9", + "code": 14 + } + }, + "white": { + "mapping": "subtext1", + "normal": { + "hex": "#b5bfe2", + "code": 7 + }, + "bright": { + "hex": "#a9b6e8", + "code": 15 + } + } } }, "macchiato": { @@ -1270,6 +1450,96 @@ }, "accent": false } + }, + "ansi": { + "black": { + "mapping": "surface2", + "normal": { + "hex": "#5b6078", + "code": 0 + }, + "bright": { + "hex": "#545b81", + "code": 8 + } + }, + "red": { + "mapping": "red", + "normal": { + "hex": "#ed8796", + "code": 1 + }, + "bright": { + "hex": "#f07889", + "code": 9 + } + }, + "green": { + "mapping": "green", + "normal": { + "hex": "#a6da95", + "code": 2 + }, + "bright": { + "hex": "#90d483", + "code": 10 + } + }, + "yellow": { + "mapping": "yellow", + "normal": { + "hex": "#eed49f", + "code": 3 + }, + "bright": { + "hex": "#e6ca86", + "code": 11 + } + }, + "blue": { + "mapping": "blue", + "normal": { + "hex": "#8aadf4", + "code": 4 + }, + "bright": { + "hex": "#7ca5fa", + "code": 12 + } + }, + "purple": { + "mapping": "pink", + "normal": { + "hex": "#f5bde6", + "code": 5 + }, + "bright": { + "hex": "#f7aee1", + "code": 13 + } + }, + "cyan": { + "mapping": "teal", + "normal": { + "hex": "#8bd5ca", + "code": 6 + }, + "bright": { + "hex": "#68d0c4", + "code": 14 + } + }, + "white": { + "mapping": "subtext1", + "normal": { + "hex": "#b8c0e0", + "code": 7 + }, + "bright": { + "hex": "#acb7e6", + "code": 15 + } + } } }, "mocha": { @@ -1694,6 +1964,96 @@ }, "accent": false } + }, + "ansi": { + "black": { + "mapping": "surface2", + "normal": { + "hex": "#585b70", + "code": 0 + }, + "bright": { + "hex": "#525679", + "code": 8 + } + }, + "red": { + "mapping": "red", + "normal": { + "hex": "#f38ba8", + "code": 1 + }, + "bright": { + "hex": "#f77b9d", + "code": 9 + } + }, + "green": { + "mapping": "green", + "normal": { + "hex": "#a6e3a1", + "code": 2 + }, + "bright": { + "hex": "#8edd90", + "code": 10 + } + }, + "yellow": { + "mapping": "yellow", + "normal": { + "hex": "#f9e2af", + "code": 3 + }, + "bright": { + "hex": "#f1d895", + "code": 11 + } + }, + "blue": { + "mapping": "blue", + "normal": { + "hex": "#89b4fa", + "code": 4 + }, + "bright": { + "hex": "#78acff", + "code": 12 + } + }, + "purple": { + "mapping": "pink", + "normal": { + "hex": "#f5c2e7", + "code": 5 + }, + "bright": { + "hex": "#f7b3e2", + "code": 13 + } + }, + "cyan": { + "mapping": "teal", + "normal": { + "hex": "#94e2d5", + "code": 6 + }, + "bright": { + "hex": "#70dcce", + "code": 14 + } + }, + "white": { + "mapping": "subtext1", + "normal": { + "hex": "#bac2de", + "code": 7 + }, + "bright": { + "hex": "#aeb9e4", + "code": 15 + } + } } } -} +} \ No newline at end of file diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 8cf9535..51b585d 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -1,9 +1,11 @@ import { join } from "std/path/join.ts"; import tinycolor from "tinycolor2"; +import Color from "colorjs"; import meta from "../deno.json" with { type: "json" }; import type { + CatppuccinAnsiColors, CatppuccinColors, CatppuccinFlavor, Flavors, @@ -199,8 +201,83 @@ const accents = [ "lavender", ]; -const formatted = entriesFromObject(definitions) - .reduce((acc, [flavorName, flavor], currentIndex) => { +const ansi_mappings = { + black: { + colorName: "surface2", + normal: { + code: 0, + }, + bright: { + code: 8, + }, + }, + red: { + colorName: "red", + normal: { + code: 1, + }, + bright: { + code: 9, + }, + }, + green: { + colorName: "green", + normal: { + code: 2, + }, + bright: { + code: 10, + }, + }, + yellow: { + colorName: "yellow", + normal: { + code: 3, + }, + bright: { + code: 11, + }, + }, + blue: { + colorName: "blue", + normal: { + code: 4, + }, + bright: { + code: 12, + }, + }, + purple: { + colorName: "pink", + normal: { + code: 5, + }, + bright: { + code: 13, + }, + }, + cyan: { + colorName: "teal", + normal: { + code: 6, + }, + bright: { + code: 14, + }, + }, + white: { + colorName: "subtext1", + normal: { + code: 7, + }, + bright: { + code: 15, + }, + }, +}; + +const formatted = entriesFromObject(definitions).reduce( + (acc, [flavorName, flavor], currentIndex) => { acc[flavorName] = { name: flavor.name, emoji: flavor.emoji, @@ -222,9 +299,37 @@ const formatted = entriesFromObject(definitions) }, {} as Writeable, ), + ansi: entriesFromObject(ansi_mappings).reduce( + (acc, [name, props]) => { + const color = + flavor.colors[props.colorName as keyof CatppuccinColors]; + const ansiBrights = new Color(color); + const lightnessShift = flavor.dark ? 0.96 : 1.04; + const chromaShift = flavor.dark ? 8 : 0; + const hueShift = flavor.dark ? 2 : -2; + ansiBrights.lch.l *= lightnessShift; + ansiBrights.lch.c += chromaShift; + ansiBrights.lch.h += hueShift; + acc[name] = { + mapping: props.colorName, + normal: { + hex: color, + code: props.normal.code, + }, + bright: { + hex: ansiBrights.toString({ format: "hex" }), + code: props.bright.code, + }, + }; + return acc; + }, + {} as Writeable, + ), }; return acc; - }, {} as Flavors>); + }, + {} as Flavors>, +); const __dirname = new URL(".", import.meta.url).pathname; From 1d3af706ad47764798e7733dcef5d21ba87f256c Mon Sep 17 00:00:00 2001 From: sgoudham Date: Mon, 21 Oct 2024 01:08:41 +0100 Subject: [PATCH 02/18] fix: correct algo & use existing palette colours --- palette.json | 28 +++++++++++------------ scripts/gen_palette.ts | 52 +++++++++++++++++++++++------------------- 2 files changed, 42 insertions(+), 38 deletions(-) diff --git a/palette.json b/palette.json index df9313b..5923da1 100644 --- a/palette.json +++ b/palette.json @@ -431,7 +431,7 @@ "code": 0 }, "bright": { - "hex": "#b3b8c6", + "hex": "#bcc0cc", "code": 8 } }, @@ -442,7 +442,7 @@ "code": 1 }, "bright": { - "hex": "#d91641", + "hex": "#d71f39", "code": 9 } }, @@ -453,7 +453,7 @@ "code": 2 }, "bright": { - "hex": "#4da62e", + "hex": "#40a735", "code": 10 } }, @@ -464,7 +464,7 @@ "code": 3 }, "bright": { - "hex": "#ea9329", + "hex": "#e49722", "code": 11 } }, @@ -475,7 +475,7 @@ "code": 4 }, "bright": { - "hex": "#046cfc", + "hex": "#3c68f9", "code": 12 } }, @@ -486,7 +486,7 @@ "code": 5 }, "bright": { - "hex": "#f07ed6", + "hex": "#f47ccf", "code": 13 } }, @@ -497,7 +497,7 @@ "code": 6 }, "bright": { - "hex": "#23989d", + "hex": "#2298a1", "code": 14 } }, @@ -508,7 +508,7 @@ "code": 7 }, "bright": { - "hex": "#5f637b", + "hex": "#6c6f85", "code": 15 } } @@ -945,7 +945,7 @@ "code": 0 }, "bright": { - "hex": "#5a6388", + "hex": "#51576d", "code": 8 } }, @@ -1022,7 +1022,7 @@ "code": 7 }, "bright": { - "hex": "#a9b6e8", + "hex": "#a5adce", "code": 15 } } @@ -1459,7 +1459,7 @@ "code": 0 }, "bright": { - "hex": "#545b81", + "hex": "#494d64", "code": 8 } }, @@ -1536,7 +1536,7 @@ "code": 7 }, "bright": { - "hex": "#acb7e6", + "hex": "#a5adcb", "code": 15 } } @@ -1973,7 +1973,7 @@ "code": 0 }, "bright": { - "hex": "#525679", + "hex": "#45475a", "code": 8 } }, @@ -2050,7 +2050,7 @@ "code": 7 }, "bright": { - "hex": "#aeb9e4", + "hex": "#a6adc8", "code": 15 } } diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 51b585d..7a1aafa 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -299,32 +299,36 @@ const formatted = entriesFromObject(definitions).reduce( }, {} as Writeable, ), - ansi: entriesFromObject(ansi_mappings).reduce( - (acc, [name, props]) => { - const color = - flavor.colors[props.colorName as keyof CatppuccinColors]; - const ansiBrights = new Color(color); + ansi: entriesFromObject(ansi_mappings).reduce((acc, [name, props]) => { + const normalColor = flavor.colors[props.colorName as keyof CatppuccinColors]; + let brightColorHex: string; + if (props.colorName == "surface2") { + brightColorHex = flavor.colors["surface1"]; + } else if (props.colorName == "subtext1") { + brightColorHex = flavor.colors["subtext0"] + } else { + const brightColor = new Color(normalColor); const lightnessShift = flavor.dark ? 0.96 : 1.04; const chromaShift = flavor.dark ? 8 : 0; - const hueShift = flavor.dark ? 2 : -2; - ansiBrights.lch.l *= lightnessShift; - ansiBrights.lch.c += chromaShift; - ansiBrights.lch.h += hueShift; - acc[name] = { - mapping: props.colorName, - normal: { - hex: color, - code: props.normal.code, - }, - bright: { - hex: ansiBrights.toString({ format: "hex" }), - code: props.bright.code, - }, - }; - return acc; - }, - {} as Writeable, - ), + const hueShift = 2; + brightColor.lch.l *= lightnessShift; + brightColor.lch.c += chromaShift; + brightColor.lch.h += hueShift; + brightColorHex = brightColor.toString({ format: "hex" }) + } + acc[name] = { + mapping: props.colorName, + normal: { + hex: normalColor, + code: props.normal.code, + }, + bright: { + hex: brightColorHex, + code: props.bright.code, + }, + }; + return acc; + }, {} as Writeable), }; return acc; }, From 86b1a8197e8b4e770df2136bc2e48a7ea7ddbdd9 Mon Sep 17 00:00:00 2001 From: sgoudham Date: Mon, 21 Oct 2024 01:51:38 +0100 Subject: [PATCH 03/18] tests: add unit --- mod.test.ts | 31 +++++++++++++++++++++++++++---- scripts/gen_palette.ts | 6 +++--- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/mod.test.ts b/mod.test.ts index d29dffe..1ea7e3d 100644 --- a/mod.test.ts +++ b/mod.test.ts @@ -5,12 +5,12 @@ import palette from "@/palette.json" with { type: "json" }; Deno.test("flavorEntries", () => { flavorEntries - .map(([flavorName, flavor]) => + .map(([flavorName, flavor]) => { flavor.colorEntries .map(([colorName, color]) => - assertEquals(palette[flavorName].colors[colorName].hex, color.hex) - ) - ); + assertEquals(color.hex, palette[flavorName].colors[colorName].hex) + ); + }); }); Deno.test("flavors", () => { @@ -22,6 +22,29 @@ Deno.test("flavors", () => { }); }); +Deno.test("ansiEntries", () => { + flavorEntries.map(([flavorName, flavor]) => { + flavor.ansiColorEntries.map(([ansiColorName, ansiColor]) => { + assertEquals( + ansiColor.normal.hex, + palette[flavorName].ansi[ansiColorName].normal.hex, + ); + if (ansiColorName == "black") { + assertEquals( + ansiColor.bright.hex, + palette[flavorName].colors.surface1.hex, + ); + } + if (ansiColorName == "white") { + assertEquals( + ansiColor.bright.hex, + palette[flavorName].colors.subtext0.hex, + ); + } + }); + }); +}); + Deno.test("version", () => { assertEquals(version, "1.4.0"); // x-release-please-version }); diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 7a1aafa..7f247f3 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -300,14 +300,14 @@ const formatted = entriesFromObject(definitions).reduce( {} as Writeable, ), ansi: entriesFromObject(ansi_mappings).reduce((acc, [name, props]) => { - const normalColor = flavor.colors[props.colorName as keyof CatppuccinColors]; + const normalColorHex = flavor.colors[props.colorName as keyof CatppuccinColors]; let brightColorHex: string; if (props.colorName == "surface2") { brightColorHex = flavor.colors["surface1"]; } else if (props.colorName == "subtext1") { brightColorHex = flavor.colors["subtext0"] } else { - const brightColor = new Color(normalColor); + const brightColor = new Color(normalColorHex); const lightnessShift = flavor.dark ? 0.96 : 1.04; const chromaShift = flavor.dark ? 8 : 0; const hueShift = 2; @@ -319,7 +319,7 @@ const formatted = entriesFromObject(definitions).reduce( acc[name] = { mapping: props.colorName, normal: { - hex: normalColor, + hex: normalColorHex, code: props.normal.code, }, bright: { From f1f3989d2d416af771bad2b2bb9b6159e37c5dff Mon Sep 17 00:00:00 2001 From: sgoudham Date: Mon, 21 Oct 2024 01:54:17 +0100 Subject: [PATCH 04/18] fix: build dep --- deno.lock | 5 +++++ import_map.json | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/deno.lock b/deno.lock index 3438166..1f2ea3a 100644 --- a/deno.lock +++ b/deno.lock @@ -5,6 +5,7 @@ "npm:@types/node": "npm:@types/node@18.16.19", "npm:ase-utils@0.1.1": "npm:ase-utils@0.1.1", "npm:chalk@5": "npm:chalk@5.3.0", + "npm:colorjs.io@0.5.2": "npm:colorjs.io@0.5.2", "npm:procreate-swatches@0.1.1": "npm:procreate-swatches@0.1.1", "npm:tinycolor2@1.6.0": "npm:tinycolor2@1.6.0" }, @@ -44,6 +45,10 @@ "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", "dependencies": {} }, + "colorjs.io@0.5.2": { + "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==", + "dependencies": {} + }, "core-util-is@1.0.3": { "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", "dependencies": {} diff --git a/import_map.json b/import_map.json index c80167b..e1c9be0 100644 --- a/import_map.json +++ b/import_map.json @@ -10,6 +10,7 @@ "dnt": "https://deno.land/x/dnt@0.39.0/mod.ts", "ase-utils": "npm:ase-utils@0.1.1", "procreate-swatches": "npm:procreate-swatches@0.1.1", - "tinycolor2": "npm:tinycolor2@1.6.0" + "tinycolor2": "npm:tinycolor2@1.6.0", + "colorjs": "npm:colorjs.io@0.5.2" } } From 55faf8621462728c65c010c3a32f56e2de42e9cf Mon Sep 17 00:00:00 2001 From: sgoudham Date: Mon, 21 Oct 2024 01:56:54 +0100 Subject: [PATCH 05/18] refactor: inline --- scripts/gen_palette.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 7f247f3..76f2476 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -308,12 +308,9 @@ const formatted = entriesFromObject(definitions).reduce( brightColorHex = flavor.colors["subtext0"] } else { const brightColor = new Color(normalColorHex); - const lightnessShift = flavor.dark ? 0.96 : 1.04; - const chromaShift = flavor.dark ? 8 : 0; - const hueShift = 2; - brightColor.lch.l *= lightnessShift; - brightColor.lch.c += chromaShift; - brightColor.lch.h += hueShift; + brightColor.lch.l *= flavor.dark ? 0.96 : 1.04; + brightColor.lch.c += flavor.dark ? 8 : 0; + brightColor.lch.h += 2; brightColorHex = brightColor.toString({ format: "hex" }) } acc[name] = { From 006a52de2d24bf33df33cbe09db1574e301ce56a Mon Sep 17 00:00:00 2001 From: sgoudham Date: Mon, 21 Oct 2024 02:26:31 +0100 Subject: [PATCH 06/18] refactor: remove mapping from public API --- mod.ts | 22 ++++++++-------------- palette.json | 32 -------------------------------- scripts/gen_palette.ts | 33 +++++++++++++++++---------------- 3 files changed, 25 insertions(+), 62 deletions(-) diff --git a/mod.ts b/mod.ts index d829683..b6022fe 100644 --- a/mod.ts +++ b/mod.ts @@ -127,7 +127,7 @@ export type CatppuccinColors = Readonly>; /** * All ANSI color mappings of Catppuccin */ -export type CatppuccinAnsiColors = Readonly>; +export type CatppuccinAnsiColors = Readonly>; /** * All flavors of Catppuccin @@ -217,25 +217,19 @@ export type ColorFormat = Readonly<{ accent: boolean; }>; -export type AnsiColorFormat = Readonly<{ - /** - * The name of the Catppuccin color that this ANSI color maps to. - * @example "pink" - */ - mapping: string; - +export type AnsiColorGroups = Readonly<{ /** - * The ANSI "normal" colors, which are the 8 standard colors from 0 to 7. + * An object containing all the ANSI "normal" colors, which are the 8 standard colors from 0 to 7. */ - normal: AnsiColorProperties; + normal: AnsiColorFormat; /** - * The ANSI "bright" colors, which are the 8 standard colors from 8 to 15. + * An object containing all the ANSI "bright" colors, which are the 8 standard colors from 8 to 15. */ - bright: AnsiColorProperties; + bright: AnsiColorFormat; }>; -export type AnsiColorProperties = { +export type AnsiColorFormat = Readonly<{ /** * String-formatted hex value * @example "#babbf1" @@ -247,7 +241,7 @@ export type AnsiColorProperties = { * @example 4 */ code: number; -}; +}>; const { version: _, ...jsonFlavors } = definitions; diff --git a/palette.json b/palette.json index 5923da1..b67a70f 100644 --- a/palette.json +++ b/palette.json @@ -425,7 +425,6 @@ }, "ansi": { "black": { - "mapping": "surface2", "normal": { "hex": "#acb0be", "code": 0 @@ -436,7 +435,6 @@ } }, "red": { - "mapping": "red", "normal": { "hex": "#d20f39", "code": 1 @@ -447,7 +445,6 @@ } }, "green": { - "mapping": "green", "normal": { "hex": "#40a02b", "code": 2 @@ -458,7 +455,6 @@ } }, "yellow": { - "mapping": "yellow", "normal": { "hex": "#df8e1d", "code": 3 @@ -469,7 +465,6 @@ } }, "blue": { - "mapping": "blue", "normal": { "hex": "#1e66f5", "code": 4 @@ -480,7 +475,6 @@ } }, "purple": { - "mapping": "pink", "normal": { "hex": "#ea76cb", "code": 5 @@ -491,7 +485,6 @@ } }, "cyan": { - "mapping": "teal", "normal": { "hex": "#179299", "code": 6 @@ -502,7 +495,6 @@ } }, "white": { - "mapping": "subtext1", "normal": { "hex": "#5c5f77", "code": 7 @@ -939,7 +931,6 @@ }, "ansi": { "black": { - "mapping": "surface2", "normal": { "hex": "#626880", "code": 0 @@ -950,7 +941,6 @@ } }, "red": { - "mapping": "red", "normal": { "hex": "#e78284", "code": 1 @@ -961,7 +951,6 @@ } }, "green": { - "mapping": "green", "normal": { "hex": "#a6d189", "code": 2 @@ -972,7 +961,6 @@ } }, "yellow": { - "mapping": "yellow", "normal": { "hex": "#e5c890", "code": 3 @@ -983,7 +971,6 @@ } }, "blue": { - "mapping": "blue", "normal": { "hex": "#8caaee", "code": 4 @@ -994,7 +981,6 @@ } }, "purple": { - "mapping": "pink", "normal": { "hex": "#f4b8e4", "code": 5 @@ -1005,7 +991,6 @@ } }, "cyan": { - "mapping": "teal", "normal": { "hex": "#81c8be", "code": 6 @@ -1016,7 +1001,6 @@ } }, "white": { - "mapping": "subtext1", "normal": { "hex": "#b5bfe2", "code": 7 @@ -1453,7 +1437,6 @@ }, "ansi": { "black": { - "mapping": "surface2", "normal": { "hex": "#5b6078", "code": 0 @@ -1464,7 +1447,6 @@ } }, "red": { - "mapping": "red", "normal": { "hex": "#ed8796", "code": 1 @@ -1475,7 +1457,6 @@ } }, "green": { - "mapping": "green", "normal": { "hex": "#a6da95", "code": 2 @@ -1486,7 +1467,6 @@ } }, "yellow": { - "mapping": "yellow", "normal": { "hex": "#eed49f", "code": 3 @@ -1497,7 +1477,6 @@ } }, "blue": { - "mapping": "blue", "normal": { "hex": "#8aadf4", "code": 4 @@ -1508,7 +1487,6 @@ } }, "purple": { - "mapping": "pink", "normal": { "hex": "#f5bde6", "code": 5 @@ -1519,7 +1497,6 @@ } }, "cyan": { - "mapping": "teal", "normal": { "hex": "#8bd5ca", "code": 6 @@ -1530,7 +1507,6 @@ } }, "white": { - "mapping": "subtext1", "normal": { "hex": "#b8c0e0", "code": 7 @@ -1967,7 +1943,6 @@ }, "ansi": { "black": { - "mapping": "surface2", "normal": { "hex": "#585b70", "code": 0 @@ -1978,7 +1953,6 @@ } }, "red": { - "mapping": "red", "normal": { "hex": "#f38ba8", "code": 1 @@ -1989,7 +1963,6 @@ } }, "green": { - "mapping": "green", "normal": { "hex": "#a6e3a1", "code": 2 @@ -2000,7 +1973,6 @@ } }, "yellow": { - "mapping": "yellow", "normal": { "hex": "#f9e2af", "code": 3 @@ -2011,7 +1983,6 @@ } }, "blue": { - "mapping": "blue", "normal": { "hex": "#89b4fa", "code": 4 @@ -2022,7 +1993,6 @@ } }, "purple": { - "mapping": "pink", "normal": { "hex": "#f5c2e7", "code": 5 @@ -2033,7 +2003,6 @@ } }, "cyan": { - "mapping": "teal", "normal": { "hex": "#94e2d5", "code": 6 @@ -2044,7 +2013,6 @@ } }, "white": { - "mapping": "subtext1", "normal": { "hex": "#bac2de", "code": 7 diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 76f2476..66d4c4e 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -8,6 +8,7 @@ import type { CatppuccinAnsiColors, CatppuccinColors, CatppuccinFlavor, + ColorName, Flavors, } from "@catppuccin/palette"; @@ -201,10 +202,10 @@ const accents = [ "lavender", ]; -const ansi_mappings = { +const ansiMappings = { black: { - colorName: "surface2", normal: { + mapping: "surface2", code: 0, }, bright: { @@ -212,8 +213,8 @@ const ansi_mappings = { }, }, red: { - colorName: "red", normal: { + mapping: "red", code: 1, }, bright: { @@ -221,8 +222,8 @@ const ansi_mappings = { }, }, green: { - colorName: "green", normal: { + mapping: "green", code: 2, }, bright: { @@ -230,8 +231,8 @@ const ansi_mappings = { }, }, yellow: { - colorName: "yellow", normal: { + mapping: "yellow", code: 3, }, bright: { @@ -239,8 +240,8 @@ const ansi_mappings = { }, }, blue: { - colorName: "blue", normal: { + mapping: "blue", code: 4, }, bright: { @@ -248,8 +249,8 @@ const ansi_mappings = { }, }, purple: { - colorName: "pink", normal: { + mapping: "pink", code: 5, }, bright: { @@ -257,8 +258,8 @@ const ansi_mappings = { }, }, cyan: { - colorName: "teal", normal: { + mapping: "teal", code: 6, }, bright: { @@ -266,8 +267,8 @@ const ansi_mappings = { }, }, white: { - colorName: "subtext1", normal: { + mapping: "subtext1", code: 7, }, bright: { @@ -299,22 +300,22 @@ const formatted = entriesFromObject(definitions).reduce( }, {} as Writeable, ), - ansi: entriesFromObject(ansi_mappings).reduce((acc, [name, props]) => { - const normalColorHex = flavor.colors[props.colorName as keyof CatppuccinColors]; + ansi: entriesFromObject(ansiMappings).reduce((acc, [name, props]) => { + const mapping = props.normal.mapping as ColorName; + const normalColorHex = flavor.colors[mapping]; let brightColorHex: string; - if (props.colorName == "surface2") { + if (props.normal.mapping == "surface2") { brightColorHex = flavor.colors["surface1"]; - } else if (props.colorName == "subtext1") { - brightColorHex = flavor.colors["subtext0"] + } else if (props.normal.mapping == "subtext1") { + brightColorHex = flavor.colors["subtext0"]; } else { const brightColor = new Color(normalColorHex); brightColor.lch.l *= flavor.dark ? 0.96 : 1.04; brightColor.lch.c += flavor.dark ? 8 : 0; brightColor.lch.h += 2; - brightColorHex = brightColor.toString({ format: "hex" }) + brightColorHex = brightColor.toString({ format: "hex" }); } acc[name] = { - mapping: props.colorName, normal: { hex: normalColorHex, code: props.normal.code, From eed6c2ad78ec20b9ec32ca1aff18b50a283f998b Mon Sep 17 00:00:00 2001 From: sgoudham Date: Mon, 21 Oct 2024 02:37:09 +0100 Subject: [PATCH 07/18] chore: rename `ansi` -> `ansiColors` --- mod.test.ts | 2 +- mod.ts | 4 ++-- palette.json | 8 ++++---- scripts/gen_palette.ts | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/mod.test.ts b/mod.test.ts index 1ea7e3d..ef8bc8c 100644 --- a/mod.test.ts +++ b/mod.test.ts @@ -27,7 +27,7 @@ Deno.test("ansiEntries", () => { flavor.ansiColorEntries.map(([ansiColorName, ansiColor]) => { assertEquals( ansiColor.normal.hex, - palette[flavorName].ansi[ansiColorName].normal.hex, + palette[flavorName].ansiColors[ansiColorName].normal.hex, ); if (ansiColorName == "black") { assertEquals( diff --git a/mod.ts b/mod.ts index b6022fe..08c5736 100644 --- a/mod.ts +++ b/mod.ts @@ -106,7 +106,7 @@ export type CatppuccinFlavor = Readonly<{ /** * An object containing all the ANSI color mappings of the flavor */ - ansi: CatppuccinAnsiColors; + ansiColors: CatppuccinAnsiColors; /** * A typed Object.entries iterable of the colors of the flavor @@ -259,7 +259,7 @@ export const flavors: CatppuccinFlavors = entriesFromObject( acc[flavorName] = { ...flavor, colorEntries: entriesFromObject(flavor.colors), - ansiColorEntries: entriesFromObject(flavor.ansi), + ansiColorEntries: entriesFromObject(flavor.ansiColors), }; return acc; }, {} as CatppuccinFlavors); diff --git a/palette.json b/palette.json index b67a70f..7a2cbe7 100644 --- a/palette.json +++ b/palette.json @@ -423,7 +423,7 @@ "accent": false } }, - "ansi": { + "ansiColors": { "black": { "normal": { "hex": "#acb0be", @@ -929,7 +929,7 @@ "accent": false } }, - "ansi": { + "ansiColors": { "black": { "normal": { "hex": "#626880", @@ -1435,7 +1435,7 @@ "accent": false } }, - "ansi": { + "ansiColors": { "black": { "normal": { "hex": "#5b6078", @@ -1941,7 +1941,7 @@ "accent": false } }, - "ansi": { + "ansiColors": { "black": { "normal": { "hex": "#585b70", diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 66d4c4e..ae86852 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -300,7 +300,7 @@ const formatted = entriesFromObject(definitions).reduce( }, {} as Writeable, ), - ansi: entriesFromObject(ansiMappings).reduce((acc, [name, props]) => { + ansiColors: entriesFromObject(ansiMappings).reduce((acc, [name, props]) => { const mapping = props.normal.mapping as ColorName; const normalColorHex = flavor.colors[mapping]; let brightColorHex: string; From ff92bfd8290ca1231ea78b4a94f70621557cef73 Mon Sep 17 00:00:00 2001 From: lemon Date: Mon, 21 Oct 2024 16:46:16 +0200 Subject: [PATCH 08/18] fix(ansi): lightness values This adjusts the lightness values for the ANSI generation to result in the expected HEX values. --- palette.json | 50 +++++++++++++++++++++--------------------- scripts/gen_palette.ts | 2 +- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/palette.json b/palette.json index 7a2cbe7..037ae65 100644 --- a/palette.json +++ b/palette.json @@ -440,7 +440,7 @@ "code": 1 }, "bright": { - "hex": "#d71f39", + "hex": "#de293e", "code": 9 } }, @@ -450,7 +450,7 @@ "code": 2 }, "bright": { - "hex": "#40a735", + "hex": "#49af3d", "code": 10 } }, @@ -460,7 +460,7 @@ "code": 3 }, "bright": { - "hex": "#e49722", + "hex": "#eea02d", "code": 11 } }, @@ -470,7 +470,7 @@ "code": 4 }, "bright": { - "hex": "#3c68f9", + "hex": "#456eff", "code": 12 } }, @@ -480,7 +480,7 @@ "code": 5 }, "bright": { - "hex": "#f47ccf", + "hex": "#fe85d8", "code": 13 } }, @@ -490,7 +490,7 @@ "code": 6 }, "bright": { - "hex": "#2298a1", + "hex": "#2d9fa8", "code": 14 } }, @@ -946,7 +946,7 @@ "code": 1 }, "bright": { - "hex": "#ea7475", + "hex": "#e67172", "code": 9 } }, @@ -956,7 +956,7 @@ "code": 2 }, "bright": { - "hex": "#93cb76", + "hex": "#8ec772", "code": 10 } }, @@ -966,7 +966,7 @@ "code": 3 }, "bright": { - "hex": "#debf78", + "hex": "#d9ba73", "code": 11 } }, @@ -976,7 +976,7 @@ "code": 4 }, "bright": { - "hex": "#7fa2f4", + "hex": "#7b9ef0", "code": 12 } }, @@ -986,7 +986,7 @@ "code": 5 }, "bright": { - "hex": "#f6a9df", + "hex": "#f2a4db", "code": 13 } }, @@ -996,7 +996,7 @@ "code": 6 }, "bright": { - "hex": "#5ec3b9", + "hex": "#5abfb5", "code": 14 } }, @@ -1452,7 +1452,7 @@ "code": 1 }, "bright": { - "hex": "#f07889", + "hex": "#ec7486", "code": 9 } }, @@ -1462,7 +1462,7 @@ "code": 2 }, "bright": { - "hex": "#90d483", + "hex": "#8ccf7f", "code": 10 } }, @@ -1472,7 +1472,7 @@ "code": 3 }, "bright": { - "hex": "#e6ca86", + "hex": "#e1c682", "code": 11 } }, @@ -1482,7 +1482,7 @@ "code": 4 }, "bright": { - "hex": "#7ca5fa", + "hex": "#78a1f6", "code": 12 } }, @@ -1492,7 +1492,7 @@ "code": 5 }, "bright": { - "hex": "#f7aee1", + "hex": "#f2a9dd", "code": 13 } }, @@ -1502,7 +1502,7 @@ "code": 6 }, "bright": { - "hex": "#68d0c4", + "hex": "#63cbc0", "code": 14 } }, @@ -1958,7 +1958,7 @@ "code": 1 }, "bright": { - "hex": "#f77b9d", + "hex": "#f37799", "code": 9 } }, @@ -1968,7 +1968,7 @@ "code": 2 }, "bright": { - "hex": "#8edd90", + "hex": "#89d88b", "code": 10 } }, @@ -1978,7 +1978,7 @@ "code": 3 }, "bright": { - "hex": "#f1d895", + "hex": "#ebd391", "code": 11 } }, @@ -1988,7 +1988,7 @@ "code": 4 }, "bright": { - "hex": "#78acff", + "hex": "#74a8fc", "code": 12 } }, @@ -1998,7 +1998,7 @@ "code": 5 }, "bright": { - "hex": "#f7b3e2", + "hex": "#f2aede", "code": 13 } }, @@ -2008,7 +2008,7 @@ "code": 6 }, "bright": { - "hex": "#70dcce", + "hex": "#6bd7ca", "code": 14 } }, @@ -2024,4 +2024,4 @@ } } } -} \ No newline at end of file +} diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index ae86852..18ae69c 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -310,7 +310,7 @@ const formatted = entriesFromObject(definitions).reduce( brightColorHex = flavor.colors["subtext0"]; } else { const brightColor = new Color(normalColorHex); - brightColor.lch.l *= flavor.dark ? 0.96 : 1.04; + brightColor.lch.l *= flavor.dark ? 0.94 : 1.09; brightColor.lch.c += flavor.dark ? 8 : 0; brightColor.lch.h += 2; brightColorHex = brightColor.toString({ format: "hex" }); From 3b9e2658a93ff8d3cea049d1007d57171b8ebcca Mon Sep 17 00:00:00 2001 From: lemon Date: Tue, 22 Oct 2024 22:40:48 +0200 Subject: [PATCH 09/18] fix(ansi): switch latte black and white --- palette.json | 8 ++++---- scripts/gen_palette.ts | 8 +++++--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/palette.json b/palette.json index 037ae65..710e88b 100644 --- a/palette.json +++ b/palette.json @@ -426,11 +426,11 @@ "ansiColors": { "black": { "normal": { - "hex": "#acb0be", + "hex": "#5c5f77", "code": 0 }, "bright": { - "hex": "#bcc0cc", + "hex": "#6c6f85", "code": 8 } }, @@ -496,11 +496,11 @@ }, "white": { "normal": { - "hex": "#5c5f77", + "hex": "#acb0be", "code": 7 }, "bright": { - "hex": "#6c6f85", + "hex": "#bcc0cc", "code": 15 } } diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 18ae69c..a203595 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -302,12 +302,14 @@ const formatted = entriesFromObject(definitions).reduce( ), ansiColors: entriesFromObject(ansiMappings).reduce((acc, [name, props]) => { const mapping = props.normal.mapping as ColorName; - const normalColorHex = flavor.colors[mapping]; + let normalColorHex = flavor.colors[mapping]; let brightColorHex: string; if (props.normal.mapping == "surface2") { - brightColorHex = flavor.colors["surface1"]; + normalColorHex = flavor.dark ? flavor.colors["surface2"] : flavor.colors["subtext1"]; + brightColorHex = flavor.dark ? flavor.colors["surface1"] : flavor.colors["subtext0"]; } else if (props.normal.mapping == "subtext1") { - brightColorHex = flavor.colors["subtext0"]; + normalColorHex = flavor.dark ? flavor.colors["subtext1"] : flavor.colors["surface2"] ; + brightColorHex = flavor.dark ? flavor.colors["subtext0"] : flavor.colors["surface1"] ; } else { const brightColor = new Color(normalColorHex); brightColor.lch.l *= flavor.dark ? 0.94 : 1.09; From 2879ef56c5854200999c714f1f12aaaef544699c Mon Sep 17 00:00:00 2001 From: sgoudham Date: Wed, 23 Oct 2024 00:26:32 +0100 Subject: [PATCH 10/18] tests: update for new mappings --- mod.test.ts | 65 +++++++++++++++++++++++++++++++++++++--------------- palette.json | 2 +- 2 files changed, 47 insertions(+), 20 deletions(-) diff --git a/mod.test.ts b/mod.test.ts index ef8bc8c..9f24a29 100644 --- a/mod.test.ts +++ b/mod.test.ts @@ -4,21 +4,16 @@ import { flavorEntries, flavors, version } from "@catppuccin/palette"; import palette from "@/palette.json" with { type: "json" }; Deno.test("flavorEntries", () => { - flavorEntries - .map(([flavorName, flavor]) => { - flavor.colorEntries - .map(([colorName, color]) => - assertEquals(color.hex, palette[flavorName].colors[colorName].hex) - ); - }); + flavorEntries.map(([flavorName, flavor]) => { + flavor.colorEntries.map(([colorName, color]) => + assertEquals(color.hex, palette[flavorName].colors[colorName].hex) + ); + }); }); Deno.test("flavors", () => { flavorEntries.map(([flavorName]) => { - assertEquals( - flavors[flavorName].name, - palette[flavorName].name, - ); + assertEquals(flavors[flavorName].name, palette[flavorName].name); }); }); @@ -29,17 +24,49 @@ Deno.test("ansiEntries", () => { ansiColor.normal.hex, palette[flavorName].ansiColors[ansiColorName].normal.hex, ); + if (ansiColorName == "black") { - assertEquals( - ansiColor.bright.hex, - palette[flavorName].colors.surface1.hex, - ); + if (flavorName == "latte") { + assertEquals( + ansiColor.normal.hex, + palette[flavorName].colors.subtext1.hex, + ); + assertEquals( + ansiColor.bright.hex, + palette[flavorName].colors.subtext0.hex, + ); + } else { + assertEquals( + ansiColor.normal.hex, + palette[flavorName].colors.surface2.hex, + ); + assertEquals( + ansiColor.bright.hex, + palette[flavorName].colors.surface1.hex, + ); + } } + if (ansiColorName == "white") { - assertEquals( - ansiColor.bright.hex, - palette[flavorName].colors.subtext0.hex, - ); + if (flavorName == "latte") { + assertEquals( + ansiColor.normal.hex, + palette[flavorName].colors.surface2.hex, + ); + assertEquals( + ansiColor.bright.hex, + palette[flavorName].colors.surface1.hex, + ); + } else { + assertEquals( + ansiColor.normal.hex, + palette[flavorName].colors.subtext1.hex, + ); + assertEquals( + ansiColor.bright.hex, + palette[flavorName].colors.subtext0.hex, + ); + } } }); }); diff --git a/palette.json b/palette.json index 710e88b..7df07fd 100644 --- a/palette.json +++ b/palette.json @@ -2024,4 +2024,4 @@ } } } -} +} \ No newline at end of file From 77e6fe037f2430ea739efb82d68459fc1f347bcd Mon Sep 17 00:00:00 2001 From: sgoudham Date: Wed, 23 Oct 2024 00:34:44 +0100 Subject: [PATCH 11/18] docs: clarify that our brights arent necessarily brighter --- mod.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/mod.ts b/mod.ts index 08c5736..82da26e 100644 --- a/mod.ts +++ b/mod.ts @@ -225,6 +225,8 @@ export type AnsiColorGroups = Readonly<{ /** * An object containing all the ANSI "bright" colors, which are the 8 standard colors from 8 to 15. + * + * Note: These bright colors are not neccesarily "brighter" than the normal colors, but rather more bold and saturated. */ bright: AnsiColorFormat; }>; From 7d9751c586417c1849a802fb81e4a7d960f68d1c Mon Sep 17 00:00:00 2001 From: sgoudham Date: Wed, 23 Oct 2024 01:06:50 +0100 Subject: [PATCH 12/18] chore: comments --- scripts/gen_palette.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index a203595..24030ac 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -304,9 +304,12 @@ const formatted = entriesFromObject(definitions).reduce( const mapping = props.normal.mapping as ColorName; let normalColorHex = flavor.colors[mapping]; let brightColorHex: string; + + // Color 0 (Black) if (props.normal.mapping == "surface2") { normalColorHex = flavor.dark ? flavor.colors["surface2"] : flavor.colors["subtext1"]; brightColorHex = flavor.dark ? flavor.colors["surface1"] : flavor.colors["subtext0"]; + // Color 8 (White) } else if (props.normal.mapping == "subtext1") { normalColorHex = flavor.dark ? flavor.colors["subtext1"] : flavor.colors["surface2"] ; brightColorHex = flavor.dark ? flavor.colors["subtext0"] : flavor.colors["surface1"] ; From 94a36581ea95c6a4f81b1b281b9c130a454c8bae Mon Sep 17 00:00:00 2001 From: sgoudham Date: Wed, 23 Oct 2024 01:08:17 +0100 Subject: [PATCH 13/18] chore: typo --- scripts/gen_palette.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 24030ac..0a12762 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -309,7 +309,7 @@ const formatted = entriesFromObject(definitions).reduce( if (props.normal.mapping == "surface2") { normalColorHex = flavor.dark ? flavor.colors["surface2"] : flavor.colors["subtext1"]; brightColorHex = flavor.dark ? flavor.colors["surface1"] : flavor.colors["subtext0"]; - // Color 8 (White) + // Color 7 (White) } else if (props.normal.mapping == "subtext1") { normalColorHex = flavor.dark ? flavor.colors["subtext1"] : flavor.colors["surface2"] ; brightColorHex = flavor.dark ? flavor.colors["subtext0"] : flavor.colors["surface1"] ; From 1dc3a6107a83cb13233a9bf73b2936a91ce94aeb Mon Sep 17 00:00:00 2001 From: Hammy <58985301+sgoudham@users.noreply.github.com> Date: Wed, 23 Oct 2024 11:14:37 +0100 Subject: [PATCH 14/18] Update mod.ts --- mod.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mod.ts b/mod.ts index 82da26e..e25d2ea 100644 --- a/mod.ts +++ b/mod.ts @@ -226,7 +226,7 @@ export type AnsiColorGroups = Readonly<{ /** * An object containing all the ANSI "bright" colors, which are the 8 standard colors from 8 to 15. * - * Note: These bright colors are not neccesarily "brighter" than the normal colors, but rather more bold and saturated. + * Note: These bright colors are not necessarily "brighter" than the normal colors, but rather more bold and saturated. */ bright: AnsiColorFormat; }>; From 38f7517d1b31b6ee73ed18f898853f48fa0a942f Mon Sep 17 00:00:00 2001 From: sgoudham Date: Sat, 26 Oct 2024 15:02:32 +0100 Subject: [PATCH 15/18] docs(README): update --- README.md | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 087870e..3f13db9 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ import { flavors, flavorEntries, version } from "@catppuccin/palette"; import chalk from "chalk"; // a string containing the version of the library -console.log(version) +console.log(version); // an object containing all catppuccin flavors console.log(flavors); @@ -44,6 +44,16 @@ flavorEntries.map(([_, flavor]) => { ); }); console.log("\n"); + + // same for the ansi colors + flavor.ansiColorEntries.map(([colorName, ansi]) => { + console.log( + chalk.hex(ansi.normal.hex)(`[${ansi.normal.code}] Normal ${colorName}`) + ); + console.log( + chalk.hex(ansi.bright.hex)(`[${ansi.bright.code}] Bright ${colorName}`) + ); + }); }); ``` @@ -52,11 +62,15 @@ flavorEntries.map(([_, flavor]) => { The library is available through [JSR](https://jsr.io/@catppuccin/palette) and [`deno.land/x/catppuccin`](https://deno.land/x/catppuccin): ```ts -import { flavors, flavorEntries, version } from "https://deno.land/x/catppuccin/mod.ts"; +import { + flavors, + flavorEntries, + version, +} from "https://deno.land/x/catppuccin/mod.ts"; import { bgRgb24 } from "https://deno.land/std/fmt/colors.ts"; // a string containing the version of the library -console.log(version) +console.log(version); // an object containing all catppuccin flavors console.log(flavors); From 724c4c2f07c343e4b029bfea130adeeff9c89d6e Mon Sep 17 00:00:00 2001 From: sgoudham Date: Sat, 26 Oct 2024 16:25:58 +0100 Subject: [PATCH 16/18] fix: ensure grey shades flow together --- mod.test.ts | 8 ++++---- palette.json | 24 ++++++++++++------------ scripts/gen_palette.ts | 18 ++++++++---------- 3 files changed, 24 insertions(+), 26 deletions(-) diff --git a/mod.test.ts b/mod.test.ts index 9f24a29..3b08cd3 100644 --- a/mod.test.ts +++ b/mod.test.ts @@ -38,11 +38,11 @@ Deno.test("ansiEntries", () => { } else { assertEquals( ansiColor.normal.hex, - palette[flavorName].colors.surface2.hex, + palette[flavorName].colors.surface1.hex, ); assertEquals( ansiColor.bright.hex, - palette[flavorName].colors.surface1.hex, + palette[flavorName].colors.surface2.hex, ); } } @@ -60,11 +60,11 @@ Deno.test("ansiEntries", () => { } else { assertEquals( ansiColor.normal.hex, - palette[flavorName].colors.subtext1.hex, + palette[flavorName].colors.subtext0.hex, ); assertEquals( ansiColor.bright.hex, - palette[flavorName].colors.subtext0.hex, + palette[flavorName].colors.subtext1.hex, ); } } diff --git a/palette.json b/palette.json index 7df07fd..079cbf5 100644 --- a/palette.json +++ b/palette.json @@ -932,11 +932,11 @@ "ansiColors": { "black": { "normal": { - "hex": "#626880", + "hex": "#51576d", "code": 0 }, "bright": { - "hex": "#51576d", + "hex": "#626880", "code": 8 } }, @@ -1002,11 +1002,11 @@ }, "white": { "normal": { - "hex": "#b5bfe2", + "hex": "#a5adce", "code": 7 }, "bright": { - "hex": "#a5adce", + "hex": "#b5bfe2", "code": 15 } } @@ -1438,11 +1438,11 @@ "ansiColors": { "black": { "normal": { - "hex": "#5b6078", + "hex": "#494d64", "code": 0 }, "bright": { - "hex": "#494d64", + "hex": "#5b6078", "code": 8 } }, @@ -1508,11 +1508,11 @@ }, "white": { "normal": { - "hex": "#b8c0e0", + "hex": "#a5adcb", "code": 7 }, "bright": { - "hex": "#a5adcb", + "hex": "#b8c0e0", "code": 15 } } @@ -1944,11 +1944,11 @@ "ansiColors": { "black": { "normal": { - "hex": "#585b70", + "hex": "#45475a", "code": 0 }, "bright": { - "hex": "#45475a", + "hex": "#585b70", "code": 8 } }, @@ -2014,11 +2014,11 @@ }, "white": { "normal": { - "hex": "#bac2de", + "hex": "#a6adc8", "code": 7 }, "bright": { - "hex": "#a6adc8", + "hex": "#bac2de", "code": 15 } } diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 0a12762..da2e1c3 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -205,7 +205,7 @@ const accents = [ const ansiMappings = { black: { normal: { - mapping: "surface2", + mapping: "", // superflous, exists to make TypeScript happy code: 0, }, bright: { @@ -268,7 +268,7 @@ const ansiMappings = { }, white: { normal: { - mapping: "subtext1", + mapping: "", // superflous, exists to make TypeScript happy code: 7, }, bright: { @@ -305,14 +305,12 @@ const formatted = entriesFromObject(definitions).reduce( let normalColorHex = flavor.colors[mapping]; let brightColorHex: string; - // Color 0 (Black) - if (props.normal.mapping == "surface2") { - normalColorHex = flavor.dark ? flavor.colors["surface2"] : flavor.colors["subtext1"]; - brightColorHex = flavor.dark ? flavor.colors["surface1"] : flavor.colors["subtext0"]; - // Color 7 (White) - } else if (props.normal.mapping == "subtext1") { - normalColorHex = flavor.dark ? flavor.colors["subtext1"] : flavor.colors["surface2"] ; - brightColorHex = flavor.dark ? flavor.colors["subtext0"] : flavor.colors["surface1"] ; + if (name == "black") { + normalColorHex = flavor.dark ? flavor.colors["surface1"] : flavor.colors["subtext1"]; + brightColorHex = flavor.dark ? flavor.colors["surface2"] : flavor.colors["subtext0"]; + } else if (name == "white") { + normalColorHex = flavor.dark ? flavor.colors["subtext0"] : flavor.colors["surface2"] ; + brightColorHex = flavor.dark ? flavor.colors["subtext1"] : flavor.colors["surface1"] ; } else { const brightColor = new Color(normalColorHex); brightColor.lch.l *= flavor.dark ? 0.94 : 1.09; From ef60a471208408ab4761ac3c74def51915cb1119 Mon Sep 17 00:00:00 2001 From: sgoudham Date: Sat, 26 Oct 2024 16:27:48 +0100 Subject: [PATCH 17/18] chore: fix typo --- scripts/gen_palette.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index da2e1c3..74f0a36 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -205,7 +205,7 @@ const accents = [ const ansiMappings = { black: { normal: { - mapping: "", // superflous, exists to make TypeScript happy + mapping: "", // superfluous, exists to make TypeScript happy code: 0, }, bright: { @@ -268,7 +268,7 @@ const ansiMappings = { }, white: { normal: { - mapping: "", // superflous, exists to make TypeScript happy + mapping: "", // superfluous, exists to make TypeScript happy code: 7, }, bright: { From 4f716c3329292fa248970d1e941219b7e7c1b3a6 Mon Sep 17 00:00:00 2001 From: sgoudham Date: Sat, 26 Oct 2024 23:11:02 +0100 Subject: [PATCH 18/18] fix: `purple` -> `magenta` --- mod.ts | 4 ++-- palette.json | 8 ++++---- scripts/gen_palette.ts | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/mod.ts b/mod.ts index e25d2ea..589c2a5 100644 --- a/mod.ts +++ b/mod.ts @@ -55,7 +55,7 @@ type AnsiName = | "green" | "yellow" | "blue" - | "purple" + | "magenta" | "cyan" | "white"; @@ -225,7 +225,7 @@ export type AnsiColorGroups = Readonly<{ /** * An object containing all the ANSI "bright" colors, which are the 8 standard colors from 8 to 15. - * + * * Note: These bright colors are not necessarily "brighter" than the normal colors, but rather more bold and saturated. */ bright: AnsiColorFormat; diff --git a/palette.json b/palette.json index 079cbf5..ad2b259 100644 --- a/palette.json +++ b/palette.json @@ -474,7 +474,7 @@ "code": 12 } }, - "purple": { + "magenta": { "normal": { "hex": "#ea76cb", "code": 5 @@ -980,7 +980,7 @@ "code": 12 } }, - "purple": { + "magenta": { "normal": { "hex": "#f4b8e4", "code": 5 @@ -1486,7 +1486,7 @@ "code": 12 } }, - "purple": { + "magenta": { "normal": { "hex": "#f5bde6", "code": 5 @@ -1992,7 +1992,7 @@ "code": 12 } }, - "purple": { + "magenta": { "normal": { "hex": "#f5c2e7", "code": 5 diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 74f0a36..a26d27f 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -248,7 +248,7 @@ const ansiMappings = { code: 12, }, }, - purple: { + magenta: { normal: { mapping: "pink", code: 5,