base.css

:root {
  --cm-scheme: light;

  /* Colors */
  --cm-foreground: #6e6e6e;
  --cm-background: #f4f4f4;

  /* Tokens */
  --cm-comment: #a8a8a8;
  --cm-string: #555555;
  --cm-literal: #333333;
  --cm-keyword: #000000;
  --cm-function: #4f4f4f;
  --cm-deleted: #333333;
  --cm-class: #333333;
  --cm-builtin: #757575;
  --cm-property: #333333;
  --cm-namespace: #4f4f4f;
  --cm-punctuation: #ababab;
  --cm-decorator: var(--cm-class);
  --cm-operator: var(--cm-punctuation);
  --cm-number: var(--cm-literal);
  --cm-boolean: var(--cm-literal);
  --cm-variable: var(--cm-literal);
  --cm-constant: var(--cm-literal);
  --cm-symbol: var(--cm-literal);
  --cm-interpolation: var(--cm-literal);
  --cm-selector: var(--cm-keyword);
  --cm-keyword-control: var(--cm-keyword);
  --cm-regex: var(--cm-string);
  --cm-json-property: var(--cm-property);
  --cm-inline-background: var(--cm-background);

  /* Token Styles */
  --cm-comment-style: italic;
  --cm-url-decoration: underline;

  /* Extension */
  --cm-line-number: #a5a5a5;
  --cm-line-number-gutter: #333333;
  --cm-line-highlight-background: #eeeeee;
  --cm-selection-background: #aaaaaa;
  --cm-marker-color: var(--cm-foreground);
  --cm-marker-opacity: 0.4;
  --cm-marker-font-size: 0.8em;

  /* Font */
  --cm-font-size: 1em;
  --cm-line-height: 1.5em;
  --cm-font-family: monospace;
  --cm-inline-font-size: var(--cm-font-size);
  --cm-block-font-size: var(--cm-font-size);
  
  /* Sizing */
  --cm-tab-size: 2;
  
  --cm-block-padding-x: 1em;
  --cm-block-padding-y: 1em;
  --cm-block-margin-x: 0;
  --cm-block-margin-y: 0.5em;
  --cm-block-radius: 0.3em;
  --cm-inline-padding-x: 0.3em;
  --cm-inline-padding-y: 0.1em;
  --cm-inline-radius: 0.3em;
}

.cm-s-vars.CodeMirror {
  background-color: var(--cm-background);
  color: var(--cm-foreground);
}

.cm-s-vars .CodeMirror-gutters {
  background: var(--cm-line-number-gutter);
  color: var(--cm-line-number);
  border: none;
}

.cm-s-vars .CodeMirror-guttermarker,
.cm-s-vars .CodeMirror-guttermarker-subtle,
.cm-s-vars .CodeMirror-linenumber {
  color: var(--cm-line-number);
}

.cm-s-vars div.CodeMirror-selected {
  background: var(--cm-selection-background);
}

.cm-s-vars.CodeMirror-focused div.CodeMirror-selected {
  background: var(--cm-selection-background);
}

.cm-s-vars .CodeMirror-line::selection,
.cm-s-vars .CodeMirror-line>span::selection,
.cm-s-vars .CodeMirror-line>span>span::selection {
  background: var(--cm-selection-background);
}

.cm-s-vars .CodeMirror-line::-moz-selection,
.cm-s-vars .CodeMirror-line>span::-moz-selection,
.cm-s-vars .CodeMirror-line>span>span::-moz-selection {
  background: var(--cm-selection-background);
}

.cm-s-vars .CodeMirror-activeline-background {
  background: var(--cm-line-highlight-background);
}

.cm-s-vars .cm-keyword {
  color: var(--cm-keyword);
}

.cm-s-vars .cm-variable,
.cm-s-vars .cm-variable-2,
.cm-s-vars .cm-variable-3,
.cm-s-vars .cm-type {
  color: var(--cm-variable);
}

.cm-s-vars .cm-builtin {
  color: var(--cm-builtin);
}

.cm-s-vars .cm-atom {
  color: var(--cm-literal);
}

.cm-s-vars .cm-number {
  color: var(--cm-number);
}

.cm-s-vars .cm-def {
  color: var(--cm-decorator);
}

.cm-s-vars .cm-string,
.cm-s-vars .cm-string-2 {
  color: var(--cm-string);
}

.cm-s-vars .cm-comment {
  color: var(--cm-comment);
}

.cm-s-vars .cm-tag {
  color: var(--cm-builtin);
}

.cm-s-vars .cm-meta {
  color: var(--cm-namespace);
}

.cm-s-vars .cm-attribute {
  color: var(--cm-property);
}

.cm-s-vars .cm-property {
  color: var(--cm-property);
}

.cm-s-vars .cm-qualifier {
  color: var(--cm-keyword);
}

.cm-s-vars .cm-error {
  color: var(--prism-deleted);
}

.cm-s-vars .cm-operator,
.cm-s-vars .cm-bracket {
  color: var(--cm-punctuation);
}

.cm-s-vars .CodeMirror-matchingbracket {
  text-decoration: underline;
}

.cm-s-vars .CodeMirror-cursor {
  border-left: 1px solid currentColor;
}