Update alert styles to be more accessible and match Flutter docs (#6430)

Also contributes to #2625 as
these styles will be easier to support and more accessible in a dark
mode.

Author: parlough

src/_11ty/plugins/markdown.ts

@@ -62,12 +62,11 @@ function _registerAside(markdown: MarkdownIt, id: string, defaultTitle: string |
       if (tokens[index].nesting === 1) {
         const parsedArgs = /\s+(.*)/.exec(tokens[index].info);
 
-        const title = parsedArgs?.[1] ?? defaultTitle ?? '';
+        const title = parsedArgs?.[1] ?? defaultTitle;
         return `<aside class="alert ${style}">
-<div class="alert-header">
+${title !== null ? `<div class="alert-header">
 ${icon !== null ? `<span class="material-symbols" aria-hidden="true">${icon}</span>` : ''}
-<span>${title ?? ''}</span>
-</div>
+<span>${title}</span></div>` : ''}
 <div class="alert-content">
 `;
       } else {
@@ -97,7 +96,8 @@ function _registerAsides(markdown: MarkdownIt): void {
     'alert-info',
   );
   _registerAside(markdown, 'tip', 'Tip', 'lightbulb', 'alert-success');
-  _registerAside(markdown, 'important', 'Important', 'error', 'alert-warning');
+  _registerAside(markdown, 'recommend', 'Recommended', 'bolt', 'alert-success');
+  _registerAside(markdown, 'important', 'Important', 'feedback', 'alert-important');
   _registerAside(
     markdown,
     'warning',

src/_sass/_site.scss

@@ -8,6 +8,7 @@
 @use 'core/base';
 @use 'core/utils';
 
+@use 'components/alert';
 @use 'components/banner';
 @use 'components/card';
 @use 'components/code';
@@ -498,73 +499,6 @@ thead:has(th:empty) {
   margin-block-end: 1rem;
 }
 
-.alert {
-  border: none;
-  border-radius: 0;
-  color: $site-color-body;
-  margin-top: 1rem;
-  padding: 1.5rem;
-
-  .alert-header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-family: $site-font-family-gsans;
-    font-size: 1.125rem;
-    font-weight: 500;
-  }
-
-  .alert-content {
-    margin-top: 0.5rem;
-  }
-
-  span.material-symbols {
-    font-size: 1.25em;
-    user-select: none;
-  }
-
-  pre {
-    background-color: #00000010;
-  }
-
-  p, li, ul, ol {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &.alert-success {
-    width: auto;
-    background-color: $alert-success-bg;
-  }
-
-  &.alert-info {
-    width: auto;
-    background-color: $alert-info-bg;
-  }
-
-  &.alert-secondary {
-    width: auto;
-    background-color: $flutter-color-grey-500;
-  }
-
-  &.alert-warning {
-    width: auto;
-    background-color: $alert-warning-bg;
-  }
-
-  &.alert-danger {
-    width: auto;
-    background-color: $alert-danger-bg;
-  }
-
-  &.alert-obsolete {
-    width: auto;
-    background-color: $gray-dark;
-    color: $white-base;
-  }
-}
-
 .material-symbols {
   font-family: $site-font-family-icon;
   font-weight: normal;

src/_sass/components/_alert.scss

@@ -0,0 +1,82 @@
+@use '../core/variables' as *;
+
+aside.alert {
+  --alert-info-fgColor: #2058b7;
+  --alert-tip-fgColor: #0c7927;
+  --alert-important-fgColor: #7953bf;
+  --alert-warning-fgColor: #955d00;
+  --alert-error-fgColor: #c43131;
+  // Dark mode options:
+  //--alert-info-fgColor: #429bff;
+  //--alert-tip-fgColor: #25c04b;
+  //--alert-important-fgColor: #ad81ff;
+  //--alert-warning-fgColor: #cea11f;
+  //--alert-error-fgColor: #ff6666;
+
+  --alert-title-color: $site-color-body;
+
+  padding: 0.75rem;
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
+  border-left: solid 0.25rem var(--alert-border-color, var(--alert-title-color, $site-color-light-grey));
+  background-color: $site-color-codeblock-bg;
+
+  .alert-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-block-end: 0.5rem;
+    font-family: $site-font-family-alt;
+    font-size: 1.125rem;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    color: var(--alert-title-color);
+
+    .material-symbols {
+      font-size: 22px;
+      user-select: none;
+    }
+  }
+
+  .alert-content {
+    color: $site-color-body;
+
+    > p, > li, > ul, > ol {
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  &.alert-success {
+    --alert-title-color: var(--alert-tip-fgColor);
+  }
+
+  &.alert-important {
+    --alert-title-color: var(--alert-important-fgColor);
+  }
+
+  &.alert-warning {
+    --alert-title-color: var(--alert-warning-fgColor);
+  }
+
+  &.alert-info {
+    --alert-title-color: var(--alert-info-fgColor);
+  }
+
+  &.alert-secondary {
+    --alert-border-color: #{$site-color-light-grey};
+  }
+
+  &.alert-error {
+    --alert-title-color: var(--alert-error-fgColor);
+  }
+}