28:null 29:["$","title",null,{"children":"Styles | Eli Sklar | Observable"}] 2e:[] 2c:{"id":"a485a84b1b1e6e3f","slug":"styles","title":"Styles","thumbnail":"ceb882925b81cef1fc326df5ff8a11b0cfc9abef206f8db6c9789d236a845ecb","access_level":"public","create_time":"$D2020-03-30T21:30:05.691Z","update_time":"$D2020-04-02T11:48:13.698Z","view_time":null,"first_public_time":"$D2020-03-30T23:08:28.109Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"fbb4864ef287fcdf","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":"starter_2024"},"version":317,"publish_version":317,"role":null,"authored":false,"authors":[{"type":"individual","id":"476d6f963f3363b3","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":null}],"members":[{"type":"individual","id":"476d6f963f3363b3","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"bec1637df9e62c60","slug":"observable","title":"Observable","owner":{"id":"fbb4864ef287fcdf","login":"elisk","name":"Eli Sklar"}},"type":"notebook","body":{"title":"Styles","cells":[{"id":0,"value":"mds`# Styles\n\n## Styled Observable Components\n``\n@import url(\"https://fonts.googleapis.com/css?family=Public+Sans&display=swap\");\nfont-family: \"Public Sans\", sans-serif;\n\nh1 {\n // font-family: sans-serif;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mds`\nSupercharged \\`html\\` and \\`md\\` for your notebooks. Observable is awesome but styling arbitrary HTML and Markdown can be tricky sometimes.\n\nInspired by Styled Components for React Styles enables you to very easily style \\`html\\` and \\`md\\` with SCSS to boot.\n\nStyles exports a few keys functions:\n\n- \\`style\\` — for global styling\n- \\`styles\\` — like \\`html\\` but with styles - will create a wrapper element containing your elements\n- \\`stylex\\` — like \\`html\\` but with styles - will assign a custom class to your elements applying styles\n- \\`mds\\` — like \\`md\\` but with styles\n- \\`compile\\` — compile an input SCSS into CSS\n\n## Usage\n\n\\`\\`\\`js\nimport { style, styles, mds, compile } from '@elisk/styles'\n\\`\\`\\`\n```","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"hr``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"styleDocumentation = mds`\n### Style\n\n\\`\\`\\`js\nimport { style } from '@elisk/styles'\n\\`\\`\\`\n\nGlobally set styles for current notebook.\n\nExample use:\n\n\\`\\`\\`js\nstyle\\`\n h1 {\n color: #F0F;\n }\n\\`\n\\`\\`\\`\n```","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"styleDemo = style`\n@import url(\"https://fonts.googleapis.com/css?family=Public+Sans&display=swap\");\nbody {\n font-family: \"Public Sans\", sans-serif;\n p, h1, h2, h3, h4, h5 {\n opacity: 0.88;\n }\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"style = async (...inputs) => {\n const { isNode } = util\n const cont = html`

`\n\n const compiled = await compile(...inputs)\n const style = html``\n cont.append(style)\n \n cont.compiled = compiled\n return cont\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"hr``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"stylesDocumentation = mds`\n### Styles\n\n\\`\\`\\`js\nimport { styles } from '@elisk/styles'\n\\`\\`\\`\n\nCreate an HTML element and apply styles to it.\n\nThis function is much like \\`html\\` function except it returns another function which is expected to be executed using the tagged template style — so it looks like this:\n\n\\`\\`\\`js\nstyles\\`HTML_HERE\\`\\`CSS_HERE\\`\n\\`\\`\\`\n\nNotice the double tick \\`\\` between the HTML and CSS parts.\n\nExample:\n\n\\`\\`\\`js\nstyles\\`\n

This title is Red!

This title is Blue!

\n\\`\\`\nh1 { color: blue; }\ndiv h1 { color: red; }\n\\`\n\\`\\`\\`\n```","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"stylesDemo = styles`

This title is Red!

This title is Blue!

\n``\nh1 { color: blue; }\ndiv h1 { color: red; }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"styles = {\n const { isNode } = util\n return (...inputs) => {\n const id = Math.ceil(Date.now() * Math.random()).toString(32)\n const getText = text => typeof text === 'function' ? text() : text\n return async (...sinputs) => {\n const cont = html`

`\n const elm = typeof isNode(inputs[0]) && !inputs[0].raw ? inputs[0] : html(...inputs)\n cont.append(elm)\n const [texts, ...subs] = sinputs\n\n\n const inputString = texts.raw\n ? texts.reduce((acc, text, index) => [...acc, text, getText(subs[index])], []).join('')\n : texts\n\n const compiled = await compile(`.style-${id} {${inputString}}`)\n const style = html``\n cont.append(style)\n cont.value = {}\n cont.elm = elm\n cont.oninput = (e) => {\n cont.value = {...cont.value, [e.target.name]: e.target.value }\n }\n cont.compiled = compiled\n return cont\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"hr``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"stylexDocumentation = mds`\n### Stylex\n\n\\`\\`\\`js\nimport { stylex } from '@elisk/styles'\n\\`\\`\\`\n\nCreate an HTML element and apply styles to it.\n\nThis function is much like \\`html\\` function except it returns another function which is expected to be executed using the tagged template style — so it looks like this:\n\n\\`\\`\\`js\nstylex\\`HTML_HERE\\`\\`CSS_HERE\\`\n\\`\\`\\`\n\nNotice the double tick \\`\\` between the HTML and CSS parts.\n\nExample:\n\n\\`\\`\\`js\nstylex\\`

My Rad Title! Small

\\`\\`&:hover { small { font-size: 1.25rem; content: \"Big!\"}}\\`\n\\`\\`\\`\n```","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"stylex`

My Rad Title! Small

``&:hover { small { transition: all 220ms; font-size: .25em; content: \"Big!\"}}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"stylex = {\n const { isNode } = util\n return (...inputs) => {\n const id = Math.ceil(Date.now() * Math.random()).toString(32)\n const getText = text => typeof text === 'function' ? text() : text\n return async (...sinputs) => {\n const elm = typeof isNode(inputs[0]) && !inputs[0].raw ? inputs[0] : html(...inputs)\n elm.setAttribute('class', `style-${id}`)\n const [texts, ...subs] = sinputs\n\n\n const inputString = texts.raw\n ? texts.reduce((acc, text, index) => [...acc, text, getText(subs[index])], []).join('')\n : texts\n\n const compiled = await compile(`.style-${id} {${inputString}}`)\n const style = html``\n elm.append(style)\n elm.value = {}\n elm.oninput = (e) => {\n elm.value = {...elm.value, [e.target.name]: e.target.value }\n }\n elm.compiled = compiled\n return elm\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"hr`◎`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"mdsDocumentation = mds`\n### MDS\n\n\\`\\`\\`js\nimport { mds } from '@elisk/styles'\n\\`\\`\\`\n\nCompile Markdown and apply styles to it.\n\nThis function is much like \\`md\\` function except, like the \\`styles\\` function, it returns another function which is expected to be executed using the tagged template style — so it behaves like this:\n\n\\`\\`\\`js\nmds\\`MARKDOWN_HERE\\`\\`CSS_HERE\\`\n\\`\\`\\`\n\nNotice the double tick \\`\\` between the Markdown and CSS parts.\n\nExample:\n\n\\`\\`\\`js\nmds\\`\n## This title is orangered!\n\n## This title is green!\n\\`\\`\nh2 { color: orangered; &:hover { color: blue; } small { color: #A2A2A5; } }\nh2:last-child { color: green; }\n\\`\n\\`\\`\\`\n```","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"mds`\n## This title is orangered! (Hover me blue!)\n\n## This title is green!\n``\nh2 { color: orangered; &:hover { color: blue; } small { color: #A2A2A5; } }\nh2:last-child { color: green; }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"mds = (...inputs) => styles(md(...inputs))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"hr``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"compileDocumentation = mds`\n### Compile\n\n\\`\\`\\`js\nimport { compile } from '@elisk/styles'\n\\`\\`\\`\n\nCompile SCSS and return resulting CSS string.\n\nCan be invoked as a regular function, e.g. \\`compile('h1 { font-size: 40px }')\\`, or as a tagged template, e.g.\n\n\\`\\`\\`js\ncompile\\`div { h1 { font-size: 40px } }\\`\n// div h1 { font-size: 40px; }\n\\`\\`\\`\n```","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"compile`div { h1 { font-size: 40px } }`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"compile = (...inputs) => {\n const [texts, ...subs] = inputs\n \n if (!inputs || !texts) return undefined\n \n const getText = text => \n typeof text === 'function' ? text() : text\n \n const inputString = texts.raw\n ? texts.reduce((acc, text, index) => [...acc, text, getText(subs[index])], []).join('')\n : texts\n \n const promise = new Promise((resolve, reject) => {\n Sass.compile(inputString, function(result) {\n if (result.status) {\n reject(result.formatted.replace('of /stdin', ''))\n }\n resolve(result.text)\n })\n })\n return promise\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"hr`!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"util = {\n // Returns true if it is a DOM node\n function isNode(o){\n return (\n typeof Node === \"object\" ? o instanceof Node : \n o && typeof o === \"object\" && typeof o.nodeType === \"number\" && typeof o.nodeName===\"string\"\n );\n }\n\n // Returns true if it is a DOM element \n function isElement(o){\n return (\n typeof HTMLElement === \"object\" ? o instanceof HTMLElement : //DOM2\n o && typeof o === \"object\" && o !== null && o.nodeType === 1 && typeof o.nodeName===\"string\"\n );\n }\n \n // Source: https://stackoverflow.com/questions/384286/how-do-you-check-if-a-javascript-object-is-a-dom-object\n return {\n isElement,\n isNode\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"hr = (input) => styles`

``\n hr {\n --msize: 22px;\n position: relative;\n padding: 2rem;\n \n &::after {\n content: attr(data-symbol);\n position: absolute;\n left: calc(50% - var(--msize));\n top: calc((var(--msize) - 20%) + (var(--msize) / 2));\n background: #E7E8EA;\n height: var(--msize);\n width: var(--msize);\n display: flex;\n border-radius: 8px;\n box-shadow: 0 0 12px 42px #FFF, 0 0 6px #FFF, 0 0 2px #FFF;\n align-items: center;\n justify-content: center;\n color: #C2C3C5;\n }\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Sass = require('sass.js@0.11.1/dist/sass.sync.js').catch(() => window[\"Sass\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"