Reference · Backgrounds for a bracket
BackgroundInktype
The colours that read well over a background: text, lines, boxes, edges and its dominant colours.
Import it
import type { BackgroundInk } from "@johnmorrisdotca/taisen-brackets/backgrounds";Also exported from: @johnmorrisdotca/taisen-brackets
Definition
type BackgroundInk = shared.BackgroundInk;Members
| Name | Type | Description |
|---|---|---|
base | string | The plain colour to fill the picture with before |
dark | boolean | Whether the ground is dark (so the text is light). |
text | string | |
muted | string | |
line | string | The connecting lines. |
box | string | The fill and edge of a box laid on the picture; both are |
edge | string | |
panel | string | The pill behind a round's name, a team's plain disc, the ring round a mark, the dotted road and the accent for a winner, a champion and a highlight. |
plain | string | |
ring | string | |
spine | string | |
accent | string | |
dominant | string[] | The colours the picture is mostly, worst cases included: the ground's two colours and each blended with the glow at its strongest. |
Examples
import { backgroundSvg, type BackgroundInk } from "@johnmorrisdotca/taisen-brackets/backgrounds";
const ink: BackgroundInk = backgroundSvg("ice", { width: 400, height: 300, theme: "light" }).ink;
console.log(ink.dark, ink.text);false #16181aWhat it prints (run when this page was built)