Merge remote-tracking branch 'origin/main'

Author: makiJS

packages/lib/src/alert/alert.wc.pcss

@@ -1,71 +1,84 @@
 .jp-alert {
-    position: fixed;
-    bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%);
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-wrap: wrap;
+  background-color: var(--background-primary);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  border-radius: 0.25rem;
+  max-width: 40rem;
+  width: 100%;
+  z-index: 10000;
+
+  &-content {
+    flex: 1 1 0;
     display: flex;
-    flex-wrap: wrap;
-    background-color: white;
-    box-shadow: 0 2px 6px rgba(0,0,0,.08);
-    border-radius: .25rem;
-    max-width: 40rem;
-    width: 100%;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
 
-    &-content {
-        flex: 1 1 0;
-        display: flex;
-        flex-direction: column;
-        gap: .5rem;
-        padding: 1rem;
+    &-title {
+      font-size: 1.5rem;
+    }
+  }
 
-        &-title {
-            font-size: 1.5rem;
-        }
-        &-message {
-        }
+  &-close {
+    padding: 0.5rem;
+    &-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 0.75rem;
+      height: 0.75rem;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      background-color: transparent;
     }
+  }
 
-    &-close {
-        padding: .5rem;
-        &-button {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: .75rem;
-            height: .75rem;
-            border: none;
-            padding: 0;
-            cursor: pointer;
-            background-color: transparent;
-        }
+  &-progress {
+    width: 100%;
+    &-bar {
+      animation: fill-bar 5s linear;
+      height: 3px;
+      background-color: var(--secondary-color);
     }
+  }
 
-    &-progress {
-        width: 100%;
-        &-bar {
-            animation: fill-bar 5s linear;
-            height: 3px;
-            background-color: var(--basic-c);
-        }
+  &-warning {
+    .jp-alert-progress-bar {
+      background-color: var(--warning-color);
     }
 
-    &-warning {
-        .jp-alert-progress-bar {
-            background-color: var(--warning-c);
-        }
+    .jp-alert-content-title,
+    .jp-alert-content-message {
+      color: var(--warning-color);
+    }
+  }
+  &-success {
+    .jp-alert-progress-bar {
+      background-color: var(--success-color);
     }
-    &-success {
-        .jp-alert-progress-bar {
-            background-color: var(--success-c);
-        }
+
+    .jp-alert-content-title,
+    .jp-alert-content-message {
+      color: var(--success-color);
     }
+  }
 }
 
 @keyframes fill-bar {
-    from {
-        width: 0;
-    }
-    to {
-        width: 100%;
-    }
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@media (max-width: 700px) {
+  max-width: calc(100vw - 2rem);
 }

packages/lib/src/alert/alert.wc.svelte

@@ -13,9 +13,6 @@
   export let title = '';
   export let message = '';
   export let state: 'success' | 'error' | '' = '';
-  export let successColor = '#3a8c3d';
-  export let warningColor = '#f44336';
-  export let basicColor = '#ABABAB';
 
   const dispatch = createEventDispatcher();
 
@@ -28,7 +25,7 @@
   });
 </script>
 
-<div class="jp-alert jp-alert-{state}" style="--success-c: {successColor}; --warning-c: {warningColor}; --basic-c: {basicColor}">
+<div class="jp-alert jp-alert-{state}">
   <div class="jp-alert-content">
     {#if title}
       <div class="jp-alert-content-title">{@html title}</div>
@@ -39,18 +36,18 @@
   </div>
   <div class="jp-alert-close">
     <button
-            type="button"
-            class="jp-alert-close-button"
-            on:click={(event) => {
-          event.preventDefault();
-          event.stopImmediatePropagation();
-          dispatch('close');
-        }}
+      type="button"
+      class="jp-alert-close-button"
+      on:click={(event) => {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        dispatch('close');
+      }}
     >
       {@html clearIcon}
     </button>
   </div>
   <div class="jp-alert-progress">
     <div class="jp-alert-progress-bar"></div>
   </div>
-</div>
+</div>