Experiment: Add new palette system colors via in-browser mixing

[marcustyphoon]

Here's an interesting idea that I'm about 5 hours of experimenting into: with a bump in minimum Chrome version, one can generate the color variables for the new Tumblr palette system in-browser using CSS color-mix. This allows a single set of CSS transform variables to be used to transform the "base" colors from the True Blue (in theory), 2016, Decision, and 2013 palettes, as well as any custom user palettes (with admittedly somewhat mixed results quality-wise), into a full set of the new variables.

Closes #203, closes #204.

I don't love bumping the Chrome version to 111 here, as it results in an interesting scenario where Windows 8 users (who are limited to Firefox 115 or Chrome 109) can use this extension only in Firefox, and can use XKit Rewritten only in Chrome. One option here is to put the block of CSS transform variables behind an @supports rule and just fall back to the unmodified colors on new Tumblr pages on older browsers.

Edit: Did the above; see comment below.

Anyway, this also includes the new variables for all of the built-in Tumblr palettes (copied from the site with no CSS trickery).

I wish I had some custom palettes to test this with! I just have one, which I made based on one of Kat's posts:

{
  "palette:kat:1676250484014": {
    "accent": "124,95,140",
    "black": "169,140,185",
    "blue": "169,140,185",
    "follow": "86,64,90",
    "green": "169,140,185",
    "name": "kat",
    "navy": "58,46,62",
    "orange": "169,140,185",
    "pink": "169,140,185",
    "purple": "169,140,185",
    "red": "169,140,185",
    "secondary-accent": "95,79,100",
    "white": "76,64,81",
    "white-on-dark": "169,140,185",
    "yellow": "169,140,185"
  }
}

[marcustyphoon]

CSS.supports-based fallback implemented and tested in Chromium 88.

Fun fact I learned: you can't use var() in a supports() query; it'll always appear supported if you do: https://stackoverflow.com/a/78064183

(Also, old Chromium version testing resources: https://vikyd.github.io/download-chromium-history-version/; xattr -cr [app file], npx web-ext run -t chromium --chromium-binary='[path]/Chromium.app/Contents/MacOS/Chromium')

[marcustyphoon]

Hm. Honestly, it may be worth tweaking the default color-mix source to not perfectly reproduce True Blue, but to make more sense in a generic use case. For example,--chrome-ui-fg and its ilk in True Blue are black, so I based them on the black variable, but it's a color that goes on an accent-based background and that results in very little contrast in a lot of cases so many of Tumblr's other palettes seem to base it on navy (which accent logically has to contrast with). Obviously letting custom themes override these would be ideal, but a good default is also important.

This will, of course, be easier when we have more UI elements that use these variables to examine.