feat(website): change Inaccessible + text in diff codeblocks colors

[kmin-jeong]

PR Checklist

• Addresses an existing open issue: fixes Website: Inaccessible + text in diff codeblocks #6530
• That issue was marked as accepting prs
• Steps in Contributing were taken

Overview

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit e31f54c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 46 targets

• Node 18 - nx test eslint-plugin
• Node 18 - nx test typescript-estree
• nx run-many --target=lint --parallel
• Node 18 - nx test eslint-plugin-tslint
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 18 - nx test scope-manager
• Node 18 - nx test type-utils
• Node 18 - nx test utils
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 18 - nx test eslint-plugin-internal
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 18 - nx test visitor-keys
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 18 - nx test parser
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 18 - nx run-many --target=build --parallel --exclude website
• nx run-many --target=typecheck --parallel
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 18 - nx test ast-spec
• Node 18 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx test typescript-estree --coverage=false
• nx run-many --target=build --parallel --exclude website
• nx run-many --target=build --parallel --exclude website
• nx run-many --target=build --parallel --exclude website
• Node 14 - nx test utils --coverage=false
• Node 14 - nx test ast-spec --coverage=false
• Node 14 - nx test parser --coverage=false
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx test eslint-plugin-internal --coverage=false
• Node 14 - nx test type-utils --coverage=false
• Node 14 - nx test visitor-keys --coverage=false
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx test scope-manager --coverage=false
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx test eslint-plugin-tslint --coverage=false
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx run-many --target=build --parallel --exclude website
• Node 14 - nx test eslint-plugin --coverage=false
• Node 14 - nx run-many --target=build --parallel --exclude website
• nx run-many --target=build --parallel --exclude website

---

Sent with 💌 from NxCloud.

[typescript-eslint]

Thanks for the PR, @kmin-jeong!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

---

🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint.

[netlify]

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	e31f54c
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/63fa09b9fc68a90008601044
😎 Deploy Preview	https://deploy-preview-6531--typescript-eslint.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.

[armano2]

while looking at this I noticed that we have have misaligned colors for diff highlight

.code-block-added-line:before { /* ... */}
.code-block-removed-line::before { /* ... */ }

I think we should change it to something like this

.code-block-removed-line::before,
.code-block-added-line::before {
  content: '+';
  display: inline-block;
  width: 0px;
  position: relative;
  left: -0.7em;
}

.code-block-added-line::before {
  color: var(--token-color-inserted); /* currently #02a471 */
}

.code-block-removed-line::before {
  color: var(--token-color-deleted); /* currently red */
}

---

thank you for a change :)