grailwind 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to this project are documented here. The format is based
+on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project
+adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.0] - 2026-11-01
+
+### Added
+
+- Charges `on` an ordinary: `charges on` places one, two, three or five charges
+  along the pale, fess, bend, bend sinister, chevron, cross, saltire or pall.
+- Fimbriation: `fimbriated-<tincture>` edges an ordinary with a narrow border,
+  e.g. `cross-azure fimbriated-argent`.
+
+### Fixed
+
+- Charges at `in-dexter-chief`, `in-chief` and `in-sinister-chief` now sit on
+  the chief when one is present, and charges are drawn above it.
+
+## [0.1.0] - 2026-10-31
+
+Initial release: tinctures, divisions, ordinaries, charges, strict mode and
+custom SVG charges.
+
+[0.2.0]: https://github.com/pafirmin/grailwind/compare/v0.1.0...v0.2.0
+[0.1.0]: https://github.com/pafirmin/grailwind/releases/tag/v0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Paul Firmin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,73 @@
-# Temporary Holding Version
+# Grailwind CSS
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+![Eight coats of arms drawn with Grailwind: chevrons, quarters, fleurs-de-lis, a saltire, gyronny, a chief, a bend and a bordure](https://pafirmin.github.io/grailwind/preview.png)
+
+Heraldic blazon for [Tailwind CSS](https://tailwindcss.com). Draw coats of
+arms, or style anything else, in the language heralds have used for 800 years:
+
+```html
+<div class="escutcheon azure chevron-or">
+  <div class="charges between">
+    <i class="mullet argent"></i>
+    <i class="mullet argent"></i>
+    <i class="mullet argent"></i>
+  </div>
+</div>
+```
+
+That's *Azure, a chevron Or between three mullets Argent*: a blue shield, a
+gold chevron, and three silver stars around it.
+
+**[Read the documentation](https://pafirmin.github.io/grailwind/)** for every class, with live examples.
+
+> Grailwind is a light-hearted project at version 0.x, so class names may
+> still change.
+
+## Install
+
+Grailwind is a plugin for Tailwind CSS v4.
+
+```sh
+npm install -D grailwind
+```
+
+Import it after Tailwind:
+
+```css
+@import "tailwindcss";
+@import "grailwind";
+```
+
+This adds the heraldic tinctures (`or`, `argent`, `gules`, `azure`, `vert`,
+`purpure`, `sable`) alongside Tailwind's own colours.
+
+For a more authentic experience, import `grailwind/strict` instead, and the
+tinctures replace Tailwind's colours entirely.
+
+## What's included
+
+- **Tinctures:** a tincture on its own sets the background (`azure`), and
+  Tailwind's prefixes work as usual (`text-or`).
+- **The shield:** `escutcheon`, plus `bordure-*`.
+- **Divided fields:** `per-pale-or-gules`, `quarterly-azure-argent`,
+  `gyronny-or-sable` and more, or `per-pale`, `per-fess` and `quarterly` for
+  layout.
+- **Ordinaries:** `fess-or`, `chevron-gules`, `cross-argent`, `chief-azure`
+  and more, with `fimbriated-*` for a narrow border.
+- **Charges:** `mullet`, `fleur-de-lis`, `bezant` and more, arranged by
+  number, `in-pale`, `in-fess`, `in-bend`, `on` or `between` the ordinary, or
+  placed at a named point such as `in-dexter-chief`, and sized with
+  `charge-size-*`.
+- **Your own charges:** any SVG, via `charge-[url(…)]`.
+
+## Development
+
+```sh
+npm install
+npm test            # checks both the default and strict builds
+npm run dev:watch   # rebuilds the docs site on change and serves it at http://localhost:8000
+```
+
+## Licence
+
+[MIT](LICENSE)

package/charges.js

@@ -0,0 +1,194 @@
+/*
+ * Grailwind CSS: charges and their arrangement.
+ */
+import plugin from "tailwindcss/plugin";
+
+const star = (cx, cy, r, points = 5) => {
+  const coords = [];
+  for (let i = 0; i < points * 2; i++) {
+    const radius = i % 2 ? r * 0.382 : r;
+    const angle = (Math.PI / points) * i - Math.PI / 2;
+    coords.push(`${cx + radius * Math.cos(angle)},${cy + radius * Math.sin(angle)}`);
+  }
+  return `<polygon points="${coords.join(" ")}"/>`;
+};
+
+const SHAPES = {
+  roundel: `<circle cx="50" cy="50" r="46"/>`,
+  annulet: `<circle cx="50" cy="50" r="39" fill="none" stroke="#000" stroke-width="14"/>`,
+  mullet: star(50, 53, 48),
+  lozenge: `<polygon points="50,2 84,50 50,98 16,50"/>`,
+  billet: `<rect x="28" y="4" width="44" height="92"/>`,
+  crescent: `<mask id="m"><rect width="100" height="100" fill="#fff"/><circle cx="50" cy="35" r="35"/></mask><circle cx="50" cy="54" r="42" mask="url(#m)"/>`,
+  "fleur-de-lis": `
+    <path d="M50 2C61 16 64 36 55 56H45C36 36 39 16 50 2Z"/>
+    <path d="M55 56C57 38 70 24 84 26C97 29 99 46 89 52C92 44 87 37 80 39C71 42 66 50 66 56Z"/>
+    <path d="M45 56C43 38 30 24 16 26C3 29 1 46 11 52C8 44 13 37 20 39C29 42 34 50 34 56Z"/>
+    <rect x="28" y="56" width="44" height="9" rx="2"/>
+    <path d="M45 65H55C55 74 53 82 50 90C47 82 45 74 45 65Z"/>
+    <path d="M58 65C62 74 72 80 84 78C80 88 64 90 56 74Z"/>
+    <path d="M42 65C38 74 28 80 16 78C20 88 36 90 44 74Z"/>`,
+};
+
+// Roundels have their own names by tincture.
+const ROUNDELS = {
+  bezant: "or",
+  plate: "argent",
+  torteau: "gules",
+  hurt: "azure",
+  pellet: "sable",
+};
+
+// Points as [left%, top%] of the shield, plus a charge size as % of its width.
+// The default for each number of charges, e.g. three are placed 2 and 1.
+const DEFAULTS = {
+  1: { size: 50, points: [[50, 45]] },
+  2: { size: 30, points: [[50, 24], [50, 66]] },
+  3: { size: 28, points: [[28, 25], [72, 25], [50, 64]] },
+  4: { size: 24, points: [[30, 24], [70, 24], [32, 60], [68, 60]] },
+  6: { size: 20, points: [[20, 18], [50, 18], [80, 18], [35, 42], [65, 42], [50, 66]] },
+};
+
+// The points of the shield, for placing a single charge, e.g. `in-dexter-chief`.
+const POINTS = {
+  "dexter-chief": [25, 17],
+  chief: [50, 15],
+  "sinister-chief": [75, 17],
+  "honour-point": [50, 30],
+  "fess-point": [50, 45],
+  "nombril-point": [50, 60],
+  "dexter-base": [30, 72],
+  base: [50, 84],
+  "sinister-base": [70, 72],
+};
+const POINT_SIZE = 22;
+
+// With a chief on the shield, these points sit on it (see ordinaries.js).
+const CHIEF_POINTS = new Set(["dexter-chief", "chief", "sinister-chief"]);
+
+const ARRANGEMENTS = {
+  "in-pale": {
+    2: { size: 30, points: [[50, 24], [50, 66]] },
+    3: { size: 22, points: [[50, 16], [50, 43], [50, 70]] },
+  },
+  "in-fess": {
+    2: { size: 30, points: [[30, 45], [70, 45]] },
+    3: { size: 24, points: [[22, 45], [50, 45], [78, 45]] },
+  },
+  "in-bend": {
+    2: { size: 28, points: [[30, 26], [70, 64]] },
+    3: { size: 22, points: [[22, 16], [50, 45], [78, 74]] },
+  },
+};
+
+const svgUrl = (shape) =>
+  `url("data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">${shape}</svg>`,
+  )}")`;
+
+const maskRules = (image) => ({
+  "mask-image": image,
+  "mask-size": "contain",
+  "mask-repeat": "no-repeat",
+  "mask-position": "center",
+});
+
+const place = ([left, top], size) => ({
+  left: `${left}%`,
+  top: `${top}%`,
+  width: `var(--charge-size, ${size}%)`,
+});
+
+const hasCount = (n) => `:has(> :nth-child(${n}):last-child)`;
+
+export default plugin(({ addUtilities, matchUtilities }) => {
+  // User-defined charges from images
+  matchUtilities({ charge: maskRules }, { type: ["url"] });
+
+  const utilities = {};
+
+  for (const [name, shape] of Object.entries(SHAPES)) {
+    utilities[`.${name}`] = maskRules(svgUrl(shape));
+  }
+
+  for (const [name, tincture] of Object.entries(ROUNDELS)) {
+    utilities[`.${name}`] = {
+      ...maskRules(svgUrl(SHAPES.roundel)),
+      "background-color": `var(--color-${tincture})`,
+    };
+  }
+
+  // Defaults use :where() so arrangements and `between` always win.
+  const charges = {
+    position: "absolute",
+    inset: "var(--field-top, 0%) 0 0",
+    // Above the chief, which is painted last, so charges can sit on it.
+    "z-index": "1",
+    "& > *": {
+      position: "absolute",
+      "aspect-ratio": "1",
+      translate: "-50% -50%",
+      "object-fit": "contain",
+    },
+  };
+  for (const [count, { size, points }] of Object.entries(DEFAULTS)) {
+    points.forEach((point, i) => {
+      charges[`&:where(${hasCount(count)}) > :where(:nth-child(${i + 1}))`] =
+        place(point, size);
+    });
+  }
+  utilities[".charges"] = charges;
+
+  for (const [name, counts] of Object.entries(ARRANGEMENTS)) {
+    const arrangement = {};
+    for (const [count, { size, points }] of Object.entries(counts)) {
+      points.forEach((point, i) => {
+        arrangement[`&${hasCount(count)} > :nth-child(${i + 1})`] = place(point, size);
+      });
+    }
+    utilities[`.${name}`] = arrangement;
+  }
+
+  // Positions come from the ordinary on the shield (see ordinaries.js).
+  const between = {};
+  for (let i = 1; i <= 4; i++) {
+    between[`& > :nth-child(${i})`] = {
+      left: `var(--between-${i}-x)`,
+      top: `var(--between-${i}-y)`,
+      width: "var(--charge-size, var(--between-size))",
+    };
+  }
+  utilities[".between"] = between;
+
+  // Falls back to the plain-field default when the ordinary has no points for this count.
+  // An undefined var() would otherwise unset `left`/`top` instead of  deferring to the :where() default.
+  const on = {};
+  for (const count of [1, 2, 3, 5]) {
+    const fallback = DEFAULTS[count];
+    for (let i = 1; i <= count; i++) {
+      const [left, top] = fallback?.points[i - 1] ?? [];
+      const at = (axis, value) =>
+        value === undefined ? `var(--on-${count}-${i}-${axis})` : `var(--on-${count}-${i}-${axis}, ${value}%)`;
+      on[`&${hasCount(count)} > :nth-child(${i})`] = {
+        left: at("x", left),
+        top: at("y", top),
+        width: `var(--charge-size, var(--on-size, ${fallback?.size ?? 16}%))`,
+      };
+    }
+  }
+  utilities[".on"] = on;
+
+  for (const [name, [left, top]] of Object.entries(POINTS)) {
+    utilities[`.in-${name}`] = {
+      ".charges > &": CHIEF_POINTS.has(name)
+        ? {
+            left: `${left}%`,
+            top: `var(--chief-points-y, ${top}%)`,
+            width: `var(--charge-size, var(--chief-points-size, ${POINT_SIZE}%))`,
+          }
+        : place([left, top], POINT_SIZE),
+    };
+  }
+
+  addUtilities(utilities);
+});

package/divisions.js

@@ -0,0 +1,69 @@
+/*
+ * Grailwind CSS: field divisions as decoration.
+ */
+import plugin from "tailwindcss/plugin";
+
+const TINCTURES = ["or", "argent", "gules", "azure", "vert", "purpure", "sable"];
+
+// Each division maps (first, second) tincture colours to background rules.
+const layer = (image) => ({ "background-image": image });
+
+const DIVISIONS = {
+  // Vertical split: first on the dexter (viewer's left).
+  "per-pale": (a, b) => layer(`linear-gradient(to right, ${a} 50%, ${b} 50%)`),
+
+  // Horizontal split: first in chief.
+  "per-fess": (a, b) => layer(`linear-gradient(to bottom, ${a} 50%, ${b} 50%)`),
+
+  // Line from dexter chief to sinister base: first in the upper half.
+  // With a corner-to-corner gradient, the 50% line joins the other two corners.
+  "per-bend": (a, b) => layer(`linear-gradient(to bottom left, ${a} 50%, ${b} 50%)`),
+
+  // Line from sinister chief to dexter base: first in the upper half.
+  "per-bend-sinister": (a, b) =>
+    layer(`linear-gradient(to bottom right, ${a} 50%, ${b} 50%)`),
+
+  // Quarters 1 and 4 (dexter chief, sinister base) are the first tincture.
+  // Linear gradients rather than conic, which render jagged edges in some browsers.
+  quarterly: (a, b) => ({
+    "background-image": `linear-gradient(to right, ${a} 50%, ${b} 50%), linear-gradient(to right, ${b} 50%, ${a} 50%)`,
+    "background-size": "100% 50%, 100% 100%",
+    "background-position": "top, top",
+    "background-repeat": "no-repeat",
+  }),
+
+  // Gyronny of eight: each quarter split corner to corner. The first tincture
+  // is in the gyron just dexter of the top line. The background colour fills
+  // any sub-pixel seam between quarters.
+  gyronny: (a, b) => ({
+    "background-color": b,
+    "background-image": [
+      `linear-gradient(to bottom left, ${a} 50%, ${b} 50%)`,
+      `linear-gradient(to bottom right, ${b} 50%, ${a} 50%)`,
+      `linear-gradient(to bottom left, ${b} 50%, ${a} 50%)`,
+      `linear-gradient(to bottom right, ${a} 50%, ${b} 50%)`,
+    ].join(", "),
+    "background-size": "50% 50%",
+    "background-position": "left top, right top, right bottom, left bottom",
+    "background-repeat": "no-repeat",
+  }),
+};
+
+export default plugin(({ addUtilities }) => {
+  const utilities = {};
+
+  for (const [division, background] of Object.entries(DIVISIONS)) {
+    for (const first of TINCTURES) {
+      for (const second of TINCTURES) {
+        if (first === second) continue;
+
+        utilities[`.${division}-${first}-${second}`] = background(
+          `var(--color-${first})`,
+          `var(--color-${second})`,
+        );
+      }
+    }
+  }
+
+  addUtilities(utilities);
+});

package/grailwind.css

@@ -0,0 +1,111 @@
+/*
+ * Grailwind CSS: heraldic blazon for Tailwind v4.
+ *
+ * Import after Tailwind:
+ *   @import "tailwindcss";
+ *   @import "grailwind";
+ *
+ * Adds the tinctures alongside Tailwind's colours. For tinctures only,
+ * import "grailwind/strict" instead.
+ */
+
+@plugin "./divisions.js";
+@plugin "./ordinaries.js";
+@plugin "./charges.js";
+
+@property --fimbriated {
+  syntax: "*";
+  inherits: false;
+}
+@property --fimbriation {
+  syntax: "*";
+  inherits: false;
+}
+
+/* ---------------------------------------------------------------------------
+ * Tinctures
+ * ------------------------------------------------------------------------- */
+@theme {
+  /* Metals */
+  --color-or: #f5c518;
+  --color-argent: #ffffff;
+
+  /* Colours */
+  --color-gules: #d21f1f;
+  --color-azure: #1f4fb0;
+  --color-vert: #1d8a3c;
+  --color-purpure: #7e3a8e;
+  --color-sable: #141414;
+}
+
+/* ---------------------------------------------------------------------------
+ * Bare tinctures
+ * ------------------------------------------------------------------------- */
+@utility or      { background-color: var(--color-or); }
+@utility argent  { background-color: var(--color-argent); }
+@utility gules   { background-color: var(--color-gules); }
+@utility azure   { background-color: var(--color-azure); }
+@utility vert    { background-color: var(--color-vert); }
+@utility purpure { background-color: var(--color-purpure); }
+@utility sable   { background-color: var(--color-sable); }
+
+/* ---------------------------------------------------------------------------
+ * Field divisions
+ * ------------------------------------------------------------------------- */
+
+/* Per pale: split vertically into dexter | sinister. */
+@utility per-pale {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+/* Per fess: split horizontally into chief / base. */
+@utility per-fess {
+  display: grid;
+  grid-auto-flow: row;
+  grid-auto-rows: 1fr;
+}
+
+/* Quarterly: four quarters, numbered 1–4 across then down.
+ * Quarter 1 is dexter chief, i.e. the viewer's top left. */
+@utility quarterly {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+
+/* ---------------------------------------------------------------------------
+ * Subordinaries
+ * ------------------------------------------------------------------------- */
+
+/* Bordure: a border in a given tincture, e.g. `bordure-or`. */
+@utility bordure-* {
+  border-style: solid;
+  border-width: 0.75rem;
+  border-color: --value(--color-*);
+}
+
+/* ---------------------------------------------------------------------------
+ * The shield itself
+ * ------------------------------------------------------------------------- */
+
+/* Escutcheon: a shield shape to draw arms in. */
+@utility escutcheon {
+  position: relative;
+  aspect-ratio: 5 / 6;
+  overflow: hidden;
+  border-radius: 0 0 50% 50% / 0 0 45% 45%;
+  box-shadow: 0 0 0 2px var(--color-sable);
+}
+
+/* ---------------------------------------------------------------------------
+ * Charge size
+ * ------------------------------------------------------------------------- */
+
+/* Charge width as a % of the shield, e.g. `charge-size-20` or `charge-size-[3rem]`.
+ * On a `charges` container it sizes every charge; on a charge, just that one. */
+@utility charge-size-* {
+  --charge-size: calc(--value(integer) * 1%);
+  --charge-size: --value([percentage], [length]);
+}

package/ordinaries.js

@@ -0,0 +1,256 @@
+/*
+ * Grailwind CSS: ordinaries, e.g. `fess-or`.
+ */
+import plugin from "tailwindcss/plugin";
+
+const TINCTURES = ["or", "argent", "gules", "azure", "vert", "purpure", "sable"];
+
+const ORDINARIES = {
+  pale: [[35, 0], [65, 0], [65, 100], [35, 100]],
+  fess: [[0, 30], [100, 30], [100, 60], [0, 60]],
+  bend: [[0, 0], [20, 0], [100, 80], [100, 100], [80, 100], [0, 20]],
+  "bend-sinister": [[100, 0], [80, 0], [0, 80], [0, 100], [20, 100], [100, 20]],
+  chevron: [[50, 25], [100, 75], [100, 95], [50, 45], [0, 95], [0, 75]],
+  cross: [
+    [40, 0], [60, 0], [60, 35], [100, 35], [100, 55], [60, 55],
+    [60, 100], [40, 100], [40, 55], [0, 55], [0, 35], [40, 35],
+  ],
+  saltire: [
+    [0, 0], [15, 0], [50, 35], [85, 0], [100, 0], [100, 15], [65, 50], [100, 85],
+    [100, 100], [85, 100], [50, 65], [15, 100], [0, 100], [0, 85], [35, 50], [0, 15],
+  ],
+  pall: [
+    [0, 0], [15, 0], [50, 35], [85, 0], [100, 0], [100, 15],
+    [60, 55], [60, 100], [40, 100], [40, 55], [0, 15],
+  ],
+  chief: [[0, 0], [100, 0], [100, 30], [0, 30]],
+};
+
+const num = (v) => +v.toFixed(3);
+const pct = (v) => (num(v) === 0 ? "0" : `${num(v)}%`);
+const point = ([x, y]) => `${pct(x)} ${pct(y)}`;
+const polygon = (vertices) => `polygon(${vertices.map(point).join(", ")})`;
+
+const PSEUDO = { chief: "&::after" };
+
+// Fimbriation: the ordinary's clip is widened and filled with the fimbriation
+// tincture, and the ordinary's own tincture is painted over it as gradient
+// bands.
+const W = 100;
+const H = 120;
+const FIMBRIATION = 3;
+
+const real = ([x, y]) => [(x * W) / 100, (y * H) / 100];
+const onShieldEdge = (a, b) =>
+  (a[0] === b[0] && (a[0] === 0 || a[0] === 100)) ||
+  (a[1] === b[1] && (a[1] === 0 || a[1] === 100));
+const signedArea = (vertices) =>
+  vertices.reduce((sum, [x1, y1], i) => {
+    const [x2, y2] = vertices[(i + 1) % vertices.length];
+    return sum + x1 * y2 - x2 * y1;
+  }, 0) / 2;
+
+// The edge a→b as a line n·p = c, moved outward by `distance` real units.
+const offsetLine = (a, b, outward, distance) => {
+  const [ax, ay] = real(a);
+  const [bx, by] = real(b);
+  const length = Math.hypot(bx - ax, by - ay);
+  const n = [(outward * (by - ay)) / length, (outward * (ax - bx)) / length];
+  return { n, c: n[0] * ax + n[1] * ay + distance };
+};
+
+// How far each vertex moves, in %, when fimbriated. Sides on the shield's edge
+// don't move, so their vertices slide along it.
+const widen = (vertices) => {
+  const outward = Math.sign(signedArea(vertices));
+  const count = vertices.length;
+  const line = (i) => {
+    const a = vertices[i];
+    const b = vertices[(i + 1) % count];
+    return offsetLine(a, b, outward, onShieldEdge(a, b) ? 0 : FIMBRIATION);
+  };
+  return vertices.map((v, i) => {
+    const p = line((i - 1 + count) % count);
+    const q = line(i);
+    const det = p.n[0] * q.n[1] - p.n[1] * q.n[0];
+    const [x, y] = [(p.c * q.n[1] - q.c * p.n[1]) / det, (p.n[0] * q.c - q.n[0] * p.c) / det];
+    const [rx, ry] = real(v);
+    return [((x - rx) * 100) / W, ((y - ry) * 100) / H];
+  });
+};
+
+const shift = (v, d) =>
+  num(d) === 0
+    ? pct(v)
+    : `calc(${num(v)}% ${d < 0 ? "-" : "+"} ${num(Math.abs(d))}% * var(--fimbriated, 0))`;
+const widenedPolygon = (vertices) => {
+  const offsets = widen(vertices);
+  const points = vertices.map(
+    ([x, y], i) => `${shift(x, offsets[i][0])} ${shift(y, offsets[i][1])}`,
+  );
+  return `polygon(${points.join(", ")})`;
+};
+
+// The ordinary's tincture, top layer first. `x`/`y` bands run between two x or y
+// values in %; `u-v`/`u+v` are diagonal, between values of x − y or x + y.
+// A `tile` [x0, y0, x1, y1] confines a layer to part of the box (square, if
+// diagonal). Stripes repaint the fimbriation where one arm's band runs on into
+// another's.
+const S = 12;
+const band = (kind, from, to, tile) => ({ kind, from, to, tile });
+const stripe = (kind, from, to, tile) => ({ kind, from, to, tile, stripe: true });
+const BANDS = {
+  pale: [band("x", 35, 65)],
+  fess: [band("y", 30, 60)],
+  bend: [band("u-v", -20, 20)],
+  "bend-sinister": [band("u+v", 80, 120)],
+  chevron: [
+    stripe("u+v", 75 - S, 75),
+    stripe("u-v", 25, 25 + S),
+    band("u+v", 75, 95),
+    band("u-v", 5, 25),
+  ],
+  cross: [band("x", 40, 60), band("y", 35, 55)],
+  saltire: [band("u-v", -15, 15), band("u+v", 85, 115)],
+  pall: [
+    stripe("x", 60, 60 + S, [0, 55, 100, 100]),
+    stripe("x", 40 - S, 40, [0, 55, 100, 100]),
+    stripe("u+v", 115, 115 + S, [60, 30, 100, 70]),
+    stripe("u-v", -15 - S, -15, [0, 30, 40, 70]),
+    band("u-v", -15, 15),
+    band("u+v", 85, 115),
+    band("x", 40, 60, [0, 55, 100, 100]),
+  ],
+};
+
+const DIRECTION = { x: "to right", y: "to bottom", "u-v": "to top right", "u+v": "to bottom right" };
+
+// A band's edges as % along its gradient, within its tile.
+const stop = ({ kind, tile: [x0, y0, x1, y1] = [0, 0, 100, 100] }, value) => {
+  const w = x1 - x0;
+  const h = y1 - y0;
+  if (kind.length > 1 && w !== h) throw new Error("diagonal bands need a square tile");
+  switch (kind) {
+    case "x": return ((value - x0) * 100) / w;
+    case "y": return ((value - y0) * 100) / h;
+    case "u-v": return ((value - (x0 - y0)) * 100) / w / 2 + 50;
+    case "u+v": return ((value - x0 - y0) * 100) / w / 2;
+  }
+};
+
+// Soften each edge by a pixel, as hard gradient stops aren't antialiased.
+const gradient = (layer, colour) => {
+  const a = num(stop(layer, layer.from));
+  const b = num(stop(layer, layer.to));
+  return (
+    `linear-gradient(${DIRECTION[layer.kind]}, transparent calc(${a}% - 0.5px), ` +
+    `${colour} calc(${a}% + 0.5px) calc(${b}% - 0.5px), transparent calc(${b}% + 0.5px))`
+  );
+};
+
+const tilePosition = (start, size) => (size === 100 ? "0" : pct((start * 100) / (100 - size)));
+
+const bands = (layers, tincture) => ({
+  "background-image": layers
+    .map((l) => gradient(l, l.stripe ? "var(--fimbriation, transparent)" : `var(--color-${tincture})`))
+    .join(", "),
+  "background-size": layers
+    .map(({ tile: [x0, y0, x1, y1] = [0, 0, 100, 100] }) => `${pct(x1 - x0)} ${pct(y1 - y0)}`)
+    .join(", "),
+  "background-position": layers
+    .map(({ tile: [x0, y0, x1, y1] = [0, 0, 100, 100] }) =>
+      `${tilePosition(x0, x1 - x0)} ${tilePosition(y0, y1 - y0)}`)
+    .join(", "),
+  "background-repeat": "no-repeat",
+});
+
+// Where charges go for "between", as [left%, top%], plus their size as % of width.
+const BETWEEN = {
+  pale: { size: 18, points: [[18, 42], [82, 42]] },
+  fess: { size: 20, points: [[30, 15], [70, 15], [50, 78]] },
+  bend: { size: 24, points: [[70, 26], [30, 68]] },
+  "bend-sinister": { size: 24, points: [[30, 26], [70, 68]] },
+  chevron: { size: 22, points: [[24, 22], [76, 22], [50, 70]] },
+  cross: { size: 18, points: [[20, 17], [80, 17], [24, 72], [76, 72]] },
+  saltire: { size: 16, points: [[50, 13], [14, 50], [86, 50], [50, 84]] },
+  pall: { size: 18, points: [[50, 11], [18, 56], [82, 56]] },
+};
+
+// Where charges go for "on", along the ordinary's centre line, by number of charges.
+const ON = {
+  pale: { size: 20, counts: { 1: [[50, 45]], 2: [[50, 28], [50, 62]], 3: [[50, 18], [50, 45], [50, 72]] } },
+  fess: { size: 22, counts: { 1: [[50, 45]], 2: [[30, 45], [70, 45]], 3: [[20, 45], [50, 45], [80, 45]] } },
+  bend: { size: 18, counts: { 1: [[50, 50]], 2: [[33, 33], [67, 67]], 3: [[24, 24], [50, 50], [76, 76]] } },
+  "bend-sinister": { size: 18, counts: { 1: [[50, 50]], 2: [[67, 33], [33, 67]], 3: [[76, 24], [50, 50], [24, 76]] } },
+  chevron: { size: 12, counts: { 1: [[50, 36]], 3: [[20, 65], [50, 36], [80, 65]] } },
+  cross: { size: 15, counts: { 1: [[50, 45]], 5: [[50, 15], [18, 45], [50, 45], [82, 45], [50, 80]] } },
+  saltire: { size: 14, counts: { 1: [[50, 50]], 5: [[22, 22], [78, 22], [50, 50], [22, 78], [78, 78]] } },
+  pall: { size: 14, counts: { 1: [[50, 50]], 3: [[22, 22], [78, 22], [50, 75]] } },
+};
+
+const betweenVars = ({ size, points }) => {
+  const vars = { "--between-size": `${size}%` };
+  points.forEach(([left, top], i) => {
+    vars[`--between-${i + 1}-x`] = `${left}%`;
+    vars[`--between-${i + 1}-y`] = `${top}%`;
+  });
+  return vars;
+};
+
+const onVars = ({ size, counts }) => {
+  const vars = { "--on-size": `${size}%` };
+  for (const [count, points] of Object.entries(counts)) {
+    points.forEach(([left, top], i) => {
+      vars[`--on-${count}-${i + 1}-x`] = `${left}%`;
+      vars[`--on-${count}-${i + 1}-y`] = `${top}%`;
+    });
+  }
+  return vars;
+};
+
+export default plugin(({ addUtilities }) => {
+  const utilities = {};
+
+  for (const tincture of TINCTURES) {
+    utilities[`.fimbriated-${tincture}`] = {
+      "--fimbriated": "1",
+      "--fimbriation": `var(--color-${tincture})`,
+    };
+  }
+
+  for (const [ordinary, vertices] of Object.entries(ORDINARIES)) {
+    for (const tincture of TINCTURES) {
+      utilities[`.${ordinary}-${tincture}`] = {
+        position: "relative",
+        ...(BETWEEN[ordinary] && betweenVars(BETWEEN[ordinary])),
+        ...(ON[ordinary] && onVars(ON[ordinary])),
+        // With a chief, everything else is drawn in the field below it.
+        ...(ordinary === "chief" && {
+          "--field-top": "30%",
+          // The chief's centre line, relative to the charges container below it.
+          "--chief-points-y": "calc(-15% / 0.7)",
+          "--chief-points-size": "18%",
+        }),
+        [PSEUDO[ordinary] ?? "&::before"]: {
+          content: '""',
+          position: "absolute",
+          inset: ordinary === "chief" ? "0" : "var(--field-top, 0%) 0 0",
+          ...(BANDS[ordinary]
+            ? {
+                "--fimbriated": "inherit",
+                "--fimbriation": "inherit",
+                "background-color": `var(--fimbriation, var(--color-${tincture}))`,
+                ...bands(BANDS[ordinary], tincture),
+                "clip-path": widenedPolygon(vertices),
+              }
+            : {
+                "background-color": `var(--color-${tincture})`,
+                "clip-path": polygon(vertices),
+              }),
+        },
+      };
+    }
+  }
+
+  addUtilities(utilities);
+});

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "grailwind",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "scripts": {
+    "build": "tailwindcss -i docs/app.css -o docs/site.css",
+    "dev": "tailwindcss -i docs/app.css -o docs/site.css --watch",
+    "test": "node test/modes.mjs",
+    "dev:watch": "tailwindcss -i docs/app.css -o docs/site.css --watch=always & python3 -m http.server ${PORT:-8000} -d docs"
+  },
+  "keywords": [
+    "tailwindcss",
+    "tailwind",
+    "heraldry",
+    "blazon",
+    "css"
+  ],
+  "author": "Paul Firmin",
+  "license": "MIT",
+  "description": "Heraldic blazon for Tailwind CSS: tinctures, divisions, ordinaries and charges",
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
+    "tailwindcss": "^4.3.3"
+  },
+  "type": "module",
+  "style": "grailwind.css",
+  "exports": {
+    ".": {
+      "style": "./grailwind.css",
+      "default": "./grailwind.css"
+    },
+    "./strict": {
+      "style": "./strict.css",
+      "default": "./strict.css"
+    }
+  },
+  "files": [
+    "grailwind.css",
+    "divisions.js",
+    "ordinaries.js",
+    "charges.js",
+    "strict.css",
+    "palette-reset.css",
+    "CHANGELOG.md"
+  ],
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "homepage": "https://pafirmin.github.io/grailwind/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pafirmin/grailwind.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pafirmin/grailwind/issues"
+  }
+}

package/palette-reset.css

@@ -0,0 +1,4 @@
+/* Removes Tailwind's colours. Used by strict.css. */
+@theme {
+  --color-*: initial;
+}

package/strict.css

@@ -0,0 +1,5 @@
+/*
+ * Grailwind CSS, strict: the tinctures replace Tailwind's colours entirely.
+ */
+@import "./palette-reset.css";
+@import "./grailwind.css";