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

package/doc/src/stories/Colors.mdx

@@ -28,9 +28,9 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy" data-to-copy="psui-bg-gray-60">Gray 60 <div>#515E6A</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy" data-to-copy="psui-bg-gray-50">Gray 50 <div>#798490</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy" data-to-copy="psui-bg-gray-40">Gray 40 <div>#A2ACB7</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy" data-to-copy="psui-bg-gray-30">Gray 30 <div>#D6DDE5</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy" data-to-copy="psui-bg-gray-20">Gray 20 <div>#E6ECF2</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy" data-to-copy="psui-bg-gray-10">Gray 10 <div>#F3F6F9</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-60 psui-bg-gray-30 click-to-copy" data-to-copy="psui-bg-gray-30">Gray 30 <div>#D6DDE5</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-60 psui-bg-gray-20 click-to-copy" data-to-copy="psui-bg-gray-20">Gray 20 <div>#E6ECF2</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-60 psui-bg-gray-10 click-to-copy" data-to-copy="psui-bg-gray-10">Gray 10 <div>#F3F6F9</div></div>
 </div>
 
 ## Yellow

package/doc/src/stories/Dropdown.stories.ts

@@ -12,7 +12,7 @@ const Template = (args, { argTypes }) => ({
     <div style='background: #E6ECF2; width:1200px; height: 700px; padding: 20px;' class='psui-flex psui-gap-64 psui-bg-gray-20 '>
       <PsDropdown>
         <template #dropdownTrigger>
-          <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
+          <i class='psui-icon psui-text-gray-60 psui-cursor-pointer psui-h-2'>more_horiz</i>
         </template>
         <template #items>
           <div class='psui-pb-5'>
@@ -35,7 +35,7 @@ const Template = (args, { argTypes }) => ({
 
       <PsDropdown>
         <template #dropdownTrigger>
-          <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
+          <i class='psui-icon psui-text-gray-60 psui-cursor-pointer psui-h-2'>more_horiz</i>
         </template>
         <template #items>
           <div class='psui-pb-5'>
@@ -58,7 +58,7 @@ const Template = (args, { argTypes }) => ({
 
       <PsDropdown>
         <template #dropdownTrigger>
-          <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
+          <i class='psui-icon psui-text-gray-60 psui-cursor-pointer psui-h-auto'>more_horiz</i>
         </template>
         <template #items>
           <PsDropdownList v-bind='$props'></PsDropdownList>
@@ -67,7 +67,7 @@ const Template = (args, { argTypes }) => ({
 
       <PsDropdown>
         <template #dropdownTrigger>
-          <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
+          <i class='psui-icon psui-text-gray-60 psui-cursor-pointer psui-h-auto'>more_horiz</i>
         </template>
         <template #items>
           <div class='psui-my-3'>

package/doc/src/stories/Input.stories.ts

@@ -100,7 +100,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
      
       <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '', hint: 'Between 8 and 16 characters' }" >
         <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+          <span class="material-icons-round psui-text-gray-60 psui-mr-2">
             visibility_off
           </span>
         </template>
@@ -108,7 +108,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
  
       <PsInput label="Resting without hint" hint="Between 8 and 16 characters">
         <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+          <span class="material-icons-round psui-text-gray-60 psui-mr-2">
             visibility_off
           </span>
         </template>
@@ -116,7 +116,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
        
         <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" hint="Between 8 and 16 characters">        
           <template v-slot:append>
-            <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            <span class="material-icons-round psui-text-gray-60 psui-mr-2">
               visibility_off
             </span>
           </template>
@@ -124,7 +124,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
  
       <PsInput v-bind="{...$props, label: 'Focus'}" hint="Between 8 and 16 characters">
         <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+          <span class="material-icons-round psui-text-gray-60 psui-mr-2">
             visibility_off
           </span>
         </template>
@@ -132,7 +132,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
  
       <PsInput v-bind="{...$props, label: 'Typing', placeholder: 'Type to see the effect...', value: '' }" hint="Between 8 and 16 characters" >
         <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+          <span class="material-icons-round psui-text-gray-60 psui-mr-2">
             visibility_off
           </span>
         </template>
@@ -140,7 +140,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
  
       <PsInput v-bind="{label: 'Active', active: true }" value="Password123" hint="Between 8 and 16 characters">
         <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+          <span class="material-icons-round psui-text-gray-60 psui-mr-2">
             visibility
           </span>
         </template>
@@ -159,7 +159,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
  
       <PsInput label="Disabled" :disabled="true" value="100,000" hint="Between 8 and 16 characters">
         <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+          <span class="material-icons-round psui-text-gray-60 psui-mr-2">
             visibility
           </span>
         </template>
@@ -167,7 +167,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
  
       <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }">
         <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+          <span class="material-icons-round psui-text-gray-60 psui-mr-2">
             visibility_off
           </span>
         </template>
@@ -175,7 +175,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
  
       <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" hint="Between 8 and 16 characters">
         <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+          <span class="material-icons-round psui-text-gray-60 psui-mr-2">
             visibility_off
           </span>
         </template>

package/package.json

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

package/src/assets/scss/base.scss

@@ -1,3 +1,4 @@
+@import './components/PsTableResults.scss';
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
 @import './components/PsChips.scss';
 @import './components/PsToggle.scss';
@@ -11,7 +12,6 @@
 @import './components/PsCostEffectBar.scss';
 @import './components/PsHighlightRippleDot.scss';
 @import './components/PsDataTable.scss';
-@import './components/PsTableResults.scss';
 @import './components/PsCheckbox.scss';
 @import './components/PsDialog.scss';
 @import './components/PsDotLoader.scss';
@@ -36,6 +36,7 @@
 @import './components/PsSimpleAlert.scss';
 @import './components/PsBreadcrumb.scss';
 @import './components/PsCollapse.scss';
+@import './components/PsIcon.scss';
 
 
 @import "tailwindcss/base";
@@ -45,6 +46,7 @@
 *:focus {
   outline: none;
 }
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

package/src/assets/scss/components/PsAccordion.scss

@@ -18,28 +18,18 @@
       &.disabled {
         .psui-el-accordion-item-header {
           .psui-el-accordion-item-header-wrapper {
-           @apply psui-text-gray-50 psui-pointer-events-none;
+           @apply psui-text-gray-60 psui-pointer-events-none;
 
           }
         }
       }
 
       &-header {
-        @apply psui-flex psui-justify-between psui-items-center;
-        padding-top: 16px;
-        padding-bottom: 16px;
+        @apply psui-flex psui-justify-between psui-items-center psui-py-[10px];
+
 
         &-wrapper {
           @apply psui-flex psui-items-start psui-justify-between psui-w-full psui-cursor-pointer psui-transition-all transition-default psui-text-gray-80;
-        
-          &:hover {
-            .psui-el-accordion-item-icon {
-              @apply psui-text-blue-60 !important;
-            }
-            .psui-el-accordion-item-title{
-              @apply psui-text-blue-60;
-            }
-          }
         }
       }
 
@@ -48,12 +38,26 @@
       }
 
       &-icon {
-        @apply psui-icon;
+        @apply psui-icon psui-text-gray-60;
         font-size: 20px;
         width: 20px;
         transition: transform 0.4s ease-in-out;
       }
 
+      &:hover {
+        .psui-el-accordion-item-header-wrapper {
+          @apply psui-text-blue-60;
+        }
+      }
+
+      &:not(:hover) {
+        .psui-el-accordion-item-header-wrapper {
+          .psui-el-accordion-item-title {
+            @apply psui-text-gray-80;
+          }
+        }
+      }
+      
     }
 
     &.layout-big {
@@ -62,7 +66,7 @@
           @apply psui-pl-4 psui-pr-4;
         }
         &-title {
-          @apply psui-text-18 psui-font-bold;
+          @apply psui-text-18 psui-font-semibold;
         }
         &-icon {
           @apply psui-text-gray-30
@@ -73,7 +77,7 @@
     &.layout-medium {
       .psui-el-accordion-item {
         &-title {
-          @apply psui-text-14 psui-font-bold;
+          @apply psui-text-14 psui-font-semibold;
         }
         &-icon {
           @apply psui-text-gray-60;
@@ -86,19 +90,6 @@
         }
       }
     }
-
-    .psui-el-accordion-item {
-      &.status-opened .psui-el-accordion-item-header {
-        .psui-el-accordion-item-header-wrapper {
-          .psui-el-accordion-item-icon {
-            @apply psui-text-blue-60;
-          }
-          .psui-el-accordion-item-title{
-            @apply psui-text-blue-60;
-          }
-        }
-      }
-    }
     
     .psui-el-accordion-item-content {
       @apply psui-list-none psui-text-gray-60 psui-mb-5;

package/src/assets/scss/components/PsBadgeWithIcon.scss

@@ -4,13 +4,13 @@
     @apply psui-flex psui-items-center psui-py-1 psui-px-2 psui-rounded;
 
     &.layout-grey{
-      @apply psui-bg-gray-10 psui-text-gray-50;
+      @apply psui-bg-gray-10 psui-text-gray-60;
     }
     &.layout-blue{
       @apply psui-bg-blue-20 psui-text-blue-60;
     }
     &.layout-green{
-      @apply psui-bg-green-10 psui-text-green-70;
+      @apply psui-bg-green-10 psui-text-green-80;
     }
     &.layout-yellow{
       @apply psui-bg-yellow-10 psui-text-yellow-70;

package/src/assets/scss/components/PsButton.scss

@@ -1,160 +1,205 @@
 @layer components {
-
   .psui-el-button {
-
-    @apply psui-font-bold psui-items-center psui-flex psui-content-center psui-rounded-md psui-transition-all psui-ease-in-out;
-    transition-duration: 130ms;
+    @apply psui-flex psui-items-center psui-content-center psui-font-bold psui-transition-all psui-ease-in-out psui-duration-[130ms] psui-no-underline psui-cursor-pointer;
 
     span {
-      @apply psui-font-bold psui-flex-shrink-0;
-      line-height: 130%;
-      font-family: inherit;
-      text-align: right;
+      @apply psui-flex psui-items-center psui-font-semibold psui-flex-shrink-0 psui-leading-[130%] psui-font-[inherit] psui-text-right psui-pt-[1px] psui-align-middle;
     }
 
     &:focus {
-      outline: none;
+      @apply psui-outline-none;
     }
 
     &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
-      }
-    
+      @apply psui-outline-2 psui-outline psui-outline-focus-ring psui-outline-offset-2 psui-rounded-[6px];
+    }
+
+    &[href] {
+      @apply psui-inline-flex;
+    }
+
     &.size-big {
-      @apply psui-flex psui-items-center psui-content-center;
-      padding: 9.5px 16px;
-      
+      @apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md psui-py-[9.5px] psui-px-4 psui-text-[16px];
+
       &.icon-left,
       &.icon-right,
       &.icon-both {
-        padding: 8px 16px;
+        @apply psui-py-2 psui-px-4;
       }
 
       .icon-left-side {
-        font-size: 24px;
-        margin-right: 8px;
+        @apply psui-text-[24px] psui-mr-2;
       }
 
       .icon-right-side {
-        font-size: 24px;
-        margin-left: 8px;
+        @apply psui-text-[24px] psui-ml-2;
       }
     }
 
     &.size-medium {
-      @apply psui-flex psui-items-center psui-content-center;
-      padding: 7px 13px;
-      font-size: 14px;
+      @apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md psui-py-1.5 psui-px-3 psui-text-[14px];
 
       .icon-left-side {
-        font-size: 18px;
-        margin-right: 4px;
+        @apply psui-text-[18px] psui-mr-1;
       }
 
       .icon-right-side {
-        font-size: 18px;
-        margin-left: 4px;
+        @apply psui-text-[18px] psui-ml-1;
       }
     }
 
     &.size-small {
-      @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-py-1 psui-px-2;
-      font-size: 14px;
+      @apply psui-flex psui-items-center psui-justify-center psui-py-1 psui-px-2 psui-rounded psui-text-[14px];
 
-      &.layout-onlytext {
+      &.layout-onlytext,
+      &.layout-textonly {
         &:active:not(.disabled) {
-          @apply psui-bg-blue-20 psui-text-blue-60;    
-          box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
-        }    
+          @apply psui-bg-blue-20 psui-text-blue-60 psui-shadow-[inset_0px_1px_2px_rgba(0,0,0,0.05)];
+        }
+      }
+
+      &.hover.layout-onlytext,
+      &.hover.layout-textonly {
+        @apply psui-bg-blue-20 psui-text-blue-60 !important;
       }
 
-      &.hover.layout-onlytext {
-        @apply psui-text-blue-60 psui-bg-blue-20 !important;
+      .icon-left-side {
+        @apply psui-text-[18px] psui-mr-1;
       }
 
+      .icon-right-side {
+        @apply psui-text-[18px] psui-ml-1;
+      }
+    }
+
+    &.size-compact {
+      @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-py-0.5 psui-px-1.5 psui-text-[14px];
+
       .icon-left-side {
-        font-size: 18px;
-        margin-right: 4px;
+        @apply psui-text-[16px] psui-mr-0.5;
       }
 
       .icon-right-side {
-        font-size: 18px;
-        margin-left: 4px;
+        @apply psui-text-[16px] psui-ml-0.5;
       }
     }
 
-    &.layout-solid {
-      @apply psui-bg-blue-60 psui-text-white; 
+    /* Layout Solid (alias: Primary) */
+    &.layout-solid,
+    &.layout-primary {
+      @apply psui-bg-blue-60 psui-text-white;
 
       &.hover {
-        @apply psui-bg-blue-50 psui-text-white;
+        @apply psui-bg-blue-65 psui-text-white;
       }
 
       &:active:not(.disabled) {
-        @apply psui-bg-blue-50 psui-text-white;
-        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
+        @apply psui-bg-blue-65 psui-text-white psui-shadow-[inset_0px_1px_2px_rgba(0,0,0,0.15)];
       }
 
       &.disabled {
-        @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
-      }                
+        @apply psui-bg-gray-20 psui-text-gray-60 psui-cursor-default;
+
+        .icon-left-side,
+        .icon-right-side {
+          @apply psui-text-gray-60;
+        }
+      }
     }
 
-    &.layout-outline {
-      @apply psui-text-blue-60 psui-border psui-border-blue-50;
-      background: transparent;
+    /* Layout Outline (alias: Secondary) */
+    &.layout-outline,
+    &.layout-secondary {
+      @apply psui-bg-transparent psui-text-gray-80 psui-border psui-border-blue-30;
+
+      .icon-left-side,
+      .icon-right-side {
+        @apply psui-text-blue-60;
+      }
 
       &.hover,
       &:active {
-        @apply psui-border psui-border-blue-60
+        @apply psui-bg-blue-20 psui-text-blue-80 psui-border psui-border-blue-30;
+
+        .icon-left-side,
+        .icon-right-side {
+          @apply psui-text-blue-60;
+        }
       }
 
       &.disabled {
-        @apply psui-text-gray-40 psui-border-gray-30 psui-cursor-default;
-      } 
+        @apply psui-bg-gray-20 psui-text-gray-60 psui-border psui-border-gray-30 psui-cursor-default;
+
+        .icon-left-side,
+        .icon-right-side {
+          @apply psui-text-gray-60;
+        }
+      }
     }
 
-    &.layout-ghost {
+    /* &.layout-ghost {
       @apply psui-bg-blue-20 psui-text-blue-60;
 
       &.hover {
-        @apply psui-bg-blue-10
-      } 
+        @apply psui-bg-blue-10;
+      }
 
       &:active:not(.disabled) {
-        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
+        @apply psui-shadow-[inset_0px_1px_2px_rgba(0,0,0,0.05)];
       }
 
       &.disabled {
-        @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+        @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default;
       }
-    }
+    } */
 
-    &.layout-onlytext {
-      @apply  psui-text-blue-60;
+    /* Layout OnlyText (alias: TextOnly) */
+    &.layout-onlytext,
+    &.layout-textonly {
+      @apply psui-text-gray-80;
 
-      &.disabled {
-        @apply psui-text-gray-40 psui-cursor-default
+      .icon-left-side,
+      .icon-right-side {
+        @apply psui-text-blue-60;
       }
-      
+
       &.hover {
-        @apply psui-text-blue-50
+        @apply psui-bg-blue-20 psui-text-blue-80;
+
+        .icon-left-side,
+        .icon-right-side {
+          @apply psui-text-blue-65;
+        }
+      }
+
+      &.disabled {
+        @apply psui-text-gray-60 psui-cursor-default;
+
+        .icon-left-side,
+        .icon-right-side {
+          @apply psui-text-gray-40;
+        }
       }
     }
 
-    &.layout-caution {
-      @apply psui-bg-red-10 psui-text-red-20;
+    /* Layout Caution (alias: Destructive) */
+    &.layout-caution,
+    &.layout-destructive {
+      @apply psui-bg-red-80 psui-text-white;
 
-      &.hover, 
+      &.hover,
       &:active:not(.disabled) {
-        @apply psui-bg-red-10 psui-text-red-70;
+        @apply psui-bg-red-10 psui-text-red-80;
       }
 
       &.disabled {
-        @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+        @apply psui-bg-gray-20 psui-text-gray-60 psui-cursor-default;
+
+        .icon-left-side,
+        .icon-right-side {
+          @apply psui-text-gray-40;
+        }
       }
     }
   }
-}
+}

package/src/assets/scss/components/PsCardInfos.scss

@@ -3,16 +3,26 @@
   .psui-el-card-infos {
     @apply psui-border psui-border-gray-20 psui-rounded-md psui-flex psui-flex-col psui-items-center psui-justify-center psui-px-3 psui-py-2 psui-cursor-pointer;
 
+    &:focus {
+      outline: none !important;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #2563eb !important;
+      outline-offset: 2px !important;
+      border-radius: 6px !important;
+    }
+
     &-title {
-      @apply psui-flex psui-text-xsmall psui-text-gray-40 psui-mb-1;
+      @apply psui-flex psui-text-xsmall psui-text-gray-80 psui-mb-1;
     }
 
     &-content {
-      @apply psui-w-full psui-flex psui-justify-end psui-items-center psui-text-16;
+      @apply psui-w-full psui-flex psui-justify-end psui-items-center psui-text-16 psui-text-gray-80;
     }
 
     &-icon {
-      @apply psui-text-blue-50 psui-mr-1;
+      @apply psui-text-blue-60 psui-mr-1;
       font-size: 17px;
     }
 

package/src/assets/scss/components/PsChartLegend.scss

@@ -10,7 +10,7 @@
     }
 
     &-text {
-      @apply psui-text-xsmall psui-text-gray-50 psui-font-bold;
+      @apply psui-text-xsmall psui-text-gray-60 psui-font-bold;
     }
 
     &-total {
@@ -18,7 +18,7 @@
     }
 
     &-percentage {
-      @apply psui-text-gray-50 psui-text-16 psui-mt-1;
+      @apply psui-text-gray-60 psui-text-16 psui-mt-1;
     }
   }