31:[] 2f:{"title":"Tachyons CSS and some extras","cells":[{"id":0,"value":"md`# Tachyons CSS and some extras\n\n[Tachyons CSS](http://tachyons.io/) is handy for quickly style some HTML elements. This notebook extends the default Tachyons CSS with additional utility functions\n\nTachyons version: **${tachyonsVersion}**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"toc({\n headers: \"h2,h3,h4,h5\",\n hideStartingFrom: \"Demo Styles\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Usage\n\n### 1. Import\n~~~js\n import {loadStyles} from '@categorise/tachyons-and-some-extras'\n~~~\n\n### 2. Initialize\n\n~~~js\n loadStyles({ /* options */})\n~~~\n\n### 3. 💅 Style some stuff\n\n~~~js\n html`

Hey!

`\n~~~\n\n...and, get this\n\n

Hey!

","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"## Extras","pinned":false,"hidden":false,"mode":"md"},{"id":368,"value":"### Tachyon CSS variables\n\nTachyons currently don't expose values used within its utility classes as CSS variables. Here, we are exposing some common values as CSS variables. These can be used with any custom CSS styles.","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"cssVariables = () => `:root {\n --spacing-none: 0;\n --spacing-extra-small: .25rem;\n --spacing-small: .5rem;\n --spacing-medium: 1rem;\n --spacing-large: 2rem;\n --spacing-extra-large: 4rem;\n --spacing-extra-extra-large: 8rem;\n --spacing-extra-extra-extra-large: 16rem;\n\n --border-radius-0: 0;\n --border-radius-1: .125rem;\n --border-radius-2: .25rem;\n --border-radius-3: .5rem;\n --border-radius-4: 1rem;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"### Colors\n\nProvide extra colors like brand or accent as options to `loadStyles()`. This notebook will generate all color related Tachyon classes like color, background-color, and border-color.\n\n**Example:**\n~~~js\nloadStyles({\n colors: {\n brand: \"#0099D8\",\n accent: \"#8DC63F\"\n }\n})\n~~~\n\n... will generate classnames like:\n\n~~~css\n.brand { /* ... */ } \n.hover-brand:hover { /* ... */ } \n.bg-brand { /* ... */ }\n.b--brand { /* ... */ }\n\n.accent { /* ... */ } \n.hover-accent:hover { /* ... */ } \n.bg-accent { /* ... */ }\n.b--accent { /* ... */ }\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"colorUtils = ({colors}) => {\n const keys = Object.keys(colors || {})\n\n if (keys.length === 0) return \"\";\n\n const cssVariables = `:root {\n${keys.reduce((acc,k) => `${acc}--${k}: ${colors[k]};`, \"\")}\n}`\n \n const utilClasses = keys.reduce((acc, k) => {\n return `${acc}\n.${k} { color: var(--${k}); }\n.hover-${k}:hover, .hover-${k}:focus { color: var(--${k}); }\n.bg-${k} { background-color: var(--${k}); }\n.hover-bg-${k}:hover, .hover-bg-${k}:focus { background-color: var(--${k}); }\n.b--${k} { border-color: var(--${k}); }\n`}, \"\")\n\n return cssVariables + \"\\n\" + utilClasses;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"### Font family\n\n**Example:**\n~~~js\nloadStyles({\n fonts: {\n roboto: `\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"`\n }\n})\n~~~\n\n... will generate classname like:\n\n~~~css\n.roboto { font-family: \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"; } \n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":306,"value":"fontUtils = ({fonts}) => {\n const keys = Object.keys(fonts || {})\n\n if (keys.length === 0) return \"\";\n\n const cssVariables = `:root {\n${keys.reduce((acc,k) => `${acc}--${k}: ${fonts[k]};`, \"boxShadowUtils\")}\n}`\n \n const utilClasses = keys.reduce((acc, k) => {\n return `${acc}\n.${k} { font-family: ${fonts[k]}; }\n`}, \"\")\n\n return cssVariables + \"\\n\" +utilClasses;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"### Space between","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"#### Horizontal spacing\n\nUse `space-x-` to add horizontal space between elements within a `flex` parent.\n\nExample:\n~~~html\n

\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"html`

\n ${Array.from({length: 3}).reduce((acc, _, i) => `${acc}

${i + 1}

`, \"\")}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"#### Vertical spacing\n\nUse `space-y-` to add vertical space between elements.\n\nExample:\n~~~html\n

\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"html`

\n ${Array.from({length: 3}).reduce((acc, _, i) => `${acc}

${i + 1}\n

`, \"\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"#### Horizontal & Vertical Spacing\n\nUse `space-` to add vertical space between elements within a `flex` parent..\n\nExample:\n~~~html\n

\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":401,"value":"html`

\n ${Array.from({length: 8}).reduce((acc, _, i) => `${acc}

${i + 1}

`, \"\")}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"spaceBetweenUtils = () => Object.keys(tokens.spaces).reduce((acc, k) => {\n const v = tokens.spaces[k];\n return `${acc}\n.space-x-${k} > * + * {\n margin-left: ${v}\n}\n.space-y-${k} > * + * {\n margin-top: ${v};\n}\n\n.space-${k} {\n margin: calc(-0.5 * ${v});\n}\n\n.space-${k} > * {\n margin: calc(0.5 * ${v});\n}`\n}, \"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"### Box Shadows","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"html`

\n ${Array.from({length: 3}).map((_,i) => {\n const n= i + 1;\n return `

.solid-shadow-${n}

.solid-shadow-y-${n}

`\n })}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"boxShadowUtils = () => `\n.solid-shadow-1 {\n box-shadow: 0.125rem 0.125rem rgba(0,0,0,0.08);\n}\n\n.solid-shadow-y-1 {\n box-shadow: 0 0.125rem rgba(0,0,0,0.08);\n}\n\n.solid-shadow-2 {\n box-shadow: 0.25rem 0.25rem rgba(0,0,0,0.06);\n}\n\n.solid-shadow-y-2 {\n box-shadow: 0 0.25rem rgba(0,0,0,0.06);\n}\n\n.solid-shadow-3 {\n box-shadow: 0.5rem 0.5rem rgba(0,0,0,0.06);\n}\n\n.solid-shadow-y-3 {\n box-shadow: 0 0.5rem rgba(0,0,0,0.06);\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"### Tracking","pinned":false,"hidden":false,"mode":"md"},{"id":521,"value":"trackedUtils = () => `.tracked-light { letter-spacing: .025em; }`","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"### Sticky","pinned":false,"hidden":false,"mode":"md"},{"id":509,"value":"positionUtils = () => `.sticky { position: sticky }`","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"### No scrollbars","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"scrollUtils = () =>`.no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.no-scrollbar::-webkit-scrollbar {\n display: none; // Safari and Chrome\n}`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"tachyonsVersion = \"4.12.0\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"defaultOptions = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"addElementsToDOM = (elements) => elements.forEach(n => document.querySelector(\"head\").prepend(n));","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"removeElementsFromDOM = (elements) => elements.forEach(n => n.parentNode && n.parentNode.removeChild(n))","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"tachyons = loadStyles // Original name, deprecated","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"loadStyles = {\n let elements = new Set();\n\n function detach(elements) {\n for (let n of elements) {\n n.remove();\n elements.delete(n);\n }\n }\n\n function attach(nodes) {\n for (let n of nodes) {\n document.head.prepend(n);\n elements.add(n);\n }\n }\n\n invalidation.then(() => detach(elements));\n \n return (userOptions) => {\n const options = Object.assign({}, defaultOptions, userOptions);\n const src = `https://unpkg.com/tachyons@${tachyonsVersion}/css/tachyons.min.css`;\n\n detach(elements);\n \n const newStyleElements = new Set([\n html``,\n html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":654,"value":"import { substratum } from \"@categorise/substratum\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"substratum({ invalidation })","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}