@weni/unnnic-system 3.25.6 → 3.26.0

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;
       }
     }
   }

package/src/components/Input/Input.scss

@@ -1,7 +1,7 @@
 @use '@/assets/scss/unnnic' as *;
 
 @mixin input-base {
-  background: $unnnic-color-white;
+  background: $unnnic-color-bg-base;
   border: 1px solid $unnnic-color-border-base;
   outline: none;
   border-radius: $unnnic-radius-2;
@@ -13,7 +13,7 @@
 
   &:focus:not(.use-focus-prop),
   &.focus {
-    border-color: $unnnic-color-border-active;
+    border-color: $unnnic-color-border-accent-strong;
   }
 
   &::placeholder {

package/src/components/Input/TextInput.vue

@@ -33,7 +33,7 @@
       <UnnnicIcon
         v-if="showClear"
         class="icon-clear"
-        scheme="gray-7"
+        scheme="fg-base"
         icon="close"
         size="ant"
         clickable

package/src/components/SelectTime/index.vue

@@ -207,7 +207,7 @@ export default {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-gray-7;
+      background: $unnnic-color-border-emphasized;
       border-radius: $unnnic-border-radius-pill;
     }
 

package/src/components/Sidebar/index.vue

@@ -113,7 +113,7 @@ const handleNavigate = ({ item, child }) => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-gray-7;
+      background: $unnnic-color-border-emphasized;
       border-radius: $unnnic-border-radius-pill;
     }
 

package/src/components/SkeletonLoading/skeletonTheme.vue

@@ -12,11 +12,9 @@
 
 <script>
 import { ref, provide } from 'vue';
-import colorsTokens from '@/assets/tokens/colors.json';
 
-const { gray } = colorsTokens.color;
-export const DEFAULT_BACKGROUND = gray[3].value;
-export const DEFAULT_HIGHLIGHT = gray[1].value;
+export const DEFAULT_BACKGROUND = 'var(--unnnic-color-bg-muted)';
+export const DEFAULT_HIGHLIGHT = 'var(--unnnic-color-bg-base-soft)';
 export const SkeletonStyle = {
   '--skeleton-bg': DEFAULT_BACKGROUND,
   '--skeleton-highlight': DEFAULT_HIGHLIGHT,

package/src/components/Table/Table.vue

@@ -65,7 +65,7 @@ $scroll-size: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: $unnnic-color-gray-7;
+    background: $unnnic-color-border-emphasized;
     border-radius: $unnnic-border-radius-pill;
   }
 

package/src/components/Tag/DefaultTag.vue

@@ -17,8 +17,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { color as colors } from '@/assets/tokens/colors.json';
-
 import UnnnicIcon from '../Icon.vue';
 
 import type { DefaultTagProps } from './types';
@@ -31,14 +29,14 @@ const props = withDefaults(defineProps<DefaultTagProps>(), {
 });
 
 const COLOR_MAPPING = [
-  { keywords: ['green'], color: colors.green['2'].value },
-  { keywords: ['blue'], color: colors.blue['2'].value },
-  { keywords: ['purple'], color: colors.purple['3'].value },
-  { keywords: ['red', 'pink'], color: colors.red['3'].value },
-  { keywords: ['orange'], color: colors.orange['3'].value },
-  { keywords: ['yellow'], color: colors.yellow['2'].value },
-  { keywords: ['gray'], color: colors.gray['2'].value },
-  { keywords: ['teal', 'weni'], color: colors.teal['2'].value },
+  { keywords: ['green'], color: 'var(--unnnic-color-bg-green-plain)' },
+  { keywords: ['blue'], color: 'var(--unnnic-color-bg-blue-plain)' },
+  { keywords: ['purple'], color: 'var(--unnnic-color-bg-purple-plain)' },
+  { keywords: ['red', 'pink'], color: 'var(--unnnic-color-bg-red-plain)' },
+  { keywords: ['orange'], color: 'var(--unnnic-color-bg-orange-plain)' },
+  { keywords: ['yellow'], color: 'var(--unnnic-color-bg-yellow-plain)' },
+  { keywords: ['gray'], color: 'var(--unnnic-color-bg-muted)' },
+  { keywords: ['teal', 'weni'], color: 'var(--unnnic-color-bg-teal-plain)' },
 ];
 
 const color = computed(() => {
@@ -48,7 +46,7 @@ const color = computed(() => {
     keywords.some((keyword) => scheme.includes(keyword)),
   );
 
-  return match?.color ?? colors.gray['2'].value;
+  return match?.color ?? 'var(--unnnic-color-bg-muted)';
 });
 </script>
 

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -87,7 +87,7 @@
         <UnnnicIcon
           class="unnnic-template-preview__buttons__button__icon"
           :icon="getButtonIcon(button.type)"
-          scheme="aux-blue-500"
+          scheme="fg-info"
           size="ant"
         />
         <p class="unnnic-template-preview__buttons__button__text">

package/src/components/Toast/Toast.vue

@@ -99,10 +99,10 @@ let timeoutId: number | null = null;
 
 const typeConfig = computed(() => {
   const configMap = {
-    informational: { icon: 'info', scheme: 'blue-500' },
-    attention: { icon: 'error', scheme: 'yellow-500' },
-    success: { icon: 'check_circle', scheme: 'green-500' },
-    error: { icon: 'cancel', scheme: 'red-500' },
+    informational: { icon: 'info', scheme: 'fg-info' },
+    attention: { icon: 'error', scheme: 'fg-warning' },
+    success: { icon: 'check_circle', scheme: 'fg-success' },
+    error: { icon: 'cancel', scheme: 'fg-critical' },
   };
 
   return configMap[props.type || 'informational'] as {

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

@@ -53,7 +53,7 @@ describe('UnnnicToast', () => {
 
       expect(typeIcon().exists()).toBe(true);
       expect(typeIcon().props('icon')).toBe('info');
-      expect(typeIcon().props('scheme')).toBe('blue-500');
+      expect(typeIcon().props('scheme')).toBe('fg-info');
       expect(typeIcon().props('size')).toBe('ant');
 
       expect(title().exists()).toBe(true);
@@ -120,10 +120,10 @@ describe('UnnnicToast', () => {
 
     test('displays correct scheme color for each type', async () => {
       const typeConfigs = [
-        { type: 'informational', expectedScheme: 'blue-500' },
-        { type: 'attention', expectedScheme: 'yellow-500' },
-        { type: 'success', expectedScheme: 'green-500' },
-        { type: 'error', expectedScheme: 'red-500' },
+        { type: 'informational', expectedScheme: 'fg-info' },
+        { type: 'attention', expectedScheme: 'fg-warning' },
+        { type: 'success', expectedScheme: 'fg-success' },
+        { type: 'error', expectedScheme: 'fg-critical' },
       ];
 
       for (const { type, expectedScheme } of typeConfigs) {

package/src/components/ToolTip/ToolTip.vue

@@ -44,7 +44,7 @@
         size="sm"
         clickable
         filled
-        scheme="white"
+        scheme="fg-inverted"
         @click="$emit('click:close')"
       />
     </TooltipContent>

package/src/components/Tour/TourMask.vue

@@ -129,7 +129,7 @@ export default {
   }
 
   &__overlay {
-    fill: rgba($unnnic-color-gray-12, $unnnic-opacity-level-overlay);
+    fill: rgba($unnnic-color-bg-inverted, $unnnic-opacity-level-overlay);
   }
 }
 </style>

package/src/components/ui/dialog/DialogContent.vue

@@ -128,7 +128,7 @@ const ConditionalWrapper: Component = (_, { slots }) => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-gray-7;
+      background: $unnnic-color-border-emphasized;
       border-radius: $unnnic-border-radius-pill;
     }
 

package/src/components/ui/popover/PopoverContent.vue

@@ -119,7 +119,7 @@ $popover-space: $unnnic-space-4;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: $unnnic-color-gray-7;
+    background: $unnnic-color-border-emphasized;
     border-radius: $unnnic-border-radius-pill;
   }
 

package/src/components/ui/popover/PopoverOption.vue

@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<PopoverOptionProps>(), {
 
 const schemeColor = computed(() => {
   if (props.active) {
-    return 'fg-inverted';
+    return 'fg-on-primary';
   }
   if (props.disabled) {
     return 'fg-muted';
@@ -113,7 +113,7 @@ const schemeColor = computed(() => {
     }
 
     &--active {
-      color: $unnnic-color-fg-inverted;
+      color: $unnnic-color-fg-on-primary;
     }
   }
 }

package/src/components/ui/tooltip/TooltipContent.vue

@@ -58,8 +58,8 @@ const portalTarget = useTeleportTarget();
 
 .tooltip__content {
   display: flex;
-  background-color: $unnnic-color-gray-900;
-  color: $unnnic-color-white;
+  background-color: $unnnic-color-bg-inverted;
+  color: $unnnic-color-fg-inverted;
   border-radius: $unnnic-radius-1;
   padding: $unnnic-space-2;
   box-shadow: $unnnic-shadow-1;
@@ -76,8 +76,9 @@ const portalTarget = useTeleportTarget();
 .tooltip__arrow {
   width: 10px;
   height: 10px;
-  background-color: $unnnic-color-gray-900;
-  fill: $unnnic-color-gray-900;
+  background-color: $unnnic-color-bg-inverted;
+  fill: $unnnic-color-bg-inverted;
+  border-radius: calc($unnnic-radius-1 / 2);
   transform: rotate(45deg) translate(-50%, -50%);
 }
 </style>

package/src/composables/useTheme.ts

@@ -0,0 +1,67 @@
+import { computed, ref, watch, type Ref } from 'vue';
+import { usePreferredColorScheme } from '@vueuse/core';
+
+export type Theme = 'light' | 'dark';
+export type ThemePreference = Theme | 'system';
+
+const STORAGE_KEY = 'unnnic-theme';
+const DARK_CLASS = 'dark';
+
+function readStoredPreference(): ThemePreference {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+  } catch {
+    /* localStorage may be unavailable (SSR / iframe sandbox) */
+  }
+  return 'system';
+}
+
+function persistPreference(preference: ThemePreference): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, preference);
+  } catch {
+    /* silent fail */
+  }
+}
+
+function applyTheme(theme: Theme): void {
+  document.documentElement.classList.toggle(DARK_CLASS, theme === 'dark');
+}
+
+const preference: Ref<ThemePreference> = ref(readStoredPreference());
+
+export function useTheme() {
+  const osScheme = usePreferredColorScheme();
+
+  const resolvedTheme = computed<Theme>(() => {
+    if (preference.value !== 'system') return preference.value;
+    return osScheme.value === 'dark' ? 'dark' : 'light';
+  });
+
+  watch(
+    resolvedTheme,
+    (theme) => {
+      applyTheme(theme);
+    },
+    { immediate: true },
+  );
+
+  function setTheme(value: ThemePreference): void {
+    preference.value = value;
+    persistPreference(value);
+  }
+
+  function toggleTheme(): void {
+    setTheme(resolvedTheme.value === 'dark' ? 'light' : 'dark');
+  }
+
+  return {
+    preference,
+    resolvedTheme,
+    setTheme,
+    toggleTheme,
+  };
+}

package/src/index.ts

@@ -25,3 +25,5 @@ const Unnnic: UnnnicPlugin = {
 
 export default Unnnic;
 export * from '@/components';
+export { useTheme } from '@/composables/useTheme';
+export type { Theme, ThemePreference } from '@/composables/useTheme';

package/src/stories/ChatsContact.stories.js

@@ -220,3 +220,56 @@ export const MediaLastMessage = {
   `,
   }),
 };
+
+const lastMessageMediaFromUser = Object.fromEntries(
+  Object.entries(lastMessageMedia).map(([mediaType, message]) => [
+    mediaType,
+    { ...message, isFromUser: true },
+  ]),
+);
+
+export const MediaLastMessageFromUser = {
+  args: {
+    ...defaultArgs,
+  },
+  render: (args) => ({
+    setup() {
+      return { args, lastMessageMediaFromUser };
+    },
+    components: { unnnicChatsContact },
+    template: `
+    <div style="display: grid;">
+      <unnnic-chats-contact v-for="mediaType in ['geo', 'audio', 'image', 'video', 'document']" v-bind="args" :lastMessage="lastMessageMediaFromUser[mediaType]"/>
+    </div>
+  `,
+  }),
+};
+
+export const NewMessageIndicator = {
+  args: {
+    ...defaultArgs,
+    title: 'Aline',
+    projectName: 'Sector name',
+    lastMessage: {
+      text: 'I’d like to know if powdered dishwasher detergent is available',
+    },
+    lastInteractionTime: new Date().toISOString(),
+    unreadMessages: 1,
+    newMessageIndicator: true,
+  },
+};
+
+export const NewMessageIndicatorWithTooltip = {
+  args: {
+    ...defaultArgs,
+    title: 'Aline',
+    projectName: 'Sector name',
+    lastMessage: {
+      text: 'I’d like to know if powdered dishwasher detergent is available',
+    },
+    lastInteractionTime: new Date().toISOString(),
+    unreadMessages: 1,
+    newMessageIndicator: true,
+    newMessageIndicatorTooltip: 'New chats received',
+  },
+};

package/src/stories/Colors.stories.js

@@ -2,7 +2,12 @@
  * Colors stories. use tags: ['!dev']
  * so they only appear in Colors.mdx via <Story of={...} />, not in the sidebar.
  */
-import colors from '@/assets/tokens/colors.json';
+import primitives from '@/assets/tokens/colors-primitives.json';
+import semantic from '@/assets/tokens/colors-semantic.json';
+
+const colors = {
+  color: { ...primitives.color, ...semantic.color },
+};
 
 function resolveReference(ref, root) {
   const path = ref.replace(/^\{|\}$/g, '').split('.');