@@ -297,7 +297,6 @@ pre code {
297
297
}
298
298
299
299
pre code ,
300
- .hljs ,
301
300
.frame-body ,
302
301
.frame-tab-item-selected {
303
302
background-color : # fafafa !important ; /* Color from one-light */
@@ -583,7 +582,6 @@ button.success {
583
582
584
583
.navigation .icon {
585
584
display : block;
586
- vertical-align : middle;
587
585
width : auto;
588
586
height : calc (1em + 1ex );
589
587
}
@@ -660,9 +658,6 @@ button.success {
660
658
padding-inline-start : calc (0.5 * (1em + 1ex ));
661
659
}
662
660
663
- .nav-description {
664
- }
665
-
666
661
.skip-to-navigation {
667
662
inset-block-start : 0 ;
668
663
inset-inline-start : 0 ;
@@ -837,11 +832,13 @@ button.success {
837
832
overflow-y : auto;
838
833
}
839
834
840
- .frame-tab-bar + pre {
835
+ .frame-tab-bar + pre ,
836
+ .frame-tab-bar + .highlight > pre {
841
837
margin-block-start : 0 ;
842
838
}
843
839
844
- .frame-tab-bar + pre code {
840
+ .frame-tab-bar + pre code ,
841
+ .frame-tab-bar + .highlight > pre code {
845
842
--squircle-radius : 0 ;
846
843
border-top-left-radius : 0 ;
847
844
border-top-right-radius : 0 ;
@@ -946,6 +943,55 @@ details[open] {
946
943
padding : calc (1em + 1ex );
947
944
}
948
945
946
+ .rehype-twoslash-completion-deprecated {
947
+ opacity : 0.5 ;
948
+ }
949
+
950
+ .rehype-twoslash-popover-target {
951
+ cursor : default;
952
+ }
953
+
954
+ .highlight : is (: hover , : focus-within ) .rehype-twoslash-popover-target {
955
+ background-color : var (--gray-2 );
956
+ }
957
+
958
+ /* Wavy underline for errors. */
959
+ .rehype-twoslash-error-target {
960
+ background-repeat : repeat-x;
961
+ background-position : bottom left;
962
+ background-image : url ('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" enable-background="new 0 0 6 3" height="3" width="6"><g fill="%23c94824"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></g></svg>' );
963
+ }
964
+
965
+ /* The content that will be shown in the tooltip. */
966
+ .rehype-twoslash-popover {
967
+ position : absolute;
968
+ max-width : calc (45 * (1em + 1ex ));
969
+ padding : calc (0.5 * (1em + 1ex ));
970
+ margin : 0 ;
971
+ background-color : var (--bg );
972
+ border : 1px solid var (--gray-2 );
973
+ border-radius : 3px ;
974
+ }
975
+
976
+ /* No padding if we have a padded code block (and perhaps more blocks) */
977
+ .rehype-twoslash-popover : has (.rehype-twoslash-popover-code ) {
978
+ padding : 0 ;
979
+ }
980
+
981
+ .rehype-twoslash-popover-code {
982
+ margin : 0 ;
983
+ }
984
+
985
+ .rehype-twoslash-popover-code > code {
986
+ mask-image : none;
987
+ border-radius : 0 ;
988
+ }
989
+
990
+ .rehype-twoslash-popover-description {
991
+ background-color : var (--bg );
992
+ padding : 0 1em ;
993
+ }
994
+
949
995
@media (prefers-color-scheme : dark) {
950
996
: root {
951
997
--white : # f0f6fc ;
@@ -1038,6 +1084,14 @@ details[open] {
1038
1084
background-color : var (--gray-8 );
1039
1085
}
1040
1086
1087
+ .highlight : is (: hover , : focus-within ) .rehype-twoslash-popover-target {
1088
+ background-color : var (--gray-5 );
1089
+ }
1090
+
1091
+ .rehype-twoslash-popover {
1092
+ border-color : var (--gray-6 );
1093
+ }
1094
+
1041
1095
h6 {
1042
1096
color : var (--gray-3 );
1043
1097
}
@@ -1062,7 +1116,6 @@ details[open] {
1062
1116
}
1063
1117
1064
1118
pre code ,
1065
- .hljs ,
1066
1119
.frame-body ,
1067
1120
.frame-tab-item-selected ,
1068
1121
.frame-tab-item-dark .frame-tab-item-selected {
@@ -1231,23 +1284,6 @@ details[open] {
1231
1284
}
1232
1285
}
1233
1286
1234
- /* Fix a11y. */
1235
- .hljs-built_in ,
1236
- .hljs-symbol {
1237
- color : hsl (24deg 92% 40% ) !important ;
1238
- }
1239
-
1240
- @media (prefers-color-scheme : dark) {
1241
- .hljs-section {
1242
- color : # 488bef !important ;
1243
- }
1244
-
1245
- .hljs-built_in ,
1246
- .hljs-symbol {
1247
- color : # ffa657 !important ;
1248
- }
1249
- }
1250
-
1251
1287
.playground {
1252
1288
min-height : 40rem ;
1253
1289
gap : calc (1em + 1ex );
0 commit comments