@policystudio/policy-studio-ui-vue 1.2.0-access.32 → 1.2.0-access.34

package/dist/css/psui_styles_output.css

@@ -2618,7 +2618,7 @@ video {
 }
 .psui-el-input-hint {
   --tw-text-opacity: 1;
-  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
 .psui-el-input-hint {
   font-size: 12px;
@@ -2684,7 +2684,7 @@ video {
 }
 .psui-el-input.status-disabled .psui-el-input-wrapper {
   --tw-border-opacity: 1;
-  border-color: rgb(230, 236, 242, var(--tw-border-opacity, 1));
+  border-color: rgb(214, 221, 229, var(--tw-border-opacity, 1));
 }
 .psui-el-input.status-disabled .psui-el-input-wrapper {
   --tw-bg-opacity: 1;
@@ -2696,7 +2696,7 @@ video {
 }
 .psui-el-input.status-disabled input {
   --tw-text-opacity: 1;
-  color: rgb(162, 172, 183, var(--tw-text-opacity, 1));
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
 .psui-el-input.status-disabled label {
   --tw-text-opacity: 1;
@@ -3507,7 +3507,7 @@ video {
 .psui-el-checkbox {
   position: relative;
   --tw-text-opacity: 1;
-  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
 .psui-el-checkbox:focus {
   outline: none;
@@ -3651,10 +3651,10 @@ video {
   align-items: flex-start;
   justify-content: flex-start;
   border-radius: 0.375rem;
-  padding-right: 0.75rem;
-  padding-left: 0.5rem;
   padding-top: 8.8px;
   padding-bottom: 8.8px;
+  padding-right: 0.75rem;
+  padding-left: 0.5rem;
 }
 .psui-el-dialog-wrapper {
   display: flex;
@@ -3669,7 +3669,7 @@ video {
   display: flex;
 }
 .psui-el-dialog-icon {
-  vertical-align: top;
+  align-items: flex-start;
 }
 .psui-el-dialog-close {
   margin-left: auto;
@@ -3708,12 +3708,26 @@ video {
 .psui-el-dialog.layout-vertical .psui-el-dialog-action {
   padding-top: 0.5rem;
 }
+.psui-el-dialog.layout-horizontal {
+  display: flex;
+}
+.psui-el-dialog.layout-horizontal {
+  align-items: center;
+}
+.psui-el-dialog.layout-horizontal .psui-el-dialog-icon {
+  align-items: center;
+}
+.psui-el-dialog.layout-horizontal .psui-el-dialog-wrapper {
+  display: flex;
+}
 .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;
+  padding-top: 2px;
+}
+.psui-el-dialog.layout-horizontal.close-on .psui-el-dialog-wrapper, .psui-el-dialog.layout-horizontal.icon-on .psui-el-dialog-wrapper {
+  padding-top: 3px;
 }
 .psui-el-dialog.layout-horizontal .psui-el-dialog-close {
   margin-left: 0.75rem;
@@ -3724,26 +3738,36 @@ video {
 .psui-el-dialog.layout-horizontal .psui-el-dialog-action {
   margin-left: 0.75rem;
 }
-.psui-el-dialog.theme-informative, .psui-el-dialog.theme-success, .psui-el-dialog.theme-alert {
+.psui-el-dialog.theme-informative, .psui-el-dialog.theme-success, .psui-el-dialog.theme-alert, .psui-el-dialog.theme-gray {
   border-width: 1px;
 }
-.psui-el-dialog.theme-informative, .psui-el-dialog.theme-success, .psui-el-dialog.theme-alert {
+.psui-el-dialog.theme-informative, .psui-el-dialog.theme-success, .psui-el-dialog.theme-alert, .psui-el-dialog.theme-gray {
   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 {
+.psui-el-dialog.theme-informative .psui-el-dialog-action,
+.psui-el-dialog.theme-informative .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-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-message, .psui-el-dialog.theme-gray .psui-el-dialog-default,
+.psui-el-dialog.theme-gray .psui-el-dialog-action,
+.psui-el-dialog.theme-gray .psui-el-dialog-message {
   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 {
+.psui-el-dialog.theme-informative .psui-el-dialog-action,
+.psui-el-dialog.theme-informative .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-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-message, .psui-el-dialog.theme-gray .psui-el-dialog-default,
+.psui-el-dialog.theme-gray .psui-el-dialog-action,
+.psui-el-dialog.theme-gray .psui-el-dialog-message {
   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 {
+.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, .psui-el-dialog.theme-gray .psui-el-dialog-action {
   font-weight: 700;
 }
 .psui-el-dialog.theme-informative {
@@ -3758,12 +3782,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
 }
-.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));
@@ -3776,12 +3794,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(14, 124, 69, var(--tw-text-opacity, 1));
 }
-.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(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));
@@ -3800,17 +3812,17 @@ video {
   --tw-text-opacity: 1;
   color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
 }
+.psui-el-dialog.theme-gray {
+  --tw-border-opacity: 1;
+  border-color: rgb(214, 221, 229, var(--tw-border-opacity, 1));
+}
 .psui-el-dialog.theme-gray {
   --tw-bg-opacity: 1;
   background-color: rgb(243, 246, 249, var(--tw-bg-opacity, 1));
 }
 .psui-el-dialog.theme-gray {
   --tw-text-opacity: 1;
-  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
-}
-.psui-el-dialog.theme-gray .psui-el-dialog-message {
-  --tw-text-opacity: 1;
-  color: rgb(52, 64, 74, var(--tw-text-opacity, 1));
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
 
 .psui-el-dotloader {

package/package.json

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

package/src/assets/scss/components/PsCheckbox.scss

@@ -1,7 +1,7 @@
 @layer components {
         
   .psui-el-checkbox {
-    @apply psui-relative psui-text-gray-50;       
+    @apply psui-relative psui-text-gray-60;       
     
     &:focus {
         outline: none;

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

@@ -1,13 +1,13 @@
 @layer components {
   .psui-el-dialog {
-    @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];
+    @apply psui-flex psui-justify-start psui-items-start psui-pr-3 psui-pl-2 psui-rounded-md psui-py-[8.8px];
 
     &-wrapper {
       @apply psui-flex psui-flex-grow;
     }
 
     &-icon {
-      @apply psui-flex psui-mr-2 psui-align-top;
+      @apply psui-flex psui-items-start psui-mr-2;
     }
 
     &-close {
@@ -39,8 +39,21 @@
     }
 
     &.layout-horizontal {
+      @apply psui-flex psui-items-center;
+
+      .psui-el-dialog-icon {
+        @apply psui-items-center;
+      }
+
       .psui-el-dialog-wrapper {
-        @apply psui-py-1 psui-items-center;
+        @apply psui-flex psui-items-center psui-pt-[2px];
+      }
+
+      &.close-on,
+      &.icon-on {
+        .psui-el-dialog-wrapper {
+          @apply psui-pt-[3px];
+        }
       }
 
       .psui-el-dialog-close {
@@ -58,11 +71,13 @@
 
     &.theme-informative,
     &.theme-success,
-    &.theme-alert {
+    &.theme-alert,
+    &.theme-gray {
       @apply psui-border psui-border-solid;
 
       .psui-el-dialog-default,
-      .psui-el-dialog-action {
+      .psui-el-dialog-action,
+      .psui-el-dialog-message {
         @apply psui-text-14 psui-leading-4;
       }
 
@@ -73,22 +88,10 @@
 
     &.theme-informative {
       @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-80 psui-border-green-20;
-
-      .psui-el-dialog-default,
-      .psui-el-dialog-action,
-      .psui-el-dialog-close {
-        @apply psui-text-green-80;
-      }
     }
 
     &.theme-alert {
@@ -102,11 +105,7 @@
     }
 
     &.theme-gray {
-      @apply psui-bg-gray-10 psui-text-gray-50;
-
-      .psui-el-dialog-message {
-        @apply psui-text-gray-70;
-      }
+      @apply psui-bg-gray-10 psui-text-gray-60 psui-border-gray-30;
     }
   }
 }

package/src/assets/scss/components/PsInput.scss

@@ -21,7 +21,7 @@
     }
 
     &-hint {
-      @apply psui-text-gray-50 psui-mt-1 psui-italic;
+      @apply psui-text-gray-60 psui-mt-1 psui-italic;
       font-size: 12px;
       line-height: 15.6px;
     }
@@ -52,10 +52,10 @@
 
     &.status-disabled {
       .psui-el-input-wrapper {
-        @apply psui-bg-gray-20 psui-border-gray-20
+        @apply psui-bg-gray-20 psui-border-gray-30
       }
       input {
-        @apply psui-bg-gray-20 psui-text-gray-40
+        @apply psui-bg-gray-20 psui-text-gray-60
       }
       label {
         @apply psui-text-gray-40

package/src/assets/scss/components/PsSimpleAlert.scss

@@ -1,15 +1,18 @@
 @layer components {
-    .psui-el-simple-alert {
-        @apply psui-flex psui-items-center psui-gap-1 psui-p-1 psui-cursor-pointer psui-w-full psui-rounded-md;
-        word-break:normal ;
-        &-message {
-            @apply psui-text-accentSmall  psui-mx-auto psui-font-bold;
-        }
-        &-button{
-            @apply psui-icon;
-            &:focus{
-                @apply psui-outline-none;
-            }
-        }
+  .psui-el-simple-alert {
+    @apply psui-flex psui-items-center psui-gap-1 psui-p-1 psui-cursor-pointer psui-w-full psui-rounded-md;
+    word-break: normal;
+
+    &-message {
+      @apply psui-text-accentSmall  psui-mx-auto psui-font-bold;
     }
-}
+
+    &-button {
+      @apply psui-icon;
+
+      &:focus {
+        @apply psui-outline-none;
+      }
+    }
+  }
+}

package/src/components/notifications/PsDialog.vue

@@ -17,7 +17,10 @@
           </p>
         </slot>
       </div>
-      <div class="psui-el-dialog-action">
+      <div
+        v-if="$slots.action"
+        class="psui-el-dialog-action"
+      >
         <slot name="action" />
       </div>
     </div>
@@ -43,14 +46,14 @@ const props = defineProps({
   theme: {
     type: String,
     default: 'informative',
-    validator: (value) => ['informative', 'success', 'alert', 'gray', 'disabled'].includes(value),
+    validator: (value) => ['informative', 'success', 'alert', 'gray', 'disabled'].includes(value)
   },
   /**
    * It set the which will be displayed when component is rendered.
    */
   message: {
     type: String,
-    default: '',
+    default: ''
   },
   /**
    * It sets the direction of the items within the dialog. See Figma Notifications for full information.
@@ -58,35 +61,35 @@ const props = defineProps({
   layout: {
     type: String,
     default: 'horizontal',
-    validator: (value) => ['horizontal', 'vertical'].includes(value),
+    validator: (value) => ['horizontal', 'vertical'].includes(value)
   },
   /**
    * It sets a close button if needed.
    */
   hasClose: {
     type: Boolean,
-    default: true,
+    default: true
   },
   /**
    * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
    */
   icon: {
     type: String,
-    default: 'info',
+    default: 'info'
   },
   /**
    * It sets whether the icon should be displayed or not.
    */
   hasIcon: {
     type: Boolean,
-    default: true,
-  },
+    default: true
+  }
 })
 
 const emit = defineEmits(['close'])
 
 const getComponentClass = computed(() => {
-  return [`layout-${props.layout}`, `theme-${props.theme}`, `close-${props.hasClose ? 'on' : 'off'}`]
+  return [`layout-${props.layout}`, `theme-${props.theme}`, `close-${props.hasClose ? 'on' : 'off'}`, `icon-${props.hasIcon ? 'on' : 'off'}`]
 })
 
 const onClose = () => {

package/src/components/notifications/PsSimpleAlert.vue

@@ -28,26 +28,25 @@ import PsIcon from '../ui/PsIcon.vue'
 defineProps({
   message: {
     type: String,
-    default: '',
+    default: ''
   },
   icon: {
     type: String,
-    default: 'info',
+    default: 'info'
   },
   iconClass: {
     type: String,
-    default: '',
+    default: ''
   },
   buttonClass: {
     type: String,
-    default: '',
+    default: ''
   },
   iconSize: {
     type: [Number, String],
-    default: 24,
-  },
+    default: 24
+  }
 })
 
 const emit = defineEmits(['click', 'close'])
-
 </script>

package/src/components/notifications/PsToast.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   layout: {
     type: String,
     default: 'info',
-    validator: (value) => ['info', 'success', 'warning', 'error'].includes(value),
+    validator: (value) => ['info', 'success', 'warning', 'error'].includes(value)
   },
   /**
    * It sets a supportive layout. eg: soft and intese. See Figma - Notification for full information.
@@ -32,22 +32,22 @@ const props = defineProps({
   fill: {
     type: String,
     default: 'intense',
-    validator: (value) => ['soft', 'intense'].includes(value),
+    validator: (value) => ['soft', 'intense'].includes(value)
   },
   /**
    * It sets the message which will be displayed when component is rendered.
    */
   message: {
     type: String,
-    default: '',
+    default: ''
   },
   /**
    * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
    */
   icon: {
     type: String,
-    default: '',
-  },
+    default: ''
+  }
 })
 
 const getComponentClass = computed(() => {