Theming

Every colour, space, radius and font of a grid comes from a --masu-* custom property. Set them on .masu (or higher) to theme the grids:

.masu {
  --masu-accent: #0f766e;
  --masu-font-size: 0.8125rem;
}

The defaults have no specificity, so a value set on :root, on an ancestor or on .masu itself wins. They are Kotoba's and Koyomi's own defaults, so that a page with all three looks like one thing.

The properties

A changed row has the color of the person who saved it in --masu-flash (the accent unless someone saved it). The grid sets --masu-cols, --masu-width and --masu-row-height on itself: the widths of the columns and the height of a row (the row_height attribute).

Density

density sets the room around a cell's text: :compact (rows of 28 pixels), :normal (36) or :comfortable (48), and their padding. row_height sets the rows' height itself.

<.data_grid id="orders" rows={@orders} density={:compact}>

Dark mode

Masu follows the app's own switch: a dark class on an ancestor (as Tailwind and Phoenix's generated apps put on <html>), or data-theme="dark". It does not follow the system's setting by itself, so that a light app stays light; an app that does maps its own media query to one of them.

Its dark palette is a neutral one. Set your own under the same switch:

.dark .masu {
  --masu-text: #ececef;
  --masu-background: #17171a;
  --masu-surface: #1f1f23;
  --masu-border: #33333a;
  --masu-rule: #26262b;
}

With Tailwind

Map the tokens to your theme's colors in app.css, once, for light and dark:

/* Tailwind 4 */
.masu {
  --masu-font: var(--font-sans);
  --masu-text: var(--color-zinc-800);
  --masu-background: var(--color-white);
  --masu-header-background: var(--color-white);
  --masu-row-alt-background: var(--color-zinc-50);
  --masu-accent: var(--color-indigo-600);
}

.dark .masu {
  --masu-text: var(--color-zinc-100);
  --masu-background: var(--color-zinc-900);
  --masu-header-background: var(--color-zinc-900);
  --masu-row-alt-background: var(--color-zinc-800);
}

With Tailwind 3, use theme(): --masu-text: theme(colors.zinc.800). class on the grid takes any class of yours, to scope a look to some grids: <.data_grid class="report-grid" ...>.

Make Masu look like your table

An app with tables of its own wants its grids to look like them. Measure your table (a browser's computed styles of a header cell, a cell, an even row), and set the tokens to the values. Lotus Web's results table, in tokens, with row_height={52}:

.lotus-results {
  --masu-font: "Inter var", sans-serif;
  --masu-font-size: 0.875rem;
  --masu-line-height: 1.25rem;
  --masu-text: rgb(39 39 42);
  --masu-background: rgb(255 255 255);
  --masu-header-background: rgb(255 255 255);
  --masu-header-text: rgb(39 39 42);
  --masu-header-height: 48px;
  --masu-header-border: none;
  --masu-header-shadow: 0 1px 0 0 rgb(209 213 219);
  --masu-header-hover: rgb(239 246 255);
  --masu-grid-border: none;
  --masu-grid-radius: 0;
  --masu-row-border: none;
  --masu-row-alt-background: rgb(249 250 251);
  --masu-row-hover: transparent;
  --masu-cell-hover: rgb(239 246 255);
  --masu-cell-padding: 0 0.75rem;
}

.dark .lotus-results {
  --masu-text: rgb(244 244 245);
  --masu-background: rgb(23 23 23);
  --masu-header-background: rgb(23 23 23);
  --masu-header-text: rgb(244 244 245);
  --masu-header-shadow: 0 1px 0 0 rgb(75 85 99);
  --masu-header-hover: rgb(30 58 138 / 0.2);
  --masu-row-alt-background: rgb(55 65 81);
  --masu-cell-hover: rgb(30 58 138 / 0.2);
}

In Lotus Web itself, the values would be its own variables (rgb(var(--lotus-gray-50))), so that its themes apply. Masu's e2e suite renders Lotus Web's table, with Lotus Web's own CSS, next to a grid with these tokens, and compares them pixel for pixel, light and dark, at rest and with a cell under the pointer (e2e/specs/look.spec.ts; the dev server's /look).

The Sumi theme

masu-sumi.css maps every property to the Sumi tokens, as kotoba-sumi.css and koyomi-sumi.css do. Load it after masu.css:

@import "../../deps/masu/priv/static/masu.css";
@import "../../deps/masu/priv/static/masu-sumi.css";

On a page with the Sumi themes, the grids follow them. Without them, the built-in Sumi palette follows data-theme ("dark" or "light"), then prefers-color-scheme. The selection is a faint wash of the blade, and the active cell a line of it.

Classes