feat: refactor notification styles and structure

src/components/Notifications/_notification.scss

@@ -1,67 +1,61 @@
+@use '../../styles/tokens/typography' as *;
+
 .notification {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: var(--nds-spacing-sm);
+  padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
-  padding: var(--nds-spacing-sm) var(--nds-spacing-md);
   border-radius: var(--nds-radius-md);
-  border: var(--nds-border-width-thin) solid;
+  @include text-sm;
-  font-family: var(--nds-font-family-base);
+  &__error {
-  font-size: var(--nds-type-body-medium-size);
-  font-weight: var(--nds-type-body-medium-weight);
-  letter-spacing: var(--nds-type-body-medium-letter-spacing);
-
-  &__content {
-    flex: 1;
-    line-height: 1.5;
-  }
-
-  &__close {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    color: inherit;
-    opacity: 0.7;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--nds-focus-ring);
-      outline-offset: 2px;
-      border-radius: var(--nds-radius-xs);
-    }
-    &--error {
-      color: var(--nds-error-medium);
-    }
-  }
-
-  &--info {
-    background-color: var(--nds-info-low);
-    border-color: var(--nds-info-medium);
-    color: var(--nds-info-high);
-  }
-
-  &--success {
-    background-color: var(--nds-correct-low);
-    border-color: var(--nds-correct-medium);
-    color: var(--nds-correct-high);
-  }
-
-  &--warning {
-    background-color: var(--nds-warning-low);
-    border-color: var(--nds-warning-medium);
-    color: var(--nds-warning-high);
-  }
-
-  &--error {
     background-color: var(--nds-error-low);
-    border-color: var(--nds-error-medium);
+    &__close {
+      background: transparent;
+      border: none;
+      color: var(--nds-error-medium);
+      cursor: pointer;
+    }
+    &__content {
       color: var(--nds-error-high);
     }
+  }
+  
+  &__success {
+    background-color: var(--nds-success-low);
+    &__close {
+      background: transparent;
+      border: none;
+      color: var(--nds-success-medium);
+      cursor: pointer;
+    }
+    &__content {
+      color: var(--nds-success-high);
+    }
+  }
+  
+  &__warning {
+    background-color: var(--nds-warning-low);
+    &__close {
+      background: transparent;
+      border: none;
+      color: var(--nds-warning-medium);
+      cursor: pointer;
+    }
+    &__content {
+      color: var(--nds-warning-high);
+    }
+  }
+  
+  &__info {
+    background-color: var(--nds-info-low);
+    &__close {
+      background: transparent;
+      border: none;
+      color: var(--nds-info-medium);
+      cursor: pointer;
+    }
+    &__content {
+      color: var(--nds-info-high);
+    }
+  }
 }

src/components/Notifications/notification.astro

@@ -9,11 +9,11 @@ const notificationUUID  = `notification-${Math.random().toString(36).substr(2, 9
 const { type } = Astro.props;
 ---
 
-<div class={`notification notification--${type}`} role="alert" id={notificationUUID}>
+<div class={`notification notification__${type}`} role="alert" id={notificationUUID}>
-  <div class="notification__content">
+  <div class=`notification__${type}__content`>
     <slot />
   </div>
-  <button class={`notification__close notification__close--${type}`} aria-label="Close notification" onclick={`document.getElementById('${notificationUUID}')?.remove()`}>
+  <button class={`notification__${type}__close`} aria-label="Close notification" onclick={`document.getElementById('${notificationUUID}')?.remove()`}>
     <CloseIcon size={16} label="Close notification" />
   </button>
 </div>