colors.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

colors.ts
View Options

	import { colord } from "colord";

	export const colors: Record<string, Record<string, string>> = {
	basic: {
	navy: "#001f3f",
	blue: "#0074D9",
	aqua: "#7FDBFF",
	teal: "#39CCCC",
	purple: "#B10DC9",
	fuchsia: "#F012BE",
	maroon: "#85144b",
	red: "#ff4136",
	orange: "#ff851b",
	yellow: "#ffdc00",
	olive: "#3d9970",
	green: "#2ecc40",
	lime: "#01ff70",
	black: "#111111",
	gray: "#aaaaaa",
	silver: "#dddddd",
	white: "#ffffff",
	},
	};

	colors.brand = {};

	colors.brand["text-bg"] = colors.basic!.white!;
	colors.brand["text-fg"] = colors.basic!.black!;
	colors.brand["accent"] = colors.basic!.blue!;
	colors.brand["text-accent"] = colors.brand.accent!;

	const shade_step = 0.1;
	const hue_step = -3;
	const saturation_step = 0.05;

	for (const [group_name, group] of Object.entries(colors)) {
	for (const [color_name, color] of Object.entries(group)) {
	for (const shade_variant of ["light", "dark"]) {
	for (let i = 1; i <= 8; i++) {
	let shifted = colord(color)
	.darken((shade_variant == "dark" ? 1 : -1) * i * shade_step)
	.rotate((shade_variant == "dark" ? 1 : -1) * i * hue_step);

	if (shifted.toHsl().s !== 0) {
	shifted = shifted.saturate(
	(shade_variant == "dark" ? 1 : -1) * i * saturation_step
	);
	}
	const hex = shifted.toHex();
	colors[group_name]![`${color_name}-${shade_variant}${i}`] = hex;
	}
	}
	}
	}