src/theme/types.ts

Functions

None: it only declares types or values.

Imports

It imports no other module of this repo. Imported by src/index.ts, src/theme/check.ts, src/theme/color.ts, src/theme/define.ts, src/theme/stylesheet.ts, src/themes/default.ts.

Source

1/**
2 * A color in hexadecimal notation (`#rgb` or `#rrggbb`). Themes use hex, not arbitrary CSS, so
3 * that Enarratio can measure contrast and color-vision differences before anything is drawn.
4 */
5export type HexColor = `#${string}`;
6
7/**
8 * Eight categorical colors, assigned to series in order. The length is fixed so that every chart
9 * can rely on every slot existing: a chart never silently draws a series in an undefined color.
10 */
11export type SeriesPalette = readonly [
12  HexColor,
13  HexColor,
14  HexColor,
15  HexColor,
16  HexColor,
17  HexColor,
18  HexColor,
19  HexColor,
20];
21
22/**
23 * Five steps of one hue for quantities (heatmaps, surveillance maps), from least to most. In a
24 * dark scheme "most" is usually the lightest step, because it must stand out from the background.
25 */
26export type SequentialRamp = readonly [HexColor, HexColor, HexColor, HexColor, HexColor];
27
28/** Colors for states that are not series: an uptime strip, a threshold, a warning band. */
29export interface StatusColors {
30  readonly good: HexColor;
31  readonly warning: HexColor;
32  readonly bad: HexColor;
33  /** No data. Drawn with a pattern as well as this color, so it never relies on hue alone. */
34  readonly unknown: HexColor;
35}
36
37/** Every color a chart uses, for one of light or dark. */
38export interface ColorScheme {
39  /** The surface charts sit on. Charts do not paint it; it is what contrast is measured against. */
40  readonly background: HexColor;
41  /** Titles, direct labels and values. */
42  readonly text: HexColor;
43  /** Axis labels, tick labels and captions. Still body-text contrast. */
44  readonly mutedText: HexColor;
45  /** Gridlines and axis rules. Decorative, so it is not held to a contrast minimum. */
46  readonly grid: HexColor;
47  /** The keyboard focus ring drawn by the enhancement layer. */
48  readonly focus: HexColor;
49  readonly series: SeriesPalette;
50  readonly sequential: SequentialRamp;
51  readonly status: StatusColors;
52}
53
54/** Which gridlines a theme shows. Charts always draw them; the theme's stylesheet hides the rest. */
55export type Gridlines = "none" | "x" | "y" | "both";
56
57/**
58 * A site's visual identity for charts. A theme is pure data: charts render the same markup under
59 * every theme, and {@link stylesheet} turns a theme into the CSS custom properties that markup reads.
60 */
61export interface Theme {
62  /** A short identifier, used in check reports and the gallery. */
63  readonly name: string;
64  readonly fonts: {
65    /** A CSS `font-family` list for chart text. */
66    readonly body: string;
67    /** A CSS `font-family` list for numbers, defaulting to `body`. Tabular figures are always on. */
68    readonly numeric?: string;
69  };
70  readonly gridlines: Gridlines;
71  readonly light: ColorScheme;
72  readonly dark: ColorScheme;
73}