Adjust alert/aside design (#3634)

* Adjust alert aside design

* Be specific with title alignment

Author: parlough

lib/resources/styles.css

@@ -34,6 +34,8 @@
 
   /* alerts */
   --alert-info: #e7f8ff;
+  --alert-tip: #ecfaf7;
+  --alert-important: #e2dbff;
   --alert-warning: #fcf8e3;
   --alert-error: #fde9ee;
 }
@@ -71,9 +73,11 @@
   --main-icon-color: white;
 
   /* alerts */
-  --alert-info: #1976d2;
-  --alert-warning: #ffe57f;
-  --alert-error: #cf6679;
+  --alert-info: #043875;
+  --alert-tip: #065517;
+  --alert-important: #4a00b4;
+  --alert-warning: #7b6909;
+  --alert-error: #7a0c17;
 }
 
 #theme {
@@ -1213,27 +1217,25 @@ li.inherited a {
 .markdown-alert {
   margin-top: 1rem;
   margin-bottom: 1rem;
-  padding: 30px;
-}
-
-.markdown-alert p:nth-child(2) {
-  display: inline;
+  padding: 1.25rem;
 }
 
 .markdown-alert>:last-child {
   margin-bottom: 0;
 }
 
 .markdown-alert-title {
-  font-weight: bold;  
-}
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
 
-.markdown-alert-title:after {
-  content: ':';
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
 }
 
-p.markdown-alert-title {
-  display: inline;
+.markdown-alert-title:before {
+  font: 24px / 1 'Material Symbols Outlined';
 }
 
 /* note, tip, important, warning, caution */
@@ -1242,18 +1244,38 @@ p.markdown-alert-title {
   background-color: var(--alert-info);
 }
 
+.markdown-alert-note .markdown-alert-title:before {
+  content: 'info';
+}
+
 .markdown-alert.markdown-alert-tip {
-  background-color: var(--alert-info);
+  background-color: var(--alert-tip);
+}
+
+.markdown-alert-tip .markdown-alert-title:before {
+  content: 'lightbulb';
 }
 
 .markdown-alert.markdown-alert-important {
-  background-color: var(--alert-info);
+  background-color: var(--alert-important);
+}
+
+.markdown-alert-important .markdown-alert-title:before {
+  content: 'feedback';
 }
 
 .markdown-alert.markdown-alert-warning {
   background-color: var(--alert-warning);
 }
 
+.markdown-alert-warning .markdown-alert-title:before {
+  content: 'warning';
+}
+
 .markdown-alert.markdown-alert-caution {
   background-color: var(--alert-error);
 }
+
+.markdown-alert-caution .markdown-alert-title:before {
+  content: 'report';
+}

lib/src/generator/templates.aot_renderers_for_html.dart

@@ -3531,7 +3531,7 @@ String _deduplicated_lib_templates_html__head_html(TemplateDataBase context0) {
   buffer.write('''
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
   ''');
   buffer.writeln();
   buffer.write('''

lib/templates/html/_head.html

@@ -20,7 +20,7 @@
   {{! TODO(jdkoren): unwrap ^useBaseHref sections when the option is removed.}}
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
   {{! **Update versions for static assets when changed to force browsers to refresh them.** }}
   <link rel="stylesheet" href="{{^useBaseHref}}%%__HTMLBASE_dartdoc_internal__%%{{/useBaseHref}}static-assets/github.css?v1">
   <link rel="stylesheet" href="{{^useBaseHref}}%%__HTMLBASE_dartdoc_internal__%%{{/useBaseHref}}static-assets/styles.css?v1">