src/theme/stylesheet.ts

Functions

Imports

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

Source

1import { labelColor } from "./color.js";
2import { assertCssText, defineTheme } from "./define.js";
3import type { ColorScheme, Gridlines, HexColor, Theme } from "./types.js";
4
5/** Options for {@link stylesheet}. */
6export interface StylesheetOptions {
7  /**
8   * Selectors under which the page is dark or light, for sites that switch themes with an
9   * attribute instead of setting `color-scheme` themselves, e.g. `{ dark: '[data-theme="dark"]' }`.
10   * Without them, charts follow the page's `color-scheme`, which is the preferred mechanism.
11   */
12  readonly colorScheme?: { readonly dark?: string; readonly light?: string };
13}
14
15type Variables = ReadonlyArray<readonly [name: string, light: string, dark: string]>;
16
17function colorVariables(light: ColorScheme, dark: ColorScheme): Variables {
18  const pairs: [string, HexColor, HexColor][] = [
19    ["background", light.background, dark.background],
20    ["text", light.text, dark.text],
21    ["text-muted", light.mutedText, dark.mutedText],
22    ["grid", light.grid, dark.grid],
23    ["focus", light.focus, dark.focus],
24    ["status-good", light.status.good, dark.status.good],
25    ["status-warning", light.status.warning, dark.status.warning],
26    ["status-bad", light.status.bad, dark.status.bad],
27    ["status-unknown", light.status.unknown, dark.status.unknown],
28  ];
29  light.series.forEach((color, i) => {
30    const darkColor = dark.series[i] ?? color;
31    pairs.push([`series-${i + 1}`, color, darkColor]);
32    // A label printed on a mark (a genome feature) takes whichever of text or background reads better.
33    pairs.push([
34      `series-text-${i + 1}`,
35      labelColor(color, light.text, light.background),
36      labelColor(darkColor, dark.text, dark.background),
37    ]);
38  });
39  light.sequential.forEach((color, i) => {
40    const darkColor = dark.sequential[i] ?? color;
41    pairs.push([`sequential-${i + 1}`, color, darkColor]);
42    // A label printed on a heatmap cell takes whichever of text or background reads better there.
43    pairs.push([
44      `sequential-text-${i + 1}`,
45      labelColor(color, light.text, light.background),
46      labelColor(darkColor, dark.text, dark.background),
47    ]);
48  });
49  return pairs;
50}
51
52const HIDDEN_GRIDS: Readonly<Record<Gridlines, readonly string[]>> = {
53  none: ["x-grid", "y-grid"],
54  x: ["y-grid"],
55  y: ["x-grid"],
56  both: [],
57};
58
59/** Rules that do not depend on the theme: layout, legend, data table and the enhancement layer. */
60const BASE_RULES = `
61.enarratio {
62  margin: 0;
63  color: var(--enarratio-text);
64  font-family: var(--enarratio-font);
65  font-size: var(--enarratio-font-size, 1rem);
66}
67.enarratio-frame { overflow-x: auto; }
68.enarratio-frame-wide > svg { min-width: 30rem; }
69.enarratio svg {
70  display: block;
71  max-width: 100%;
72  height: auto;
73  overflow: visible;
74  font-family: inherit;
75  font-size: var(--enarratio-font-size-mark, 12px);
76}
77svg.enarratio { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }
78.enarratio [data-enarratio-mark$="tick label"],
79.enarratio .enarratio-numeric {
80  font-family: var(--enarratio-font-numeric);
81  font-variant-numeric: tabular-nums;
82}
83.enarratio [data-enarratio-mark*="axis"] { color: var(--enarratio-text-muted); }
84.enarratio [data-enarratio-mark$="grid"] { stroke: var(--enarratio-grid); stroke-opacity: 1; }
85.enarratio [data-enarratio-mark="rule"] { stroke: var(--enarratio-text-muted); }
86.enarratio-title {
87  margin: 0 0 var(--enarratio-space, 0.5em);
88  font-weight: var(--enarratio-font-weight-title, 600);
89}
90.enarratio-caption {
91  margin: var(--enarratio-space, 0.5em) 0 0;
92  color: var(--enarratio-text-muted);
93  font-size: var(--enarratio-font-size-small, 0.875em);
94}
95.enarratio-legend {
96  display: flex;
97  flex-wrap: wrap;
98  gap: var(--enarratio-gap-row, 0.25em) var(--enarratio-gap, 1em);
99  margin: 0 0 var(--enarratio-space, 0.5em);
100  padding: 0;
101  list-style: none;
102  font-size: var(--enarratio-font-size-small, 0.875em);
103}
104.enarratio-legend li, .enarratio-legend button {
105  display: inline-flex;
106  align-items: center;
107  gap: var(--enarratio-gap-inline, 0.4em);
108}
109.enarratio-legend button {
110  margin: 0;
111  padding: var(--enarratio-padding-button, 0.125em 0.25em);
112  border: var(--enarratio-border-width, 1px) solid transparent;
113  border-radius: var(--enarratio-radius, 0.25em);
114  background: none;
115  color: inherit;
116  font: inherit;
117  cursor: pointer;
118}
119.enarratio-legend button[aria-pressed="true"] {
120  border-color: currentColor;
121  font-weight: var(--enarratio-font-weight-emphasis, 600);
122}
123.enarratio-swatch {
124  display: inline-block;
125  width: var(--enarratio-swatch-size, 0.8em);
126  height: var(--enarratio-swatch-size, 0.8em);
127  border-radius: var(--enarratio-radius-swatch, 0.15em);
128  forced-color-adjust: none;
129}
130${Array.from(
131  { length: 8 },
132  (_, i) =>
133    `.enarratio [data-slot="${i + 1}"] { --enarratio-slot: var(--enarratio-series-${i + 1}); }`,
134).join("\n")}
135${Array.from(
136  { length: 5 },
137  (_, i) =>
138    `.enarratio [data-step="${i + 1}"] { --enarratio-slot: var(--enarratio-sequential-${i + 1}); }`,
139).join("\n")}
140.enarratio-swatch { background: var(--enarratio-slot); }
141.enarratio-data {
142  margin: var(--enarratio-space, 0.5em) 0 0;
143  font-size: var(--enarratio-font-size-small, 0.875em);
144}
145.enarratio-data summary { cursor: pointer; color: var(--enarratio-text-muted); }
146.enarratio-data table { border-collapse: collapse; margin-top: var(--enarratio-space, 0.5em); }
147.enarratio-data th, .enarratio-data td {
148  padding: var(--enarratio-cell-padding, 0.2em 0.75em 0.2em 0);
149  border-bottom: var(--enarratio-border-width, 1px) solid var(--enarratio-grid);
150  text-align: left;
151}
152.enarratio-data td { font-variant-numeric: tabular-nums; text-align: right; }
153.enarratio-visually-hidden {
154  position: absolute !important;
155  width: 1px;
156  height: 1px;
157  margin: -1px;
158  padding: 0;
159  overflow: hidden;
160  clip-path: inset(50%);
161  white-space: nowrap;
162  border: 0;
163}
164.enarratio-tooltip {
165  position: absolute;
166  z-index: var(--enarratio-z-tooltip, 10);
167  max-width: var(--enarratio-tooltip-max-width, 18em);
168  padding: var(--enarratio-tooltip-padding, 0.35em 0.6em);
169  border: var(--enarratio-border-width, 1px) solid var(--enarratio-grid);
170  border-radius: var(--enarratio-radius-tooltip, 0.3em);
171  background: var(--enarratio-background);
172  color: var(--enarratio-text);
173  font-family: var(--enarratio-font);
174  font-size: var(--enarratio-font-size-tooltip, 0.8125rem);
175  line-height: var(--enarratio-line-height-tooltip, 1.35);
176  box-shadow: var(--enarratio-tooltip-shadow, 0 2px 8px rgb(0 0 0 / 15%));
177}
178.enarratio-tooltip[hidden] { display: none; }
179.enarratio [data-enarratio-key] {
180  transition: opacity var(--enarratio-duration-hover, 150ms) var(--enarratio-ease-out, ease-out);
181}
182.enarratio[data-enarratio-interactive] [data-enarratio-field] { cursor: pointer; }
183.enarratio [data-enarratio-dimmed] { opacity: var(--enarratio-opacity-dimmed, 0.25); }
184.enarratio [data-enarratio-key]:focus { outline: none; }
185/* The focus ring: a background-colored ring inside a focus-colored one, so one of the two always
186   contrasts with whatever mark or background is next to it. */
187.enarratio-focus-ring { pointer-events: none; fill: none; }
188.enarratio-focus-ring-inner {
189  stroke: var(--enarratio-background);
190  stroke-width: var(--enarratio-focus-width-inner, 5px);
191}
192.enarratio-focus-ring-outer {
193  stroke: var(--enarratio-focus);
194  stroke-width: var(--enarratio-focus-width-outer, 2.5px);
195}
196/* Invisible targets that make small marks at least 24 CSS pixels to point at. */
197.enarratio-hit { fill: transparent; stroke: none; }
198.enarratio svg:focus-visible, .enarratio-legend button:focus-visible, .enarratio-frame:focus-visible {
199  outline: var(--enarratio-focus-outline-width, 3px) solid var(--enarratio-focus);
200  outline-offset: var(--enarratio-focus-outline-offset, 2px);
201}
202.enarratio-brush {
203  fill: var(--enarratio-focus);
204  fill-opacity: var(--enarratio-opacity-brush, 0.15);
205  stroke: var(--enarratio-focus);
206}
207/* The timeline's plain list: read by screen readers beside the drawing, and shown in its place
208   when the container has under 30rem. The threshold is a container query, which cannot use a
209   custom property. */
210.enarratio-timeline { container-type: inline-size; }
211.enarratio-timeline-list {
212  position: absolute;
213  width: 1px;
214  height: 1px;
215  margin: -1px;
216  padding: 0;
217  overflow: hidden;
218  clip-path: inset(50%);
219  white-space: nowrap;
220  border: 0;
221}
222@container (max-width: 30rem) {
223  .enarratio-timeline > svg { display: none; }
224  .enarratio-timeline-list {
225    position: static;
226    width: auto;
227    height: auto;
228    margin: 0;
229    padding: 0 0 0 var(--enarratio-timeline-list-indent, 1.25em);
230    overflow: visible;
231    clip-path: none;
232    white-space: normal;
233  }
234  .enarratio-timeline-list li { margin: 0 0 var(--enarratio-space, 0.5em); }
235}
236@keyframes enarratio-grow { from { transform: scaleY(0); } }
237@keyframes enarratio-grow-x { from { transform: scaleX(0); } }
238@keyframes enarratio-draw { from { stroke-dashoffset: var(--enarratio-length); } }
239@keyframes enarratio-fade { from { opacity: 0; } }
240.enarratio[data-enarratio-entering] [data-enarratio-mark="bar"] > * {
241  transform-box: fill-box;
242  transform-origin: bottom;
243  animation: enarratio-grow var(--enarratio-duration-grow, 600ms)
244    var(--enarratio-ease-grow, cubic-bezier(0.2, 0.7, 0.3, 1)) both;
245}
246.enarratio[data-enarratio-entering][data-enarratio-orientation="horizontal"] [data-enarratio-mark="bar"] > * {
247  transform-origin: left;
248  animation-name: enarratio-grow-x;
249}
250.enarratio[data-enarratio-entering] [data-enarratio-mark="dot"] > *,
251.enarratio[data-enarratio-entering] [data-enarratio-mark="area"] > *,
252.enarratio[data-enarratio-entering] [data-enarratio-mark="cell"] > * {
253  animation: enarratio-fade var(--enarratio-duration-fade, 500ms)
254    var(--enarratio-ease-out, ease-out) both;
255}
256.enarratio[data-enarratio-entering] [data-enarratio-mark="line"] > path {
257  stroke-dasharray: var(--enarratio-length);
258  animation: enarratio-draw var(--enarratio-duration-draw, 800ms)
259    var(--enarratio-ease-out, ease-out) both;
260}
261@media (prefers-reduced-motion: reduce) {
262  .enarratio *, .enarratio-tooltip { animation: none !important; transition: none !important; }
263}
264`;
265
266/**
267 * The rules that do not depend on a theme: layout, legend, data table, tooltip, focus ring and
268 * animation. They refer to the color and font custom properties (`--enarratio-text`,
269 * `--enarratio-series-1` and the rest) without defining them, so a site that defines those itself
270 * (or a generated theme) needs no theme object. Every size, weight, radius and timing is a
271 * custom property whose fallback is Enarratio's own value, so setting none of them changes
272 * nothing. The same rules ship as `enarratio/base.css`. The full contract is in docs/api.md.
273 *
274 * The one thing a theme adds beyond properties is hiding gridlines (see {@link stylesheet}); a
275 * site using only the base rules hides them itself, e.g.
276 * `.enarratio [data-enarratio-mark="x-grid"] { display: none; }`.
277 */
278export function baseStylesheet(): string {
279  return `/* Enarratio base rules */\n${BASE_RULES.trim()}`;
280}
281
282function declarations(entries: ReadonlyArray<readonly [string, string]>, indent = "  "): string {
283  return entries.map(([name, value]) => `${indent}--enarratio-${name}: ${value};`).join("\n");
284}
285
286/**
287 * The CSS a page includes once to style every Enarratio chart with a theme. Charts contain no
288 * colors of their own, only references to the custom properties defined here, so the same
289 * server-rendered markup follows the theme and switches between light and dark without a re-render.
290 *
291 * Light or dark follows the page's `color-scheme` through CSS `light-dark()`; browsers without it
292 * get the light scheme.
293 */
294export function stylesheet(theme: Theme, options: StylesheetOptions = {}): string {
295  // Everything written into the CSS is checked first, so a theme from data cannot break out of
296  // the stylesheet (F10). The scheme selectors are the page's own, trusted, but still may not
297  // contain what would end a rule.
298  defineTheme(theme);
299  for (const [which, selector] of Object.entries(options.colorScheme ?? {})) {
300    if (selector !== undefined) assertCssText(`colorScheme.${which} selector`, selector);
301  }
302  const variables = colorVariables(theme.light, theme.dark);
303  const fonts: [string, string][] = [
304    ["font", theme.fonts.body],
305    ["font-numeric", theme.fonts.numeric ?? theme.fonts.body],
306  ];
307  const hidden = HIDDEN_GRIDS[theme.gridlines]
308    .map((grid) => `.enarratio [data-enarratio-mark="${grid}"] { display: none; }`)
309    .join("\n");
310  const schemeRules = [
311    options.colorScheme?.dark
312      ? `:where(${options.colorScheme.dark}) .enarratio { color-scheme: dark; }`
313      : "",
314    options.colorScheme?.light
315      ? `:where(${options.colorScheme.light}) .enarratio { color-scheme: light; }`
316      : "",
317  ].filter(Boolean);
318
319  return [
320    `/* Enarratio theme: ${theme.name} */`, // safe: defineTheme refused comment and tag syntax
321    `.enarratio, .enarratio-tooltip {\n${declarations(fonts)}\n${declarations(
322      variables.map(([name, light]) => [name, light]),
323    )}\n}`,
324    `@supports (color: light-dark(#000, #fff)) {\n  .enarratio, .enarratio-tooltip {\n${declarations(
325      variables.map(([name, light, dark]) => [name, `light-dark(${light}, ${dark})`]),
326      "    ",
327    )}\n  }\n}`,
328    ...schemeRules,
329    baseStylesheet(),
330    hidden,
331  ]
332    .filter(Boolean)
333    .join("\n");
334}