The builder's style palette: the styles the stack declares, how one is made, and the theme's palette beneath them (spec/14 §18.14).
A design's styles is a map of name to style node (§3), and a mark refers to one by
name. Before this panel there was no way to add a name — §18.5 says "adding a node is
adding the key, which is the same edit as any other", but no control added one — so a
style could only be edited where some layer had already declared it, and a mark's style
was a name typed into a text box and checked by the error list.
The palette is a view of the stacked design, because that is what a mark's reference resolves against: a style the house layer declares is available to a mark in the panel layer, and the palette says so. Creating one declares it in the design, as a style site keyed by its name — never in a layer (§18.14, §19.11, D-178).
A reference resolves against the theme's palette too (spec/08 §7.7, #637), so the panel lists it beneath the design's styles in its five groups (#685, the redo of #639): each entry in its parts drawn as a sample shape and a label in the theme's own looks, a state or a modifier laid over a neutral sample, a name the design declares marked as overridden. Choosing an entry offers to override it, which declares the theme's entry in the design as a style site of that name.
This module compiles only when Phoenix.Component is loaded (spec/10 §1.1, D-45, D-85).
Summary
Functions
The style names a reference may take, grouped (spec/14 §18.14, #685): the design's own, then the theme's palette in spec/08 §7.7's five groups. A name the design declares is listed under the design only, since that is the entry a reference to it draws; a group left empty is left out.
The names the stacked design declares, in name order (spec/14 §18.14).
Renders the palette (spec/10 §15.3).
A palette entry's preview (spec/14 §18.14, #685): the SVG attributes of its sample shape,
a rectangle, of the stroke drawn beside it, and of its Aa label — the entry in its parts
resolved through theme in :literal mode and projected onto what the picture draws.
Types
Functions
@spec groups(map(), Visualize.Theme.t()) :: [{String.t(), [atom()]}]
The style names a reference may take, grouped (spec/14 §18.14, #685): the design's own, then the theme's palette in spec/08 §7.7's five groups. A name the design declares is listed under the design only, since that is the entry a reference to it draws; a group left empty is left out.
iex> theme = Visualize.Theme.default()
iex> groups = Visualize.Chart.Builder.Palette.groups(%{styles: %{warning: %{}}}, theme)
iex> Enum.map(groups, &elem(&1, 0))
["design", "style series", "roles", "states", "furniture", "modifiers"]
iex> groups |> List.keyfind("roles", 0) |> elem(1)
[:good, :bad, :info, :neutral]The names the stacked design declares, in name order (spec/14 §18.14).
This is what a {:ref, :style} is a choice among, and it is read from the design rather
than kept anywhere: a style a layer stops declaring stops being offered.
iex> Visualize.Chart.Builder.Palette.names(%{styles: %{series: %{}, axis: %{}}})
[:axis, :series]
iex> Visualize.Chart.Builder.Palette.names(%{marks: []})
[]Renders the palette (spec/10 §15.3).
A <div class="vis-builder-palette"> with one
<li class="vis-builder-palette-entry"> per declared style, a form that adds one, and
a <section class="vis-builder-palette-group"> per group of the theme's palette.
Attributes
id(:string) - the palette's id, and the stem of its add form's. Defaults to"vis-builder-palette".design(:map) (required) - the stacked design whose styles are the palette.theme(:any) - the theme whose palette is listed; the default's when nil. Defaults tonil.open(:atom) - the style the editor is on, marked in the list. Defaults tonil.chosen(:atom) - the theme entry chosen, offered for override. Defaults tonil.target(:any) - thephx-targetof the palette's events. Defaults tonil.class(:string) - appended to the palette's class. Defaults tonil.
@spec preview(Visualize.Theme.t(), atom(), map()) :: preview()
A palette entry's preview (spec/14 §18.14, #685): the SVG attributes of its sample shape,
a rectangle, of the stroke drawn beside it, and of its Aa label — the entry in its parts
resolved through theme in :literal mode and projected onto what the picture draws.
A whole style has no single color, so it is drawn rather than swatched; the stroke is drawn on its own as well as round the shape, because a dash round a shape filled in the stroke's own color cannot be seen. A key the entry leaves unset is the sample's own — no fill on the shape; the theme's text color, font and label size on the label — and a state entry, which says only what changes, is laid over a neutral sample first, and so is a modifier. A value the preview cannot draw, a binding or a paint, is left out.
iex> theme = Visualize.Theme.default()
iex> Visualize.Chart.Builder.Palette.preview(theme, :grid, %{stroke: %{type: :solid, color: {:color, :grid}}}).shape
[{"fill", "none"}, {"stroke", "#e0e0e0"}]
iex> Visualize.Chart.Builder.Palette.preview(theme, :selected, %{stroke: %{width: 2}}).shape
[{"fill", "#6f7480"}, {"fill-opacity", "0.35"}, {"stroke", "#6f7480"}, {"stroke-width", "2"}]
iex> Visualize.Chart.Builder.Palette.preview(theme, :thick, Visualize.Theme.style(theme, :thick)).line
[{"stroke", "#6f7480"}, {"stroke-width", "3"}]