@vector-crystal-web/atoms 1.26.0 → 1.26.2

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-# RELEASES - [VECTOR-CRYSTAL-WEB/ATOMS] - VERSION: [1.26.0] - LAST-UPDATE: [2026/03/07]
+# RELEASES - [VECTOR-CRYSTAL-WEB/ATOMS] - VERSION: [1.26.2] - LAST-UPDATE: [2026/03/12]
 
 ---
 
@@ -94,6 +94,7 @@
 
 ### ♻️ Refactor
 
+- 2026/03/08 (Diogo Ribeiro): **crystal-web/atoms:** css formatting adjustments and bold icons on button, chip, hint, label and toast
 - 2026/03/06 (Diogo Ribeiro): **atoms/text-field:** improved customization for text and password and in the story
 - 2026/03/06 (Diogo Ribeiro): **atoms/label:** adjustments to the label component and improvements to the story
 - 2026/03/06 (Diogo Ribeiro): **crystal-web/atoms:** path resolution in entry points adjustments
@@ -128,12 +129,18 @@
 
 ### 🩹 Fixes
 
+- 2026/03/10 (Alexandre): **atoms/tag:** adjust scss
+- 2026/03/10 (Alexandre): **atoms/toast:** scss code review
+- 2026/03/10 (Alexandre): **atoms/toast:** scss adjustment requested by ux
 - 2026/03/03 (Diogo Ribeiro): **atoms/bundle:** enhancement of the bundle and build process and package generation for NPM
 - 2026/03/03 (Diogo Ribeiro): **crystal-web/bundle:** enhancement of the bundle and build process and package generation for NPM
 - 2025/11/09 (Diogo Ribeiro): **atoms/crystal-radio:** code review adjustment behavior and css
 
 ### 🔧 Chore
 
+- 2026/03/08 (Diogo Ribeiro): **crystal-web/atoms:** update package version, dependencies and logs
+- 2026/03/08 (Diogo Ribeiro): **crystal-web/tokens:** update package version, dependencies and logs
+- 2026/03/06 (Diogo Ribeiro): **atoms/label-text-field:** update package version, dependencies and logs
 - 2026/03/03 (Diogo Ribeiro): **shared/bundle:** update package version, dependencies and logs
 - 2026/03/03 (Diogo Ribeiro): **atoms/bundle:** update package version, dependencies and logs
 - 2026/03/03 (Diogo Ribeiro): **tokens/bundle:** update package version, dependencies and logs
@@ -190,7 +197,7 @@
 # ❤️ THANK YOU FOR
 ---
 
-- Alexandre (alexandre.salgueiro)
+- Alexandre (alexandre.barbosa)
 - Ana (ana.najera.tam)
 - Diogo Ribeiro (diogoribeiro.web)
 - Marcos Evaristo (marcos.evaristo)

package/button/src/button.scss

@@ -2,15 +2,21 @@
 
 :host ::ng-deep {
   .p-button {
-    padding: tokens.$padding-padding-5 tokens.$padding-padding-8;
-    min-height: 36px;
+    padding: tokens.$padding-padding-3 tokens.$padding-padding-6 !important;
+    min-height: 32px;
+    min-width: 110px;
+    gap: tokens.$spacing-spacing-3;
     font-family: tokens.$primitive-font-family-body;
     font-size: tokens.$primitive-font-size-default;
     font-weight: var(--primitive-font-weight-6);
     border-radius: tokens.$radius-radius-2;
 
+    span.p-button-label {
+      font-weight: var(--primitive-font-weight-6);
+    }
+
     .p-button-icon {
-      font-size: var(--primitive-font-size-body-6);
+      font-size: var(--primitive-dimension-7);
     }
     .p-button-icon-left {
       margin-left: 0;
@@ -26,10 +32,13 @@
   .cw-button--only-icon {
     .p-button {
       display: flex;
+      gap: 0 !important;
       padding: 0 !important;
       align-items: center;
       justify-content: center;
-      .p-button-icon {
+      min-width: auto;
+
+      &.p-button-icon-only {
         font-size: var(--primitive-font-size-body-5);
       }
     }
@@ -220,8 +229,12 @@
   // size
   .cw-button--x-small {
     .p-button {
-      min-height: 32px;
+      height: 32px;
       padding: tokens.$padding-padding-5 tokens.$padding-padding-8;
+
+      .p-button-icon {
+        font-size: var(--primitive-dimension-6);
+      }
     }
     &.cw-button--only-icon {
       .p-button {
@@ -229,29 +242,35 @@
         height: 32px;
         width: 32px;
         .p-button-icon {
-          font-size: var(--primitive-font-size-body-3);
+          font-size: var(--primitive-dimension-6);
         }
       }
     }
   }
+
   .cw-button--small {
     .p-button {
-      min-height: 36px;
+      height: 36px;
       padding: tokens.$padding-padding-5 tokens.$padding-padding-8;
+
+      .p-button-icon {
+        font-size: var(--primitive-dimension-6);
+      }
     }
     &.cw-button--only-icon {
       .p-button {
         height: 36px;
         width: 36px;
         .p-button-icon {
-          font-size: var(--primitive-font-size-body-5);
+          font-size: var(--primitive-dimension-6);
         }
       }
     }
   }
+
   .cw-button--medium {
     .p-button {
-      min-height: 42px;
+      height: 42px;
       padding: tokens.$padding-padding-6 tokens.$padding-padding-8;
     }
     &.cw-button--only-icon {
@@ -265,9 +284,10 @@
       }
     }
   }
+
   .cw-button--large {
     .p-button {
-      min-height: 48px;
+      height: 48px;
       padding: tokens.$padding-padding-5 tokens.$padding-padding-8;
     }
     &.cw-button--only-icon {

package/chip/src/chip.scss

@@ -1,28 +1,46 @@
 @use '@vector-crystal-web/tokens/variables' as tokens;
 
 :host ::ng-deep {
+  .cw-chip-wrapper {
+    display: inline-flex;
+    outline: none;
+    &:focus .p-chip,
+    &:focus-visible .p-chip,
+    &:focus-within .p-chip {
+      border: 1px solid #{tokens.$color-stroke-brand-default} !important;
+      outline: 3px solid tokens.$color-stroke-interactive-brand-focused !important;
+      outline-offset: 0;
+    }
+  }
+
   .p-chip {
     display: flex;
-    padding: tokens.$padding-padding-2 tokens.$padding-padding-5;
-    width: fit-content;
+    padding: tokens.$padding-padding-2 tokens.$padding-padding-5 !important;
+    gap: tokens.$spacing-spacing-3;
     min-height: var(--primitive-dimension-7);
     font-family: tokens.$primitive-font-family-body;
-    font-size: var(--primitive-font-size-body-1);
+    font-size: var(--primitive-font-size-body-2);
     font-weight: var(--primitive-font-weight-6);
-    align-items: center;
-    // justify-content: center;
+    align-items: center !important;
     border-radius: tokens.$radius-full;
 
     .p-chip-icon {
       display: flex;
-      margin: auto var(--primitive-dimension-1);
-      min-height: var(--primitive-dimension-6);
       align-items: center;
+      justify-content: center;
+      margin: auto var(--primitive-dimension-1);
+      width: var(--primitive-dimension-6);
+      height: var(--primitive-dimension-6);
+      font-size: var(--primitive-dimension-6);
       font-weight: var(--primitive-font-weight-5);
     }
 
     .p-chip-remove-icon {
       margin: auto var(--primitive-dimension-2);
+      display: block;
+      width: var(--primitive-dimension-6);
+      height: var(--primitive-dimension-6) !important;
+      font-size: var(--primitive-dimension-6);
     }
   }
 
@@ -131,6 +149,7 @@
       box-shadow: var(--primitive-shadow-large);
     }
   }
+
   .cw-chip--warning {
     background: tokens.$color-fill-feedback-warning;
     color: tokens.$color-text-feedback-warning;
@@ -261,25 +280,16 @@
 
   // size
   .cw-chip--small {
-    height: var(--primitive-dimension-7);
-    min-height: var(--primitive-dimension-7);
-    padding: tokens.$padding-padding-1 tokens.$padding-padding-3;
-    gap: tokens.$padding-padding-7;
+    height: var(--primitive-dimension-8);
   }
   .cw-chip--medium {
-    height: var(--primitive-dimension-8);
-    min-height: var(--primitive-dimension-8);
-    gap: tokens.$padding-padding-1;
+    height: var(--primitive-dimension-9);
   }
   .cw-chip--large {
-    height: var(--primitive-dimension-9);
-    min-height: var(--primitive-dimension-9);
-    gap: tokens.$padding-padding-2;
+    height: var(--primitive-dimension-10);
   }
   .cw-chip--x-large {
-    height: var(--primitive-dimension-10);
-    min-height: var(--primitive-dimension-10);
-    gap: tokens.$padding-padding-2;
+    height: var(--primitive-dimension-11);
   }
 
   // disabled