Material swatch convention v1.1: bicolor is a diagonal split on the 135° axis (was a vertical 2-sector pie); 3+ hard colours stay a camembert. Doc + French translation, test vectors, reference renderer, glossary, llms.txt

Author: BenGlut

docs/developers/material-swatch-playground.html

@@ -92,10 +92,12 @@ <h1>The material swatch — reference renderer</h1>
    ./material-swatch.md — keep the two in step.
    ═══════════════════════════════════════════════════════════════════════════ */
 
-// N colours, hard edges → N equal conic sectors, first colour at 12 o'clock,
-// clockwise. With N = 2 the boundary lands on the vertical axis, which is why
-// bicolor is a guaranteed vertical split and not a special case.
+// Hard-edged colours. Exactly TWO → a diagonal split on the 135° axis (first
+// colour top-left, hard edge at 50 %) — the ramp's hard-edged twin. THREE or
+// more → N equal conic sectors, first colour at 12 o'clock, clockwise. One
+// function, so every hard split (catalogue list or chip aspect) gets the rule.
 const pieSplit = colors => {
+  if (colors.length === 2) return `linear-gradient(${RAMP_ANGLE}, ${colors[0]} 50%, ${colors[1]} 50%)`;
   const step = 360 / colors.length;
   return `conic-gradient(${colors.map((c, i) => `${c} ${i * step}deg ${(i + 1) * step}deg`).join(', ')})`;
 };
@@ -154,7 +156,7 @@ <h1>The material swatch — reference renderer</h1>
   }
   if (isBicolor) {                                            // 9
     const [c1 = '#cccccc', c2 = '#ffffff'] = slots;
-    return pieSplit([c1, c2]);                                //   → vertical split
+    return pieSplit([c1, c2]);                                //   → diagonal split
   }
   return slots[0] || '#1c2030';                               // 10
 }
@@ -195,8 +197,8 @@ <h1>The material swatch — reference renderer</h1>
     note:'The luminance trap: an unnormalised #000000FF read as "light" puts the black logo on a black spool.',
     doc:{ online_color_list:['000000FF'] } },
 
-  { t:'Bicolor — chip aspect 252', rule:'rule 9 — 2 sectors ⇒ vertical split',
-    note:'Look at all five boxes: the boundary stays vertical on the circle, the square, the banner, the column and the clipped bar. That is what the angular geometry buys.',
+  { t:'Bicolor — chip aspect 252', rule:'rule 9 — diagonal split, 135°',
+    note:'Look at all five boxes: the hard edge runs top-right → bottom-left through the centre of the circle, the square, the banner, the column and the clipped bar — first colour top-left, like the ramp.',
     doc:{ color_r:224, color_g:36, color_b:36, color_r2:36, color_g2:99, color_b2:224,
           color_r3:0, color_g3:0, color_b3:0, id_aspect2:ASPECT.BICOLOR } },
   { t:'Tricolor — chip aspect 24', rule:'rule 8 — 3 sectors',
@@ -211,7 +213,7 @@ <h1>The material swatch — reference renderer</h1>
   { t:'Declared type: gradient', rule:'rule 2 — ramp 135°',
     doc:{ online_color_list:['e02424','f0a020','2463e0'], online_color_type:'gradient' } },
   { t:'Declared type: gradient, TWO colours', rule:'rule 2 — still a ramp',
-    note:'Deliberately NOT the vertical split: the catalogue asked for a ramp.',
+    note:'Same axis as the bicolor split, but blended: the catalogue asked for a ramp, not a hard edge.',
     doc:{ online_color_list:['e02424','2463e0'], online_color_type:'gradient' } },
   { t:'Declared type: conic_gradient', rule:'rule 1 — catalogue only, never on a chip',
     doc:{ online_color_list:['e02424','f0a020','22a06b','2463e0'], online_color_type:'conic_gradient' } },

docs/developers/material-swatch.md

@@ -13,42 +13,48 @@ protocol has yet to gain. The convention is written against `id_type` in
 general: nothing below reads the product type, so a swatch is produced the same
 way whatever the material is.
 
-It is normative. A bicolor filament that shows a vertical split in one app and a
-left-to-right ramp in another is a bug in whichever one departed from this page
+It is normative. A bicolor filament that shows a diagonal split in one app and a
+vertical one in another is a bug in whichever one departed from this page
 — not a matter of taste. If you cannot reproduce a rule exactly (a platform
 with no conic gradient, say), implement the closest equivalent described in
 [Non-CSS platforms](#non-css-platforms) and say so; do not invent a different
 picture.
 
-- **Convention version:** 1.0
+- **Convention version:** 1.1 — bicolor is a **diagonal** split (1.0 split it vertically)
 - **Reference renderer:** [`material-swatch-playground.html`](./material-swatch-playground.html) —
  open it in any browser, no server, no dependency. Every case, every box shape,
  live colour pickers, and the exact CSS it produces.
 
 ---
 
-## Two shapes, and only two
+## Three shapes, and only three
 
 | Shape | When | Geometry |
 |---|---|---|
-| **Camembert** (pie) | Every hard-edged material — bicolor, tricolor, any list of N colours | N equal conic sectors, first colour starting at **12 o'clock**, sweeping **clockwise** |
+| **Diagonal split** | Exactly **two** hard-edged colours — bicolor | Two halves along the **135°** axis, hard edge through the centre: first colour **top-left**, second **bottom-right** |
+| **Camembert** (pie) | **Three or more** hard-edged colours — tricolor, any list of N ≥ 3 | N equal conic sectors, first colour starting at **12 o'clock**, sweeping **clockwise** |
 | **Ramp** | Rainbow, and the catalogue's declared `gradient` type | A smooth linear ramp at **135°** — pointing to the bottom-right, so the first colour sits top-left |
 
-Said plainly: **everything is a camembert except a ramp**, and there is exactly
-one ramp angle in the whole system.
-
-**Bicolor is the guaranteed vertical split — and it is not a special case.** Two
-equal sectors put their boundary on the vertical axis, so a bicolor material shows
-a straight vertical edge on *any* box: a round swatch, a square tile, a wide
-thumbnail, a partially-filled bar. You get that for free by implementing the
-pie; you do not need a separate code path, and you must not introduce one that
-draws it mirrored.
-
-Why a pie rather than diagonal bands: sector boundaries are angular, measured
-from the box centre, so the picture stays recognisable whatever the box's aspect
-ratio. Why 135° for ramps: a ramp has no hard edge to place, so the angle is
-free — a diagonal sweep reads as a gradient instead of looking like a
-mis-rendered bicolor.
+Said plainly: **two hard colours split on the diagonal, more make a camembert,
+smooth colours make a ramp** — and there is exactly one angle in the whole system,
+135°, shared by the split and the ramp.
+
+**Bicolor is the diagonal split — the ramp's hard-edged twin.** Same axis, same
+order (first colour top-left), but a hard edge at 50 % instead of a blend. The
+edge runs top-right → bottom-left through the centre of *any* box: a round
+swatch, a square tile, a wide thumbnail, a frame around a photo, a
+partially-filled bar. Implement it once, in the function that splits a list of
+hard colours (N = 2 → diagonal, N ≥ 3 → pie), so every caller gets it; never draw
+it mirrored.
+
+Why a diagonal for two colours: a vertical split read as two separate objects
+standing side by side — on a thumbnail, and even more on the colour frame round a
+product photo, where the photo hid the centre and left a left bar and a right
+bar. A diagonal reads as one two-tone material. Why a pie from three colours up:
+sector boundaries are angular, measured from the box centre, so N sectors stay
+recognisable whatever the box's aspect ratio, where N diagonal bands would not.
+Why 135°: it is the one angle of the system — a bicolor and a two-colour ramp
+share the axis, and differ only by the hard edge.
 
 ---
 
@@ -74,7 +80,7 @@ authoritative `color_count`):
 
 | id | label | `color_count` | Shape |
 |---|---|---|---|
-| `252` | Bicolor | 2 | Camembert, 2 sectors → **vertical split** |
+| `252` | Bicolor | 2 | **Diagonal split**, 135° |
 | `24` | Tricolor | 3 | Camembert, 3 sectors |
 | `145` | Rainbow | 3 | Ramp, 135° |
 
@@ -115,14 +121,14 @@ Let `LIST` = `online_color_list` after [normalisation](#normalisation), `TYPE` =
 | # | Condition | Result |
 |---|---|---|
 | 1 | `LIST ≥ 2` and `TYPE == "conic_gradient"` | Smooth conic sweep, closing on the first colour |
-| 2 | `LIST ≥ 2` and `TYPE == "gradient"` | Ramp — **even on two colours**; the catalogue asked for a ramp, so it does not become a bicolor split |
-| 3 | `LIST ≥ 2` | **Camembert** of `LIST.length` sectors |
+| 2 | `LIST ≥ 2` and `TYPE == "gradient"` | Ramp — **even on two colours**; the catalogue asked for a ramp, so it does not become a hard bicolor split |
+| 3 | `LIST ≥ 2` | Hard split of `LIST`: **diagonal** when 2 colours, **camembert** of `LIST.length` sectors when 3 or more |
 | 4 | `LIST == 1` | Solid colour — **outranks the chip colour** |
 | 5 | aspect **Rainbow** *and* **Tricolor** | Ramp, 3 stops |
 | 6 | aspect **Rainbow** *and* **Bicolor** | Ramp, 2 stops |
 | 7 | aspect **Rainbow** | Ramp over `SLOTS`; 1 slot → solid; 0 slots → the 6-colour default |
 | 8 | aspect **Tricolor** | **Camembert**, 3 sectors over `SLOTS` (slot 3 missing → repeat slot 1) |
-| 9 | aspect **Bicolor** | **Camembert**, 2 sectors → **vertical split** |
+| 9 | aspect **Bicolor** | **Diagonal split**, 135°, over slots 1 and 2 |
 | 10 | otherwise | Solid slot 1; nothing at all → `#1c2030` |
 
 Defaults when an aspect carries no usable colour:
@@ -162,11 +168,11 @@ components are numbers.
 With `c1…cN` the normalised colours and `step = 360 / N`:
 
 ```css
-/* Camembert — rules 3, 8, 9 */
-conic-gradient(c1 0deg <step>deg, c2 <step>deg <2·step>deg, …)
+/* Diagonal split — exactly two hard colours: rule 3 with 2 colours, rule 9 */
+linear-gradient(135deg, c1 50%, c2 50%)
 
-/* Bicolor is that same expression with N = 2 — the guaranteed vertical split */
-conic-gradient(#e02424 0deg 180deg, #2463e0 180deg 360deg)
+/* Camembert — three or more hard colours: rule 3 with ≥ 3 colours, rule 8 */
+conic-gradient(c1 0deg <step>deg, c2 <step>deg <2·step>deg, …)
 
 /* Ramp — rules 2, 5, 6, 7. One angle for every ramp in the system. */
 linear-gradient(135deg, c1, c2, …)
@@ -186,10 +192,10 @@ Any implementation must reproduce these exactly.
 |---|---|
 | `{online_color_list:["FF5722"]}` | `#FF5722` |
 | `{online_color_list:["000000FF"]}` | `#000000` |
-| `{online_color_list:["e02424","2463e0"]}` | `conic-gradient(#e02424 0deg 180deg, #2463e0 180deg 360deg)` |
+| `{online_color_list:["e02424","2463e0"]}` | `linear-gradient(135deg, #e02424 50%, #2463e0 50%)` |
 | `{online_color_list:["e02424","2463e0","22a06b"]}` | `conic-gradient(#e02424 0deg 120deg, #2463e0 120deg 240deg, #22a06b 240deg 360deg)` |
 | `{online_color_list:["e02424","2463e0"],online_color_type:"gradient"}` | `linear-gradient(135deg, #e02424, #2463e0)` |
-| `{color_r:224,color_g:36,color_b:36,color_r2:36,color_g2:99,color_b2:224,id_aspect2:252}` | `conic-gradient(#e02424 0deg 180deg, #2463e0 180deg 360deg)` |
+| `{color_r:224,color_g:36,color_b:36,color_r2:36,color_g2:99,color_b2:224,id_aspect2:252}` | `linear-gradient(135deg, #e02424 50%, #2463e0 50%)` |
 | `{id_aspect1:145}` | `linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00cc00, #0000ff, #8b00ff)` |
 | `{}` | `#1c2030` |
 
@@ -229,7 +235,7 @@ alpha and expand shorthand before computing.
 
 ## Non-CSS platforms
 
-Flutter, SwiftUI, Android or any canvas renderer implements the same two shapes.
+Flutter, SwiftUI, Android or any canvas renderer implements the same three shapes.
 Angles are always measured the CSS way: **0° points up, angles increase
 clockwise.**
 
@@ -238,6 +244,10 @@ clockwise.**
  `SweepGradient` with `transform: GradientRotation(-pi/2)`. Do not approximate
  it with pie slices drawn as paths unless the tile is square — the sector
  boundaries must follow the box.
+- **Diagonal split** — the ramp's geometry with a hard edge at the middle:
+ `c1@0, c1@0.5, c2@0.5, c2@1` from the **top-left** to the **bottom-right**.
+ Flutter: `LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight,
+ colors: [c1, c1, c2, c2], stops: [0, .5, .5, 1])`.
 - **Ramp** — a linear gradient from the **top-left** corner to the
  **bottom-right**. Flutter: `Alignment.topLeft → Alignment.bottomRight`.
 - **Hard stops** — repeat each colour at both ends of its band

docs/glossary.md

@@ -34,7 +34,7 @@ owns the full story.
 | **Twin Tag** | The two chips of one spool, written together as a pair and kept identical for the spool's whole life — always counted as **one** spool. |
 | **Reference database** | The shared ID tables (brands, materials, aspects, types, diameters, units) served from `cdn.tigertag.io`, so a chip encoded by one tool reads identically in every other. See [Universal filament identity](./concepts/universal-filament-identity.md). |
 | **Aspect** | The reference-database field describing a filament's colour and finish; the [material swatch](./developers/material-swatch.md) is painted from it. |
-| **Material swatch** | The normative convention for turning a spool's colour *data* into the same *picture* on every surface — two shapes only, with a reference renderer to check an implementation against. See [The material swatch](./developers/material-swatch.md). |
+| **Material swatch** | The normative convention for turning a spool's colour *data* into the same *picture* on every surface — three shapes only (diagonal split, camembert, ramp), with a reference renderer to check an implementation against. See [The material swatch](./developers/material-swatch.md). |
 | **`.ttag` file** | The portable, offline interchange file carrying one or more inventory materials (TigerData, TigerData+, TigerTag or TigerTag+) between tools. See [the `.ttag` format](./developers/ttag-format.md). |
 | **Second life** | Re-encoding a chip for a refilled or re-purposed spool, or converting it to plain NDEF for any other NFC use — a chip should never become e-waste. See [Second life](./philosophy/second-life.md). |
 | **Smartphone bridge** | Using a phone (or a desktop reader) to identify a spool for a printer that has no RFID reader of its own. See [The smartphone bridge](./philosophy/smartphone-bridge.md). |