alert.css in coveragebook_components-0.10.0

- old
+ new

@@ -3,18 +3,18 @@
     @apply rounded-xl overflow-hidden border border-transparent @container;
 
     .alert-container {
       @apply flex items-start px-4 py-2 relative;
     }
-
+    /* 
     .alert-icon {
       @apply flex items-center p-2 rounded-full;
 
       .coco-icon {
         @apply w-5 h-5;
       }
-    }
+    } */
 
     .alert-body {
       @apply pl-4 pr-2;
     }
 
@@ -56,10 +56,18 @@
       }
 
       .alert-body {
         @apply @[1000px]:w-auto;
       }
+
+      .alert-stamp .coco-icon {
+        @apply text-content-light-1;
+      }
+
+      &[data-theme="warning-vivid"] .alert-stamp .coco-icon {
+        @apply text-content-dark-1;
+      }
     }
 
     /* Dismissable */
 
     &[data-dismissable="true"] {
@@ -78,14 +86,10 @@
       .alert-container {
         min-height: theme(spacing.12);
         @apply py-1.5;
       }
 
-      .alert-icon {
-        @apply p-0 !bg-transparent;
-      }
-
       .alert-body {
         @apply pl-3;
       }
 
       .alert-title {
@@ -120,89 +124,53 @@
 
       .alert-content {
         @apply text-content-light-1;
       }
 
-      .alert-icon {
-        @apply text-content-light-1;
-      }
-
       .coco_link:not([data-theme]) {
         @apply app-link-neutral-light;
       }
     }
 
     &[data-theme="positive"] {
       @apply bg-background-positive-light border-positive-300 hover:border-positive-400;
-
-      .alert-icon {
-        @apply text-content-positive bg-positive-200;
-      }
     }
 
     &[data-theme="positive-vivid"] {
       @apply bg-background-positive;
-
-      .alert-icon {
-        @apply bg-positive-700;
-      }
     }
 
     &[data-theme="warning"] {
       @apply bg-background-warning-light border-warning-300  hover:border-warning-400;
-
-      .alert-icon {
-        @apply text-content-warning bg-warning-100;
-      }
     }
 
     &[data-theme="warning-vivid"] {
       @apply bg-background-warning;
 
       .alert-content {
         @apply text-content-dark-1;
       }
 
-      .alert-icon {
-        @apply bg-warning-600;
-      }
-
       .coco-link:not([data-theme]) {
         @apply app-link-neutral-dark;
       }
     }
 
     &[data-theme="negative"] {
       @apply bg-background-negative-light border-negative-300 hover:border-negative-400;
-
-      .alert-icon {
-        @apply text-content-negative bg-negative-200;
-      }
     }
 
     &[data-theme="negative-vivid"] {
       @apply bg-background-negative;
-
-      .alert-icon {
-        @apply bg-negative-700;
-      }
     }
 
     &[data-theme="info"] {
       @apply bg-background-info-light border-info-300 hover:border-info-400;
-
-      .alert-icon {
-        @apply text-content-info bg-info-200;
-      }
     }
 
     &[data-theme="info-vivid"] {
       @apply bg-background-info;
-
-      .alert-icon {
-        @apply bg-info-700;
-      }
     }
   }
 }
 
 @layer utilities {
@@ -222,11 +190,11 @@
     &[data-condensed="true"] {
       .alert-container {
         @apply py-3;
       }
 
-      .coco-icon {
+      .coco-stamp {
         @apply mt-1.5;
       }
 
       &.with-title .alert-message {
         @apply mt-0;
@@ -247,11 +215,11 @@
       &:not(.with-action) {
         .alert-container {
           @apply items-center;
         }
 
-        .alert-icon {
+        .alert-stamp {
           @apply self-center;
         }
 
         &[data-dismissable="true"] {
           .alert-dismiss {
@@ -265,11 +233,11 @@
   .app-alert-multi-line {
     .alert-container {
       @apply items-center py-2.5;
     }
 
-    .alert-icon {
+    .alert-stamp {
       @apply self-center;
     }
 
     .alert-body {
       @apply flex items-center w-full;
@@ -290,10 +258,10 @@
     &[data-condensed="true"] {
       .alert-container {
         @apply py-2;
       }
 
-      .coco-icon {
+      .coco-stamp {
         @apply mt-0;
       }
 
       &.with-title .alert-message {
         @apply mt-0;