@@ -525,3 +525,46 @@ pre > code.css, pre.highlight.lang-css {
525
525
width : 2.3em ;
526
526
}
527
527
}
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