a tool for shared writing and social publishing
leaflet.pub
1import { parse, ColorSpace, sRGB, distance, OKLab } from "colorjs.io/fn";
2
3// define the color defaults for everything
4export const ThemeDefaults = {
5 "theme/page-background": "#FDFCFA",
6 "theme/card-background": "#FFFFFF",
7 "theme/primary": "#272727",
8 "theme/highlight-1": "#FFFFFF",
9 "theme/highlight-2": "#EDD280",
10 "theme/highlight-3": "#FFCDC3",
11
12 //everywhere else, accent-background = accent-1 and accent-text = accent-2.
13 // we just need to create a migration pipeline before we can change this
14 "theme/accent-text": "#FFFFFF",
15 "theme/accent-background": "#0000FF",
16 "theme/accent-contrast": "#0000FF",
17};
18
19// used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast
20export function getColorDifference(color1: string, color2: string) {
21 ColorSpace.register(sRGB);
22 ColorSpace.register(OKLab);
23
24 let parsedColor1 = parse(`rgb(${color1})`);
25 let parsedColor2 = parse(`rgb(${color2})`);
26
27 return distance(parsedColor1, parsedColor2, "oklab");
28}