From 9e5cdc8439c22e412ab8549f6ea13f1478defb7b Mon Sep 17 00:00:00 2001 From: Serena <94026305+serenakeyitan@users.noreply.github.com> Date: Fri, 28 Aug 2026 02:59:35 -0700 Subject: [PATCH 1/2] A table is a component, and scroll wrappers need a min-width to engage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #282 fixed the table treatment and #284 reverted it — not because the design was wrong, but because it was written into the overlay's injected reader CSS, which is being sunset. That revert said where it belonged: "the fix belongs in authoring/". This puts it there. Every cell is currently a tinted chip with a 3px gutter, which reads as a pile of blocks rather than a table: the gutters cut the columns, so there is no continuous edge to scan down, and rounded corners multiply with every row. Fills are also the worst case for this reader, where dark mode is a whole-page invert — a filled cell becomes a slab, while a hairline only changes colour. So a table is now a component: one hairline card, a rule under each row, nothing filled, a header in the muted ink rather than a tinted band, tabular numerals. All four styles give it their own values, the way they already do for the other nine. The three "tables inherit the overlay default" lines now point at that instead of at the layer that is going away. The scroll wrappers get the rule that was missing. components.md said to wrap a wide figure in diagram-box so it scrolls, but overflow-x on the wrapper does nothing while the child is width:100% — it can never overflow. It shrinks instead, and a 696-unit figure's labels land near 5px on a phone. The rule existed only in SKILL.md's responsive section, one file away from where figures are described. Co-Authored-By: Claude Opus 5 (1M context) --- authoring/structure/components.md | 27 +++++++++++++++++++++++++-- authoring/style/default.md | 3 ++- authoring/style/editorial.md | 3 ++- authoring/style/paper.md | 3 ++- authoring/style/technical.md | 1 + test/authoring.test.js | 3 ++- 6 files changed, 34 insertions(+), 6 deletions(-) diff --git a/authoring/structure/components.md b/authoring/structure/components.md index 44adf55..61c2751 100644 --- a/authoring/structure/components.md +++ b/authoring/structure/components.md @@ -38,8 +38,31 @@ scrolls it instead of squashing it. `data-tdoc-artifact` makes the whole block one comment anchor rather than leaving the reader to comment on fragments of its text. -**Table scroll** — the same idea for tables: `
` -around any table wide enough to overflow. +**Table** — one bordered card, ruled inside, with nothing filled. A hairline +under each row does the work of separating them; a header sits in the muted ink +rather than a tinted band, and numbers are tabular so a column lines up. + +```html +
+ …
+
+``` + +The shape matters more than it looks. Filling every cell and spacing them apart +turns a table into a pile of blocks: the gutters cut the columns, so the eye has +no continuous edge to scan down, and rounded corners multiply with every row. +Fills are also the worst case for this reader — dark mode is a whole-page +invert, so a filled cell becomes a slab where a hairline only changes colour. + +Rounding a table needs `border-collapse: separate` with `border-spacing: 0` and +`overflow: hidden` to clip; `collapse` will not round. + +**Scroll wrappers** — `tdoc-table-scroll` for a table, `diagram-box` for a +figure. Both are `overflow-x: auto`, and both need the child to have a +`min-width` or the wrapper never engages: an `svg` at `width: 100%` shrinks to +the column instead of overflowing it, and its labels land at a few pixels on a +phone. Give a wide figure a `min-width` that keeps its smallest type around +9px, and let it scroll. **Stat tile row** — a few numbers that carry an argument on their own. Three or four; a fifth is a table. diff --git a/authoring/style/default.md b/authoring/style/default.md index 7206654..9b60f2c 100644 --- a/authoring/style/default.md +++ b/authoring/style/default.md @@ -87,6 +87,7 @@ white with one pastel accent, and it draws any figure the content asks for. | Accent fill | Pink `fill:#f7d7d1 stroke:#e0a99e`, text `#b3503c`; or blue `fill:#dde7f9 stroke:#a9c0ee`, text `#26407a` | | Textured variant | Dot over the pink for a live state; diagonal hatch over the blue for a transformed one | | Stacked bar | Blue shades `#c4d4f5` / `#d4e0f8` / `#e8eefb` with `#a9c0ee` strokes and mono labels; a hatched segment marks a transformed part, a dashed baseline marks a limit | +| Table | `rule` hairline border, `rx:12` card; row rules in `rule`; header in `muted`, normal case, no fill | Solid pastel is the base and the texture is the *variant*, not the fill. Put the colour inside the pattern tile so the texture reads on top of it rather @@ -115,4 +116,4 @@ thing looks in this register. ## Style is visual only Governs how the page looks — never section numbering, language, tone, or -structure. Tables inherit the overlay default. Link generously. +structure. Tables take the treatment above. Link generously. diff --git a/authoring/style/editorial.md b/authoring/style/editorial.md index 6cbbf24..fc0f877 100644 --- a/authoring/style/editorial.md +++ b/authoring/style/editorial.md @@ -91,6 +91,7 @@ is a pointer, not a decoration, and it lands on one element. | Accent fill | `fill:#eef1fb stroke:#3a55f4`, text `#2200ff` | | Textured variant | Hatch in `#3a55f4` over the same fill; the green `#4ba181` is reserved for a positive outcome and never used as a second accent | | Stacked bar | Blues `#eef1fb` / `#dbe3fa` / `#c3d0f6` with `#b3bdc9` strokes | +| Table | `rule` hairline border, `rx:10` card; row rules in `rule`; header serif in `muted`, no fill | The underline that marks a term in prose has no figure equivalent. Inside a drawing, emphasis is the accent fill. @@ -110,5 +111,5 @@ requires, forbids, or limits any kind of visual. ## Style is visual only Governs how the page looks — never section numbering, language, tone, or -structure. Tables inherit the overlay's rounded-cell default. Link generously +structure. Tables take the treatment above. Link generously (the blue is this style's main accent). diff --git a/authoring/style/paper.md b/authoring/style/paper.md index e6b1bcc..e2f9087 100644 --- a/authoring/style/paper.md +++ b/authoring/style/paper.md @@ -92,6 +92,7 @@ only saturated thing on the page and it stays rationed. | Accent fill | `fill:#f4e3dc stroke:#e3c4b6`, text `#c15f3c` | | Textured variant | Sparse dot in `#e3c4b6` over the same fill | | Stacked bar | Paper tints `#f4efe7` / `#ece5d8` / `#dcd3c4` with `#c9bfae` strokes | +| Table | `rule` hairline border, `rx:6` card; row rules in `rule`; header small-caps in `muted`, no fill | Figure labels are the body sans, not the display serif — the serif is for headings, and inside a drawing it turns decorative. @@ -109,4 +110,4 @@ serif labels. ## Style is visual only Governs how the page looks — never section numbering, language, tone, or -structure. Tables inherit the overlay default. Link generously. +structure. Tables take the treatment above. Link generously. diff --git a/authoring/style/technical.md b/authoring/style/technical.md index 71e6714..99df4c2 100644 --- a/authoring/style/technical.md +++ b/authoring/style/technical.md @@ -131,6 +131,7 @@ the single thing the figure is about. | Accent fill | `fill:#fff5f3 stroke:#ff4b2e`, text `#ff4b2e` — **one node per figure** | | Textured variant | Diagonal hatch in `#ff4b2e` at 35% over the same fill | | Stacked bar | Greys `#f0f0f0` / `#e5e5e5` / `#d4d4d4` with `#a3a3a3` strokes; the segment under discussion takes the accent | +| Table | `rule` hairline border, square corners; row rules in `rule`; header mono in `muted`; figures tabular | Metric labels are mono here, including inside figures — a number set in the body sans reads as prose and gets skimmed. diff --git a/test/authoring.test.js b/test/authoring.test.js index 497e730..94ce63f 100644 --- a/test/authoring.test.js +++ b/test/authoring.test.js @@ -52,7 +52,8 @@ t('every style gives the same components a treatment', () => { // The swap is only real if each style answers for the same parts. A style // that skips one leaves that component undefined the moment it is selected. const parts = ['Container frame', 'Label chip', 'Numbered group', 'Description box', - 'Primary arrow', 'Secondary arrow', 'Accent fill', 'Textured variant', 'Stacked bar']; + 'Primary arrow', 'Secondary arrow', 'Accent fill', 'Textured variant', 'Stacked bar', + 'Table']; for (const entry of ['default', 'technical', 'paper', 'editorial']) { const text = read(`authoring/style/${entry}.md`); const missing = parts.filter(part => !text.includes(part)); From 07163f0e2ee21810eb8483de8c1f29fef9110c13 Mon Sep 17 00:00:00 2001 From: Serena <94026305+serenakeyitan@users.noreply.github.com> Date: Fri, 28 Aug 2026 03:04:23 -0700 Subject: [PATCH 2/2] The table component has to clear the cell fill, not only its borders MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Writing the ruled-card treatment into a doc left every cell filled. The rule set border and padding but declared no background, so the reader's :where(body th, td) { background: var(--td-surface) } went on applying — the borders changed and the fill did not, which looks like the treatment silently not landing. Measured on the published page: 0.2% of the table area was white before, 89.4% after adding background: transparent. Co-Authored-By: Claude Opus 5 (1M context) --- authoring/structure/components.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/authoring/structure/components.md b/authoring/structure/components.md index 61c2751..c0bcc4a 100644 --- a/authoring/structure/components.md +++ b/authoring/structure/components.md @@ -55,7 +55,9 @@ Fills are also the worst case for this reader — dark mode is a whole-page invert, so a filled cell becomes a slab where a hairline only changes colour. Rounding a table needs `border-collapse: separate` with `border-spacing: 0` and -`overflow: hidden` to clip; `collapse` will not round. +`overflow: hidden` to clip; `collapse` will not round. Clear the cell fill +explicitly — the reader supplies one, and a rule that sets only borders and +padding leaves it in place, so the card comes out filled anyway. **Scroll wrappers** — `tdoc-table-scroll` for a table, `diagram-box` for a figure. Both are `overflow-x: auto`, and both need the child to have a