cascivo

one data-theme attribute re-themes any subtree: the same Save and Cancel, nested scopes, tokens cascading

the whole product, verbatim

<style>[data-theme=brutalist]{--b:#f9f5e6;--f:#000;--a:#ed0;--r:0}[data-theme=dark]{--b:#223;--f:#eee;--a:#16d;--r:6px}[data-theme=warm]{--b:#fed;--f:#432;--a:#ea3;--r:12px}body{background:#f9f5e6;color:#000;padding:14px}p{font-size:9px;letter-spacing:2px;color:#c02}h1{font:900 26px Arial Black,sans-serif;margin:0}mark{background:#ed0}div{background:var(--b);color:var(--f);border:2px solid #000;box-shadow:3px 3px #000;border-radius:var(--r);padding:7px;margin-top:7px}div:before{content:'data-theme="'attr(data-theme)'"';display:block;margin-bottom:6px}b,a{padding:2px 7px;border:2px solid;border-radius:var(--r)}b{background:var(--a)}</style><h1>OWN YOUR <mark>THEME.</mark></h1><script>T=['brutalist','dark','warm']
h='';for(j=3;j--;)h='<div><b>Save</b> <a>Cancel</a>'+h+'</div>'
document.write(h+'<p>TAP A SCOPE · TOKENS CASCADE')
D=document.querySelectorAll('div');N=[2,0,1]
S=k=>D[k].dataset.theme=T[N[k]=-~N[k]%3]
D.forEach((d,k)=>S(k,d.onclick=e=>S(k,e.stopPropagation())))
setInterval(_=>S(++j%3),1e3)</script>

There are no comments or reactions on a tile. The tile is the statement — it runs, its bytes are above, and anything worth saying about it belongs where the change was made. Find its pull request on GitHub.