@morze/ui 0.2.1 → 0.2.2

package/README.md

@@ -200,10 +200,28 @@ sink them into the page.
 
 ## Customisation
 
+**One colour re-tints the whole kit.** The neutral surfaces — panels, inputs,
+table headers, the sunken wells — are not flat grey: each is a neutral mixed
+with a few percent of `--mz-tint`, which points at the brand colour. Change
+`--mz-primary-rgb` and the greys follow it, instead of keeping the violet cast
+they were born with:
+
+```css
+:root {
+  --mz-primary-rgb: 16, 175, 122;   /* the panels and wells go green with it */
+  --mz-tint: #8b8b96;               /* …or point the tint at a grey for none */
+}
+```
+
+Text is deliberately left out of this: its contrast is calibrated against the
+background, and dragging a saturated brand through it costs more than it buys.
+The tinted surfaces need `color-mix()` — Chrome 111+, Firefox 113+, Safari 16.2+,
+the same baseline as the rest of the kit.
+
 Everything is driven by custom properties; override them after importing the
 styles. The main groups: surfaces (`--mz-bg`, `--mz-surface`, `--mz-elevated`),
-borders, text, tones, the convex recipe (`--mz-convex-*`, `--mz-face*`,
-`--mz-well*`), geometry (`--mz-radius*`), type (`--mz-font-*`, `--mz-label-*`),
+borders, text, tones, the tint (`--mz-tint`, `--mz-shade`), the convex recipe
+(`--mz-convex-*`, `--mz-face*`, `--mz-well*`), geometry (`--mz-radius*`), type (`--mz-font-*`, `--mz-label-*`),
 motion and states (`--mz-ease`, `--mz-duration`, `--mz-hover-scale`,
 `--mz-press-scale`, `--mz-hover-mix`, `--mz-press-mix`), focus (`--mz-ring-*`).
 

package/dist/index.cjs

@@ -2841,6 +2841,7 @@ function DataTable({
                 columnLabel: label,
                 def: column.filter,
                 value: query.filters[column.id],
+                labels: labelsProp,
                 onApply: (value) => onQueryChange(setFilter(query, column.id, value))
               }
             ) : null