open-consul/ui/packages/consul-ui/app/components/code-editor/skin.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

$syntax-consul: #69499a;
$syntax-dark-gray: #535f73;
:root {
  --syntax-light-grey: #dde3e7;
  --syntax-light-gray: #a4a4a4;
  --syntax-light-grey-blue: #6c7b81;
  --syntax-dark-grey: #788290;
  --syntax-faded-gray: #eaeaea;
  // Product colors
  --syntax-atlas: #127eff;
  --syntax-vagrant: #2f88f7;
  --syntax-consul: #{$syntax-consul};
  --syntax-terraform: #822ff7;
  --syntax-serf: #dd4e58;
  --syntax-packer: #1ddba3;

  // Our colors
  --syntax-gray: lighten(#000, 89%);
  --syntax-red: #ff3d3d;
  --syntax-green: #39b54a;
  --syntax-dark-gray: #{$syntax-dark-gray};

  --syntax-gutter-grey: #2a2f36;
  --syntax-yellow: var(--token-color-vault-brand);
}
.CodeMirror {
  max-width: 1260px;
  min-height: 300px;
  height: auto;
  /* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */
  padding-bottom: 20px;
}
.CodeMirror-scroll {
  overflow-x: hidden !important;
}
.CodeMirror-lint-tooltip {
  @extend %code-100-regular;
  background-color: #f9f9fa;
  border: 1px solid var(--syntax-light-gray);
  border-radius: 0;
  color: lighten(#000, 13%);
  padding: 7px 8px 9px;
}

.cm-s-hashi {
  &.CodeMirror {
    width: 100%;
    background-color: var(--token-color-hashicorp-brand) !important;
    color: #cfd2d1 !important;
    border: none;
    font-family: var(--token-typography-font-stack-code);
    -webkit-font-smoothing: auto;
    line-height: 1.4;
  }

  .CodeMirror-gutters {
    color: var(--syntax-dark-grey);
    background-color: var(--syntax-gutter-grey);
    border: none;
  }

  .CodeMirror-cursor {
    border-left: solid thin #f8f8f0;
  }

  .CodeMirror-linenumber {
    color: #6d8a88;
  }

  &.CodeMirror-focused div.CodeMirror-selected {
    background: rgb(33, 66, 131);
  }

  .CodeMirror-line::selection,
  .CodeMirror-line > span::selection,
  .CodeMirror-line > span > span::selection {
    background: rgb(33, 66, 131);
  }

  .CodeMirror-line::-moz-selection,
  .CodeMirror-line > span::-moz-selection,
  .CodeMirror-line > span > span::-moz-selection {
    background: var(--token-color-surface-interactive);
  }

  span.cm-comment {
    color: var(--syntax-light-grey);
  }

  span.cm-string,
  span.cm-string-2 {
    color: var(--syntax-packer);
  }

  span.cm-number {
    color: var(--syntax-serf);
  }

  span.cm-variable {
    color: lighten($syntax-consul, 20%);
  }

  span.cm-variable-2 {
    color: lighten($syntax-consul, 20%);
  }

  span.cm-def {
    color: var(--syntax-packer);
  }

  span.cm-operator {
    color: var(--syntax-gray);
  }
  span.cm-keyword {
    color: var(--syntax-yellow);
  }

  span.cm-atom {
    color: var(--syntax-serf);
  }

  span.cm-meta {
    color: var(--syntax-packer);
  }

  span.cm-tag {
    color: var(--syntax-packer);
  }

  span.cm-error {
    color: var(--syntax-red);
  }

  span.cm-attribute {
    color: #9fca56;
  }

  span.cm-qualifier {
    color: #9fca56;
  }

  span.cm-property {
    color: lighten($syntax-consul, 20%);
  }

  span.cm-variable-3 {
    color: #9fca56;
  }

  span.cm-builtin {
    color: #9fca56;
  }

  .CodeMirror-activeline-background {
    background: #101213;
  }

  .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: var(--token-color-surface-primary) !important;
  }
}

.readonly-codemirror {
  .CodeMirror-cursors {
    display: none;
  }

  .cm-s-hashi {
    span {
      color: var(--syntax-light-grey);
    }

    span.cm-string,
    span.cm-string-2 {
      color: var(--syntax-faded-gray);
    }

    span.cm-number {
      color: lighten($syntax-dark-gray, 30%);
    }

    span.cm-property {
      color: var(--token-color-surface-primary);
    }

    span.cm-variable-2 {
      color: var(--syntax-light-grey-blue);
    }
  }
}

%code-editor {
  .toolbar-container {
    background: var(--token-color-surface-strong);
    background: linear-gradient(
      180deg,
      var(--token-color-surface-strong) 50%,
      var(--token-color-surface-interactive-active) 100%
    );
    border: 1px solid var(--token-color-surface-interactive-active);
    border-bottom-color: var(--token-color-foreground-faint);
    border-top-color: var(--token-color-foreground-disabled);

    .toolbar {
      .title {
        @extend %body-200-semibold;
        color: var(--token-color-foreground-strong);
      }
      .toolbar-separator {
        border-right: 1px solid var(--token-color-palette-neutral-300);
      }
    }
    .ember-power-select-trigger {
      background-color: var(--token-color-surface-primary);
      color: var(--token-color-hashicorp-brand);
      border-radius: var(--decor-radius-100);
      border: var(--decor-border-100);
      border-color: var(--token-color-foreground-faint);
    }
  }
}