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:{"title":"MyWheels colors","cells":[{"id":0,"value":"md`# MyWheels colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"darken = polished.darken","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"lighten = polished.lighten","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"mix = polished.mix","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"polished = import('https://unpkg.com/polished@4.1.0/dist/polished.esm.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}