/* Button designs, switchable from /content.json. * * theme.buttons in the JSON picks one of six: * * "stack" the design the site ships in -- a solid fill sitting on a * darker bar that the button presses down into. Nothing in this * file applies; the Tailwind utilities in the markup are the * whole design. * "riser" the same design, tuned -- the one that is meant to read as a * sibling of "stack" rather than a replacement. Same bar, 10px * corners instead of 12, a hairline keyline, and the motion the * original never had: the button rises off its bar on hover and * presses all the way flat onto it on click. * "edge" Precision Edge -- dimensional. Tighter corners, a lit top * lip, a hairline keyline, and a brand-tinted shadow the button * lifts out of on hover. (It once had a sheen crossing the face * as well; that is switched off -- see "the sheen" below.) * "capsule" Capsule -- flat. Full pill, no shadow at rest, a brand halo * that springs open on hover and a squish on press. * "sweep" Sweep -- flat and wide-cornered. Nothing at rest but the fill * and a hairline; on hover a deeper rung wipes across the face * from the left, under the label. * "ledger" Ledger -- rectangular and instrument-like, and what the site * wears now. 2px corners, no bar, no shadow, a hairline of the * fill's own colour taken down a rung, and no motion at all: * colour is the whole of the feedback. Brings the marketing * pages toward the logged-in workbench, where nothing is * rounded and depth is a border rather than a blur. * * /theme.js reads the value in and puts it on as data-buttons * before the first paint, so switching is a one-word edit to content.json and * a reload. "stack" (or a missing value) sets no attribute at all, so the * shipped design costs nothing. * * ---- how these hook onto the markup -------------------------------------- * There is no .btn class on this site: every button is a pair of elements * styled inline with Tailwind. A shell
carries `pb-1` and a dark * background -- that is the bar under the button -- and wraps a face * (,