From 698ce1b1f8f9bd49accb05262a5787c3277c2e25 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Fri, 27 Mar 2026 22:23:14 +0100 Subject: [PATCH 1/4] Initial commit --- .../Attachment/styling/Attachment.scss | 21 ------- .../Attachment/styling/CardAudio.scss | 2 - src/components/Attachment/styling/Giphy.scss | 2 - src/components/Avatar/styling/Avatar.scss | 3 +- src/components/Channel/styling/Channel.scss | 3 - .../ChannelList/styling/ChannelList.scss | 4 -- src/components/Dialog/styling/Prompt.scss | 4 -- src/components/Dialog/styling/Viewer.scss | 4 -- .../styling/EmptyStateIndicator.scss | 10 --- src/components/Form/styling/SwitchField.scss | 37 ----------- ...IsThreadReplyInChannelButtonIndicator.scss | 0 .../Message/styling/MessageSystem.scss | 2 - src/components/Message/styling/index.scss | 1 - .../styling/MessageActions.scss | 3 +- .../styling/MessageBouncePrompt.scss | 2 - .../MediaAttachmentPreview.tsx | 4 +- .../styling/AttachmentPreview.scss | 61 +++++++++++-------- .../styling/NewMessageNotification.scss | 2 - .../Poll/styling/PollCreationDialog.scss | 2 - .../Reactions/styling/MessageReactions.scss | 1 - .../Reactions/styling/ReactionSelector.scss | 2 +- .../Thread/styling/ThreadHeader.scss | 5 -- .../Thread/styling/ThreadHeaderMain.scss | 21 ------- src/components/Thread/styling/index.scss | 1 - .../ThreadList/styling/ThreadListItemUI.scss | 10 --- .../styling/TypingIndicator.scss | 20 ------ src/styling/_palette-variables.scss | 35 ----------- src/styling/_utils.scss | 45 -------------- src/styling/animations.scss | 22 ------- 29 files changed, 41 insertions(+), 288 deletions(-) delete mode 100644 src/components/Message/styling/MessageIsThreadReplyInChannelButtonIndicator.scss delete mode 100644 src/components/Thread/styling/ThreadHeaderMain.scss diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index 7c4731d685..d836e487a2 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -435,29 +435,12 @@ color: var(--str-chat__voice-recording-attachment-widget-color); } - .str-chat__message-attachment-voice-recording-widget--first-row { - @include utils.ellipsis-text-parent; - - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--str-chat__spacing-1); - } - .str-chat__message-attachment-download-icon { svg { width: calc(var(--str-chat__spacing-px) * 24); height: calc(var(--str-chat__spacing-px) * 16); } } - - .str-chat__message-attachment__voice-recording-widget__error-message { - display: flex; - align-items: center; - justify-content: flex-start; - gap: var(--str-chat__spacing-1); - } } .str-chat__message-attachment__voice-recording-widget__right-section { @@ -476,10 +459,6 @@ .str-chat__message-attachment-download-icon { --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16); } - - .str-chat__attachment-type-icon { - --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37); - } } .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text { diff --git a/src/components/Attachment/styling/CardAudio.scss b/src/components/Attachment/styling/CardAudio.scss index a0d06c1a8a..4ddfd8593e 100644 --- a/src/components/Attachment/styling/CardAudio.scss +++ b/src/components/Attachment/styling/CardAudio.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat__message-attachment-card--audio { .str-chat__message-attachment-card--content { padding: 0; diff --git a/src/components/Attachment/styling/Giphy.scss b/src/components/Attachment/styling/Giphy.scss index cb65b3044e..ffaa2706c5 100644 --- a/src/components/Attachment/styling/Giphy.scss +++ b/src/components/Attachment/styling/Giphy.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat { /* The height of GIFs */ --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200); diff --git a/src/components/Avatar/styling/Avatar.scss b/src/components/Avatar/styling/Avatar.scss index cf206fcc85..999af4be2c 100644 --- a/src/components/Avatar/styling/Avatar.scss +++ b/src/components/Avatar/styling/Avatar.scss @@ -27,7 +27,8 @@ height: 100%; } - .str-chat__icon--person { + // people icon for avatars without images and initials + .str-chat__icon { width: var(--avatar-icon-size); height: var(--avatar-icon-size); stroke-width: var(--avatar-icon-stroke-width); diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss index 445d48cb13..c8a5f9b4b9 100644 --- a/src/components/Channel/styling/Channel.scss +++ b/src/components/Channel/styling/Channel.scss @@ -204,9 +204,6 @@ /* Right (left in RTL layout) border of the component */ --str-chat__channel-border-inline-end: none; - /* The icon color used when no channel is selected */ - --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color); - /* The base surface color behind the loading shimmer */ --str-chat__channel-loading-state-color: var(--background-core-surface); } diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss index 0a233d09d9..dea8470875 100644 --- a/src/components/ChannelList/styling/ChannelList.scss +++ b/src/components/ChannelList/styling/ChannelList.scss @@ -159,10 +159,6 @@ } } - .stream-chat__paginated-list { - gap: 0; - } - .str-chat__load-more-button__button { @include utils.component-layer-overrides('channel-list-load-more'); width: 80%; diff --git a/src/components/Dialog/styling/Prompt.scss b/src/components/Dialog/styling/Prompt.scss index 36962e8e62..d24c5feb93 100644 --- a/src/components/Dialog/styling/Prompt.scss +++ b/src/components/Dialog/styling/Prompt.scss @@ -39,10 +39,6 @@ /* Vertical padding so focus rings (e.g. TextInput wrapper box-shadow) are not clipped by scrollable-y */ padding: var(--spacing-xxs) var(--spacing-xl); @include utils.scrollable-y; - - .str-chat__prompt__title { - margin-bottom: 1rem; - } } .str-chat__prompt__footer { diff --git a/src/components/Dialog/styling/Viewer.scss b/src/components/Dialog/styling/Viewer.scss index c9b421664f..51dc212254 100644 --- a/src/components/Dialog/styling/Viewer.scss +++ b/src/components/Dialog/styling/Viewer.scss @@ -52,10 +52,6 @@ padding: 0 var(--spacing-xl); flex: 1; min-height: 0; - - .str-chat__viewer__title { - margin-bottom: 1rem; - } } .str-chat__viewer__footer { diff --git a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss index 51cd4ee68a..b02a71c3be 100644 --- a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss +++ b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss @@ -1,10 +1,5 @@ @use '../../../styling/utils'; -.str-chat { - /* The text color used when no channel is selected */ - --str-chat__channel-empty-color: var(--text-secondary); -} - .str-chat__empty-channel { --str-chat-icon-color: var(--text-tertiary); display: flex; @@ -26,11 +21,6 @@ color: var(--str-chat-icon-color); } - .str-chat__empty-channel-notifications { - position: absolute; - inset-block-end: var(--str-chat__spacing-2); - } - .str-chat__empty-channel-text { margin: 0; max-width: 230px; diff --git a/src/components/Form/styling/SwitchField.scss b/src/components/Form/styling/SwitchField.scss index f2617a8171..de4727bf2f 100644 --- a/src/components/Form/styling/SwitchField.scss +++ b/src/components/Form/styling/SwitchField.scss @@ -8,16 +8,6 @@ var(--background-core-surface-subtle) ); --str-chat__switch-field-border-radius: var(--radius-md); - --str-chat__switch-field-title-font-size: var(--typography-font-size-sm, 14px); - --str-chat__switch-field-title-font-weight: var(--typography-font-weight-medium, 500); - --str-chat__switch-field-title-line-height: var(--typography-line-height-tight, 16px); - --str-chat__switch-field-title-color: var(--text-primary, #1a1b25); - --str-chat__switch-field-description-font-size: var(--typography-font-size-xs, 12px); - --str-chat__switch-field-description-font-weight: var( - --typography-font-weight-regular, - 400 - ); - --str-chat__switch-field-description-color: var(--text-tertiary, #687385); --str-chat__switch-field__track-off-bg: var( --control-toggle-switch-bg, var(--border-core-on-surface, #a3acba) @@ -66,33 +56,6 @@ cursor: pointer; } - &__content { - display: flex; - flex-direction: column; - gap: var(--spacing-xxs, 4px); - min-width: 0; - } - - &__title { - font-size: var(--str-chat__switch-field-title-font-size); - font-weight: var(--str-chat__switch-field-title-font-weight); - line-height: var(--str-chat__switch-field-title-line-height); - color: var(--str-chat__switch-field-title-color); - } - - &__description { - font-size: var(--str-chat__switch-field-description-font-size); - font-weight: var(--str-chat__switch-field-description-font-weight); - line-height: var(--str-chat__switch-field-title-line-height); - color: var(--str-chat__switch-field-description-color); - } - - &__expanded-content { - flex-shrink: 0; - display: flex; - align-items: center; - } - &__switch { display: flex; align-items: center; diff --git a/src/components/Message/styling/MessageIsThreadReplyInChannelButtonIndicator.scss b/src/components/Message/styling/MessageIsThreadReplyInChannelButtonIndicator.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/Message/styling/MessageSystem.scss b/src/components/Message/styling/MessageSystem.scss index df7d6efa9f..767ca82334 100644 --- a/src/components/Message/styling/MessageSystem.scss +++ b/src/components/Message/styling/MessageSystem.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat__message--system { display: flex; padding-block: var(--spacing-xs); diff --git a/src/components/Message/styling/index.scss b/src/components/Message/styling/index.scss index 9b83d6a795..d49ffe6ad3 100644 --- a/src/components/Message/styling/index.scss +++ b/src/components/Message/styling/index.scss @@ -1,6 +1,5 @@ @use 'Message'; @use 'MessageAlsoSentInChannelIndicator'; -@use 'MessageIsThreadReplyInChannelButtonIndicator'; @use 'MessageStatus'; @use 'MessageSystem'; @use 'MessageTranslationIndicator'; diff --git a/src/components/MessageActions/styling/MessageActions.scss b/src/components/MessageActions/styling/MessageActions.scss index e1a6591c8d..77104af4c4 100644 --- a/src/components/MessageActions/styling/MessageActions.scss +++ b/src/components/MessageActions/styling/MessageActions.scss @@ -37,8 +37,7 @@ color: var(--str-chat__message-options-active-color); } - .str-chat__message-actions-box-button, - .str-chat__message-actions-container { + .str-chat__message-actions-box-button { position: relative; } } diff --git a/src/components/MessageBounce/styling/MessageBouncePrompt.scss b/src/components/MessageBounce/styling/MessageBouncePrompt.scss index f6b5a3cf42..d8ce696cc3 100644 --- a/src/components/MessageBounce/styling/MessageBouncePrompt.scss +++ b/src/components/MessageBounce/styling/MessageBouncePrompt.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat__message-bounce-alert { max-width: 300px; diff --git a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx index def24a1a7b..f77a9bb1ba 100644 --- a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx +++ b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx @@ -14,11 +14,11 @@ import React, { useState, } from 'react'; import clsx from 'clsx'; -import { LoadingIndicatorIcon } from '../icons'; import { IconExclamationMark, IconRetry, IconVideoFill } from '../../Icons'; import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton'; import { Button } from '../../Button'; import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot'; +import { LoadingIndicator as DefaultLoadingIndicator } from '../../Loading'; export type MediaAttachmentPreviewProps> = UploadAttachmentPreviewProps< @@ -34,7 +34,7 @@ export const MediaAttachmentPreview = ({ removeAttachments, }: MediaAttachmentPreviewProps) => { const { t } = useTranslationContext(); - const { BaseImage = DefaultBaseImage, LoadingIndicator = LoadingIndicatorIcon } = + const { BaseImage = DefaultBaseImage, LoadingIndicator = DefaultLoadingIndicator } = useComponentContext(); const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false); diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index 40a4e82f4d..4a6243487e 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -166,24 +166,19 @@ align-items: center; gap: var(--spacing-xxs); position: absolute; - bottom: var(--spacing-xxs); - left: var(--spacing-xxs); - padding-inline: var(--button-padding-x-icon-only-sm); - padding-block: var(--button-padding-y-sm); - border-radius: var( - --str-chat__attachment-preview-media-video-indicator-border-radius - ); - background-color: var( - --str-chat__attachment-preview-media-video-indicator-background-color - ); - color: var(--str-chat__attachment-preview-media-video-indicator-color); - font-size: var(--typography-font-size-xxs); - font-weight: var(--typography-font-weight-bold); - line-height: var(--line-height-line-height-10); - - .str-chat__icon--video-camera { - width: 10px; - height: 8px; + bottom: var(--spacing-xs); + left: var(--spacing-xs); + padding: var(--spacing-xxs) var(--spacing-xs); + border-radius: var(--radius-max); + background: var(--badge-bg-inverse); + color: var(--badge-text-on-inverse); + font: var(--str-chat__numeric-md-text); + overflow: hidden; + text-overflow: ellipsis; + + .str-chat__icon { + width: var(--icon-size-xs); + height: var(--icon-size-xs); fill: currentColor; } } @@ -215,15 +210,29 @@ ); } - .str-chat__loading-indicator, - .str-chat__icon--exclamation-mark { - width: 14px; - height: 14px; + .str-chat__icon.str-chat__loading-indicator { + width: var(--icon-size-sm); + height: var(--icon-size-sm); + position: absolute; + left: var(--spacing-xxs); + bottom: var(--spacing-xxs); + border-radius: var(--radius-max); + border-radius: var(--radius-max); + background: var(--background-core-elevation-0); + color: var(--accent-primary); + } + + .str-chat__icon--exclamation { + padding: var(--spacing-xxxs); + width: var(--icon-size-sm); + height: var(--icon-size-sm); position: absolute; left: var(--spacing-xxs); bottom: var(--spacing-xxs); - border: 2px solid var(--control-remove-control-border); + border: 2px solid var(--badge-border); border-radius: var(--radius-max); + background: var(--badge-bg-error); + color: var(--badge-text-on-accent); } } @@ -274,9 +283,9 @@ font-size: var(--typography-font-size-xs); line-height: var(--typography-line-height-tight); - .str-chat__loading-indicator { - width: var(--size-12); - height: var(--size-12); + .str-chat__icon.str-chat__loading-indicator { + width: var(--icon-size-sm); + height: var(--icon-size-sm); } .str-chat__attachment-preview-file__fatal-error { diff --git a/src/components/MessageList/styling/NewMessageNotification.scss b/src/components/MessageList/styling/NewMessageNotification.scss index 459878fa10..bb2bce08bf 100644 --- a/src/components/MessageList/styling/NewMessageNotification.scss +++ b/src/components/MessageList/styling/NewMessageNotification.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat__new-message-notification { position: absolute; inset-block-end: 16px; diff --git a/src/components/Poll/styling/PollCreationDialog.scss b/src/components/Poll/styling/PollCreationDialog.scss index 7f0793004b..6fd9de80c1 100644 --- a/src/components/Poll/styling/PollCreationDialog.scss +++ b/src/components/Poll/styling/PollCreationDialog.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat__poll-creation-dialog { display: flex; flex-direction: column; diff --git a/src/components/Reactions/styling/MessageReactions.scss b/src/components/Reactions/styling/MessageReactions.scss index 2f3323d74f..021d955bd8 100644 --- a/src/components/Reactions/styling/MessageReactions.scss +++ b/src/components/Reactions/styling/MessageReactions.scss @@ -1,4 +1,3 @@ -@use '../../../styling/utils' as utils; @use './common' as common; .str-chat__message-reactions { diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss index 5c63bea878..499764caa6 100644 --- a/src/components/Reactions/styling/ReactionSelector.scss +++ b/src/components/Reactions/styling/ReactionSelector.scss @@ -27,7 +27,7 @@ width: 32px; aspect-ratio: 1/1; - .str-chat__icon--plus { + .str-chat__icon { width: var(--icon-size-sm); height: var(--icon-size-sm); } diff --git a/src/components/Thread/styling/ThreadHeader.scss b/src/components/Thread/styling/ThreadHeader.scss index 6e98093664..c9c7b0f119 100644 --- a/src/components/Thread/styling/ThreadHeader.scss +++ b/src/components/Thread/styling/ThreadHeader.scss @@ -30,12 +30,10 @@ @include utils.header-layout; @include utils.component-layer-overrides('thread-header'); - .str-chat__thread-header-name, .str-chat__thread-header-title { font: var(--str-chat__subtitle-medium-text); } - .str-chat__thread-header-channel-name, .str-chat__thread-header-subtitle { font: var(--str-chat__body-text); color: var(--str-chat__thread-header-info-color); @@ -45,9 +43,6 @@ @include utils.header-text-layout; align-items: start; - .str-chat__thread-header-name, - .str-chat__thread-header-reply-count, - .str-chat__thread-header-channel-name, .str-chat__thread-header-subtitle, .str-chat__thread-header-title { @include utils.ellipsis-text; diff --git a/src/components/Thread/styling/ThreadHeaderMain.scss b/src/components/Thread/styling/ThreadHeaderMain.scss deleted file mode 100644 index 1c06d66da4..0000000000 --- a/src/components/Thread/styling/ThreadHeaderMain.scss +++ /dev/null @@ -1,21 +0,0 @@ -@use '../../../styling/utils'; - -.str-chat__thread-header--main { - @include utils.header-layout; - border-bottom: 1px solid var(--border-core-default); - background: var(--background-core-elevation-1); - - .str-chat__thread-header--main__details { - @include utils.header-text-layout; - - .str-chat__thread-header--main__title { - font: var(--str-chat__heading-sm-text); - color: var(--text-primary); - } - - .str-chat__thread-header--main__subtitle { - font: var(--str-chat__caption-default-text); - color: var(--text-secondary); - } - } -} diff --git a/src/components/Thread/styling/index.scss b/src/components/Thread/styling/index.scss index af8eabad0e..b8263e4db2 100644 --- a/src/components/Thread/styling/index.scss +++ b/src/components/Thread/styling/index.scss @@ -1,4 +1,3 @@ @use 'Thread'; @use 'ThreadHead'; @use 'ThreadHeader'; -@use 'ThreadHeaderMain'; diff --git a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss index b6879f2c49..c5e1a39990 100644 --- a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss +++ b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss @@ -74,16 +74,6 @@ white-space: nowrap; } -.str-chat__thread-list-item__message-preview { - font-size: var(--typography-font-size-md); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); - color: var(--text-primary); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - .str-chat__thread-list-item__content-trailing { display: flex; gap: var(--spacing-xs); diff --git a/src/components/TypingIndicator/styling/TypingIndicator.scss b/src/components/TypingIndicator/styling/TypingIndicator.scss index 08ff60f59a..ed33daf29f 100644 --- a/src/components/TypingIndicator/styling/TypingIndicator.scss +++ b/src/components/TypingIndicator/styling/TypingIndicator.scss @@ -54,26 +54,6 @@ display: flex; align-items: center; column-gap: var(--spacing-xxs); - - .str-chat__typing-indicator__dot { - width: 5px; - height: 5px; - border-radius: 50%; - background-color: var(--chat-text-typing-indicator); - animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both; - - &:nth-child(1) { - animation-delay: 0s; - } - - &:nth-child(2) { - animation-delay: 0.15s; - } - - &:nth-child(3) { - animation-delay: 0.3s; - } - } } /* SVG dots (TypingIndicatorDots component) */ diff --git a/src/styling/_palette-variables.scss b/src/styling/_palette-variables.scss index e4ec572cd0..4dc68eda55 100644 --- a/src/styling/_palette-variables.scss +++ b/src/styling/_palette-variables.scss @@ -1,16 +1,4 @@ .str-chat { - --str-chat__blue950: #001333; - --str-chat__blue900: #00163d; - --str-chat__blue800: #002666; - --str-chat__blue700: #003999; - --str-chat__blue600: #004ccc; - --str-chat__blue500: #005fff; - --str-chat__blue400: #337eff; - --str-chat__blue300: #669fff; - --str-chat__blue200: #ccdfff; - --str-chat__blue100: #e0f0ff; - --str-chat__blue50: #ebf5ff; - --str-chat__grey950: #080707; --str-chat__grey900: #17191c; --str-chat__grey800: #1c1e22; @@ -23,33 +11,10 @@ --str-chat__grey100: #f4f4f5; --str-chat__grey50: #ffffff; - --str-chat__red900: #330003; - --str-chat__red800: #660006; - --str-chat__red700: #990008; --str-chat__red600: #cc000b; - --str-chat__red500: #ff000e; --str-chat__red400: #ff3742; - --str-chat__red300: #ff666e; - --str-chat__red200: #ff999f; - --str-chat__red100: #ffe5e7; - --str-chat__green900: #062d16; - --str-chat__green800: #0d592c; - --str-chat__green700: #138643; - --str-chat__green600: #19b359; --str-chat__green500: #20e070; - --str-chat__green400: #4ce68c; - --str-chat__green300: #79eca9; - --str-chat__green200: #a6f2c6; - --str-chat__green100: #e9f1ff; --str-chat__yellow900: #332500; - --str-chat__yellow800: #664900; - --str-chat__yellow700: #996e00; - --str-chat__yellow600: #cc9200; - --str-chat__yellow500: #ffb700; - --str-chat__yellow400: #ffd466; - --str-chat__yellow300: #ffe299; - --str-chat__yellow200: #fff1cc; - --str-chat__yellow100: #fff8e5; } diff --git a/src/styling/_utils.scss b/src/styling/_utils.scss index 2e0f118105..b5a9737fcd 100644 --- a/src/styling/_utils.scss +++ b/src/styling/_utils.scss @@ -59,10 +59,6 @@ border-radius: $outline-radius; } -@mixin loading-item-background($color) { - background-image: linear-gradient(-90deg, #{$color} 0%, #{$color} 100%); -} - @mixin focusable { outline: 2px solid var(--border-utility-focused); outline-offset: 2px; @@ -140,36 +136,6 @@ } } -@mixin loading-item-background($component-name) { - background-image: linear-gradient( - -90deg, - var(--str-chat__#{$component-name}-loading-state-color) 0%, - var(--str-chat__#{$component-name}-loading-state-color) 100% - ); -} - -@mixin loading-animation { - animation: pulsate 1s linear 0s infinite alternate; - - &:nth-of-type(2) { - animation: pulsate 1s linear 0.3334s infinite alternate; - } - - &:last-of-type { - animation: pulsate 1s linear 0.6667s infinite alternate; - } - - @keyframes pulsate { - from { - opacity: 0.5; - } - - to { - opacity: 1; - } - } -} - @mixin component-layer-overrides($component-name, $important: '') { background: var(--str-chat__#{$component-name}-background-color) #{$important}; color: var(--str-chat__#{$component-name}-color) #{$important}; @@ -181,14 +147,3 @@ #{$important}; border-inline-end: var(--str-chat__#{$component-name}-border-inline-end) #{$important}; } - -// todo: remove? -@mixin circle-fab-overrides($component-name) { - svg path { - fill: var(--str-chat__#{$component-name}-color); - } - - &:active { - background-color: var(--str-chat__#{$component-name}-pressed-background-color); - } -} diff --git a/src/styling/animations.scss b/src/styling/animations.scss index 094275d40e..cfb9e733ad 100644 --- a/src/styling/animations.scss +++ b/src/styling/animations.scss @@ -7,25 +7,3 @@ .str-chat__rotate45 { transform: rotate(45deg); } - -@mixin loading-animation { - animation: pulsate 1s linear 0s infinite alternate; - - &:nth-of-type(2) { - animation: pulsate 1s linear 0.3334s infinite alternate; - } - - &:last-of-type { - animation: pulsate 1s linear 0.6667s infinite alternate; - } - - @keyframes pulsate { - from { - opacity: 0.5; - } - - to { - opacity: 1; - } - } -} From c602b2df896c136beb2ac2f170d54f96497fa540 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Mon, 30 Mar 2026 17:55:18 +0200 Subject: [PATCH 2/4] Another set of changes --- .../Attachment/styling/Attachment.scss | 17 +- .../Attachment/styling/Geolocation.scss | 2 +- .../Attachment/styling/ModalGallery.scss | 2 +- .../ChannelList/styling/ChannelList.scss | 6 +- src/components/Dialog/styling/Alert.scss | 2 +- src/components/Dialog/styling/Prompt.scss | 2 +- src/components/Dialog/styling/Viewer.scss | 2 +- src/components/Message/styling/Message.scss | 151 ++---------------- .../Message/styling/MessageStatus.scss | 2 +- .../styling/ScrollToLatestMessageButton.scss | 2 +- .../styling/VirtualizedMessageList.scss | 2 +- .../Thread/styling/ThreadHeader.scss | 4 +- src/components/Tooltip/styling/Tooltip.scss | 4 +- src/styling/_global-layout-variables.scss | 54 ------- src/styling/_global-theme-variables.scss | 110 +------------ 15 files changed, 34 insertions(+), 328 deletions(-) diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index d836e487a2..fdf762c308 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -2,10 +2,9 @@ .str-chat { /* The margin applied to every attachment in the attachment list */ - --str-chat__attachment-margin: var(--str-chat__spacing-0_5); - - /* The border radius used for the borders of the component */ - --str-chat__attachment-list-border-radius: 0; + --str-chat__attachment-margin: var(--space-2) + /* The border radius used for the borders of the component */ + --str-chat__attachment-list-border-radius: 0; /* The text/icon color of the component */ --str-chat__attachment-list-color: var(--str-chat__text-color); @@ -328,7 +327,7 @@ .str-chat__gallery .str-chat__message-attachment--svg-image, .str-chat__message-attachment--image.str-chat__message-attachment--svg-image { - $padding: var(--str-chat__spacing-6); + $padding: var(--space-24); padding: $padding; img { @@ -344,8 +343,8 @@ display: flex; align-items: center; justify-content: center; - padding: var(--str-chat__spacing-2); - column-gap: var(--str-chat__spacing-4); + padding: var(--space-8); + column-gap: var(--space-16); //margin: var(--str-chat__attachment-margin); .str-chat__file-icon { @@ -380,7 +379,7 @@ flex-direction: column; align-items: flex-start; justify-content: center; - row-gap: var(--str-chat__spacing-0_5); + row-gap: var(--space-2); min-width: 0; line-height: var(--typography-line-height-tight); @@ -390,7 +389,7 @@ display: flex; align-items: center; justify-content: space-between; - column-gap: var(--str-chat__spacing-2); + column-gap: var(--space-8); font-weight: var(--typography-font-weight-semi-bold); font-size: var(--typography-font-size-sm); diff --git a/src/components/Attachment/styling/Geolocation.scss b/src/components/Attachment/styling/Geolocation.scss index bd19975f5d..d94ce34913 100644 --- a/src/components/Attachment/styling/Geolocation.scss +++ b/src/components/Attachment/styling/Geolocation.scss @@ -93,7 +93,7 @@ .str-chat__message-attachment-geolocation__status--active-until { text-transform: lowercase; - font: var(--str-chat__caption-text); + font: var(--str-chat__metadata-emphasis-text); } } } diff --git a/src/components/Attachment/styling/ModalGallery.scss b/src/components/Attachment/styling/ModalGallery.scss index ac73e281ed..40fd53b48c 100644 --- a/src/components/Attachment/styling/ModalGallery.scss +++ b/src/components/Attachment/styling/ModalGallery.scss @@ -23,7 +23,7 @@ grid-template-rows: 50% 50%; overflow: hidden; border-radius: var(--radius-lg); - gap: var(--str-chat__spacing-0_5); + gap: var(--space-2); width: $max-width; max-width: $max-width; // CDN resize requires height/max-height to be present on the img element, this rule ensures that diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss index dea8470875..daa566489a 100644 --- a/src/components/ChannelList/styling/ChannelList.scss +++ b/src/components/ChannelList/styling/ChannelList.scss @@ -127,7 +127,7 @@ .str-chat__channel-list-inner { height: 100%; overflow: hidden; - padding-bottom: var(--str-chat__spacing-2_5); + padding-bottom: calc(var(--space-8) + var(--space-2)); .str-chat__channel-list-inner__main { height: 100%; @@ -139,7 +139,7 @@ flex-direction: column; align-items: center; justify-content: center; - padding: var(--str-chat__spacing-3); + padding: calc(var(--space-8) + var(--space-4)); p { color: var(--text-secondary); @@ -152,7 +152,7 @@ .str-chat__load-more-button { display: flex; justify-content: center; - margin: var(--str-chat__spacing-2) 0; + margin: var(--space-8) 0; .str-chat__load-more-button__button { @include utils.flex-row-center; diff --git a/src/components/Dialog/styling/Alert.scss b/src/components/Dialog/styling/Alert.scss index 9d9a474663..95d38dd086 100644 --- a/src/components/Dialog/styling/Alert.scss +++ b/src/components/Dialog/styling/Alert.scss @@ -33,7 +33,7 @@ } .str-chat__alert-header__description { - font: var(--str-chat__caption-default-tex); + font: var(--str-chat__caption-default-text); } } } diff --git a/src/components/Dialog/styling/Prompt.scss b/src/components/Dialog/styling/Prompt.scss index d24c5feb93..33b0a9c9f8 100644 --- a/src/components/Dialog/styling/Prompt.scss +++ b/src/components/Dialog/styling/Prompt.scss @@ -25,7 +25,7 @@ } .str-chat__prompt__header__description { - font: var(--str-chat__body-text); + font: var(--str-chat__caption-default-text); color: var(--text-secondary); } diff --git a/src/components/Dialog/styling/Viewer.scss b/src/components/Dialog/styling/Viewer.scss index 51dc212254..d619a47ade 100644 --- a/src/components/Dialog/styling/Viewer.scss +++ b/src/components/Dialog/styling/Viewer.scss @@ -30,7 +30,7 @@ } .str-chat__viewer__header__description { - font: var(--str-chat__body-text); + font: var(--str-chat__caption-default-text); color: var(--text-secondary); } diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index 18dfca69c2..d6ce0ce40d 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -6,11 +6,8 @@ --str-chat__message-border-radius: 0; --str-chat__message-color: var(--str-chat__text-color); - --str-chat__message-error-message-color: var(--str-chat__danger-color); - --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color); --str-chat__message-link-color: var(--chat-text-link); --str-chat__message-mention-color: var(--str-chat__primary-color); - --str-chat__message-replies-count-color: var(--str-chat__primary-color); --str-chat__message-background-color: transparent; --str-chat__message-highlighted-background-color: var( --str-chat__message-highlight-color @@ -40,7 +37,7 @@ --str-chat__message-bubble-border-inline-end: none; --str-chat__message-bubble-box-shadow: none; - --str-chat__blocked-message-border-radius: var(--str-chat__border-radius-md); + --str-chat__blocked-message-border-radius: var(--radius-md); --str-chat__blocked-message-color: var(--str-chat__text-low-emphasis-color); --str-chat__blocked-message-background-color: var(--str-chat__secondary-surface-color); --str-chat__blocked-message-border-block-start: none; @@ -49,11 +46,6 @@ --str-chat__blocked-message-border-inline-end: none; --str-chat__blocked-message-box-shadow: none; - --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color); - --str-chat__translation-notice-active-background-color: var( - --str-chat__tertiary-surface-color - ); - --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); /* Background color for pinned messages (Figma: background/core/highlight) */ @@ -89,12 +81,6 @@ --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size)); padding-inline: var(--str-chat__message-composer-padding); - &.str-chat__message-without-touch-support { - --str-chat-message-options-size: calc( - 1 * var(--str-chat__message-options-button-size) - ); - } - .str-chat__message-bubble { max-width: var(--str-chat__message-max-width); display: flex; @@ -180,7 +166,7 @@ .str-chat__message-mention { color: var(--str-chat__message-mention-color); - font: var(--str-chat__body2-medium-text); + font: var(--str-chat__body-emphasis-text); } .str-chat__message { @@ -268,7 +254,7 @@ } &.str-chat__message--other { - column-gap: var(--str-chat__spacing-2); + column-gap: var(--space-8); justify-items: flex-start; &.str-chat__message--with-avatar { @@ -315,7 +301,7 @@ } &.str-chat__message--me { - column-gap: var(--str-chat__spacing-2); + column-gap: var(--space-8); justify-items: flex-end; &.str-chat__message--with-avatar { @@ -379,7 +365,7 @@ 'message-bubble options' 'replies replies'; grid-template-columns: auto 1fr; - column-gap: var(--str-chat__spacing-2); + column-gap: var(--space-8); position: relative; .str-chat__message-reactions-host { @@ -395,10 +381,6 @@ } } - &:has(.str-chat__message-reactions--top) { - // maybe remove later - } - &:has(.str-chat__message-reactions--bottom) { grid-template-areas: 'message-bubble options' @@ -452,32 +434,6 @@ } } - .str-chat__translation-notice { - grid-area: translation-notice; - - button { - cursor: pointer; - padding: 0.25rem 0; - margin: 0; - font: var(--str-chat__body2-text); - color: var(--str-chat__translation-notice-color); - border: none; - background: none; - - &:active, - &:hover { - background: var(--str-chat__translation-notice-active-background-color); - } - } - } - - .str-chat__custom-message-metadata { - grid-area: custom-metadata; - height: var(--size-24); - margin-block-start: var(--spacing-xxs); - color: var(--str-chat__message-secondary-color); - } - .str-chat__message-metadata { grid-area: metadata; display: flex; @@ -495,10 +451,6 @@ margin-inline-end: var(--spacing-xxs); } - .str-chat__message-sender-name { - font: var(--str-chat__caption-medium-text); - } - .str-chat__message-edited-indicator { margin-left: var(--spacing-xs); } @@ -509,24 +461,11 @@ text-align: right; } - .str-chat__message-is-thread-reply-button-wrapper { - grid-area: replies; - - // TODO: "Thread reply" button styling - } - .str-chat__message--blocked-inner { @include chat-bubble-spacing; @include utils.component-layer-overrides('blocked-message'); // todo: once blocked message designs are ready remove this padding? padding-block: var(--spacing-xs); - font: var(--str-chat__body2-text); - } - - // Fixes emoji display in Chrome on non-retina display (only detected in Angular SDK) https://bugs.chromium.org/p/chromium/issues/detail?id=596223 - .str-chat__emoji-display-fix { - display: inline-block; - width: 1.25em; } .str-chat__message-error-indicator { @@ -584,14 +523,8 @@ } // Message options display - default mode: they appear when .str-chat__li is hovered -.str-chat__ul:not( - .str-chat__message-options-in-bubble, - .str-chat__message-with-touch-support - ), -.str-chat__virtual-list:not( - .str-chat__message-options-in-bubble, - .str-chat__message-with-touch-support - ) { +.str-chat__ul, +.str-chat__virtual-list { /* This rule won't be applied in browsers that don't support :has() */ .str-chat__li:hover:not(:has(.str-chat__modal--open)), .str-chat__li:focus-within:not(:has(.str-chat__modal--open)), @@ -608,44 +541,6 @@ margin-inline-start: 0; } } - - /* Fallback for when :has() is unsupported */ - @supports not selector(:has(a, b)) { - .str-chat__li:hover, - .str-chat__li:focus-within { - .str-chat__message-options { - display: flex; - } - - .str-chat__message--other .str-chat__message-inner { - margin-inline-end: 0; - } - - .str-chat__message--me .str-chat__message-inner { - margin-inline-start: 0; - } - } - } -} - -// Message options display - second mode: they appear when .str-chat__message-inner is hovered -.str-chat__ul.str-chat__message-options-in-bubble, -.str-chat__virtual-list.str-chat__message-options-in-bubble { - .str-chat__message-inner { - &:hover { - .str-chat__message-options { - display: flex; - } - } - } - - .str-chat__message--other .str-chat__message-inner:hover { - margin-inline-end: 0; - } - - .str-chat__message--me .str-chat__message-inner:hover { - margin-inline-start: 0; - } } // Message options display - third mode: they appear, when explicitly marked as active @@ -659,10 +554,6 @@ .str-chat__message-options { display: none; } - - .str-chat__message-actions-open.str-chat__message-options { - display: flex; - } } .str-chat__message-inner:focus-within { @@ -719,13 +610,13 @@ .str-chat__message-with-thread-link { &.str-chat__message--other { .str-chat__message-bubble { - border-end-start-radius: calc(var(--str-chat__border-radius-md) / 6); + border-end-start-radius: calc(var(--radius-md) / 6); } } &.str-chat__message--me { .str-chat__message-bubble { - border-end-end-radius: calc(var(--str-chat__border-radius-md) / 6); + border-end-end-radius: calc(var(--radius-md) / 6); } } } @@ -738,27 +629,3 @@ pointer-events: none; } } - -// todo: not implemented in stream-chat-react -.str-chat__message-with-touch-support { - .str-chat__message-bubble { - -webkit-touch-callout: none; - -webkit-user-select: none; - user-select: none; - } - - &.str-chat__message-menu-opened { - .str-chat__attachments-container, - .str-chat__message-text-inner { - pointer-events: none; - } - } - - .str-chat__message-inner { - margin-inline: 0; - } - - .str-chat__message-options { - display: none; - } -} diff --git a/src/components/Message/styling/MessageStatus.scss b/src/components/Message/styling/MessageStatus.scss index c8397a5720..7c232082d4 100644 --- a/src/components/Message/styling/MessageStatus.scss +++ b/src/components/Message/styling/MessageStatus.scss @@ -3,7 +3,7 @@ display: flex; align-items: center; justify-content: center; - column-gap: var(--str-chat__spacing-0_5); + column-gap: var(--space-2); position: relative; color: var(--chat-text-timestamp); svg { diff --git a/src/components/MessageList/styling/ScrollToLatestMessageButton.scss b/src/components/MessageList/styling/ScrollToLatestMessageButton.scss index 6cc83274cb..8e7e4b6eba 100644 --- a/src/components/MessageList/styling/ScrollToLatestMessageButton.scss +++ b/src/components/MessageList/styling/ScrollToLatestMessageButton.scss @@ -25,7 +25,7 @@ .str-chat__jump-to-latest__unread-count { position: absolute; inset-block-end: 100%; - margin-block-end: var(--str-chat__spacing-1); + margin-block-end: var(--space-4); right: -15%; top: -15%; } diff --git a/src/components/MessageList/styling/VirtualizedMessageList.scss b/src/components/MessageList/styling/VirtualizedMessageList.scss index b537c3727b..984a35ae0b 100644 --- a/src/components/MessageList/styling/VirtualizedMessageList.scss +++ b/src/components/MessageList/styling/VirtualizedMessageList.scss @@ -58,7 +58,7 @@ // a simple workaround is to make the loading indicator an overlay. &__loading { display: flex; - padding-top: var(--str-chat__spacing-2); + padding-top: var(--space-8); justify-content: center; width: 100%; position: absolute; diff --git a/src/components/Thread/styling/ThreadHeader.scss b/src/components/Thread/styling/ThreadHeader.scss index c9c7b0f119..45ebe24fd9 100644 --- a/src/components/Thread/styling/ThreadHeader.scss +++ b/src/components/Thread/styling/ThreadHeader.scss @@ -31,11 +31,11 @@ @include utils.component-layer-overrides('thread-header'); .str-chat__thread-header-title { - font: var(--str-chat__subtitle-medium-text); + font: var(--str-chat__heading-sm-text); } .str-chat__thread-header-subtitle { - font: var(--str-chat__body-text); + font: var(--str-chat__caption-default-text); color: var(--str-chat__thread-header-info-color); } diff --git a/src/components/Tooltip/styling/Tooltip.scss b/src/components/Tooltip/styling/Tooltip.scss index 6ac3b1f49b..d4238e4eaa 100644 --- a/src/components/Tooltip/styling/Tooltip.scss +++ b/src/components/Tooltip/styling/Tooltip.scss @@ -30,11 +30,11 @@ @include utils.component-layer-overrides('tooltip'); @include utils.prevent-glitch-text-overflow; display: flex; - padding: var(--str-chat__spacing-2); + padding: var(--space-8); z-index: 1; max-width: calc(var(--str-chat__spacing-px) * 150); width: max-content; - font: var(--str-chat__caption-text); + font: var(--str-chat__metadata-emphasis-text); &::after { background-color: var(--str-chat__tooltip-background-color); diff --git a/src/styling/_global-layout-variables.scss b/src/styling/_global-layout-variables.scss index a2719e3c42..f151ebde95 100644 --- a/src/styling/_global-layout-variables.scss +++ b/src/styling/_global-layout-variables.scss @@ -1,58 +1,4 @@ .str-chat { /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */ --str-chat__spacing-px: 1px; - - /* Used for margins and paddings */ - --str-chat__spacing-0_5: var(--space-2); - - /* Used for margins and paddings */ - --str-chat__spacing-1: var(--space-4); - - /* Used for margins and paddings */ - --str-chat__spacing-1_5: calc(var(--space-4) + var(--space-2)); - - /* Used for margins and paddings */ - --str-chat__spacing-2: var(--space-8); - - /* Used for margins and paddings */ - --str-chat__spacing-2_5: calc(var(--space-8) + var(--space-2)); - - /* Used for margins and paddings */ - --str-chat__spacing-3: calc(var(--space-8) + var(--space-4)); - - /* Used for margins and paddings */ - --str-chat__spacing-3_5: calc(var(--space-12) + var(--space-2)); - - /* Used for margins and paddings */ - --str-chat__spacing-4: var(--space-16); // 16px by default - - /* Used for margins and paddings */ - --str-chat__spacing-5: var(--space-20); - - /* Used for margins and paddings */ - --str-chat__spacing-6: var(--space-24); - - /* Used for margins and paddings */ - --str-chat__spacing-7: calc(var(--space-24) + var(--space-4)); - - /* Used for margins and paddings */ - --str-chat__spacing-8: var(--space-32); - - /* Used for margins and paddings */ - --str-chat__spacing-9: calc(var(--space-32) + var(--space-4)); - - /* Used for margins and paddings */ - --str-chat__spacing-10: var(--space-40); - - /* Used for margins and paddings */ - --str-chat__spacing-11: calc(var(--space-40) + var(--space-4)); - - /* Used for margins and paddings */ - --str-chat__spacing-12: calc(var(--space-48)); - - /* Used for margins and paddings */ - --str-chat__spacing-14: calc(var(--space-48) + var(--space-8)); - - /* Used for margins and paddings */ - --str-chat__spacing-16: var(--space-64); } diff --git a/src/styling/_global-theme-variables.scss b/src/styling/_global-theme-variables.scss index 8af4b973ea..2a98b13287 100644 --- a/src/styling/_global-theme-variables.scss +++ b/src/styling/_global-theme-variables.scss @@ -1,34 +1,4 @@ .str-chat { - /* Border radius used for squared elements */ - --str-chat__border-radius-none: var(--radius-none); - - /* Border radius used for subtle rounding */ - --str-chat__border-radius-xxs: var(--radius-xxs); - - /* Border radius used for subtle rounding */ - --str-chat__border-radius-xs: var(--radius-xs); - - /* Border radius used for slightly rounded elements */ - --str-chat__border-radius-sm: var(--radius-sm); - - /* Border radius used for slightly rounded elements */ - --str-chat__border-radius-md: var(--radius-md); - - /* Border radius used for rounded elements */ - --str-chat__border-radius-lg: var(--radius-lg); - - /* Border radius used for rounded elements */ - --str-chat__border-radius-xl: var(--radius-xl); - - /* Border radius used for rounded elements */ - --str-chat__border-radius-2xl: var(--radius-2xl); - - /* Border radius used for rounded elements */ - --str-chat__border-radius-3xl: var(--radius-3xl); - - /* Border radius used for rounded elements */ - --str-chat__border-radius-4xl: var(--radius-4xl); - /* Border radius used for circular elements */ --str-chat__border-radius-circle: var(--radius-max); @@ -46,11 +16,11 @@ var(--str-chat__font-family); --str-chat__caption-emphasis-text: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-sm) / var(--typography-line-height-tight) + var(--typography-font-size-sm) / var(--typography-line-height-normal) var(--str-chat__font-family); --str-chat__caption-default-text: normal var(--typography-font-weight-regular) - var(--typography-font-size-sm) / var(--typography-line-height-tight) + var(--typography-font-size-sm) / var(--typography-line-height-normal) var(--str-chat__font-family); --str-chat__body-emphasis-text: normal var(--typography-font-weight-semi-bold) @@ -84,46 +54,6 @@ var(--typography-font-size-sm) / 100% var(--str-chat__font-family); color: var(--text-primary, #1a1b25); - - // todo: adapt the old text variables to so that they use the new semantic text variables - /* The font used for caption texts */ - --str-chat__caption-text: 0.75rem/1.3 var(--str-chat__font-family); - - /* The font used for caption texts with emphasize */ - --str-chat__caption-medium-text: 500 0.75rem/1.3 var(--str-chat__font-family); - - /* The font used for caption texts with emphasize */ - --str-chat__caption-strong-text: 700 0.75rem/1.3 var(--str-chat__font-family); - - /* The font used for body texts */ - --str-chat__body-text: 0.875rem/1.2 var(--str-chat__font-family); - - /* The font used for body texts with emphasize */ - --str-chat__body-medium-text: 500 0.875rem/1.2 var(--str-chat__font-family); - - /* The font used for body texts */ - --str-chat__body2-text: 0.9375rem/1.2 var(--str-chat__font-family); - - /* The font used for body texts with emphasize */ - --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family); - - /* The font used for subtitle texts */ - --str-chat__subtitle-text: 1rem/1.25 var(--str-chat__font-family); - - /* The font used for subtitle texts with emphasize */ - --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family); - - /* The font used for subtitle texts */ - --str-chat__subtitle2-text: 1.25rem/1.2 var(--str-chat__font-family); - - /* The font used for subtitle texts with emphasize */ - --str-chat__subtitle2-medium-text: 500 1.25rem/1.2 var(--str-chat__font-family); - - /* The font used for headline texts */ - --str-chat__headline-text: 1.5rem/1.2 var(--str-chat__font-family); - - /* The font used for headline texts */ - --str-chat__headline2-text: 1.8rem/1.2 var(--str-chat__font-family); } .str-chat, @@ -131,15 +61,6 @@ /* Used for emphasis, brands can inject their main color using this variable */ --str-chat__primary-color: var(--accent-primary); - /* Used for emphasised overlays - color of --str-chat__primary-color with alpha channel */ - --str-chat__primary-overlay-color: rgba(0, 95, 255, 0.6); - - /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */ - --str-chat__primary-color-low-emphasis: var(--str-chat__blue300); - - /* Used to indicate that a UI element with primary color is in an active state */ - --str-chat__active-primary-color: var(--str-chat__blue600); - /* If the primary color is used as a background, text/icons are displayed in this color */ --str-chat__on-primary-color: var(--str-chat__grey50); @@ -149,12 +70,6 @@ /* Used as a background color for the main chat UI components */ --str-chat__secondary-background-color: var(--str-chat__grey50); - /* Used as a background color to give emphasis, but less vibrant than the primary color */ - --str-chat__primary-surface-color: var(--str-chat__blue100); - - /* Used as a background color to give emphasis, but less vibrant than the primary surface color */ - --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue50); - /* A neutral color used to give emphasis to different surfaces */ --str-chat__surface-color: var(--str-chat__grey300); @@ -173,9 +88,6 @@ /* Used for displaying disabled UI elements (typically buttons) */ --str-chat__disabled-color: var(--str-chat__grey400); - /* Used for text/icon colors if disabled color is used as a background color */ - --str-chat__on-disabled-color: var(--str-chat__grey50); - /* Used for error messages, and destructive actions */ --str-chat__danger-color: var(--str-chat__red400); @@ -188,21 +100,12 @@ /* Used for text/icon colors if unread badge color is used as a background color */ --str-chat__on-unread-badge-color: var(--str-chat__grey50); - /* The background color used for overlays */ - --str-chat__overlay-color: rgba(252, 252, 252, 0.9); - /* The background color used for subtle overlays */ --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.2); /* The text/icon color used on subtle overlays */ --str-chat__secondary-overlay-text-color: var(--str-chat__grey50); - /* The background color used for opaque surfaces */ - --str-chat__opaque-surface-background-color: rgba(0, 0, 0, 0.8); - - /* The text color used on opaque surfaces */ - --str-chat__opaque-surface-text-color: var(--str-chat__grey50); - /* If a component has a box shadow applied to it, this will be the color used for the shadow */ --str-chat__box-shadow-color: rgba(0, 0, 0, 0.18); @@ -216,30 +119,21 @@ .str-chat__theme-dark { --str-chat__primary-color: var(--accent-primary); - --str-chat__primary-overlay-color: rgba(51, 126, 255, 0.6); - --str-chat__primary-color-low-emphasis: var(--str-chat__blue700); - --str-chat__active-primary-color: var(--str-chat__blue600); --str-chat__on-primary-color: var(--str-chat__grey50); --str-chat__background-color: var(--str-chat__grey950); --str-chat__secondary-background-color: var(--str-chat__grey900); - --str-chat__primary-surface-color: var(--str-chat__blue900); - --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue950); --str-chat__surface-color: var(--str-chat__grey700); --str-chat__secondary-surface-color: var(--str-chat__grey800); --str-chat__tertiary-surface-color: var(--str-chat__grey900); --str-chat__text-color: var(--str-chat__grey50); --str-chat__text-low-emphasis-color: var(--str-chat__grey500); --str-chat__disabled-color: var(--str-chat__grey600); - --str-chat__on-disabled-color: var(--str-chat__grey50); --str-chat__danger-color: var(--str-chat__red600); --str-chat__message-highlight-color: var(--str-chat__yellow900); --str-chat__unread-badge-color: var(--str-chat__red400); --str-chat__on-unread-badge-color: var(--str-chat__grey50); - --str-chat__overlay-color: rgba(0, 0, 0, 0.7); --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.4); --str-chat__secondary-overlay-text-color: var(--str-chat__grey50); - --str-chat__opaque-surface-background-color: rgba(250, 250, 250, 0.85); - --str-chat__opaque-surface-text-color: var(--str-chat__grey900); --str-chat__box-shadow-color: rgba(0, 0, 0, 0.8); --str-chat__info-color: var(--str-chat__green500); } From aa62135acb130d1bcdc238e2c50481a2cf5935eb Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Tue, 31 Mar 2026 09:57:35 +0200 Subject: [PATCH 3/4] Fix tests --- .../MediaAttachmentPreview.tsx | 2 +- .../AttachmentPreviewList.test.tsx.snap | 108 +++++++----------- 2 files changed, 41 insertions(+), 69 deletions(-) diff --git a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx index f77a9bb1ba..8336ab399b 100644 --- a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx +++ b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx @@ -94,7 +94,7 @@ export const MediaAttachmentPreview = ({ )}
- {isUploading && } + {isUploading && } {isVideoAttachment(attachment) && !hasUploadError && diff --git a/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap b/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap index 35a005ca97..c23c44348f 100644 --- a/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap +++ b/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap @@ -31,41 +31,27 @@ exports[`AttachmentPreviewList > should render custom BaseImage component 1`] =
-
- - - - - - - - - -
+ + +