@uzum-tech/ui 1.8.0 → 1.8.2

package/es/chat/src/ChatMessages.js

@@ -1,5 +1,5 @@
-import { h, defineComponent, computed, Fragment } from 'vue';
-import { MessageStatus } from './interface';
+import { h, defineComponent, computed, inject, Fragment } from 'vue';
+import { MessageStatus, ChatMessageType, ChatMarkType, chatInjectionKey } from './interface';
 import ChatAttachmentComponent from './ChatParts/ChatAttachment';
 import { UIcon } from '../../icon';
 import { USkeleton } from '../../skeleton';
@@ -53,10 +53,11 @@ export const chatMessagesProps = Object.assign(Object.assign({}, useTheme.props)
 export default defineComponent({
     name: 'ChatMessages',
     props: chatMessagesProps,
-    emits: ['message-retry'],
-    setup(props, { slots, emit }) {
+    setup(props, { slots }) {
+        var _a;
+        const UChat = inject(chatInjectionKey, null);
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
+        const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Chat');
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut, brandPrimary500, staticGreen, staticRed, textPrimary, textSecondary, textTertiary }, self: { backgroundColor, borderColor, mainBackgroundColor, headerBackgroundColor, headerBorderColor, headerTitleColor, messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, unreadNotificationBackgroundColor, unreadNotificationTextColor, typingIndicatorColor, dateSeparatorColor, dateSeparatorBackgroundColor, borderRadius, errorColor } } = themeRef.value;
@@ -101,7 +102,6 @@ export default defineComponent({
         });
         const handleMessageRetry = (message) => {
             var _a;
-            emit('message-retry', message);
             (_a = props.onMessageRetry) === null || _a === void 0 ? void 0 : _a.call(props, message);
         };
         const renderDateSeparator = (date) => {
@@ -117,6 +117,17 @@ export default defineComponent({
                     " ",
                     mergedUnreadNotificationTextRef.value)));
         };
+        const renderMarkMessage = (message) => {
+            const markTypeClass = message.markType === ChatMarkType.SYSTEM
+                ? 'system'
+                : message.markType === ChatMarkType.EVENT
+                    ? 'event'
+                    : 'divider';
+            return (h("div", { key: message.id, class: [
+                    `${mergedClsPrefixRef.value}-chat-main__mark`,
+                    `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
+                ] }, message.content && h("span", null, message.content)));
+        };
         const renderMessage = (message) => {
             const isOwn = message.isOwn;
             const attachments = message.attachment
@@ -157,7 +168,7 @@ export default defineComponent({
                         ] }, message.status === MessageStatus.RETRY ? (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
                             handleMessageRetry(message);
                         }, style: { cursor: 'pointer' } },
-                        h(UIcon, { size: 16, component: statusIconMapper[MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon` }),
+                        h(UIcon, { size: 16, component: statusIconMapper[MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`, theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon }),
                         h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, mergedRetryTextRef.value))) : (h(Fragment, null,
                         h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
                         isOwn && message.status && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
@@ -165,7 +176,7 @@ export default defineComponent({
                             : statusIconMapper[message.status] && (h(UIcon, { size: 16, component: statusIconMapper[message.status], class: [
                                     `${mergedClsPrefixRef.value}-chat-main__message-status-icon`,
                                     `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(message.status)}`
-                                ] }))))))))));
+                                ], theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon }))))))))));
         };
         const renderTypingIndicator = () => {
             return (h("div", { class: [
@@ -210,7 +221,9 @@ export default defineComponent({
         };
         return {
             mergedClsPrefixRef,
+            mergedTheme: themeRef,
             renderMessage,
+            renderMarkMessage,
             renderTypingIndicator,
             renderSkeletonMessage,
             renderDateSeparator,
@@ -223,7 +236,7 @@ export default defineComponent({
     render() {
         var _a, _b, _c;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        const { mergedClsPrefixRef, renderMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
+        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
         if (this.loading) {
             return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
                 h("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
@@ -301,7 +314,11 @@ export default defineComponent({
                         if (item.type === 'unread-notification') {
                             return renderUnreadNotification();
                         }
-                        return renderMessage(item);
+                        const message = item;
+                        if (message.type === ChatMessageType.MARK) {
+                            return renderMarkMessage(message);
+                        }
+                        return renderMessage(message);
                     }),
                     isTyping && renderTypingIndicator()))));
     }

package/es/chat/src/ChatParts/MainArea.js

@@ -24,7 +24,7 @@ const SENDING_DELAY = 100;
 export default defineComponent({
     name: 'ChatMainArea',
     setup(_, { slots }) {
-        const { mergedClsPrefixRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, onChatClose, onChatShare, onUserProfile
+        const { mergedClsPrefixRef, mergedThemeRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, onChatClose, onChatShare, onUserProfile
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(chatInjectionKey);
         const messagesBodyRef = ref();
@@ -131,22 +131,22 @@ export default defineComponent({
             return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
                 h(UFlex, { justify: "space-between", align: "flex-start" }, {
                     default: () => (h(Fragment, null,
-                        h(UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title` }, {
+                        h(UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
                             default: () => { var _a; return ((_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) || 'Select a chat'; }
                         }),
                         h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
                             default: () => resolveSlot(slots.headerActions, () => [
-                                h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
-                                    default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
+                                h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
+                                    default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
                                         default: () => h(ArrowHookUpRight, null)
                                     }))
                                 }),
-                                h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
-                                    default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
+                                h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
+                                    default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
                                         default: () => h(PersonNote, null)
                                     }))
                                 }),
-                                h(UButton, Object.assign({ type: "primary", size: "large", round: true }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), {
+                                h(UButton, Object.assign({ type: "primary", size: "large", round: true }, headerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), {
                                     default: () => closeButtonTextRef.value
                                 })
                             ])
@@ -257,13 +257,13 @@ export default defineComponent({
                     default: () => (h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
                         default: () => (h(Fragment, null,
                             h(UUploadTrigger, { abstract: true }, {
-                                default: ({ handleClick }) => (h(UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { onClick: handleClick }), {
-                                    default: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value), {
+                                default: ({ handleClick }) => (h(UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: handleClick }), {
+                                    default: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
                                         default: () => h(AttachIcon, null)
                                     }))
                                 }))
                             }),
-                            h(UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { onUpdateValue: (value) => {
+                            h(UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { theme: mergedThemeRef.value.peers.Input, themeOverrides: mergedThemeRef.value.peerOverrides.Input, onUpdateValue: (value) => {
                                     inputValue.value = value;
                                     if (selectedChatRef.value) {
                                         chatInputs.value[selectedChatRef.value.id] = value;

package/es/chat/src/ChatParts/Sidebar.js

@@ -10,7 +10,7 @@ export default defineComponent({
     },
     render() {
         const { slots } = this;
-        const { mergedClsPrefixRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect
+        const { mergedClsPrefixRef, mergedThemeRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(chatInjectionKey);
         const renderListHeader = () => {
@@ -19,7 +19,7 @@ export default defineComponent({
                     default: () => {
                         var _a, _b;
                         return (h(Fragment, null,
-                            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || (h(USelect, { round: true, size: "small" }))),
+                            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || (h(USelect, { round: true, size: "tiny", theme: mergedThemeRef.value.peers.Select, themeOverrides: mergedThemeRef.value.peerOverrides.Select }))),
                             h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-actions` }, (_b = slots.sidebarHeaderActions) === null || _b === void 0 ? void 0 : _b.call(slots))));
                     }
                 })));

package/es/chat/src/interface.d.ts

@@ -6,6 +6,8 @@ import type { IconProps } from '../../icon';
 import type { BadgeProps } from '../../badge';
 import { EmptyProps } from '../../empty';
 import { InputProps } from '../../input';
+import type { ChatTheme } from '../styles';
+import type { MergedTheme } from '../../_mixins';
 export declare enum MessageStatus {
     READ = "read",
     UNREAD = "unread",
@@ -69,6 +71,7 @@ export interface ChatMessageData {
     uploadProps?: Partial<UploadProps>;
     senderAvatar?: string | (() => VNodeChild);
     senderName?: string | (() => VNodeChild);
+    markType?: ChatMarkType;
 }
 export interface ChatMessageProps {
     id: ChatId;
@@ -241,6 +244,7 @@ export interface ChatListInst {
 }
 export declare const chatInjectionKey: InjectionKey<{
     mergedClsPrefixRef: Ref<string>;
+    mergedThemeRef: Ref<MergedTheme<ChatTheme>>;
     chatItemsRef: Ref<ChatListItemData[] | undefined>;
     selectedChatIdRef: Ref<ChatId | undefined>;
     selectedChatRef: Ref<ChatListItemData | undefined>;

package/es/chat/src/styles/index.cssr.js

@@ -1,10 +1,7 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
 export default cB('chat', `
  height: 100%;
- max-height: 100%;
- min-height: 0;
- display: flex;
- overflow: hidden;
+ background-color: transparent;
  box-sizing: border-box;
  .u-list-item__text {
  grid-template-columns: 1fr !important;
@@ -13,7 +10,6 @@ export default cB('chat', `
  height: 100%;
  max-height: 100%;
  min-height: 0;
- overflow: hidden;
  }
 `, [cB('chat-sidebar', `
  max-width: 388px;
@@ -24,7 +20,6 @@ export default cB('chat', `
  background-color: var(--u-sidebar-background-color);
  border: 1px solid var(--u-sidebar-border-color);
  border-radius: 20px;
- overflow: hidden;
  `, [cE('header', `
  flex-shrink: 0;
  `), cE('header-container', `
@@ -138,7 +133,6 @@ export default cB('chat', `
  `), cE('item-status sup', `
  padding: 2px 6px 2px 5px;
  height: 22px;
- --u-color: var(--u-unread-notification-background-color);
  `), cE('item-status-icon', `
  color: var(--u-sidebar-item-time-color);
  `, [cM('read', `
@@ -160,7 +154,6 @@ export default cB('chat', `
  height: 100%;
  max-height: 100%;
  min-height: 0;
- overflow: hidden;
  `, [cE('header', `
  border-bottom: 1px solid var(--u-border-color);
  width: 100%;
@@ -176,7 +169,7 @@ export default cB('chat', `
  color: var(--u-unread-notification-text-color);
  padding: 6px 12px;
  text-align: center;
- font-size: 12px;
+ font-size: 14px;
  font-weight: 500;
  margin: 8px 0;
  display: flex;
@@ -210,8 +203,19 @@ export default cB('chat', `
  color: var(--u-date-separator-color);
  padding: 4px 12px;
  border-radius: 12px;
- font-size: 12px;
+ font-size: 14px;
  font-weight: 500;
+ `)]), cE('mark', `
+ display: flex;
+ justify-content: center;
+ margin: 12px 0;
+ width: 100%;
+ `, [c('span', `
+ padding: 6px 12px;
+ border-radius: 8px;
+ color: var(--u-text-color-secondary);
+ background-color: var(--u-date-separator-background-color);
+ text-align: center;
  `)]), cE('message', `
  display: flex;
  margin-bottom: 8px;
@@ -327,13 +331,6 @@ export default cB('chat', `
  `), cE('input', `
  flex: 1;
  margin-right: 4px;
- --u-color: #F3F4F6 !important;
- --u-color-focus: #F3F4F6 !important;
- --u-border: none !important;
- --u-border-focus: none !important;
- --u-border-hover: none !important;
- --u-box-shadow: none !important;
- --u-box-shadow-focus: none !important;
  `), cE('attach-btn', `
  margin-left: 4px;
  flex-shrink: 0;

package/es/chat/styles/dark.d.ts

@@ -353,16 +353,24 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;

package/es/chat/styles/light.d.ts

@@ -35,7 +35,6 @@ export declare const self: (vars: ThemeCommonVars) => {
     borderRadius: string;
     errorColor: string;
 };
-export type ChatThemeVars = ReturnType<typeof self>;
 declare const chatLight: import("../../_mixins").Theme<"Chat", {
     backgroundColor: string;
     borderColor: string;
@@ -391,16 +390,24 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -686,4 +693,5 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
     }, any>;
 }>;
 export default chatLight;
+export type ChatThemeVars = ReturnType<typeof self>;
 export type ChatTheme = typeof chatLight;

package/es/chat/styles/light.js

@@ -1,14 +1,26 @@
 import { inputLight } from '../../input/styles';
+import { self as inputSelf } from '../../input/styles/light';
 import { emptyLight } from '../../empty/styles';
 import { selectLight } from '../../select/styles';
 import { avatarLight } from '../../avatar/styles';
 import { badgeLight } from '../../badge/styles';
+import { self as badgeSelf } from '../../badge/styles/light';
 import { buttonLight } from '../../button/styles';
 import { iconLight } from '../../icon/styles';
 import { listLight } from '../../list/styles';
 import { typographyLight } from '../../typography/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
+const chatInputLight = Object.assign(Object.assign({}, inputLight), { self(vars) {
+        const originalInputSelf = inputSelf(vars);
+        const { elementsTertiary } = vars;
+        return Object.assign(Object.assign({}, originalInputSelf), { color: elementsTertiary, colorFocus: elementsTertiary, border: 'none', borderFocus: 'none', borderHover: 'none', boxShadow: 'none', boxShadowFocus: 'none' });
+    } });
+const chatBadgeLight = Object.assign(Object.assign({}, badgeLight), { self(vars) {
+        const originalBadgeSelf = badgeSelf(vars);
+        const { brandPrimary400, elementsSecondary } = vars;
+        return Object.assign(Object.assign({}, originalBadgeSelf), { color: brandPrimary400, textColor: elementsSecondary });
+    } });
 export const self = (vars) => {
     const { borderRadiusLarge, elementsQuaternary, elementsTertiary, textTertiary, textPrimary, textSecondary, surfacePrimary, brandPrimary500, brandPrimary400, transparencySecondary, elementsSecondary, elementsDarkQuinary, staticRed, staticWhite } = vars;
     return {
@@ -43,7 +55,7 @@ export const self = (vars) => {
         unreadNotificationTextColor: elementsSecondary,
         typingIndicatorColor: textSecondary,
         dateSeparatorColor: textTertiary,
-        dateSeparatorBackgroundColor: elementsTertiary,
+        dateSeparatorBackgroundColor: 'transparent',
         borderRadius: borderRadiusLarge,
         errorColor: staticRed
     };
@@ -52,11 +64,11 @@ const chatLight = createTheme({
     name: 'Chat',
     common: commonLight,
     peers: {
-        Input: inputLight,
+        Input: chatInputLight,
         Empty: emptyLight,
         Select: selectLight,
         Avatar: avatarLight,
-        Badge: badgeLight,
+        Badge: chatBadgeLight,
         Button: buttonLight,
         Icon: iconLight,
         List: listLight,

package/es/color-picker/src/ColorInputUnit.d.ts

@@ -122,16 +122,24 @@ declare const _default: import("vue").DefineComponent<{
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;

package/es/color-picker/src/ColorPicker.d.ts

@@ -152,16 +152,24 @@ export declare const colorPickerProps: {
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -448,16 +456,24 @@ export declare const colorPickerProps: {
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -744,16 +760,24 @@ export declare const colorPickerProps: {
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -1085,16 +1109,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -1381,16 +1413,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -1677,16 +1717,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -2047,16 +2095,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -2343,16 +2399,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -2639,16 +2703,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;