Skip to content

Commit

Permalink
Auto merge of rust-lang#102237 - GuillaumeGomez:sidebar-links-color, …
Browse files Browse the repository at this point in the history
…r=notriddle

Migrate sidebar links color to CSS variables and unify themes with ayu

Part of rust-lang#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`
  • Loading branch information
bors committed Oct 1, 2022
2 parents de341fe + 461c316 commit 277bb66
Show file tree
Hide file tree
Showing 5 changed files with 247 additions and 63 deletions.
8 changes: 8 additions & 0 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -545,6 +545,14 @@ h2.location a {
margin: 0;
}

.sidebar a, .sidebar .current {
color: var(--sidebar-link-color);
}
.sidebar .current,
.sidebar a:hover {
background-color: var(--sidebar-current-link-background-color);
}

.sidebar-elems .block {
margin-bottom: 2em;
}
Expand Down
21 changes: 2 additions & 19 deletions src/librustdoc/html/static/css/themes/ayu.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--keyword-link-color: #39afd7;
--mod-link-color: #39afd7;
--link-color: #39afd7;
--sidebar-link-color: #53b1db;
--sidebar-current-link-background-color: transparent;
}

.slider {
Expand Down Expand Up @@ -85,7 +87,6 @@ pre, .rustdoc.source .example-wrap {

.sidebar .current,
.sidebar a:hover {
background-color: transparent;
color: #ffb44c;
}

Expand Down Expand Up @@ -119,9 +120,6 @@ pre, .rustdoc.source .example-wrap {

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

.sidebar a { color: #53b1db; }
.sidebar a.current.type { color: #53b1db; }

pre.rust .comment { color: #788797; }
pre.rust .doccomment { color: #a1ac88; }

Expand Down Expand Up @@ -284,21 +282,6 @@ a.result-static:focus {}
a.result-primitive:focus {}
a.result-keyword:focus {}

.sidebar a.current.enum {}
.sidebar a.current.struct {}
.sidebar a.current.foreigntype {}
.sidebar a.current.attr,
.sidebar a.current.derive,
.sidebar a.current.macro {}
.sidebar a.current.union {}
.sidebar a.current.constant
.sidebar a.current.static {}
.sidebar a.current.primitive {}
.sidebar a.current.trait {}
.sidebar a.current.traitalias {}
.sidebar a.current.fn {}
.sidebar a.current.keyword {}

kbd {
color: #c5c5c5;
background-color: #314559;
Expand Down
24 changes: 2 additions & 22 deletions src/librustdoc/html/static/css/themes/dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
--keyword-link-color: #d2991d;
--mod-link-color: #d2991d;
--link-color: #d2991d;
--sidebar-link-color: #fdbf35;
--sidebar-current-link-background-color: #444;
}

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

.sidebar .current,
.sidebar a:hover {
background: #444;
}

.src-line-numbers span { color: #3B91E2; }
.src-line-numbers .line-highlighted {
background-color: #0a042f !important;
Expand Down Expand Up @@ -91,23 +88,6 @@ a.result-keyword:focus { background-color: #884719; }

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

.sidebar a { color: #fdbf35; }
.sidebar a.current.enum { color: #12ece2; }
.sidebar a.current.struct { color: #12ece2; }
.sidebar a.current.type { color: #12ece2; }
.sidebar a.current.foreigntype { color: #12ece2; }
.sidebar a.current.attr,
.sidebar a.current.derive,
.sidebar a.current.macro { color: #0be900; }
.sidebar a.current.union { color: #12ece2; }
.sidebar a.current.constant
.sidebar a.current.static { color: #fdbf35; }
.sidebar a.current.primitive { color: #12ece2; }
.sidebar a.current.trait { color: #cca7ff; }
.sidebar a.current.traitalias { color: #cca7ff; }
.sidebar a.current.fn { color: #32d479; }
.sidebar a.current.keyword { color: #fdbf35; }

pre.rust .comment { color: #8d8d8b; }
pre.rust .doccomment { color: #8ca375; }

Expand Down
24 changes: 2 additions & 22 deletions src/librustdoc/html/static/css/themes/light.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
--keyword-link-color: #3873ad;
--mod-link-color: #3873ad;
--link-color: #3873ad;
--sidebar-link-color: #356da4;
--sidebar-current-link-background-color: #fff;
}

.slider {
Expand All @@ -48,11 +50,6 @@ input:focus + .slider {
*/
}

.sidebar .current,
.sidebar a:hover {
background-color: #fff;
}

.src-line-numbers span { color: #c67e2d; }
.src-line-numbers .line-highlighted {
background-color: #FDFFD3 !important;
Expand Down Expand Up @@ -90,23 +87,6 @@ a.result-keyword:focus { background-color: #afc6e4; }

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

.sidebar a { color: #356da4; }
.sidebar a.current.enum { color: #a63283; }
.sidebar a.current.struct { color: #a63283; }
.sidebar a.current.type { color: #a63283; }
.sidebar a.current.foreigntype { color: #356da4; }
.sidebar a.current.attr,
.sidebar a.current.derive,
.sidebar a.current.macro { color: #067901; }
.sidebar a.current.union { color: #a63283; }
.sidebar a.current.constant
.sidebar a.current.static { color: #356da4; }
.sidebar a.current.primitive { color: #a63283; }
.sidebar a.current.trait { color: #6849c3; }
.sidebar a.current.traitalias { color: #4b349e; }
.sidebar a.current.fn { color: #a67736; }
.sidebar a.current.keyword { color: #356da4; }

body.source .example-wrap pre.rust a {
background: #eee;
}
Expand Down
233 changes: 233 additions & 0 deletions src/test/rustdoc-gui/sidebar-links-color.goml
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
// This test checks links colors in sidebar before and after hover.
goto: file://|DOC_PATH|/test_docs/struct.Foo.html

// This is needed so that the text color is computed.
show-text: true

// Ayu theme
local-storage: {
"rustdoc-theme": "ayu",
"rustdoc-use-system-theme": "false",
}
reload:

// Struct
assert-css: (
".sidebar a.struct:not(.current)",
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.struct:not(.current)"
assert-css: (
".sidebar a.struct:hover",
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
)
// Enum
assert-css: (
".sidebar a.enum",
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.enum"
assert-css: (
".sidebar a.enum:hover",
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
)
// Union
assert-css: (
".sidebar a.union",
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.union"
assert-css: (
".sidebar a.union:hover",
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
)
// Trait
assert-css: (
".sidebar a.trait",
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.trait"
assert-css: (
".sidebar a.trait:hover",
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
)
// Function
assert-css: (
".sidebar a.fn",
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.fn"
assert-css: (
".sidebar a.fn:hover",
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
)
// Type definition
assert-css: (
".sidebar a.type",
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.type"
assert-css: (
".sidebar a.type:hover",
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
)
// Keyword
assert-css: (
".sidebar a.keyword",
{"color": "rgb(83, 177, 219)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.keyword"
assert-css: (
".sidebar a.keyword:hover",
{"color": "rgb(255, 180, 76)", "background-color": "rgba(0, 0, 0, 0)"},
)

// Dark theme
local-storage: {"rustdoc-theme": "dark"}
reload:

// Struct
assert-css: (
".sidebar a.struct:not(.current)",
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.struct:not(.current)"
assert-css: (
".sidebar a.struct:hover",
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
)
// Enum
assert-css: (
".sidebar a.enum",
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.enum"
assert-css: (
".sidebar a.enum:hover",
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
)
// Union
assert-css: (
".sidebar a.union",
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.union"
assert-css: (
".sidebar a.union:hover",
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
)
// Trait
assert-css: (
".sidebar a.trait",
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.trait"
assert-css: (
".sidebar a.trait:hover",
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
)
// Function
assert-css: (
".sidebar a.fn",
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.fn"
assert-css: (
".sidebar a.fn:hover",
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
)
// Type definition
assert-css: (
".sidebar a.type",
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.type"
assert-css: (
".sidebar a.type:hover",
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
)
// Keyword
assert-css: (
".sidebar a.keyword",
{"color": "rgb(253, 191, 53)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.keyword"
assert-css: (
".sidebar a.keyword:hover",
{"color": "rgb(253, 191, 53)", "background-color": "rgb(68, 68, 68)"},
)

// Light theme
local-storage: {"rustdoc-theme": "light"}
reload:

// Struct
assert-css: (
".sidebar a.struct:not(.current)",
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.struct:not(.current)"
assert-css: (
".sidebar a.struct:hover",
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
)
// Enum
assert-css: (
".sidebar a.enum",
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.enum"
assert-css: (
".sidebar a.enum:hover",
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
)
// Union
assert-css: (
".sidebar a.union",
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.union"
assert-css: (
".sidebar a.union:hover",
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
)
// Trait
assert-css: (
".sidebar a.trait",
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.trait"
assert-css: (
".sidebar a.trait:hover",
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
)
// Function
assert-css: (
".sidebar a.fn",
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.fn"
assert-css: (
".sidebar a.fn:hover",
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
)
// Type definition
assert-css: (
".sidebar a.type",
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.type"
assert-css: (
".sidebar a.type:hover",
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
)
// Keyword
assert-css: (
".sidebar a.keyword",
{"color": "rgb(53, 109, 164)", "background-color": "rgba(0, 0, 0, 0)"},
)
move-cursor-to: ".sidebar a.keyword"
assert-css: (
".sidebar a.keyword:hover",
{"color": "rgb(53, 109, 164)", "background-color": "rgb(255, 255, 255)"},
)

0 comments on commit 277bb66

Please sign in to comment.