diff --git a/resources.whatwg.org/standard-service-worker.js b/resources.whatwg.org/standard-service-worker.js index b23dc4b8f..d68e7c421 100644 --- a/resources.whatwg.org/standard-service-worker.js +++ b/resources.whatwg.org/standard-service-worker.js @@ -8,7 +8,7 @@ const standardShortname = location.host.split(".")[0]; -const cacheKey = "v12"; +const cacheKey = "v13"; const toCache = [ location.origin + "/", "https://resources.whatwg.org/spec.css", diff --git a/resources.whatwg.org/standard.css b/resources.whatwg.org/standard.css index daabfb845..d0821df04 100644 --- a/resources.whatwg.org/standard.css +++ b/resources.whatwg.org/standard.css @@ -525,3 +525,46 @@ pre > code.css, pre.highlight.lang-css { width: 2.3em; } } + +/* https://github.com/speced/bikeshed/blob/main/bikeshed/stylescript/var-click-highlighting.css: */ +/* +Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ +D50 2deg illuminant, L in [0,100], a and b in [-128, 128] +0 = lab(85,0,85) +1 = lab(85,80,30) +2 = lab(85,-40,40) +3 = lab(85,-50,0) +4 = lab(85,5,15) +5 = lab(85,-10,-50) +6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) +*/ + +[data-algorithm] var { cursor: pointer; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +}