@uzum-tech/ui 1.8.0 → 1.8.2

package/lib/chat/src/ChatMessages.js

@@ -59,10 +59,11 @@ exports.chatMessagesProps = Object.assign(Object.assign({}, _mixins_1.useTheme.p
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatMessages',
     props: exports.chatMessagesProps,
-    emits: ['message-retry'],
-    setup(props, { slots, emit }) {
+    setup(props, { slots }) {
+        var _a;
+        const UChat = (0, vue_1.inject)(interface_1.chatInjectionKey, null);
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Chat', '-chat', index_cssr_1.default, styles_1.chatLight, props, mergedClsPrefixRef);
+        const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : (0, _mixins_1.useTheme)('Chat', '-chat', index_cssr_1.default, styles_1.chatLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Chat');
         const cssVarsRef = (0, vue_1.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;
@@ -107,7 +108,6 @@ exports.default = (0, vue_1.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) => {
@@ -123,6 +123,17 @@ exports.default = (0, vue_1.defineComponent)({
                     " ",
                     mergedUnreadNotificationTextRef.value)));
         };
+        const renderMarkMessage = (message) => {
+            const markTypeClass = message.markType === interface_1.ChatMarkType.SYSTEM
+                ? 'system'
+                : message.markType === interface_1.ChatMarkType.EVENT
+                    ? 'event'
+                    : 'divider';
+            return ((0, vue_1.h)("div", { key: message.id, class: [
+                    `${mergedClsPrefixRef.value}-chat-main__mark`,
+                    `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
+                ] }, message.content && (0, vue_1.h)("span", null, message.content)));
+        };
         const renderMessage = (message) => {
             const isOwn = message.isOwn;
             const attachments = message.attachment
@@ -163,7 +174,7 @@ exports.default = (0, vue_1.defineComponent)({
                         ] }, message.status === interface_1.MessageStatus.RETRY ? ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
                             handleMessageRetry(message);
                         }, style: { cursor: 'pointer' } },
-                        (0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[interface_1.MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon` }),
+                        (0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[interface_1.MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`, theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon }),
                         (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, mergedRetryTextRef.value))) : ((0, vue_1.h)(vue_1.Fragment, null,
                         (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
                         isOwn && message.status && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
@@ -171,7 +182,7 @@ exports.default = (0, vue_1.defineComponent)({
                             : statusIconMapper[message.status] && ((0, vue_1.h)(icon_1.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 ((0, vue_1.h)("div", { class: [
@@ -216,7 +227,9 @@ exports.default = (0, vue_1.defineComponent)({
         };
         return {
             mergedClsPrefixRef,
+            mergedTheme: themeRef,
             renderMessage,
+            renderMarkMessage,
             renderTypingIndicator,
             renderSkeletonMessage,
             renderDateSeparator,
@@ -229,7 +242,7 @@ exports.default = (0, vue_1.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 ((0, vue_1.h)("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
@@ -307,7 +320,11 @@ exports.default = (0, vue_1.defineComponent)({
                         if (item.type === 'unread-notification') {
                             return renderUnreadNotification();
                         }
-                        return renderMessage(item);
+                        const message = item;
+                        if (message.type === interface_1.ChatMessageType.MARK) {
+                            return renderMarkMessage(message);
+                        }
+                        return renderMessage(message);
                     }),
                     isTyping && renderTypingIndicator()))));
     }

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

@@ -29,7 +29,7 @@ const SENDING_DELAY = 100;
 exports.default = (0, vue_1.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
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const messagesBodyRef = (0, vue_1.ref)();
@@ -136,22 +136,22 @@ exports.default = (0, vue_1.defineComponent)({
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
                 (0, vue_1.h)(flex_1.UFlex, { justify: "space-between", align: "flex-start" }, {
                     default: () => ((0, vue_1.h)(vue_1.Fragment, null,
-                        (0, vue_1.h)(typography_1.UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title` }, {
+                        (0, vue_1.h)(typography_1.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'; }
                         }),
                         (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
                             default: () => (0, _utils_1.resolveSlot)(slots.headerActions, () => [
-                                (0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
+                                (0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
                                         default: () => (0, vue_1.h)(icons_1.ArrowHookUpRight, null)
                                     }))
                                 }),
-                                (0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
+                                (0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
                                         default: () => (0, vue_1.h)(icons_1.PersonNote, null)
                                     }))
                                 }),
-                                (0, vue_1.h)(button_1.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); } }), {
+                                (0, vue_1.h)(button_1.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
                                 })
                             ])
@@ -262,13 +262,13 @@ exports.default = (0, vue_1.defineComponent)({
                     default: () => ((0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
                         default: () => ((0, vue_1.h)(vue_1.Fragment, null,
                             (0, vue_1.h)(upload_1.UUploadTrigger, { abstract: true }, {
-                                default: ({ handleClick }) => ((0, vue_1.h)(button_1.UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { onClick: handleClick }), {
-                                    default: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value), {
+                                default: ({ handleClick }) => ((0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(icon_1.UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
                                         default: () => (0, vue_1.h)(icons_1.AttachIcon, null)
                                     }))
                                 }))
                             }),
-                            (0, vue_1.h)(input_1.UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { onUpdateValue: (value) => {
+                            (0, vue_1.h)(input_1.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/lib/chat/src/ChatParts/Sidebar.js

@@ -15,7 +15,7 @@ exports.default = (0, vue_1.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
          } = (0, vue_1.inject)(interface_1.chatInjectionKey);
         const renderListHeader = () => {
@@ -24,7 +24,7 @@ exports.default = (0, vue_1.defineComponent)({
                     default: () => {
                         var _a, _b;
                         return ((0, vue_1.h)(vue_1.Fragment, null,
-                            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || ((0, vue_1.h)(select_1.USelect, { round: true, size: "small" }))),
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || ((0, vue_1.h)(select_1.USelect, { round: true, size: "tiny", theme: mergedThemeRef.value.peers.Select, themeOverrides: mergedThemeRef.value.peerOverrides.Select }))),
                             (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-actions` }, (_b = slots.sidebarHeaderActions) === null || _b === void 0 ? void 0 : _b.call(slots))));
                     }
                 })));

package/lib/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/lib/chat/src/styles/index.cssr.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.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;
@@ -18,7 +15,6 @@ exports.default = (0, cssr_1.cB)('chat', `
  height: 100%;
  max-height: 100%;
  min-height: 0;
- overflow: hidden;
  }
 `, [(0, cssr_1.cB)('chat-sidebar', `
  max-width: 388px;
@@ -29,7 +25,6 @@ exports.default = (0, cssr_1.cB)('chat', `
  background-color: var(--u-sidebar-background-color);
  border: 1px solid var(--u-sidebar-border-color);
  border-radius: 20px;
- overflow: hidden;
  `, [(0, cssr_1.cE)('header', `
  flex-shrink: 0;
  `), (0, cssr_1.cE)('header-container', `
@@ -143,7 +138,6 @@ exports.default = (0, cssr_1.cB)('chat', `
  `), (0, cssr_1.cE)('item-status sup', `
  padding: 2px 6px 2px 5px;
  height: 22px;
- --u-color: var(--u-unread-notification-background-color);
  `), (0, cssr_1.cE)('item-status-icon', `
  color: var(--u-sidebar-item-time-color);
  `, [(0, cssr_1.cM)('read', `
@@ -165,7 +159,6 @@ exports.default = (0, cssr_1.cB)('chat', `
  height: 100%;
  max-height: 100%;
  min-height: 0;
- overflow: hidden;
  `, [(0, cssr_1.cE)('header', `
  border-bottom: 1px solid var(--u-border-color);
  width: 100%;
@@ -181,7 +174,7 @@ exports.default = (0, cssr_1.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;
@@ -215,8 +208,19 @@ exports.default = (0, cssr_1.cB)('chat', `
  color: var(--u-date-separator-color);
  padding: 4px 12px;
  border-radius: 12px;
- font-size: 12px;
+ font-size: 14px;
  font-weight: 500;
+ `)]), (0, cssr_1.cE)('mark', `
+ display: flex;
+ justify-content: center;
+ margin: 12px 0;
+ width: 100%;
+ `, [(0, cssr_1.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;
  `)]), (0, cssr_1.cE)('message', `
  display: flex;
  margin-bottom: 8px;
@@ -332,13 +336,6 @@ exports.default = (0, cssr_1.cB)('chat', `
  `), (0, cssr_1.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;
  `), (0, cssr_1.cE)('attach-btn', `
  margin-left: 4px;
  flex-shrink: 0;

package/lib/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/lib/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/lib/chat/styles/light.js

@@ -2,16 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const styles_1 = require("../../input/styles");
+const light_1 = require("../../input/styles/light");
 const styles_2 = require("../../empty/styles");
 const styles_3 = require("../../select/styles");
 const styles_4 = require("../../avatar/styles");
 const styles_5 = require("../../badge/styles");
+const light_2 = require("../../badge/styles/light");
 const styles_6 = require("../../button/styles");
 const styles_7 = require("../../icon/styles");
 const styles_8 = require("../../list/styles");
 const styles_9 = require("../../typography/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
+const chatInputLight = Object.assign(Object.assign({}, styles_1.inputLight), { self(vars) {
+        const originalInputSelf = (0, light_1.self)(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({}, styles_5.badgeLight), { self(vars) {
+        const originalBadgeSelf = (0, light_2.self)(vars);
+        const { brandPrimary400, elementsSecondary } = vars;
+        return Object.assign(Object.assign({}, originalBadgeSelf), { color: brandPrimary400, textColor: elementsSecondary });
+    } });
 const self = (vars) => {
     const { borderRadiusLarge, elementsQuaternary, elementsTertiary, textTertiary, textPrimary, textSecondary, surfacePrimary, brandPrimary500, brandPrimary400, transparencySecondary, elementsSecondary, elementsDarkQuinary, staticRed, staticWhite } = vars;
     return {
@@ -46,7 +58,7 @@ const self = (vars) => {
         unreadNotificationTextColor: elementsSecondary,
         typingIndicatorColor: textSecondary,
         dateSeparatorColor: textTertiary,
-        dateSeparatorBackgroundColor: elementsTertiary,
+        dateSeparatorBackgroundColor: 'transparent',
         borderRadius: borderRadiusLarge,
         errorColor: staticRed
     };
@@ -56,11 +68,11 @@ const chatLight = (0, _mixins_1.createTheme)({
     name: 'Chat',
     common: common_1.commonLight,
     peers: {
-        Input: styles_1.inputLight,
+        Input: chatInputLight,
         Empty: styles_2.emptyLight,
         Select: styles_3.selectLight,
         Avatar: styles_4.avatarLight,
-        Badge: styles_5.badgeLight,
+        Badge: chatBadgeLight,
         Button: styles_6.buttonLight,
         Icon: styles_7.iconLight,
         List: styles_8.listLight,

package/lib/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/lib/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;