@policystudio/policy-studio-ui-vue 1.2.0-access.28 → 1.2.0-access.29

package/dist/css/psui_styles_output.css

@@ -3694,14 +3694,13 @@ video {
   align-items: flex-start;
 }
 .psui-el-dialog.layout-vertical {
-  padding: 9.6px 9.6px 11.2px 9.6px;
+  padding: 9.6px;
 }
-.psui-el-dialog.layout-vertical .psui-el-dialog-wrapper {
-  flex-direction: column;
+.psui-el-dialog.layout-vertical {
+  padding-bottom: 11.2px;
 }
 .psui-el-dialog.layout-vertical .psui-el-dialog-wrapper {
-  font-size: 14px;
-  line-height: 20px;
+  flex-direction: column;
 }
 .psui-el-dialog.layout-vertical i {
   vertical-align: top;
@@ -3709,6 +3708,13 @@ video {
 .psui-el-dialog.layout-vertical .psui-el-dialog-action {
   padding-top: 0.5rem;
 }
+.psui-el-dialog.layout-horizontal .psui-el-dialog-wrapper {
+  align-items: center;
+}
+.psui-el-dialog.layout-horizontal .psui-el-dialog-wrapper {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .psui-el-dialog.layout-horizontal .psui-el-dialog-close {
   margin-left: 0.75rem;
 }
@@ -3718,37 +3724,67 @@ video {
 .psui-el-dialog.layout-horizontal .psui-el-dialog-action {
   margin-left: 0.75rem;
 }
-.psui-el-dialog.layout-horizontal .psui-el-dialog-wrapper {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+.psui-el-dialog.theme-informative, .psui-el-dialog.theme-success, .psui-el-dialog.theme-alert {
+  border-width: 1px;
 }
-.psui-el-dialog.layout-horizontal .psui-el-dialog-wrapper {
+.psui-el-dialog.theme-informative, .psui-el-dialog.theme-success, .psui-el-dialog.theme-alert {
+  border-style: solid;
+}
+.psui-el-dialog.theme-informative .psui-el-dialog-default,
+.psui-el-dialog.theme-informative .psui-el-dialog-action, .psui-el-dialog.theme-success .psui-el-dialog-default,
+.psui-el-dialog.theme-success .psui-el-dialog-action, .psui-el-dialog.theme-alert .psui-el-dialog-default,
+.psui-el-dialog.theme-alert .psui-el-dialog-action {
   font-size: 14px;
   line-height: 20px;
 }
+.psui-el-dialog.theme-informative .psui-el-dialog-default,
+.psui-el-dialog.theme-informative .psui-el-dialog-action, .psui-el-dialog.theme-success .psui-el-dialog-default,
+.psui-el-dialog.theme-success .psui-el-dialog-action, .psui-el-dialog.theme-alert .psui-el-dialog-default,
+.psui-el-dialog.theme-alert .psui-el-dialog-action {
+  line-height: 1rem;
+}
+.psui-el-dialog.theme-informative .psui-el-dialog-action, .psui-el-dialog.theme-success .psui-el-dialog-action, .psui-el-dialog.theme-alert .psui-el-dialog-action {
+  font-weight: 700;
+}
+.psui-el-dialog.theme-informative {
+  --tw-border-opacity: 1;
+  border-color: rgb(134, 192, 219, var(--tw-border-opacity, 1));
+}
 .psui-el-dialog.theme-informative {
   --tw-bg-opacity: 1;
-  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
+  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
 }
 .psui-el-dialog.theme-informative {
   --tw-text-opacity: 1;
   color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
 }
-.psui-el-dialog.theme-informative .psui-el-dialog-message {
+.psui-el-dialog.theme-informative .psui-el-dialog-default,
+.psui-el-dialog.theme-informative .psui-el-dialog-action,
+.psui-el-dialog.theme-informative .psui-el-dialog-close {
   --tw-text-opacity: 1;
   color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
 }
+.psui-el-dialog.theme-success {
+  --tw-border-opacity: 1;
+  border-color: rgb(155, 222, 181, var(--tw-border-opacity, 1));
+}
 .psui-el-dialog.theme-success {
   --tw-bg-opacity: 1;
   background-color: rgb(222, 248, 232, var(--tw-bg-opacity, 1));
 }
 .psui-el-dialog.theme-success {
   --tw-text-opacity: 1;
-  color: rgb(68, 160, 106, var(--tw-text-opacity, 1));
+  color: rgb(14, 124, 69, var(--tw-text-opacity, 1));
 }
-.psui-el-dialog.theme-success .psui-el-dialog-message {
+.psui-el-dialog.theme-success .psui-el-dialog-default,
+.psui-el-dialog.theme-success .psui-el-dialog-action,
+.psui-el-dialog.theme-success .psui-el-dialog-close {
   --tw-text-opacity: 1;
-  color: rgb(68, 160, 106, var(--tw-text-opacity, 1));
+  color: rgb(14, 124, 69, var(--tw-text-opacity, 1));
+}
+.psui-el-dialog.theme-alert {
+  --tw-border-opacity: 1;
+  border-color: rgb(215, 165, 86, var(--tw-border-opacity, 1));
 }
 .psui-el-dialog.theme-alert {
   --tw-bg-opacity: 1;
@@ -3758,9 +3794,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(184, 115, 5, var(--tw-text-opacity, 1));
 }
-.psui-el-dialog.theme-alert .psui-el-dialog-message {
+.psui-el-dialog.theme-alert .psui-el-dialog-default,
+.psui-el-dialog.theme-alert .psui-el-dialog-action,
+.psui-el-dialog.theme-alert .psui-el-dialog-close {
   --tw-text-opacity: 1;
-  color: rgb(184, 115, 5, var(--tw-text-opacity, 1));
+  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
 }
 .psui-el-dialog.theme-gray {
   --tw-bg-opacity: 1;
@@ -4773,9 +4811,6 @@ video {
   padding-bottom: 0.75rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
   --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
@@ -4786,7 +4821,7 @@ video {
   outline: none;
 }
 .psui-el-toast:focus-visible {
-  outline: 2px solid #2563EB;
+  outline: 2px solid #2563eb;
   outline-offset: 2px;
   border-radius: 6px;
 }
@@ -4802,6 +4837,13 @@ video {
 .psui-el-toast .psui-el-toast-message {
   margin-right: auto;
 }
+.psui-el-toast .psui-el-toast-message {
+  font-size: 16px;
+  line-height: 24px;
+}
+.psui-el-toast .psui-el-toast-message {
+  font-weight: 600;
+}
 .psui-el-toast .psui-el-toast-actions {
   display: flex;
 }
@@ -4809,9 +4851,11 @@ video {
   gap: 1rem;
 }
 .psui-el-toast .psui-el-toast-actions {
-  font-size: 12px;
-  line-height: 130%;
-  letter-spacing: 0.6px;
+  font-size: 16px;
+  line-height: 24px;
+}
+.psui-el-toast .psui-el-toast-actions {
+  font-weight: 700;
 }
 .psui-el-toast.fill-intense.layout-info {
   --tw-bg-opacity: 1;
@@ -4819,15 +4863,15 @@ video {
 }
 .psui-el-toast.fill-intense.layout-success {
   --tw-bg-opacity: 1;
-  background-color: rgb(155, 222, 181, var(--tw-bg-opacity, 1));
+  background-color: rgb(14, 124, 69, var(--tw-bg-opacity, 1));
 }
 .psui-el-toast.fill-intense.layout-warning {
   --tw-bg-opacity: 1;
-  background-color: rgb(215, 165, 86, var(--tw-bg-opacity, 1));
+  background-color: rgb(184, 86, 20, var(--tw-bg-opacity, 1));
 }
 .psui-el-toast.fill-intense.layout-error {
   --tw-bg-opacity: 1;
-  background-color: rgb(205, 155, 155, var(--tw-bg-opacity, 1));
+  background-color: rgb(162, 54, 52, var(--tw-bg-opacity, 1));
 }
 .psui-el-toast.fill-soft.layout-info {
   --tw-bg-opacity: 1;
@@ -4843,7 +4887,7 @@ video {
 }
 .psui-el-toast.fill-soft.layout-success {
   --tw-text-opacity: 1;
-  color: rgb(155, 222, 181, var(--tw-text-opacity, 1));
+  color: rgb(14, 124, 69, var(--tw-text-opacity, 1));
 }
 .psui-el-toast.fill-soft.layout-warning {
   --tw-bg-opacity: 1;
@@ -4851,7 +4895,7 @@ video {
 }
 .psui-el-toast.fill-soft.layout-warning {
   --tw-text-opacity: 1;
-  color: rgb(215, 165, 86, var(--tw-text-opacity, 1));
+  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
 }
 .psui-el-toast.fill-soft.layout-error {
   --tw-bg-opacity: 1;
@@ -4859,7 +4903,7 @@ video {
 }
 .psui-el-toast.fill-soft.layout-error {
   --tw-text-opacity: 1;
-  color: rgb(205, 155, 155, var(--tw-text-opacity, 1));
+  color: rgb(162, 54, 52, var(--tw-text-opacity, 1));
 }
 
 .psui-el-mini-tag {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.2.0-access.28",
+  "version": "1.2.0-access.29",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/components/PsDialog.scss

@@ -1,90 +1,112 @@
 @layer components {
-
   .psui-el-dialog {
-    @apply psui-flex psui-justify-start psui-items-start psui-pr-3 psui-pl-2 psui-rounded-md;
-    padding-top: 8.8px;
-    padding-bottom: 8.8px;
+    @apply psui-flex psui-justify-start psui-items-start psui-pr-3 psui-pl-2 psui-rounded-md psui-pt-[8.8px] psui-pb-[8.8px];
 
     &-wrapper {
-      @apply psui-flex psui-flex-grow
+      @apply psui-flex psui-flex-grow;
     }
+
     &-icon {
-      @apply psui-flex psui-mr-2 psui-align-top; 
-      
+      @apply psui-flex psui-mr-2 psui-align-top;
     }
+
     &-close {
       @apply psui-ml-auto psui-inline-block;
 
-      &:focus{
-        @apply psui-outline-none
+      &:focus {
+        @apply psui-outline-none;
       }
 
       i {
-        @apply psui-align-middle;
-        font-size: 18px;
+        @apply psui-align-middle psui-text-[18px];
       }
-
     }
 
     &.layout-vertical {
-      @apply psui-flex psui-items-start;
-      padding: 9.6px 9.6px 11.2px 9.6px;
+      @apply psui-flex psui-items-start psui-p-[9.6px] psui-pb-[11.2px];
 
       .psui-el-dialog-wrapper {
-        @apply psui-flex-col psui-text-14
+        @apply psui-flex-col;
       }
 
       i {
-        @apply psui-align-top
+        @apply psui-align-top;
       }
 
       .psui-el-dialog-action {
-        @apply psui-pt-2
+        @apply psui-pt-2;
       }
     }
-    
+
     &.layout-horizontal {
+      .psui-el-dialog-wrapper {
+        @apply psui-py-1 psui-items-center;
+      }
+
       .psui-el-dialog-close {
-        @apply psui-ml-3
+        @apply psui-ml-3;
       }
+
       .psui-el-dialog-default {
-        @apply psui-mr-auto
+        @apply psui-mr-auto;
       }
+
       .psui-el-dialog-action {
-        @apply psui-ml-3
+        @apply psui-ml-3;
       }
-      .psui-el-dialog-wrapper {
-        @apply psui-text-14 psui-py-1
+    }
+
+    &.theme-informative,
+    &.theme-success,
+    &.theme-alert {
+      @apply psui-border psui-border-solid;
+
+      .psui-el-dialog-default,
+      .psui-el-dialog-action {
+        @apply psui-text-14 psui-leading-4;
+      }
+
+      .psui-el-dialog-action {
+        @apply psui-font-bold;
       }
     }
-        
 
     &.theme-informative {
-      @apply psui-bg-blue-20 psui-text-blue-60;
-      .psui-el-dialog-message {
+      @apply psui-bg-blue-10 psui-text-blue-60 psui-border-blue-40;
+
+      .psui-el-dialog-default,
+      .psui-el-dialog-action,
+      .psui-el-dialog-close {
         @apply psui-text-blue-60;
       }
     }
 
     &.theme-success {
-      @apply psui-bg-green-10 psui-text-green-70;
-      .psui-el-dialog-message {
-        @apply psui-text-green-70;
+      @apply psui-bg-green-10 psui-text-green-80 psui-border-green-20;
+
+      .psui-el-dialog-default,
+      .psui-el-dialog-action,
+      .psui-el-dialog-close {
+        @apply psui-text-green-80;
       }
     }
 
     &.theme-alert {
-      @apply psui-bg-yellow-10 psui-text-yellow-70;
-      .psui-el-dialog-message {
-        @apply psui-text-yellow-70;
+      @apply psui-bg-yellow-10 psui-text-yellow-70 psui-border-yellow-20;
+
+      .psui-el-dialog-default,
+      .psui-el-dialog-action,
+      .psui-el-dialog-close {
+        @apply psui-text-gray-80;
       }
     }
 
     &.theme-gray {
       @apply psui-bg-gray-10 psui-text-gray-50;
+
       .psui-el-dialog-message {
         @apply psui-text-gray-70;
       }
     }
   }
-}
+}

package/src/assets/scss/components/PsToast.scss

@@ -1,62 +1,64 @@
 @layer components {
-    .psui-el-toast {
-        @apply psui-flex psui-items-center psui-text-16 psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;    
-
-        &:focus {
-        outline: none;
-      }
-
-        &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
-      }
-
-        .psui-el-toast-icon {
-            @apply psui-flex psui-mr-4;
-            font-size: 24px; 
-        }
-        
-        .psui-el-toast-message {
-            @apply psui-mr-auto
-        }
-
-        .psui-el-toast-actions {
-            @apply psui-flex psui-gap-4 psui-text-accentSmall;            
-        }
-
-        &.fill-intense.layout{
-                &-info {
-                    @apply psui-bg-blue-60
-                }
-                
-                &-success {
-                    @apply psui-bg-green-20
-                }
-
-                &-warning {
-                    @apply psui-bg-yellow-20
-                }
-
-                &-error {
-                    @apply psui-bg-red-20
-                }
-            }    
-        
-        &.fill-soft.layout {
-            &-info {
-                @apply psui-text-blue-60 psui-bg-blue-20;
-            }
-            
-            &-success {
-                @apply psui-text-green-20 psui-bg-green-10
-            }
-            &-warning {
-                @apply psui-text-yellow-20 psui-bg-yellow-10
-            }
-            &-error {
-                @apply psui-text-red-20 psui-bg-red-10
-            }
-        }
+  .psui-el-toast {
+    @apply psui-flex psui-items-center psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-shadow-elevation-20;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #2563eb;
+      outline-offset: 2px;
+      border-radius: 6px;
+    }
+
+    .psui-el-toast-icon {
+      @apply psui-flex psui-mr-4;
+      font-size: 24px;
+    }
+
+    .psui-el-toast-message {
+      @apply psui-mr-auto psui-text-16 psui-font-semibold;
+    }
+
+    .psui-el-toast-actions {
+      @apply psui-flex psui-gap-4 psui-text-16 psui-font-bold;
+    }
+
+    &.fill-intense.layout {
+      &-info {
+        @apply psui-bg-blue-60;
+      }
+
+      &-success {
+        @apply psui-bg-green-80;
+      }
+
+      &-warning {
+        @apply psui-bg-yellow-80;
+      }
+
+      &-error {
+        @apply psui-bg-red-80;
+      }
+    }
+
+    &.fill-soft.layout {
+      &-info {
+        @apply psui-text-blue-60 psui-bg-blue-20;
+      }
+
+      &-success {
+        @apply psui-text-green-80 psui-bg-green-10;
+      }
+
+      &-warning {
+        @apply psui-text-gray-80 psui-bg-yellow-10;
+      }
+
+      &-error {
+        @apply psui-text-red-80 psui-bg-red-10;
+      }
     }
-}
+  }
+}