31:T4f5,colorPairs = [ ...d3 .rollup( data, // 1. rollup a 2d array of all tokens (tokens) => tokens.map((f) => tokens.map((b) => { // 3. and compute the foreground, background, and relative luminance (per WCAG standard) const fgLum = luminanceMap.get(f.value), bgLum = luminanceMap.get(b.value), luminanceRelative = utils.calculateRelativeLuminance( fgLum, bgLum ); // compile set of color data for charting return { fgKey: f.key, fgColor: f.value, fgLum, bgKey: b.key, bgColor: b.value, bgLum, theme: tokens[0].theme, luminanceRelative, classification: luminanceRelative >= 3 ? luminanceRelative >= 4.5 ? "any-text" : "large-only" : "never" }; }) ), // 2. for every theme (d) => d.theme ) .values() ] // 4. flatten it into a list, sorted by contrast ratio .flat(2) .sort((a, b) => d3.ascending(a.luminanceRelative, b.luminanceRelative))32:T892,{ const x = "bgKey", y = "fgKey", xDomain = betterTokenSort.filter( (t) => colorPairs.filter( (p) => p[x] === t && p.luminanceRelative >= 3 && p.fgLum >= p.bgLum ).length > 0 ), yDomain = betterTokenSort.filter( (t) => colorPairs.filter( (p) => p[y] === t && p.luminanceRelative >= 3 && p.fgLum >= p.bgLum ).length > 0 ); const inBoth = { dark: xDomain.find((x) => yDomain.includes(x)), light: xDomain.findLast((x) => yDomain.includes(x)) }; return htl.html`

${Plot.plot({ width, marginLeft: 100, marginBottom: 100, x: { label: "background color", grid: true, tickRotate: isMobile ? 90 : 45, domain: chartOptions.includeInverseAndNull ? betterTokenSort : xDomain }, y: { label: "foreground color", reverse: true, domain: chartOptions.includeInverseAndNull ? betterTokenSort : yDomain }, symbol: { legend: true, domain: ["any-text", "large-only", "never"], range: ["circle", "square2", "asterisk"] }, marks: [ Plot.link([inBoth], { x1: "dark", y1: "dark", x2: "light", y2: "light", stroke: "lightgrey", strokeWidth: 2, markerStart: "circle", markerEnd: "arrow" }), Plot.text(Object.entries(inBoth), { fill: "grey", x: "1", y: "1", text: "0", dx: chartOptions.includeInverseAndNull ? 15 : 20 }), Plot.dot(paletteSelector, { x, y, fill: "fgColor", stroke: "bgColor", strokeWidth: chartOptions.includeInverseAndNull ? 1 : 3, r: chartOptions.includeInverseAndNull ? 4 : 8, filter: (d) => d.luminanceRelative > 3, symbol: "classification" }) ] })}

${md`The chart axes are sorted by the _average luminance of a token_ from all themes to provide a consistent chart layout across themes. This should help with visualizing the "gaps" – where **a valid color combination in one theme is inaccessible in another**.`}

`; }33:Te70,// todo: color should be any-text/large-only/never/any-text-large // color: inner: best, outer: worst // symbol: circle: consistent // square: inconsistent // asterisk: unusable (always-never) chartConsistency = { const x = "bgKey", y = "fgKey", xDomain = betterTokenSort.filter( (t) => colorPairs.filter( (p) => p[x] === t && p.luminanceRelative >= 3 && p.fgLum >= p.bgLum ).length > 0 ), yDomain = betterTokenSort.filter( (t) => colorPairs.filter( (p) => p[y] === t && p.luminanceRelative >= 3 && p.fgLum >= p.bgLum ).length > 0 ); const inBoth = { dark: xDomain.find((x) => yDomain.includes(x)), light: xDomain.findLast((x) => yDomain.includes(x)) }; return htl.html`

${Plot.plot({ width, marginLeft: 100, marginBottom: 100, symbol: { legend: true, domain: ["consistent", "inconsistent", "unusable"], range: ["circle", "square", "asterisk"] }, color: { legend: "ramp", domain: classificationMap, range: ["pink", "lightblue", "black"] }, r: { domain: [1, 2, 3], range: [3, 5, 7] }, x: { label: "background color", tickRotate: 45, domain: chartOptions.includeInverseAndNull ? betterTokenSort : xDomain }, y: { label: "foreground color", reverse: true, domain: chartOptions.includeInverseAndNull ? betterTokenSort : yDomain }, marks: [ Plot.link([inBoth], { x1: "dark", y1: "dark", x2: "light", y2: "light", stroke: "lightgrey", strokeWidth: 2, markerStart: "circle-stroke", markerEnd: "arrow" }), Plot.dot( colorPairs.filter(({ theme }) => chartOptions.themes.includes(theme)), Plot.group( { // symbol: circle: consistent // square: inconsistent // asterisk: unusable (always-never) symbol: (g) => { const m = d3.group(g, (d) => d); if (m.size === 1) { if (m.has("never")) return "unusable"; return "consistent"; } return "inconsistent"; }, fill: (g) => classificationMap[d3.min(g)], stroke: (g) => classificationMap[d3.max(g)], opacity: (g) => !chartOptions.onlyInconsistent || d3.group(g, (d) => d).size > 1, r: "distinct", tip: (g) => { if (g.length > 9) console.log("biggie", g); return `${g[0].bgKey} + ${g[0].fgKey}\n${d3 .flatRollup( g, (g) => g.map((d) => d.theme).join(", "), (d) => d.classification ) .map(([k, v]) => `${k}: ${v}`) .join("\n")}`; } }, { x: "bgKey", y: "fgKey", symbol: "classification", r: "classification", opacity: "classification", fill: (d) => classificationMap.indexOf(d.classification), stroke: (d) => classificationMap.indexOf(d.classification) } ) ), Plot.text(Object.entries(inBoth), { fill: "grey", x: "1", y: "1", text: "0", dx: chartOptions.includeInverseAndNull ? 15 : 20 }) ] })}

Squares indicate mismatched usage across themes and are always two colors. The inner color indicates the worst-case usage (often "never use") and the outer color indicates the best-case usage("any-text" or "headings-only").

`; }34:T50d,editedColorPairs = [ ...d3 .rollup( editedData, // 1. rollup a 2d array of all tokens (tokens) => tokens.map((f) => tokens.map((b) => { // 3. and compute the foreground, background, and relative luminance (per WCAG standard) const fgLum = editedLuminanceMap.get(f.value), bgLum = editedLuminanceMap.get(b.value), luminanceRelative = utils.calculateRelativeLuminance( fgLum, bgLum ); // compile set of color data for charting return { fgKey: f.key, fgColor: f.value, fgLum, bgKey: b.key, bgColor: b.value, bgLum, theme: tokens[0].theme, luminanceRelative, classification: luminanceRelative >= 3 ? luminanceRelative >= 4.5 ? "any-text" : "large-only" : "never" }; }) ), // 2. for every theme (d) => d.theme ) .values() ] // 4. flatten it into a list, sorted by contrast ratio .flat(2) .sort((a, b) => d3.ascending(a.luminanceRelative, b.luminanceRelative))35:Tf12,// todo: color should be any-text/large-only/never/any-text-large // color: inner: best, outer: worst // symbol: circle: consistent // square: inconsistent // asterisk: unusable (always-never) editedConsistencyChart = { const x = "bgKey", y = "fgKey", xDomain = editedBetterTokenSort.filter( (t) => editedColorPairs.filter( (p) => p[x] === t && p.luminanceRelative >= 3 && p.fgLum >= p.bgLum ).length > 0 ), yDomain = editedBetterTokenSort.filter( (t) => editedColorPairs.filter( (p) => p[y] === t && p.luminanceRelative >= 3 && p.fgLum >= p.bgLum ).length > 0 ); const inBoth = { dark: xDomain.find((x) => yDomain.includes(x)), light: xDomain.findLast((x) => yDomain.includes(x)) }; return htl.html`

${Plot.plot({ width, height: (width / 3) * 2, marginLeft: 100, marginBottom: 100, symbol: { legend: true, domain: ["consistent", "inconsistent", "unusable"], range: ["circle", "square", "asterisk"] }, color: { label: "Contrast Variance (across themes)", legend: true, nice: true }, r: { domain: [1, 2, 3], range: [3, 5, 7] }, x: { label: "background color", tickRotate: 45, domain: chartOptions.includeInverseAndNull ? betterTokenSort : xDomain }, y: { label: "foreground color", reverse: true, domain: chartOptions.includeInverseAndNull ? betterTokenSort : yDomain }, marks: [ Plot.link([inBoth], { x1: "dark", y1: "dark", x2: "light", y2: "light", stroke: "lightgrey", strokeWidth: 2, markerStart: "circle-stroke", markerEnd: "arrow" }), Plot.dot( editedColorPairs.filter(({ theme }) => chartOptions.themes.includes(theme) ), Plot.group( { // symbol: circle: consistent // square: inconsistent // asterisk: unusable (always-never) symbol: (g) => { const m = d3.group(g, (d) => d); if (m.size === 1) { if (m.has("never")) return "unusable"; return "consistent"; } return "inconsistent"; }, stroke: (g) => { const ext = d3.extent(g, (d) => d); return ext[1] - ext[0]; }, fill: (g) => { const ext = d3.extent(g, (d) => d); return ext[1] - ext[0]; }, opacity: (g) => !chartOptions.onlyInconsistent || d3.group(g, (d) => d).size > 1, r: "distinct", title: (g) => { if (g.length > 9) console.log("biggie", g); return `${g[0].bgKey} + ${g[0].fgKey}\n${d3 .flatRollup( g, (g) => g.map((d) => d.theme).join(", "), (d) => d.classification ) .map(([k, v]) => `${k}: ${v}`) .join("\n")}`; } }, { x: "bgKey", y: "fgKey", symbol: "classification", r: "classification", opacity: "classification", fill: "luminanceRelative", stroke: "luminanceRelative" } ) ), Plot.text(Object.entries(inBoth), { fill: "grey", x: "1", y: "1", text: "0", dx: chartOptions.includeInverseAndNull ? 15 : 20 }) ] })}

`; }36:T4c5,{ const data = problemTokens.map((d) => d.rows.map((d) => d.rows)).flat(2); return Plot.plot({ // insetLeft: 400, width, height: (width * problemTokens.length) / 2, marginBottom: 100, x: { nice: true, tickRotate: 45 }, fy: { tickRotate: -90 }, style: { backgroundColor: "lightgray" }, facet: { data, x: "theme", y: "classification" }, marks: [ Plot.frame(), // Plot.dotY( // data, // Plot.dodgeY({ // x: "bgKey", // y: "luminanceRelative", // stroke: "bgColor", // strokeWidth: 4, // padding: 4, // r: 8, // fill: "fgColor", // title: (d) => `${d.theme}: ${d.fgKey},${d.bgKey}`, // sort: { y: "x" } // }) // ), Plot.textY( data, Plot.dodgeY({ padding: 4, fontSize: 12, r: 8, anchor: "middle", x: "bgKey", y: "luminanceRelative", stroke: "bgColor", strokeWidth: 8, fill: "fgColor", title: (d) => `${d.theme}: ${d.fgKey},${d.bgKey}`, text: (d) => d3.format(".2f")(d.luminanceRelative) }) ) ] }); }37:[{"id":"64fe65f419d81f8a9f7812e9fce0773c34ee234a997b2895fd373898f7ec16f9b6e1680012baa3279c8a55e8d79148ae613f50a57e385556f282a845ea2c1d19","href":"https://static.observableusercontent.com/files/64fe65f419d81f8a9f7812e9fce0773c34ee234a997b2895fd373898f7ec16f9b6e1680012baa3279c8a55e8d79148ae613f50a57e385556f282a845ea2c1d19","name":"themes.json","type":"application/json","lastModified":1661569172626.323,"size":54146}] 2f:{"title":"Accessible color pairs in a multi-theme Design System","cells":[{"id":1112,"value":"# Accessible color pairs in a multi-theme Design System","pinned":false,"hidden":false,"mode":"md"},{"id":1068,"value":"> This notebook illustrates the required limitations imposed upon the use of colors in a design system to ensure accessible color contrast","pinned":false,"hidden":false,"mode":"md"},{"id":2164,"value":"toc({\n headers: \"h2,h3,h4\",\n hideStartingFrom: \"Utilities\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"Design systems are extremely flexible tools for coordinating and managing the UI of a site at scale. However, that flexibility needs constraints in order to provide an accessible experience.\n\n- Some color pairs only have enough contrast to be used be in headings and bold text - which ones?\n- Some color pairs are accessible on one theme but not another - should those pairs be available?\n- If they're made available, how do we inform editors and developers that their use is high risk and easily auditable?","pinned":false,"hidden":false,"mode":"md"},{"id":1168,"value":"viewof i = {\n // static init\n const DELAY = 200;\n // dynamic init\n let progress = this?.value?.progress || 0;\n let previous = this?.value?.prev || [];\n let use = this?.value?.use || randomBadPair();\n\n let good = use.any || use.heading;\n let bad = use.never;\n\n let UI = this || demoTemplate((progress * 100) / DELAY, { good, bad, use });\n UI.value = { progress, previous, use };\n\n if (paused) return yield UI;\n\n // render loop & revalidate\n while (true) {\n if (progress > DELAY) {\n progress = 0;\n use = randomBadPair();\n good = use.any || use.heading;\n bad = use.never;\n }\n UI = demoTemplate((progress * 100) / DELAY, { good, bad, use });\n UI.value = { progress: ++progress, previous, use };\n\n yield UI;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"viewof paused = Inputs.toggle({ label: \"Pause\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"## Background","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"First, we need the full collection of theme color values, according to `@homebase/design-tokens`:","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"colorsModule = {\n const module = await FileAttachment(\"themes.json\").json();\n\n return Object.entries(module).reduce((acc, [themeName, { colors }]) => {\n // return colors as a flat list of {key,value}\n const allColors = Object.entries(colors).reduce(entriesToFlat, []);\n // add the theme ID to the record\n return acc.concat(allColors.map((d) => ({ theme: themeName, ...d })));\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2800,"value":"rawData = aq.from(colorsModule)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$${rawData.length} is quite a lot of values, as you can see:","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"Plot.plot({\n width,\n marginBottom: 100,\n x: { tickRotate: 65 },\n facet: { marginLeft: 100, data: rawData, y: isMobile ? \"key\" : \"theme\" },\n marks: [\n Plot.cell(rawData, {\n x: isMobile ? \"theme\" : \"key\",\n // y: \"theme\",\n fill: \"value\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"_that's ${tokenList.length} tokens_","pinned":false,"hidden":false,"mode":"md"},{"id":2821,"value":"tokenList = rawData.groupby(\"key\").array(\"key\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"_across ${themes.size} themes_","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"themes = d3.rollup(\n rawData,\n (g) => g[0].value,\n (d) => d.theme,\n (d) => d.key\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"We can tell visually which tokens vary across themes (since the ${isMobile?\"row\":\"column\"} appears inconsistent) but we need to group and sort them accordingly","pinned":false,"hidden":false,"mode":"md"},{"id":2860,"value":"data = rawData\n .groupby(\"key\")\n .derive({\n count: op.count(),\n distinct: op.distinct(\"value\")\n })\n .derive({\n themed: (d) => !op.equal(d.distinct, 1)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"{\n const isThemed = d3.rollup(\n data,\n (g) => g.length,\n (d) => d.themed,\n (d) => d.key\n );\n return md`There are **${\n isThemed.get(true).size\n } tokens** with at least one non-uniform diverging color value (\"themed\") and **${\n isThemed.get(false).size\n } tokens** which have a singular color value across all themes`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"Plot.plot({\n width,\n marginLeft: 100,\n marginBottom: 100,\n x: { tickRotate: 45 },\n facet: { data: data, [isMobile ? \"x\" : \"y\"]: \"themed\" },\n marks: [\n Plot.frame(),\n Plot.cell(data, {\n y: isMobile ? \"key\" : \"theme\",\n x: isMobile ? \"theme\" : \"key\",\n fill: \"value\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3444,"value":"themed = d3.rollup(\n data,\n (g) => g.map((d) => d),\n (d) => d.themed,\n (d) => d.key\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"## Color Pairs\nNow that we have a basic understanding of the variability of color tokens in the design system, we can take a look at how many combinations of colors can be paired together as foreground text color / background color combinations.\n\n> **Note** we're not considering pairing of tokens across themes (eg wayfair's ${textColor(\"core.10\",{theme:\"wayfair\"})} purple with allmodern's ${textColor(\"core.50\",{theme:\"waypro\"})}) as our styling infrastructure is not built to support that.","pinned":false,"hidden":false,"mode":"md"},{"id":2658,"value":"notice(\n md`If you're new to checking your text for color contrast, and why it's important, read up on it with the tool at [webaim](https://webaim.org/resources/contrastchecker/).`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"From the list of all tokens on all themes, we generate a comprehensive palette of color pairings (${tokenList.length}² x ${themes.size} === ${tokenList.length **2 *themes.size}):","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"We'll also build a sorted list of luminance values (each color's brightness) in order to be able to sort the colors in the coming charts.","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"// a quick lookup table since color values are re-used quite often\nluminanceMap = d3.rollup(\n data,\n (g) => utils.calculateLuminance(g[0].value),\n (d) => d.value\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"### Chart\nWith all this done, we can take a look at just one theme (${paletteSelector[0].theme}) and see which color pairs are usable together:","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"viewof paletteSelector = Inputs.select(\n d3.group(colorPairs, (d) => d.theme),\n { label: \"Theme\", key: \"wayfair\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"htl.html`Recommended: click to {\n e.preventDefault();\n set(viewof chartOptions, { ...chartOptions, includeInverseAndNull: false });\n}}>limit the chart extent
( {\n e.preventDefault();\n set(viewof chartOptions, { ...chartOptions, includeInverseAndNull: true });\n}}>show all, including foreground/background inversions and unusable pairs)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2475,"value":"notice(\n md`For the ${paletteSelector[0].theme} theme, ${\n selectedSimilarityRatio < 0.5\n ? selectedSimilarityRatio < 0.3\n ? \"less than a third of\"\n : \"nearly half of\"\n : \"more than half of\"\n } the color pairs are too similar to ever be used together (${d3.format(\n \".2%\"\n )(\n selectedSimilarityRatio\n )}) as they have less than the minimum contrast of 3:1.\n\nThis is something of a mathematical constant dependent upon the number of color stops in your gradients. The color contrast of two colors can at most be is

${utils.calculateRelativeLuminance(\n    utils.calculateLuminance(\"white\"),\n    utils.calculateLuminance(\"black\")\n  )}:1

(black vs. white). So the more gradient stops you add, the fewer usable pairs you'll have.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"// tokens sorted by average brightness across all themes, from darkest to lightest\nbetterTokenSort = d3.groupSort(\n data,\n (g) => d3.mean(g, (d) => luminanceMap.get(d.value)),\n (d) => d.key\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2454,"value":"// the ratio of tokens which can never be used together\nselectedSimilarityRatio = d3\n .flatRollup(paletteSelector, (g) => g.length, (d) => d.classification )\n .reduce((acc, [key, count], i, arr) => {\n if (key === \"never\"){ acc.num += count;} acc.denom += count;\n // compute the ratio on the last element\n if (i === arr.length - 1) {return acc.num / acc.denom;}\n return acc;\n },\n { num: 0, denom: 0 }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2148,"value":"### Color Pair Meta-analysis","pinned":false,"hidden":false,"mode":"md"},{"id":785,"value":"An interactive display of color difference is good for understanding the underlying principle, but what we really want to know is **what token pairs should be made available to site editors and when**?\n\n- What color combinations should only be used on heading elements? There are cases where a color pair is sufficient contrast on one brand\n- How should inconsistent pairs (less accessible on one theme than others) be available to editors? How do we inform users that using the same content on another theme would be inaccessible to our users?","pinned":false,"hidden":false,"mode":"md"},{"id":1089,"value":"We first create mapping of all the color tokens and how accessible they are on each brand (click to expand):","pinned":false,"hidden":false,"mode":"md"},{"id":572,"value":"validations = d3.rollup(\n colorPairs,\n (g) => g.map((d) => d.theme),\n (d) => d.fgKey,\n (d) => d.bgKey,\n (d) => d.classification\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2629,"value":"This mapping can be used to explore the differences in each brand, and highlight which tokens are consistent.","pinned":false,"hidden":false,"mode":"md"},{"id":3819,"value":"viewof chartOptions = Inputs.form(\n {\n themes: Inputs.checkbox([...themes.keys()], {\n label: html`Compare Themes
select themes to compare their color token use`,\n value: [...themes.keys()]\n }),\n includeInverseAndNull: Inputs.toggle({\n label: html`Show all
uncheck to skip unusable pairs and color inversions`,\n value: true\n }),\n onlyInconsistent: Inputs.toggle({\n label: html`inconsistent only
only show pairs whose usability varies`,\n value: false\n })\n },\n {\n template: (inputs) =>\n notice(\n md`Shared chart settings help with visual consistency\n\n${Object.values(inputs).map((i) => htl.html`${i}`)}`\n )\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3831,"value":"limitThemePresets = htl.html`Theme Presets: {\n e.preventDefault();\n set(viewof chartOptions, {\n ...chartOptions,\n themes: [\"allmodern\", \"birchlane\", \"jossandmain\", \"perigold\", \"wayfair\"]\n });\n}}>storefront, {\n e.preventDefault();\n set(viewof chartOptions, {\n ...chartOptions,\n themes: [\"internaltools\", \"partnerhome\", \"homebase\"]\n });\n}}>internal, {\n e.preventDefault();\n set(viewof chartOptions, { ...chartOptions, themes: [...themes.keys()] });\n}}>all\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2606,"value":"notice(\n md`See below for a guide to all the symbols and colors used in the chart. Color signifies where that color pair can be used.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2051,"value":"{\n const data = classificationMap\n .map((best, i, arr) =>\n arr.map((worst) => ({\n best,\n worst,\n classification:\n best === worst\n ? best === \"never\"\n ? \"unusable\"\n : \"consistent\"\n : \"inconsistent\"\n }))\n )\n .flat();\n\n return Plot.plot({\n marginLeft: 100,\n x: { label: \"best case\", domain: classificationMap, reverse: true },\n y: { label: \"worst case\", domain: classificationMap, reverse: true },\n symbol: {\n legend: true,\n range: [\"circle\", \"square\", \"asterisk\"]\n },\n color: {\n legend: true,\n domain: classificationMap,\n // reverse: true,\n range: [\"pink\", \"lightblue\", \"black\"],\n legend: \"ramp\"\n },\n\n marks: [\n Plot.dot(data, {\n x: \"best\",\n y: \"worst\",\n symbol: \"classification\",\n fill: \"worst\",\n stroke: \"best\",\n strokeWidth: 2,\n r: 6\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2067,"value":"classificationMap = [\"never\", \"large-only\", \"any-text\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"flatWarnings = d3\n .flatRollup(\n colorPairs,\n (g) =>\n g.reduce((acc, { theme, classification }) => {\n if (!acc[classification]) acc[classification] = [];\n acc[classification].push(theme);\n\n return acc;\n }, {}),\n (d) => d.fgKey,\n (d) => d.bgKey\n // (d) => d.theme\n )\n .map(([fg, bg, issues]) => ({ fg, bg, issues }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3800,"value":"---\n## Addressing color consistency","pinned":false,"hidden":false,"mode":"md"},{"id":3749,"value":"Once you know which color pairs are problematic across the set of themes, you can start to systematically adjust color values to make them more consistent.\n\nWe'll prioritize the colors with the greatest divergence in contrast ratio - where they're high contrast in one theme but low contrast in another.","pinned":false,"hidden":false,"mode":"md"},{"id":2734,"value":"To start with, we need the ability to override token values. We'll create a re-useable object to store the palette and edit color token values:","pinned":false,"hidden":false,"mode":"md"},{"id":3588,"value":"editedData = aq.from([\n ...Object.entries(editedGlobalTokens)\n .map(([key, value]) =>\n [...themes.keys()].map((theme) => ({ theme, key, value }))\n )\n .flat(),\n ...Object.entries(editedThemePalette)\n .map(([key, value]) => ({\n theme: key.split(\".\")[0],\n key: key.split(\".\").slice(1).join(\".\"),\n value\n }))\n .flat()\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3781,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3784,"value":"// a quick lookup table since color values are re-used quite often\neditedLuminanceMap = d3.rollup(\n editedData,\n (g) => utils.calculateLuminance(g[0].value),\n (d) => d.value\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3788,"value":"// tokens sorted by average brightness across all themes, from darkest to lightest\neditedBetterTokenSort = d3.groupSort(\n editedData,\n (g) => d3.mean(g, (d) => editedLuminanceMap.get(d.value)),\n (d) => d.key\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3509,"value":"paletteTemplate = (name = theme) =>\n (i) =>\n Object.entries(i).reduce((acc, [k, v], i, arr) => {\n const [theme, ...token] = k.split(\".\");\n\n if (i === arr.length - 1) {\n return htl.html`

${Object.values(acc)[0].map(\n ({ token, input }) => htl.html``\n )}${Object.entries(acc).map(\n ([theme, inputs]) =>\n htl.html`${inputs.map(\n ({ token, input }) => htl.html``\n )}`\n )}

${name}	${token}
${theme}	${input}

`;\n }\n\n // store a theme on the carry object\n if (!acc[theme]) acc[theme] = [];\n\n acc[theme].push({ token: token.join(\".\"), input: v });\n return acc;\n }, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3881,"value":"// grab all the bad tokens (to mark particular inputs as disabled)\neditedInconsistentTokens = d3.group(editedColorPairs,)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3765,"value":"### edit global colors","pinned":false,"hidden":false,"mode":"md"},{"id":3450,"value":"viewof editedGlobalTokens = Inputs.form(\n Object.fromEntries(\n [...themed.get(false).entries()].map(([token]) => [\n token,\n Inputs.color({\n width: \"100%\",\n // label: \"123\",\n value: themes.get(\"wayfair\").get(token)\n })\n ])\n ),\n {\n // template has to take a flat list and turn it into 2d palette\n template: paletteTemplate(\"group\")\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3774,"value":"### edit themed colors","pinned":false,"hidden":false,"mode":"md"},{"id":3358,"value":"viewof editedThemePalette = Inputs.form(\n Object.fromEntries(\n [...themed.get(true).entries()]\n .map(([token, tokens]) =>\n tokens.map((t) => [\n `${t.theme}.${t.key}`,\n Inputs.color({\n width: \"100%\",\n // label: \"123\",\n value: t.value\n })\n ])\n )\n .flat()\n ),\n {\n // template has to take a flat list and turn it into 2d palette\n template: paletteTemplate(\"theme\")\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3777,"value":"### Visualize Changes","pinned":false,"hidden":false,"mode":"md"},{"id":3116,"value":"noticeVisualizeChanges = notice(\n md`This diagram is clearest if you ${htl.html` {\n e.preventDefault();\n set(viewof chartOptions, { ...chartOptions, includeInverseAndNull: false });\n }}>only show inconsistent tokens`} (${htl.html` {\n e.preventDefault();\n set(viewof chartOptions, { ...chartOptions, includeInverseAndNull: true });\n }}>show all`})`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2738,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2766,"value":"problemPairs = aq\n .from(colorPairs)\n .groupby(\"fgKey\", \"bgKey\")\n .rollup({\n useTypes: op.distinct(\"classification\"),\n minContrast: op.min(\"luminanceRelative\"),\n maxContrast: op.max(\"luminanceRelative\"),\n rows: (d) => op.array_agg(op.row_object())\n })\n .derive({ delta: (d) => d.maxContrast - d.minContrast }, { before: \"rows\" })\n .filter((d) => d.useTypes > 1)\n .orderby(aq.desc((d) => d.maxContrast - d.minContrast))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3057,"value":"We'll take a look at the most problematic tokens, which have the largest number of problems:","pinned":false,"hidden":false,"mode":"md"},{"id":2942,"value":"viewof problemTokens = Inputs.table(\n problemPairs\n .groupby(\"fgKey\")\n .rollup({ count: op.count(), rows: (d) => op.array_agg(op.row_object()) })\n .orderby(aq.desc(\"count\")),\n {\n columns: [\"fgKey\", \"count\"],\n header: { fgKey: \"problem token\" },\n required: false\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3215,"value":"problemPairs.filter((d) => d.fgKey === \"tertiary\").view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3202,"value":"viewof fill = Inputs.color({\n label: \"Fill\",\n value: d3.color(\"steelblue\").formatHex()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3177,"value":" and the greatest divergence in contrast ratio","pinned":false,"hidden":false,"mode":"md"},{"id":2944,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"---\n## Self-validating Color Picker","pinned":false,"hidden":false,"mode":"md"},{"id":1795,"value":"md`Once upon ${textColor(\"a midnight dreary\", {\n color,\n theme\n})}, while ${textColor(\"I pondered, weak and weary\", { background, theme })}, \nOver many a quaint and curious volume of forgotten lore, \nWhile I ${textColor(\"nodded, nearly napping\", {\n theme,\n color\n})}${textColor(\", suddenly\", { theme, color, background })}${textColor(\n \" there came a tapping,\",\n { theme, background }\n)} \nAs of some one gently rapping, rapping at my chamber door.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1783,"value":"viewof theme = Inputs.select(themes, {\n label: \"Select Theme\",\n valueof: ([k, v]) => k\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1779,"value":"viewof color = Inputs.select([undefined, ...tokenList], {\n label: \"Select a color token\",\n value: \"neutrals.70\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1780,"value":"viewof background = Inputs.select([undefined, ...tokenList], {\n label: \"And another\",\n value: \"sale.50\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1933,"value":"htl.html`${\n check.has(\"never\")\n ? textColor(htl.html`ERROR: never accessible on...`, {\n theme,\n background: \"reds.60\"\n })\n : \"\"\n}\n${check\n .get(\"never\")\n ?.map((t) => Inputs.button([[t, () => set(viewof theme, t)]]))}\n${\n check.has(\"large-only\")\n ? textColor(\n htl.html`WARN: can only be used with headings on ${check\n .get(\"large-only\")\n .map(\n (t) =>\n htl.html` {\n e.preventDevault();\n set(viewof theme, t);\n }}>${t}`\n )\n .reduce((acc, el) => htl.html`${acc}, ${el}`)}`,\n {\n theme,\n background: \"yellows.30\"\n }\n )\n : \"\"\n}\n${check\n .get(\"large-only\")\n ?.map((t) => Inputs.button([[t, () => set(viewof theme, t)]]))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1857,"value":"check = validations.get(color).get(background)","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":1767,"value":"### Initial callout demo","pinned":false,"hidden":false,"mode":"md"},{"id":1212,"value":"demoTemplate = (progress, { good, bad, use }) =>\n notice(md`Color pairs accessible in one theme but not another (auto-updating):\n\n${good}|${bad}\n---|---\n${textColor(use.fg, { theme: good })} with ${textColor(use.bg, {\n theme: good\n })} | ${textColor(use.fg, { theme: bad })} with ${textColor(use.bg, {\n theme: bad\n })}\neg. ${textColor(`${use.fg} on ${use.bg}`, {\n theme: good,\n color: use.fg,\n background: use.bg\n })} | ${textColor(`${use.fg} on ${use.bg}`, {\n theme: bad,\n color: use.fg,\n background: use.bg\n })} \neg. ${textColor(`${use.bg} on ${use.fg}`, {\n theme: good,\n color: use.bg,\n background: use.fg\n })} | ${textColor(`${use.bg} on ${use.fg}`, {\n theme: bad,\n color: use.bg,\n background: use.fg\n })}\n✔️ use with ${\n use.any\n ? \"any text size\"\n : html`only headings ⚠️`\n } | ❌ never compliant\n\n${html`

`}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"shuffledValidations = shuffle([...validations.entries()])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"mutable badCache = new Map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"randomBadPair = () => {\n // outer:\n for (const [fg, backgrounds] of shuffledValidations) {\n for (const [bg, constraints] of backgrounds) {\n if (\n constraints.size > 1 &&\n constraints.has(\"never\") &&\n fg != bg &&\n !badCache.get(fg)?.get(bg)\n ) {\n const v = validations.get(fg).get(bg);\n if (!badCache.has(fg)) mutable badCache.set(fg, new Map());\n mutable badCache.get(fg).set(bg, true);\n\n return {\n fg,\n bg,\n never: v.get(\"never\")[0],\n any: v.get(\"any-text\")?.[0],\n heading: v.get(\"large-only\")?.[0]\n };\n // break outer;\n }\n }\n }\n // couldn't find anything? reset\n mutable badCache = new Map();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1759,"value":"### Shared","pinned":false,"hidden":false,"mode":"md"},{"id":1905,"value":"import { set } from \"@observablehq/synchronized-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"isMobile = window.matchMedia(\"(max-width: 600px)\").matches","pinned":true,"hidden":false,"mode":"ojs"},{"id":967,"value":"function entriesToFlat(acc, [key, value], i, arr, ctx = \"\") {\n if (typeof value === \"string\") acc.push({ key: `${ctx}${key}`, value });\n else if (typeof value === \"object\") {\n acc = acc.concat(\n Object.entries(value).reduce(\n (...args) => entriesToFlat(...args, `${ctx}${key}.`),\n []\n )\n );\n }\n\n return acc;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1127,"value":"// see \"@observablehq/text-color-annotations-in-markdown\nfunction textColor(content, { theme, ...style }) {\n theme = themes.get(theme);\n\n function yiq(color) {\n const { r, g, b } = d3.rgb(color);\n return (r * 299 + g * 587 + b * 114) / 1000 / 255; // returns values between 0 and 1\n }\n const {\n background = theme.get(content) ?? content,\n color = yiq(background) >= 0.6 ? \"#111\" : \"white\",\n padding = \"0 5px\",\n borderRadius = \"4pxf\",\n fontWeight = 800,\n ...rest\n } = Object.entries(style).reduce((obj, [k, v]) => {\n // if value is a valid design token, use it\n obj[k] = theme.get(v) ?? v;\n return obj;\n }, {});\n return htl.html`${content}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":847,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"utils = (await import(\"https://cdn.skypack.dev/@visa/visa-charts-utils\"))\n .default","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"function shuffle(array) {\n let currentIndex = array.length,\n randomIndex;\n\n // While there remain elements to shuffle.\n while (currentIndex != 0) {\n // Pick a remaining element.\n randomIndex = Math.floor(Math.random() * currentIndex);\n currentIndex--;\n\n // And swap it with the current element.\n [array[currentIndex], array[randomIndex]] = [\n array[randomIndex],\n array[currentIndex]\n ];\n }\n\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"import { styles } from \"@sgregson/styles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"import { notice, toc } from \"@sgregson/components\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2777,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}