bevel.css

Raised and bevelled controls: the fourth geometry family.

⚠️ NOT a reconstruction of shipped operating systems; those stay out of scope. This is one geometry option inside the kit's own themes, derived from each theme's own light and its own surfaces, and it is a fourth family beside flat, cut-corner and sheared.

🔴 A BEVEL ENCODES A LIGHT DIRECTION, SO IT CANNOT BE INVERTED, ONLY RE-LIT. Nothing here inverts anything. Each theme declares where its light comes from as --ov-light, tools/palette.py derives the rings from that declaration and gates them, and every value below arrives as a finished token. SUNKEN IS THE SAME TWO COLOURS ON THE OPPOSITE SIDES, which is what a well looks like under a fixed light: the wall facing the light is lit whether it faces out of the surface or into it. Swapping the colours without swapping the sides is what filter: invert(1) does, and it makes every button look pressed.

⭐ AND A BEVEL STATES AN AFFORDANCE. Raised means pressable. Sunken means a well that takes input. A bevel on something that is neither is lying, in exactly the way an ornament that encodes nothing is, so demo/audit.html checks it: every .ov-bevel must be operable and every .ov-bevel--well must be, or must contain, a control. The rule is enforced rather than stated, which is the only kind of rule this kit keeps.

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

.ov-bevel

⭐ The affordance paying off: a raised control that is pressable becomes a pressed one when you press it, using the SAME light. This is the one moment the whole treatment is for, and it is why the pair had to be derived rather than flipped.

Used on bevel.html, index.html, index.html.

.ov-bevel-show

No still yet.

Opt-in, for the demo. A control does not normally caption its own light.

Used on bevel.html.

.ov-rack

No still yet.

⚠️ Its faceplate needs a boundary or it is not there. With no bevel and no bolts, --ov-panel on true black leaves the plate at 1.1:1 against the field: a rack you cannot find the edge of. It gets the same answer the theme gives everything else, which is a flat block with a stated edge.

Used on bevel.html, index.html.