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

package/src/assets/scss/components/PsRadioButton.scss

@@ -1,78 +1,93 @@
 @layer components {
+  .psui-el-radio {
+    @apply psui-relative psui-text-gray-60 psui-flex;
 
-        .psui-el-radio {
-            @apply psui-relative psui-text-gray-50 psui-flex;
-
-            &.disabled {
-                .psui-el-checkmark {
-                    @apply psui-cursor-default psui-text-gray-40 !important
-                }
-
-                .psui-el-checkmark::before {
-                    @apply psui-text-gray-30 !important
-                } 
-            }
-
-            &.size-small {
-                @apply psui-text-14;
-
-                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;
-                        content: 'radio_button_checked';
-                        font-family: 'Material Icons Round';                            
-                    }
-                }
-
-                .psui-el-checkmark {
-                    @apply psui-cursor-pointer psui-flex psui-items-center;
-                    height: 18px;
-
-                    span {
-                        margin-left: 8px;
-                    }
-
-                    &::before {
-                        content: 'radio_button_unchecked';
-                        @apply psui-text-gray-40;
-                        font-family: 'Material Icons Round';
-                        font-size: 18px;
-                    }
-                }
-            }
-
-            &.size-big {
-                @apply psui-text-14;
-
-                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;
-                        content: 'radio_button_checked';
-                        font-family: 'Material Icons Round';                            
-                    }
-                }
-
-                .psui-el-checkmark {
-                    @apply psui-cursor-pointer psui-flex psui-items-center;
-                    height: 24px;
-
-                    span {
-                        margin-left: 8px;
-                    }
-
-                    &::before {
-                        content: 'radio_button_unchecked';
-                        @apply psui-text-gray-40;
-                        font-family: 'Material Icons Round';
-                        font-size: 24px;
-                    }
-                }
-            }
+    &:focus {
+      @apply psui-outline-none;
+    }
+
+    &:focus-visible {
+      @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;
+      }
+
+      input:not(:checked) ~ .psui-el-checkmark::before {
+        @apply psui-border-gray-40 psui-bg-gray-20 !important;
+      }
+
+      input:checked ~ .psui-el-checkmark::before {
+        @apply psui-border-gray-40 psui-bg-gray-60 !important;
+        box-shadow: inset 0 0 0 var(--radio-inset-gap) #e6ecf2 !important;
+      }
+    }
+
+    &:not(.disabled):hover {
+      input:not(:checked) ~ .psui-el-checkmark::before {
+        @apply psui-border-blue-65;
+      }
+
+      input:checked ~ .psui-el-checkmark::before {
+        @apply psui-border-blue-65 psui-bg-blue-65;
+        box-shadow: inset 0 0 0 var(--radio-inset-gap) #ffffff;
+      }
+    }
+
+    &.size-small {
+      @apply psui-text-14;
+
+      input {
+        @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
+
+        &:checked ~ .psui-el-checkmark::before {
+          @apply psui-border-blue-60 psui-bg-blue-65;
+          box-shadow: inset 0 0 0 var(--radio-inset-gap) #ffffff;
+        }
+      }
+
+      .psui-el-checkmark {
+        @apply psui-cursor-pointer psui-flex psui-items-center psui-min-h-[18px];
+
+        span {
+          @apply psui-ml-[8px];
+        }
+
+        &::before {
+          --radio-inset-gap: 3px;
+          @apply psui-content-[''] psui-w-[18px] psui-h-[18px] psui-inline-flex psui-items-center psui-justify-center
+            psui-rounded-full psui-flex-shrink-0 psui-box-border psui-border-2 psui-border-gray-60;
+        }
+      }
+    }
+
+    &.size-big {
+      @apply psui-text-14;
+
+      input {
+        @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
+
+        &:checked ~ .psui-el-checkmark::before {
+          @apply psui-border-blue-60 psui-bg-blue-65;
+          box-shadow: inset 0 0 0 var(--radio-inset-gap) #ffffff;
+        }
+      }
+
+      .psui-el-checkmark {
+        @apply psui-cursor-pointer psui-flex psui-items-center psui-min-h-[24px];
+
+        span {
+          @apply psui-ml-[8px];
+        }
+
+        &::before {
+          --radio-inset-gap: 4px;
+          @apply psui-content-[''] psui-w-[24px] psui-h-[24px] psui-inline-flex psui-items-center psui-justify-center
+            psui-rounded-full psui-flex-shrink-0 psui-box-border psui-border-2 psui-border-gray-60;
         }
-}
+      }
+    }
+  }
+}

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/assets/scss/components/PsSlider.scss

@@ -4,7 +4,7 @@
       @apply psui-mb-2;
 
       span {
-        @apply psui-text-gray-50 psui-text-14
+        @apply psui-text-gray-60 psui-text-14
       }
     }
 
@@ -56,7 +56,7 @@
     }
 
     &-bubble {
-      @apply psui-bg-gray-20 psui-font-bold psui-text-gray-50 psui-px-2 psui-py-px psui-rounded-sm psui-float-left psui-ml-2;
+      @apply psui-bg-gray-20 psui-font-bold psui-text-gray-60 psui-px-2 psui-py-px psui-rounded-sm psui-float-left psui-ml-2;
     }
 
     &.layout-default {

package/src/assets/scss/components/PsSwitch.scss

@@ -3,77 +3,95 @@
     @apply psui-relative psui-inline-block psui-rounded-3xl;
 
     &:focus {
-        outline: none;
-      }
+      outline: none;
+    }
 
     &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
-      }
+      outline: 2px solid #2563eb;
+      outline-offset: 2px;
+      border-radius: 6px;
+    }
 
     &.disabled {
       pointer-events: none;
       .psui-el-switch-button {
-        @apply psui-bg-gray-30; 
+        @apply psui-bg-gray-30 psui-border psui-border-gray-60;
+        &::before {
+          @apply psui-border psui-border-gray-60 psui-top-[1px] psui-left-[1px];
+        }
       }
     }
 
     &.size-big {
       width: 46px;
-      height: 24px;  
+      height: 24px;
     }
+
     &.size-small {
       width: 30px;
       height: 16px;
 
+      &.disabled {
+        pointer-events: none;
+        .psui-el-switch-button {
+          @apply psui-bg-gray-30 psui-border psui-border-gray-60;
+          &.toggle-false {
+            &::before {
+              @apply psui-border psui-border-gray-60 psui-bg-gray-30 psui-top-[1px] psui-left-[1px];
+            }
+          }
+        }
+      }
+
       .psui-el-switch-button {
-        &.toggle-false{   
+        &.toggle-false {
           &::before {
             @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
             left: 2px;
             top: 2px;
-            content: ''; 
+            content: "";
           }
         }
-        
+
         &.toggle-true {
           &::before {
             @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
             left: 16px;
             top: 2px;
-            content: '';
+            content: "";
           }
         }
-      }   
+      }
     }
+
     &:focus {
       @apply psui-outline-none;
     }
+
     input {
       @apply psui-opacity-0 psui-w-0 psui-h-0;
     }
+
     .psui-el-switch-button {
       @apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
-      
-        &.toggle-false{   
+
+      &.toggle-false {
         &::before {
           @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
           left: 2px;
           top: 2px;
-          content: '';
+          content: "";
         }
       }
-      
-      &.toggle-true {
 
+      &.toggle-true {
         &::before {
           @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
           left: 24px;
-          top:2px;
-          content: '';
+          top: 2px;
+          content: "";
         }
       }
     }
   }
-}
+}

package/src/assets/scss/components/PsTabHeader.scss

@@ -1,11 +1,10 @@
-@layer components{
-
+@layer components {
   .psui-el-tab-header {
-    @apply psui-flex;
+    @apply psui-flex psui-space-x-1;
 
     button {
       @apply transition-default psui-text-14;
-      
+
       &.status-disabled {
         @apply psui-cursor-not-allowed;
       }
@@ -15,184 +14,176 @@
       }
 
       &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
+        outline: 2px solid #2563eb;
+        outline-offset: 2px;
+        border-radius: 6px;
       }
     }
 
     &.status-disabled {
       .psui-el-input-wrapper {
-        @apply psui-bg-gray-20 psui-border-gray-20
+        @apply psui-bg-gray-20 psui-border-gray-20;
       }
     }
 
     /*  Layout Policy Design  */
-      &.layout-policy-design {
-          button {
-            padding: 8px 2px 7px 0px;
-            margin-right: 8px;
-            @apply psui-flex psui-items-center psui-relative;
-            
-            &:not(:first-child) {
-              margin-left: 8px;
-            }
-             
-
-            &:after {
-              content: '';
-              @apply psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-opacity-0 psui-bg-blue-60;
-            }
-
-            &:hover {
-              > div {
-                @apply psui-text-gray-60;
-              }
-            }
-
-            &.status-active {
-              @apply psui-border-blue-60;
-
-              &:after {
-                @apply psui-opacity-100;
-              }
-
-               > div {
-                @apply psui-text-blue-60;
-               }
-
-               > span {
-                @apply psui-font-bold psui-text-gray-70;
-               }
-            }
-
-            > div {
-              @apply psui-text-gray-50 psui-mr-1;
-            }
-
-            > span {
-              line-height: 120%;
-              font-size: 14px;
-              @apply psui-text-gray-60 psui-font-bold;
-            }
+    &.layout-policy-design {
+      button {
+        padding: 9px 2px 10px 0px;
+        margin-right: 8px;
+        @apply psui-flex psui-items-center psui-relative;
+
+        &:not(:first-child) {
+          margin-left: 8px;
+        }
+
+        &:after {
+          @apply psui-content-[''] psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-rounded-tl-[20px] psui-rounded-tr-[20px] psui-bg-blue-60 psui-opacity-0;
+        }
+
+        &:hover {
+          > span {
+            @apply psui-font-semibold psui-text-blue-60;
+          }
+
+          > div {
+            @apply psui-text-blue-60;
           }
         }
-      
 
+        &.status-active {
+          &:after {
+            @apply psui-opacity-100;
+          }
+        }
 
+        > div {
+          @apply psui-text-gray-60 psui-mr-1;
+        }
+
+        > span {
+          @apply psui-text-gray-80 psui-font-semibold;
+        }
+      }
+    }
     /* ----------------------------------------- */
 
     /* 	Layout Standard  */
     /* ----------------------------------------- */
-      &.layout-standard {
-        @apply psui-rounded-md;
+    &.layout-standard {
+      @apply psui-rounded-md;
 
-        .psui-el-tooltip{
-          &:not(:last-child) {
-            margin-right: 20px;
-          }
+      .psui-el-tooltip {
+        &:not(:last-child) {
+          margin-right: 20px;
         }
-        
-        button {
-          @apply psui-bg-gray-10 psui-text-gray-60;
-          padding: 6px 12px;
-          box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
+      }
 
-          &:not(:last-child) {
-            margin-right: 1px;
-          }
+      button {
+        @apply psui-bg-gray-10 psui-text-gray-60;
+        padding: 6px 12px;
+        box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
 
-          &:first-child {
-            @apply psui-rounded-l;
-          }
+        &:not(:last-child) {
+          margin-right: 1px;
+        }
 
-          &:last-child {
-            @apply psui-rounded-r;
-          }
+        &:first-child {
+          @apply psui-rounded-l;
+        }
 
-          &:hover {
-            @apply psui-text-blue-60;
-            box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
-          }
+        &:last-child {
+          @apply psui-rounded-r;
+        }
 
-          &.status-active {
-            @apply psui-text-white psui-bg-blue-60 psui-font-bold;
-          }
+        &:hover {
+          @apply psui-text-blue-60;
+          box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
+        }
 
-          &.status-disabled:hover {
-            @apply psui-text-gray-60;
-          }
+        &.status-active {
+          @apply psui-text-white psui-bg-blue-60 psui-font-bold;
+        }
+
+        &.status-disabled:hover {
+          @apply psui-text-gray-60;
         }
       }
+    }
     /* ----------------------------------------- 	Layout Standard */
-    
+
     /* Layout Underline */
     /* ----------------------------------------- */
-      &.layout-underline {
-        .psui-el-tooltip {
-          &:not(:last-child) {
-            margin-right: 20px;
-          }
+    &.layout-underline {
+      .psui-el-tooltip {
+        &:not(:last-child) {
+          margin-right: 20px;
         }
+      }
 
-        button {
-          @apply psui-text-gray-50 psui-font-bold;
-          border-bottom: 3px solid transparent;
-          padding: 11.5px 0;
+      button {
+        @apply psui-text-gray-80 psui-font-semibold psui-relative;
+        padding: 8px 0;
 
-          &:hover {
-            @apply psui-text-blue-60;
-          }
+        &:hover {
+          @apply psui-text-blue-60;
+        }
 
-          &:not(:last-child) {
-            margin-right: 20px;
-          }
+        &:not(:last-child) {
+          margin-right: 8px;
+        }
 
-          &.status-enable:hover {
-            @apply psui-text-blue-60;
-          }
+        &.status-enable:hover {
+          @apply psui-text-blue-60;
+        }
 
-          &.status-active {
-            @apply psui-text-blue-60 psui-border-blue-50;
+        &.status-active {
+          &::after {
+            @apply psui-content-['']
+              psui-absolute 
+              psui-bottom-0 
+              psui-left-0 
+              psui-w-full 
+              psui-h-[3px] 
+              psui-rounded-tl-[20px] 
+              psui-rounded-tr-[20px]
+               psui-bg-blue-60;
           }
         }
       }
+    }
     /* ----------------------------------------- Layout Underline */
-    
-    
+
     /* Layout Folder */
     /* ----------------------------------------- */
-      &.layout-folder {
-
-        .psui-el-tooltip{
-          &:not(:last-child) {
-            margin-right: 20px;
-          }
+    &.layout-folder {
+      .psui-el-tooltip {
+        &:not(:last-child) {
+          margin-right: 20px;
         }
+      }
 
-        button {
-          @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
-          padding: 9px 12px;
+      button {
+        @apply psui-bg-gray-10 psui-text-gray-60 psui-rounded-t;
+        padding: 9px 12px;
 
-          &:hover {
-            @apply psui-text-blue-60;
-          }
+        &:hover {
+          @apply psui-text-blue-60;
+        }
 
-          &:not(:last-child) {
-            margin-right: 4px;
-          }
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
 
-          &.status-enable:hover {
-            @apply psui-text-gray-60;
-          }
+        &.status-enable:hover {
+          @apply psui-text-gray-60;
+        }
 
-          &.status-active {
-            @apply psui-text-blue-60 psui-font-bold psui-bg-white;
-          }
+        &.status-active {
+          @apply psui-text-blue-60 psui-font-bold psui-bg-white;
         }
       }
+    }
     /* ----------------------------------------- Layout Folder */
-    
   }
-
-}
+}