oliverbooth.dev/src/scss/markdown-callouts.scss

$callout-bg-blue: #1b2735;
$callout-bg-cyan: #233232;
$callout-bg-green: #223026;
$callout-bg-orange: #332a21;
$callout-bg-red: #352223;
$callout-bg-purple: #2c2835;
$callout-bg-grey: #2b2b2b;

$callout-fg-blue: #157aff;
$callout-fg-cyan: #53dfdd;
$callout-fg-green: #44cf6e;
$callout-fg-orange: #e9973f;
$callout-fg-red: #fb464c;
$callout-fg-purple: #a882ff;
$callout-fg-grey: #9e9e9e;

.callout {
  font-size: 16px;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 1rem;

  .callout-title {
    font-weight: bold;
    margin-bottom: 1rem;
  }

  p:last-child {
    margin-bottom: 0;
  }

  &[data-callout="note"] {
    background-color: $callout-bg-blue;

    .callout-title {
      color: $callout-fg-blue;
    }
  }

  &[data-callout="abstract"] {
    background-color: $callout-bg-cyan;

    .callout-title {
      color: $callout-fg-cyan;
    }
  }

  &[data-callout="info"] {
    background-color: $callout-bg-blue;

    .callout-title {
      color: $callout-fg-blue;
    }
  }

  &[data-callout="todo"] {
    background-color: $callout-bg-blue;

    .callout-title {
      color: $callout-fg-blue;
    }
  }

  &[data-callout="tip"] {
    background-color: $callout-bg-cyan;

    .callout-title {
      color: $callout-fg-cyan;
    }
  }

  &[data-callout="important"] {
    background-color: $callout-bg-cyan;

    .callout-title {
      color: $callout-fg-cyan;
    }
  }

  &[data-callout="success"] {
    background-color: $callout-bg-green;

    .callout-title {
      color: $callout-fg-green;
    }
  }

  &[data-callout="question"] {
    background-color: $callout-bg-orange;

    .callout-title {
      color: $callout-fg-orange;
    }
  }

  &[data-callout="warning"] {
    background-color: $callout-bg-orange;

    .callout-title {
      color: $callout-fg-orange;
    }
  }

  &[data-callout="failure"] {
    background-color: $callout-bg-red;

    .callout-title {
      color: $callout-fg-red;
    }
  }

  &[data-callout="danger"] {
    background-color: $callout-bg-red;

    .callout-title {
      color: $callout-fg-red;
    }
  }

  &[data-callout="bug"] {
    background-color: $callout-bg-red;

    .callout-title {
      color: $callout-fg-red;
    }
  }

  &[data-callout="example"] {
    background-color: $callout-bg-purple;

    .callout-title {
      color: $callout-fg-purple;
    }
  }

  &[data-callout="cite"] {
    background-color: $callout-bg-grey;

    .callout-title {
      color: $callout-fg-grey;
    }
  }

  &[data-callout="update"] {
    background-color: $callout-bg-blue;

    .callout-title {
      color: $callout-fg-blue;
    }
  }
}

svg.lucide {
  width: 16px;
}