29:null 2a:["$","title",null,{"children":"A Dynamic Design Token System | Sébastien Pierre | Observable"}] 2f:T5d6,class Token { constructor(steps) { this.steps = [...steps]; } // This is the main function eval(context = {}) { // The resolver becomes a function that gets assigned the state, while resolving // The context. const resolver = ( name = "value", factor = undefined, state = undefined ) => { const value = state && state[name] !== undefined ? state[name] : context[name]; if (typeof value === "string") { return { value: color(value) }; } else if (typeof value === "function") { // TODO: We may want to merge in the rest of the context, maybe not only the value? factor = factor ? parseFloat(factor) : factor; const res = value( // NOTE: We copy the state in the function so that the context is accessible Object.assign( (name, factor) => resolver(name, factor, state).value, state ), factor ); return { value: res }; } else if (typeof value === "object") { return (({ value, ...rest }) => rest)(value); } else { throw new Error(`Undefined token '${name}'`); } }; return this.steps.reduce((r, v, i) => { const { type, name, factor } = v; const { value, ...rest } = resolver(name, factor, r); return Object.assign(r, { color: value instanceof Color ? value : r.color, value, ...rest }); }, {}); } }30:Tf01,class Color { static BLACK = new Color([0, 0, 0, 1]); static WHITE = new Color([1, 1, 1, 1]); static DarkLight(black = undefined, white = undefined) { white = Color.Ensure(white || Color.WHITE); black = Color.Ensure(black || Color.BLACK); const dark = black.luminance < white.luminance ? black : white; const light = dark === black ? white : black; return [dark, light]; } static Ensure(value, strict = true) { return value instanceof Color ? value : value instanceof Array || (typeof value === "string" && value.match(RE_COLOR)) ? new Color(value) : strict ? (() => { throw new Error( `Could not decode color from ${typeof value}: ${value}` ); })() : null; } constructor(value) { if (!(value instanceof Array || typeof value === "string")) { throw new Error( `Color value should be RGBA array or hex string, got ${typeof value}: ${value}` ); } this.value = value instanceof Array ? value : hex(value); if (this.value.reduce((r, v) => (isNaN(v) ? r + 1 : r), 0)) { throw new Error( `Could not create color from: ${value}, got NaN in ${this.value}` ); } if (!this.value) { throw new Error(`Could not create color from: ${value}`); } while (this.value.length < 4) { this.value.push(1.0); } } get rgb() { const [r, g, b] = this.value.map((_) => Math.round(gamma(_) * 255)); return `rgb(${r},${g},${b})`; } get hex() { return hex(this.value); } get lightness() { // SEE: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance // Ref: "Another way to describe this is that our perception roughly follows a power curve with an exponent of ~0.425, so perceptual lightness is approximately L* = Y0.425, though this depends on adaptation." return Math.pow(this.luminance, 0.425); } get luminance() { const [r, g, b] = this.value; return 0.2126 * r + 0.7152 * g + 0.0722 * b; } // Returns a version of the current color that contrast (in luminance) with // the other color of `delta` (between 0 and 1). The actual luminance delta // may be lower if it's not possible to make the luminance greter. contrast(other, delta = 0.1) { const la = this.luminance; const lb = Color.Ensure(other).luminance; const ld = clamp(lb - la, 0, 1); return Math.abs(ld) === delta ? this : this.tint(clamp(la + delta * (ld / Math.abs(ld)), 0, 1)); } // Creates a derived color with the given alpha value. alpha(value = 0.5) { const res = new Color([...this.value]); res.value[3] = clamp(value); return res; } // Returns a grey version of this color grey(k=1) { const l = this.luminance; const g = new Color([l, l, l, 1]) return k >= 1 ? g : this.blend(g, k); } tint(luminance = 0.5, black = undefined, white = undefined) { const [dark, light] = Color.DarkLight(black, white); const l = clamp(this.luminance, 0, 1); const v = clamp(luminance, 0, 1); // If the current luminance is less than the target luminance return l < v ? // Then we blend to white of a factor that the difference in this.blend(light, prel(v, l, light.luminance)) : this.blend(dark, prel(v, l, dark.luminance)); } scale(steps = 10, black = undefined, white = undefined) { const [dark, light] = Color.DarkLight(black, white); return new Array(steps + 1) .fill(0) .map((_, i) => this.tint(i / steps, dark, light)); } blend(color, k = 0.5) { const c = Color.Ensure(color, true); return new Color( this.value.map((v, i) => clamp(lerp(v, c.value[i], k), 0, 1)) ); } // TODO: Grey toString() { return hex(this.value); } }31:[{"id":"b22194b7f3c8b9855105d25424e6c9fa56ffb56107c52b073dab127f01cce2429f67b6c82d0b1661fd25e1044abc574e28dfdfb8573a250faa022ea2abf05cbd","href":"https://static.observableusercontent.com/files/b22194b7f3c8b9855105d25424e6c9fa56ffb56107c52b073dab127f01cce2429f67b6c82d0b1661fd25e1044abc574e28dfdfb8573a250faa022ea2abf05cbd","name":"DALL·E 2022-11-26 10.35.38.png","type":"image/png","lastModified":1669412149128.916,"size":1324691}] 2d:{"id":"abb3256f431d3546","slug":"tokens","title":"A Dynamic Design Token System","thumbnail":"e48a9e173f2500d2848eb97b7d5b80d6cf7c6f61d1b5f5e24ebab0e5533e67da","access_level":"public","create_time":"$D2022-11-10T22:20:26.190Z","update_time":"$D2023-01-20T22:02:20.082Z","view_time":null,"first_public_time":"$D2022-11-25T21:40:28.883Z","has_unpublished_edits":null,"fork":false,"stars":0,"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":1331,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"c3ec6955d835bc12","slug":"user-interface/2","title":"User Interface","owner":{"id":"cc0ce9489265b441","login":"sebastien","name":"Sébastien Pierre"}},"type":"notebook","body":{"titling":"auto","title":"A Dynamic Design Token System","cells":[{"id":0,"value":"# A Dynamic Design Token System","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1315,"value":"dallE20221126103538 = FileAttachment(\"DALL·E 2022-11-26 10.35.38.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Managing colors when implementing a design system can be challenging: a primary colour palette need to have variants for many contexts (a button background, a focused input border, the background of an insert on a page) while preserving good legibility through consistent contrast.\n\nIn this notebook, we introduce a dynamic token system that can be used to create variants of a given token, based on the context (ie. dark/light mode), the use case (buttons, backgrounds, etc) as well as ensuring specific properties such as luminance and contrast.\n\nThe token system is based on dot-separated words interpretend in a context definining colors, transforms and sub-contexts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1036,"value":"### Token Semantic Variants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1079,"value":"A common use case of a design system is to take a colour and create variants based on the context: let's say you choose the ◼ blue color as your primary color, but want to apply it as a *highlight*, a *border* or a *background*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":506,"value":"{\n const tokens = {\n Blue: \"#198ebe\",\n\n Background: \"#FFFFFF\",\n Focused: \"#FFFF00\",\n\n // Focused has luminance boosted by 15%\n focused: (_) => _.color.tint(_.color.luminance + 0.15),\n\n // Border is 50% grey, 0.25 opaque\n border: (_) => _.color.grey(0.5).alpha(0.25),\n\n // Background is 75% blend to background color\n background: (_) => _.color.blend(_(\"Background\"), 0.75)\n };\n return Swatches(\n [\"Blue\", \"Blue.focused\", \"Blue.border\", \"Blue.background\"].map(\n (_) => token(_).eval(tokens).color\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"### Token Quantified Variants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1117,"value":"Any color token can be varied using a transform taking a *factor*. Here we define the `L` transform that will adjust the luminance of the color on a scale of 0-10.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1026,"value":"{\n const tokens = {\n Red: \"#FF0000\",\n\n // Ln: n between 0-10 will create a corresponding tint with stable luminance steps\n L: (_, factor) => _.color.tint(clamp(prel(factor, -1, 10), 0, 1))\n };\n return ColorScale(\n range(10).map((_) => token(`Red.L${_}`).eval(tokens).value)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"{\n const tokens = {\n Primary: \"#198ebe\",\n Highlight: \"#FFFF00\",\n\n // Hn: n between 0-10, creates a luminance and color blend to the highlight color\n H: (_, factor) =>\n _.color\n .blend(_(\"Highlight\"), prel(factor, 0, 10))\n .tint(prel(factor, -1, 10))\n };\n return ColorScale(\n range(10).map((_) => token(`Primary.H${_}`).eval(tokens).value)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"### Token Contextual Variants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1263,"value":"We can define contexts that will override some of the tokens. This is especially useful for Dark/Light themes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1110,"value":"{\n const tokens = {\n // We define a primary colour\n Primary: \"#198ebe\",\n\n // We define a normal background\n Background: \"#FFFFFF\",\n Text: \"#000000\",\n\n // We define a dark mode\n Dark: {\n Background: \"#000000\",\n Text: \"#FFFFFF\"\n },\n\n // Zn, n in 0-10: Z0 makes the color the same luminance as the background, Z9 as the foreground.\n Z: (_, factor) => {\n const bg = _(\"Background\");\n const fg = _(\"Text\");\n const k = prel(factor, 0, 10);\n const l = lerp(bg.luminance, fg.luminance, k);\n return _.color.tint(l, bg, fg);\n }\n };\n return ColorScale(\n [\"Background\", \"Dark.Background\", \"Primary.Z8\", \"Primary.Dark.Z8\"].map(\n (_) => token(_).eval(tokens).color\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"## Token System","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"### Token API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":434,"value":"A *factor* is a key (characters) followed by a number. For instance `BD5` is `{key:\"BD\",factor:5}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"RE_TOKEN = new RegExp(\n \"(\\\\.(?[A-Za-z_]+)(?\\\\d+)|(?\\\\d+(\\\\.\\\\d+)?)(?[A-Za-z]+)|(?[A-Za-z_]+))\",\n \"g\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"token = (text) => {\n const r = [];\n while (true) {\n const m = RE_TOKEN.exec(text);\n if (!m) {\n break;\n } else if (m.groups.key !== undefined) {\n r.push({\n type: \"factor\",\n name: m.groups.key,\n factor: parseInt(m.groups.factor)\n });\n } else if (m.groups.name !== undefined) {\n r.push({ type: \"symbol\", name: m.groups.name });\n } else if (m.groups.value !== undefined) {\n r.push({ type: \"metric\", factor: m.groups.value, name: m.groups.unit });\n } else {\n throw new Error(`Unexpected match: ${m}`);\n }\n }\n return new Token(r);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"token(\"Red.L10\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"### Color API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"The color class is a wrapper around the functions defined in my [Color notebook](https://observablehq.com/@sebastien/color).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"color = (_) => Color.Ensure(_)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"### Color Scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":930,"value":"A key thing that we want to validate is that we can produce gradients/scales of colors with predictable, good perceptual contrast.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":973,"value":"ColorScale(color(\"#FF0000\").scale(10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"### Color Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"These functions are included from my [Color notebook](https://observablehq.com/@sebastien/color), but not imported as I wanted this notebook to remain standalone.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"color(\"#FF0000\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"rgb = (r, g, b, a = 255, convert = degamma) => [\n convert(r / 255),\n convert(def(g, r) / 255),\n convert(def(b, g, r) / 255),\n convert(def(a, 255) / 255)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"hex = (c, convert = undefined) =>\n typeof c === \"string\"\n ? rgb(\n parseInt(c.substring(1, 3), 16),\n parseInt(c.substring(3, 5), 16),\n parseInt(c.substring(5, 7), 16),\n parseInt(c.substring(7, 9) || \"FF\", 16),\n convert\n )\n : c instanceof Array\n ? `#${Math.round((convert || gamma)(c[0]) * 255)\n .toString(16)\n .padStart(2, \"0\")}${Math.round((convert || gamma)(c[1]) * 255)\n .toString(16)\n .padStart(2, \"0\")}${Math.round((convert || gamma)(c[2]) * 255)\n .toString(16)\n .padStart(2, \"0\")}${Math.round(\n (convert || gamma)(c[3] === undefined ? 1.0 : c[3]) * 255\n )\n .toString(16)\n .padStart(2, \"0\")}`.toUpperCase()\n : c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"gamma = asMappable((_) =>\n _ <= 0.00304 ? _ * 12.92 : 1.055 * Math.pow(_, 1.0 / 2.4) - 0.055)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"degamma = asMappable(_ => _ <= 0.03928 ? _/12.92 : Math.pow( ( _ + 0.055) / 1.055, 2.4))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"gamma([1.0, 1.0, 1.0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"RE_COLOR = new RegExp(\n \"#([A-Fa-f0-9][A-Fa-f0-9])([A-Fa-f0-9][A-Fa-f0-9])([A-Fa-f0-9][A-Fa-f0-9])\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"### Math Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":999,"value":"These are borrowed from my [🗒️boilerplate](https://observablehq.com/@sebastien/boilerplate) notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"lerp = (a, b, k) => a + (b - a) * k","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"clamp = (v, a = 0.0, b = 1.0) => Math.min(Math.max(v, a), b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"minmax = (a, b) => [Math.min(a, b), Math.max(a, b)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"range = (count) => new Array(count).fill(0).map((_, i) => i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"prel = (v, a, b) => (v - a) / (b - a)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"steps = (count) =>\n range(count)\n .map((_) => _ / count)\n .concat([1.0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"### Generic Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"asMappable = (f) => (_) => _ instanceof Array ? _.map(f) : f(_)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"def = (...rest) => {\n for (let v of rest) {\n if (v !== undefined) {\n return v;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"### UI Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"Swatch = (color) => {\n return `

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"Swatches = (_) =>\n html`

${Object.values(_ instanceof Array ? _ : [_])\n .map((_) => Swatch(hex(_)))\n .join(\"\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"ColorScale = (colors = []) => html`\n\n \n \n \n \n \n \n \n \n ${colors\n .map((_) => Color.Ensure(_))\n .map(\n (color, i) => `\n \n \n \n `\n )\n .join(\"\")}\n \n

Index	Color	\n	Grey	Luminance
${i}		\n		${Math.round(100 * color.luminance)}%

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"See:\n- 🗒️ [Color](https://observablehq.com/@sebastien/color), which explains how to use the gamma function to perform operations in linear color spac\n- My quantitiative approach to color palettes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2e:"$2d:body"