open-nomad/ui/app/styles/components/json-viewer.scss

@mixin theme(
  $default-color: black,
  $string-color: green,
  $number-color: blue,
  $boolean-color: red,
  $null-color: #855A00,
  $undefined-color: rgb(202, 11, 105),
  $function-color: #FF20ED,
  $toggler-opacity: 0.6,
  $toggler-color: #45376F,
  $bracket-color: blue,
  $key-color: #00008B,
  $url-color: blue
) {
  font-family: monospace;
  &,
  a,
  a:hover {
    color: $default-color;
    text-decoration: none;
  }

  .json-formatter-row {
    margin-left: 1rem;
  }

  .json-formatter-children {
    &.json-formatter-empty {
      opacity: 0.5;
      margin-left: 1rem;

      &:after {
        display: none;
      }
      &.json-formatter-object:after {
        content: 'No properties';
      }
      &.json-formatter-array:after {
        content: '[]';
      }
    }
  }

  .json-formatter-string {
    color: $string-color;
    white-space: pre;
    word-wrap: break-word;
  }

  .json-formatter-number {
    color: $number-color;
  }
  .json-formatter-boolean {
    color: $boolean-color;
  }
  .json-formatter-null {
    color: $null-color;
  }
  .json-formatter-undefined {
    color: $undefined-color;
  }
  .json-formatter-function {
    color: $function-color;
  }
  .json-formatter-date {
    background-color: fade($default-color, 5%);
  }
  .json-formatter-url {
    text-decoration: underline;
    color: $url-color;
    cursor: pointer;
  }

  .json-formatter-bracket {
    color: $bracket-color;
  }
  .json-formatter-key {
    color: $key-color;
    cursor: pointer;
    padding-right: 0.2rem;
  }

  .json-formatter-constructor-name {
    cursor: pointer;
  }

  .json-formatter-toggler {
    line-height: 1rem;
    font-size: 1rem;
    vertical-align: baseline;
    opacity: $toggler-opacity;
    cursor: pointer;
    padding-right: 0.3rem;

    &:after {
      display: inline-block;
      transition: none;
      content: '+';
    }
  }

  // Inline preview on hover (optional)
  > a > .json-formatter-preview-text {
    opacity: 0;
    transition: opacity 0.15s ease-in;
    font-style: italic;
  }

  &:hover > a > .json-formatter-preview-text {
    opacity: 0.6;
  }

  // Open state
  &.json-formatter-open {
    > .json-formatter-toggler-link .json-formatter-toggler:after {
      transform: none;
      content: '-';
    }
    > .json-formatter-children:after {
      display: inline-block;
    }
    > a > .json-formatter-preview-text {
      display: none;
    }
    &.json-formatter-empty:after {
      display: block;
    }
  }
}

.json-formatter-nomad.json-formatter-row {
  @include theme(
    $grey,
    $nomad-green,
    $packer-blue,
    $consul-pink,
    $terraform-purple,
    $terraform-purple-dark,
    $white,
    0.6,
    $black,
    $grey-dark,
    $white,
    $blue
  );
}