grailwind 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -6,6 +6,16 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.8.1] - 2026-11-13
+
+### Fixed
+
+- Counterchanged charges `on` a counterchanged ordinary showed the ordinary's
+  swapped field and vanished. They now show the field's own tinctures.
+- `chevronny-*` in a part of a split shield (a `per-pale` half, a `per-fess`
+  chief) broke at the centre line. It now follows the part, as `per-chevron`
+  does, and the arms meet.
+
 ## [0.8.0] - 2026-11-12
 
 ### Added
@@ -183,7 +193,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.8.0...HEAD
+[Unreleased]: https://github.com/pafirmin/grailwind/compare/v0.8.1...HEAD
+[0.8.1]: https://github.com/pafirmin/grailwind/compare/v0.8.0...v0.8.1
 [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

package/charges.js

@@ -149,17 +149,28 @@ const inheritCounterchange = Object.fromEntries(
   COUNTERCHANGE.map((n) => [`--counterchange-${n}`, "inherit"]),
 );
 
+// What a charge on a counterchanged ordinary is counterchanged against: the field's own
+// tinctures, handed down by the ordinary to `on` containers only.
+const inheritOnCounterchange = Object.fromEntries(
+  COUNTERCHANGE.map((n) => [`--on-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,
+  ...inheritOnCounterchange,
   "&::before": {
     content: '""',
     position: "fixed",
     inset: "0",
     ...inheritCounterchange,
+    ...inheritOnCounterchange,
     ...Object.fromEntries(
-      COUNTERCHANGE.map((n) => [`background-${n}`, `var(--counterchange-${n})`]),
+      COUNTERCHANGE.map((n) => [
+        `background-${n}`,
+        `var(--on-counterchange-${n}, var(--counterchange-${n}))`,
+      ]),
     ),
   },
 };
@@ -279,7 +290,8 @@ export default plugin(({ addUtilities, matchUtilities }) => {
       };
     }
   }
-  utilities[".on"] = on;
+  // Nested, so Tailwind keeps these apart from the per-count rules above.
+  utilities[".on"] = { "&": inheritOnCounterchange, ...on };
 
   for (const name of Object.keys(POINTS)) {
     utilities[`.in-${name}`] = { ".charges > &": atPoint(name) };

package/divisions.js

@@ -50,31 +50,36 @@ const bendy = (to, pieces) => (a, b) => {
   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.
+// Four tiles, each half the box, so the lines follow the box's own proportions: a part of the
+// shield is the whole one squeezed to fit, as per chevron's are. A tile's lines run parallel to its
+// diagonal, dexter tiles `to bottom right` and sinister ones `to bottom left`.
+// The period is 300/n of a tile's gradient line, which keeps a stripe's width on the whole shield.
+// A lower tile starts half a gradient line further on, so its lines continue the upper tile's.
+// Plain, the dexter and lower tiles overlap the others by 1px, hiding the seams. With a fur the
+// transparent stripes would show the tile beneath, so they butt.
 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 period = 300 / pieces;
+  const lowerStart = (period - (50 % period)) % period;
+  const stripe = (to, start) =>
+    `repeating-linear-gradient(to bottom ${to}, ${a} ${start}% ${start + period / 2}%, ${b} 0 ${start + period}%)`;
+  const overlap = fur ? "50%" : "calc(50% + 1px)";
+
+  return {
+    "background-image": [
+      stripe("left", 0),
+      stripe("left", lowerStart),
+      stripe("right", 0),
+      stripe("right", lowerStart),
+    ].join(", "),
+    "background-size": [
+      `50% 50%`,
+      `50% ${overlap}`,
+      `${overlap} 50%`,
+      `${overlap} ${overlap}`,
+    ].join(", "),
+    "background-position": "right top, right bottom, left top, left bottom",
+    "background-repeat": "no-repeat",
+  };
 };
 
 const DIVISIONS = {
@@ -225,21 +230,70 @@ const toLayers = (rules) => {
     });
 };
 
-// A division with one fur: the fur's part is left transparent, over the fur's own layers.
-const withFur = (division, first, second, theme) => {
+/**
+ * A division with one fur: the fur's part is left transparent, over the fur's own layers.
+ * @param {string} division The division's name.
+ * @param {string} first The first tincture or fur.
+ * @param {string} second The second tincture or fur; one of the two is a fur.
+ * @param {Function} theme Tailwind's theme function, for the spots' colour.
+ * @returns {{image: string, size: string, position: string, repeat: string}[]} The layers, top first.
+ */
+const furredLayers = (division, first, second, theme) => {
   const fur = FURS[first] ? first : second;
   const paint = (t) => (t === fur ? "transparent" : `var(--color-${t})`);
-  const all = [
+  return [
     ...toLayers(DIVISIONS[division](paint(first), paint(second), true)),
     ...furLayers(fur, theme),
   ];
-  return Object.fromEntries(
+};
+
+/**
+ * Layers joined into one comma-separated value per property.
+ * @param {{image: string, size: string, position: string, repeat: string}[]} layers
+ * @param {string} prefix The property prefix, such as "background" or "--field".
+ * @returns {Object<string, string>} `<prefix>-image`, `-size`, `-position` and `-repeat`.
+ */
+const joinLayers = (layers, prefix) =>
+  Object.fromEntries(
     ["image", "size", "position", "repeat"].map((p) => [
-      `background-${p}`,
-      all.map((layer) => layer[p]).join(", "),
+      `${prefix}-${p}`,
+      layers.map((layer) => layer[p]).join(", "),
     ]),
   );
-};
+
+/**
+ * A division with one fur, as background rules.
+ * @param {string} division The division's name.
+ * @param {string} first The first tincture or fur.
+ * @param {string} second The second tincture or fur; one of the two is a fur.
+ * @param {Function} theme Tailwind's theme function, for the spots' colour.
+ * @returns {Object<string, string>} The four background-* properties.
+ */
+const withFur = (division, first, second, theme) =>
+  joinLayers(furredLayers(division, first, second, theme), "background");
+
+/**
+ * The field's own layers as --field-* variables, for charges on a counterchanged ordinary.
+ * A background colour becomes a last opaque layer, as the variables carry no colour.
+ * @param {{image: string, size: string, position: string, repeat: string}[]} layers
+ * @param {string} [color] The division's background-color, if it has one.
+ * @returns {Object<string, string>} The four --field-* variables.
+ */
+const field = (layers, color) =>
+  joinLayers(
+    color
+      ? [
+          ...layers,
+          {
+            image: `linear-gradient(${color}, ${color})`,
+            size: "100% 100%",
+            position: "0 0",
+            repeat: "no-repeat",
+          },
+        ]
+      : layers,
+    "--field",
+  );
 
 // The field with its tinctures swapped, for counterchanged ordinaries to paint.
 const counterchange = (rules) =>
@@ -262,8 +316,10 @@ export default plugin(({ addUtilities, theme }) => {
 
         const a = `var(--color-${first})`;
         const b = `var(--color-${second})`;
+        const unswapped = background(a, b);
         utilities[`.${division}-${first}-${second}`] = {
-          ...background(a, b),
+          ...unswapped,
+          ...field(toLayers(unswapped), unswapped["background-color"]),
           ...counterchange(background(b, a)),
           "--field-first": a,
         };
@@ -279,9 +335,11 @@ export default plugin(({ addUtilities, theme }) => {
           [fur, tincture],
           [tincture, fur],
         ]) {
+          const layers = furredLayers(division, first, second, theme);
           // Only a tincture can be "of the first"; a fur first leaves it unset.
           utilities[`.${division}-${first}-${second}`] = {
-            ...withFur(division, first, second, theme),
+            ...joinLayers(layers, "background"),
+            ...field(layers),
             ...counterchange(withFur(division, second, first, theme)),
             ...(!FURS[first] && { "--field-first": `var(--color-${first})` }),
           };

package/grailwind.css

@@ -42,6 +42,42 @@
   syntax: "*";
   inherits: false;
 }
+@property --field-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --field-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --field-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --field-repeat {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-repeat {
+  syntax: "*";
+  inherits: false;
+}
 /* A field's first tincture. The escutcheon copies it to --the-first, which inherits,
  * so a canton's own field can't change it. */
 @property --field-first {

package/ordinaries.js

@@ -780,10 +780,20 @@ export default plugin(({ addBase, addUtilities, theme }) => {
       // The swapped field's tiles would wrap into the bordure's strips, so the bordure shows there.
       ...(chief && { "background-clip": "content-box" }),
     };
-    utilities[`.${ordinary}-counterchanged`] = ordinaryRules(ordinary, {
-      ...counterchanged,
-      "clip-path": chief ? plain : `polygon(${vertices.map(pointBelowChief).join(", ")})`,
-    });
+    // Charges on it are counterchanged against it, so they get the field's own tinctures.
+    utilities[`.${ordinary}-counterchanged`] = {
+      ...ordinaryRules(ordinary, {
+        ...counterchanged,
+        "clip-path": chief ? plain : `polygon(${vertices.map(pointBelowChief).join(", ")})`,
+      }),
+      "--on-counterchange-color": "transparent",
+      ...Object.fromEntries(
+        ["image", "size", "position", "repeat"].map((n) => [
+          `--on-counterchange-${n}`,
+          `var(--field-${n})`,
+        ]),
+      ),
+    };
 
     for (const [tincture, colour] of PAINTS) {
       utilities[`.${ordinary}-${tincture}`] = ordinaryRules(ordinary, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grailwind",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "scripts": {
     "build": "tailwindcss -i docs/app.css -o docs/site.css",
     "dev": "tailwindcss -i docs/app.css -o docs/site.css --watch",