code.css

Code blocks, and the five-class highlighting vocabulary.

⚠️ THE KIT SHOWED NO SOURCE AT ALL UNTIL NOW. There was not one <pre> in the thirty demo pages or the five document pages: it teaches by showing working instruments. So this is a new surface, and it is styled from the token contract like every other one rather than being given its own palette.

🔴 EVERY COLOUR HERE IS A TOKEN GATED AT 4.5:1 AS TEXT.

The reference's first version coloured keywords and punctuation with --ov-line-strong. That token is gated at 3.0 because it is a BOUNDARY colour, the line between two surfaces, and it was never meant to be read. Measured against --ov-raised, the worst surface a code block lands on, it delivers 3.00 at worst and FAILS 4.5:1 IN NINE OF THE TEN THEMES; only vector passes, at 5.09. Code is text and has to be read like text.

Measured worst case across all ten themes, on --ov-raised: ink 9.00 · dim 6.41 · faint 4.50 · accent 4.50 · accent_2 4.65 All five pass. line-strong is not used here and must not be reintroduced; tools/highlight.py's selftest fails the build if it appears in this file.

src/code.css · 3 blocks · blocks that belong to a custom element are on that element's page

.ov-code

No still yet.

⭐ ov-tree's twisty, not a new one. The kit already has a vocabulary for open and closed, and a second one would be decoration without a rule.

Also styled in chrome.css, motion.css. Written into markup by src/ov-reveal.js, so an element sets it for you. Used on about.html, allocator.html, annunciator.html, ascii.html, aux.html, avatar.html, balance.html, baseline.html and 65 more.

.ov-example

No still yet.

⚠️ THE INSET IS WHAT MAKES IT AN OBJECT. Full-bleed, the block's border sits flush against the themed rows above and below it and reads as one more band in the stack, which is what "the code blocks get lost" meant: it was not the border being too quiet, it was the block having no margin to be separate in. The inset matches the page's own text column, so the block lines up with the prose that introduces the page rather than with the instrument grid.

Used on allocator.html, annunciator.html, ascii.html, aux.html, avatar.html, balance.html, baseline.html, bevel.html and 62 more.

.ov-tabs

Also styled in chrome.css. Written into markup by src/ov-tabs.js, so an element sets it for you. Used on allocator.html, annunciator.html, ascii.html, aux.html, avatar.html, balance.html, baseline.html, bevel.html and 64 more.