refactor: use @lihbr/farben

Author: lihbr

data/colors.json

@@ -8,103 +8,5 @@
 		"ochre": ["400", "100"],
 		"butter": ["400", "100"],
 		"mantis": ["400", "100"]
-	},
-	"all": {
-		"slate": {
-			"900": "#131010",
-			"800": "#1f1919",
-			"700": "#2c2323",
-			"600": "#3a2e2e",
-			"500": "#493939",
-			"400": "#594646",
-			"300": "#6a5555",
-			"200": "#7c6565",
-			"100": "#8e7878",
-			"50": "#a18e8e"
-		},
-		"cream": {
-			"900": "#fffefe",
-			"800": "#faf1f1",
-			"700": "#f2e4e4",
-			"600": "#e7d7d7",
-			"500": "#dac9c9",
-			"400": "#cdbcbc",
-			"300": "#c0b0b0",
-			"200": "#b4a4a4",
-			"100": "#aa9898",
-			"50": "#a69191"
-		},
-		"navy": {
-			"900": "#373d4f",
-			"800": "#3f4762",
-			"700": "#445073",
-			"600": "#485682",
-			"500": "#4d5e8f",
-			"400": "#54669c",
-			"300": "#6072a9",
-			"200": "#7182b5",
-			"100": "#8a98c3",
-			"50": "#adb6d1"
-		},
-		"beet": {
-			"900": "#58363d",
-			"800": "#6b3b45",
-			"700": "#7c3e4b",
-			"600": "#8b4051",
-			"500": "#994456",
-			"400": "#a54a5e",
-			"300": "#b25569",
-			"200": "#bf6578",
-			"100": "#cc7e8f",
-			"50": "#daa1ad"
-		},
-		"flamingo": {
-			"900": "#a14226",
-			"800": "#b4421f",
-			"700": "#c44118",
-			"600": "#d33f13",
-			"500": "#df4010",
-			"400": "#e84311",
-			"300": "#f04a18",
-			"200": "#f75726",
-			"100": "#fc693c",
-			"50": "#ff825c"
-		},
-		"ochre": {
-			"900": "#ac621d",
-			"800": "#bf6715",
-			"700": "#d06b0d",
-			"600": "#dd6e05",
-			"500": "#e97101",
-			"400": "#f27602",
-			"300": "#f87d09",
-			"200": "#fd8617",
-			"100": "#ff922d",
-			"50": "#ffa34c"
-		},
-		"butter": {
-			"900": "#be8c21",
-			"800": "#d19618",
-			"700": "#e19f0f",
-			"600": "#efa507",
-			"500": "#f9ab03",
-			"400": "#ffb005",
-			"300": "#ffb310",
-			"200": "#ffb820",
-			"100": "#ffbf34",
-			"50": "#ffc74d"
-		},
-		"mantis": {
-			"900": "#435138",
-			"800": "#50643f",
-			"700": "#5a7544",
-			"600": "#638448",
-			"500": "#6c924c",
-			"400": "#759f53",
-			"300": "#81ab5f",
-			"200": "#90b870",
-			"100": "#a4c589",
-			"50": "#bed3ac"
-		}
 	}
 }

package.json

@@ -33,6 +33,7 @@
 	},
 	"dependencies": {
 		"@11ty/eleventy-fetch": "4.0.1",
+		"@lihbr/farben": "0.0.1",
 		"@prismicio/client": "7.12.0",
 		"@wooorm/starry-night": "3.5.0",
 		"cookie-es": "1.2.2",

pnpm-lock.yaml

@@ -77,7 +77,6 @@ export type Colors = (typeof Color)[keyof typeof Color]
 
 export type ColorsData = {
 	primary: Record<Colors, Shades[]>
-	all: Record<Colors, Record<Shades, string>>
 }
 
 export type DiscogsRelease = {

src/akte/types.ts

@@ -1,5 +1,6 @@
 import type { ColorsData, GlobalData } from "../akte/types"
 
+import { farben } from "@lihbr/farben"
 import { defineAkteFile } from "akte"
 import { readDataJSON } from "../akte/data"
 import { getPrettyContrastRatio } from "../akte/getPrettyContrastRatio"
@@ -11,9 +12,9 @@ import { page } from "../layouts/page"
 export const colors = defineAkteFile<GlobalData>().from({
 	path: "/colors",
 	async data() {
-		const colors = await readDataJSON<ColorsData>("colors.json")
+		const { primary } = await readDataJSON<ColorsData>("colors.json")
 
-		return { colors }
+		return { colors: { primary, all: farben } }
 	},
 	render(context) {
 		const hero = /* html */ `

src/files/colors.ts

@@ -1,8 +1,5 @@
 const process = require("node:process")
-
-function alpha(hexa, alpha = 1) {
-	return `${hexa}${`0${Number(Math.round(255 * alpha)).toString(16)}`.slice(-2)}`
-}
+const { farben, alpha } = require("@lihbr/farben")
 
 const content = ["./src/**/*.ts"]
 
@@ -54,53 +51,53 @@ module.exports = {
 				"100": "var(--color-theme-100)",
 			},
 			slate: {
-				"DEFAULT": "#1f1919", // 800
-				"o-20": alpha("#1f1919", 0.2),
-				"900": "#131010",
-				"700": "#2c2323",
-				"200": "#7c6565",
-				"100": "#8e7878",
-				"50": "#a18e8e",
+				"DEFAULT": farben.slate[800], // 800
+				"o-20": alpha(farben.slate[800], 0.2),
+				"900": farben.slate[900],
+				"700": farben.slate[700],
+				"200": farben.slate[200],
+				"100": farben.slate[100],
+				"50": farben.slate[50],
 			},
 			cream: {
-				"DEFAULT": "#faf1f1", // 800
-				"o-20": alpha("#faf1f1", 0.2),
-				"900": "#fffefe",
-				"700": "#f2e4e4",
-				"200": "#b4a4a4",
-				"100": "#ab9a9a",
-				"50": "#a69191",
+				"DEFAULT": farben.cream[800], // 800
+				"o-20": alpha(farben.cream[800], 0.2),
+				"900": farben.cream[900],
+				"700": farben.cream[700],
+				"200": farben.cream[200],
+				"100": farben.cream[100],
+				"50": farben.cream[50],
 			},
 			// o-20 used for tap highlight and inline code only
 			navy: {
-				"DEFAULT": "#54669c",
-				"o-20": alpha("#54669c", 0.2),
-				"100": "#8a98c3",
+				"DEFAULT": farben.navy[400],
+				"o-20": alpha(farben.navy[400], 0.2),
+				"100": farben.navy[100],
 			},
 			beet: {
-				"DEFAULT": "#a54a5e",
-				"o-20": alpha("#a54a5e", 0.2),
-				"100": "#cc7e8f",
+				"DEFAULT": farben.beet[400],
+				"o-20": alpha(farben.beet[400], 0.2),
+				"100": farben.beet[100],
 			},
 			flamingo: {
-				"DEFAULT": "#e84311",
-				"o-20": alpha("#e84311", 0.2),
-				"100": "#fc693c",
+				"DEFAULT": farben.flamingo[400],
+				"o-20": alpha(farben.flamingo[400], 0.2),
+				"100": farben.flamingo[100],
 			},
 			ochre: {
-				"DEFAULT": "#f27502",
-				"o-20": alpha("#f27502", 0.2),
-				"100": "#ff922d",
+				"DEFAULT": farben.ochre[400],
+				"o-20": alpha(farben.ochre[400], 0.2),
+				"100": farben.ochre[100],
 			},
 			butter: {
-				"DEFAULT": "#ffb005",
-				"o-20": alpha("#ffb005", 0.2),
-				"100": "#ffbf34",
+				"DEFAULT": farben.butter[400],
+				"o-20": alpha(farben.butter[400], 0.2),
+				"100": farben.butter[100],
 			},
 			mantis: {
-				"DEFAULT": "#759f53",
-				"o-20": alpha("#759f53", 0.2),
-				"100": "#a4c589",
+				"DEFAULT": farben.mantis[400],
+				"o-20": alpha(farben.mantis[400], 0.2),
+				"100": farben.mantis[100],
 			},
 		},
 		extend: {

tailwind.config.cjs

@@ -3,6 +3,7 @@ import * as path from "node:path"
 import akte from "akte/vite"
 import getPort from "get-port"
 import { listenAndWatch } from "listhen"
+
 import { defineConfig } from "vite"
 
 import { app } from "./src/akte.app"