src/theme/define.ts

Functions

Imports

It imports src/theme/color.ts, src/theme/types.ts. Imported by src/index.ts, src/theme/stylesheet.ts.

Source

1import { isHexColor } from "./color.js";
2import type { ColorScheme, Theme } from "./types.js";
3
4const GRIDLINES = new Set(["none", "x", "y", "both"]);
5
6/**
7 * Characters that could end a CSS comment, declaration, rule or the surrounding <style> element.
8 * A theme's name and fonts are written into CSS, and themes may come from data (F10, A10).
9 */
10const UNSAFE_CSS_TEXT = /[<>{};\\]|\/\*|\*\//;
11
12/** Throws unless `text` can be written into CSS as it is. */
13export function assertCssText(where: string, text: string): void {
14  if (UNSAFE_CSS_TEXT.test(text)) {
15    throw new Error(
16      `${where}: "${text}" contains a character not allowed in CSS text (<, >, {, }, ;, \\, /* or */)`,
17    );
18  }
19}
20
21function assertScheme(themeName: string, which: "light" | "dark", scheme: ColorScheme): void {
22  const where = `theme "${themeName}" ${which}`;
23  const colors: [string, string][] = [
24    ["background", scheme.background],
25    ["text", scheme.text],
26    ["mutedText", scheme.mutedText],
27    ["grid", scheme.grid],
28    ["focus", scheme.focus],
29    ...scheme.series.map((c, i): [string, string] => [`series[${i}]`, c]),
30    ...scheme.sequential.map((c, i): [string, string] => [`sequential[${i}]`, c]),
31    ["status.good", scheme.status.good],
32    ["status.warning", scheme.status.warning],
33    ["status.bad", scheme.status.bad],
34    ["status.unknown", scheme.status.unknown],
35  ];
36  if (scheme.series.length !== 8) {
37    throw new Error(`${where}: series must have exactly 8 colors, has ${scheme.series.length}`);
38  }
39  if (scheme.sequential.length !== 5) {
40    throw new Error(
41      `${where}: sequential must have exactly 5 colors, has ${scheme.sequential.length}`,
42    );
43  }
44  for (const [name, value] of colors) {
45    if (!isHexColor(value)) throw new Error(`${where}.${name}: "${value}" is not a hex color`);
46  }
47}
48
49/**
50 * Validates a theme's shape and returns it unchanged. TypeScript already checks the shape at
51 * compile time; this is for themes built from data at run time (JSON, a CMS), where a typo would
52 * otherwise become an invisible chart instead of an error.
53 *
54 * It does not judge the colors: {@link checkTheme} does that, and reports rather than throws.
55 */
56export function defineTheme(theme: Theme): Theme {
57  if (theme.name.trim() === "") throw new Error("a theme needs a non-empty name");
58  assertCssText("theme name", theme.name);
59  if (theme.fonts.body.trim() === "") throw new Error(`theme "${theme.name}": fonts.body is empty`);
60  assertCssText(`theme "${theme.name}" fonts.body`, theme.fonts.body);
61  if (theme.fonts.numeric !== undefined) {
62    assertCssText(`theme "${theme.name}" fonts.numeric`, theme.fonts.numeric);
63  }
64  if (!GRIDLINES.has(theme.gridlines)) {
65    throw new Error(`theme "${theme.name}": gridlines must be none, x, y or both`);
66  }
67  assertScheme(theme.name, "light", theme.light);
68  assertScheme(theme.name, "dark", theme.dark);
69  return theme;
70}