71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { colord } from "colord";
|
|
|
|
export const colors: Record<string, Record<string, string>> = {
|
|
basic: {
|
|
blue: "#0074D9",
|
|
teal: "#39CCCC",
|
|
purple: "#B10DC9",
|
|
fuchsia: "#F012BE",
|
|
maroon: "#85144b",
|
|
red: "#ff4136",
|
|
orange: "#ff851b",
|
|
yellow: "#ffdc00",
|
|
olive: "#3d9970",
|
|
green: "#2ecc40",
|
|
lime: "#01ff70",
|
|
black: "#111111",
|
|
gray: "#aaaaaa",
|
|
},
|
|
};
|
|
|
|
colors.brand = {};
|
|
|
|
// "canvas" is the main background of the entire page
|
|
// "text-bg" is text background for longer paragraphs:
|
|
// "text-fg" is text color for longer paragraphs. Usually paired with text-bg
|
|
// "accent" is an accent color used for buttons, icons etc
|
|
// "accent2" is an alternative accent color, used on secondary elements
|
|
// "text-accent" describes what color should the text be when accenting it with color.
|
|
// Usually the same as the `accent` color, but you might choose a different
|
|
// shade so it looks better on `text-bg`.
|
|
// "text-accent2" is same as above, but based on the second accent color
|
|
// "text-on-accent" - what color text should be when put on a background colored with accent color
|
|
// "text-on-accent2" - what color text should be when put on a background colored with accent2 color
|
|
colors.brand["canvas"] = "#fff";
|
|
colors.brand["text-bg"] = "#f6f6f6";
|
|
colors.brand["text-fg"] = colors.basic!.black!;
|
|
colors.brand["accent"] = "#5294A1";
|
|
colors.brand["accent2"] = "#65397C";
|
|
colors.brand["link-fg"] = colors.brand.accent!;
|
|
colors.brand["text-accent"] = colors.brand.accent!;
|
|
colors.brand["text-accent2"] = colors.brand["accent2"]!;
|
|
colors.brand["text-on-accent"] = "#fff";
|
|
colors.brand["text-on-accent2"] = "#fff";
|
|
colors.brand["link-on-accent"] = "#fff";
|
|
colors.brand["link-on-accent2"] = colors.basic!.white!;
|
|
|
|
// configure hue variance across the shades of the same main color.
|
|
const hue_step = -4;
|
|
|
|
// configure saturation variance across the shades of the same main color. If positive,
|
|
// lighter colors will gave more saturation. If negative, darker colors will be more
|
|
// saturated
|
|
const saturation_step = -0.03;
|
|
|
|
// this function is used by sealgen to generate up to 10 shades for each color.
|
|
export function shade(color: string, shade_step: number /* 0-9 */) {
|
|
const hsl = colord(color).toHsl();
|
|
const lightness_offset = hsl.l % 10;
|
|
const new_l = shade_step * 10 + lightness_offset;
|
|
const new_color = { ...hsl, l: new_l };
|
|
const steps = Math.round((shade_step * 10 - hsl.l) / 10);
|
|
let shifted = colord(new_color);
|
|
|
|
if (shifted.toHsl().s !== 0) {
|
|
// don't saturate greys
|
|
shifted = shifted.saturate(steps * saturation_step);
|
|
}
|
|
shifted = shifted.rotate(hue_step * steps);
|
|
return shifted.toHex();
|
|
}
|