Enable/fix markdown alert blocks + style rules. (#8181)

app/lib/shared/markdown.dart

@@ -29,6 +29,7 @@ const _whitelistedClassNames = <String>[
   'changelog-content',
   'hash-header',
   'hash-link',
+  'markdown-alert',
   'report-summary-icon',
 ];
 
@@ -115,6 +116,7 @@ String _renderSafeHtml(
         !disableHashIds, // TODO: Use a denylist for ids used by pub site
     allowClassName: (String cn) {
       if (cn.startsWith('language-')) return true;
+      if (cn.startsWith('markdown-alert-')) return true;
       return _whitelistedClassNames.contains(cn);
     },
     addLinkRel: (String url) {

app/test/shared/markdown_test.dart

@@ -403,4 +403,17 @@ void main() {
       );
     });
   });
+
+  group('alert blocks', () {
+    test('note', () {
+      final output = markdownToHtml('> [!NOTE]\n> Extra information.');
+      expect(output.split('\n').toList(), [
+        '<div class="markdown-alert markdown-alert-note">',
+        '<p class="markdown-alert-title">Note</p>',
+        '<p>Extra information.</p>',
+        '</div>',
+        '',
+      ]);
+    });
+  });
 }

pkg/web_css/lib/src/_alerts.scss

@@ -0,0 +1,79 @@
+/* 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. */
+
+.markdown-alert {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding: 1.25rem;
+
+  >:last-child {
+    margin-bottom: 0;
+  }
+
+  &.markdown-alert-note {
+    background-color: var(--pub-markdown-alert-info);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'info';
+    // }
+  }
+
+  &.markdown-alert-tip {
+    background-color: var(--pub-markdown-alert-tip);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'lightbulb';
+    // }
+  }
+
+  &.markdown-alert-important {
+    background-color: var(--pub-markdown-alert-important);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'feedback';
+    // }
+  }
+
+  &.markdown-alert-warning {
+    background-color: var(--pub-markdown-alert-warning);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'warning';
+    // }
+  }
+
+  &.markdown-alert-caution {
+    background-color: var(--pub-markdown-alert-error);
+
+    // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+    // TODO: remove or fix this rule
+    // .markdown-alert-title:before {
+    //   content: 'report';
+    // }
+  }
+}
+
+.markdown-alert-title {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
+
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+
+  // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
+  // TODO: remove or fix this rule
+  // &:before {
+  //   font: 24px / 1 'Material Symbols Outlined';
+  // }
+}

pkg/web_css/lib/src/_variables.scss

@@ -31,6 +31,13 @@
   --pub-inset-bgColor:         var(--pub-color-smokeWhite);
   --pub-selected-bgColor:      var(--pub-color-bubblesBlue);
 
+  // TODO: adjust colors (copied from dartdoc style) to blend in better with the pub.dev design
+  --pub-markdown-alert-info: #e7f8ff;
+  --pub-markdown-alert-tip: #ecfaf7;
+  --pub-markdown-alert-important: #e2dbff;
+  --pub-markdown-alert-warning: #fcf8e3;
+  --pub-markdown-alert-error: #fde9ee;
+
   --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
   --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
   --pub-code-text-color: var(--pub-neutral-textColor);
@@ -116,6 +123,13 @@
   --pub-inset-bgColor:         var(--pub-color-anchorBlack);
   --pub-selected-bgColor:      var(--pub-color-nipponUltraBlue);
 
+  // TODO: adjust colors (copied from dartdoc style) to blend in better with the pub.dev design
+  --pub-markdown-alert-info: #043875;
+  --pub-markdown-alert-tip: #065517;
+  --pub-markdown-alert-important: #4a00b4;
+  --pub-markdown-alert-warning: #7b6909;
+  --pub-markdown-alert-error: #7a0c17;
+
   --pub-code-text-color: var(--pub-neutral-textColor);
   --pub-link-text-color: #40c4ff;
   --pub-badge-default-color: var(--pub-link-text-color);

pkg/web_css/lib/style.scss

@@ -1,7 +1,6 @@
 // Include third-party CSS into a single output file
 // to reduce the number of HTTP requests.
 @use '../../../third_party/css/github-markdown.css';
-@use '../../../third_party/css/dartdoc-github-alert.css';
 
 .light-theme {
   @import "../../../third_party/highlight/github";
@@ -14,6 +13,7 @@
 // Local styles and rules.
 @import 'src/_variables';
 @import 'src/_base';
+@import 'src/_alerts';
 @import 'src/_site_header';
 @import 'src/_activity_log';
 @import 'src/_detail_page';

pkg/web_css/test/expression_test.dart

@@ -54,10 +54,18 @@ void main() {
         'cookie-notice-container',
         'cookie-notice-button',
       ]);
+      // markdown alert classes
+      expressions.removeAll([
+        'markdown-alert-note',
+        'markdown-alert-tip',
+        'markdown-alert-important',
+        'markdown-alert-warning',
+        'markdown-alert-caution',
+        'markdown-alert-title',
+      ]);
 
       // remove third-party css expressions
       final thirdPartyCss = [
-        '../../third_party/css/dartdoc-github-alert.css',
         '../../third_party/css/github-markdown.css',
         '../../third_party/highlight/github.css',
         '../../third_party/highlight/github-dark.css',