29:null 2a:["$","title",null,{"children":"Tamagui theme generator | Máté Homolya | Observable"}] 2f:T74b,palettes = ({ light: { blue: { blue1: "hsl(206, 100%, 99.2%)", blue2: "hsl(210, 100%, 98.0%)", blue3: "hsl(209, 100%, 96.5%)", blue4: "hsl(210, 98.8%, 94.0%)", blue5: "hsl(209, 95.0%, 90.1%)", blue6: "hsl(209, 81.2%, 84.5%)", blue7: "hsl(208, 77.5%, 76.9%)", blue8: "hsl(206, 81.9%, 65.3%)", blue9: "hsl(206, 100%, 50.0%)", blue10: "hsl(208, 100%, 47.3%)", blue11: "hsl(211, 100%, 43.2%)", blue12: "hsl(211, 100%, 15.0%)" }, gray: { gray1: "hsl(0, 0%, 99.0%)", gray2: "hsl(0, 0%, 97.3%)", gray3: "hsl(0, 0%, 95.1%)", gray4: "hsl(0, 0%, 93.0%)", gray5: "hsl(0, 0%, 90.9%)", gray6: "hsl(0, 0%, 88.7%)", gray7: "hsl(0, 0%, 85.8%)", gray8: "hsl(0, 0%, 78.0%)", gray9: "hsl(0, 0%, 56.1%)", gray10: "hsl(0, 0%, 52.3%)", gray11: "hsl(0, 0%, 43.5%)", gray12: "hsl(0, 0%, 9.0%)" } }, dark: { blue: { blue1: "hsl(212, 35.0%, 9.2%)", blue2: "hsl(216, 50.0%, 11.8%)", blue3: "hsl(214, 59.4%, 15.3%)", blue4: "hsl(214, 65.8%, 17.9%)", blue5: "hsl(213, 71.2%, 20.2%)", blue6: "hsl(212, 77.4%, 23.1%)", blue7: "hsl(211, 85.1%, 27.4%)", blue8: "hsl(211, 89.7%, 34.1%)", blue9: "hsl(206, 100%, 50.0%)", blue10: "hsl(209, 100%, 60.6%)", blue11: "hsl(210, 100%, 66.1%)", blue12: "hsl(206, 98.0%, 95.8%)" }, gray: { gray1: "hsl(0, 0%, 8.5%)", gray2: "hsl(0, 0%, 11.0%)", gray3: "hsl(0, 0%, 13.6%)", gray4: "hsl(0, 0%, 15.8%)", gray5: "hsl(0, 0%, 17.9%)", gray6: "hsl(0, 0%, 20.5%)", gray7: "hsl(0, 0%, 24.3%)", gray8: "hsl(0, 0%, 31.2%)", gray9: "hsl(0, 0%, 43.9%)", gray10: "hsl(0, 0%, 49.4%)", gray11: "hsl(0, 0%, 62.8%)", gray12: "hsl(0, 0%, 93.0%)" } } })30:T4b2,function createTheme(color, dark = false, colorSpace = "HSL") { const colorPalette = {}; const format = (arr) => (arr.length === 3 ? "rgb(" : "rgba(") + arr.join(", ") + ")"; const formatHSL = (arr) => "hsl(" + Math.round(arr[0]) + ", " + Math.round(arr[1] * 100) / 100 + "%, " + Math.round(arr[2] * 100) / 100 + "%)"; (dark ? lightnessInputDark : lightnessInput).forEach((lightness, i) => { let t = i / (lightnessInput.length - 1); if (dark) t = 1 - t; if (colorSpace === "HCT") { const hctColor = colorUtil.Hct.fromInt( ColorRGB.fromString(color).toInt() ); const chroma = (dark ? chromaTableDark : chromaTable)[i]; // modify the t and chroma value hctColor.tone = (lightness * 100) / 11; //hctColor.chroma = chroma; // convert back to rgb const c = ColorRGB.fromInt(hctColor.toInt()); colorPalette[colorName + (i + 1)] = format(c.toTuple()); } else { // hsl const hslColor = rgb2hsl(ColorRGB.fromString(color).toTuple()); hslColor[2] = (lightness * 100) / 11; colorPalette[colorName + (i + 1)] = formatHSL(hslColor); } }); return colorPalette; }31:T8c0,PlotInput = ({ defaultValue = Array.from({ length: 12 }, (_, i) => ({ x: i, y: i })) } = {}) => { let data = [].concat(defaultValue); const width = 600, height = 400; const svg = d3.create("svg").attr("width", width).attr("height", height); let padding = 10; const xScale = d3 .scaleLinear() .domain([0, 11]) .range([padding, width - padding]); const yScale = d3 .scaleLinear() .domain([0, 11]) .clamp(true) .range([height - padding, padding]); const lineGenerator = d3 .line() .x((d) => xScale(d.x)) .y((d) => yScale(d.y)); const dragger = d3.drag().on("start drag", function (event) { const x = Math.round(xScale.invert(event.x)); const y = yScale.invert(event.y); if (x >= 0 && x < 12) { data[x].y = y; svg.select(".line").attr("d", lineGenerator(data)); svg .selectAll(".dot") .data(data) .join("circle") .attr("class", "dot") .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)) .attr("r", 8); node.dispatchEvent(new CustomEvent("input")); } }); svg .append("path") .datum(data) .attr("class", "line") .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "steelblue"); svg .selectAll(".dot") .data(data) .join("circle") .attr("class", "dot") .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)) .attr("r", 8); svg.call(dragger); const node = svg.node(); // Update the data array whenever a dot is dragged Object.defineProperty(node, "value", { get() { return data.map((d) => d.y); }, set(newData) { data = newData.map((d, i) => ({ x: i, y: d })); svg .selectAll(".dot") .data(data) .join("circle") .attr("class", "dot") .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)) .attr("r", 8); svg .select(".line") .datum(data) .attr("class", "line") .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "steelblue"); } }); // Set the initial data node.value = data.map((d) => d.y); return node; }32:[] 2d:{"id":"8982f63af33c6cf6","slug":null,"title":"Tamagui theme generator","thumbnail":"be2ade7599056ed3c80c2993c6e53a2c7dccde3b1825d94c7d17932e55d4f2ba","access_level":"public","create_time":"$D2023-05-29T02:02:45.607Z","update_time":"$D2023-05-31T08:07:26.907Z","view_time":null,"first_public_time":"$D2023-05-29T02:02:45.607Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":750,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tamagui theme generator","cells":[{"id":0,"value":"# Tamagui theme generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":425,"value":"Generate a custom Tamagui theme for a given pair of input hues.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":450,"value":"## Theme manifests\n\nThe definition of the Tamagui themes for the blue palette.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":459,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"viewof selectedColor = SwatchInput(Object.values(palettes.light[currentColor]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"viewof selectedColorD = SwatchInput(Object.values(palettes.dark[currentColor]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"function parseHSL(hsl) {\n let match = hsl.match(\n /hsl\$\\s*([0-9.]+)\\s*,\\s*([0-9.]+)%\\s*,\\s*([0-9.]+)%\\s*\$/i\n );\n if (match) {\n return [parseFloat(match[1]), parseFloat(match[2]), parseFloat(match[3])];\n } else {\n return null; // or throw an error, or whatever you prefer if the input is not valid\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":496,"value":"viewof currentColor = Inputs.select([\"blue\", \"gray\"], {\n label: \"Select palette color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"lightnessTable = Object.values(palettes.light[currentColor]).map(\n (v) => parseHSL(v)[2]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":515,"value":"Plot.plot({\n width: 240,\n height: 120,\n marks: [Plot.lineY(lightnessTable, {})]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"chromaTable = Object.values(palettes.light[currentColor]).map(\n (v) => parseHSL(v)[1]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"Plot.plot({\n width: 240,\n height: 120,\n marks: [Plot.lineY(chromaTable, {})]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"lightnessTableDark = Object.values(palettes.dark[currentColor]).map(\n (v) => parseHSL(v)[2]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"Plot.plot({\n width: 240,\n height: 120,\n marks: [Plot.lineY(lightnessTableDark, {})]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"chromaTableDark = Object.values(palettes.dark[currentColor]).map(\n (v) => parseHSL(v)[1]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"Plot.plot({\n width: 240,\n height: 120,\n marks: [Plot.lineY(chromaTableDark, {})]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"function rgb2hsl([r, g, b]) {\n (r /= 255), (g /= 255), (b /= 255);\n\n let max = Math.max(r, g, b),\n min = Math.min(r, g, b);\n let h,\n s,\n l = (max + min) / 2;\n\n if (max == min) {\n h = s = 0; // achromatic\n } else {\n let d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n\n return [h * 360, s * 100, l * 100];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":549,"value":"function hsl2rgb([h, s, l]) {\n h /= 360;\n s /= 100;\n l /= 100;\n let r, g, b;\n\n if (s == 0) {\n r = g = b = l; // achromatic\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1 / 6) return p + (q - p) * 6 * t;\n if (t < 1 / 2) return q;\n if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n };\n let q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n let p = 2 * l - q;\n r = hue2rgb(p, q, h + 1 / 3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1 / 3);\n }\n\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"## Custom theme\n\nCustomized based on chroma and lightness tables from above for any input hue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":83,"value":"// default is observablehq.com primary color: #596ab0\nviewof color = Inputs.color({\n label: \"Input color\",\n value: \"#0056D4\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"### Light theme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":735,"value":"HSL Color space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":121,"value":"SwatchInput(Object.values(createTheme(color, false, \"HSL\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":731,"value":"HCT Color space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":706,"value":"SwatchInput(Object.values(createTheme(color, false, \"HCT\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":648,"value":"Custom lightness curve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":613,"value":"viewof lightnessInput = PlotInput({\n defaultValue: Array.from({ length: 12 }, (_, i) => ({\n x: i,\n y: (lightnessTable[i] / 100) * 11\n }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"### Dark theme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":362,"value":"HSL Color space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":352,"value":"SwatchInput(Object.values(createTheme(color, true, \"HSL\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":742,"value":"HCT Color space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":726,"value":"SwatchInput(Object.values(createTheme(color, true, \"HCT\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":650,"value":"Custom lightness curve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":565,"value":"viewof lightnessInputDark = PlotInput({\n defaultValue: Array.from({ length: 12 }, (_, i) => ({\n x: i,\n y: (lightnessTableDark[i] / 100) * 11\n }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":745,"value":"SwatchInput(\n Object.values({\n blue1: \"hsl(9.3801, 2.3157%, 1.106%)\",\n blue2: \"hsl(219.83, 100%, 14.094%)\",\n blue3: \"hsl(217.42, 100%, 22.562%)\",\n blue4: \"hsl(216.29, 100%, 31.664%)\",\n blue5: \"hsl(215.66, 100%, 41.296%)\",\n blue6: \"hsl(220.62, 84.26%, 56.743%)\",\n blue7: \"hsl(222.41, 100%, 67.999%)\",\n blue8: \"hsl(223.83, 100%, 76.818%)\",\n blue9: \"hsl(225.1, 100%, 84.911%)\",\n blue10: \"hsl(227.88, 100%, 92.773%)\",\n blue11: \"hsl(233.61, 100%, 96.674%)\",\n blue12: \"hsl(282.39, 100%, 99.27%)\"\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"## Notebook exports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":678,"value":"viewof colorName = Inputs.text({ label: \"Color name\", value: currentColor })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"viewof selectedSpace = Inputs.select([\"HCT\", \"HSL\"], { label: \"Color space\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"// light theme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"// dark theme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":378,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"import { SwatchInput } from \"@mateh/swatch-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"RGBToHSL = (r, g, b) => {\n const l = Math.max(r, g, b);\n const s = l - Math.min(r, g, b);\n const h = s\n ? l === r\n ? (g - b) / s\n : l === g\n ? 2 + (b - r) / s\n : 4 + (r - g) / s\n : 0;\n return [\n 60 * h < 0 ? 60 * h + 360 : 60 * h,\n 100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),\n (100 * (2 * l - s)) / 2\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"lightnessInput.map((l) => Math.round(l * 100) / 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"function hexToInt(hex) {\n const r = parseInt(hex.substring(1, 3), 16);\n const g = parseInt(hex.substring(3, 5), 16);\n const b = parseInt(hex.substring(5, 7), 16);\n const opaqueBlack = 0xff000000;\n return opaqueBlack | (r << 16) | (g << 8) | b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"import { ramp, generate, interpolateShades, ColorRGB } from \"@mateh/palette\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"colorUtil = import(\"https://cdn.skypack.dev/@material/material-color-utilities\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"