Skip to content

docs: underline URLs, change contrast in syntax highlighting #8225

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.

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

Merged
merged 13 commits into from
Jan 25, 2024
Merged
4 changes: 4 additions & 0 deletions packages/website/src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -191,3 +191,7 @@ h6 {
[data-theme='dark'] .code-block-added-line {
background-color: #00ff9510;
}

.markdown a {
text-decoration: underline;
}
12 changes: 6 additions & 6 deletions packages/website/src/css/prism.css
Copy link
Member

Choose a reason for hiding this comment

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

[tip] Try to avoid fixing several unrelated issues in one PR, even if they are small. This is generally a good practice + it helps maintainers better focus on reviewing fixes for a particular issue.

If two issues are about the same bug/feature, then they should be merged into one issue. Thus, one issue = one PR

Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
--token-color-doctype: #008000;
--token-color-string: #a31515;
--token-color-operator: #393a34;
--token-color-symbol: #36acaa;
--token-color-symbol: #277c7b;
--token-color-number: #098658;
--token-color-keyword: #00f;
--token-color-function: #569cd6;
--token-color-function: #2b74b1;
--token-color-function-variable: #000;
--token-color-important: #e90;
--token-color-class-name: #2b91af;
--token-color-class-name: #237690;
--token-color-selector: #800000;
--token-color-regexp: #800000;
--token-color-property: #d00;
--token-color-property: #c70000;
Comment on lines +9 to +18
Copy link
Contributor

Choose a reason for hiding this comment

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

[Curious]

How did you choose those specific colors?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I ran axe devtools to see which colors on each page were below the 4.5:1 threshold and then I used this website to check the contrast ratio and modify the current foreground color until it was over that amount. Then I re-ran the devtools to verify the changes were adequate 🙂.

Copy link
Member

Choose a reason for hiding this comment

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

--token-color-builtin: #00f;
--token-color-boolean: #00f;
--token-color-inserted: #247e81;
Expand All @@ -28,9 +28,9 @@ html[data-theme='dark'] {
--token-color: #f8f8f2;
--token-background: var(--ifm-background-surface-color);
--token-border: #414458;
--token-color-comment: #737373;
--token-color-comment: #9e9e9e;
--token-color-doctype: #6a9955;
--token-color-string: #6a9955;
--token-color-string: #78a861;
--token-color-operator: #d4d4d4;
--token-color-symbol: #b5cea8;
--token-color-number: #b5cea8;
Expand Down