@weni/unnnic-system 3.25.6 → 3.26.0

package/src/components/Button/Button.vue

@@ -115,14 +115,14 @@ const iconScheme = computed((): SchemeColor => {
   }
 
   const typeToSchemeMap: Record<ButtonType, SchemeColor> = {
-    primary: 'fg-inverted',
+    primary: 'fg-on-primary',
     secondary: 'fg-emphasized',
     tertiary: 'fg-emphasized',
-    warning: 'fg-inverted',
-    attention: 'fg-inverted',
+    warning: 'fg-on-primary',
+    attention: 'fg-on-primary',
   };
 
-  return typeToSchemeMap[buttonType.value] || 'fg-inverted';
+  return typeToSchemeMap[buttonType.value] || 'fg-on-primary';
 });
 
 const isSizePropValid = computed(() => {
@@ -228,7 +228,7 @@ watch(
   &--primary,
   &--warning,
   &--attention {
-    color: $unnnic-color-fg-inverted;
+    color: $unnnic-color-fg-on-primary;
   }
 
   &--secondary,
@@ -237,15 +237,15 @@ watch(
   }
 
   &--primary {
-    background-color: $unnnic-color-bg-active;
+    background-color: $unnnic-color-bg-accent-strong;
 
     &:hover:enabled {
-      background-color: $unnnic-color-teal-700;
+      background-color: $unnnic-color-teal-11;
     }
 
     &:active:enabled,
     &.unnnic-button--pressed {
-      background-color: $unnnic-color-teal-800;
+      background-color: $unnnic-color-teal-12;
     }
   }
 
@@ -254,12 +254,12 @@ watch(
     box-shadow: inset 0 0 0 1px $unnnic-color-border-base;
 
     &:hover:enabled {
-      background-color: $unnnic-color-gray-50;
+      background-color: $unnnic-color-bg-base-soft;
     }
 
     &:active:enabled,
     &.unnnic-button--pressed {
-      background-color: $unnnic-color-gray-100;
+      background-color: $unnnic-color-bg-muted;
     }
 
     &:disabled {
@@ -271,39 +271,38 @@ watch(
     background-color: transparent;
 
     &:hover:enabled {
-      background-color: rgba($unnnic-color-gray-400, 0.1);
+      background-color: $unnnic-color-bg-base-soft;
     }
 
     &:active:enabled,
     &.unnnic-button--pressed {
-      background-color: rgba($unnnic-color-gray-400, 0.2);
+      background-color: $unnnic-color-bg-muted;
     }
   }
 
   &--warning {
     background-color: $unnnic-color-bg-red-strong;
-    color: $unnnic-color-fg-inverted;
 
     &:hover:enabled {
-      background-color: $unnnic-color-red-10;
+      background-color: $unnnic-color-red-11;
     }
 
     &:active:enabled,
     &.unnnic-button--pressed {
-      background-color: $unnnic-color-red-11;
+      background-color: $unnnic-color-red-12;
     }
   }
 
   &--attention {
-    background-color: $unnnic-color-yellow-500;
+    background-color: $unnnic-color-bg-yellow-strong;
 
     &:hover:enabled {
-      background-color: $unnnic-color-yellow-600;
+      background-color: $unnnic-color-yellow-11;
     }
 
     &:active:enabled,
     &.unnnic-button--pressed {
-      background-color: $unnnic-color-yellow-700;
+      background-color: $unnnic-color-yellow-12;
     }
   }
 

package/src/components/Card/CardCompany.vue

@@ -101,7 +101,7 @@ export default {
   }
 
   .name {
-    color: $unnnic-color-gray-12;
+    color: $unnnic-color-fg-emphasized;
 
     font-family: $unnnic-font-family-secondary;
     font-weight: $unnnic-font-weight-bold;

package/src/components/CardNumber/CardNumber.vue

@@ -54,7 +54,7 @@ export default {
   span {
     font-weight: $unnnic-font-weight-black;
     font-size: $unnnic-font-size-title-lg;
-    color: $unnnic-color-gray-12;
+    color: $unnnic-color-fg-emphasized;
     line-height: $unnnic-font-size-title-lg + $unnnic-line-height-md;
   }
 }

package/src/components/CardProject/CardProject.vue

@@ -302,13 +302,13 @@ export default {
     }
 
     &--ACTIVE {
-      background-color: $unnnic-color-green-2;
-      color: $unnnic-color-green-11;
+      background-color: $unnnic-color-bg-green-plain;
+      color: $unnnic-color-fg-success;
     }
 
     &--IN_TEST {
-      background-color: $unnnic-color-orange-2;
-      color: $unnnic-color-orange-10;
+      background-color: $unnnic-color-bg-orange-plain;
+      color: $unnnic-color-fg-warning;
     }
 
     &--INACTIVE {

package/src/components/Carousel/TagCarousel.vue

@@ -7,7 +7,7 @@
         <UnnnicIcon
           icon="arrow-left-1-1"
           size="sm"
-          :scheme="hasPrev ? 'gray-12' : 'fg-muted'"
+          :scheme="hasPrev ? 'fg-emphasized' : 'fg-muted'"
           clickable
           @click="previous()"
         />
@@ -49,7 +49,7 @@
         <UnnnicIcon
           icon="arrow-right-1-1"
           size="sm"
-          :scheme="hasNext ? 'gray-12' : 'fg-muted'"
+          :scheme="hasNext ? 'fg-emphasized' : 'fg-muted'"
           clickable
           @click="next()"
         />

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -176,13 +176,13 @@ export default {
       font-weight: $unnnic-font-weight-black;
 
       .number {
-        color: $unnnic-color-gray-12;
+        color: $unnnic-color-fg-emphasized;
         font-size: $unnnic-font-size-h3;
         line-height: $unnnic-font-size-h3 + $unnnic-line-height-md;
       }
 
       .symbol {
-        color: $unnnic-color-bg-muted;
+        color: $unnnic-color-fg-muted;
         font-size: $unnnic-font-size-h4;
         line-height: $unnnic-font-size-h4 + $unnnic-line-height-md;
       }

package/src/components/ChatsContact/ChatsContact.vue

@@ -22,12 +22,12 @@
     <slot name="avatar">
       <UserAvatar
         v-if="discussionGoal"
-        scheme="purple-200"
+        scheme="bg-purple-plain"
       >
         <template #content>
           <UnnnicIcon
             icon="communication"
-            scheme="gray-900"
+            scheme="fg-base"
           />
         </template>
       </UserAvatar>
@@ -36,6 +36,8 @@
         :username="title"
         :photoUrl="userPhoto"
         :active="isHovered || selected"
+        scheme="bg-muted"
+        textColor="fg-emphasized"
       />
     </slot>
     <div class="chats-contact__infos">
@@ -67,6 +69,13 @@
         </p>
         <template v-else-if="lastMessageMedia.isMedia">
           <section class="chats-contact__infos__media">
+            <p
+              v-if="lastMessage.isFromUser"
+              class="chats-contact__infos__media__sender-prefix"
+              data-testid="media-sender-prefix"
+            >
+              {{ i18n('you_message_prefix') }}
+            </p>
             <UnnnicIcon
               :icon="lastMessageMedia.mediaIcon"
               scheme="fg-base"
@@ -135,6 +144,18 @@
             :scheme="schemePin"
           />
         </button>
+        <UnnnicTooltip
+          v-else-if="newMessageIndicator"
+          class="chats-contact__infos__new-message-indicator-tooltip"
+          :enabled="!!newMessageIndicatorTooltip"
+          :text="newMessageIndicatorTooltip"
+          side="top"
+        >
+          <span
+            class="chats-contact__infos__new-message-indicator"
+            data-testid="new-message-indicator"
+          />
+        </UnnnicTooltip>
         <p
           v-else-if="(unreadMessages && !selected) || forceShowUnreadMessages"
           class="chats-contact__infos__unread-messages"
@@ -249,7 +270,7 @@ export default {
     },
     schemePin: {
       type: String,
-      default: ' fg-base',
+      default: 'fg-emphasized',
     },
     pendingResponse: {
       type: Boolean,
@@ -259,6 +280,14 @@ export default {
       type: String,
       default: '',
     },
+    newMessageIndicator: {
+      type: Boolean,
+      default: false,
+    },
+    newMessageIndicatorTooltip: {
+      type: String,
+      default: '',
+    },
   },
 
   emits: ['click', 'clickPin'],
@@ -309,12 +338,18 @@ export default {
           en: 'Video',
           es: 'Video',
         },
+        you_message_prefix: {
+          'pt-br': 'Você:',
+          en: 'You:',
+          es: 'Tú:',
+        },
       },
     };
   },
 
   computed: {
     messageInfoAlign() {
+      if (this.newMessageIndicator) return 'space-between';
       return this.unreadMessages && this.selected ? 'center' : 'flex-start';
     },
     messageInfoMarginTop() {
@@ -539,19 +574,23 @@ export default {
     &__project-tag {
       display: block;
       flex-shrink: 1;
-      border: 1px solid $unnnic-color-border-emphasized;
+      background: $unnnic-color-bg-muted;
 
       font: $unnnic-font-caption-1;
       color: $unnnic-color-fg-emphasized;
 
-      border-radius: $unnnic-radius-4;
-      padding: 1px $unnnic-space-2;
+      border-radius: $unnnic-radius-full;
+      padding: $unnnic-space-05 $unnnic-space-3;
     }
 
     &__media {
       display: flex;
       align-items: center;
       gap: $unnnic-spacing-nano;
+
+      &__sender-prefix {
+        color: $unnnic-color-fg-base;
+      }
     }
 
     &__title,
@@ -568,7 +607,7 @@ export default {
     &__additional-information {
       width: 100%; // important to ellipsis work
 
-      color: $unnnic-color-fg-muted;
+      color: $unnnic-color-fg-base;
     }
 
     &__pending-response {
@@ -624,7 +663,7 @@ export default {
       line-height: $unnnic-font-size-body-lg;
 
       &--active {
-        color: $unnnic-color-weni-700;
+        color: $unnnic-color-fg-info;
         font-weight: $unnnic-font-weight-bold;
       }
     }
@@ -635,7 +674,7 @@ export default {
       align-items: center;
 
       border-radius: 50%;
-      background: $unnnic-color-weni-50;
+      background: $unnnic-color-bg-info;
 
       width: 1.25rem;
       min-width: 1.25rem;
@@ -644,7 +683,28 @@ export default {
       font-size: $unnnic-font-size-body-md;
       font-weight: $unnnic-font-weight-bold;
       line-height: $unnnic-line-height-small;
-      color: $unnnic-color-weni-700;
+      color: $unnnic-color-fg-info;
+    }
+
+    &__new-message-indicator {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: $unnnic-space-5;
+      min-width: $unnnic-space-5;
+      height: $unnnic-space-5;
+
+      &::before {
+        content: '';
+        display: block;
+
+        width: $unnnic-space-2;
+        height: $unnnic-space-2;
+
+        border-radius: 50%;
+        background-color: $unnnic-color-bg-blue-strong;
+      }
     }
 
     .ellipsis {

package/src/components/ChatsContact/__tests__/ChatsContact.spec.js

@@ -259,6 +259,125 @@ describe('UnnnicChatsContact', () => {
     });
   });
 
+  describe('Media "You:" prefix', () => {
+    const imageMedia = {
+      media: [
+        {
+          content_type: 'image/jpeg',
+          message: 'a997421d-6238-4bef-912d-e689c1c0db3f',
+          url: 'https://example.com/photo.jpg',
+          created_on: '2025-04-15T14:58:56.163027-03:00',
+        },
+      ],
+    };
+
+    it('should not render the prefix on a media message when isFromUser is falsy', async () => {
+      await wrapper.setProps({ lastMessage: imageMedia });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(false);
+    });
+
+    it('should render the EN "You:" prefix when isFromUser is true', async () => {
+      await wrapper.setProps({
+        lastMessage: { ...imageMedia, isFromUser: true },
+        locale: 'en',
+      });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(true);
+      expect(prefix.text()).toBe('You:');
+    });
+
+    it('should render the PT-BR "Você:" prefix when isFromUser is true', async () => {
+      await wrapper.setProps({
+        lastMessage: { ...imageMedia, isFromUser: true },
+        locale: 'pt-br',
+      });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(true);
+      expect(prefix.text()).toBe('Você:');
+    });
+
+    it('should render the ES "Tú:" prefix when isFromUser is true', async () => {
+      await wrapper.setProps({
+        lastMessage: { ...imageMedia, isFromUser: true },
+        locale: 'es',
+      });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(true);
+      expect(prefix.text()).toBe('Tú:');
+    });
+
+    it('should not render the prefix for non-media messages even when isFromUser is true', async () => {
+      await wrapper.setProps({
+        lastMessage: { text: 'Hello there', isFromUser: true },
+      });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(false);
+    });
+  });
+
+  describe('New message indicator', () => {
+    it('should not render the dot by default', () => {
+      const indicator = wrapper.find('[data-testid="new-message-indicator"]');
+      expect(indicator.exists()).toBe(false);
+    });
+
+    it('should render the dot when newMessageIndicator is true', async () => {
+      await wrapper.setProps({ newMessageIndicator: true });
+
+      const indicator = wrapper.find('[data-testid="new-message-indicator"]');
+      expect(indicator.exists()).toBe(true);
+    });
+
+    it('should hide the unread-count circle when newMessageIndicator and unreadMessages are both set', async () => {
+      await wrapper.setProps({
+        newMessageIndicator: true,
+        unreadMessages: 5,
+      });
+
+      const indicator = wrapper.find('[data-testid="new-message-indicator"]');
+      const unreadCount = wrapper.find(
+        '.chats-contact__infos__unread-messages',
+      );
+
+      expect(indicator.exists()).toBe(true);
+      expect(unreadCount.exists()).toBe(false);
+    });
+
+    it('should keep tooltip disabled when newMessageIndicatorTooltip is empty', async () => {
+      await wrapper.setProps({
+        newMessageIndicator: true,
+        newMessageIndicatorTooltip: '',
+      });
+
+      const tooltip = wrapper.findComponent({ name: 'UnnnicTooltip' });
+
+      expect(tooltip.exists()).toBe(true);
+      expect(tooltip.props('enabled')).toBe(false);
+      expect(tooltip.props('text')).toBe('');
+    });
+
+    it('should enable tooltip with the provided text when newMessageIndicatorTooltip is set', async () => {
+      const tooltipText = 'New chats received';
+
+      await wrapper.setProps({
+        newMessageIndicator: true,
+        newMessageIndicatorTooltip: tooltipText,
+      });
+
+      const tooltip = wrapper.findComponent({ name: 'UnnnicTooltip' });
+
+      expect(tooltip.exists()).toBe(true);
+      expect(tooltip.props('enabled')).toBe(true);
+      expect(tooltip.props('text')).toBe(tooltipText);
+    });
+  });
+
   describe('Pending response', () => {
     it('should not render the pending response icon by default', () => {
       const icon = wrapper.find('[data-testid="pending-response-icon"]');

package/src/components/ChatsContact/__tests__/__snapshots__/ChatsContact.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`UnnnicChatsContact > should match snapshot 1`] = `
 "<div data-v-8ce6efd5="" class="chats-contact" tabindex="0" style="position: relative; overflow: hidden;">
-  <section data-v-c735998e="" data-v-8ce6efd5="" class="user-avatar user-avatar--xl user-avatar--gray-200"><span data-v-c735998e="" class="text-gray-900">C</span></section>
+  <section data-v-c735998e="" data-v-8ce6efd5="" class="user-avatar user-avatar--xl user-avatar--bg-muted"><span data-v-c735998e="" class="text-fg-emphasized">C</span></section>
   <div data-v-8ce6efd5="" class="chats-contact__infos">
     <section data-v-8ce6efd5="" class="chats-contact__infos__title-container">
       <h1 data-v-8ce6efd5="" class="chats-contact__infos__title ellipsis" title="Contact Name">Contact Name</h1>

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -321,7 +321,7 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
 
   background-color: $unnnic-color-bg-base;
 
-  font-family: $unnnic-font-family-secondary;
+  font: $unnnic-font-body;
 
   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
 
@@ -342,10 +342,10 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
   }
 
   &.sent {
-    background-color: #cff8f4;
+    background-color: $unnnic-color-bg-accent-plain;
 
     &.automatic {
-      background-color: $unnnic-color-blue-100;
+      background-color: $unnnic-color-bg-info;
     }
   }
 
@@ -430,7 +430,7 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
     padding: $unnnic-spacing-nano 0;
 
     font-size: $unnnic-font-size-body-gt;
-    color: $unnnic-color-fg-base;
+    color: $unnnic-color-fg-emphasized;
     line-height: $defaultLineHeight;
     word-break: break-word;
   }
@@ -450,9 +450,8 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
   }
 
   &__time {
-    font-size: $unnnic-font-size-body-md;
-    line-height: $defaultLineHeight;
-    color: $unnnic-color-fg-muted;
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
     margin: 0;
     padding: 0;
 

package/src/components/ChatsMessage/ChatsMessageStatusBackdrop.vue

@@ -64,7 +64,7 @@ export default {
   padding: $unnnic-spacing-ant;
 
   box-sizing: content-box;
-  background-color: rgba($unnnic-color-fg-emphasized, 0.3);
+  background-color: rgba($unnnic-color-gray-13, 0.3);
 
   display: flex;
 

package/src/components/ChatsMessage/ReplyMessage.vue

@@ -196,10 +196,10 @@ onUpdated(() => {
     background: rgba(8, 103, 102, 0.1);
   }
   &--you {
-    border-left: 2px solid $unnnic-color-weni-600;
+    border-left: 2px solid $unnnic-color-bg-teal-strong;
   }
   &--contact {
-    border-left: 2px solid $unnnic-color-purple-10;
+    border-left: 2px solid $unnnic-color-bg-purple-strong;
   }
   &__message-container {
     display: flex;
@@ -212,10 +212,10 @@ onUpdated(() => {
     font-weight: $unnnic-font-weight-bold;
     line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
     &--you {
-      color: $unnnic-color-weni-600;
+      color: $unnnic-color-bg-teal-strong;
     }
     &--contact {
-      color: $unnnic-color-purple-10;
+      color: $unnnic-color-bg-purple-strong;
     }
   }
   &__content {

package/src/components/ChatsNavbar/ChatsNavbar.vue

@@ -21,7 +21,7 @@
           <UnnnicIcon
             :icon="getLinkIcon(link)"
             size="lg"
-            scheme="fg-inverted"
+            scheme="fg-on-primary"
             :filled="isSelected(link)"
           />
         </a>

package/src/components/ChatsUserAvatar/ChatsUserAvatar.vue

@@ -16,13 +16,13 @@
         v-if="username === 'Agent'"
         icon="single-neutral-actions-1"
         size="sm"
-        :scheme="disabled ? 'fg-inverted' : ''"
+        :scheme="disabled ? 'fg-on-primary' : ''"
       />
       <UnnnicIcon
         v-else-if="username === 'Bot'"
         icon="science-fiction-robot-2"
         size="sm"
-        :scheme="disabled ? 'fg-inverted' : ''"
+        :scheme="disabled ? 'fg-on-primary' : ''"
       />
       <img
         v-else-if="!!photoUrl"
@@ -119,7 +119,7 @@ $avatar-sizes:
 
   &.disabled {
     background: $unnnic-color-gray-7;
-    color: $unnnic-color-fg-inverted;
+    color: $unnnic-color-fg-on-primary;
   }
 
   &.clickable {