Update Alert Styles

src/core/markdown.py

@@ -51,7 +51,7 @@ class Tag(SpanToken):
 
 
 class AlertBlock(BlockToken):
-    pattern = re.compile(r'^!!! (danger|warning|info)(\s+".+")?\s*$')
+    pattern = re.compile(r'^!!! (danger|warning|info|success)(\s+".+")?\s*$')
 
     def __init__(self, match):
         self.alert_type = match[0]
@@ -89,9 +89,9 @@ class MyHtmlRenderer(HTMLRenderer):
         return html.escape(token.content)
 
     def render_alert_block(self, token: AlertBlock) -> str:
-        result = f'<div class="mx-1 my-3 alert alert-{token.alert_type}">'
+        result = f'<div class="mx-1 my-3 hub-alert hub-alert--{token.alert_type}">'
         if token.alert_caption:
-            result += f'<p class="fw-bold">{token.alert_caption}</p>'
+            result += f'{token.alert_caption}'
         result += self.render_inner(token)
         result += '</div>\n'
         return result

src/plainui/jinja2/plainui/components/alert.html.j2

 {% macro alert(type, class="") -%}
-  <div class="hub-alert hub-alert--{{ type }} {{ class }}">
-    <div class="hub-alert__bar"></div>
-    <div role="alert">{{ caller() }}</div>
-  </div>
+  <div class="hub-alert hub-alert--{{ type }} {{ class }}" role"alert">{{ caller() }}</div>
 {%- endmacro %}
 
 {% macro info(class="") -%}

src/plainui/styles/_variables-hub.scss

@@ -38,21 +38,21 @@ $hub-event-list-upcoming-color: $info !default;
 
 /* Alerts */
 
-$hub-alert-success-border: $success-border-subtle !default;
-$hub-alert-success-color: $success !default;
-$hub-alert-success-fill: $success !default;
+$hub-alert-success-border: $secondary-border-subtle !default;
+$hub-alert-success-color: $white !default;
+$hub-alert-success-bg: $success !default;
 
 $hub-alert-info-border: $info-border-subtle !default;
-$hub-alert-info-color: $info !default;
-$hub-alert-info-fill: $info !default;
+$hub-alert-info-color: $black !default;
+$hub-alert-info-bg: $info !default;
 
 $hub-alert-warning-border: $warning-border-subtle !default;
-$hub-alert-warning-color: $warning !default;
-$hub-alert-warning-fill: $warning !default;
+$hub-alert-warning-color: $black !default;
+$hub-alert-warning-bg: $warning !default;
 
 $hub-alert-danger-border: $danger-border-subtle !default;
-$hub-alert-danger-color: $danger !default;
-$hub-alert-danger-fill: $danger !default;
+$hub-alert-danger-color: $white !default;
+$hub-alert-danger-bg: $danger !default;
 
 /* Tags */
 

src/plainui/styles/components/_alert.scss

 .hub-alert {
   align-items: center;
+  background-color: var(--hub-alert-background-color);
+  border-left: 0.2rem solid var(--hub-alert-border-color);
   color: var(--hub-alert-text-color);
-  border: 1px solid var(--hub-alert-border-color);
   display: flex;
   font: $hub-text-main-font;
-  gap: map-get($spacers, 3);
-  padding: map-get($spacers, 1) map-get($spacers, 2);
-}
-
-.hub-alert__bar {
-  background-color: var(--hub-alert-fill-color);
-  border-radius: 0.25rem;
-  min-height: 32px;
-  width: 0.1875rem;
+  padding: map-get($spacers, 2);
 }
 
 .hub-alert--info {
+  --hub-alert-background-color: #{$hub-alert-info-bg};
   --hub-alert-border-color: #{$hub-alert-info-border};
-  --hub-alert-fill-color: #{$hub-alert-info-fill};
   --hub-alert-text-color: #{$hub-alert-info-color};
 }
 
 .hub-alert--warning {
+  --hub-alert-background-color: #{$hub-alert-warning-bg};
   --hub-alert-border-color: #{$hub-alert-warning-border};
-  --hub-alert-fill-color: #{$hub-alert-warning-fill};
   --hub-alert-text-color: #{$hub-alert-warning-color};
 }
 
 .hub-alert--success {
+  --hub-alert-background-color: #{$hub-alert-success-bg};
   --hub-alert-border-color: #{$hub-alert-success-border};
-  --hub-alert-fill-color: #{$hub-alert-success-fill};
   --hub-alert-text-color: #{$hub-alert-success-color};
 }
 
 .hub-alert--danger {
+  --hub-alert-background-color: #{$hub-alert-danger-bg};
   --hub-alert-border-color: #{$hub-alert-danger-border};
-  --hub-alert-fill-color: #{$hub-alert-danger-fill};
   --hub-alert-text-color: #{$hub-alert-danger-color};
 }

src/plainui/styles/themes/38c3.scss

@@ -18,7 +18,3 @@ body {
   background-position: 100% 100%;
   background-repeat: no-repeat;
 }
-
-.hub-alert {
-  background-color: $black;
-}