um

CSS

Colours and variables

The theme variables the styles read from yours, and the few --unmagic- variables of their own.

The gem has no design tokens of its own. Its colours, radii and type sizes are Tailwind's, read from your theme when your build compiles the file. Only a few layout values that change per instance, and the chart palette, are --unmagic- variables.

Your theme's variables

neutral --color-neutral-*
Every surface, border and piece of text: bg-white dark:bg-neutral-900, border-neutral-200 dark:border-neutral-800.
Tones red, green, amber, blue
red is bad, green good, amber warn and blue info: badges, callouts, toasts, errors, the danger button.
Accents sky, violet, teal, rose, emerald…
A few other palette colours, where a component needs one more hue (an avatar's tint, a chart series).
Scale --radius-*, --text-*, --spacing
rounded-md for controls, rounded-lg for panels, rounded-xl for cards and tables; text-sm for body text.

Redefine any of them in your @theme and the components change with the rest of your app: 

@theme {
  --color-neutral-900: oklch(0.21 0.03 265);
  --radius-md: 0.25rem;
}

Dark mode

Each colour has a dark: pair, and the file never writes a theme selector of its own. It uses your dark variant, which follows the visitor's system setting until you redefine it. See Theming.

The gem's own variables

Called knobs, they're named --unmagic-<component>-<property>. Each has a default in the CSS and is set on one instance, usually by a helper option, so you seldom write one yourself:

--unmagic-toast-width default 384px
Set by width: on a toast.
--unmagic-scroll-area-max-height default none
Set by max_height: on scroll_area.
--unmagic-code-view-max-height default none
Set by max_height: on code_view.
--unmagic-board-column-height default 75dvh
Set by column_height: on board.

Chart colours

A chart draws from six series slots and four chrome colours, set on .UnmagicChart with a darker step for dark mode. Series one is blue, then orange, emerald, amber, pink and neutral. Change them on one chart with arbitrary property utilities, or for every chart in your own CSS: 

<%= chart @signups, labels: @weeks, class: "[--unmagic-chart-series-1:var(--color-violet-600)]" %>
.UnmagicChart {
  --unmagic-chart-series-1: var(--color-violet-600);

  @variant dark {
    --unmagic-chart-series-1: var(--color-violet-500);
  }
}

The other variables are --unmagic-chart-surface, -ink (labels), -grid and -axis.

See it working