Adjusted markdown alert styles closer to GitHub rendering. (#8185)

Author: isoos

pkg/web_css/lib/src/_alerts.scss

@@ -3,16 +3,20 @@
    BSD-style license that can be found in the LICENSE file. */
 
 .markdown-alert {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  padding: 1.25rem;
+  border-left: 0.25em solid var(--pub-inset-bgColor);
+  padding: 0.5rem 1rem;
+  margin: 1rem 0;
 
   >:last-child {
     margin-bottom: 0;
   }
 
   &.markdown-alert-note {
-    background-color: var(--pub-markdown-alert-info);
+    border-left-color: var(--pub-markdown-alert-note);
+
+    .markdown-alert-title {
+      color: var(--pub-markdown-alert-note);
+    }
 
     // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
     // TODO: remove or fix this rule
@@ -22,7 +26,11 @@
   }
 
   &.markdown-alert-tip {
-    background-color: var(--pub-markdown-alert-tip);
+    border-left-color: var(--pub-markdown-alert-tip);
+
+    .markdown-alert-title {
+      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
@@ -32,7 +40,11 @@
   }
 
   &.markdown-alert-important {
-    background-color: var(--pub-markdown-alert-important);
+    border-left-color: var(--pub-markdown-alert-important);
+
+    .markdown-alert-title {
+      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
@@ -42,7 +54,11 @@
   }
 
   &.markdown-alert-warning {
-    background-color: var(--pub-markdown-alert-warning);
+    border-left-color: var(--pub-markdown-alert-warning);
+
+    .markdown-alert-title {
+      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
@@ -52,7 +68,11 @@
   }
 
   &.markdown-alert-caution {
-    background-color: var(--pub-markdown-alert-error);
+    border-left-color: var(--pub-markdown-alert-caution);
+
+    .markdown-alert-title {
+      color: var(--pub-markdown-alert-caution);
+    }
 
     // NOTE: This is a copy of the dartdoc alert style, for using Material Symbols font.
     // TODO: remove or fix this rule

pkg/web_css/lib/src/_variables.scss

@@ -31,12 +31,12 @@
   --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;
+  // Note: these colors are copied from GitHub styles
+  --pub-markdown-alert-note:      #0969da; // accent-emphasis from GitHub
+  --pub-markdown-alert-tip:       #1a7f37; // success-emphasis from GitHub
+  --pub-markdown-alert-important: #8250df; // done-emphasis from GitHub
+  --pub-markdown-alert-warning:   #9a6700; // attention-emphasis from GitHub
+  --pub-markdown-alert-caution:   #cf222e; // danger-emphasis from GitHub
 
   --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;
@@ -123,12 +123,12 @@
   --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;
+  // Note: these colors are copied from GitHub styles
+  --pub-markdown-alert-note:      #0969da; // accent-emphasis from GitHub
+  --pub-markdown-alert-tip:       #1f883d; // success-emphasis from GitHub
+  --pub-markdown-alert-important: #8250df; // done-emphasis from GitHub
+  --pub-markdown-alert-warning:   #9a6700; // attention-emphasis from GitHub
+  --pub-markdown-alert-caution:   #cf222e; // danger-emphasis from GitHub
 
   --pub-code-text-color: var(--pub-neutral-textColor);
   --pub-link-text-color: #40c4ff;