fix: update alert (#319)

src/defaultTheme/components/atoms/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 mt-4 mb-4 rounded-md alert" :class="`alert-${type}`">
+  <div class="p-4 mt-4 mb-4 rounded-md alert" :class="[type]">
     <div class="flex items-start">
       <div class="flex-grow alert-content">
         <Markdown :node="$slots.default" unwrap="p" />
@@ -29,87 +29,72 @@ export default defineComponent({
 })
 </script>
 
-<style lang="postcss">
-.alert p {
-  @apply m-0 !important;
-}
-
-.alert .alert-content strong {
-  @apply text-current;
-}
-
-.alert-content a {
-  @apply text-current hover:border-current font-semibold;
-}
-.dark .alert-content a {
-  @apply text-current hover:border-current font-semibold;
-}
-
-.alert-content pre code {
-  background-color: inherit !important;
-}
-
-.dark .alert-content code {
-  @apply text-current;
-}
-
-/* Info */
-
-.alert-info {
-  @apply bg-blue-100 dark:bg-blue-800 border-blue-400 dark:border-blue-600;
-}
-.alert-info code {
-  @apply bg-blue-200 dark:bg-blue-700 shadow-none border-0 text-current;
-}
-.alert-info .alert-icon {
-  @apply text-blue-400 dark:text-blue-300;
-}
-.alert-info .alert-content {
-  @apply text-blue-700 dark:text-blue-300;
-}
-
-/* Success */
-
-.alert-success {
-  @apply bg-green-100 dark:bg-green-800 border-green-400 dark:border-green-600;
-}
-.alert-success code {
-  @apply bg-green-200 dark:bg-green-700 shadow-none border-0 text-current;
-}
-.alert-success .alert-icon {
-  @apply text-green-400 dark:text-green-300;
-}
-.alert-success .alert-content {
-  @apply text-green-700 dark:text-green-300;
-}
-
-/* Warning */
+<style lang="postcss" scoped>
+.alert {
+  &.success {
+    @apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200;
+    >>> {
+      code {
+        @apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-green-400 dark:border-green-700;
+        }
+      }
+    }
+  }
+  &.info {
+    @apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200;
+    >>> {
+      code {
+        @apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-blue-400 dark:border-blue-700;
+        }
+      }
+    }
+  }
+  &.warning {
+    @apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100;
+    >>> {
+      code {
+        @apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-yellow-400 dark:border-yellow-700;
+        }
+      }
+    }
+  }
+  &.danger {
+    @apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100;
+    >>> {
+      code {
+        @apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current;
+      }
+      a:hover {
+        code {
+          @apply border-red-400 dark:border-red-700;
+        }
+      }
+    }
+  }
 
-.alert-warning {
-  @apply bg-yellow-100 dark:bg-yellow-800 border-yellow-400 dark:border-yellow-600;
-}
-.alert-warning code {
-  @apply bg-yellow-200 dark:bg-yellow-700 shadow-none border-0 text-current;
-}
-.alert-warning .alert-icon {
-  @apply text-yellow-400 dark:text-yellow-300;
-}
-.alert-warning .alert-content {
-  @apply text-yellow-700 dark:text-yellow-300;
+  >>> {
+    a {
+      @apply no-underline border-none font-semibold;
+      code {
+        @apply border border-transparent border-dashed;
+      }
+    }
+  }
 }
 
-/* Danger */
-
-.alert-danger {
-  @apply bg-red-100 dark:bg-red-800 border-red-400 dark:border-red-600;
-}
-.alert-danger code {
-  @apply bg-red-200 dark:bg-red-700 shadow-none border-0 text-current;
-}
-.alert-danger .alert-icon {
-  @apply text-red-400 dark:text-red-300;
-}
-.alert-danger .alert-content {
-  @apply text-red-700 dark:text-red-300;
+.alert >>> p {
+  @apply m-0 !important;
 }
 </style>