2b:null 2c:["$","title",null,{"children":"Color Palette | Jeremy Stucki | Observable"}] 31:[] 2f:{"id":"826bf805cfc953f6","slug":"color-palette","title":"Color Palette","thumbnail":"702dc0a0acc76c9b357ee5b3cfbb3ed7fe2efc47d6c56f51d93e61a1dc4e6a90","access_level":"public","create_time":"$D2021-09-22T12:26:32.254Z","update_time":"$D2021-09-23T13:49:48.826Z","view_time":null,"first_public_time":"$D2021-09-29T12:50:55.201Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c5109c80b84a25f0","login":"jerstucki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":"starter_2024"},"version":122,"publish_version":122,"role":null,"authored":false,"authors":[{"type":"individual","id":"44bee8f4b23a0cb4","login":"jstcki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":null}],"members":[{"type":"individual","id":"e223a61f267a7572","login":"bartok32","name":"Bartosz Prusinowski","avatar_url":"https://avatars-next.observableusercontent.com/8be2bc3aaeb2864562e463ac4f47c9557b8fb285a7ac0c5584e6f83c8606be7a","tier":null,"role":"editor"},{"type":"individual","id":"44bee8f4b23a0cb4","login":"jstcki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"99ef1360af485f84","slug":"test-colors","title":"Color Tool Experiments","owner":{"id":"c5109c80b84a25f0","login":"jerstucki","name":"Jeremy Stucki"}},"type":"notebook","body":{"title":"Color Palette","cells":[{"id":0,"value":"# Color Palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"viewof colorsInput = Inputs.text({\n label: \"Colors\",\n value: \"#402222,#5D4353,#5D6F84,#549F99,#84C98C,#E7E77A\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"colors = colorsInput.split(\",\").map((s) => s.trim())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"viewof x = ColorPalette(colors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"ColorPalette = (colors) => {\n const colorField = (color) => {\n const contrast = getColorContrast(color, \"white\");\n\n return html.fragment`\n

${formatContrast(contrast)}:1

${ContrastRatingBadge(getContrastRatingText(contrast))}

${ContrastRatingBadge(getContrastRatingHeading(contrast))}

\n`;\n };\n\n const fields = colors.map((color) => colorField(color));\n\n const palette = html`

Color

Contrast

WCAG Text

WCAG Heading

\n${fields}

`;\n\n return palette;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"ContrastRatingBadge = (rating) => {\n const icon = rating === \"FAIL\" ? \"❌\" : \"✅\";\n return html`

${icon} ${rating}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"import {\n getRelativeLuminanceFromHex,\n getColorContrast,\n formatContrast,\n getContrastRatingText,\n getContrastRatingHeading\n} from \"@herrstucki/color-functions\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"