Theme tokens

The elements take their colours, fonts, corner radius and shadow from these CSS custom properties, and the map its height and the spacing of its corners; other spacing is fixed. Set one on an element or on any ancestor, such as :root or an enclosing <mosaica-explorer>, and the elements inside take it. Where none is set, the default below applies. A colour has a light and a dark default, chosen by the color-scheme the element inherits from the page.

Colours

Token	Light default	Dark default	What it sets
--mosaica-surface	#ffffff	#1a1d22	The background of panels, cards, inputs and buttons.
--mosaica-surface-2	#f3f3f0	#23272d	The background of a chip, a hovered row and a chosen row.
--mosaica-surface-3	#efefeb	#2a2e35	The background of a pressed toggle, a hovered row button and a loading skeleton.
--mosaica-ink	#1b1d21	#eceef1	The colour of body text, values and map tools.
--mosaica-ink-2	#565c64	#a7adb6	The colour of labels, section headings and secondary text.
--mosaica-ink-3	#6a6f76	#8b919a	The colour of faint text: placeholders, hints and disabled controls, and of the dot in the loading states.
--mosaica-line	#e5e5e1	#2b2f36	The colour of borders around panels, cards, buttons, chips and the map toolbar.
--mosaica-line-2	#efefeb	#24272d	The colour of the rules between sections and between the status strip's cells.
--mosaica-line-control	#8a8f96	#6b7079	The colour of borders around inputs and of a slider's unfilled track, at 3:1 against the surface.
--mosaica-accent	#1b1d21	#eceef1	The colour of the active map tool, primary buttons, badges, checked boxes and focus rings.
--mosaica-accent-ink	#ffffff	#111317	The text colour on an accent background.
--mosaica-highlight	#5b3fc4	#c3a6ee	The colour of a highlight chip, a highlighted row's text and its ×.
--mosaica-highlight-soft	#f1edfb	#2c2340	The background of a highlight chip and a highlighted row.
--mosaica-bar	#3a3e45	#d5d9df	The colour of a field card's bars for the items in view.
--mosaica-bar-highlight	#42269a	#d7c4f7	The colour of a field card's bars for the highlighted items.
--mosaica-bar-match	#868b92	#6b7079	The colour of a field card's pale bars, for everything matching.
--mosaica-warn	#c98a0a	#e0a940	The colour of the dot in the data updated and reconnecting states.
--mosaica-refuse	#b42318	#f0857a	The colour of the refused and expired states and their dot.
--mosaica-ok	#1f7a4d	#5cc98a	The colour of the status dot when the view is up to date.
--mosaica-map-bg	#f6f6f4	#111317	The map canvas's background.

Fonts, sizes, spacing and shadow

Token	Default	What it sets
--mosaica-radius	8px	The corner radius of panels, cards, the status strip, the map toolbar and popovers.
--mosaica-radius-control	6px	The corner radius of inputs, buttons, chips and the map tools inside the toolbar.
--mosaica-font	'Instrument Sans', system-ui, sans-serif	The font family of all text but identifiers. Figures use it with tabular numerals.
--mosaica-font-mono	ui-monospace, 'SF Mono', Menlo, Consolas, monospace	The font family of identifiers.
--mosaica-shadow	0 2px 10px rgba(0, 0, 0, 0.06), 0 4px 16px transparent (light), 0 2px 10px transparent, 0 4px 16px rgba(0, 0, 0, 0.35) (dark)	The shadow under anything that floats over the map: the status strip, the map toolbar, the map tooltip, cards and popovers.
--mosaica-space	calc(var(--_mosaica-space-base, 16px) * var(--mosaica-density, 1))	The gap between the content in the map's corners and the map's edges. Half of it separates items in one corner.
--mosaica-density	1	A multiplier on --mosaica-space's default.
--mosaica-map-height	420px	The map's height.
--mosaica-explorer-height	100%	The explorer's height. Read by <mosaica-explorer> alone.
--mosaica-sidebar-width	340px	The width of the docked sidebar and of the card over the map. Read by <mosaica-explorer> alone.
--mosaica-map-inset-left	0px	Extra space to the left of the top-left corner's content, to clear a panel you float over the map's left side. Defaults to 0. Read by <mosaica-map> alone.