Page MenuHomeSealhub
Files F10352602

colors.ts
No OneTemporary
Actions

colors.ts
View Options

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"] = "#fff";
// 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();
}

File Metadata

Mime Type
text/x-java
Expires
Sun, Nov 2, 17:28 (14 h, 19 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1029675
Default Alt Text
colors.ts (2 KB)

Event Timeline