Skip to content

Commit f4844f6

Browse files
authored
Copy Bikeshed's var-click-highlighting.css to standard.css
See whatwg/html#11392 (comment), 6th bullet.
1 parent 4df08fa commit f4844f6

File tree

2 files changed

+44
-1
lines changed

2 files changed

+44
-1
lines changed

resources.whatwg.org/standard-service-worker.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
const standardShortname = location.host.split(".")[0];
1010

11-
const cacheKey = "v12";
11+
const cacheKey = "v13";
1212
const toCache = [
1313
location.origin + "/",
1414
"https://resources.whatwg.org/spec.css",

resources.whatwg.org/standard.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,3 +525,46 @@ pre > code.css, pre.highlight.lang-css {
525525
width: 2.3em;
526526
}
527527
}
528+
529+
/* https://github.com/speced/bikeshed/blob/main/bikeshed/stylescript/var-click-highlighting.css: */
530+
/*
531+
Colors were chosen in Lab using https://nixsensor.com/free-color-converter/
532+
D50 2deg illuminant, L in [0,100], a and b in [-128, 128]
533+
0 = lab(85,0,85)
534+
1 = lab(85,80,30)
535+
2 = lab(85,-40,40)
536+
3 = lab(85,-50,0)
537+
4 = lab(85,5,15)
538+
5 = lab(85,-10,-50)
539+
6 = lab(85,35,-15)
540+
541+
For darkmode:
542+
0 = oklab(50% 0% 108%)
543+
1 = oklab(50% -51% 51%)
544+
2 = oklab(50% -64% -20%)
545+
3 = oklab(50% 6% 19%)
546+
4 = oklab(50% -12% -64%)
547+
5 = oklab(50% 44% -19%)
548+
6 = oklab(50% 102% 38%)
549+
*/
550+
551+
[data-algorithm] var { cursor: pointer; }
552+
var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }
553+
554+
var[data-var-color] { --var-bg: #F4D200; }
555+
var[data-var-color="1"] { --var-bg: #FF87A2; }
556+
var[data-var-color="2"] { --var-bg: #96E885; }
557+
var[data-var-color="3"] { --var-bg: #3EEED2; }
558+
var[data-var-color="4"] { --var-bg: #EACFB6; }
559+
var[data-var-color="5"] { --var-bg: #82DDFF; }
560+
var[data-var-color="6"] { --var-vg: #FFBCF2; }
561+
562+
@media (prefers-color-scheme: dark) {
563+
var[data-var-color] { --var-bg: #bc1a00; }
564+
var[data-var-color="1"] { --var-bg: #007f00; }
565+
var[data-var-color="2"] { --var-bg: #008698; }
566+
var[data-var-color="3"] { --var-bg: #7f5b2b; }
567+
var[data-var-color="4"] { --var-bg: #004df3; }
568+
var[data-var-color="5"] { --var-bg: #a1248a; }
569+
var[data-var-color="6"] { --var-vg: #ff0000; }
570+
}

0 commit comments

Comments
 (0)