Visualize.Chart.Builder.Styles (Visualize v0.2.35)

The builder's stylesheet, and the element that carries it (spec/14 §18.13).

The library ships the builder's CSS the way it ships its JavaScript: css/0 returns the source as a binary, as Visualize.Hooks.js_code/0 does, and install!/0 writes it where an asset pipeline will find it. Unlike the hooks, the builder also renders it itself — styles/1 is a <style> element the component emits at its own root — so a host with no asset pipeline at all has a legible builder from the <.live_component> call and nothing else (D-94).

Two invariants bound what the stylesheet may do, and Visualize.Chart.Builder's tests hold them:

Every rule is scoped under .vis-builder. The builder is a guest on somebody else's page; a stylesheet that restyled their headings would be a defect.
Every colour and metric is a custom property declared on .vis-builder. A host rethemes by setting properties on the root element rather than by out-specifying rules it did not write, which is what makes a dark page a short block of overrides:
```
.vis-builder {
  --vis-builder-bg: #16181d;
  --vis-builder-panel: #1e2129;
  --vis-builder-ink: #e6e8ee;
  --vis-builder-line: #2f333d;
}
```

This module compiles only when Phoenix.Component is loaded (spec/10 §1.1, D-45, D-85).

Summary

Functions

css()

Returns the builder's stylesheet as a binary (spec/14 §18.13).

default_path()

Returns the path where the stylesheet should be installed, beside the hooks.

install!()

Writes the stylesheet to default_path/0, as Visualize.Hooks.install!/0 writes the hooks. A host that does this renders the builder with styles={false}.

styles(assigns)

Renders the stylesheet in a <style> element (spec/10 §15.3).