feat: add alerts

source/_patterns/00-atoms/17-alerts/alert-colors.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--black", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--grey-125", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--red-600", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--yellow-400", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--green-400", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--blue-300", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert-faded.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--black alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--grey-125 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--red-600 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--yellow-400 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--green-400 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--blue-300 alert--faded", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert-semantic.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--dark", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--light", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--error", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--warning", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--success", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--info", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert.mustache

+<span class="alert {{ classes }}">
+  {{# icon }}
+    <i class="alert__icon {{ icon }}"></i>
+  {{/ icon }}
+  <span>{{ excerpt.short }}</span>
+</span>

source/css/atoms/alert.pcss

+.alert {
+  @apply p-4 flex leading-snug;
+
+  &--dark,
+  &--black {
+    @apply bg-black text-white;
+  }
+
+  &--light,
+  &--grey-125 {
+    @apply bg-grey-125 text-grey-300;
+  }
+
+  &--error,
+  &--red-600 {
+    @apply bg-red-600 text-white;
+  }
+
+  &--warning,
+  &--yellow-400 {
+    @apply bg-yellow-400 text-black;
+  }
+
+  &--success,
+  &--green-400 {
+    @apply bg-green-400 text-white;
+  }
+
+  &--info,
+  &--blue-300 {
+    @apply bg-blue-300 text-white;
+  }
+
+  &--faded {
+    @apply bg-opacity-75;
+  }
+}
+
+.alert__icon {
+  @apply mr-2;
+}

source/css/style.pcss

@@ -19,6 +19,7 @@
  * Custom components
  */
 @import "./atoms/animations.pcss";
+@import "./atoms/alert.pcss";
 @import "./atoms/avatar.pcss";
 @import "./atoms/card.pcss";
 @import "./atoms/contact-line.pcss";