🐟 Tuna

// Example of using tuna and caviar with React (resrv) on Val Town // what does the save button do? /** @jsxImportSource https://esm.sh/react */ import { caviar } from "https://esm.town/v/jxnblk/caviar"; import resrv, { React } from "https://esm.town/v/jxnblk/resrv"; import { css } from "https://esm.town/v/jxnblk/tuna"; import ValBadge from "https://esm.town/v/jxnblk/val_badge_react"; // Helper for using CSS vars const vars = caviar({ light: { text: "#013", bg: "#fff", highlight: "#0cf", }, dark: { text: "#fff", bg: "#013", highlight: "#0cf", }, }); const styles = css({ body: { // special keyword fontFamily: "Lexend, system-ui, sans-serif", margin: 0, color: vars.text, backgroundColor: vars.bg, }, container: { padding: "32px", margin: "0 auto", maxWidth: "1024px", }, title: { margin: 0, fontSize: 48, lineHeight: "1.0", "@media screen and (min-width: 768px)": { fontSize: 64, }, }, input: { fontFamily: "inherit", fontSize: "inherit", lineHeight: "1.5", padding: "2px 8px", borderWidth: "1px", borderStyle: "solid", borderColor: vars.text, borderRadius: "4px", "&:focus": { borderColor: vars.highlight, }, }, colorModeButton: { position: "fixed", top: 0, right: 0, margin: "16px", }, }); const modes = ["light", "dark"]; function App({ script }) { const [mode, setMode] = React.useState("light"); const toggleMode = e => { e.preventDefault(); const i = (modes.indexOf(mode) + 1) % modes.length; setMode(modes[i]); }; return ( <> 🐟 Tuna

tuna_example