@policystudio/policy-studio-ui-vue 1.1.90-beta.84 → 1.1.90-beta.86

package/dist/css/psui_styles_output.css

@@ -541,6 +541,39 @@ video {
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
+.psui-el-chips .psui-el-chips-text {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  content: attr(data-text);
+}
+.psui-el-chips .psui-el-chips-text::after {
+  pointer-events: none;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  visibility: hidden;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  height: 0px;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  overflow: hidden;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  white-space: nowrap;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  font-weight: 700;
+}
 .psui-el-chips label {
   display: flex;
 }
@@ -589,23 +622,26 @@ video {
   transition-duration: 150ms;
 }
 .psui-el-chips label {
-  padding: 5px 8px 5px 6px;
+  padding: 5px 8px 5px 8px;
 }
 .psui-el-chips label:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips label:focus, .psui-el-chips label:active {
   --tw-border-opacity: 1;
   border-color: rgb(49, 143, 172, var(--tw-border-opacity, 1));
 }
-.psui-el-chips label:hover {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
 .psui-el-chips label:focus, .psui-el-chips label:active {
   --tw-bg-opacity: 1;
   background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
 }
+.psui-el-chips label:focus, .psui-el-chips label:active {
+  font-weight: 700;
+}
 .psui-el-chips label:focus, .psui-el-chips label:active {
   --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
+  color: rgb(0, 70, 95, var(--tw-text-opacity, 1));
 }
 .psui-el-chips label.checked {
   --tw-border-opacity: 1;
@@ -615,9 +651,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
 }
-.psui-el-chips label.checked {
-  font-weight: 700;
-}
 .psui-el-chips label.checked {
   --tw-text-opacity: 1;
   color: rgb(0, 70, 95, var(--tw-text-opacity, 1));
@@ -670,21 +703,6 @@ video {
 .psui-el-chips.type-checkbox input, .psui-el-chips.type-radio input {
   clip: rect(0, 0, 0, 0);
 }
-.psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
-  --tw-border-opacity: 1;
-  border-color: rgb(49, 143, 172, var(--tw-border-opacity, 1));
-}
-.psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
-  font-weight: 700;
-}
-.psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
-  --tw-text-opacity: 1;
-  color: rgb(0, 70, 95, var(--tw-text-opacity, 1));
-}
 .psui-el-chips.type-checkbox input:checked + label.layout-disabled, .psui-el-chips.type-radio input:checked + label.layout-disabled {
   cursor: default;
 }
@@ -709,7 +727,7 @@ video {
 }
 .psui-el-chips.type-checkbox input:checked + label:hover, .psui-el-chips.type-radio input:checked + label:hover {
   --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
 .psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
   display: inline-block;
@@ -719,7 +737,7 @@ video {
 }
 .psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
   --tw-text-opacity: 1;
-  color: rgb(214, 221, 229, var(--tw-text-opacity, 1));
+  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
 }
 .psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
   transition-property: all;
@@ -734,15 +752,7 @@ video {
 }
 .psui-el-chips.type-checkbox label:hover, .psui-el-chips.type-radio label:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(243, 246, 249, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips.type-checkbox label:hover, .psui-el-chips.type-radio label:hover {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
-.psui-el-chips.type-checkbox label:hover:before, .psui-el-chips.type-radio label:hover:before {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
+  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
 }
 .psui-el-chips.type-checkbox input:checked + label:before {
   content: "check_box";
@@ -1784,9 +1794,6 @@ video {
   font-size: 12px;
   line-height: 130%;
 }
-.psui-el-card-infos-title {
-  font-weight: 700;
-}
 .psui-el-card-infos-title {
   --tw-text-opacity: 1;
   color: rgb(162, 172, 183, var(--tw-text-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.84",
+  "version": "1.1.90-beta.86",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

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

@@ -4,7 +4,7 @@
     @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;
 
     &-title {
-      @apply psui-flex psui-text-xsmall psui-font-bold psui-text-gray-40 psui-mb-1;
+      @apply psui-flex psui-text-xsmall psui-text-gray-40 psui-mb-1;
     }
 
     &-content {

package/src/assets/scss/components/PsChips.scss

@@ -3,25 +3,39 @@
   .psui-el-chips {
     @apply psui-inline-flex psui-relative;
 
+    
     &-icon {
       @apply psui-icon;
     }
 
+    .psui-el-chips-text {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      
+      &::after {
+        content: attr(data-text);
+        @apply psui-font-bold psui-h-0 psui-invisible psui-overflow-hidden psui-select-none psui-pointer-events-none psui-whitespace-nowrap;
+      }
+    }
+
     label {
       @apply psui-flex psui-bg-white psui-items-center psui-justify-center psui-text-gray-60 psui-transition-colors psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small psui-border psui-border-gray-40;
-      padding: 5px 8px 5px 6px;
+      padding: 5px 8px 5px 8px;
 
       &:hover {
-        @apply psui-text-blue-60  psui-border-blue-60;
+        @apply psui-bg-blue-10;
       }
 
       &:focus,
       &:active {
-        @apply psui-text-blue-60 psui-bg-blue-10;
+        @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60 psui-font-bold;
       }
 
       &.checked {
-        @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60 psui-font-bold;
+        @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60;
       }
 
       &.icon-position-right {
@@ -55,8 +69,6 @@
 
         &:checked {
           + label {
-            @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60 psui-font-bold;
-
             &.layout-disabled {
               @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default; 
 
@@ -70,7 +82,7 @@
             }
 
             &:hover {
-              @apply psui-text-blue-60;   
+              @apply psui-text-gray-60;   
             }
           }
         }
@@ -79,7 +91,7 @@
       label {
   
         &:before {
-          @apply psui-inline-block psui-text-gray-30 psui-cursor-pointer psui-transition-all;
+          @apply psui-inline-block psui-text-gray-50 psui-cursor-pointer psui-transition-all;
           content: '';
           font-family: 'Material Icons Round';
           font-size: 18px;
@@ -87,10 +99,8 @@
         }
 
         &:hover {
-          @apply psui-text-blue-60 psui-bg-gray-10;
-          &:before {
-            @apply psui-text-blue-60;
-          }
+          @apply psui-bg-blue-10;
+
         }
       }
     }

package/src/components/badges-and-tags/PsCardInfos.vue

@@ -4,14 +4,14 @@
     @click="onClick()"
   >
     <h5 class="psui-el-card-infos-title">
-      <span :class="[titleColor, 'psui-mr-1']">{{ title }}</span>
+      <span :class="[titleClass, 'psui-mr-1']">{{ title }}</span>
       <slot name="subtitle">
-        <span :class="subtitleColor">{{ subtitle }}</span>
+        <span :class="subtitleClass">{{ subtitle }}</span>
       </slot>
     </h5>
     <div class="psui-el-card-infos-content">
       <span class="psui-el-card-infos-icon material-icons-round">{{ icon }}</span>
-      <h5 class="psui-text-gray-80">
+      <h5 :class="totalClass">
         {{ total }}
       </h5>
     </div>
@@ -49,18 +49,25 @@ defineProps({
     default: '',
   },
   /**
-   * It sets the color class for the title text.
+   * It sets the class for the title text (color, font-weight, font-size, etc.).
    */
-  titleColor: {
+  titleClass: {
     type: String,
-    default: 'psui-text-gray-60',
+    default: 'psui-text-gray-60 psui-font-bold',
   },
   /**
-   * It sets the color class for the subtitle text.
+   * It sets the class for the subtitle text (color, font-weight, font-size, etc.).
    */
-  subtitleColor: {
+  subtitleClass: {
     type: String,
-    default: 'psui-text-gray-40',
+    default: 'psui-text-gray-40 psui-font-bold',
+  },
+  /**
+   * It sets the class for the total text (color, font-weight, font-size, etc.).
+   */
+  totalClass: {
+    type: String,
+    default: 'psui-text-gray-80',
   },
 })
 

package/src/components/chips/PsChips.vue

@@ -33,7 +33,13 @@
         class="psui-el-chips-icon psui-el-chips-icon-prepend"
         :class="{ 'is-rotated': rotableIcon }"
       >{{ icon }}</i>
-      {{ label }}
+      <span
+        class="psui-el-chips-text"
+        :data-text="label"
+      >
+        {{ label }}
+      </span>
+      
       <button
         @click="onClose"
         v-if="layout === 'rich'"