@policystudio/policy-studio-ui-vue 1.2.0-access.36 → 1.2.0-access.37

package/dist/css/psui_styles_output.css

@@ -3471,13 +3471,24 @@ video {
   color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
 .psui-el-checkbox:focus {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .psui-el-checkbox:focus-visible {
-  outline: 2px solid #2563EB;
-  outline-offset: 2px;
   border-radius: 6px;
 }
+.psui-el-checkbox:focus-visible {
+  outline-style: solid;
+}
+.psui-el-checkbox:focus-visible {
+  outline-width: 2px;
+}
+.psui-el-checkbox:focus-visible {
+  outline-offset: 2px;
+}
+.psui-el-checkbox:focus-visible {
+  outline-color: #2563EB;
+}
 .psui-el-checkbox.disabled .psui-el-checkmark {
   cursor: default !important;
 }
@@ -3487,20 +3498,26 @@ video {
 }
 .psui-el-checkbox.disabled .psui-el-checkmark::before {
   --tw-text-opacity: 1 !important;
-  color: rgb(214, 221, 229, var(--tw-text-opacity, 1)) !important;
+  color: rgb(162, 172, 183, var(--tw-text-opacity, 1)) !important;
 }
 .psui-el-checkbox.size-small {
   font-size: 14px;
   line-height: 20px;
 }
 .psui-el-checkbox.size-small.layout-default input:checked ~ .psui-el-checkmark::before {
-  content: "check_box";
   font-family: "Material Icons Round";
 }
+.psui-el-checkbox.size-small.layout-default input:checked ~ .psui-el-checkmark::before {
+  --tw-content: "check_box";
+  content: var(--tw-content);
+}
 .psui-el-checkbox.size-small.layout-mixed input:checked ~ .psui-el-checkmark::before {
-  content: "indeterminate_check_box";
   font-family: "Material Icons Round";
 }
+.psui-el-checkbox.size-small.layout-mixed input:checked ~ .psui-el-checkmark::before {
+  --tw-content: "indeterminate_check_box";
+  content: var(--tw-content);
+}
 .psui-el-checkbox.size-small input {
   position: absolute;
 }
@@ -3514,50 +3531,59 @@ video {
   opacity: 0;
 }
 .psui-el-checkbox.size-small input:checked ~ .psui-el-checkmark::before {
-  --tw-text-opacity: 1;
-  color: rgb(45, 165, 204, var(--tw-text-opacity, 1));
+  font-size: 18px;
 }
 .psui-el-checkbox.size-small input:checked ~ .psui-el-checkmark::before {
-  font-size: 18px;
+  --tw-text-opacity: 1;
+  color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
 }
 .psui-el-checkbox.size-small .psui-el-checkmark {
   display: flex;
 }
 .psui-el-checkbox.size-small .psui-el-checkmark {
-  cursor: pointer;
+  min-height: 18px;
 }
 .psui-el-checkbox.size-small .psui-el-checkmark {
-  align-items: center;
+  cursor: pointer;
 }
 .psui-el-checkbox.size-small .psui-el-checkmark {
-  min-height: 18px;
+  align-items: center;
 }
 .psui-el-checkbox.size-small .psui-el-checkmark span {
   margin-left: 8px;
 }
 .psui-el-checkbox.size-small .psui-el-checkmark::before {
-  content: "check_box_outline_blank";
+  font-family: "Material Icons Round";
+}
+.psui-el-checkbox.size-small .psui-el-checkmark::before {
+  font-size: 18px;
 }
 .psui-el-checkbox.size-small .psui-el-checkmark::before {
   --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-checkbox.size-small .psui-el-checkmark::before {
-  font-family: "Material Icons Round";
-  font-size: 18px;
+  --tw-content: "check_box_outline_blank";
+  content: var(--tw-content);
 }
 .psui-el-checkbox.size-big {
   font-size: 16px;
   line-height: 24px;
 }
 .psui-el-checkbox.size-big.layout-mixed input:checked ~ .psui-el-checkmark::before {
-  content: "indeterminate_check_box";
   font-family: "Material Icons Round";
 }
+.psui-el-checkbox.size-big.layout-mixed input:checked ~ .psui-el-checkmark::before {
+  --tw-content: "indeterminate_check_box";
+  content: var(--tw-content);
+}
 .psui-el-checkbox.size-big.layout-default input:checked ~ .psui-el-checkmark::before {
-  content: "check_box";
   font-family: "Material Icons Round";
 }
+.psui-el-checkbox.size-big.layout-default input:checked ~ .psui-el-checkmark::before {
+  --tw-content: "check_box";
+  content: var(--tw-content);
+}
 .psui-el-checkbox.size-big input {
   position: absolute;
 }
@@ -3570,42 +3596,45 @@ video {
 .psui-el-checkbox.size-big input {
   opacity: 0;
 }
-.psui-el-checkbox.size-big input:checked ~ .psui-el-checkmark:before {
-  --tw-text-opacity: 1;
-  color: rgb(45, 165, 204, var(--tw-text-opacity, 1));
-}
-.psui-el-checkbox.size-big input:checked ~ .psui-el-checkmark:before {
+.psui-el-checkbox.size-big input:checked ~ .psui-el-checkmark::before {
   font-size: 24px;
 }
+.psui-el-checkbox.size-big input:checked ~ .psui-el-checkmark::before {
+  --tw-text-opacity: 1;
+  color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
+}
 .psui-el-checkbox.size-big .psui-el-checkmark {
   display: flex;
 }
 .psui-el-checkbox.size-big .psui-el-checkmark {
-  cursor: pointer;
+  min-height: 24px;
 }
 .psui-el-checkbox.size-big .psui-el-checkmark {
-  align-items: center;
+  cursor: pointer;
 }
 .psui-el-checkbox.size-big .psui-el-checkmark {
-  min-height: 24px;
+  align-items: center;
 }
 .psui-el-checkbox.size-big .psui-el-checkmark span {
   margin-left: 8px;
 }
-.psui-el-checkbox.size-big .psui-el-checkmark:before {
-  content: "check_box_outline_blank";
-}
-.psui-el-checkbox.size-big .psui-el-checkmark:before {
+.psui-el-checkbox.size-big .psui-el-checkmark::before {
   vertical-align: text-bottom;
 }
-.psui-el-checkbox.size-big .psui-el-checkmark:before {
-  --tw-text-opacity: 1;
-  color: rgb(162, 172, 183, var(--tw-text-opacity, 1));
-}
-.psui-el-checkbox.size-big .psui-el-checkmark:before {
+.psui-el-checkbox.size-big .psui-el-checkmark::before {
   font-family: "Material Icons Round";
+}
+.psui-el-checkbox.size-big .psui-el-checkmark::before {
   font-size: 24px;
 }
+.psui-el-checkbox.size-big .psui-el-checkmark::before {
+  --tw-text-opacity: 1;
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
+}
+.psui-el-checkbox.size-big .psui-el-checkmark::before {
+  --tw-content: "check_box_outline_blank";
+  content: var(--tw-content);
+}
 
 .psui-el-dialog {
   display: flex;
@@ -5901,9 +5930,6 @@ video {
 .psui-el-draggable .psui-el-draggable-wrapper {
   padding: 0.5rem;
 }
-.psui-el-draggable .psui-el-draggable-wrapper {
-  padding: 8px;
-}
 .psui-el-draggable .psui-el-draggable-wrapper-title {
   margin-bottom: 0.5rem;
 }
@@ -5926,7 +5952,12 @@ video {
   border-radius: 0.125rem;
 }
 .psui-el-draggable .psui-el-draggable-wrapper-title {
-  padding: 8px 16px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.psui-el-draggable .psui-el-draggable-wrapper-title {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 .psui-el-draggable .psui-el-draggable-wrapper-title p {
   font-size: 12px;
@@ -5943,16 +5974,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
 }
-.psui-el-draggable .psui-el-draggable-wrapper-title p {
-  letter-spacing: 0.6px;
+.psui-el-draggable .psui-el-draggable-wrapper-title i {
+  font-size: 18px;
 }
 .psui-el-draggable .psui-el-draggable-wrapper-title i {
   --tw-text-opacity: 1;
   color: rgb(162, 172, 183, var(--tw-text-opacity, 1));
 }
-.psui-el-draggable .psui-el-draggable-wrapper-title i {
-  font-size: 18px;
-}
 .psui-el-draggable .psui-el-draggable-wrapper-title:hover .psui-el-draggable-wrapper-title-icon {
   visibility: visible;
 }
@@ -5990,14 +6018,19 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
 }
+.psui-el-draggable .psui-el-draggable-item {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+.psui-el-draggable .psui-el-draggable-item {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 .psui-el-draggable .psui-el-draggable-item {
   --tw-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0px 0px 4px var(--tw-shadow-color), 0px 1px 2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
 }
-.psui-el-draggable .psui-el-draggable-item {
-  padding: 7px 16px;
-}
 .psui-el-draggable .psui-el-draggable-item-title {
   display: flex;
 }
@@ -6010,25 +6043,26 @@ video {
 }
 .psui-el-draggable .psui-el-draggable-item-title {
   --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-draggable .psui-el-draggable-item-title .psui-el-checkbox {
   --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-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark:before {
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark::before {
   margin-right: 0.25rem;
 }
-.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark:before {
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark::before {
   --tw-text-opacity: 1;
-  color: rgb(214, 221, 229, var(--tw-text-opacity, 1));
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
 .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox.active {
   --tw-text-opacity: 1;
-  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
+  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
 }
 .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox.disabled .psui-el-checkmark {
-  color: #798490 !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1)) !important;
 }
 .psui-el-draggable .psui-el-draggable-item-title:hover .psui-el-draggable-item-title-icon {
   visibility: visible;
@@ -6058,18 +6092,20 @@ video {
 .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark span {
   font-weight: 700;
 }
-.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
   display: flex;
 }
-.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
+  min-height: 24px;
+}
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
   align-items: center;
 }
-.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
   justify-content: center;
 }
-.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
   font-size: 24px;
-  min-height: 24px;
 }
 
 .psui-el-badge-with-icon {

package/package.json

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

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

@@ -1,107 +1,95 @@
 @layer components {
-        
   .psui-el-checkbox {
-    @apply psui-relative psui-text-gray-60;       
-    
+    @apply psui-relative psui-text-gray-60;
+
     &: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-[6px];
+    }
 
     &.disabled {
       .psui-el-checkmark {
-        @apply psui-cursor-default psui-text-gray-40 !important
+        @apply psui-cursor-default psui-text-gray-40 !important;
       }
 
       .psui-el-checkmark::before {
-        @apply psui-text-gray-30 !important
+        @apply psui-text-gray-40 !important;
       }
     }
 
     &.size-small {
       @apply psui-text-14;
-      
+
       &.layout-default {
-        input:checked ~.psui-el-checkmark::before {
-          content: 'check_box';
-          font-family: 'Material Icons Round';
+        input:checked ~ .psui-el-checkmark::before {
+          @apply psui-content-['check\_box'] psui-font-['Material_Icons_Round'];
         }
       }
-      
+
       &.layout-mixed {
-        input:checked ~.psui-el-checkmark::before {
-          content: 'indeterminate_check_box';
-          font-family: 'Material Icons Round';
+        input:checked ~ .psui-el-checkmark::before {
+          @apply psui-content-['indeterminate\_check\_box'] psui-font-['Material_Icons_Round'];
         }
       }
+
       input {
         @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
 
         &:checked ~ .psui-el-checkmark::before {
-          @apply psui-text-blue-50;
-          font-size: 18px;
+          @apply psui-text-blue-60 psui-text-[18px];
         }
       }
+
       .psui-el-checkmark {
-        @apply psui-flex psui-cursor-pointer psui-items-center;
-        min-height: 18px;
+        @apply psui-flex psui-cursor-pointer psui-items-center psui-min-h-[18px];
 
         span {
-          margin-left: 8px;
+          @apply psui-ml-[8px];
         }
 
         &::before {
-          content:'check_box_outline_blank'; 
-          @apply psui-text-gray-40;
-          font-family:'Material Icons Round';
-          font-size: 18px;
+          @apply psui-content-['check\_box\_outline\_blank'] psui-text-gray-60 psui-font-['Material_Icons_Round'] psui-text-[18px];
         }
-      }            
+      }
     }
 
     &.size-big {
       @apply psui-text-16;
 
       &.layout-mixed {
-        input:checked ~.psui-el-checkmark::before {
-          content: 'indeterminate_check_box';
-          font-family: 'Material Icons Round';
+        input:checked ~ .psui-el-checkmark::before {
+          @apply psui-content-['indeterminate\_check\_box'] psui-font-['Material_Icons_Round'];
         }
       }
+
       &.layout-default {
-        input:checked ~.psui-el-checkmark::before {
-          content: 'check_box';
-          font-family: 'Material Icons Round';
+        input:checked ~ .psui-el-checkmark::before {
+          @apply psui-content-['check\_box'] psui-font-['Material_Icons_Round'];
         }
       }
+
       input {
         @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
 
-        &:checked ~ .psui-el-checkmark:before {
-          @apply psui-text-blue-50;
-          font-size: 24px;
+        &:checked ~ .psui-el-checkmark::before {
+          @apply psui-text-blue-60 psui-text-[24px];
         }
       }
+
       .psui-el-checkmark {
-        @apply psui-flex psui-cursor-pointer psui-items-center;
-        min-height: 24px;
-        
+        @apply psui-flex psui-cursor-pointer psui-items-center psui-min-h-[24px];
+
         span {
-          margin-left: 8px;
+          @apply psui-ml-[8px];
         }
 
-        &:before {
-          content:'check_box_outline_blank'; 
-          @apply psui-text-gray-40 psui-align-text-bottom;
-          font-family:'Material Icons Round';
-          font-size: 24px;
+        &::before {
+          @apply psui-content-['check\_box\_outline\_blank'] psui-text-gray-60 psui-align-text-bottom psui-font-['Material_Icons_Round'] psui-text-[24px];
         }
       }
     }
   }
-}
+}

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-40 psui-text-[18px];
         }
 
-        &:hover{
+        &:hover {
           .psui-el-draggable-wrapper-title-icon {
-            visibility: visible;
+            @apply psui-visible;
           }
         }
 
-        &-icon{
-          visibility: hidden;
+        &-icon {
+          @apply psui-invisible;
         }
-
       }
 
       &-list {
@@ -38,39 +33,39 @@
     }
 
     .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;
         }
       }
 
@@ -78,19 +73,17 @@
         @apply psui-flex psui-text-gray-30 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];
           }
         }
       }
     }
   }
-}
+}