docs: align colors of code block (#4324)

* test(parser): align colors of code block

* test(parser): add missing unchanged and correct dark mode function

* test(parser): distinguish function from function-variable

* docs(website): align diff colors

packages/website/docusaurus.config.js

@@ -1,9 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
-
 const remarkPlugins = [
   [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
 ];
@@ -157,8 +154,10 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} TypeScript ESLint, Inc. Built with Docusaurus.`,
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: {
+          plain: {},
+          styles: [],
+        },
         additionalLanguages: ['ignore'],
       },
       tableOfContents: {

packages/website/src/components/ast/ASTViewer.module.css

@@ -43,39 +43,39 @@
 }
 
 .tokenName {
-  color: #2aa198;
+  color: var(--token-color-class-name);
 }
 
 .propName {
-  color: #b58900;
+  color: var(--token-color-property);
 }
 
 .propNumber {
-  color: #268bd2;
+  color: var(--token-color-number);
 }
 
 .propEmpty {
-  color: var(--ifm-color-emphasis-400);
+  color: var(--token-color-comment);
 }
 
 .propRegExp {
-  color: #b58900;
+  color: var(--token-color-regexp);
 }
 
 .propClass {
-  color: #b58900;
+  color: var(--token-color-class-name);
 }
 
 .propBoolean {
-  color: #b58900;
+  color: var(--token-color-boolean);
 }
 
 .propString {
-  color: #15aa15;
+  color: var(--token-color-string);
 }
 
 .hidden {
-  color: var(--ifm-color-emphasis-400);
+  color: var(--token-color-comment);
   max-width: 40%;
   overflow: hidden;
   display: inline-block;

packages/website/src/css/custom.css

@@ -5,6 +5,8 @@
  * work well for content-centric websites.
  */
 
+@import './prism.css';
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #3578e5;

packages/website/src/css/prism.css

@@ -0,0 +1,174 @@
+:root {
+  --token-color: #393a34;
+  --token-background: #f6f8fa;
+  --token-border: var(--ifm-color-emphasis-300);
+
+  --token-color-comment: #999988;
+  --token-color-doctype: #008000;
+  --token-color-string: #a31515;
+  --token-color-operator: #393a34;
+  --token-color-symbol: #36acaa;
+  --token-color-number: #098658;
+  --token-color-keyword: #0000ff;
+  --token-color-function: #569cd6;
+  --token-color-function-variable: #000000;
+  --token-color-important: #e90;
+  --token-color-class-name: #2b91af;
+  --token-color-selector: #800000;
+  --token-color-regexp: #800000;
+  --token-color-property: #ff0000;
+  --token-color-builtin: #0000ff;
+  --token-color-boolean: #0000ff;
+
+  --token-color-inserted: #36acaa;
+  --token-color-deleted: #d73a49;
+  --token-color-unchanged: #a7a9a8;
+
+  --token-color-highlight: rgba(193, 222, 241, 0.2);
+}
+
+html[data-theme='dark'] {
+  --token-color: #f8f8f2;
+  --token-background: var(--ifm-background-surface-color);
+  --token-border: #414458;
+
+  --token-color-comment: #737373;
+  --token-color-doctype: #6a9955;
+  --token-color-string: #6a9955;
+  --token-color-operator: #d4d4d4;
+  --token-color-symbol: #b5cea8;
+  --token-color-number: #b5cea8;
+  --token-color-keyword: #569cd6;
+  --token-color-function: #98b6ce;
+  --token-color-function-variable: #f8f8f2;
+  --token-color-important: #569cd6;
+  --token-color-class-name: #4ec9b0;
+  --token-color-selector: #d7ba7d;
+  --token-color-regexp: #d7ba7d;
+  --token-color-property: #ce9178;
+  --token-color-builtin: #569cd6;
+  --token-color-boolean: #569cd6;
+
+  --token-color-inserted: #50fa7b;
+  --token-color-deleted: #f55;
+  --token-color-unchanged: #a6a6a6;
+
+  --token-color-highlight: rgba(247, 235, 198, 0.2);
+}
+
+div[class*='codeBlockContainer'],
+div[class*='codeBlockContainer'] pre {
+  color: var(--token-color);
+  background-color: var(--token-background);
+  --ifm-color-emphasis-300: var(--token-border);
+}
+
+.token.comment {
+  color: var(--token-color-comment);
+  font-style: italic;
+}
+
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: var(--token-color-doctype);
+  font-style: italic;
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.string,
+.token.char {
+  color: var(--token-color-string);
+}
+
+.token.punctuation,
+.token.operator {
+  color: var(--token-color-operator);
+}
+
+.token.number {
+  color: var(--token-color-number);
+}
+
+.token.boolean {
+  color: var(--token-color-boolean);
+}
+
+.token.url,
+.token.symbol,
+.token.variable,
+.token.constant {
+  color: var(--token-color-symbol);
+}
+
+.token.inserted {
+  color: var(--token-color-inserted);
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-value {
+  color: var(--token-color-keyword);
+}
+
+.token.function {
+  color: var(--token-color-function);
+}
+
+.token.function-variable {
+  color: var(--token-color-function-variable);
+}
+
+.token.deleted {
+  color: var(--token-color-deleted);
+}
+
+.token.unchanged {
+  color: var(--token-color-unchanged);
+}
+
+.token.important {
+  color: var(--token-color-important);
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+  color: var(--token-color-class-name);
+}
+
+.token.tag,
+.token.selector {
+  color: var(--token-color-selector);
+}
+
+.token.builtin {
+  color: var(--token-color-builtin);
+}
+
+.token.regex {
+  color: var(--token-color-regexp);
+}
+
+.token.attr-name,
+.token.property,
+.token.entity {
+  color: var(--token-color-property);
+}
+
+.line-highlight.line-highlight {
+  background: var(--token-color-highlight);
+  box-shadow: inset 5px 0 0 var(--token-color-highlight);
+  z-index: 0;
+}