34:I[204091,["/_next/static/immutable/chunks/0flq6dgj4r1ua.js"],"IconMark"] 2b:null 2c:["$","title",null,{"children":"MyWheels colors | Kelley van Evert | Observable"}] 31:T6a4,html`

100

200

300

400

500

600

700

800

900

${["gray", "blue", 'green', "yellow", 'red'].map(name => { return `

${ colors[name + "50"] ? `

` : `

(nope)

` }

${name}

Some link in text

notice
this is a notice

`; })}

`32:T928,colors = { const base = { white: "#fff", gray50: mix(0.65, "white", "#f0f2f4"), gray100: "#f0f2f4", gray200: mix(1, "#e3e7ea", "#d6dbe0"), gray300: mix(0.8, "#d6dbe0", "#bdc4cb"), gray400: mix(0.7, "#bdc4cb", "#8c959d"), gray500: mix(0.5, "#8c959d", "#5a626a"), gray600: mix(0.5, "#5a626a", "#3e454b"), gray700: mix(0.5, "#3e454b", "#2a2f34"), gray800: mix(0.5, "#2a2f34", "#101214"), gray900: mix(0.5, "#101214", "black"), black: "#000", blue: "#1b70de", green: "#32af4b", orange: "#E99F55", yellow: "#e6a500", red: "#e65a37", business: "#4d4d4d", brown: "#837260" }; return { ...base, muted: base.gray500, gray: base.gray500, cool: base.gray400, blue100: mix(0.85, "white", base.blue), blue200: mix(0.75, "white", base.blue), blue300: mix(0.55, "white", base.blue), blue400: mix(0.3, "white", base.blue), blue500: mix(0, "white", base.blue), blue600: mix(0.1, "black", base.blue), blue700: mix(0.2, "black", base.blue), blue800: mix(0.4, "black", base.blue), blue900: mix(0.6, "black", base.blue), green100: mix(0.85, "white", base.green), green200: mix(0.75, "white", base.green), green300: mix(0.55, "white", base.green), green400: mix(0.3, "white", base.green), green500: mix(0, "white", base.green), green600: mix(0.1, "black", base.green), green700: mix(0.2, "black", base.green), green800: mix(0.4, "black", base.green), green900: mix(0.6, "black", base.green), yellow100: mix(0.85, "white", base.yellow), yellow200: mix(0.75, "white", base.yellow), yellow300: mix(0.55, "white", base.yellow), yellow400: mix(0.3, "white", base.yellow), yellow500: mix(0, "white", base.yellow), yellow600: mix(0.1, "black", base.yellow), yellow700: mix(0.2, "black", base.yellow), yellow800: mix(0.4, "black", base.yellow), yellow900: mix(0.6, "black", base.yellow), red100: mix(0.85, "white", base.red), red200: mix(0.75, "white", base.red), red300: mix(0.55, "white", base.red), red400: mix(0.3, "white", base.red), red500: mix(0, "white", base.red), red600: mix(0.1, "black", base.red), red700: mix(0.2, "black", base.red), red800: mix(0.4, "black", base.red), red900: mix(0.6, "black", base.red) }; }33:[] 2f:{"id":"6ed0334fdbd4c04e","slug":"mywheels-colors","title":"MyWheels colors","thumbnail":"643209945c01a39ab542f00bbfb535882cf63bf5d39c59cd3498a186508365c2","access_level":"public","create_time":"$D2021-01-27T21:13:06.223Z","update_time":"$D2021-01-29T13:05:35.794Z","view_time":null,"first_public_time":"$D2021-01-29T13:06:03.717Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":397,"publish_version":397,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"MyWheels colors","cells":[{"id":0,"value":"md`# MyWheels colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"html`

${JSON.stringify(\n  colors\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"html`

${Object.entries(\n  colors\n)\n  .map(([name, color]) => `--${name}: ${color};`)\n  .join(\"\\n\")}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"darken = polished.darken","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"lighten = polished.lighten","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"mix = polished.mix","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"polished = import('https://unpkg.com/polished@4.1.0/dist/polished.esm.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body" 24:null 28:[["$","title","0",{"children":"MyWheels colors | Kelley van Evert | Observable"}],["$","meta","1",{"property":"og:title","content":"MyWheels colors"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Kelley van Evert"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@kelleyvanevert/mywheels-colors"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/643209945c01a39ab542f00bbfb535882cf63bf5d39c59cd3498a186508365c2.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"MyWheels colors"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Kelley van Evert"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/643209945c01a39ab542f00bbfb535882cf63bf5d39c59cd3498a186508365c2.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L34","17",{}]]