forked from argotorg/fe
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfe-highlight.css
More file actions
125 lines (113 loc) · 5.05 KB
/
fe-highlight.css
File metadata and controls
125 lines (113 loc) · 5.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/* Fe syntax highlighting (tree-sitter) — One Dark inspired
Standalone version with hardcoded colors for embedding in Starlight/Astro.
Override these CSS custom properties to theme the syntax colors:
--fe-hl-keyword, --fe-hl-type, --fe-hl-type-interface, --fe-hl-type-variant,
--fe-hl-function, --fe-hl-string, --fe-hl-string-escape, --fe-hl-number,
--fe-hl-comment, --fe-hl-operator, --fe-hl-variable, --fe-hl-attribute,
--fe-hl-constant, --fe-hl-punctuation,
--fe-code-bg, --fe-code-border, --fe-code-text, --fe-code-font,
--fe-code-size, --fe-code-line-height */
/* Light mode syntax colors */
.hl-keyword { color: var(--fe-hl-keyword, #7c3aed); }
.hl-type, .hl-type-builtin { color: var(--fe-hl-type, #b45309); }
.hl-type-interface { color: var(--fe-hl-type-interface, #9333ea); }
.hl-type-enum-variant { color: var(--fe-hl-type-variant, #a16207); }
.hl-function, .hl-function-definition, .hl-function-method { color: var(--fe-hl-function, #2563eb); }
.hl-string { color: var(--fe-hl-string, #16a34a); }
.hl-string-escape { color: var(--fe-hl-string-escape, #0d9488); }
.hl-number { color: var(--fe-hl-number, #c2410c); }
.hl-comment, .hl-comment-doc { color: var(--fe-hl-comment, #6b7280); font-style: italic; }
.hl-operator { color: var(--fe-hl-operator, #475569); }
.hl-property, .hl-variable-parameter { color: var(--fe-hl-variable, #dc2626); }
.hl-variable { color: var(--fe-hl-variable, #dc2626); }
.hl-attribute { color: var(--fe-hl-attribute, #c2410c); }
.hl-constant { color: var(--fe-hl-constant, #c2410c); font-weight: bold; }
.hl-punctuation-bracket, .hl-punctuation-delimiter, .hl-punctuation-special { color: var(--fe-hl-punctuation, #64748b); }
/* Dark mode syntax colors */
@media (prefers-color-scheme: dark) {
.hl-keyword { color: var(--fe-hl-keyword, #c678dd); }
.hl-type, .hl-type-builtin { color: var(--fe-hl-type, #e5c07b); }
.hl-type-interface { color: var(--fe-hl-type-interface, #e77ee7); }
.hl-type-enum-variant { color: var(--fe-hl-type-variant, #e7c77e); }
.hl-function, .hl-function-definition, .hl-function-method { color: var(--fe-hl-function, #61afef); }
.hl-string { color: var(--fe-hl-string, #98c379); }
.hl-string-escape { color: var(--fe-hl-string-escape, #56b6c2); }
.hl-number { color: var(--fe-hl-number, #d19a66); }
.hl-comment, .hl-comment-doc { color: var(--fe-hl-comment, #5c6370); font-style: italic; }
.hl-operator { color: var(--fe-hl-operator, #abb2bf); }
.hl-property, .hl-variable-parameter { color: var(--fe-hl-variable, #e06c75); }
.hl-variable { color: var(--fe-hl-variable, #e06c75); }
.hl-attribute { color: var(--fe-hl-attribute, #d19a66); }
.hl-constant { color: var(--fe-hl-constant, #d19a66); font-weight: bold; }
.hl-punctuation-bracket, .hl-punctuation-delimiter, .hl-punctuation-special { color: var(--fe-hl-punctuation, #abb2bf); }
}
/* Smooth transition for SCIP symbol hover highlights.
feHighlight() sets inline styles; the browser tweens the change. */
[class*="sym-"] {
transition: background 0.2s ease-out, text-decoration 0.2s ease-out,
text-decoration-color 0.2s ease-out;
}
/* <fe-code-block> custom element */
fe-code-block {
display: block;
margin: 1rem 0;
}
.fe-code-block-wrapper {
display: flex;
background: var(--fe-code-bg, #0d1117);
border: 1px solid var(--fe-code-border, #2d3748);
border-radius: var(--fe-code-radius, 6px);
overflow-x: auto;
}
/* Tighter margins in inline contexts (member headers, code headers, etc.)
These target the fe-code-block element in the light DOM. The shadow DOM
wrapper styles (border, background) are controlled via CSS custom
properties that inherit through the shadow boundary. */
.member-header fe-code-block,
.code-header fe-code-block,
.implementor-sig fe-code-block {
margin: 0;
}
/* Inline signature contexts: suppress border, keep code background.
(these inherit into the shadow root where .fe-code-block-wrapper reads them). */
.member-header,
.code-header,
.implementor-sig {
--fe-code-border: transparent;
}
.fe-line-numbers {
display: flex;
flex-direction: column;
padding: 0.75rem 0.5rem;
border-right: 1px solid var(--fe-code-border, #2d3748);
text-align: right;
user-select: none;
color: var(--fe-code-line-number, #9ba3af);
font-family: var(--fe-code-font, "JetBrains Mono", "Fira Code", monospace);
font-size: var(--fe-code-size, 0.8rem);
line-height: var(--fe-code-line-height, 1.6);
}
.fe-line-numbers span {
line-height: var(--fe-code-line-height, 1.6);
}
.fe-code-pre {
flex: 1;
margin: 0;
padding: 0.75rem 1rem;
background: transparent;
overflow-x: auto;
font-family: var(--fe-code-font, "JetBrains Mono", "Fira Code", monospace);
font-size: var(--fe-code-size, 0.8rem);
line-height: var(--fe-code-line-height, 1.6);
}
.fe-code-pre code {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: var(--fe-code-text, #334155);
}
@media (prefers-color-scheme: dark) {
.fe-code-pre code {
color: var(--fe-code-text, #e4e4e4);
}
}