Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update button and link colors for themes #2026

Merged
merged 9 commits into from
Jan 18, 2025
Merged

Update button and link colors for themes #2026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6660914
Update button title color and adjust link colors for dark and light t…
hichemfantar Jan 17, 2025
47390f8
Update link colors in dark theme for better visibility
hichemfantar Jan 17, 2025
ae7e801
Update link colors in dark and light themes for improved visibility
hichemfantar Jan 17, 2025
0a64878
Refactor link styles to remove decoration and use new color variables…
hichemfantar Jan 17, 2025
2627a93
Update visited link color in dark theme for improved visibility
hichemfantar Jan 17, 2025
37e61c8
Refactor link color variables for consistency across themes
hichemfantar Jan 17, 2025
2c9183f
Remove footer text color variable from dark and light themes for cons…
hichemfantar Jan 18, 2025
f8af501
Merge branch 'main' into better-links
hichemfantar Jan 18, 2025
38ba5a5
Remove italic font style from footer CSS for improved readability
hichemfantar Jan 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/css/content/bottom-actions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@
white-space: nowrap;
}

.content-inner .bottom-actions .bottom-actions-button .title {
color: var(--textHeaders);
}

.content-inner .bottom-actions .bottom-actions-button[rel="prev"] {
text-align: start;
}
Expand Down
4 changes: 2 additions & 2 deletions assets/css/content/code.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.content-inner.content-inner :is(a:has(code, img), pre a) {
color: var(--linksNoUnderline);
color: var(--link-color);
text-shadow: none;
text-decoration: none;
background-image: none;
}

.content-inner.content-inner :is(a:has(code, img), pre a):is(:visited, :active, :focus, :hover) {
color: var(--linksNoUnderlineVisited);
color: var(--link-visited-color);
}

.content-inner code {
Expand Down
7 changes: 0 additions & 7 deletions assets/css/content/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
.content-inner .footer {
margin: 4em auto 1em;
text-align: center;
font-style: italic;
font-size: 14px;
}

.content-inner .footer,
.content-inner .footer :is(a, .footer-button) {
color: var(--textFooter);
}

.content-inner .footer .line {
display: inline-block;
}
Expand All @@ -18,7 +12,6 @@
background-color: transparent;
border: 0;
cursor: pointer;
font-style: italic;
padding: 0 4px;
}

Expand Down
5 changes: 2 additions & 3 deletions assets/css/content/general.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,12 @@
}

.content-inner :is(a, .a-main) {
color: var(--links);
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--linksDecoration);
text-decoration-skip-ink: auto;
}
.content-inner :is(a:visited, .a-main:visited) {
color: var(--linksVisited);
color: var(--link-visited-color);
}

.content-inner .icon-action {
Expand Down
8 changes: 4 additions & 4 deletions assets/css/custom-props/_elixir.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
--searchBarFocusColor: #8E7CE6;
--searchBarBorderColor: rgba(142, 124, 230, 0.25);

--linksNoUnderline: var(--mainDark);
--linksNoUnderlineVisited: var(--mainDarkest);
--link-color: var(--mainDark);
--link-visited-color: var(--mainDarkest);
}

body.dark {
--linksNoUnderline: var(--mainLightest);
--linksNoUnderlineVisited: var(--mainLight);
--link-color: var(--mainLightest);
--link-visited-color: var(--mainLight);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, to be clear, I was thinking we should move these out of the language custom props and use the same for both languages (so they would go to the general prop definitions). I think having both languages use the same colors for links would be a huge plus for overall ecosystem consistency. Thoughts?

}
8 changes: 4 additions & 4 deletions assets/css/custom-props/_erlang.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
--searchBarFocusColor: hsl(0, 100%, 50%);
--searchBarBorderColor: rgb(255, 71, 71, 0.1);

--linksNoUnderline: #0969da;
--linksNoUnderlineVisited: #085fc4;
--link-color: #0969da;
--link-visited-color: #085fc4;
}

body.dark {
--linksNoUnderline: #71b7ff;
--linksNoUnderlineVisited: #65a4e5;
--link-color: #71b7ff;
--link-visited-color: #d0adef;
}
5 changes: 0 additions & 5 deletions assets/css/custom-props/theme-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@ body.dark {
--textHeaders: var(--gray100);
--textDetailAccent: var(--mainLight);
--textDetailBackground: var(--gray700);
--textFooter: var(--gray300);

--links: var(--gray100);
--linksVisited: var(--gray100);
--linksDecoration: var(--gray450);

--iconAction: var(--coldGray-lightened-10);
--iconActionHover: var(--white);
Expand Down
5 changes: 0 additions & 5 deletions assets/css/custom-props/theme-light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@
--textHeaders: var(--gray900);
--textDetailAccent: var(--mainLight);
--textDetailBackground: var(--coldGrayFaint);
--textFooter: var(--gray700);

--links: var(--black);
--linksVisited: var(--black);
--linksDecoration: var(--gray450);

--iconAction: var(--coldGray);
--iconActionHover: var(--gray800);
Expand Down
4 changes: 2 additions & 2 deletions assets/css/search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@

#search .result-id a {
text-decoration: none;
color: var(--link-color);
transition: var(--transition-colors);
color: var(--links);
}
#search .result-id a:is(:visited, :active, :focus) {
color: var(--linksVisited);
color: var(--link-visited-color);
}
#search .result-id a:hover {
color: var(--main);
Expand Down