grailwind 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -6,6 +6,51 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.8.0] - 2026-11-12
+
+### Added
+
+- Wavy ordinaries, e.g. `fess-wavy-or` and `three-bars-wavy-argent`.
+- Indented and embattled ordinaries, e.g. `chief-indented-azure` and
+  `cross-embattled-gules`. A fess, bar, bend or chevron embattled has
+  battlements on its upper edge only. The chevron, cross, saltire, pall and
+  pile take them with hand-drawn corners, as do the wavy chevron and pall.
+
+### Changed
+
+- Ordinary proportions move towards Fox-Davies: the chevron is wider (a fifth
+  of the shield), the cross's limbs are equal, the saltire is wider and crosses
+  at the fess point (as does `per-saltire-*`), and the pile is wider. The
+  pall's arms and foot are equal, and its arms meet above the fess point.
+- The engrailed cross and pile are hand-drawn, with clean corners and tips.
+- `@grailwind/eslint-plugin` 0.1.0-beta.4 needs `grailwind` 0.8.x.
+
+### Fixed
+
+- `gyronny-*` crosses at the fess point, as `per-saltire-*` does, so a
+  counterchanged saltire lines up with it.
+- Charges `on` an engrailed or indented ordinary are smaller, and charges
+  `between` a lined bend, pall, or embattled chevron move clear of its edge.
+
+## [0.7.0] - 2026-11-09
+
+### Added
+
+- `per-chevron-*`: a field divided along a chevron's centre line, the first
+  tincture in chief.
+- `bendy-*`, `bendy-sinister-*`, `chevronny-*` (each with `-of-eight-*`) and
+  `chequy-*`: six or eight pieces, or five squares by six.
+
+### Changed
+
+- `@grailwind/eslint-plugin` 0.1.0-beta.3 needs `grailwind` 0.7.x.
+
+### Fixed
+
+- On a shield, `quarterly` and two-part `per-fess` split at the fess point, as
+  the divisions do, not halfway down.
+- No seam down the centre of `per-saltire-*` at odd widths.
+
 ## [0.6.0] - 2026-11-06
 
 ### Added
@@ -138,7 +183,9 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 Initial release: tinctures, divisions, ordinaries, charges, strict mode and
 custom SVG charges.
 
-[Unreleased]: https://github.com/pafirmin/grailwind/compare/v0.6.0...HEAD
+[Unreleased]: https://github.com/pafirmin/grailwind/compare/v0.8.0...HEAD
+[0.8.0]: https://github.com/pafirmin/grailwind/compare/v0.7.0...v0.8.0
+[0.7.0]: https://github.com/pafirmin/grailwind/compare/v0.6.0...v0.7.0
 [0.6.0]: https://github.com/pafirmin/grailwind/compare/v0.5.0...v0.6.0
 [0.5.0]: https://github.com/pafirmin/grailwind/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/pafirmin/grailwind/compare/v0.3.0...v0.4.0

package/README.md

@@ -57,11 +57,11 @@ tinctures replace Tailwind's colours entirely.
 - **The shield:** `escutcheon`, plus `bordure-*`, `inescutcheon` (a small shield at the centre)
   and `canton` (a ninth of the shield in dexter chief), each with its own field and charges.
 - **Divided fields:** `per-pale-or-gules`, `quarterly-azure-argent`,
-  `gyronny-or-sable`, `barry-argent-azure` and more, or `per-pale`, `per-fess` and `quarterly` for
-  layout.
+  `gyronny-or-sable`, `barry-argent-azure`, `bendy-argent-gules`, `chequy-or-azure` and more, or
+  `per-pale`, `per-fess` and `quarterly` for layout.
 - **Ordinaries:** `fess-or`, `chevron-gules`, `cross-argent`, `chief-azure`,
   `two-bars-or` and more, with `fimbriated-*` for a narrow border,
-  `fess-engrailed-or` and the like for an engrailed or invected edge,
+  `fess-engrailed-or` and the like for an engrailed, invected, wavy, indented or embattled edge,
   `cross-voided-argent` and the like to show the field through it,
   `pile-reversed-or` (also the chevron and pall) to turn one upside down,
   `chief-ermine` and the like in a fur, or `chevron-counterchanged` and the like

package/data.js

@@ -13,6 +13,7 @@ export const DIVISIONS = [
   "per-fess",
   "per-bend",
   "per-bend-sinister",
+  "per-chevron",
   "per-saltire",
   "quarterly",
   "gyronny",
@@ -21,6 +22,13 @@ export const DIVISIONS = [
   "barry-of-ten",
   "paly",
   "paly-of-eight",
+  "bendy",
+  "bendy-of-eight",
+  "bendy-sinister",
+  "bendy-sinister-of-eight",
+  "chevronny",
+  "chevronny-of-eight",
+  "chequy",
 ];
 
 // Ordinaries that can be reversed, e.g. `pile-reversed-or`: the same shape upside down.
@@ -72,7 +80,10 @@ export const ROUNDELS = {
 };
 
 // Lines of partition for an ordinary's edge, e.g. `fess-engrailed-or`.
-export const LINES = ["engrailed", "invected"];
+export const LINES = ["engrailed", "invected", "wavy", "indented", "embattled"];
+
+// The ordinaries that take a line: every one, the cornered ones drawn by hand (064).
+export const lineOrdinaries = () => ORDINARIES;
 
 // Ordinaries that can be voided, e.g. `cross-voided-argent`.
 export const VOIDABLE = [
@@ -135,15 +146,18 @@ export const BETWEEN = {
   "bend-sinister": { size: 24, points: [[30, 26], [70, 68]], counts: {
     6: { size: 14, points: [[52, 9], [24, 12], [16, 38], [91, 48], [82, 72], [62, 84]] } } },
   chevron: { size: 22, points: [[24, 22], [76, 22], [50, 70]], counts: {
-    6: { size: 12, points: [[18, 14], [50, 11], [82, 14], [38, 66], [62, 66], [50, 84]] } } },
+    6: { size: 12, points: [[18, 14], [50, 11], [82, 14], [40, 72], [60, 72], [50, 84]] } } },
   cross: { size: 18, points: [[20, 17], [80, 17], [24, 72], [76, 72]] },
-  saltire: { size: 16, points: [[50, 13], [14, 50], [86, 50], [50, 84]], counts: {
-    2: { points: [[14, 50], [86, 50]] } } },
+  saltire: { size: 16, points: [[50, 13], [14, 45], [86, 45], [50, 84]], counts: {
+    2: { points: [[14, 45], [86, 45]] } } },
   pall: { size: 18, points: [[50, 11], [18, 56], [82, 56]], counts: {
     2: { points: [[18, 56], [82, 56]] } } },
   pile: { size: 20, points: [[18, 55], [82, 55]] },
 };
 
+// `on` charges shrink on lines that cut deep into the ordinary, by line.
+export const ON_SCALE = { engrailed: 0.8, indented: 0.9 };
+
 // Where charges go for "on", along the ordinary's centre line, by number of charges.
 // prettier-ignore
 export const ON = {
@@ -151,10 +165,10 @@ export const ON = {
   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]] } },
+  chevron: { size: 15, 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]] } },
+  saltire: { size: 16, counts: { 1: [[50, 45]], 5: [[22, 19.8], [78, 19.8], [50, 45], [22, 70.2], [78, 70.2]] } },
+  pall: { size: 16, counts: { 1: [[50, 40]], 3: [[26, 20.8], [74, 20.8], [50, 75]] } },
   pile: { size: 14, counts: { 1: [[50, 25]], 3: [[50, 14], [50, 34], [50, 54]] } },
 };
 
@@ -179,6 +193,45 @@ for (const ordinary of REVERSIBLE) {
 // prettier-ignore
 BETWEEN["chevron-reversed"] = {
   ...BETWEEN["chevron-reversed"],
-  points: [[28, 74], [72, 74], [50, 30]],
-  counts: { 6: { size: 12, points: [[26, 78], [50, 89], [74, 78], [38, 34], [62, 34], [50, 16]] } },
+  points: [[26, 76], [74, 76], [50, 30]],
+  counts: { 6: { size: 12, points: [[26, 78], [50, 89], [74, 78], [40, 28], [60, 28], [50, 16]] } },
+};
+
+// `between` overrides where a line's edge hits a charge, by ordinary and line; the rest falls
+// back to the plain ordinary's. The sinister bend and the reversed pall are mirrored from these.
+// prettier-ignore
+export const BETWEEN_LINED = {
+  bend: {
+    engrailed: { points: [[70, 26], [24, 72]] },
+    invected: { points: [[70, 26], [24, 72]] },
+    wavy: { points: [[70, 26], [24, 72]] },
+    indented: { points: [[70, 26], [24, 72]] },
+  },
+  chevron: {
+    embattled: { counts: { 6: { size: 10, points: [[16, 13], [50, 8], [84, 13], [40, 72], [60, 72], [50, 84]] } } },
+  },
+  "chevron-reversed": {
+    embattled: { points: [[26, 76], [74, 76], [50, 24]] },
+  },
+  pall: {
+    invected: { points: [[50, 8], [18, 56], [82, 56]] },
+    wavy: { points: [[50, 8], [18, 56], [82, 56]] },
+    indented: { points: [[50, 8], [18, 56], [82, 56]] },
+    embattled: { points: [[50, 8], [18, 56], [82, 56]] },
+  },
 };
+
+const mirrorX = (points) => points.map(([x, y]) => [100 - x, y]);
+const mirrorLined = (entry, flip) => ({
+  ...entry,
+  ...(entry.points && { points: flip(entry.points) }),
+  ...(entry.counts && {
+    counts: mapValues(entry.counts, (count) => ({ ...count, points: flip(count.points) })),
+  }),
+});
+BETWEEN_LINED["bend-sinister"] = mapValues(BETWEEN_LINED.bend, (entry) =>
+  mirrorLined(entry, mirrorX),
+);
+BETWEEN_LINED["pall-reversed"] = mapValues(BETWEEN_LINED.pall, (entry) =>
+  mirrorLined(entry, mirror),
+);

package/divisions.js

@@ -5,8 +5,12 @@ import plugin from "tailwindcss/plugin";
 import { FURS, TINCTURES } from "./data.js";
 import { furLayers } from "./furs.js";
 
-// Horizontal lines of partition pass through the fess point, as the cross and fess do.
-const FESS_POINT = "45%";
+// The fess point, in % down the shield: horizontal lines of partition pass through it, as the
+// cross and fess do.
+const FESS_POINT = 45;
+
+// The background-position that puts a tile FESS_POINT% high just below the fess point.
+const BASE_TILES = ((100 * FESS_POINT) / (100 - FESS_POINT)).toFixed(2);
 
 // Each division maps (first, second) tincture colours to background rules.
 const layer = (image) => ({ "background-image": image });
@@ -22,12 +26,64 @@ const stripes = (to, pieces) => (a, b) => {
   };
 };
 
+// How much of the corner-to-corner extent the shield covers: the base corner is cut away by the
+// border-radius of 0 0 50% 50% / 0 0 45% 45% and the 5:6 aspect ratio in grailwind.css. It runs
+// from the chief corner the bands start in to the tangent on the base curve.
+const BENDY_VISIBLE = (() => {
+  const [width, height] = [5, 6];
+  const [radiusX, radiusY] = [width / 2, 0.45 * height];
+  const [centreX, centreY] = [width / 2, height - radiusY];
+  const tangent = Math.sqrt((height * radiusX) ** 2 + (width * radiusY) ** 2);
+  return (width * height - height * centreX + width * centreY + tangent) / (2 * width * height);
+})();
+
+// Diagonal bands parallel to per bend, `pieces` equal ones across the visible part of the shield,
+// the last running to the edge. Explicit stops, not a repeating gradient, so a canton's square
+// corners don't show the first tincture again.
+const bendy = (to, pieces) => (a, b) => {
+  const stops = [];
+  for (let i = 0; i < pieces; i++) {
+    const start = i === 0 ? 0 : ((i * BENDY_VISIBLE * 100) / pieces).toFixed(2);
+    const end = i === pieces - 1 ? 100 : (((i + 1) * BENDY_VISIBLE * 100) / pieces).toFixed(2);
+    stops.push(`${i % 2 === 0 ? a : b} ${start}% ${end}%`);
+  }
+  return layer(`linear-gradient(to ${to}, ${stops.join(", ")})`);
+};
+
+// The direction of `to bottom right` on the shield (aspect-ratio 5 / 6 in grailwind.css), so
+// chevronny's lines run parallel to per chevron's, the field's diagonals.
+const CHEVRON_ANGLE = 180 - (Math.atan(6 / 5) * 180) / Math.PI;
+
+// A half box is 75% as long as the whole along this angle (45/sqrt(61) over 60/sqrt(61)).
+// Plain, the sinister half sits over a full-width dexter layer, which hides the centre seam.
+// With a fur the layers can't overlap, as the transparent stripes would show the layer below.
+const chevronny = (pieces) => (a, b, fur) => {
+  const stripe = (angle, length) =>
+    `repeating-linear-gradient(${angle}deg, ${a} 0 calc(${length}% / ${pieces}), ${b} 0 calc(${2 * length}% / ${pieces}))`;
+  const sinister = stripe(-CHEVRON_ANGLE, 100);
+
+  return fur
+    ? {
+        "background-image": [stripe(CHEVRON_ANGLE, 100), sinister].join(", "),
+        "background-size": "50% 100%",
+        "background-position": "left, right",
+        "background-repeat": "no-repeat",
+      }
+    : {
+        "background-image": [sinister, stripe(CHEVRON_ANGLE, 75)].join(", "),
+        "background-size": "50% 100%, 100% 100%",
+        "background-position": "right, left",
+        "background-repeat": "no-repeat",
+      };
+};
+
 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 through the fess point: first in chief.
-  "per-fess": (a, b) => layer(`linear-gradient(to bottom, ${a} ${FESS_POINT}, ${b} ${FESS_POINT})`),
+  "per-fess": (a, b) =>
+    layer(`linear-gradient(to bottom, ${a} ${FESS_POINT}%, ${b} ${FESS_POINT}%)`),
 
   // 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.
@@ -36,18 +92,55 @@ const DIVISIONS = {
   // 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%)`),
 
-  // Both diagonals, crossing at the centre like the saltire: first in chief and base.
-  // Gyronny's four tiles, with the top-right and bottom-left swapped.
+  "per-chevron": (a, b) =>
+    a === "transparent"
+      ? {
+          "background-image": [
+            `linear-gradient(to bottom right, ${a} 50%, ${b} 50%)`,
+            `linear-gradient(to bottom left, ${a} 50%, ${b} 50%)`,
+            `linear-gradient(${b}, ${b})`,
+          ].join(", "),
+          "background-size": "50% 50%, 50% 50%, 100% 15%",
+          "background-position": "left 70%, right 70%, bottom",
+          "background-repeat": "no-repeat",
+        }
+      : {
+          "background-image": [
+            `linear-gradient(to bottom right, ${a} 42.5%, transparent 42.5%)`,
+            `linear-gradient(to bottom left, ${a} 42.5%, ${b} 42.5%)`,
+          ].join(", "),
+        },
+
+  // Both lines of the saltire, from the top corners through the fess point to the flanks at 90%:
+  // first in chief and base. Four tiles, each half the width and 45% high, with each half-line
+  // as a tile's diagonal, and the base below them in the first tincture, 2px taller so Chromium
+  // leaves no seam where it meets them. Two strips under the tiles fill the sub-pixel seam where
+  // they meet: the first tincture down, the second across.
   "per-saltire": (a, b) => ({
-    "background-color": b,
     "background-image": [
       `linear-gradient(to bottom left, ${a} 50%, ${b} 50%)`,
       `linear-gradient(to bottom right, ${a} 50%, ${b} 50%)`,
       `linear-gradient(to bottom left, ${b} 50%, ${a} 50%)`,
       `linear-gradient(to bottom right, ${b} 50%, ${a} 50%)`,
+      `linear-gradient(${a}, ${a})`,
+      `linear-gradient(${a}, ${a})`,
+      `linear-gradient(${b}, ${b})`,
+    ].join(", "),
+    "background-size": [
+      ...Array(4).fill(`50% ${FESS_POINT}%`),
+      `100% calc(${100 - 2 * FESS_POINT}% + 2px)`,
+      "2px 100%",
+      "100% 2px",
+    ].join(", "),
+    "background-position": [
+      "left top",
+      "right top",
+      `right ${BASE_TILES}%`,
+      `left ${BASE_TILES}%`,
+      "bottom",
+      "center",
+      `center ${FESS_POINT}%`,
     ].join(", "),
-    "background-size": "50% 50%",
-    "background-position": "left top, right top, right bottom, left bottom",
     "background-repeat": "no-repeat",
   }),
 
@@ -56,14 +149,15 @@ const DIVISIONS = {
   // With a fur, the bands can't overlap, or the fur's transparent half shows the band below.
   quarterly: (a, b, fur) => ({
     "background-image": `linear-gradient(to right, ${a} 50%, ${b} 50%), linear-gradient(to right, ${b} 50%, ${a} 50%)`,
-    "background-size": `100% ${FESS_POINT}, 100% ${fur ? `calc(100% - ${FESS_POINT})` : "100%"}`,
+    "background-size": `100% ${FESS_POINT}%, 100% ${fur ? `calc(100% - ${FESS_POINT}%)` : "100%"}`,
     "background-position": fur ? "top, bottom" : "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 of eight: quarterly and per saltire, all through the fess point. The first tincture
+  // is in the gyron just dexter of the top line. Per saltire's four tiles, then the base below
+  // them split per pale, 2px taller so no seam shows. The background colour fills any sub-pixel
+  // seam between tiles.
   gyronny: (a, b) => ({
     "background-color": b,
     "background-image": [
@@ -71,9 +165,19 @@ const DIVISIONS = {
       `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%)`,
+      `linear-gradient(to right, ${b} 50%, ${a} 50%)`,
+    ].join(", "),
+    "background-size": [
+      ...Array(4).fill(`50% ${FESS_POINT}%`),
+      `100% calc(${100 - 2 * FESS_POINT}% + 2px)`,
+    ].join(", "),
+    "background-position": [
+      "left top",
+      "right top",
+      `right ${BASE_TILES}%`,
+      `left ${BASE_TILES}%`,
+      "bottom",
     ].join(", "),
-    "background-size": "50% 50%",
-    "background-position": "left top, right top, right bottom, left bottom",
     "background-repeat": "no-repeat",
   }),
 
@@ -83,22 +187,42 @@ const DIVISIONS = {
   "barry-of-ten": stripes("bottom", 10),
   paly: stripes("right", 6),
   "paly-of-eight": stripes("right", 8),
+
+  // Bendy has the first tincture in the sinister chief corner, bendy sinister in the dexter.
+  bendy: bendy("bottom left", 6),
+  "bendy-of-eight": bendy("bottom left", 8),
+  "bendy-sinister": bendy("bottom right", 6),
+  "bendy-sinister-of-eight": bendy("bottom right", 8),
+
+  // The first tincture in the chief corners.
+  chevronny: chevronny(6),
+  "chevronny-of-eight": chevronny(8),
+
+  // 5 across and 6 down, the first tincture in the dexter chief square. Conic starts at the top.
+  // The repeat must be explicit, as with stripes.
+  chequy: (a, b) => ({
+    "background-image": `conic-gradient(${b} 0 25%, ${a} 0 50%, ${b} 0 75%, ${a} 0)`,
+    "background-size": "40% calc(100% / 3)",
+    "background-repeat": "repeat",
+  }),
 };
 
 // A division's background rules as one { image, size, position, repeat } per layer.
 const toLayers = (rules) => {
-  return rules["background-image"].split(/, (?=linear-gradient)/).map((gradient, i) => {
-    const size = (rules["background-size"] ?? "100% 100%").split(", ");
-    const position = (rules["background-position"] ?? "0 0").split(", ");
-    const repeat = (rules["background-repeat"] ?? "no-repeat").split(", ");
-
-    return {
-      image: gradient,
-      size: size[i % size.length],
-      position: position[i % position.length],
-      repeat: repeat[i % repeat.length],
-    };
-  });
+  return rules["background-image"]
+    .split(/, (?=(?:repeating-)?(?:linear|conic)-gradient)/)
+    .map((gradient, i) => {
+      const size = (rules["background-size"] ?? "100% 100%").split(", ");
+      const position = (rules["background-position"] ?? "0 0").split(", ");
+      const repeat = (rules["background-repeat"] ?? "no-repeat").split(", ");
+
+      return {
+        image: gradient,
+        size: size[i % size.length],
+        position: position[i % position.length],
+        repeat: repeat[i % repeat.length],
+      };
+    });
 };
 
 // A division with one fur: the fur's part is left transparent, over the fur's own layers.

package/grailwind.css

@@ -135,10 +135,18 @@
   grid-auto-flow: row;
   grid-auto-rows: 1fr;
 
-  /* See per-pale. */
-  &:is(.escutcheon, .escutcheon *) > * {
-    position: relative;
-    contain: layout;
+  /* On a shield, two parts split at the fess point, FESS_POINT in divisions.js.
+   * More parts stay equal. */
+  &:is(.escutcheon, .escutcheon *) {
+    &:has(> :last-child:nth-child(2)) {
+      grid-template-rows: 45fr 55fr;
+    }
+
+    /* See per-pale. */
+    & > * {
+      position: relative;
+      contain: layout;
+    }
   }
 }
 
@@ -155,10 +163,15 @@
     --outer-inset: 0px;
   }
 
-  /* See per-pale. */
-  &:is(.escutcheon, .escutcheon *) > * {
-    position: relative;
-    contain: layout;
+  /* On a shield, split at the fess point, as per-fess. */
+  &:is(.escutcheon, .escutcheon *) {
+    grid-template-rows: 45fr 55fr;
+
+    /* See per-pale. */
+    & > * {
+      position: relative;
+      contain: layout;
+    }
   }
 }