From caefe283b1b4e4efe92651346200e0f21b7d25bc Mon Sep 17 00:00:00 2001 From: winston Date: Mon, 12 Feb 2024 22:03:48 +0100 Subject: [PATCH] feat: add color names and spec order (#72) --- mod.test.ts | 2 +- mod.ts | 15 +++ palette.json | 212 +++++++++++++++++++++++++++++++++++++++++ scripts/build_npm.ts | 2 +- scripts/gen_palette.ts | 36 ++++++- 5 files changed, 263 insertions(+), 4 deletions(-) diff --git a/mod.test.ts b/mod.test.ts index b13c8af..d429e9e 100644 --- a/mod.test.ts +++ b/mod.test.ts @@ -1,7 +1,7 @@ import { assertEquals } from "std/assert/assert_equals.ts"; import { flavorEntries, flavors } from "@catppuccin/palette"; -import palette from "@/palette.json" assert { type: "json" }; +import palette from "@/palette.json" with { type: "json" }; Deno.test("flavorEntries", () => { flavorEntries diff --git a/mod.ts b/mod.ts index 3073965..0c094ac 100644 --- a/mod.ts +++ b/mod.ts @@ -68,6 +68,11 @@ export type CatppuccinFlavor = Readonly<{ */ name: string; + /** + * Order of the flavor in the palette spec + */ + order: number; + /** * Whether the flavor is a dark theme */ @@ -117,6 +122,16 @@ export type Flavors = { }; export type ColorFormat = Readonly<{ + /** + * Name of the color + */ + name: string; + + /** + * Order of the color in the palette spec + */ + order: number; + /** * String-formatted hex value * @example "#babbf1" diff --git a/palette.json b/palette.json index b520925..cdc546d 100644 --- a/palette.json +++ b/palette.json @@ -1,9 +1,12 @@ { "latte": { "name": "Latte", + "order": 0, "dark": false, "colors": { "rosewater": { + "name": "Rosewater", + "order": 0, "hex": "#dc8a78", "rgb": { "r": 220, @@ -18,6 +21,8 @@ "accent": true }, "flamingo": { + "name": "Flamingo", + "order": 1, "hex": "#dd7878", "rgb": { "r": 221, @@ -32,6 +37,8 @@ "accent": true }, "pink": { + "name": "Pink", + "order": 2, "hex": "#ea76cb", "rgb": { "r": 234, @@ -46,6 +53,8 @@ "accent": true }, "mauve": { + "name": "Mauve", + "order": 3, "hex": "#8839ef", "rgb": { "r": 136, @@ -60,6 +69,8 @@ "accent": true }, "red": { + "name": "Red", + "order": 4, "hex": "#d20f39", "rgb": { "r": 210, @@ -74,6 +85,8 @@ "accent": true }, "maroon": { + "name": "Maroon", + "order": 5, "hex": "#e64553", "rgb": { "r": 230, @@ -88,6 +101,8 @@ "accent": true }, "peach": { + "name": "Peach", + "order": 6, "hex": "#fe640b", "rgb": { "r": 254, @@ -102,6 +117,8 @@ "accent": true }, "yellow": { + "name": "Yellow", + "order": 7, "hex": "#df8e1d", "rgb": { "r": 223, @@ -116,6 +133,8 @@ "accent": true }, "green": { + "name": "Green", + "order": 8, "hex": "#40a02b", "rgb": { "r": 64, @@ -130,6 +149,8 @@ "accent": true }, "teal": { + "name": "Teal", + "order": 9, "hex": "#179299", "rgb": { "r": 23, @@ -144,6 +165,8 @@ "accent": true }, "sky": { + "name": "Sky", + "order": 10, "hex": "#04a5e5", "rgb": { "r": 4, @@ -158,6 +181,8 @@ "accent": true }, "sapphire": { + "name": "Sapphire", + "order": 11, "hex": "#209fb5", "rgb": { "r": 32, @@ -172,6 +197,8 @@ "accent": true }, "blue": { + "name": "Blue", + "order": 12, "hex": "#1e66f5", "rgb": { "r": 30, @@ -186,6 +213,8 @@ "accent": true }, "lavender": { + "name": "Lavender", + "order": 13, "hex": "#7287fd", "rgb": { "r": 114, @@ -200,6 +229,8 @@ "accent": true }, "text": { + "name": "Text", + "order": 14, "hex": "#4c4f69", "rgb": { "r": 76, @@ -214,6 +245,8 @@ "accent": false }, "subtext1": { + "name": "Subtext 1", + "order": 15, "hex": "#5c5f77", "rgb": { "r": 92, @@ -228,6 +261,8 @@ "accent": false }, "subtext0": { + "name": "Subtext 0", + "order": 16, "hex": "#6c6f85", "rgb": { "r": 108, @@ -242,6 +277,8 @@ "accent": false }, "overlay2": { + "name": "Overlay 2", + "order": 17, "hex": "#7c7f93", "rgb": { "r": 124, @@ -256,6 +293,8 @@ "accent": false }, "overlay1": { + "name": "Overlay 1", + "order": 18, "hex": "#8c8fa1", "rgb": { "r": 140, @@ -270,6 +309,8 @@ "accent": false }, "overlay0": { + "name": "Overlay 0", + "order": 19, "hex": "#9ca0b0", "rgb": { "r": 156, @@ -284,6 +325,8 @@ "accent": false }, "surface2": { + "name": "Surface 2", + "order": 20, "hex": "#acb0be", "rgb": { "r": 172, @@ -298,6 +341,8 @@ "accent": false }, "surface1": { + "name": "Surface 1", + "order": 21, "hex": "#bcc0cc", "rgb": { "r": 188, @@ -312,6 +357,8 @@ "accent": false }, "surface0": { + "name": "Surface 0", + "order": 22, "hex": "#ccd0da", "rgb": { "r": 204, @@ -326,6 +373,8 @@ "accent": false }, "base": { + "name": "Base", + "order": 23, "hex": "#eff1f5", "rgb": { "r": 239, @@ -340,6 +389,8 @@ "accent": false }, "mantle": { + "name": "Mantle", + "order": 24, "hex": "#e6e9ef", "rgb": { "r": 230, @@ -354,6 +405,8 @@ "accent": false }, "crust": { + "name": "Crust", + "order": 25, "hex": "#dce0e8", "rgb": { "r": 220, @@ -371,9 +424,12 @@ }, "frappe": { "name": "Frappé", + "order": 1, "dark": true, "colors": { "rosewater": { + "name": "Rosewater", + "order": 0, "hex": "#f2d5cf", "rgb": { "r": 242, @@ -388,6 +444,8 @@ "accent": true }, "flamingo": { + "name": "Flamingo", + "order": 1, "hex": "#eebebe", "rgb": { "r": 238, @@ -402,6 +460,8 @@ "accent": true }, "pink": { + "name": "Pink", + "order": 2, "hex": "#f4b8e4", "rgb": { "r": 244, @@ -416,6 +476,8 @@ "accent": true }, "mauve": { + "name": "Mauve", + "order": 3, "hex": "#ca9ee6", "rgb": { "r": 202, @@ -430,6 +492,8 @@ "accent": true }, "red": { + "name": "Red", + "order": 4, "hex": "#e78284", "rgb": { "r": 231, @@ -444,6 +508,8 @@ "accent": true }, "maroon": { + "name": "Maroon", + "order": 5, "hex": "#ea999c", "rgb": { "r": 234, @@ -458,6 +524,8 @@ "accent": true }, "peach": { + "name": "Peach", + "order": 6, "hex": "#ef9f76", "rgb": { "r": 239, @@ -472,6 +540,8 @@ "accent": true }, "yellow": { + "name": "Yellow", + "order": 7, "hex": "#e5c890", "rgb": { "r": 229, @@ -486,6 +556,8 @@ "accent": true }, "green": { + "name": "Green", + "order": 8, "hex": "#a6d189", "rgb": { "r": 166, @@ -500,6 +572,8 @@ "accent": true }, "teal": { + "name": "Teal", + "order": 9, "hex": "#81c8be", "rgb": { "r": 129, @@ -514,6 +588,8 @@ "accent": true }, "sky": { + "name": "Sky", + "order": 10, "hex": "#99d1db", "rgb": { "r": 153, @@ -528,6 +604,8 @@ "accent": true }, "sapphire": { + "name": "Sapphire", + "order": 11, "hex": "#85c1dc", "rgb": { "r": 133, @@ -542,6 +620,8 @@ "accent": true }, "blue": { + "name": "Blue", + "order": 12, "hex": "#8caaee", "rgb": { "r": 140, @@ -556,6 +636,8 @@ "accent": true }, "lavender": { + "name": "Lavender", + "order": 13, "hex": "#babbf1", "rgb": { "r": 186, @@ -570,6 +652,8 @@ "accent": true }, "text": { + "name": "Text", + "order": 14, "hex": "#c6d0f5", "rgb": { "r": 198, @@ -584,6 +668,8 @@ "accent": false }, "subtext1": { + "name": "Subtext 1", + "order": 15, "hex": "#b5bfe2", "rgb": { "r": 181, @@ -598,6 +684,8 @@ "accent": false }, "subtext0": { + "name": "Subtext 0", + "order": 16, "hex": "#a5adce", "rgb": { "r": 165, @@ -612,6 +700,8 @@ "accent": false }, "overlay2": { + "name": "Overlay 2", + "order": 17, "hex": "#949cbb", "rgb": { "r": 148, @@ -626,6 +716,8 @@ "accent": false }, "overlay1": { + "name": "Overlay 1", + "order": 18, "hex": "#838ba7", "rgb": { "r": 131, @@ -640,6 +732,8 @@ "accent": false }, "overlay0": { + "name": "Overlay 0", + "order": 19, "hex": "#737994", "rgb": { "r": 115, @@ -654,6 +748,8 @@ "accent": false }, "surface2": { + "name": "Surface 2", + "order": 20, "hex": "#626880", "rgb": { "r": 98, @@ -668,6 +764,8 @@ "accent": false }, "surface1": { + "name": "Surface 1", + "order": 21, "hex": "#51576d", "rgb": { "r": 81, @@ -682,6 +780,8 @@ "accent": false }, "surface0": { + "name": "Surface 0", + "order": 22, "hex": "#414559", "rgb": { "r": 65, @@ -696,6 +796,8 @@ "accent": false }, "base": { + "name": "Base", + "order": 23, "hex": "#303446", "rgb": { "r": 48, @@ -710,6 +812,8 @@ "accent": false }, "mantle": { + "name": "Mantle", + "order": 24, "hex": "#292c3c", "rgb": { "r": 41, @@ -724,6 +828,8 @@ "accent": false }, "crust": { + "name": "Crust", + "order": 25, "hex": "#232634", "rgb": { "r": 35, @@ -741,9 +847,12 @@ }, "macchiato": { "name": "Macchiato", + "order": 2, "dark": true, "colors": { "rosewater": { + "name": "Rosewater", + "order": 0, "hex": "#f4dbd6", "rgb": { "r": 244, @@ -758,6 +867,8 @@ "accent": true }, "flamingo": { + "name": "Flamingo", + "order": 1, "hex": "#f0c6c6", "rgb": { "r": 240, @@ -772,6 +883,8 @@ "accent": true }, "pink": { + "name": "Pink", + "order": 2, "hex": "#f5bde6", "rgb": { "r": 245, @@ -786,6 +899,8 @@ "accent": true }, "mauve": { + "name": "Mauve", + "order": 3, "hex": "#c6a0f6", "rgb": { "r": 198, @@ -800,6 +915,8 @@ "accent": true }, "red": { + "name": "Red", + "order": 4, "hex": "#ed8796", "rgb": { "r": 237, @@ -814,6 +931,8 @@ "accent": true }, "maroon": { + "name": "Maroon", + "order": 5, "hex": "#ee99a0", "rgb": { "r": 238, @@ -828,6 +947,8 @@ "accent": true }, "peach": { + "name": "Peach", + "order": 6, "hex": "#f5a97f", "rgb": { "r": 245, @@ -842,6 +963,8 @@ "accent": true }, "yellow": { + "name": "Yellow", + "order": 7, "hex": "#eed49f", "rgb": { "r": 238, @@ -856,6 +979,8 @@ "accent": true }, "green": { + "name": "Green", + "order": 8, "hex": "#a6da95", "rgb": { "r": 166, @@ -870,6 +995,8 @@ "accent": true }, "teal": { + "name": "Teal", + "order": 9, "hex": "#8bd5ca", "rgb": { "r": 139, @@ -884,6 +1011,8 @@ "accent": true }, "sky": { + "name": "Sky", + "order": 10, "hex": "#91d7e3", "rgb": { "r": 145, @@ -898,6 +1027,8 @@ "accent": true }, "sapphire": { + "name": "Sapphire", + "order": 11, "hex": "#7dc4e4", "rgb": { "r": 125, @@ -912,6 +1043,8 @@ "accent": true }, "blue": { + "name": "Blue", + "order": 12, "hex": "#8aadf4", "rgb": { "r": 138, @@ -926,6 +1059,8 @@ "accent": true }, "lavender": { + "name": "Lavender", + "order": 13, "hex": "#b7bdf8", "rgb": { "r": 183, @@ -940,6 +1075,8 @@ "accent": true }, "text": { + "name": "Text", + "order": 14, "hex": "#cad3f5", "rgb": { "r": 202, @@ -954,6 +1091,8 @@ "accent": false }, "subtext1": { + "name": "Subtext 1", + "order": 15, "hex": "#b8c0e0", "rgb": { "r": 184, @@ -968,6 +1107,8 @@ "accent": false }, "subtext0": { + "name": "Subtext 0", + "order": 16, "hex": "#a5adcb", "rgb": { "r": 165, @@ -982,6 +1123,8 @@ "accent": false }, "overlay2": { + "name": "Overlay 2", + "order": 17, "hex": "#939ab7", "rgb": { "r": 147, @@ -996,6 +1139,8 @@ "accent": false }, "overlay1": { + "name": "Overlay 1", + "order": 18, "hex": "#8087a2", "rgb": { "r": 128, @@ -1010,6 +1155,8 @@ "accent": false }, "overlay0": { + "name": "Overlay 0", + "order": 19, "hex": "#6e738d", "rgb": { "r": 110, @@ -1024,6 +1171,8 @@ "accent": false }, "surface2": { + "name": "Surface 2", + "order": 20, "hex": "#5b6078", "rgb": { "r": 91, @@ -1038,6 +1187,8 @@ "accent": false }, "surface1": { + "name": "Surface 1", + "order": 21, "hex": "#494d64", "rgb": { "r": 73, @@ -1052,6 +1203,8 @@ "accent": false }, "surface0": { + "name": "Surface 0", + "order": 22, "hex": "#363a4f", "rgb": { "r": 54, @@ -1066,6 +1219,8 @@ "accent": false }, "base": { + "name": "Base", + "order": 23, "hex": "#24273a", "rgb": { "r": 36, @@ -1080,6 +1235,8 @@ "accent": false }, "mantle": { + "name": "Mantle", + "order": 24, "hex": "#1e2030", "rgb": { "r": 30, @@ -1094,6 +1251,8 @@ "accent": false }, "crust": { + "name": "Crust", + "order": 25, "hex": "#181926", "rgb": { "r": 24, @@ -1111,9 +1270,12 @@ }, "mocha": { "name": "Mocha", + "order": 3, "dark": true, "colors": { "rosewater": { + "name": "Rosewater", + "order": 0, "hex": "#f5e0dc", "rgb": { "r": 245, @@ -1128,6 +1290,8 @@ "accent": true }, "flamingo": { + "name": "Flamingo", + "order": 1, "hex": "#f2cdcd", "rgb": { "r": 242, @@ -1142,6 +1306,8 @@ "accent": true }, "pink": { + "name": "Pink", + "order": 2, "hex": "#f5c2e7", "rgb": { "r": 245, @@ -1156,6 +1322,8 @@ "accent": true }, "mauve": { + "name": "Mauve", + "order": 3, "hex": "#cba6f7", "rgb": { "r": 203, @@ -1170,6 +1338,8 @@ "accent": true }, "red": { + "name": "Red", + "order": 4, "hex": "#f38ba8", "rgb": { "r": 243, @@ -1184,6 +1354,8 @@ "accent": true }, "maroon": { + "name": "Maroon", + "order": 5, "hex": "#eba0ac", "rgb": { "r": 235, @@ -1198,6 +1370,8 @@ "accent": true }, "peach": { + "name": "Peach", + "order": 6, "hex": "#fab387", "rgb": { "r": 250, @@ -1212,6 +1386,8 @@ "accent": true }, "yellow": { + "name": "Yellow", + "order": 7, "hex": "#f9e2af", "rgb": { "r": 249, @@ -1226,6 +1402,8 @@ "accent": true }, "green": { + "name": "Green", + "order": 8, "hex": "#a6e3a1", "rgb": { "r": 166, @@ -1240,6 +1418,8 @@ "accent": true }, "teal": { + "name": "Teal", + "order": 9, "hex": "#94e2d5", "rgb": { "r": 148, @@ -1254,6 +1434,8 @@ "accent": true }, "sky": { + "name": "Sky", + "order": 10, "hex": "#89dceb", "rgb": { "r": 137, @@ -1268,6 +1450,8 @@ "accent": true }, "sapphire": { + "name": "Sapphire", + "order": 11, "hex": "#74c7ec", "rgb": { "r": 116, @@ -1282,6 +1466,8 @@ "accent": true }, "blue": { + "name": "Blue", + "order": 12, "hex": "#89b4fa", "rgb": { "r": 137, @@ -1296,6 +1482,8 @@ "accent": true }, "lavender": { + "name": "Lavender", + "order": 13, "hex": "#b4befe", "rgb": { "r": 180, @@ -1310,6 +1498,8 @@ "accent": true }, "text": { + "name": "Text", + "order": 14, "hex": "#cdd6f4", "rgb": { "r": 205, @@ -1324,6 +1514,8 @@ "accent": false }, "subtext1": { + "name": "Subtext 1", + "order": 15, "hex": "#bac2de", "rgb": { "r": 186, @@ -1338,6 +1530,8 @@ "accent": false }, "subtext0": { + "name": "Subtext 0", + "order": 16, "hex": "#a6adc8", "rgb": { "r": 166, @@ -1352,6 +1546,8 @@ "accent": false }, "overlay2": { + "name": "Overlay 2", + "order": 17, "hex": "#9399b2", "rgb": { "r": 147, @@ -1366,6 +1562,8 @@ "accent": false }, "overlay1": { + "name": "Overlay 1", + "order": 18, "hex": "#7f849c", "rgb": { "r": 127, @@ -1380,6 +1578,8 @@ "accent": false }, "overlay0": { + "name": "Overlay 0", + "order": 19, "hex": "#6c7086", "rgb": { "r": 108, @@ -1394,6 +1594,8 @@ "accent": false }, "surface2": { + "name": "Surface 2", + "order": 20, "hex": "#585b70", "rgb": { "r": 88, @@ -1408,6 +1610,8 @@ "accent": false }, "surface1": { + "name": "Surface 1", + "order": 21, "hex": "#45475a", "rgb": { "r": 69, @@ -1422,6 +1626,8 @@ "accent": false }, "surface0": { + "name": "Surface 0", + "order": 22, "hex": "#313244", "rgb": { "r": 49, @@ -1436,6 +1642,8 @@ "accent": false }, "base": { + "name": "Base", + "order": 23, "hex": "#1e1e2e", "rgb": { "r": 30, @@ -1450,6 +1658,8 @@ "accent": false }, "mantle": { + "name": "Mantle", + "order": 24, "hex": "#181825", "rgb": { "r": 24, @@ -1464,6 +1674,8 @@ "accent": false }, "crust": { + "name": "Crust", + "order": 25, "hex": "#11111b", "rgb": { "r": 17, diff --git a/scripts/build_npm.ts b/scripts/build_npm.ts index 1138348..909397a 100644 --- a/scripts/build_npm.ts +++ b/scripts/build_npm.ts @@ -1,7 +1,7 @@ import { copy, emptyDir } from "std/fs/mod.ts"; import { build } from "dnt"; -import denoJson from "@/deno.json" assert { type: "json" }; +import denoJson from "@/deno.json" with { type: "json" }; import * as builders from "./builders/mod.ts"; const outDir = "./dist/npm"; diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index c234e7a..e1bf54e 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -16,6 +16,35 @@ const entriesFromObject = (obj: T): Entries => type Writeable = { -readonly [P in keyof T]: T[P] }; +const prettyNames = [ + "Rosewater", + "Flamingo", + "Pink", + "Mauve", + "Red", + "Maroon", + "Peach", + "Yellow", + "Green", + "Teal", + "Sky", + "Sapphire", + "Blue", + "Lavender", + "Text", + "Subtext 1", + "Subtext 0", + "Overlay 2", + "Overlay 1", + "Overlay 0", + "Surface 2", + "Surface 1", + "Surface 0", + "Base", + "Mantle", + "Crust", +] as const; + const definitions = { latte: { name: "Latte", @@ -165,15 +194,18 @@ const accents = [ ]; const formatted = entriesFromObject(definitions) - .reduce((acc, [flavorName, flavor]) => { + .reduce((acc, [flavorName, flavor], currentIndex) => { acc[flavorName] = { name: flavor.name, + order: currentIndex, dark: flavor.dark, colors: entriesFromObject(flavor.colors).reduce( - (acc, [colorName, color]) => { + (acc, [colorName, color], currentIndex) => { const { r, g, b } = tinycolor(color).toRgb(); const { h, s, l } = tinycolor(color).toHsl(); acc[colorName] = { + name: prettyNames[currentIndex], + order: currentIndex, hex: color, rgb: { r, g, b }, hsl: { h, s, l },