@weni/unnnic-system 3.25.7 → 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">
@@ -268,7 +270,7 @@ export default {
     },
     schemePin: {
       type: String,
-      default: ' fg-base',
+      default: 'fg-emphasized',
     },
     pendingResponse: {
       type: Boolean,
@@ -572,13 +574,13 @@ 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 {
@@ -605,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 {
@@ -661,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;
       }
     }
@@ -672,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;
@@ -681,7 +683,7 @@ 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 {

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 {

package/src/components/Chip/Chip.vue

@@ -11,7 +11,7 @@
     ]"
     @click="onClick"
   >
-    <p :class="['chip__text', textColorClass]">{{ text }}</p>
+    <p class="chip__text">{{ text }}</p>
     <p
       v-if="count"
       :class="['chip__count', countColorClass]"
@@ -22,7 +22,7 @@
     <UnnnicIcon
       v-if="type === 'multiple'"
       :icon="isSelected ? 'close' : 'add'"
-      :scheme="isSelected ? 'teal-600' : 'feedback-grey'"
+      scheme="fg-emphasized"
       class="chip__icon"
       size="sm"
     />
@@ -48,13 +48,6 @@ const shouldShowBorder = computed(() => {
   return !props.isSelected;
 });
 
-const textColorClass = computed(() => {
-  if (props.isSelected) {
-    return 'chip__text--is-selected';
-  }
-  return '';
-});
-
 const countColorClass = computed(() => {
   if (props.isSelected) {
     return 'chip__count--is-selected';
@@ -78,18 +71,25 @@ const chipClass = computed(() => {
   align-items: center;
   gap: $unnnic-space-2;
   flex-shrink: 0;
-  border-radius: 600px;
+  border-radius: $unnnic-radius-full;
   background-color: $unnnic-color-bg-base;
-  border: 1px solid transparent;
+  border: 1px solid $unnnic-color-border-base;
+
+  cursor: default;
+
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); // Same as UnnnicButton
 
   &:hover {
     background-color: $unnnic-color-bg-soft;
   }
 
   &--is-selected {
-    background-color: $unnnic-color-teal-100;
+    background-color: $unnnic-color-bg-accent-plain;
+    border-color: transparent;
+
     &:hover {
-      background-color: $unnnic-color-teal-200;
+      background-color: $unnnic-color-bg-accent-plain;
+      border-color: $unnnic-color-border-accent-plain;
     }
   }
 
@@ -102,12 +102,8 @@ const chipClass = computed(() => {
   }
 
   &__text {
-    color: $unnnic-color-fg-base;
-    font: $unnnic-font-caption-1;
-
-    &--is-selected {
-      color: $unnnic-color-fg-active;
-    }
+    color: $unnnic-color-fg-emphasized;
+    @include unnnic-font-caption-1;
   }
 
   &__count {
@@ -116,15 +112,13 @@ const chipClass = computed(() => {
     justify-content: center;
     align-items: center;
     gap: 10px;
-    border-radius: 600px;
-    background: $unnnic-color-bg-soft;
-    color: $unnnic-color-fg-base;
-    font: $unnnic-font-caption-1;
-    font-weight: $unnnic-font-weight-medium;
+    border-radius: $unnnic-radius-full;
+    background: $unnnic-color-bg-muted;
+    color: $unnnic-color-fg-emphasized;
+    @include unnnic-font-caption-2;
 
     &--is-selected {
-      color: $unnnic-color-fg-active;
-      background: $unnnic-color-white;
+      background: $unnnic-color-bg-teal-plain;
     }
   }
 }

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

@@ -42,7 +42,7 @@ describe('Chip', () => {
       expect(wrapper.classes()).not.toContain('chip--border');
 
       const textElement = wrapper.find('.chip__text');
-      expect(textElement.classes()).toContain('chip__text--is-selected');
+      expect(textElement.exists()).toBe(true);
     });
   });
 
@@ -82,14 +82,14 @@ describe('Chip', () => {
       let icon = wrapper.findComponent({ name: 'UnnnicIcon' });
       expect(icon.exists()).toBe(true);
       expect(icon.props('icon')).toBe('add');
-      expect(icon.props('scheme')).toBe('feedback-grey');
+      expect(icon.props('scheme')).toBe('fg-emphasized');
       expect(icon.props('size')).toBe('sm');
 
       await wrapper.setProps({ isSelected: true });
 
       icon = wrapper.findComponent({ name: 'UnnnicIcon' });
       expect(icon.props('icon')).toBe('close');
-      expect(icon.props('scheme')).toBe('teal-600');
+      expect(icon.props('scheme')).toBe('fg-emphasized');
     });
   });
 

package/src/components/DataTable/index.vue

@@ -398,7 +398,7 @@ $tableBorder: 1px solid $unnnic-color-border-base;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: $unnnic-color-gray-7;
+    background: $unnnic-color-border-emphasized;
     border-radius: $unnnic-border-radius-pill;
   }
 
@@ -458,7 +458,7 @@ $tableBorder: 1px solid $unnnic-color-border-base;
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-gray-7;
+      background: $unnnic-color-border-emphasized;
       border-radius: $unnnic-border-radius-pill;
     }
 

package/src/components/DatePicker/DatePicker.vue

@@ -1068,12 +1068,12 @@ onMounted(() => {
       .selected {
         font-weight: $unnnic-font-weight-black;
         background-color: $unnnic-color-bg-base-soft;
-        color: $unnnic-color-teal-8;
+        color: $unnnic-color-fg-accent;
         border-radius: 0;
 
         &.highlighted {
-          background-color: $unnnic-color-teal-8;
-          color: $unnnic-color-fg-inverted;
+          background-color: $unnnic-color-bg-accent-strong;
+          color: $unnnic-color-fg-on-primary;
 
           &.left {
             border-top-left-radius: $unnnic-border-radius-sm;
@@ -1128,7 +1128,7 @@ onMounted(() => {
 
         &.selected {
           font-weight: $unnnic-font-weight-bold;
-          color: $unnnic-color-teal-8;
+          color: $unnnic-color-fg-accent;
         }
       }
     }

package/src/components/EmojiPicker/EmojiPicker.vue

@@ -62,7 +62,7 @@ const emit = defineEmits<{
 const emojiPickerRef = ref<HTMLElement>();
 const emojiIndex = computed(() => new EmojiIndex(data));
 
-const accentColor = '#00A49F'; // $unnnic-color-weni-600
+const accentColor = 'var(--unnnic-color-fg-accent)';
 
 const currentLocale = computed(() => props.locale || 'pt-br');
 
@@ -125,6 +125,7 @@ const onEmojiSelect = (emoji: Emoji) => {
 
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
+@use '@/components/Input/Input.scss' as *;
 
 .emoji-picker {
   position: absolute;
@@ -146,6 +147,7 @@ const onEmojiSelect = (emoji: Emoji) => {
     border-radius: $unnnic-radius-4;
     font-family: $unnnic-font-family;
     border: 1px solid $unnnic-color-border-base;
+    background-color: $unnnic-color-bg-base;
     box-shadow: $unnnic-shadow-1;
     cursor: default;
     color: $unnnic-color-fg-emphasized;
@@ -153,15 +155,33 @@ const onEmojiSelect = (emoji: Emoji) => {
 
   :deep(.emoji-mart-emoji) {
     cursor: pointer;
+
+    &::before {
+      background-color: $unnnic-color-bg-base-soft;
+    }
   }
 
-  :deep(.emoji-mart-category .emoji-mart-emoji span) {
-    cursor: pointer;
+  :deep(.emoji-mart-search) {
+    margin: $unnnic-space-2 0;
+
+    input {
+      @include input-base;
+    }
+  }
+
+  :deep(.emoji-mart-category) {
+    .emoji-mart-emoji span {
+      cursor: pointer;
+    }
+
+    .emoji-mart-category-label {
+      background-color: transparent;
+    }
   }
 
   :deep(.emoji-mart-anchor) {
     cursor: pointer;
-    color: #858585;
+    color: $unnnic-color-fg-base;
   }
 
   :deep(.emoji-mart-anchor:hover),
@@ -182,6 +202,22 @@ const onEmojiSelect = (emoji: Emoji) => {
   :deep(.emoji-type-image.emoji-set-twitter) {
     background-image: none !important;
   }
+
+  :deep(.emoji-mart-scroll) {
+    &::-webkit-scrollbar {
+      width: $unnnic-space-2;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $unnnic-color-border-emphasized;
+      border-radius: $unnnic-radius-full;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $unnnic-color-border-muted;
+      border-radius: $unnnic-radius-full;
+    }
+  }
 }
 
 @keyframes slideInUp {

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

@@ -102,7 +102,7 @@ describe('UnnnicEmojiPicker', () => {
     expect(picker.props('navPosition')).toBe('bottom');
     expect(picker.props('noResultsEmoji')).toBe('cry');
     expect(picker.props('maxFrequentRows')).toBe(3);
-    expect(picker.props('color')).toBe('#00A49F');
+    expect(picker.props('color')).toBe('var(--unnnic-color-fg-accent)');
     expect(picker.props('i18n')).toBeDefined();
   });
 

package/src/components/FormElement/FormElement.vue

@@ -106,7 +106,7 @@ withDefaults(defineProps<FormElementProps>(), {
         bottom: $unnnic-space-1 - 1px;
         width: 100%;
         height: 1px;
-        background-color: $unnnic-color-white;
+        background-color: $unnnic-color-bg-base;
       }
     }
   }