grailwind 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -4,6 +4,54 @@ 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).
 
+## [Unreleased]
+
+## [0.4.0] - 2026-11-03
+
+### Added
+
+- `grailwind/data` (experimental): the tinctures, metals and colours, furs,
+  ordinaries and their lines, charges, arrangements and points as plain data,
+  for tooling such as `@grailwind/eslint-plugin`. Its shape may change in any
+  minor release.
+- `@grailwind/eslint-plugin` 0.1.0-beta.0, a separate package: the rule of
+  tincture and charge structure, for JSX and HTML. Install with
+  `@grailwind/eslint-plugin@beta`. It knows engrailed, invected and fur
+  ordinaries, and counts furs by their ground (configurable).
+- `in-bend-sinister`: two or three charges in a line from sinister chief to
+  dexter base.
+- Engrailed and invected ordinaries, e.g. `fess-engrailed-or` and
+  `chief-invected-azure`. Browsers without `clip-path: shape()` draw them with
+  straight edges.
+- Furs: `ermine`, `ermines`, `erminois` and `pean`, on the field, on a charge,
+  or in a division (`per-pale-ermine-gules`).
+- Fur ordinaries, e.g. `chief-ermine` and `cross-engrailed-erminois`. They
+  aren't fimbriated.
+
+### Fixed
+
+- Five charges now default to 2, 1, 2 (in saltire). They were invisible on a
+  plain field, and piled up in a corner on an ordinary without five points.
+- An ordinary in a quarter no longer paints over the shield's own ordinary.
+
+## [0.3.0] - 2026-11-01
+
+### Added
+
+- Counterchanged ordinaries: `<ordinary>-counterchanged` swaps the tinctures
+  of a divided field, e.g. `per-pale-argent-gules chevron-counterchanged`.
+- Counterchanged charges: `counterchanged` on a charge, or on the `charges`
+  container for all of them.
+
+### Changed
+
+- The horizontal line of `per-fess-*` and `quarterly-*` fields now passes
+  through the fess point, 45% down the shield, where the fess and cross are
+  centred. It was at 50%.
+- Charges are centred with negative margins instead of `translate`, so
+  Tailwind's `translate-*` on a charge now moves it from its place.
+- `escutcheon` sets `contain: layout`.
+
 ## [0.2.0] - 2026-11-01
 
 ### Added
@@ -23,5 +71,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.4.0...HEAD
+[0.4.0]: https://github.com/pafirmin/grailwind/compare/v0.3.0...v0.4.0
+[0.3.0]: https://github.com/pafirmin/grailwind/compare/v0.2.0...v0.3.0
 [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/README.md

@@ -1,6 +1,6 @@
 # Grailwind CSS
 
-![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)
+![Eight coats of arms drawn with Grailwind: chevrons, quarters, fleurs-de-lis, a saltire, gyronny, a chief, a bend and a bordure](https://grailwind.dev/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:
@@ -15,10 +15,10 @@ arms, or style anything else, in the language heralds have used for 800 years:
 </div>
 ```
 
-That's *Azure, a chevron Or between three mullets Argent*: a blue shield, a
+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.
+**[Read the documentation](https://grailwind.dev/)** for every class, with live examples.
 
 > Grailwind is a light-hearted project at version 0.x, so class names may
 > still change.
@@ -47,24 +47,60 @@ 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`).
+  Tailwind's prefixes work as usual (`text-or`). There are also the furs `ermine`,
+  `ermines`, `erminois` and `pean`, which work in divisions too.
 - **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.
+  and more, with `fimbriated-*` for a narrow border, `fess-engrailed-or` and
+  the like for an engrailed or invected edge, `chief-ermine` and the like in a
+  fur, or `chevron-counterchanged` and the like on a divided field.
 - **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-*`.
+  number, `in-pale`, `in-fess`, `in-bend`, `in-bend-sinister`, `on` or `between`
+  the ordinary, or placed at a named point such as `in-dexter-chief`, sized
+  with `charge-size-*`, and `counterchanged` on a divided field.
 - **Your own charges:** any SVG, via `charge-[url(…)]`.
 
+## Linting
+
+For typos and clashing classes, use
+[`eslint-plugin-better-tailwindcss`](https://github.com/schoero/eslint-plugin-better-tailwindcss).
+It reads Grailwind's classes from your CSS entry file, so it flags `fess-ore` or
+`per-pale-or-or`, and catches two classes fighting over the same thing, such as
+`bend-sable bend-or`:
+
+```js
+// eslint.config.js
+import betterTailwindcss from "eslint-plugin-better-tailwindcss";
+
+export default [
+  {
+    plugins: { "better-tailwindcss": betterTailwindcss },
+    settings: { "better-tailwindcss": { entryPoint: "src/app.css" } },
+    rules: {
+      "better-tailwindcss/no-unknown-classes": "error",
+      "better-tailwindcss/no-conflicting-classes": "error",
+    },
+  },
+];
+```
+
+For the heraldry itself, such as the rule of tincture and charges outside a `charges`
+container, there is [`@grailwind/eslint-plugin`](packages/eslint-plugin) (beta).
+
+The plugin reads names from `grailwind/data`. That export is **experimental**: it's there for
+Grailwind's own tooling, and its shape may change in any minor release.
+
 ## Development
 
 ```sh
 npm install
-npm test            # checks both the default and strict builds
+npm test            # checks the default and strict builds, and the ESLint plugin
+npm run test:render # renders shields in Chromium and Firefox and checks their colours;
+                    # run `npx playwright install chromium firefox` first
+npm run format      # formats with Prettier; CI runs format:check
 npm run dev:watch   # rebuilds the docs site on change and serves it at http://localhost:8000
 ```
 

package/charges.js

@@ -2,6 +2,7 @@
  * Grailwind CSS: charges and their arrangement.
  */
 import plugin from "tailwindcss/plugin";
+import { POINTS, ROUNDELS } from "./data.js";
 
 const star = (cx, cy, r, points = 5) => {
   const coords = [];
@@ -30,42 +31,24 @@ const SHAPES = {
     <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.
+// prettier-ignore
 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]] },
+  5: { size: 22, points: [[27, 20], [73, 20], [50, 42], [32, 64], [68, 64]] },
   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"]);
 
+// prettier-ignore
 const ARRANGEMENTS = {
   "in-pale": {
     2: { size: 30, points: [[50, 24], [50, 66]] },
@@ -79,6 +62,10 @@ const ARRANGEMENTS = {
     2: { size: 28, points: [[30, 26], [70, 64]] },
     3: { size: 22, points: [[22, 16], [50, 45], [78, 74]] },
   },
+  "in-bend-sinister": {
+    2: { size: 28, points: [[70, 26], [30, 64]] },
+    3: { size: 22, points: [[78, 16], [50, 45], [22, 74]] },
+  },
 };
 
 const svgUrl = (shape) =>
@@ -96,9 +83,30 @@ const maskRules = (image) => ({
 const place = ([left, top], size) => ({
   left: `${left}%`,
   top: `${top}%`,
-  width: `var(--charge-size, ${size}%)`,
+  "--charge-width": `var(--charge-size, ${size}%)`,
 });
 
+// The field with its tinctures swapped, from the shield's division (see divisions.js).
+const COUNTERCHANGE = ["color", "image", "size", "position", "repeat"];
+const inheritCounterchange = Object.fromEntries(
+  COUNTERCHANGE.map((n) => [`--counterchange-${n}`, "inherit"]),
+);
+
+// A layer the size of the shield, as the escutcheon is the containing block
+// for fixed positioning. The charge's mask cuts it to shape.
+const counterchanged = {
+  ...inheritCounterchange,
+  "&::before": {
+    content: '""',
+    position: "fixed",
+    inset: "0",
+    ...inheritCounterchange,
+    ...Object.fromEntries(
+      COUNTERCHANGE.map((n) => [`background-${n}`, `var(--counterchange-${n})`]),
+    ),
+  },
+};
+
 const hasCount = (n) => `:has(> :nth-child(${n}):last-child)`;
 
 export default plugin(({ addUtilities, matchUtilities }) => {
@@ -124,17 +132,20 @@ export default plugin(({ addUtilities, matchUtilities }) => {
     inset: "var(--field-top, 0%) 0 0",
     // Above the chief, which is painted last, so charges can sit on it.
     "z-index": "1",
+    ...inheritCounterchange,
     "& > *": {
       position: "absolute",
       "aspect-ratio": "1",
-      translate: "-50% -50%",
+      // Centred with margins, not translate: a transform would stop a
+      // counterchanged charge's fixed layer from lining up with the shield.
+      width: "var(--charge-width)",
+      margin: "calc(var(--charge-width) / -2) 0 0 calc(var(--charge-width) / -2)",
       "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);
+      charges[`&:where(${hasCount(count)}) > :where(:nth-child(${i + 1}))`] = place(point, size);
     });
   }
   utilities[".charges"] = charges;
@@ -155,7 +166,7 @@ export default plugin(({ addUtilities, matchUtilities }) => {
     between[`& > :nth-child(${i})`] = {
       left: `var(--between-${i}-x)`,
       top: `var(--between-${i}-y)`,
-      width: "var(--charge-size, var(--between-size))",
+      "--charge-width": "var(--charge-size, var(--between-size))",
     };
   }
   utilities[".between"] = between;
@@ -168,11 +179,13 @@ export default plugin(({ addUtilities, matchUtilities }) => {
     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}%)`;
+        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}%))`,
+        "--charge-width": `var(--charge-size, var(--on-size, ${fallback?.size ?? 16}%))`,
       };
     }
   }
@@ -184,11 +197,17 @@ export default plugin(({ addUtilities, matchUtilities }) => {
         ? {
             left: `${left}%`,
             top: `var(--chief-points-y, ${top}%)`,
-            width: `var(--charge-size, var(--chief-points-size, ${POINT_SIZE}%))`,
+            "--charge-width": `var(--charge-size, var(--chief-points-size, ${POINT_SIZE}%))`,
           }
         : place([left, top], POINT_SIZE),
     };
   }
 
+  // On a charge, or on `charges` for all of them.
+  utilities[".counterchanged"] = {
+    ".charges > &": counterchanged,
+    "&.charges > *": counterchanged,
+  };
+
   addUtilities(utilities);
 });

package/data.js

@@ -0,0 +1,100 @@
+/*
+ * Grailwind data shared by the CSS plugins and tooling such as the ESLint plugin.
+ */
+
+export const METALS = ["or", "argent"];
+export const COLOURS = ["gules", "azure", "vert", "purpure", "sable"];
+export const TINCTURES = [...METALS, ...COLOURS];
+
+export const DIVISIONS = [
+  "per-pale",
+  "per-fess",
+  "per-bend",
+  "per-bend-sinister",
+  "quarterly",
+  "gyronny",
+];
+
+export const ORDINARIES = [
+  "pale",
+  "fess",
+  "bend",
+  "bend-sinister",
+  "chevron",
+  "cross",
+  "saltire",
+  "pall",
+  "chief",
+];
+
+export const CHARGES = [
+  "roundel",
+  "annulet",
+  "mullet",
+  "lozenge",
+  "billet",
+  "crescent",
+  "fleur-de-lis",
+];
+
+// Roundels have their own names by tincture.
+export const ROUNDELS = {
+  bezant: "or",
+  plate: "argent",
+  torteau: "gules",
+  hurt: "azure",
+  pellet: "sable",
+};
+
+// Lines of partition for an ordinary's edge, e.g. `fess-engrailed-or`.
+export const LINES = ["engrailed", "invected"];
+
+// Each fur's [ground, spot] tinctures.
+export const FURS = {
+  ermine: ["argent", "sable"],
+  ermines: ["sable", "argent"],
+  erminois: ["or", "sable"],
+  pean: ["sable", "or"],
+};
+
+// The points of the shield, as [left%, top%], for placing a single charge, e.g. `in-dexter-chief`.
+export 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],
+};
+
+// Plain-field arrangements of a `charges` container, besides `between` and `on`.
+export const ARRANGEMENTS = ["in-pale", "in-fess", "in-bend", "in-bend-sinister"];
+
+// Where charges go for "between", as [left%, top%], plus their size as % of width.
+// prettier-ignore
+export 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.
+// prettier-ignore
+export 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]] } },
+};

package/divisions.js

@@ -2,8 +2,11 @@
  * Grailwind CSS: field divisions as decoration.
  */
 import plugin from "tailwindcss/plugin";
+import { FURS, TINCTURES } from "./data.js";
+import { furLayers } from "./furs.js";
 
-const TINCTURES = ["or", "argent", "gules", "azure", "vert", "purpure", "sable"];
+// Horizontal lines of partition pass through the fess point, as the cross and fess do.
+const FESS_POINT = "45%";
 
 // Each division maps (first, second) tincture colours to background rules.
 const layer = (image) => ({ "background-image": image });
@@ -12,23 +15,23 @@ 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%)`),
+  // Horizontal split through the fess point: first in chief.
+  "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.
   "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%)`),
+  "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) => ({
+  // 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% 50%, 100% 100%",
-    "background-position": "top, top",
+    "background-size": `100% ${FESS_POINT}, 100% ${fur ? `calc(100% - ${FESS_POINT})` : "100%"}`,
+    "background-position": fur ? "top, bottom" : "top, top",
     "background-repeat": "no-repeat",
   }),
 
@@ -49,18 +52,80 @@ const DIVISIONS = {
   }),
 };
 
-export default plugin(({ addUtilities }) => {
+// 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],
+    };
+  });
+};
+
+// A division with one fur: the fur's part is left transparent, over the fur's own layers.
+const withFur = (division, first, second, theme) => {
+  const fur = FURS[first] ? first : second;
+  const paint = (t) => (t === fur ? "transparent" : `var(--color-${t})`);
+  const all = [
+    ...toLayers(DIVISIONS[division](paint(first), paint(second), true)),
+    ...furLayers(fur, theme),
+  ];
+  return Object.fromEntries(
+    ["image", "size", "position", "repeat"].map((p) => [
+      `background-${p}`,
+      all.map((layer) => layer[p]).join(", "),
+    ]),
+  );
+};
+
+// The field with its tinctures swapped, for counterchanged ordinaries to paint.
+const counterchange = (rules) =>
+  Object.fromEntries(
+    Object.entries(rules).map(([property, value]) => [
+      property.replace("background-", "--counterchange-"),
+      value,
+    ]),
+  );
+
+export default plugin(({ addUtilities, theme }) => {
   const utilities = {};
 
   for (const [division, background] of Object.entries(DIVISIONS)) {
     for (const first of TINCTURES) {
       for (const second of TINCTURES) {
-        if (first === second) continue;
+        if (first === second) {
+          continue;
+        }
+
+        const a = `var(--color-${first})`;
+        const b = `var(--color-${second})`;
+        utilities[`.${division}-${first}-${second}`] = {
+          ...background(a, b),
+          ...counterchange(background(b, a)),
+        };
+      }
+    }
+  }
 
-        utilities[`.${division}-${first}-${second}`] = background(
-          `var(--color-${first})`,
-          `var(--color-${second})`,
-        );
+  // One fur and one tincture; two furs can't each be kept to their own part.
+  for (const division of Object.keys(DIVISIONS)) {
+    for (const fur of Object.keys(FURS)) {
+      for (const tincture of TINCTURES) {
+        for (const [first, second] of [
+          [fur, tincture],
+          [tincture, fur],
+        ]) {
+          utilities[`.${division}-${first}-${second}`] = {
+            ...withFur(division, first, second, theme),
+            ...counterchange(withFur(division, second, first, theme)),
+          };
+        }
       }
     }
   }

package/furs.js

@@ -0,0 +1,78 @@
+/*
+ * Grailwind CSS: furs, as a tiled pattern of spots over a ground tincture.
+ */
+import plugin from "tailwindcss/plugin";
+import { FURS } from "./data.js";
+
+const SPOT = [
+  `<circle cx='0' cy='-8.5' r='1.9'/><circle cx='-3.4' cy='-5.6' r='1.9'/><circle cx='3.4' cy='-5.6' r='1.9'/>`,
+  `<path d='M0,-4.5 C0.8,-1 2.6,4 5,9.5 L2.1,7.6 L0,11 L-2.1,7.6 L-5,9.5 C-2.6,4 -0.8,-1 0,-4.5 Z'/>`,
+].join("");
+
+// A 5:6 tile, the shield's own shape, so whole tiles fill it: a spot at its centre, and quarters of one at each
+// corner that join up with the neighbouring tiles.
+const AT = [
+  [25, 30],
+  [0, 0],
+  [50, 0],
+  [0, 60],
+  [50, 60],
+];
+const tile = (fill) =>
+  `url("data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 60'><g fill='${fill}'>${AT.map(
+      ([x, y]) => `<g transform='translate(${x} ${y})'>${SPOT}</g>`,
+    ).join("")}</g></svg>`,
+  )}")`;
+
+// The spots are baked into an SVG, which can't read CSS variables, so they take the theme's
+// value at build time.
+const spots = (fur, theme) => tile(theme(`colors.${FURS[fur][1]}`));
+
+// Spots across the field, one per tile in each row.
+const ACROSS = 6;
+
+// A quarter of a tile up and left, so whole spots sit along the top and sides. A % position is a
+// share of (box - tile), which is (ACROSS - 1) tiles.
+const SHIFT = `${-100 / (4 * (ACROSS - 1))}%`;
+const FIELD = { size: `calc(100% / ${ACROSS}) auto`, position: `${SHIFT} ${SHIFT}` };
+
+// The layers under a fur in a divided field: the spots, then the ground.
+export const furLayers = (fur, theme) => {
+  const ground = `var(--color-${FURS[fur][0]})`;
+  return [
+    { image: spots(fur, theme), ...FIELD, repeat: "repeat" },
+    {
+      image: `linear-gradient(${ground}, ${ground})`,
+      size: "100% 100%",
+      position: "0 0",
+      repeat: "no-repeat",
+    },
+  ];
+};
+
+// A fur on its own, as on the field or an ordinary.
+export const furBackground = (fur, theme) => ({
+  "background-color": `var(--color-${FURS[fur][0]})`,
+  "background-image": spots(fur, theme),
+  "background-size": FIELD.size,
+  "background-position": FIELD.position,
+  "background-repeat": "repeat",
+});
+
+export default plugin(({ addUtilities, theme }) => {
+  const utilities = {};
+
+  for (const fur of Object.keys(FURS)) {
+    utilities[`.${fur}`] = {
+      ...furBackground(fur, theme),
+      // Two tiles across a charge, centred, so a whole spot sits in its middle.
+      ".charges > &": {
+        "background-size": "50% auto",
+        "background-position": "center",
+      },
+    };
+  }
+
+  addUtilities(utilities);
+});

package/grailwind.css

@@ -12,6 +12,7 @@
 @plugin "./divisions.js";
 @plugin "./ordinaries.js";
 @plugin "./charges.js";
+@plugin "./furs.js";
 
 @property --fimbriated {
   syntax: "*";
@@ -21,6 +22,26 @@
   syntax: "*";
   inherits: false;
 }
+@property --counterchange-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --counterchange-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --counterchange-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --counterchange-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --counterchange-repeat {
+  syntax: "*";
+  inherits: false;
+}
 
 /* ---------------------------------------------------------------------------
  * Tinctures
@@ -40,14 +61,31 @@
 
 /* ---------------------------------------------------------------------------
  * Bare tinctures
+ *
+ * The furs (`ermine` and the like) are in furs.js, as they need the theme's
+ * colours at build time.
  * ------------------------------------------------------------------------- */
-@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); }
+@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
@@ -97,6 +135,8 @@
   overflow: hidden;
   border-radius: 0 0 50% 50% / 0 0 45% 45%;
   box-shadow: 0 0 0 2px var(--color-sable);
+  /* The containing block for counterchanged charges' fixed layers. */
+  contain: layout;
 }
 
 /* ---------------------------------------------------------------------------

package/ordinaries.js

@@ -2,9 +2,10 @@
  * Grailwind CSS: ordinaries, e.g. `fess-or`.
  */
 import plugin from "tailwindcss/plugin";
+import { BETWEEN, FURS, ON, TINCTURES } from "./data.js";
+import { furBackground } from "./furs.js";
 
-const TINCTURES = ["or", "argent", "gules", "azure", "vert", "purpure", "sable"];
-
+// prettier-ignore
 const ORDINARIES = {
   pale: [[35, 0], [65, 0], [65, 100], [35, 100]],
   fess: [[0, 30], [100, 30], [100, 60], [0, 60]],
@@ -33,6 +34,10 @@ const polygon = (vertices) => `polygon(${vertices.map(point).join(", ")})`;
 
 const PSEUDO = { chief: "&::after" };
 
+// A y in % of the field, as % of the whole shield when a chief takes the top of it.
+const belowChief = (y) =>
+  y === 100 ? "100%" : `calc(${num(y)}% + var(--field-top, 0%) * ${num(1 - y / 100)})`;
+
 // 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.
@@ -99,6 +104,7 @@ const widenedPolygon = (vertices) => {
 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 });
+// prettier-ignore
 const BANDS = {
   pale: [band("x", 35, 65)],
   fess: [band("y", 30, 60)],
@@ -123,18 +129,29 @@ const BANDS = {
   ],
 };
 
-const DIRECTION = { x: "to right", y: "to bottom", "u-v": "to top right", "u+v": "to bottom right" };
+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");
+  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;
+    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;
   }
 };
 
@@ -152,40 +169,111 @@ const tilePosition = (start, size) => (size === 100 ? "0" : pct((start * 100) /
 
 const bands = (layers, tincture) => ({
   "background-image": layers
-    .map((l) => gradient(l, l.stripe ? "var(--fimbriation, transparent)" : `var(--color-${tincture})`))
+    .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)}`)
+    .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]] },
+// Lines of partition. Scallops are round on the 5:6 shield; below a chief the
+// box is shorter, so they are slightly squashed.
+const SCALLOP = 14;
+const SCALLOPS = { chevron: 10 };
+const DEPTH = 0.35;
+
+const at = ([x, y]) => point([(x * 100) / W, (y * 100) / H]);
+
+// Arcs along an edge, in real units: { to, r, sweep }.
+const arcs = (a, b, scallop, sweep) => {
+  const length = Math.hypot(b[0] - a[0], b[1] - a[1]);
+  const n = Math.max(1, Math.round(length / scallop));
+  const chord = length / n;
+  const depth = chord * DEPTH;
+  const r = (chord * chord) / 4 / (2 * depth) + depth / 2;
+  return Array.from({ length: n }, (_, i) => {
+    const t = (i + 1) / n;
+    return { to: [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t], r, sweep };
+  });
+};
+
+// Each line maps an edge to arcs; `inward` is the sweep that bulges into the ordinary.
+const LINES = {
+  engrailed: (a, b, scallop, inward) => arcs(a, b, scallop, inward),
+  invected: (a, b, scallop, inward) => arcs(a, b, scallop, inward === "cw" ? "ccw" : "cw"),
 };
 
-// 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 side = (a, b, p) => (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
+
+// Centre of the minor arc from a to b.
+const centre = (a, b, { r, sweep }) => {
+  const [dx, dy] = [b[0] - a[0], b[1] - a[1]];
+  const len = Math.hypot(dx, dy);
+  const k = Math.sqrt(Math.max(0, r * r - (len / 2) ** 2)) * (sweep === "cw" ? 1 : -1);
+  return [(a[0] + b[0]) / 2 - (k * dy) / len, (a[1] + b[1]) / 2 + (k * dx) / len];
+};
+
+// Where the arc a→v crosses the arc v→b, if it does. Two circles through v meet
+// again at v's reflection across the line between their centres.
+const crossing = (a, v, b, first, second) => {
+  const c1 = centre(a, v, first);
+  const c2 = centre(v, b, second);
+  const [dx, dy] = [c2[0] - c1[0], c2[1] - c1[1]];
+  const t = ((v[0] - c1[0]) * dx + (v[1] - c1[1]) * dy) / (dx * dx + dy * dy);
+  const p = [2 * (c1[0] + t * dx) - v[0], 2 * (c1[1] + t * dy) - v[1]];
+  const onArc = (from, to, c) => Math.sign(side(from, to, p)) === -Math.sign(side(from, to, c));
+  return Math.hypot(p[0] - v[0], p[1] - v[1]) > 1e-6 && onArc(a, v, c1) && onArc(v, b, c2)
+    ? p
+    : null;
+};
+
+const shape = (vertices, line, scallop) => {
+  const inward = signedArea(vertices) > 0 ? "ccw" : "cw";
+  const pts = vertices.map(real);
+  const edges = pts.map((a, i) => {
+    const j = (i + 1) % pts.length;
+    return onShieldEdge(vertices[i], vertices[j])
+      ? [{ to: pts[j] }]
+      : line(a, pts[j], scallop, inward);
+  });
+
+  // Where arcs cross at a corner, e.g. a chevron engrailed's peak, end both at the
+  // crossing; otherwise the loop beyond it is filled.
+  let start = pts[0];
+  edges.forEach((edge, i) => {
+    const last = edge.at(-1);
+    const first = edges[(i + 1) % edges.length][0];
+    if (!last.r || !first.r) {
+      return;
+    }
+    const from = edge.length > 1 ? edge.at(-2).to : pts[i];
+    const p = crossing(from, last.to, first.to, last, first);
+    if (!p) {
+      return;
+    }
+    last.to = p;
+    if (i === edges.length - 1) {
+      start = p;
+    }
+  });
+
+  const commands = edges
+    .flat()
+    .map(({ to, r, sweep }) =>
+      r
+        ? `arc to ${at(to)} of ${pct((r / W) * 100)} ${pct((r / H) * 100)} ${sweep}`
+        : `line to ${at(to)}`,
+    );
+  return `shape(from ${at(start)}, ${commands.join(", ")}, close)`;
 };
 
 const betweenVars = ({ size, points }) => {
@@ -208,7 +296,7 @@ const onVars = ({ size, counts }) => {
   return vars;
 };
 
-export default plugin(({ addUtilities }) => {
+export default plugin(({ addUtilities, theme }) => {
   const utilities = {};
 
   for (const tincture of TINCTURES) {
@@ -218,37 +306,93 @@ export default plugin(({ addUtilities }) => {
     };
   }
 
+  // Isolated, so an ordinary in a quarter paints under the shield's own ordinary.
+  // The chief's ::after stays unraised, so charges on it stay on top.
+  const ordinaryRules = (ordinary, pseudo) => ({
+    position: "relative",
+    isolation: "isolate",
+    ...(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",
+      ...(!PSEUDO[ordinary] && { "z-index": "1" }),
+      ...pseudo,
+    },
+  });
+
   for (const [ordinary, vertices] of Object.entries(ORDINARIES)) {
+    // Covers the whole shield, so the swapped field lines up with the real one,
+    // and the clip moves the ordinary below any chief instead.
+    utilities[`.${ordinary}-counterchanged`] = ordinaryRules(ordinary, {
+      inset: "0",
+      // Registered not to inherit, so a shield inside another can't pick up its swap.
+      ...Object.fromEntries(
+        ["color", "image", "size", "position", "repeat"].map((n) => [
+          `--counterchange-${n}`,
+          "inherit",
+        ]),
+      ),
+      "background-color": "var(--counterchange-color, transparent)",
+      "background-image": "var(--counterchange-image, none)",
+      "background-size": "var(--counterchange-size, auto)",
+      "background-position": "var(--counterchange-position, 0 0)",
+      "background-repeat": "var(--counterchange-repeat, repeat)",
+      "clip-path":
+        ordinary === "chief"
+          ? polygon(vertices)
+          : `polygon(${vertices.map(([x, y]) => `${pct(x)} ${belowChief(y)}`).join(", ")})`,
+    });
+
     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",
+      utilities[`.${ordinary}-${tincture}`] = ordinaryRules(ordinary, {
+        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),
+            }),
+      });
+      // Not fimbriated. Browsers without shape() keep the straight polygon.
+      for (const [name, line] of Object.entries(LINES)) {
+        utilities[`.${ordinary}-${name}-${tincture}`] = ordinaryRules(ordinary, {
           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),
-              }),
-        },
+          "background-color": `var(--color-${tincture})`,
+          "clip-path": [polygon(vertices), shape(vertices, line, SCALLOPS[ordinary] ?? SCALLOP)],
+        });
+      }
+    }
+
+    // A plain polygon, without the fimbriation vars, so fimbriated-* can't reach a fur ordinary.
+    for (const fur of Object.keys(FURS)) {
+      const pseudo = {
+        inset: ordinary === "chief" ? "0" : "var(--field-top, 0%) 0 0",
+        ...furBackground(fur, theme),
       };
+      utilities[`.${ordinary}-${fur}`] = ordinaryRules(ordinary, {
+        ...pseudo,
+        "clip-path": polygon(vertices),
+      });
+      for (const [name, line] of Object.entries(LINES)) {
+        utilities[`.${ordinary}-${name}-${fur}`] = ordinaryRules(ordinary, {
+          ...pseudo,
+          "clip-path": [polygon(vertices), shape(vertices, line, SCALLOPS[ordinary] ?? SCALLOP)],
+        });
+      }
     }
   }
 

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "grailwind",
-  "version": "0.2.0",
+  "version": "0.4.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"
+    "test": "node test/modes.mjs && npm test -w packages/eslint-plugin",
+    "test:render": "node test/render.mjs",
+    "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 ."
   },
   "keywords": [
     "tailwindcss",
@@ -18,10 +22,18 @@
   "license": "MIT",
   "description": "Heraldic blazon for Tailwind CSS: tinctures, divisions, ordinaries and charges",
   "devDependencies": {
+    "@grailwind/eslint-plugin": "^0.1.0-beta.0",
+    "@html-eslint/parser": "^0.67.0",
     "@tailwindcss/cli": "^4.3.3",
+    "eslint": "^10.14.0",
+    "playwright": "~1.64.1",
+    "prettier": "^3.9.10",
     "tailwindcss": "^4.3.3"
   },
   "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
   "style": "grailwind.css",
   "exports": {
     ".": {
@@ -31,13 +43,16 @@
     "./strict": {
       "style": "./strict.css",
       "default": "./strict.css"
-    }
+    },
+    "./data": "./data.js"
   },
   "files": [
+    "data.js",
     "grailwind.css",
     "divisions.js",
     "ordinaries.js",
     "charges.js",
+    "furs.js",
     "strict.css",
     "palette-reset.css",
     "CHANGELOG.md"
@@ -45,7 +60,7 @@
   "peerDependencies": {
     "tailwindcss": "^4.0.0"
   },
-  "homepage": "https://pafirmin.github.io/grailwind/",
+  "homepage": "https://grailwind.dev/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pafirmin/grailwind.git"