@policystudio/policy-studio-ui-vue 1.2.0-access.6 → 1.2.0-access.61

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

@@ -1,90 +1,165 @@
 @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-py-[8.8px] psui-text-left;
 
     &-wrapper {
-      @apply psui-flex psui-flex-grow
+      @apply psui-flex psui-flex-grow;
+    }
+
+    &-default,
+    &-message {
+      @apply psui-text-left;
     }
+
     &-icon {
-      @apply psui-flex psui-mr-2 psui-align-top; 
-      
+      @apply psui-flex psui-items-start psui-mr-2;
     }
+
     &-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;
+      }
+
+      .psui-el-dialog-default {
+        @apply psui-text-left;
       }
 
       i {
-        @apply psui-align-top
+        @apply psui-align-top;
       }
 
       .psui-el-dialog-action {
-        @apply psui-pt-2
+        @apply psui-pt-2;
+      }
+
+      &.is-single-line {
+        @apply psui-items-start;
+
+        &.no-action {
+          .psui-el-dialog-icon,
+          .psui-el-dialog-close {
+            @apply psui-align-middle;
+
+            i {
+              @apply psui-align-middle;
+            }
+          }
+
+          .psui-el-dialog-wrapper {
+            @apply psui-pt-[4px] psui-place-items-start psui-self-center;
+          }
+        }
+      }
+
+      &.is-multiline {
+        @apply psui-items-start;
+
+        .psui-el-dialog-icon,
+        .psui-el-dialog-close {
+          @apply psui-align-top;
+
+          i {
+            @apply psui-align-top;
+          }
+        }
+
+        .psui-el-dialog-close {
+          @apply psui-self-start;
+        }
+
+        .psui-el-dialog-wrapper {
+          @apply psui-align-top psui-pt-0;
+        }
       }
     }
-    
+
     &.layout-horizontal {
+      @apply psui-flex psui-items-start;
+
+      .psui-el-dialog-icon {
+        @apply psui-items-start;
+      }
+
+      .psui-el-dialog-wrapper {
+        @apply psui-flex psui-items-start;
+      }
+
       .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
+
+      &.is-single-line {
+        @apply psui-items-center;
+
+        .psui-el-dialog-icon {
+          @apply psui-items-center;
+        }
+
+        .psui-el-dialog-wrapper {
+          @apply psui-items-center psui-pt-[3px];
+        }
       }
     }
-        
 
-    &.theme-informative {
-      @apply psui-bg-blue-20 psui-text-blue-60;
+    &.theme-informative,
+    &.theme-success,
+    &.theme-alert,
+    &.theme-gray {
+      @apply psui-border psui-border-solid;
+
+      .psui-el-dialog-default,
+      .psui-el-dialog-action,
       .psui-el-dialog-message {
-        @apply psui-text-blue-60;
+        @apply psui-text-14 psui-leading-4;
       }
+
+      .psui-el-dialog-action {
+        @apply psui-font-bold;
+      }
+    }
+
+    &.theme-informative {
+      @apply psui-bg-blue-10 psui-text-blue-60 psui-border-blue-40;
     }
 
     &.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;
     }
 
     &.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;
-      }
+      @apply psui-bg-gray-10 psui-text-gray-60 psui-border-gray-30;
     }
   }
-}
+}

package/src/assets/scss/components/PsDraggable.scss

@@ -4,32 +4,27 @@
 
     .psui-el-draggable-wrapper {
       @apply psui-w-full psui-rounded-md psui-bg-gray-20 psui-p-2 psui-flex psui-items-center psui-flex-col;
-      padding: 8px;
 
       &-title {
-        @apply psui-w-full psui-flex psui-rounded-sm psui-items-center psui-justify-between psui-cursor-grab psui-mb-2;
-        padding: 8px 16px;
-      
+        @apply psui-w-full psui-flex psui-rounded-sm psui-items-center psui-justify-between psui-cursor-grab psui-mb-2 psui-py-2 psui-px-4;
+
         p {
           @apply psui-text-accentSmall psui-text-gray-80 psui-font-bold psui-uppercase;
-          letter-spacing: 0.6px;
         }
-  
+
         i {
-          @apply psui-text-gray-40;
-          font-size: 18px;
+          @apply psui-text-gray-60 psui-text-18;
         }
 
-        &:hover{
+        &:hover {
           .psui-el-draggable-wrapper-title-icon {
-            visibility: visible;
+            @apply psui-visible;
           }
         }
 
-        &-icon{
-          visibility: hidden;
+        &-icon {
+          @apply psui-invisible;
         }
-
       }
 
       &-list {
@@ -38,59 +33,57 @@
     }
 
     .psui-el-draggable-item {
-      @apply psui-w-full psui-flex psui-rounded-sm psui-bg-white psui-items-center psui-cursor-grab psui-shadow-elevation-5;
-      padding: 7px 16px;
+      @apply psui-w-full psui-flex psui-rounded-sm psui-bg-white psui-items-center psui-cursor-grab psui-shadow-elevation-5 psui-py-[7px] psui-px-4;
 
       &-title {
-        @apply psui-text-gray-50 psui-text-14 psui-flex psui-items-center;
+        @apply psui-text-gray-60 psui-text-14 psui-flex psui-items-center;
 
         .psui-el-checkbox {
-          @apply psui-text-gray-50;
+          @apply psui-text-gray-60;
 
           .psui-el-checkmark {
-            &:before {
-              @apply psui-mr-1 psui-text-gray-30;
+            &::before {
+              @apply psui-mr-1 psui-text-gray-60;
             }
           }
 
           &.active {
-            @apply psui-text-gray-60;
+            @apply psui-text-gray-80;
           }
 
           &.disabled {
             .psui-el-checkmark {
-              color: #798490 !important;
+              @apply !psui-text-gray-60;
             }
           }
         }
-        &:hover{
+
+        &:hover {
           .psui-el-draggable-item-title-icon {
-            visibility: visible;
+            @apply psui-visible;
           }
         }
 
-        &-icon{
-          visibility: hidden;
+        &-icon {
+          @apply psui-invisible;
         }
       }
 
       &-append {
-        @apply psui-flex psui-text-gray-30 psui-ml-auto;
+        @apply psui-flex psui-text-gray-60 psui-ml-auto;
 
         i {
-          font-size: 18px;
+          @apply psui-text-[18px];
         }
       }
 
       &:active,
       &.on-dragging {
-        cursor: -webkit-grabbing; 
-        cursor: -moz-grabbing;
-        cursor: grabbing;
+        @apply psui-cursor-grabbing;
       }
 
       &.on-drag-over {
-        opacity: 0.2;
+        @apply psui-opacity-20;
       }
 
       .psui-el-checkbox.size-small {
@@ -98,13 +91,12 @@
           span {
             @apply psui-font-bold;
           }
-          &:before {
-            @apply psui-flex psui-items-center psui-justify-center;
-            font-size: 24px;
-            min-height: 24px;
+
+          &::before {
+            @apply psui-flex psui-items-center psui-justify-center psui-text-[24px] psui-min-h-[24px];
           }
         }
       }
     }
   }
-}
+}

package/src/assets/scss/components/PsDropdown.scss

@@ -3,27 +3,19 @@
     @apply psui-relative psui-inline-block psui-text-left;
 
     &:focus {
-        outline: none;
-      }
+      @apply psui-outline-none;
+    }
 
     &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
-      }
-    
+      @apply psui-outline psui-outline-2 psui-outline-focus-ring psui-outline-offset-2 psui-rounded-md;
+    }
+
     button {
-      @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
-      background-color: transparent;
-      padding-top: 2.5px;
-      padding-bottom: 2.5px;
-      min-height: 27px;
-      font-size: 0.875rem;
-      
+      @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none psui-bg-transparent psui-py-[2.5px] psui-min-h-[27px] psui-text-[0.875rem];
     }
 
     &-dialog-wrapper {
       @apply psui-z-50 psui-overflow-auto psui-h-auto;
     }
   }
-}
+}

package/src/assets/scss/components/PsIcon.scss

@@ -0,0 +1,21 @@
+@layer components {
+  .psui-general-icon { 
+    
+    &:focus {
+      outline: none !important;
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #2563eb !important;
+      opacity: 1 !important;
+      outline-offset: 2px !important;
+      border-radius: 6px !important;
+      visibility: visible !important;
+    }
+  }
+}

package/src/assets/scss/components/PsInlineSelector.scss

@@ -56,7 +56,7 @@
                     }
 
                     p {
-                        @apply psui-text-gray-50
+                        @apply psui-text-gray-60
                     }
                 }
 

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

@@ -1,17 +1,6 @@
 @layer components{
 
-  .psui-el-input {
-    
-    &:focus {
-        outline: none;
-      }
-
-    &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
-      }
-    
+  .psui-el-input {   
     &-prepend {
       @apply psui-pl-2 psui-flex psui-items-center psui-pointer-events-none 
     }
@@ -21,44 +10,53 @@
     }
 
     &-hint {
-      @apply psui-text-gray-50 psui-mt-1 psui-italic;
+      @apply psui-text-gray-60 psui-mt-1;
       font-size: 12px;
-      line-height: 15.6px;
+      line-height: 16px;
     }
 
     &-wrapper {
-      @apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex;
+      @apply psui-relative psui-w-full psui-bg-white psui-flex;
       transition: ease 130ms;
     }
 
     label {
-      @apply psui-font-bold psui-text-gray-80;
-      line-height: 32px;
-      
+      @apply psui-font-semibold psui-text-gray-80;      
+    }
+
+    &.status-active {
+        input {
+          @apply psui-border-blue-60;
+        }
     }
 
     input {
-      @apply psui-bg-white psui-text-gray-60 psui-w-full psui-rounded-md   
+      @apply psui-bg-white psui-text-gray-80 psui-w-full psui-border psui-border-gray-30 psui-rounded ;
+      
+      caret-color: #127999;
+      
+      &::placeholder {
+        @apply psui-text-gray-60 psui-italic;
+      }
+
+      &:focus {
+        @apply psui-border-blue-60 psui-shadow-[0_0_0_2px_rgba(18,121,153,0.20)] psui-text-gray-80;
+      }
     }
+
     
     &.status-error {
       .psui-el-input-wrapper {
-        @apply psui-border-red-20
+        @apply psui-border-red-80;
       }
       .psui-el-input-hint  {
-        @apply psui-text-red-20
+        @apply psui-text-red-80 psui-font-bold;
       }
     }
 
     &.status-disabled {
-      .psui-el-input-wrapper {
-        @apply psui-bg-gray-20 psui-border-gray-20
-      }
       input {
-        @apply psui-bg-gray-20 psui-text-gray-40
-      }
-      label {
-        @apply psui-text-gray-40
+        @apply psui-bg-gray-20 psui-text-gray-60;
       }
     }
     
@@ -66,27 +64,10 @@
     /* ----------------------------------------- */
     
       &.layout-default {
-        
         input {
           @apply psui-text-16;
           padding: 11.5px 16px;
         }          
-
-        &.status-resting {
-          .psui-el-input-wrapper{
-            &:hover {
-              @apply psui-border-blue-50
-            }
-          }          
-
-        }
-
-        &.status-active {
-          .psui-el-input-wrapper {
-            @apply psui-border-blue-60
-          }
-        }
-
       }
     /* ----------------------------------------- Layout Default */
     
@@ -96,25 +77,7 @@
       &.layout-mini {
         input {
           @apply psui-text-14;
-          padding: 7px 8px;
-        }
-        &.status-resting {
-          .psui-el-input-wrapper {
-            &:hover {
-              @apply psui-border-green-20
-            }
-          }
-        }
-        &.status-active {
-          .psui-el-input-wrapper {
-            @apply psui-border-green-20;
-            input {
-              @apply psui-text-green-20;
-              &.focus {
-                @apply psui-text-gray-60
-              }
-            }
-          }
+          padding: 6px 8px;
         }
       }
     /* ----------------------------------------- Layout Mini */

package/src/assets/scss/components/PsInputSelect.scss

@@ -16,7 +16,7 @@
             
             .psui-el-input-select-wrapper {
                 &::after {
-                    @apply psui-text-gray-50 !important;
+                    @apply psui-text-gray-60 !important;
                     z-index: 100 !important;
                 }    
             }
@@ -35,7 +35,7 @@
                 @apply psui-relative psui-w-auto;
     
                 &::after {
-                    @apply psui-absolute psui-inline-block psui-text-gray-50;
+                    @apply psui-absolute psui-inline-block psui-text-gray-60;
                     content: 'arrow_drop_down';
                     font-family: 'Material Icons Round';
                     font-size: 24px;
@@ -74,7 +74,7 @@
         }
 
         .psui-el-input-helper {
-            @apply psui-text-gray-50;
+            @apply psui-text-gray-60;
             font-size: 12px;
             line-height: 24px;
         }
@@ -85,7 +85,7 @@
                 @apply psui-relative psui-w-full;
     
                 &::after {
-                    @apply psui-absolute psui-inline-block psui-text-gray-50;
+                    @apply psui-absolute psui-inline-block psui-text-gray-60;
                     content: 'unfold_more';
                     font-family: 'Material Icons Round';
                     font-size: 18px;
@@ -102,11 +102,11 @@
 
                 &:hover,
                 &:active {
-                    @apply psui-border-green-20 psui-text-gray-50
+                    @apply psui-border-green-20 psui-text-gray-60
                 }
     
                 &:focus {
-                    @apply psui-border-green-70 psui-text-gray-50
+                    @apply psui-border-green-70 psui-text-gray-60
                 }
                     
             }   

package/src/assets/scss/components/PsInputTextArea.scss

@@ -43,7 +43,7 @@
         }
 
         .psui-el-input-textarea-message {
-            @apply psui-text-gray-50 psui-flex psui-font-normal;
+            @apply psui-text-gray-60 psui-flex psui-font-normal;
             font-size: 12px;
             line-height: 24px;
             padding: 5px 0px;    

package/src/assets/scss/components/PsMiniTag.scss

@@ -1,56 +1,51 @@
 @layer components {
   .psui-el-mini-tag {
-    @apply psui-flex psui-rounded-full psui-items-center psui-flex-row;
-    width: fit-content;
+    @apply psui-flex psui-flex-row psui-items-center psui-rounded psui-w-fit;
 
     span {
-      @apply psui-w-full psui-font-bold psui-uppercase;
-      padding: 3px 8px 3px 8px;
-      font-size: 10px;
-      line-height: 100%;
-      letter-spacing: 0.5px;
+      @apply psui-w-full psui-font-semibold psui-pt-[2px] psui-pb-[1px] psui-px-[4px] psui-text-[12px] psui-leading-[16px] psui-align-middle;
     }
 
-    &-layout{
-      &-solid-info{
-        @apply psui-bg-blue-50 psui-text-white
+    &-layout {
+      &-info {
+        @apply psui-bg-blue-20 psui-text-blue-65 psui-border psui-border-blue-40;
       }
 
-      &-info {
-        @apply psui-bg-blue-20 psui-text-blue-60
+      &-success {
+        @apply psui-bg-green-10 psui-text-green-80 psui-border psui-border-green-20;
       }
 
-      &-solid-success {
-        @apply psui-bg-green-20 psui-text-white
+      &-warning {
+        @apply psui-bg-yellow-10 psui-text-yellow-60 psui-border psui-border-yellow-20;
       }
-      
-      &-success {
-        @apply psui-bg-green-10 psui-text-green-70
+
+      &-error {
+        @apply psui-bg-red-10 psui-text-red-80 psui-border psui-border-red-20;
       }
 
-      &-solid-warning {
-        @apply psui-bg-yellow-20 psui-text-white
+      &-default {
+        @apply psui-bg-gray-10 psui-text-gray-60 psui-border psui-border-gray-30;
       }
 
-      &-warning {
-        @apply psui-bg-yellow-10 psui-text-yellow-70
+      &-dark-info {
+        @apply psui-bg-blue-60 psui-text-white;
       }
 
-      &-solid-error {
-        @apply psui-bg-red-20 psui-text-white
+      &-dark-success {
+        @apply psui-bg-green-80 psui-text-white;
       }
 
-      &-error {
-        @apply psui-bg-red-10 psui-text-red-20
+      &-dark-warning {
+        @apply psui-bg-yellow-80 psui-text-white;
       }
 
-      &-solid-default {
-        @apply psui-bg-gray-40 psui-text-white
+      &-dark-error {
+        @apply psui-bg-red-80 psui-text-white;
       }
 
-      &-default {
-        @apply psui-bg-gray-20 psui-text-gray-50
+      &-dark-default {
+        @apply psui-bg-gray-30 psui-text-gray-80;
       }
     }
   }
-}
+}