grailwind 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -6,6 +6,25 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [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 +157,8 @@ 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.7.0...HEAD
+[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,8 +57,8 @@ 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,

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.

package/divisions.js

@@ -22,6 +22,57 @@ 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%)`),
@@ -36,18 +87,39 @@ 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%)`),
 
+  "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 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.
+  // Gyronny's four tiles, with the top-right and bottom-left swapped. Two strips under them fill
+  // the sub-pixel seam where the tiles 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(${b}, ${b})`,
     ].join(", "),
-    "background-size": "50% 50%",
-    "background-position": "left top, right top, right bottom, left bottom",
+    "background-size": "50% 50%, 50% 50%, 50% 50%, 50% 50%, 2px 100%, 100% 2px",
+    "background-position": "left top, right top, right bottom, left bottom, center, center",
     "background-repeat": "no-repeat",
   }),
 
@@ -83,22 +155,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;
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grailwind",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "scripts": {
     "build": "tailwindcss -i docs/app.css -o docs/site.css",
     "dev": "tailwindcss -i docs/app.css -o docs/site.css --watch",
@@ -9,7 +9,8 @@
     "dev:watch": "tailwindcss -i docs/app.css -o docs/site.css --watch=always & python3 -m http.server ${PORT:-8000} -d docs",
     "lint": "eslint .",
     "format": "prettier --write .",
-    "format:check": "prettier --check ."
+    "format:check": "prettier --check .",
+    "prepare": "husky"
   },
   "keywords": [
     "tailwindcss",
@@ -26,10 +27,12 @@
   "license": "MIT",
   "description": "Heraldic blazon for Tailwind CSS: tinctures, divisions, ordinaries and charges",
   "devDependencies": {
-    "@grailwind/eslint-plugin": "^0.1.0-beta.2",
+    "@grailwind/eslint-plugin": "^0.1.0-beta.3",
     "@html-eslint/parser": "^0.67.0",
     "@tailwindcss/cli": "^4.3.3",
     "eslint": "^10.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.6.0",
     "playwright": "~1.64.1",
     "prettier": "^3.9.10",
     "tailwindcss": "^4.3.3"
@@ -71,5 +74,8 @@
   },
   "bugs": {
     "url": "https://github.com/pafirmin/grailwind/issues"
+  },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
   }
 }