[{"_1":2,"_169":-5,"_170":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","4049fd8e684531193de8d0777b9ab11a81dae27e","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","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_146":147,"_166":167,"_168":-5},"handle","vex","name","css-theme-color-gen","path","main.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":-5,"_110":-5,"_12":111,"_112":-5,"_113":20,"_114":-5,"_115":32,"_14":116,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_23":126,"_129":130,"_132":133,"_145":20},"id","5302ece0-3c9f-11f0-8556-9e149126039e","createdAt",["D",1748531543863],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","2ea5a680-3c9f-11f0-8f77-839c97346035","pinnedFileId","pinPreview","screenshotVersion","likeCount","a13f0eca-c113-46b6-826b-4ecd204b70c0","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_127":128},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeG03YlNDUVdUeERMZVpuNWh0RUdEY2NEODgifQ","org",{"_93":94,"_131":128,"_12":111},"avatar","branch",{"_134":135,"_95":43,"_101":136,"_137":102,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},"version",56,"5303230e-3c9f-11f0-8556-9e149126039e","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":148,"_95":98,"_149":150,"_151":-5,"_152":136,"_153":154,"_155":156,"_103":157,"_134":158,"_159":160,"_161":162,"_163":20,"_164":96,"_97":165},"55ca12fc-3d56-11f0-b53e-76b3cceeab13","fileId","530488e8-3c9f-11f0-8556-9e149126039e","parentId","branchId","branchVersion",45,"latest",true,["D",1748610146419],42,"fileType","http","content","import chroma from \"npm:chroma-js\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\nlet cache = new Map();\n\napp.get(\"/\", (c) => {\n if (cache.has(c.req.url)) {\n return c.body(cache.get(c.req.url), {\n headers: {\n \"Content-Type\": \"text/css\",\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n try {\n decodeURI(c.req.url);\n } catch (e) {\n c.status(400);\n return c.text(`Invalid URL. If you are using percent sign (\"%\"), \\\n please replace them with the words \"percent\" or \"pct\", since it interferes with URI encoding.`);\n }\n\n const {\n hsl,\n rgb,\n color: colorString,\n \"alphas-generated\": alphasGenerated = \"10\",\n name,\n style = \"tailwind\",\n \"luminance-range-size\": luminanceRangeSize = \"100\",\n \"output-color-space\": outputColorSpace = \"oklab\",\n } = c.req.query();\n\n if (!name) {\n c.status(400);\n return c.text(\n `The \"name\" query parameter is required. Please specify the name of the variable you want to use.`,\n );\n }\n const supportedOutputColorSpaces = [\"rgb\", \"hsl\", \"lab\", \"lch\", \"oklab\", \"oklch\"];\n if (!supportedOutputColorSpaces.includes(outputColorSpace)) {\n c.status(400);\n return c.text(\n `The \"${outputColorSpace}\" output color space is not recognized. \\\n The \"output-color-space\" query parameter must be one of the following: ${supportedOutputColorSpaces.join(\", \")}.`,\n );\n }\n\n if (!(hsl || rgb || colorString)) {\n c.status(400);\n return c.text(`At least one of the following query parameters must be specified: \"hsl\", \"rgb\", or \"color\".`);\n }\n // if 2 or more of them are true\n if (+hsl + +rgb + +colorString >= 2) {\n c.status(400);\n return c.text(\n `Multiple colors were specified; you may only have one of the following query parameters: \"hsl\", \"rgb\", or \"color\".`,\n );\n }\n if (+alphasGenerated && (+alphasGenerated < 0 || +alphasGenerated > 100)) {\n c.status(400);\n return c.text(`The \"alphas-generated\" query parameter must be between 0 and 100.`);\n }\n let color;\n if (hsl) {\n let hslColor = /(\\d+)(?:deg)?,\\s?(\\d+)(?:pct|percent)?,\\s?(\\d+)(?:pct|percent)?/.exec(hsl)?.slice(1);\n console.log(hslColor);\n if (!hslColor) {\n c.status(400);\n return c.text(`Invalid HSL color \"${hsl}\". HSL must be in the format \"<0-360>deg,<0-100>pct,<0-100>pct\" \\\n with \"deg\" and \"percent\"/\"pct\" being optional to specify.`);\n }\n let [h, s, l] = hslColor;\n color = chroma.hsl(+h, (+s) / 100, (+l) / 100);\n } else if (rgb) {\n let rgbColor = /(\\d+),\\s?(\\d+),\\s?(\\d+)/.exec(rgb)?.slice(1);\n if (!rgbColor) {\n c.status(400);\n return c.text(\n `Invalid RGB color \"${rgb}\". RGB must be in the format \"<0-255>,<0-255>,<0-255>\".`,\n );\n }\n let [r, g, b] = rgbColor;\n color = chroma([+r, +g, +b]);\n } else {\n if (!chroma.valid(colorString)) {\n c.status(400);\n return c.text(\n `Invalid color \"${colorString}\". Color must be something that chroma.js (https://gka.github.io/chroma.js/#chroma) supports, \\\n such as a hex code or a CSS color keyword like \"rebeccapurple\".`,\n );\n }\n color = chroma(colorString);\n if (color.alpha() !== 1) {\n c.status(400);\n return c.text(`\"${colorString}\" must have an alpha of 1. Please set the \"alpha\" query parameter instead.`);\n }\n }\n\n let cssOutput = \":root {\\n\";\n switch (style) {\n case \"tailwind\":\n [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].forEach((twSuffix, i) => {\n cssOutput += ` --${name}-${twSuffix}: ${color.luminance(twSuffix / 1000, \"lab\").css(outputColorSpace)};\\n`;\n if (+alphasGenerated) {\n for (let i = 0; i <= +alphasGenerated; i++) {\n cssOutput += ` --${name}-${twSuffix}-${i}: ${\n color\n .luminance(twSuffix / 1000, \"lab\")\n .alpha(i / +alphasGenerated)\n .css(outputColorSpace)\n };\\n`;\n }\n }\n });\n break;\n case \"luminance-range\":\n if (Number.isNaN(parseInt(luminanceRangeSize)) || +luminanceRangeSize < 0 || +luminanceRangeSize > 100) {\n c.status(400);\n return c.text(\n `Invalid luminance range size \"${luminanceRangeSize}\". Please specify a whole number between 0 and 100.`,\n );\n }\n\n for (let i = 0; i <= +luminanceRangeSize; i++) {\n cssOutput += ` --${name}-${i}: ${color.luminance(i / 100, \"lab\").css(outputColorSpace)};\\n`;\n if (+alphasGenerated) {\n for (let a = 0; a <= +alphasGenerated; a++) {\n cssOutput += ` --${name}-${i}-${i}: ${\n color\n .luminance(i / 100, \"lab\")\n .alpha(a / +alphasGenerated)\n .css(outputColorSpace)\n };\\n`;\n }\n }\n }\n break;\n default:\n c.status(400);\n return c.text(`Invalid style \"${style}\". Please specify either \"tailwind\" or \"luminance-range\".`);\n }\n cssOutput += \"}\";\n\n cache.set(c.req.url, cssOutput);\n return c.body(cssOutput, {\n headers: {\n \"Content-Type\": \"text/css\",\n \"Cache-Control\": \"public, max-age=31536000\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n});\n\nexport default app.fetch;","deleted","label",[98],"permalink","https://www.val.town/x/vex/css-theme-color-gen/code/main.tsx","extension","actionData","errors"]