🐟 Tuna

[{"_1":2,"_295":-5,"_296":-5},"loaderData",{"_3":4,"_92":93,"_201":202,"_294":-5},"root",{"_5":6,"_33":34,"_59":60,"_90":91},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":26,"_29":30,"_31":32},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_selection_ai","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","f88763ebe1fa799dcdc845c6fda6450c9e8d43cf","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","c7de7de11d2fa3884730f0fa9fd384f8","clerkState",{"_61":62},"__internal_clerk_state",{"_63":64,"_65":44,"_66":67,"_68":67,"_69":26,"_70":67,"_71":67,"_72":67,"_73":67,"_74":67,"_75":67,"_76":67,"_77":67,"_78":79,"_88":26,"_89":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_80":26,"_81":67,"_82":83,"_84":67,"_85":44,"_86":26,"_87":67},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_94":95,"_96":97,"_95":98,"_196":-5,"_197":-5,"_198":199,"_132":133,"_140":141,"_101":102,"_99":100,"_120":-7,"_51":52,"_200":26},"type","val","author","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7",{"_99":100,"_96":97,"_101":102,"_103":104,"_105":-5,"_106":107,"_108":109,"_110":111,"_112":113,"_114":26,"_115":113,"_116":117,"_118":119,"_120":121,"_122":26,"_123":91,"_124":32,"_125":126,"_127":32,"_128":32,"_129":32,"_130":-5,"_20":131,"_136":-5,"_137":-7,"_138":139,"_140":141,"_142":143},"name","caviar","valNameId","7c1c9c20-0aeb-11ef-935d-cab58f78796a","parentFolderId","97041b86-1463-11ef-b85c-cab58f78796a","isOwned","privacy","public","readme","Simple CSS Vars library\n\n```tsx\nimport { caviar } from \"https://esm.town/v/jxnblk/caviar\";\n\nconst vars = caviar({\n dark: {\n text: \"#000\",\n bg: \"#fff\",\n },\n light: {\n text: \"#fff\",\n bg: \"#000\",\n },\n});\n```\n\n```tsx\n// JSX example\n

\n \n Hello\n \n

\n```\n\nCan also be used for non-dynamic CSS vars\n\n```tsx\nimport { caviar } from \"https://esm.town/v/jxnblk/caviar\";\n\nconst vars = caviar({\n blue: \"#0cf\",\n});\n\n//

\n```\n\nTests: https://www.val.town/v/jxnblk/caviar_tests\n\n## TODO\n\n- [ ] Fallback for missing mode keys","valType","script","currentVersion","a6a07e1c-0aff-11ef-88ef-cab58f78796a","legacyPrivate","id","code","export function caviar(obj: any) {\n const result: any = {\n style: {},\n };\n for (const [key, val] of Object.entries(obj)) {\n if (key === \"style\") {\n throw new Error(`Cannot use reserved key: '${key}'`);\n }\n if (typeof val === \"object\") {\n createMode(result, key, val);\n } else {\n const varKey = `--${key}`;\n const varVal = `var(${varKey})`;\n result[key] = varVal;\n result.style[varKey] = val;\n }\n }\n return result;\n}\n\nfunction createMode(result: any, mode: string, obj: any) {\n result.style[mode] = {};\n for (const [key, val] of Object.entries(obj)) {\n const varKey = `--${key}`;\n const varVal = `var(${varKey})`;\n result[key] = varVal;\n result.style[mode][varKey] = val;\n }\n}","createdAt",["D",1714927860024],"version",13,"currentUserHasLiked","likeCount","forkCount","referenceCount",4,"dependencyCount","commentCount","prCount","mergedPr",{"_132":133,"_134":135},"handle","jxnblk","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZmtHZzA2Z3F0dEJXNHQ4S1hpYWdPZ0N0YU4ifQ","forkedVal","interval","slug","jxnblk/caviar","description","Simple CSS Vars library import { caviar } from \"https://esm.town/v/jxnblk/caviar\";\n\nconst vars = caviar({\n dark: {\n text: \"#000\",\n bg: \"#fff\",\n },\n light: {\n text: \"#fff\",\n bg: \"#000\",\n },\n}); // JSX example\n

\n \n Hello\n \n

Can also be used for non-dynamic CSS vars import { caviar } from \"https://esm.town/v/jxnblk/caviar\";\n\nconst vars = caviar({\n blue: \"#0cf\",\n});\n\n//

Tests: https://www.val.town/v/jxnblk/caviar_tests TODO [ ] Fallback for missing mode keys","versions",[144,147,151,155,159,163,167,171,175,179,182,186,189,193],{"_120":121,"_145":-5,"_118":146,"_115":113},"prId",["D",1714927860024],{"_120":148,"_145":-5,"_118":149,"_115":150},12,["D",1714920135821],"aaa4c610-0aed-11ef-b27f-cab58f78796a",{"_120":152,"_145":-5,"_118":153,"_115":154},11,["D",1714920110075],"9b4c373e-0aed-11ef-b790-cab58f78796a",{"_120":156,"_145":-5,"_118":157,"_115":158},10,["D",1714920104658],"9811a8d8-0aed-11ef-b27f-cab58f78796a",{"_120":160,"_145":-5,"_118":161,"_115":162},9,["D",1714920093888],"91a6305e-0aed-11ef-a8a7-cab58f78796a",{"_120":164,"_145":-5,"_118":165,"_115":166},8,["D",1714920079797],"89401650-0aed-11ef-a734-cab58f78796a",{"_120":168,"_145":-5,"_118":169,"_115":170},7,["D",1714920055353],"7aae3d60-0aed-11ef-8f89-cab58f78796a",{"_120":172,"_145":-5,"_118":173,"_115":174},6,["D",1714920015185],"62bd13a2-0aed-11ef-9c03-cab58f78796a",{"_120":176,"_145":-5,"_118":177,"_115":178},5,["D",1714919647732],"87b83ae8-0aec-11ef-91dc-cab58f78796a",{"_120":126,"_145":-5,"_118":180,"_115":181},["D",1714919632928],"7ee5697c-0aec-11ef-91dc-cab58f78796a",{"_120":183,"_145":-5,"_118":184,"_115":185},3,["D",1714919571952],"5a8d3f0a-0aec-11ef-b9cd-cab58f78796a",{"_120":91,"_145":-5,"_118":187,"_115":188},["D",1714919562787],"5516b54c-0aec-11ef-b891-cab58f78796a",{"_120":190,"_145":-5,"_118":191,"_115":192},1,["D",1714919307697],"bd0b0f96-0aeb-11ef-8f8e-cab58f78796a",{"_120":32,"_145":-5,"_118":194,"_115":195},["D",1714919198765],"7c1d4ca6-0aeb-11ef-935d-cab58f78796a","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.references",{"_203":204,"_125":91,"_291":139,"_292":32,"_95":293},"referenceList",[205,260],{"_101":206,"_207":208},"5274fc02-0a5d-11ef-9ebc-cab58f78796a","initialData",{"_99":209,"_96":97,"_101":206,"_103":104,"_105":-5,"_106":107,"_108":-5,"_110":210,"_112":211,"_114":26,"_115":211,"_116":212,"_118":213,"_120":214,"_122":26,"_123":32,"_125":32,"_127":176,"_128":32,"_124":32,"_129":32,"_130":-5,"_20":215,"_136":-5,"_137":-7,"_140":216,"_217":-5,"_138":218,"_142":219},"tuna_example","http","b7840f50-12f7-11ef-a09b-cab58f78796a","// Example of using tuna and caviar with React (resrv) on Val Town\n// what does the save button do?\n\n/** @jsxImportSource https://esm.sh/react */\nimport { caviar } from \"https://esm.town/v/jxnblk/caviar\";\nimport resrv, { React } from \"https://esm.town/v/jxnblk/resrv\";\nimport { css } from \"https://esm.town/v/jxnblk/tuna\";\nimport ValBadge from \"https://esm.town/v/jxnblk/val_badge_react\";\n\n// Helper for using CSS vars\nconst vars = caviar({\n light: {\n text: \"#013\",\n bg: \"#fff\",\n highlight: \"#0cf\",\n },\n dark: {\n text: \"#fff\",\n bg: \"#013\",\n highlight: \"#0cf\",\n },\n});\n\nconst styles = css({\n body: { // special keyword\n fontFamily: \"Lexend, system-ui, sans-serif\",\n margin: 0,\n color: vars.text,\n backgroundColor: vars.bg,\n },\n container: {\n padding: \"32px\",\n margin: \"0 auto\",\n maxWidth: \"1024px\",\n },\n title: {\n margin: 0,\n fontSize: 48,\n lineHeight: \"1.0\",\n \"@media screen and (min-width: 768px)\": {\n fontSize: 64,\n },\n },\n input: {\n fontFamily: \"inherit\",\n fontSize: \"inherit\",\n lineHeight: \"1.5\",\n padding: \"2px 8px\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: vars.text,\n borderRadius: \"4px\",\n \"&:focus\": {\n borderColor: vars.highlight,\n },\n },\n colorModeButton: {\n position: \"fixed\",\n top: 0,\n right: 0,\n margin: \"16px\",\n },\n});\n\nconst modes = [\"light\", \"dark\"];\n\nfunction App({ script }) {\n const [mode, setMode] = React.useState(\"light\");\n\n const toggleMode = e => {\n e.preventDefault();\n const i = (modes.indexOf(mode) + 1) % modes.length;\n setMode(modes[i]);\n };\n\n return (\n <>\n \n 🐟 Tuna\n \n \n \n \n \n