web/styles/_gfm.scss

// Copyright (c) 2024, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

/// Alert/admonition styles used by GFM, but styled to match other Dart sites.
.markdown-alert {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;

  --alert-title-color: --main-inset-borderColor;

  background-color: var(--main-inset-bgColor);
  border-left: solid 0.25rem var(--alert-title-color);

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

  .markdown-alert-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

    font-size: 1.125rem;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    color: var(--alert-title-color, inherit);

    &::before {
      font: 22px / 1 'Material Symbols Outlined';
      user-select: none;
    }
  }

  &.markdown-alert-note {
    --alert-title-color: var(--alert-info-fgColor);

    .markdown-alert-title::before {
      content: 'info';
    }
  }

  &.markdown-alert-tip {
    --alert-title-color: var(--alert-tip-fgColor);

    .markdown-alert-title::before {
      content: 'lightbulb';
    }
  }

  &.markdown-alert-important {
    --alert-title-color: var(--alert-important-fgColor);

    .markdown-alert-title::before {
      content: 'feedback';
    }
  }

  &.markdown-alert-warning {
    --alert-title-color: var(--alert-warning-fgColor);

    .markdown-alert-title::before {
      content: 'warning';
    }
  }

  &.markdown-alert-caution {
    --alert-title-color: var(--alert-error-fgColor);

    .markdown-alert-title::before {
      content: 'report';
    }
  }
}