Skip to content

Commit 277bb66

Browse files
borsbors
committedOct 1, 2022
Auto merge of #102237 - GuillaumeGomez:sidebar-links-color, r=notriddle
Migrate sidebar links color to CSS variables and unify themes with ayu Part of #98460. This PR does two things: 1. Migrate more theme CSS rules toward CSS variables. 2. Remove `a.current` specific colors depending on the kind of the item behind the link. The `ayu` theme was already doing it this way and I think it makes much more sense like this. You can test it [here](https://rustdoc.crud.net/imperio/sidebar-links-color/lib2/struct.Foo.html) by hovering other module's items in the sidebar (or check the selector `a.current`). cc `@jsha` r? `@notriddle`
·
1.85.11.66.0
2 parents de341fe + 461c316 commit 277bb66

File tree

5 files changed

+247
-63
lines changed

5 files changed

+247
-63
lines changed
 

‎src/librustdoc/html/static/css/rustdoc.css

+8
Original file line numberDiff line numberDiff line change
@@ -545,6 +545,14 @@ h2.location a {
545545
margin: 0;
546546
}
547547

548+
.sidebar a, .sidebar .current {
549+
color: var(--sidebar-link-color);
550+
}
551+
.sidebar .current,
552+
.sidebar a:hover {
553+
background-color: var(--sidebar-current-link-background-color);
554+
}
555+
548556
.sidebar-elems .block {
549557
margin-bottom: 2em;
550558
}

‎src/librustdoc/html/static/css/themes/ayu.css

+2-19
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
3535
--keyword-link-color: #39afd7;
3636
--mod-link-color: #39afd7;
3737
--link-color: #39afd7;
38+
--sidebar-link-color: #53b1db;
39+
--sidebar-current-link-background-color: transparent;
3840
}
3941

4042
.slider {
@@ -85,7 +87,6 @@ pre, .rustdoc.source .example-wrap {
8587

8688
.sidebar .current,
8789
.sidebar a:hover {
88-
background-color: transparent;
8990
color: #ffb44c;
9091
}
9192

@@ -119,9 +120,6 @@ pre, .rustdoc.source .example-wrap {
119120

120121
.content .item-info::before { color: #ccc; }
121122

122-
.sidebar a { color: #53b1db; }
123-
.sidebar a.current.type { color: #53b1db; }
124-
125123
pre.rust .comment { color: #788797; }
126124
pre.rust .doccomment { color: #a1ac88; }
127125

@@ -284,21 +282,6 @@ a.result-static:focus {}
284282
a.result-primitive:focus {}
285283
a.result-keyword:focus {}
286284

287-
.sidebar a.current.enum {}
288-
.sidebar a.current.struct {}
289-
.sidebar a.current.foreigntype {}
290-
.sidebar a.current.attr,
291-
.sidebar a.current.derive,
292-
.sidebar a.current.macro {}
293-
.sidebar a.current.union {}
294-
.sidebar a.current.constant
295-
.sidebar a.current.static {}
296-
.sidebar a.current.primitive {}
297-
.sidebar a.current.trait {}
298-
.sidebar a.current.traitalias {}
299-
.sidebar a.current.fn {}
300-
.sidebar a.current.keyword {}
301-
302285
kbd {
303286
color: #c5c5c5;
304287
background-color: #314559;

‎src/librustdoc/html/static/css/themes/dark.css

+2-22
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
--keyword-link-color: #d2991d;
3131
--mod-link-color: #d2991d;
3232
--link-color: #d2991d;
33+
--sidebar-link-color: #fdbf35;
34+
--sidebar-current-link-background-color: #444;
3335
}
3436

3537
.slider {
@@ -49,11 +51,6 @@ input:focus + .slider {
4951
drop-shadow(0 -1px 0 #fff)
5052
}
5153

52-
.sidebar .current,
53-
.sidebar a:hover {
54-
background: #444;
55-
}
56-
5754
.src-line-numbers span { color: #3B91E2; }
5855
.src-line-numbers .line-highlighted {
5956
background-color: #0a042f !important;
@@ -91,23 +88,6 @@ a.result-keyword:focus { background-color: #884719; }
9188

9289
.content .item-info::before { color: #ccc; }
9390

94-
.sidebar a { color: #fdbf35; }
95-
.sidebar a.current.enum { color: #12ece2; }
96-
.sidebar a.current.struct { color: #12ece2; }
97-
.sidebar a.current.type { color: #12ece2; }
98-
.sidebar a.current.foreigntype { color: #12ece2; }
99-
.sidebar a.current.attr,
100-
.sidebar a.current.derive,
101-
.sidebar a.current.macro { color: #0be900; }
102-
.sidebar a.current.union { color: #12ece2; }
103-
.sidebar a.current.constant
104-
.sidebar a.current.static { color: #fdbf35; }
105-
.sidebar a.current.primitive { color: #12ece2; }
106-
.sidebar a.current.trait { color: #cca7ff; }
107-
.sidebar a.current.traitalias { color: #cca7ff; }
108-
.sidebar a.current.fn { color: #32d479; }
109-
.sidebar a.current.keyword { color: #fdbf35; }
110-
11191
pre.rust .comment { color: #8d8d8b; }
11292
pre.rust .doccomment { color: #8ca375; }
11393

‎src/librustdoc/html/static/css/themes/light.css

+2-22
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
--keyword-link-color: #3873ad;
3131
--mod-link-color: #3873ad;
3232
--link-color: #3873ad;
33+
--sidebar-link-color: #356da4;
34+
--sidebar-current-link-background-color: #fff;
3335
}
3436

3537
.slider {
@@ -48,11 +50,6 @@ input:focus + .slider {
4850
*/
4951
}
5052

51-
.sidebar .current,
52-
.sidebar a:hover {
53-
background-color: #fff;
54-
}
55-
5653
.src-line-numbers span { color: #c67e2d; }
5754
.src-line-numbers .line-highlighted {
5855
background-color: #FDFFD3 !important;
@@ -90,23 +87,6 @@ a.result-keyword:focus { background-color: #afc6e4; }
9087

9188
.content .item-info::before { color: #ccc; }
9289

93-
.sidebar a { color: #356da4; }
94-
.sidebar a.current.enum { color: #a63283; }
95-
.sidebar a.current.struct { color: #a63283; }
96-
.sidebar a.current.type { color: #a63283; }
97-
.sidebar a.current.foreigntype { color: #356da4; }
98-
.sidebar a.current.attr,
99-
.sidebar a.current.derive,
100-
.sidebar a.current.macro { color: #067901; }
101-
.sidebar a.current.union { color: #a63283; }
102-
.sidebar a.current.constant
103-
.sidebar a.current.static { color: #356da4; }
104-
.sidebar a.current.primitive { color: #a63283; }
105-
.sidebar a.current.trait { color: #6849c3; }
106-
.sidebar a.current.traitalias { color: #4b349e; }
107-
.sidebar a.current.fn { color: #a67736; }
108-
.sidebar a.current.keyword { color: #356da4; }
109-
11090
body.source .example-wrap pre.rust a {
11191
background: #eee;
11292
}

‎src/test/rustdoc-gui/sidebar-links-color.goml

+233
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
// This test checks links colors in sidebar before and after hover.
2+
goto: file://|DOC_PATH|/test_docs/struct.Foo.html
3+
4+
// This is needed so that the text color is computed.
5+
show-text: true
6+
7+
// Ayu theme
8+
local-storage: {
9+
"rustdoc-theme": "ayu",
10+
"rustdoc-use-system-theme": "false",
11+
}
12+
reload:
13+
14+
// Struct
15+
assert-css: (
16+
".sidebar a.struct:not(.current)",
17+
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
18+
)
19+
move-cursor-to: ".sidebar a.struct:not(.current)"
20+
assert-css: (
21+
".sidebar a.struct:hover",
22+
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
23+
)
24+
// Enum
25+
assert-css: (
26+
".sidebar a.enum",
27+
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
28+
)
29+
move-cursor-to: ".sidebar a.enum"
30+
assert-css: (
31+
".sidebar a.enum:hover",
32+
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
33+
)
34+
// Union
35+
assert-css: (
36+
".sidebar a.union",
37+
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
38+
)
39+
move-cursor-to: ".sidebar a.union"
40+
assert-css: (
41+
".sidebar a.union:hover",
42+
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
43+
)
44+
// Trait
45+
assert-css: (
46+
".sidebar a.trait",
47+
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
48+
)
49+
move-cursor-to: ".sidebar a.trait"
50+
assert-css: (
51+
".sidebar a.trait:hover",
52+
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
53+
)
54+
// Function
55+
assert-css: (
56+
".sidebar a.fn",
57+
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
58+
)
59+
move-cursor-to: ".sidebar a.fn"
60+
assert-css: (
61+
".sidebar a.fn:hover",
62+
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
63+
)
64+
// Type definition
65+
assert-css: (
66+
".sidebar a.type",
67+
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
68+
)
69+
move-cursor-to: ".sidebar a.type"
70+
assert-css: (
71+
".sidebar a.type:hover",
72+
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
73+
)
74+
// Keyword
75+
assert-css: (
76+
".sidebar a.keyword",
77+
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
78+
)
79+
move-cursor-to: ".sidebar a.keyword"
80+
assert-css: (
81+
".sidebar a.keyword:hover",
82+
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
83+
)
84+
85+
// Dark theme
86+
local-storage: {"rustdoc-theme": "dark"}
87+
reload:
88+
89+
// Struct
90+
assert-css: (
91+
".sidebar a.struct:not(.current)",
92+
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
93+
)
94+
move-cursor-to: ".sidebar a.struct:not(.current)"
95+
assert-css: (
96+
".sidebar a.struct:hover",
97+
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
98+
)
99+
// Enum
100+
assert-css: (
101+
".sidebar a.enum",
102+
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
103+
)
104+
move-cursor-to: ".sidebar a.enum"
105+
assert-css: (
106+
".sidebar a.enum:hover",
107+
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
108+
)
109+
// Union
110+
assert-css: (
111+
".sidebar a.union",
112+
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
113+
)
114+
move-cursor-to: ".sidebar a.union"
115+
assert-css: (
116+
".sidebar a.union:hover",
117+
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
118+
)
119+
// Trait
120+
assert-css: (
121+
".sidebar a.trait",
122+
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
123+
)
124+
move-cursor-to: ".sidebar a.trait"
125+
assert-css: (
126+
".sidebar a.trait:hover",
127+
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
128+
)
129+
// Function
130+
assert-css: (
131+
".sidebar a.fn",
132+
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
133+
)
134+
move-cursor-to: ".sidebar a.fn"
135+
assert-css: (
136+
".sidebar a.fn:hover",
137+
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
138+
)
139+
// Type definition
140+
assert-css: (
141+
".sidebar a.type",
142+
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
143+
)
144+
move-cursor-to: ".sidebar a.type"
145+
assert-css: (
146+
".sidebar a.type:hover",
147+
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
148+
)
149+
// Keyword
150+
assert-css: (
151+
".sidebar a.keyword",
152+
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
153+
)
154+
move-cursor-to: ".sidebar a.keyword"
155+
assert-css: (
156+
".sidebar a.keyword:hover",
157+
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
158+
)
159+
160+
// Light theme
161+
local-storage: {"rustdoc-theme": "light"}
162+
reload:
163+
164+
// Struct
165+
assert-css: (
166+
".sidebar a.struct:not(.current)",
167+
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
168+
)
169+
move-cursor-to: ".sidebar a.struct:not(.current)"
170+
assert-css: (
171+
".sidebar a.struct:hover",
172+
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
173+
)
174+
// Enum
175+
assert-css: (
176+
".sidebar a.enum",
177+
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
178+
)
179+
move-cursor-to: ".sidebar a.enum"
180+
assert-css: (
181+
".sidebar a.enum:hover",
182+
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
183+
)
184+
// Union
185+
assert-css: (
186+
".sidebar a.union",
187+
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
188+
)
189+
move-cursor-to: ".sidebar a.union"
190+
assert-css: (
191+
".sidebar a.union:hover",
192+
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
193+
)
194+
// Trait
195+
assert-css: (
196+
".sidebar a.trait",
197+
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
198+
)
199+
move-cursor-to: ".sidebar a.trait"
200+
assert-css: (
201+
".sidebar a.trait:hover",
202+
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
203+
)
204+
// Function
205+
assert-css: (
206+
".sidebar a.fn",
207+
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
208+
)
209+
move-cursor-to: ".sidebar a.fn"
210+
assert-css: (
211+
".sidebar a.fn:hover",
212+
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
213+
)
214+
// Type definition
215+
assert-css: (
216+
".sidebar a.type",
217+
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
218+
)
219+
move-cursor-to: ".sidebar a.type"
220+
assert-css: (
221+
".sidebar a.type:hover",
222+
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
223+
)
224+
// Keyword
225+
assert-css: (
226+
".sidebar a.keyword",
227+
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
228+
)
229+
move-cursor-to: ".sidebar a.keyword"
230+
assert-css: (
231+
".sidebar a.keyword:hover",
232+
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
233+
)

0 commit comments

Comments
 (0)
Please sign in to comment.