/* button-dawn: the horizon button. A capsule of night sky with a low horizon across it. The sun is the knob: it carries the arrow and sits half risen out of the water on the right. The label is in the sky, a time kicker lies in the water under it like a reflection. At rest it is the minute before dawn: stars wink, a rose glow lies along the horizon, rays turn slowly behind the sun, the sun's road shimmers on the water, a spark runs the horizon to the sun, and now and then the arrow sinks into the sea and the next one drops in. Pointed at or focused, LIGHT FLOODS UP through the sky from the horizon, the stars go out and the sun climbs. Pressed (the go state, set by the host), the light SURGES UP out of the top of the capsule, a ring breaks off the sun, and the capsule SPLITS ALONG ITS HORIZON: the sky lifts off the sea and the gap between them is light that shoots past both ends. A page that lifts a section on the press can hang a .button-dawn-seam on that section's bottom edge, and the same light opens along it. CSS does all of the drawing and all of the motion. button-dawn.js is optional: the host's hold class, pausing off screen, where the seam opens from, and a landed event. See README.md. THEMING. The block below is every colour, face, size and timing this component takes from its host, declared at zero specificity (:where), so a page that declares the same names wins without !important, on :root or on any ancestor of the button. Every mix of two tokens is built on the element that paints it, never up here: a custom property that reads another one is resolved where it is DECLARED, so a mix on :root would freeze at the root's colours and ignore a palette set on a section (button-dusk's trap 1, the same here). --button-dawn-paint-* is a different tier: the component and its script write those (lit, go, the seam's starting point). Setting one by hand does nothing useful. */ :where(:root) { /* the sky, top to horizon */ --button-dawn-night: #0A1130; --button-dawn-indigo: #1D1B50; --button-dawn-violet: #4A2A6E; /* the dawn, horizon up: what floods in */ --button-dawn-rose: #B23F6A; --button-dawn-ember: #F07A3A; --button-dawn-gold: #FFB547; --button-dawn-light: #FFF3DA; /* the sun's core, the horizon under the sun, the split, the seam, the stars */ --button-dawn-water: #070B20; /* under the horizon */ /* words, arrow, ring */ --button-dawn-text: #FFFFFF; --button-dawn-kicker: #FFC98A; --button-dawn-arrow: #2B1338; /* on the sun */ --button-dawn-focus: #A1520B; /* the keyboard ring; it sits on the HOST's background */ --button-dawn-shadow: #10192E; /* the drop shadow, cast on the host's background */ /* faces. Hand the component yours: these defaults are only what any machine has. */ --button-dawn-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --button-dawn-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --button-dawn-stretch: 108%; /* the label's width axis; ignored by a face without one */ /* size */ --button-dawn-height: 70px; /* the capsule's least height; the sun's centre sits half of it in from the right */ --button-dawn-sun-size: 50px; /* the knob */ --button-dawn-water-depth: 20px; /* the horizon's height above the bottom edge; the kicker lies in it */ --button-dawn-min-width: 340px; --button-dawn-max-width: 520px; --button-dawn-flare: 84px; /* how far the split's light shoots past each end */ /* time */ --button-dawn-cycle: 6.4s; /* one pass of the spark, the stars, the glow's breath and the arrow */ --button-dawn-spin: 64s; /* one turn of the rays */ --button-dawn-flood-time: 760ms; /* the light flooding up on hover and focus */ --button-dawn-go-time: 1200ms; /* the surge. A plain time in ms or s, not calc(): the script reads it too */ } /* ---------- the capsule ---------- Stacking, back to front: the surge (behind everything, so it shows only above the capsule), the sky, the sun, the sea (IN FRONT of the sun: that is what makes it half risen), the split, the kicker, and the label over all of it. */ .button-dawn { /* the two switches every layer reads. lit: pointed at, focused, or going. go: going. */ --button-dawn-paint-lit: 0; --button-dawn-paint-go: 0; /* a