2b:null 2c:["$","title",null,{"children":"Dynamic CSS Styling | Sébastien Pierre | Observable"}] 31:[{"id":"3c35fde7289b65f4d8ad9097e5dd0be28e2dff43090ca760eedd8d7842821b7030e8ba484f1f09757cc8d78dcf3f9eb25052608e2e3b53a6a2660bbde2912883","href":"https://static.observableusercontent.com/files/3c35fde7289b65f4d8ad9097e5dd0be28e2dff43090ca760eedd8d7842821b7030e8ba484f1f09757cc8d78dcf3f9eb25052608e2e3b53a6a2660bbde2912883","name":"DALL·E 2022-11-13 10.59.08 - a creative brush stroke of vivid plue paint applied on a white mesa wall.png","type":"image/png","lastModified":1668290374766.217,"size":1410532}] 2f:{"id":"7a364911e98e7b8d","slug":"styling","title":"Dynamic CSS Styling","thumbnail":"cf6a139c01d7f9b33d7990bf3f0e3a81131f4f81f100e594fab73b622c20fcbf","access_level":"public","create_time":"$D2022-11-12T20:14:49.360Z","update_time":"$D2023-01-20T22:15:58.502Z","view_time":null,"first_public_time":"$D2022-11-12T22:17:28.377Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cc0ce9489265b441","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":"starter_2024"},"version":572,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null}],"members":[{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Dynamic CSS Styling","cells":[{"id":0,"value":"# Dynamic CSS Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":277,"value":"This notebook define primitives for creating dynamic stylesheets expressed as code, using custom units and design tokens. It's a simple module, but it provides the foundation for doing a lot!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":275,"value":"dallE20221113105908ACreativeBrushStrokeOfVividPlue = FileAttachment(\"DALL·E 2022-11-13 10.59.08 - a creative brush stroke of vivid plue paint applied on a white mesa wall.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"### Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":318,"value":"This shows a set of design tokens including custom units.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":283,"value":"viewof Color = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"registerStyle(Style)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"html`

Hello, world with style ${className(\n Style\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"Tokens = ({\n ButtonBG: Color,\n Text: { color: \"#30300\", size: \"14px\", font: \"sans-serif\" },\n pad: (_) => unit(_ * 4, \"px\"),\n bd: (_) => unit(_ * 2, \"px\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"Style = style(\n {\n \"&\": {\n background: \"${ButtonBG}A0\",\n cursor: \"help\",\n display: \"inline-block\",\n fontSize: \"${Text.size}\",\n color: \"${Text.color}\",\n fontFamily: \"${Text.font}\",\n borderRadius: \"$2bd\",\n padding: \"$2pad $3pad\"\n },\n \"& code\": {\n opacity: 0.5,\n fontSize: \"${Text.size}\"\n },\n \"&:hover\": {\n background: \"${ButtonBG}\"\n }\n },\n Tokens\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"## API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":279,"value":"The main function is `rule(rules, context)`, that takes rules formatted as `{[scope]:{[property]:value}}`, where `scope` should start with `&`. The `&` will then be replaced by a unique class name, based on the contents of the rules expanded in the given `context`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":46,"value":"style = (rules, context = undefined, name = undefined, parser = parseToken) => {\n rules = expandRules(rules, context, parser);\n const className = `.${name ? name : alpha(hash(rules))}`;\n return reduce(\n rules,\n (r, v, k) => {\n r[k.replace(\"&\", className)] = v;\n },\n {}\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"className = (...rules) =>\n [\n ...rules\n .reduce((r, v) => {\n for (let k in v) {\n const match = k.match(RE_RULEHASH);\n if (match) {\n const n = match.groups.hash;\n r.set(n, true);\n }\n }\n return r;\n }, new Map())\n .keys()\n ].join(\" \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"Takes expanded rules in `{[scope]:{[prop]:value}}` format and registers them in a stylesheet, returning the CSS source for the rules.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":187,"value":"registerStyle = (style, name = \"default\", reset = true) => {\n return html`