3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-30 18:58:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(website): fix multiple accessibility issues around color contrast (#7336)

Browse source 
* fix(website): darken breadcrumbs color to ensure contrast

* fix lighthouse

* fix more a11y

* more fix
This commit is contained in:
Joshua Chen 2022-05-05 15:29:27 +08:00 • committed by GitHub
parent eea27aad68
commit 8f80f6c0b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
admin/scripts/format-lighthouse-score.mjs
View file

@ -18,12 +18,12 @@ const summaryKeys = {
pwa: 'PWA', pwa: 'PWA',
}; };
/** @param {number} score */ /** @param {number} rawScore */
const scoreEntry = (score) => { const scoreEntry = (rawScore) => {
const normalizedScore = Math.round(score * 100); const score = Math.round(rawScore * 100);
// eslint-disable-next-line no-nested-ternary // eslint-disable-next-line no-nested-ternary
const scoreIcon = score >= 90 ? '🟢' : score >= 50 ? '🟠' : '🔴'; const scoreIcon = score >= 90 ? '🟢' : score >= 50 ? '🟠' : '🔴';
return `${scoreIcon} ${normalizedScore}`; return `${scoreIcon} ${score}`;
}; };
/** /**

11
website/src/css/custom.css
View file

@ -19,6 +19,9 @@
--site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%); --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
--site-color-feedback-background: #fff; --site-color-feedback-background: #fff;
--docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%); --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
/* Use a darker color to ensure contrast, ideally we don't need important */
--ifm-breadcrumb-color-active: var(--ifm-color-primary-darker) !important;
--ifm-menu-color-active: var(--ifm-color-primary-darker) !important;
} }
html[data-theme='dark'] { html[data-theme='dark'] {
@ -28,6 +31,10 @@ html[data-theme='dark'] {
--docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%); --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%);
} }
/*
* This selector will be dynamically replaced by the color generator. Don't put
* other properties here.
*/
[data-theme='light'] { [data-theme='light'] {
--ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%); --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%);
--ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%); --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%);
@ -43,6 +50,10 @@ html[data-theme='dark'] {
); );
} }
/*
* This selector will be dynamically replaced by the color generator. Don't put
* other properties here.
*/
[data-theme='dark'] { [data-theme='dark'] {
--ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%); --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%);
--ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%); --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%);

8
website/src/utils/prismLight.mjs
View file

@ -51,7 +51,7 @@ export default {
{ {
types: ['font-matter', 'string', 'attr-value'], types: ['font-matter', 'string', 'attr-value'],
style: { style: {
color: '#E3116C', color: '#C6105F',
}, },
}, },
{ {
@ -90,5 +90,11 @@ export default {
color: '#E36209', color: '#E36209',
}, },
}, },
{
types: ['comment'],
style: {
color: '#6B6B6B',
},
},
], ],
}; };