Status Chart: Dark mode with Primer CSS

[StephanTLavavej]

This implements dark mode for the Status Chart and significantly improves its styling by using Primer CSS, which is what GitHub itself uses. This achieves much better results than a naive invert + hue-rotate, and (with special logic) also updates dynamically - most common on mobile, but you can easily test this on desktop by pressing F12, selecting the Elements > Styles tabs, then clicking the paintbrush to change prefers-color-scheme.

In general, I tried to keep most of the color choices I originally made, but I changed a few to look better, especially in dark mode.

As this is a major change, I've structured it into a series of commits.

• Primer CSS, part 1.
  • Attributes on the html element control dark mode.
  • My original handwritten stylesheet is totally superseded by Primer CSS.
  • On the body, container-xl allows the chart to get quite wide, but with a limit (most relevant on desktop). This helps it stay readable - the chart was hard to read on a fully maximized window. markdown-body makes list items, horizontal rules, etc. look nice. pt-2 px-3 pb-3 controls padding - without this, content goes all the way to the edge of the window. Padding level 3 looks reasonable, except that the Status Chart itself has a bit of blank space at the top, so I'm using padding level 2 there.
  • Buttons need the btn class to be styled like GitHub buttons, and the docs strongly advise type="button" too (which I was previously unaware of).
  • This replaces my currentValue bolding with Counter bubbles.
• Primer CSS, part 2: Label styling.
  • Instead of bolding labels, we can use GitHub's fancy style. (The "danger", "accent", etc. terms are not meaningful here - they are only being used to control colors.) I tried to match our actual label colors closely. I dropped some examples since it wasn't necessary to list tons of them, and I wanted unique colors to look nice.
• es-module-shims 1.5.8.
• Weekly updates.
• Extract make_yAxis().
  • This avoids 5x repetition, makes it easier to distinguish important vs common values, and will make it easier to add colors.
• Rename HiddenInfo to DatasetInfo.
  • I'm gonna wreck generalize it!
  • Previously, this stored whether each dataset preferred to be hidden by default, since we have to look it up when toggling the visibility of a dataset. Now, when dark mode updates, we'll need to look up the dataset's color name. This data structure is the perfect place to do so.
• Rename get_label_and_hidden() to get_dataset_properties().
• Move yAxisID into DatasetInfo.
  • This isn't needed later, but will help to organize this info more compactly (instead of being split between the DatasetInfoMaps and the options below).
  • type AxisID = `${string}Axis`; is a template literal type, providing a little defense against passing arguments in the wrong order.
• Move color into DatasetInfo.
  • This will be replaced, but I wanted to make this structural change first.
  • Previously, the merge_bar didn't have a backgroundColor and used a default translucent gray. Now it will have a flat solid color.
• Drop borderWidth: 1 on merge_bar.
• Extract make_common_options().
  • Avoids 3x repetition.
• Fuse common_options, common_plugins, common_title into make_common_options().
  • Now that the function handles the varying title_text, we can make it clearer what options we're building up.
• Use colors from Primer CSS.
  • In my terminology, a "color name" is the --color-MEOW that appears in Primer CSS. These can be looked up to get actual hex colors.
  • I was able to select colors from the preferred palette (again ignoring their "meanings") except that I really wanted Old Bugs to be a darker red, so I used --color-scale-red-7 which looks reasonably good in both light and dark mode.
  • These get_css_property() calls will retrieve the correct color for the mode that's active during initial page load. By itself, this will not update dynamically (Primer CSS will automatically update the non-chart HTML elements, but the chart is custom drawn).
• Use solid orange for cxx17.
  • The dotted purple line was confusing and somewhat hard to read.
• Update dark mode dynamically.
  • We can listen for dark mode changes, update each chart's options, scales, and datasets with the new colors, and then redraw the chart.
  • There's a perma-workaround for Types: scale.title does not exist when a legend onClick handler is specified chartjs/Chart.js#10442 here. By using LegendElement<'bar' | 'line'> (as our charts are either purely line, or bar + line combinations), we can more easily access scale.title below.
• npm update
• npm install [dependencies]@latest
• DROP BEFORE MERGING: Regen built/status_chart.mjs.
  • As usual, this enables the live preview, and will accumulate merge conflicts.

📉 🌃 Live preview: stephantlavavej.github.io/STL/

Screenshots:

Status Chart

Old

New (Light)

New (Dark)

Age Chart

Old

New (Light)

New (Dark)

Merge Chart

Old

New (Light)

New (Dark)