codemirror.css

@import url('codemirror/lib/codemirror.css');

/* Make the editors fill up their container and make them scrollable */
.graphiql-container .CodeMirror {
  height: 100%;
  position: absolute;
  width: 100%;
}

/* Override font settings */
.graphiql-container .CodeMirror {
  font-family: var(--font-family-mono);
}

/* Set default background color */
.graphiql-container .CodeMirror,
.graphiql-container .CodeMirror-gutters {
  background: none;
  background-color: var(--editor-background, hsl(var(--color-base)));
}

/* No padding around line numbers */
.graphiql-container .CodeMirror-linenumber {
  padding: 0;
}

/* No border between gutter and editor */
.graphiql-container .CodeMirror-gutters {
  border: none;
}

/**
 * Editor theme
 */

.cm-s-graphiql {
  /* Default to punctuation */
  color: hsla(var(--color-neutral), var(--alpha-tertiary));

  /* OperationType, `fragment`, `on` */
  & .cm-keyword {
    color: hsl(var(--color-primary));
  }
  /* Name (OperationDefinition), FragmentName */
  & .cm-def {
    color: hsl(var(--color-tertiary));
  }
  /* Punctuator (except `$` and `@`) */
  & .cm-punctuation {
    color: hsla(var(--color-neutral), var(--alpha-tertiary));
  }
  /* Variable */
  & .cm-variable {
    color: hsl(var(--color-secondary));
  }
  /* NamedType */
  & .cm-atom {
    color: hsl(var(--color-tertiary));
  }
  /* IntValue, FloatValue */
  & .cm-number {
    color: hsl(var(--color-success));
  }
  /* StringValue */
  & .cm-string {
    color: hsl(var(--color-warning));
  }
  /* BooleanValue */
  & .cm-builtin {
    color: hsl(var(--color-success));
  }
  /* EnumValue */
  & .cm-string-2 {
    color: hsl(var(--color-secondary));
  }
  /* Name (ObjectField, Argument) */
  & .cm-attribute {
    color: hsl(var(--color-tertiary));
  }
  /* Name (Directive) */
  & .cm-meta {
    color: hsl(var(--color-tertiary));
  }
  /* Name (Alias, Field without Alias) */
  & .cm-property {
    color: hsl(var(--color-info));
  }
  /* Name (Field with Alias) */
  & .cm-qualifier {
    color: hsl(var(--color-secondary));
  }
  /* Comment */
  & .cm-comment {
    color: hsla(var(--color-neutral), var(--alpha-secondary));
  }
  /* Whitespace */
  & .cm-ws {
    color: hsla(var(--color-neutral), var(--alpha-tertiary));
  }
  /* Invalid characters */
  & .cm-invalidchar {
    color: hsl(var(--color-error));
  }

  /* Cursor */
  & .CodeMirror-cursor {
    border-left: 2px solid hsla(var(--color-neutral), var(--alpha-secondary));
  }

  /* Color for line numbers and fold-gutters */
  & .CodeMirror-linenumber {
    color: hsla(var(--color-neutral), var(--alpha-tertiary));
  }
}

/* Matching bracket colors */
.graphiql-container div.CodeMirror span.CodeMirror-matchingbracket,
.graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: hsl(var(--color-warning));
}

/* Selected text blocks */
.graphiql-container .CodeMirror-selected,
.graphiql-container .CodeMirror-focused .CodeMirror-selected {
  background: hsla(var(--color-neutral), var(--alpha-background-heavy));
}

/* Position the search dialog */
.graphiql-container .CodeMirror-dialog {
  background: inherit;
  color: inherit;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: var(--px-2) var(--px-6);
  position: absolute;
  z-index: 6;
}
.graphiql-container .CodeMirror-dialog-top {
  border-bottom: 1px solid
    hsla(var(--color-neutral), var(--alpha-background-heavy));
  padding-bottom: var(--px-12);
  top: 0;
}
.graphiql-container .CodeMirror-dialog-bottom {
  border-top: 1px solid
    hsla(var(--color-neutral), var(--alpha-background-heavy));
  bottom: 0;
  padding-top: var(--px-12);
}

/* Hide the search hint */
.graphiql-container .CodeMirror-search-hint {
  display: none;
}

/* Style the input field for searching */
.graphiql-container .CodeMirror-dialog input {
  border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
  border-radius: var(--border-radius-4);
  padding: var(--px-4);
}
.graphiql-container .CodeMirror-dialog input:focus {
  outline: hsl(var(--color-primary)) solid 2px;
}

/* Set the highlight color for search results */
.graphiql-container .cm-searching {
  background-color: hsla(var(--color-warning), var(--alpha-background-light));
  /**
   * When cycling through search results, CodeMirror overlays the current 
   * selection with another element that has the .CodeMirror-selected class
   * applied. This adds another background color (see above), but this extra
   * box does not quite match the height of this element. To match them up we
   * add some extra padding here. (Note that this doesn't affect the line
   * height of the CodeMirror editor as all line wrappers have a fixed height.)
   */
  padding-bottom: 1.5px;
  padding-top: 0.5px;
}