refactor: customize code block line highlight color via CSS var

[lex111]

Breaking change

Please migrate your custom CSS file from:

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
}

[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgb(100, 100, 100);
}

to:

:root {
  --docusaurus-highlighted-code-line-bg: rgb(72, 77, 91);
}

[data-theme='dark'] {
  --docusaurus-highlighted-code-line-bg: rgb(100, 100, 100);
}

The former class remains available but has been renamed to theme-code-block-highlighted-line

Motivation

Currently we are asking end-user to add a special class to style highlighted code line themselves, which is quite inconvenient, so I suggest finally walk away from this.

Although we have a problem that the CSS variables defined in built-in Docusaurus component cannot be overridden in the custom CSS file (#3678), however we can lower the specificity of desired selector. And that way it will be possible to set custom background for the highlighted code line via CSS var in the custom file. This is probably better than the current approach.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Preview

Related PRs

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	ca53c66
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6259712bbee5ff00081e63a1
😎 Deploy Preview	https://deploy-preview-7176--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	59
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7176--docusaurus-2.netlify.app/

[github-actions]

Size Change: +172 B (0%)

Total Size: 799 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	106 kB	+172 B (0%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	50 kB
website/build/assets/js/main.********.js	604 kB
website/build/index.html	38.8 kB

_{compressed-size-action}

[lex111]

I'm not sure if we should keep this stable class, eg to make it easier adding custom styling.

[Josh-Cena]

I think we should. In #7178 I'll allow any type of magic comments to be mapped to custom class names, so I think solely for consistency we should keep this class name.

[lex111]

Then maybe move its definition to theme-common? https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts

[Josh-Cena]

Yes, I think that makes sense 👍

[lex111]

Renamed docusaurus-highlight-code-line to theme-code-block-highlighted-line to be more consistent with the current approach.

[Josh-Cena]

Actually, while the rename is fine, adding it to ThemeClassNames is unnecessary because in #7178 it will be injected from theme config...

We might change that API later though, so just keep it like this now.

[slorber]

LGTM 👍