From 0f15a04fbdbf68a9e21ecea9db5218dd34b5b49e Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Tue, 14 Apr 2026 10:41:52 +0200 Subject: [PATCH 1/8] Gallery related fixes --- src/components/Gallery/GalleryUI.tsx | 2 +- .../__snapshots__/Image.test.tsx.snap | 2 +- src/components/Gallery/styling/Gallery.scss | 50 ++++++++----------- 3 files changed, 24 insertions(+), 30 deletions(-) diff --git a/src/components/Gallery/GalleryUI.tsx b/src/components/Gallery/GalleryUI.tsx index cde465c59..4112fd415 100644 --- a/src/components/Gallery/GalleryUI.tsx +++ b/src/components/Gallery/GalleryUI.tsx @@ -219,7 +219,7 @@ export const GalleryUI = () => { ref={containerRef} >
should render component with default props 1`] = ` class="str-chat__gallery__slide-container" >
Date: Tue, 14 Apr 2026 10:42:03 +0200 Subject: [PATCH 2/8] Prompt related fixes --- src/components/Dialog/styling/Prompt.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Dialog/styling/Prompt.scss b/src/components/Dialog/styling/Prompt.scss index 33b0a9c9f..be6e7d755 100644 --- a/src/components/Dialog/styling/Prompt.scss +++ b/src/components/Dialog/styling/Prompt.scss @@ -32,6 +32,10 @@ .str-chat__prompt__header__close-button { flex-shrink: 0; color: var(--text-primary); + .str-chat__icon { + width: var(--icon-size-md); + height: var(--icon-size-md); + } } } From 20a6ca9bc7d0982c14d45825e74744a5ba1d4347 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Tue, 14 Apr 2026 10:42:25 +0200 Subject: [PATCH 3/8] ChannelListItem related fixes --- .../ChannelListItemActionButtons.defaults.tsx | 335 +++++++++--------- .../styling/ChannelListItem.scss | 4 +- 2 files changed, 163 insertions(+), 176 deletions(-) diff --git a/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx b/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx index 1138b4cfa..385dd798e 100644 --- a/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx +++ b/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx @@ -145,82 +145,9 @@ type ChannelActionItem = Component: React.ComponentType>; }; -export const defaultChannelActionSet: ChannelActionItem[] = [ - { - // eslint-disable-next-line react/display-name - Component: forwardRef((_, ref) => { - const { channel } = useChannelListItemContext(); - - const dialogId = ChannelListItemActionButtons.getDialogId({ - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - channelId: channel.id!, - }); - const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId }); - const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id); - - return ( - - ); - }), - placement: 'quick-dropdown-toggle', - }, - { - Component() { - const behaviorProps = useArchiveActionButtonBehavior(); - - return ( - - ); - }, - placement: 'quick', - type: 'archive', - }, - { - Component() { - const behaviorProps = useMuteActionButtonBehavior(); - - return ( - - ); - }, - placement: 'quick', - type: 'mute', - }, - { - Component() { +const defaultComponents = { + dropdown: { + Archive() { const behaviorProps = useArchiveActionButtonBehavior(); return ( @@ -233,28 +160,7 @@ export const defaultChannelActionSet: ChannelActionItem[] = [ ); }, - placement: 'dropdown', - type: 'archive', - }, - { - Component() { - const behaviorProps = useMuteActionButtonBehavior(); - - return ( - - {behaviorProps.title} - - ); - }, - placement: 'dropdown', - type: 'mute', - }, - { - Component() { + Ban() { const { client } = useChatContext(); const { addNotification } = useNotificationApi(); const { t } = useTranslationContext(); @@ -326,11 +232,72 @@ export const defaultChannelActionSet: ChannelActionItem[] = [ ); }, - placement: 'dropdown', - type: 'ban', - }, - { - Component() { + Leave() { + const { t } = useTranslationContext(); + const { channel } = useChannelListItemContext(); + const { client } = useChatContext(); + const { addNotification } = useNotificationApi(); + const [inProgress, setInProgress] = useState(false); + + const title = t('Leave Channel'); + + return ( + { + e.stopPropagation(); + try { + setInProgress(true); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + await channel.removeMembers([client.userID!]); + addNotification({ + context: { + channel, + }, + emitter: ChannelListItemActionButtons.name, + message: t('Left channel'), + severity: 'success', + type: 'api:channel:leave:success', + }); + } catch (error) { + addNotification({ + context: { + channel, + }, + emitter: ChannelListItemActionButtons.name, + error: + error instanceof Error ? error : new Error('An unknown error occurred'), + message: t('Failed to leave channel'), + severity: 'error', + type: 'api:channel:leave:failed', + }); + } finally { + setInProgress(false); + } + }} + title={title} + variant='destructive' + > + {title} + + ); + }, + Mute() { + const behaviorProps = useMuteActionButtonBehavior(); + + return ( + + {behaviorProps.title} + + ); + }, + Pin() { const { t } = useTranslationContext(); const { addNotification } = useNotificationApi(); const { channel } = useChannelListItemContext(); @@ -400,62 +367,101 @@ export const defaultChannelActionSet: ChannelActionItem[] = [ ); }, - placement: 'dropdown', - type: 'pin', }, - { - Component() { - const { t } = useTranslationContext(); - const { channel } = useChannelListItemContext(); - const { client } = useChatContext(); - const { addNotification } = useNotificationApi(); - const [inProgress, setInProgress] = useState(false); + quick: { + Archive() { + const behaviorProps = useArchiveActionButtonBehavior(); - const title = t('Leave Channel'); + return ( + + ); + }, + Mute() { + const behaviorProps = useMuteActionButtonBehavior(); return ( - { - e.stopPropagation(); - try { - setInProgress(true); - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - await channel.removeMembers([client.userID!]); - addNotification({ - context: { - channel, - }, - emitter: ChannelListItemActionButtons.name, - message: t('Left channel'), - severity: 'success', - type: 'api:channel:leave:success', - }); - } catch (error) { - addNotification({ - context: { - channel, - }, - emitter: ChannelListItemActionButtons.name, - error: - error instanceof Error ? error : new Error('An unknown error occurred'), - message: t('Failed to leave channel'), - severity: 'error', - type: 'api:channel:leave:failed', - }); - } finally { - setInProgress(false); - } - }} - title={title} - variant='destructive' + ); }, + }, + QuickDropdownToggle: forwardRef((_, ref) => { + const { channel } = useChannelListItemContext(); + + const dialogId = ChannelListItemActionButtons.getDialogId({ + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + channelId: channel.id!, + }); + const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId }); + const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id); + + return ( + + ); + }), +}; + +defaultComponents.QuickDropdownToggle.displayName = 'QuickDropdownToggle'; + +export const defaultChannelActionSet: ChannelActionItem[] = [ + { + Component: defaultComponents.QuickDropdownToggle, + placement: 'quick-dropdown-toggle', + }, + { + Component: defaultComponents.quick.Mute, + placement: 'quick', + type: 'mute', + }, + { + Component: defaultComponents.dropdown.Archive, + placement: 'dropdown', + type: 'archive', + }, + { + Component: defaultComponents.dropdown.Ban, + placement: 'dropdown', + type: 'ban', + }, + { + Component: defaultComponents.dropdown.Pin, + placement: 'dropdown', + type: 'pin', + }, + { + Component: defaultComponents.dropdown.Leave, placement: 'dropdown', type: 'leave', }, @@ -464,11 +470,6 @@ export const defaultChannelActionSet: ChannelActionItem[] = [ export const useBaseChannelActionSetFilter = (channelActionSet: ChannelActionItem[]) => { const { channel } = useChannelListItemContext(); const membership = useChannelMembershipState(channel); - const isDirectMessageChannel = - channel.type === 'messaging' && - // assuming one of the users is current user - channel.data?.member_count === 2 && - channel.id?.startsWith('!members-'); const memberCount = channel.data?.member_count ?? 0; const connectedUserIsMember = typeof membership.user !== 'undefined'; @@ -480,17 +481,9 @@ export const useBaseChannelActionSetFilter = (channelActionSet: ChannelActionIte switch (action.type) { case 'archive': - return ( - connectedUserIsMember && - ((action.placement === 'quick' && isDirectMessageChannel) || - (action.placement === 'dropdown' && !isDirectMessageChannel)) - ); + return connectedUserIsMember; case 'mute': - return ( - ownCapabilities?.includes('mute-channel') && - ((action.placement === 'dropdown' && isDirectMessageChannel) || - (action.placement === 'quick' && !isDirectMessageChannel)) - ); + return ownCapabilities?.includes('mute-channel'); case 'ban': return ( memberCount > 0 && @@ -507,11 +500,5 @@ export const useBaseChannelActionSetFilter = (channelActionSet: ChannelActionIte }); return filtered; - }, [ - channelActionSet, - isDirectMessageChannel, - memberCount, - ownCapabilities, - connectedUserIsMember, - ]); + }, [channelActionSet, memberCount, ownCapabilities, connectedUserIsMember]); }; diff --git a/src/components/ChannelListItem/styling/ChannelListItem.scss b/src/components/ChannelListItem/styling/ChannelListItem.scss index 21c250cbd..59bf1ce75 100644 --- a/src/components/ChannelListItem/styling/ChannelListItem.scss +++ b/src/components/ChannelListItem/styling/ChannelListItem.scss @@ -103,8 +103,8 @@ & > .str-chat__icon--mute { color: var(--text-tertiary); - width: var(--icon-size-md); - height: var(--icon-size-md); + width: var(--icon-size-sm); + height: var(--icon-size-sm); } } From 73effd31c18f1c33e06ade2c9cf09dccdb367abd Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Tue, 14 Apr 2026 16:40:39 +0200 Subject: [PATCH 4/8] Fix resize handle color --- examples/vite/src/index.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss index 301e9039d..1c6f188d6 100644 --- a/examples/vite/src/index.scss +++ b/examples/vite/src/index.scss @@ -143,6 +143,7 @@ body { min-width: 1px; height: 100%; z-index: 1; + background: var(--border-core-default); } .app-chat-resize-handle__hitbox { @@ -164,7 +165,7 @@ body { .app-chat-resize-handle__line { width: 1px; height: 100%; - background: var(--str-chat__surface-color); + background: transparent; } .app-chat-resize-handle--thread { From de84bd1ac88fe8eccd54796f0f91ec25ba2d47b9 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Wed, 15 Apr 2026 14:51:15 +0200 Subject: [PATCH 5/8] Variable cleanup --- .../styling/AIStateIndicator.scss | 4 +- .../Attachment/styling/Attachment.scss | 112 ++------------ .../Attachment/styling/AttachmentActions.scss | 4 +- src/components/Attachment/styling/Audio.scss | 14 +- .../Attachment/styling/Geolocation.scss | 19 +-- src/components/Attachment/styling/Giphy.scss | 4 +- .../Attachment/styling/LinkPreview.scss | 2 +- .../Attachment/styling/ModalGallery.scss | 6 +- .../styling/UnsupportedAttachment.scss | 11 +- .../Attachment/styling/VoiceRecording.scss | 20 +-- .../styling/DurationDisplay.scss | 6 - .../styling/PlaybackRateButton.scss | 12 +- .../AudioPlayback/styling/ProgressBar.scss | 15 +- .../styling/WaveProgressBar.scss | 2 +- src/components/Badge/styling/Badge.scss | 4 +- src/components/Badge/styling/MediaBadge.scss | 2 +- src/components/Button/styling/Button.scss | 6 +- src/components/Channel/styling/Channel.scss | 39 +++-- .../ChannelHeader/styling/ChannelHeader.scss | 4 +- .../ChannelList/styling/ChannelList.scss | 12 +- .../styling/ChannelListHeader.scss | 2 +- src/components/ChatView/styling/ChatView.scss | 10 +- .../DateSeparator/styling/DateSeparator.scss | 8 +- src/components/Dialog/styling/Alert.scss | 4 +- src/components/Dialog/styling/Callout.scss | 2 +- .../Dialog/styling/ContextMenu.scss | 2 +- src/components/Dialog/styling/Prompt.scss | 4 +- src/components/Dialog/styling/Viewer.scss | 4 +- .../styling/DragAndDropContainer.scss | 4 +- .../styling/EmptyStateIndicator.scss | 2 +- src/components/Form/styling/DropDown.scss | 2 +- src/components/Form/styling/SwitchField.scss | 4 +- src/components/Gallery/styling/Gallery.scss | 10 +- .../Loading/styling/LoadingChannels.scss | 10 +- .../Location/styling/ShareLocationDialog.scss | 4 +- .../AudioRecorder/styling/AudioRecorder.scss | 10 +- src/components/Message/styling/Message.scss | 86 +++++------ .../MessageAlsoSentInChannelIndicator.scss | 4 +- .../styling/MessageRepliesCountButton.scss | 10 +- .../Message/styling/MessageSystem.scss | 2 +- .../styling/MessageTranslationIndicator.scss | 4 +- .../Message/styling/QuotedMessage.scss | 8 +- .../Message/styling/ReminderNotification.scss | 8 +- .../styling/MessageActions.scss | 6 - .../styling/AttachmentPreview.scss | 2 +- .../MessageComposer/styling/CommandChip.scss | 2 +- .../styling/DropzoneContainer.scss | 2 +- .../styling/GeologacationPreview.scss | 4 +- .../styling/LinkPreviewList.scss | 12 +- .../styling/QuotedMessageIndicator.scss | 2 +- .../styling/SendToChannelCheckbox.scss | 2 +- .../styling/UnsupportedAttachmentPreview.scss | 11 +- .../MessageList/styling/MessageList.scss | 8 +- .../styling/NewMessageNotification.scss | 2 +- .../styling/UnreadMessageNotification.scss | 2 +- .../styling/UnreadMessagesSeparator.scss | 2 +- .../styling/VirtualizedMessageList.scss | 4 +- src/components/Modal/styling/Modal.scss | 4 +- .../Notifications/styling/Notification.scss | 2 +- src/components/Poll/styling/Poll.scss | 59 ++------ .../Poll/styling/PollAnswerList.scss | 2 +- .../Poll/styling/PollOptionList.scss | 25 +--- src/components/Poll/styling/PollQuestion.scss | 4 +- src/components/Poll/styling/PollResults.scss | 8 +- src/components/Poll/styling/PollVote.scss | 2 +- .../Reactions/styling/MessageReactions.scss | 2 +- .../styling/MessageReactionsDetail.scss | 6 +- .../Reactions/styling/ReactionSelector.scss | 2 +- src/components/Search/styling/Search.scss | 2 +- src/components/Thread/styling/Thread.scss | 8 +- src/components/Thread/styling/ThreadHead.scss | 2 +- .../Thread/styling/ThreadHeader.scss | 11 +- .../ThreadList/styling/ThreadList.scss | 8 +- .../ThreadList/styling/ThreadListHeader.scss | 2 +- .../Threads/styling/UnreadCountBadge.scss | 5 +- src/components/Tooltip/styling/Tooltip.scss | 4 +- .../styling/TypingIndicator.scss | 8 +- src/styling/_global-layout-variables.scss | 4 - src/styling/_global-theme-variables.scss | 139 ------------------ src/styling/_palette-variables.scss | 20 --- src/styling/index.scss | 3 - src/styling/variables/font.scss | 23 ++- 82 files changed, 269 insertions(+), 649 deletions(-) delete mode 100644 src/styling/_global-layout-variables.scss delete mode 100644 src/styling/_global-theme-variables.scss delete mode 100644 src/styling/_palette-variables.scss diff --git a/src/components/AIStateIndicator/styling/AIStateIndicator.scss b/src/components/AIStateIndicator/styling/AIStateIndicator.scss index 47abbaf31..d22188dae 100644 --- a/src/components/AIStateIndicator/styling/AIStateIndicator.scss +++ b/src/components/AIStateIndicator/styling/AIStateIndicator.scss @@ -1,8 +1,8 @@ .str-chat__ai-state-indicator-container { padding: 0 8px; - background-color: var(--str-chat__grey300); + background-color: var(--background-core-surface); } .str-chat__ai-state-indicator-text { - color: var(--str-chat__text-color); + color: var(--text-primary); } diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index e3e7a8e0f..ddbbcd12d 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -7,7 +7,7 @@ --str-chat__attachment-list-border-radius: 0; /* The text/icon color of the component */ - --str-chat__attachment-list-color: var(--str-chat__text-color); + --str-chat__attachment-list-color: var(--text-primary); /* The background color of the component */ --str-chat__attachment-list-background-color: transparent; @@ -33,7 +33,7 @@ ); /* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-color: var(--str-chat__text-color); + --str-chat__image-attachment-color: var(--text-primary); /* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ --str-chat__image-attachment-background-color: transparent; @@ -59,7 +59,7 @@ ); /* The text/icon color of image gallery attachments */ - --str-chat__image-gallery-attachment-color: var(--str-chat__text-color); + --str-chat__image-gallery-attachment-color: var(--text-primary); /* The background color of image gallery attachments */ --str-chat__image-gallery-attachment-background-color: transparent; @@ -79,51 +79,13 @@ /* Box shadow applied to image gallery attachments */ --str-chat__image-gallery-attachment-box-shadow: none; - /* Overlay color applied to image gallery attachments */ - --str-chat__image-gallery-attachment-overlay: var(--str-chat__secondary-overlay-color); - - /* Text colors used on overlay applied to image gallery attachments */ - --str-chat__image-gallery-attachment-overlay-text-color: var( - --str-chat__secondary-overlay-text-color - ); - - /* The border radius used for the borders of card attachments */ - --str-chat__card-attachment-border-radius: 0; - - /* The text/icon color of card attachments */ - --str-chat__card-attachment-color: var(--str-chat__text-color); - - /* The text color of links inside card attachments */ - --str-chat__card-attachment-link-color: var(--str-chat__primary-color); - - /* The background color of card attachments */ - --str-chat__card-attachment-background-color: transparent; - - /* Top border of card attachments */ - --str-chat__card-attachment-border-block-start: none; - - /* Bottom border of card attachments */ - --str-chat__card-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of card attachments */ - --str-chat__card-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of card attachments */ - --str-chat__card-attachment-border-inline-end: none; - - /* Box shadow applied to card attachments */ - --str-chat__card-attachment-box-shadow: none; - /* The border radius used for the borders of file attachments */ --str-chat__file-attachment-border-radius: calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) ); /* The text/icon color of file attachments */ - --str-chat__file-attachment-color: var(--str-chat__text-color); - - /* The text/icon color of file attachments for low emphasis texts (for example file size) */ - --str-chat__file-attachment-secondary-color: var(--str-chat__text-low-emphasis-color); + --str-chat__file-attachment-color: var(--text-primary); /* The background color of file attachments */ --str-chat__file-attachment-background-color: transparent; @@ -142,42 +104,6 @@ /* Box shadow applied to file attachments */ --str-chat__file-attachment-box-shadow: none; - - /* Border radius applied to the play / pause button of audio widget */ - --str-chat__audio-attachment-controls-button-border-radius: var( - --str-chat__border-radius-circle - ); - - /* Text color applied to audio widget's play / pause button */ - --str-chat__audio-attachment-controls-button-color: var(--str-chat__text-color); - - /* Background color applied to audio widget's play / pause button */ - --str-chat__audio-attachment-controls-button-background-color: var( - --str-chat__secondary-background-color - ); - - /* Background color applied to audio widget's play / pause button when in pressed (active) state */ - --str-chat__audio-attachment-controls-button-pressed-background-color: var( - --str-chat__surface-color - ); - - /* Top border of audio widget's play / pause button */ - --str-chat__audio-attachment-controls-button-border-block-start: none; - - /* Bottom border of audio widget's play / pause button */ - --str-chat__audio-attachment-controls-button-border-block-end: none; - - /* Left (right in RTL layout) border of audio widget's play / pause button */ - --str-chat__audio-attachment-controls-button-border-inline-start: none; - - /* Right (left in RTL layout) border of audio widget's play / pause button */ - --str-chat__audio-attachment-controls-button-border-inline-end: none; - - // todo: we need to solve whether we want to keep the CSS variables. E.g. --str-chat__circle-fab-box-shadow is not declared. - /* Box shadow applied to audio widget's play / pause button */ - --str-chat__audio-attachment-controls-button-box-shadow: var( - --str-chat__circle-fab-box-shadow - ); } .str-chat__attachment-list { @@ -204,12 +130,12 @@ .str-chat__message-attachment { overflow: hidden; - background-color: var(--chat-bg-attachment-incoming); + background-color: var(--chat-bg-attachment); border-radius: var(--message-bubble-radius-attachment); // Many classes to increase selector specificity .str-chat__button-play.str-chat__button--secondary.str-chat__button--outline { - border-color: var(--chat-border-on-chat-incoming); + border-color: var(--chat-border-on-chat); background-color: transparent; } } @@ -365,7 +291,7 @@ } .str-chat__message-attachment-download-icon { - --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16); + --str-chat-icon-height: var(--size-16); } } @@ -383,12 +309,12 @@ } .str-chat__message-bubble { - border: 1px solid var(--chat-border-incoming); + border: 1px solid var(--chat-border); box-shadow: var(--background-core-elevation-0); } .str-chat__message-attachment { - background-color: var(--chat-bg-incoming); + background-color: var(--chat-bg); } } @@ -396,26 +322,6 @@ .str-chat__attachment-list { align-items: flex-end; } - - .str-chat__message-attachment { - background-color: var(--chat-bg-attachment-outgoing); - border-radius: var(--message-bubble-radius-attachment); - - .str-chat__button-play.str-chat__button--secondary.str-chat__button--outline { - border-color: var(--chat-border-on-chat-outgoing); - } - } - - &.str-chat__message--has-single-attachment.str-chat__message--has-no-text { - .str-chat__message-bubble { - border: 1px solid var(--chat-border-outgoing); - box-shadow: var(--background-core-elevation-0); - } - - .str-chat__message-attachment { - background-color: var(--chat-bg-outgoing); - } - } } .str-chat__li--single, diff --git a/src/components/Attachment/styling/AttachmentActions.scss b/src/components/Attachment/styling/AttachmentActions.scss index c6d838f19..ca7f086d7 100644 --- a/src/components/Attachment/styling/AttachmentActions.scss +++ b/src/components/Attachment/styling/AttachmentActions.scss @@ -50,10 +50,10 @@ --str-chat__attachment-action-box-shadow: none; /* The text/icon color of an attachment action while in pressed state */ - --str-chat__attachment-action-active-color: var(--str-chat__primary-color); + --str-chat__attachment-action-active-color: var(--accent-primary); /* The text/icon color of an attachment action while in pressed state */ - --str-chat__attachment-action-focus-color: var(--str-chat__primary-color); + --str-chat__attachment-action-focus-color: var(--accent-primary); } .str-chat__message-attachment-actions { diff --git a/src/components/Attachment/styling/Audio.scss b/src/components/Attachment/styling/Audio.scss index b286f165b..9331d68c4 100644 --- a/src/components/Attachment/styling/Audio.scss +++ b/src/components/Attachment/styling/Audio.scss @@ -7,12 +7,7 @@ ); /* Text color used in audio widget */ - --str-chat__audio-attachment-widget-color: var(--str-chat__text-color); - - /* Border radius applied audio widget */ - --str-chat__audio-attachment-widget-secondary-color: var( - --str-chat__text-low-emphasis-color - ); + --str-chat__audio-attachment-widget-color: var(--text-primary); /* The text/icon color for low emphasis texts (for example file size) in audio widget */ --str-chat__audio-attachment-widget-background-color: transparent; @@ -52,7 +47,7 @@ } .str-chat__message-attachment-audio-widget--progress-track { - //max-width: calc(var(--str-chat__spacing-px) * 120); + //max-width: 120px } .str-chat__message-attachment-audio-widget--text-first-row { @@ -67,7 +62,7 @@ } .str-chat__message-attachment-audio-widget--title { - font: var(--str-chat__caption-emphasis-text); + font: var(--str-chat__font-caption-emphasis); min-width: 0; overflow: hidden; text-overflow: ellipsis; @@ -79,7 +74,7 @@ .str-chat__duration-display { width: 40px; - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); color: var(--text-secondary); } @@ -90,7 +85,6 @@ gap: var(--spacing-xs); .str-chat__message-attachment-file--item-size { - line-height: calc(var(--str-chat__spacing-px) * 14); font: var(--str-chat__font-metadata-default); } } diff --git a/src/components/Attachment/styling/Geolocation.scss b/src/components/Attachment/styling/Geolocation.scss index 81ee8e73e..48d4b94da 100644 --- a/src/components/Attachment/styling/Geolocation.scss +++ b/src/components/Attachment/styling/Geolocation.scss @@ -7,17 +7,10 @@ ); /* The text/icon color of geolocation attachments */ - --str-chat__geolocation-attachment-color: var(--str-chat__text-color); - - /* The text/icon color of geolocation attachments for low emphasis texts (for example file size) */ - --str-chat__geolocation-attachment-secondary-color: var( - --str-chat__text-low-emphasis-color - ); + --str-chat__geolocation-attachment-color: var(--chat-text); /* The background color of geolocation attachments */ - --str-chat__geolocation-attachment-background-color: var( - --str-chat__secondary-background-color - ); + --str-chat__geolocation-attachment-background-color: var(--chat-bg-attachment); /* Top border of geolocation attachments */ --str-chat__geolocation-attachment-border-block-start: none; @@ -79,8 +72,8 @@ display: flex; justify-content: center; padding: 0.5rem; - background-color: var(--str-chat__tertiary-surface-color); - font: var(--str-chat__caption-default-text); + background-color: var(--background-core-surface-subtle); + font: var(--str-chat__font-caption-default); .str-chat__message-attachment-geolocation__status--active { display: flex; @@ -89,12 +82,12 @@ gap: 0.375rem; .str-chat__message-attachment-geolocation__status--active-status { - color: var(--str-chat__info-color); + color: var(--accent-success); } .str-chat__message-attachment-geolocation__status--active-until { text-transform: lowercase; - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); } } } diff --git a/src/components/Attachment/styling/Giphy.scss b/src/components/Attachment/styling/Giphy.scss index 08346044f..51ffd1829 100644 --- a/src/components/Attachment/styling/Giphy.scss +++ b/src/components/Attachment/styling/Giphy.scss @@ -2,7 +2,7 @@ .str-chat { /* The height of GIFs */ - --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200); + --str-chat__gif-height: 200px; } .str-chat__message-attachment-giphy { @@ -68,7 +68,7 @@ gap: var(--spacing-xs, 8px); align-self: stretch; - color: var(--chat-text-outgoing); + color: var(--chat-text); font-size: var(--typography-font-size-sm); font-weight: var(--typography-font-weight-semi-bold); line-height: var(--typography-line-height-tight); diff --git a/src/components/Attachment/styling/LinkPreview.scss b/src/components/Attachment/styling/LinkPreview.scss index 976bed466..25862e5b2 100644 --- a/src/components/Attachment/styling/LinkPreview.scss +++ b/src/components/Attachment/styling/LinkPreview.scss @@ -20,7 +20,7 @@ line-height: var(--typography-line-height-tight); * { - color: var(--chat-text-incoming); + color: var(--chat-text); } .str-chat__message-attachment-card--header { diff --git a/src/components/Attachment/styling/ModalGallery.scss b/src/components/Attachment/styling/ModalGallery.scss index 40fd53b48..01f06b20d 100644 --- a/src/components/Attachment/styling/ModalGallery.scss +++ b/src/components/Attachment/styling/ModalGallery.scss @@ -3,15 +3,11 @@ .str-chat__message { --str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error); --str-chat__modal-gallery-load-failed-indicator-color: var(--text-inverse); - --str-chat__modal-gallery-loading-background: var(--chat-bg-incoming); + --str-chat__modal-gallery-loading-background: var(--chat-bg); --str-chat__modal-gallery-loading-base: var(--skeleton-loading-base); --str-chat__modal-gallery-loading-highlight: var(--skeleton-loading-highlight); } -.str-chat__message--me { - --str-chat__modal-gallery-loading-background: var(--chat-bg-outgoing); -} - .str-chat__attachment-list { .str-chat__message-attachment--gallery { $max-width: var(--str-chat__attachment-max-width); diff --git a/src/components/Attachment/styling/UnsupportedAttachment.scss b/src/components/Attachment/styling/UnsupportedAttachment.scss index 2784f09f8..c9c2265bb 100644 --- a/src/components/Attachment/styling/UnsupportedAttachment.scss +++ b/src/components/Attachment/styling/UnsupportedAttachment.scss @@ -8,12 +8,7 @@ ); /* The text/icon color of file attachments */ - --str-chat__unsupported-attachment-color: var(--str-chat__text-color); - - /* The text/icon color of file attachments for low emphasis texts (for example file size) */ - --str-chat__unsupported-attachment-secondary-color: var( - --str-chat__text-low-emphasis-color - ); + --str-chat__unsupported-attachment-color: var(--text-primary); /* The background color of file attachments */ --str-chat__unsupported-attachment-background-color: transparent; @@ -43,8 +38,8 @@ column-gap: var(--spacing-xs); .str-chat__icon { - height: calc(var(--str-chat__spacing-px) * 20); - width: calc(var(--str-chat__spacing-px) * 20); + height: var(--size-20); + width: var(--size-20); } .str-chat__message-attachment-unsupported__metadata { diff --git a/src/components/Attachment/styling/VoiceRecording.scss b/src/components/Attachment/styling/VoiceRecording.scss index 4d6e6dd46..48f5314f7 100644 --- a/src/components/Attachment/styling/VoiceRecording.scss +++ b/src/components/Attachment/styling/VoiceRecording.scss @@ -7,12 +7,7 @@ ); /* Text color used in audio recording widget */ - --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color); - - /* Border radius applied to audio recording widget */ - --str-chat__voice-recording-attachment-widget-secondary-color: var( - --str-chat__text-low-emphasis-color - ); + --str-chat__voice-recording-attachment-widget-color: var(--text-primary); /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */ --str-chat__voice-recording-attachment-widget-background-color: transparent; @@ -59,18 +54,15 @@ .str-chat__message-attachment-download-icon { svg { - width: calc(var(--str-chat__spacing-px) * 24); - height: calc(var(--str-chat__spacing-px) * 16); + width: var(--size-24); + height: var(--size-16); } } } - .str-chat__message-attachment__voice-recording-widget__right-section { - } - .str-chat__message-attachment__voice-recording-widget__timer { - min-width: calc(var(--str-chat__spacing-px) * 40); - width: calc(var(--str-chat__spacing-px) * 40); - font: var(--str-chat__metadata-emphasis-text); + min-width: var(--size-40); + width: var(--size-40); + font: var(--str-chat__font-metadata-emphasis); } } diff --git a/src/components/AudioPlayback/styling/DurationDisplay.scss b/src/components/AudioPlayback/styling/DurationDisplay.scss index f4bed37f9..42bc3de36 100644 --- a/src/components/AudioPlayback/styling/DurationDisplay.scss +++ b/src/components/AudioPlayback/styling/DurationDisplay.scss @@ -7,10 +7,4 @@ white-space: nowrap; text-align: center; } - - .str-chat__duration-display--hasProgress { - .str-chat__duration-display__time-elapsed { - color: var(--str-chat__primary-color); - } - } } diff --git a/src/components/AudioPlayback/styling/PlaybackRateButton.scss b/src/components/AudioPlayback/styling/PlaybackRateButton.scss index 3f8d1e6bf..230822d25 100644 --- a/src/components/AudioPlayback/styling/PlaybackRateButton.scss +++ b/src/components/AudioPlayback/styling/PlaybackRateButton.scss @@ -12,9 +12,9 @@ padding: var(--button-padding-y-sm) var(--spacing-xs); background-color: inherit; border-radius: var(--button-radius-lg); - border: 1px solid var(--chat-border-on-chat-incoming); + border: 1px solid var(--chat-border-on-chat); color: var(--control-playback-toggle-text, var(--text-primary)); - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); &:not(:disabled):hover { @include utils.overlay-after(var(--background-utility-hover)); @@ -37,11 +37,3 @@ cursor: default; } } - -.str-chat__message--me { - .str-chat__message-attachment { - .str-chat__playback-rate-button { - border: 1px solid var(--chat-border-on-chat-outgoing); - } - } -} diff --git a/src/components/AudioPlayback/styling/ProgressBar.scss b/src/components/AudioPlayback/styling/ProgressBar.scss index 119cadc9e..22ff4e094 100644 --- a/src/components/AudioPlayback/styling/ProgressBar.scss +++ b/src/components/AudioPlayback/styling/ProgressBar.scss @@ -1,34 +1,33 @@ .str-chat { .str-chat__message-attachment-audio-widget--progress-track { position: relative; - height: calc(var(--str-chat__spacing-px) * 5); + height: var(--size-4); flex: 1; min-width: 0; cursor: pointer; background: linear-gradient( to var(--str-chat__progress-direction, right), - var(--str-chat__primary-color) + var(--chat-waveform-bar-playing) var(--str-chat__message-attachment-audio-widget-progress), - var(--str-chat__disabled-color) - var(--str-chat__message-attachment-audio-widget-progress) + var(--chat-waveform-bar) var(--str-chat__message-attachment-audio-widget-progress) ); [dir='rtl'] & { --str-chat__progress-direction: left; } - border-radius: calc(var(--str-chat__spacing-px) * 5); + border-radius: var(--radius-max); .str-chat__message-attachment-audio-widget--progress-indicator { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); - height: calc(var(--str-chat__spacing-px) * 12); - width: calc(var(--str-chat__spacing-px) * 12); + height: var(--size-12); + width: var(--size-12); border-radius: var(--radius-max); border: 1px solid var(--control-playback-thumb-border-default); background: var(--control-playback-thumb-bg-default); - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); + box-shadow: var(--str-chat__box-shadow-2); cursor: grab; } } diff --git a/src/components/AudioPlayback/styling/WaveProgressBar.scss b/src/components/AudioPlayback/styling/WaveProgressBar.scss index 154ddb068..3855aad9d 100644 --- a/src/components/AudioPlayback/styling/WaveProgressBar.scss +++ b/src/components/AudioPlayback/styling/WaveProgressBar.scss @@ -36,7 +36,7 @@ inset-inline-start: 0; // todo: CSS use semantic variable instead of --base-white border: 2px solid var(--base-white); - box-shadow: var(--light-elevation-3); + box-shadow: var(--str-chat__box-shadow-3); background: var(--accent-neutral); height: 14px; width: 14px; diff --git a/src/components/Badge/styling/Badge.scss b/src/components/Badge/styling/Badge.scss index 8e4004e3b..dd3ad1e4a 100644 --- a/src/components/Badge/styling/Badge.scss +++ b/src/components/Badge/styling/Badge.scss @@ -75,7 +75,7 @@ border: 1px solid var(--border-core-subtle); background: var(--badge-bg-default); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); - font: var(--str-chat__numeric-xl-text); + font: var(--str-chat__font-numeric-xl); color: var(--badge-text); &.str-chat__badge--size-xs { @@ -83,7 +83,7 @@ min-height: 20px; padding-inline: var(--spacing-xxs); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); - font: var(--str-chat__numeric-md-text); + font: var(--str-chat__font-numeric-md); } &.str-chat__badge--size-sm { diff --git a/src/components/Badge/styling/MediaBadge.scss b/src/components/Badge/styling/MediaBadge.scss index 282904048..14ee1ba5b 100644 --- a/src/components/Badge/styling/MediaBadge.scss +++ b/src/components/Badge/styling/MediaBadge.scss @@ -9,7 +9,7 @@ border-radius: var(--radius-max); background: var(--badge-bg-inverse); color: var(--badge-text-on-inverse); - font: var(--str-chat__numeric-md-text); + font: var(--str-chat__font-numeric-md); overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/Button/styling/Button.scss b/src/components/Button/styling/Button.scss index 2c72f6cec..1d31b44d5 100644 --- a/src/components/Button/styling/Button.scss +++ b/src/components/Button/styling/Button.scss @@ -12,7 +12,7 @@ align-items: center; justify-content: center; - font: var(--str-chat__heading-xs-text); + font: var(--str-chat__font-heading-xs); text-transform: capitalize; &.str-chat__button--solid { @@ -107,7 +107,7 @@ } &.str-chat__button--floating { - box-shadow: var(--light-elevation-2); + box-shadow: var(--str-chat__box-shadow-2); } &::after { @@ -176,6 +176,6 @@ } .str-chat__theme-dark .str-chat__button.str-chat__button--floating { - box-shadow: var(--dark-elevation-2); + box-shadow: var(--str-chat__box-shadow-2); } } diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss index c8a5f9b4b..2d922521a 100644 --- a/src/components/Channel/styling/Channel.scss +++ b/src/components/Channel/styling/Channel.scss @@ -44,9 +44,9 @@ } .str-chat__loading-channel { - $header-bar-height: calc(var(--str-chat__spacing-px) * 16); - $metadata-bar-height: calc(var(--str-chat__spacing-px) * 16); - $composer-control-height: calc(var(--str-chat__spacing-px) * 48); + $header-bar-height: var(--size-16); + $metadata-bar-height: var(--size-16); + $composer-control-height: var(--size-48); --str-chat__loading-channel-content-max-width: calc( var(--str-chat__message-composer-max-width) + var(--str-chat__message-composer-padding) @@ -64,13 +64,13 @@ .str-chat__loading-channel-header-name { height: $header-bar-height; - width: calc(var(--str-chat__spacing-px) * 120); + width: 120px; } .str-chat__loading-channel-header-avatar { flex-shrink: 0; - width: calc(var(--str-chat__spacing-px) * 40); - height: calc(var(--str-chat__spacing-px) * 40); + width: var(--size-40); + height: var(--size-40); border-radius: 50%; } } @@ -91,9 +91,8 @@ width: 100%; display: flex; flex-direction: column; - gap: calc(var(--str-chat__spacing-px) * 28); - padding-block: calc(var(--str-chat__spacing-px) * 32) - calc(var(--str-chat__spacing-px) * 24); + gap: var(--size-28); + padding-block: var(--size-32) var(--size-24); .str-chat__loading-channel-message { display: flex; @@ -102,8 +101,8 @@ .str-chat__loading-channel-message-avatar { flex-shrink: 0; - width: calc(var(--str-chat__spacing-px) * 36); - height: calc(var(--str-chat__spacing-px) * 36); + width: 36px; + height: 36px; border-radius: 50%; align-self: end; } @@ -113,7 +112,7 @@ flex-direction: column; width: min(100%, var(--str-chat__message-max-width)); max-width: var(--str-chat__message-max-width); - row-gap: calc(var(--str-chat__spacing-px) * 12); + row-gap: var(--size-12); min-width: 0; } @@ -123,13 +122,13 @@ } .str-chat__loading-channel-message-bubble--md { - height: calc(var(--str-chat__spacing-px) * 64); - width: min(58%, calc(var(--str-chat__spacing-px) * 272)); + height: var(--size-64); + width: min(58%, 272px); } .str-chat__loading-channel-message-bubble--lg { - height: calc(var(--str-chat__spacing-px) * 84); - width: min(72%, calc(var(--str-chat__spacing-px) * 352)); + height: 84px; + width: min(72%, 352px); } .str-chat__loading-channel-message-metadata { @@ -139,11 +138,11 @@ } .str-chat__loading-channel-message-metadata--sm { - width: calc(var(--str-chat__spacing-px) * 88); + width: 88px; } .str-chat__loading-channel-message-metadata--md { - width: calc(var(--str-chat__spacing-px) * 124); + width: 124px; } &.str-chat__loading-channel-message--outgoing { @@ -184,10 +183,10 @@ --str-chat__channel-border-radius: 0; /* The text/icon color of the component */ - --str-chat__channel-color: var(--str-chat__text-color); + --str-chat__channel-color: var(--text-primary); /* The background color of the component */ - --str-chat__channel-background-color: var(--str-chat__background-color); + --str-chat__channel-background-color: transparent; /* Box shadow applied to the component */ --str-chat__channel-box-shadow: none; diff --git a/src/components/ChannelHeader/styling/ChannelHeader.scss b/src/components/ChannelHeader/styling/ChannelHeader.scss index ff93ce633..f27f82f79 100644 --- a/src/components/ChannelHeader/styling/ChannelHeader.scss +++ b/src/components/ChannelHeader/styling/ChannelHeader.scss @@ -56,11 +56,11 @@ } .str-chat__channel-header__data__title { - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); } .str-chat__channel-header__data__subtitle { - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); color: var(--str-chat__channel-header__data__subtitle-color); } } diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss index 0d74f6782..4a8e6cc8b 100644 --- a/src/components/ChannelList/styling/ChannelList.scss +++ b/src/components/ChannelList/styling/ChannelList.scss @@ -5,10 +5,10 @@ --str-chat__channel-list-border-radius: 0; /* The text/icon color of the component */ - --str-chat__channel-list-color: var(--str-chat__text-color); + --str-chat__channel-list-color: var(--text-primary); /* The background color of the component */ - --str-chat__channel-list-background-color: var(--str-chat__secondary-background-color); + --str-chat__channel-list-background-color: var(--background-core-elevation-1); /* Box shadow applied to the component */ --str-chat__channel-list-box-shadow: none; @@ -38,7 +38,7 @@ --str-chat__channel-list-border-inline-start: none; /* Right (left in RTL layout) border of the component */ - --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color); + --str-chat__channel-list-border-inline-end: 1px solid var(--border-core-default); /* The border radius used for the borders of the load more button */ --str-chat__channel-list-load-more-border-radius: var( @@ -92,9 +92,7 @@ ); /* The text/icon color for the empty list state */ - --str-chat__channel-list-empty-indicator-color: var( - --str-chat__text-low-emphasis-color - ); + --str-chat__channel-list-empty-indicator-color: var(--text-secondary); } .str-chat__channel-list { @@ -143,7 +141,7 @@ p { color: var(--text-secondary); - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); } } } diff --git a/src/components/ChannelList/styling/ChannelListHeader.scss b/src/components/ChannelList/styling/ChannelListHeader.scss index b95684a1e..bf22d494c 100644 --- a/src/components/ChannelList/styling/ChannelListHeader.scss +++ b/src/components/ChannelList/styling/ChannelListHeader.scss @@ -6,7 +6,7 @@ .str-chat__channel-list__header__title { flex: 1; - font: var(--str-chat__heading-lg-text); + font: var(--str-chat__font-heading-lg); color: var(--text-primary); } } diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss index 87e4429f2..08b5a4880 100644 --- a/src/components/ChatView/styling/ChatView.scss +++ b/src/components/ChatView/styling/ChatView.scss @@ -1,5 +1,5 @@ .str-chat { - --str-chat-selector-background-color: var(--str-chat__secondary-background-color); + --str-chat-selector-background-color: var(--background-core-elevation-1); --str-chat-selector-border-color: var(--border-core-subtle); --str-chat__chat-view-selector-transition-duration: 180ms; --str-chat__chat-view-selector-transition-easing: ease; @@ -8,10 +8,10 @@ var(--spacing-md) + var(--spacing-md) + var(--spacing-xs) + var(--spacing-xs) + 20px ); - --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color); - --str-chat-selector-button-color-selected: var(--str-chat__text-color); + --str-chat-selector-button-color-default: var(--text-tertiary); + --str-chat-selector-button-color-selected: var(--text-primary); --str-chat-selector-button-background-color-default: transparent; - --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color); + --str-chat-selector-button-background-color-selected: var(--background-core-surface); } .str-chat__chat-view { @@ -51,7 +51,7 @@ gap: 4px; padding: var(--spacing-xs); border-radius: var(--radius-md); - font: var(--str-chat__caption-emphasis-text); + font: var(--str-chat__font-caption-emphasis); line-height: 1; position: relative; diff --git a/src/components/DateSeparator/styling/DateSeparator.scss b/src/components/DateSeparator/styling/DateSeparator.scss index ed29b9ef5..06ada9532 100644 --- a/src/components/DateSeparator/styling/DateSeparator.scss +++ b/src/components/DateSeparator/styling/DateSeparator.scss @@ -1,8 +1,7 @@ @use '../../../styling/utils'; .str-chat { - --str-chat__date-separator-color: var(--str-chat__text-low-emphasis-color); - --str-chat__date-separator-line-color: var(--str-chat__disabled-color); + --str-chat__date-separator-color: var(--chat-text-system); --str-chat__date-separator-border-radius: 0; --str-chat__date-separator-background-color: transparent; --str-chat__date-separator-border-block-start: none; @@ -40,9 +39,6 @@ background-color: var(--background-core-surface-subtle); border-radius: var(--radius-max); - /* metadata/emphasis */ - font-size: var(--typography-font-size-xs); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-tight); + font: var(--str-chat__font-metadata-emphasis); } } diff --git a/src/components/Dialog/styling/Alert.scss b/src/components/Dialog/styling/Alert.scss index 95d38dd08..3a9f9ba0f 100644 --- a/src/components/Dialog/styling/Alert.scss +++ b/src/components/Dialog/styling/Alert.scss @@ -29,11 +29,11 @@ width: 100%; .str-chat__alert-header__title { - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); } .str-chat__alert-header__description { - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); } } } diff --git a/src/components/Dialog/styling/Callout.scss b/src/components/Dialog/styling/Callout.scss index bcf4733fd..cdc0aaa85 100644 --- a/src/components/Dialog/styling/Callout.scss +++ b/src/components/Dialog/styling/Callout.scss @@ -3,7 +3,7 @@ max-width: 320px; border-radius: var(--radius-lg); background-color: var(--background-core-elevation-2); - box-shadow: var(--light-elevation-3); + box-shadow: var(--str-chat__box-shadow-3); .str-chat__callout__close-button { position: absolute; diff --git a/src/components/Dialog/styling/ContextMenu.scss b/src/components/Dialog/styling/ContextMenu.scss index 17bf1517e..21361353e 100644 --- a/src/components/Dialog/styling/ContextMenu.scss +++ b/src/components/Dialog/styling/ContextMenu.scss @@ -86,7 +86,7 @@ --str-chat__dialog-menu-border-block-end: none; --str-chat__dialog-menu-border-inline-start: none; --str-chat__dialog-menu-border-inline-end: none; - --str-chat__dialog-menu-box-shadow: var(--light-elevation-3); + --str-chat__dialog-menu-box-shadow: var(--str-chat__box-shadow-3); --str-chat__dialog-menu-button-border-radius: var(--radius-md); --str-chat__dialog-menu-button-color: var(--text-primary); diff --git a/src/components/Dialog/styling/Prompt.scss b/src/components/Dialog/styling/Prompt.scss index be6e7d755..1fa837d50 100644 --- a/src/components/Dialog/styling/Prompt.scss +++ b/src/components/Dialog/styling/Prompt.scss @@ -20,12 +20,12 @@ } .str-chat__prompt__header__title { - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); color: var(--text-primary); } .str-chat__prompt__header__description { - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); color: var(--text-secondary); } diff --git a/src/components/Dialog/styling/Viewer.scss b/src/components/Dialog/styling/Viewer.scss index d619a47ad..d05b9cb46 100644 --- a/src/components/Dialog/styling/Viewer.scss +++ b/src/components/Dialog/styling/Viewer.scss @@ -25,12 +25,12 @@ } .str-chat__viewer__header__title { - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); color: var(--text-primary); } .str-chat__viewer__header__description { - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); color: var(--text-secondary); } diff --git a/src/components/DragAndDrop/styling/DragAndDropContainer.scss b/src/components/DragAndDrop/styling/DragAndDropContainer.scss index cc5c9613e..c6696199a 100644 --- a/src/components/DragAndDrop/styling/DragAndDropContainer.scss +++ b/src/components/DragAndDrop/styling/DragAndDropContainer.scss @@ -9,11 +9,11 @@ /* Top border of the component on dragover */ --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid - var(--str-chat__primary-color); + var(--accent-primary); /* Bottom border of the component on dragover */ --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid - var(--str-chat__primary-color); + var(--accent-primary); /* Left (right in RTL layout) border of the component on dragover */ --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none; diff --git a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss index b02a71c3b..0f2fb2713 100644 --- a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss +++ b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss @@ -13,7 +13,7 @@ text-align: center; @include utils.component-layer-overrides('channel'); color: var(--text-secondary); - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); svg { width: 32px; diff --git a/src/components/Form/styling/DropDown.scss b/src/components/Form/styling/DropDown.scss index 30707c0d7..9dfd7fec3 100644 --- a/src/components/Form/styling/DropDown.scss +++ b/src/components/Form/styling/DropDown.scss @@ -9,6 +9,6 @@ } .str-chat__dropdown__items { - background-color: var(--str-chat__background-color); + background-color: transparent; } } diff --git a/src/components/Form/styling/SwitchField.scss b/src/components/Form/styling/SwitchField.scss index de4727bf2..9b0306353 100644 --- a/src/components/Form/styling/SwitchField.scss +++ b/src/components/Form/styling/SwitchField.scss @@ -100,12 +100,12 @@ .str-chat__form__switch-field__label { .str-chat__form__switch-field__label__text { color: var(--text-primary); - font: var(--str-chat__heading-xs-text); + font: var(--str-chat__font-heading-xs); } .str-chat__form__switch-field__label__description { color: var(--text-tertiary); - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); } } diff --git a/src/components/Gallery/styling/Gallery.scss b/src/components/Gallery/styling/Gallery.scss index edc1307bd..68f9a3e2e 100644 --- a/src/components/Gallery/styling/Gallery.scss +++ b/src/components/Gallery/styling/Gallery.scss @@ -32,7 +32,7 @@ --str-chat__gallery-nav-background: rgba(255, 255, 255, 0.92); --str-chat__gallery-nav-color: #101828; --str-chat__gallery-nav-hover-background: #ffffff; - --str-chat__gallery-nav-box-shadow: var(--str-chat__box-shadow-elevation-1); + --str-chat__gallery-nav-box-shadow: var(--str-chat__box-shadow-2); position: relative; display: flex; @@ -73,7 +73,7 @@ .str-chat__gallery__title { color: var(--str-chat__gallery-foreground); - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -83,7 +83,7 @@ display: block; margin-top: 2px; color: var(--str-chat__gallery-muted-foreground); - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); } .str-chat__gallery__header-actions { @@ -265,7 +265,7 @@ .str-chat__gallery__position-indicator { color: var(--str-chat__gallery-foreground); - font: var(--str-chat__caption-emphasis-text); + font: var(--str-chat__font-caption-emphasis); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); user-select: none; width: 100%; @@ -286,7 +286,7 @@ gap: var(--spacing-sm); width: 100%; height: 100%; - color: var(--str-chat__text-low-emphasis-color); + color: var(--text-tertiary); font-size: var(--typography-font-size-sm); } diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss index 119abf33b..03b98d5b0 100644 --- a/src/components/Loading/styling/LoadingChannels.scss +++ b/src/components/Loading/styling/LoadingChannels.scss @@ -43,14 +43,14 @@ .str-chat__loading-channels-avatar { flex-shrink: 0; - width: calc(var(--str-chat__spacing-px) * 48); - height: calc(var(--str-chat__spacing-px) * 48); + width: var(--size-48); + height: var(--size-48); border-radius: 50%; } .str-chat__loading-channels-username, .str-chat__loading-channels-status { - height: calc(var(--str-chat__spacing-px) * 20); + height: var(--size-20); border-radius: 999px; -webkit-mask-image: linear-gradient( 90deg, @@ -69,11 +69,11 @@ } .str-chat__loading-channels-username { - width: min(62%, calc(var(--str-chat__spacing-px) * 180)); + width: min(62%, 180px); } .str-chat__loading-channels-status { - width: min(84%, calc(var(--str-chat__spacing-px) * 244)); + width: min(84%, 244px); } @keyframes loading-channels-shimmer { diff --git a/src/components/Location/styling/ShareLocationDialog.scss b/src/components/Location/styling/ShareLocationDialog.scss index 48abeafce..d4d51d597 100644 --- a/src/components/Location/styling/ShareLocationDialog.scss +++ b/src/components/Location/styling/ShareLocationDialog.scss @@ -23,7 +23,7 @@ } .str-chat__form__switch-field__label__text { - font: var(--str-chat__caption-emphasis-text); + font: var(--str-chat__font-caption-emphasis); } } @@ -42,7 +42,7 @@ display: flex; justify-content: space-between; min-width: var(--str-chat__duration-selector-min-width); - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); } .str-chat__context-menu { diff --git a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss index 43a9d53e4..405f1f63c 100644 --- a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss +++ b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss @@ -66,10 +66,10 @@ width: 32px; padding: 0; cursor: pointer; - --str-chat-icon-color: var(--str-chat__on-primary-color); - border-radius: var(--str-chat__border-radius-circle); - color: var(--str-chat__on-primary-color); - background-color: var(--str-chat__primary-color); + --str-chat-icon-color: var(--text-on-accent); + border-radius: var(--radius-max); + color: var(--text-on-accent); + background-color: var(--accent-primary); &:disabled { cursor: default; @@ -78,7 +78,7 @@ .str-chat__loading-indicator svg { linearGradient { stop:last-child { - stop-color: var(--str-chat__background-color); + stop-color: var(--background-core-app); } } } diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index d7ab0893f..35095b006 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -2,49 +2,18 @@ .str-chat { /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */ - --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26); + --str-chat__message-options-button-size: var(--size-32); --str-chat__message-border-radius: 0; - --str-chat__message-color: var(--str-chat__text-color); --str-chat__message-link-color: var(--chat-text-link); - --str-chat__message-mention-color: var(--str-chat__primary-color); + --str-chat__message-mention-color: var(--accent-primary); --str-chat__message-background-color: transparent; - --str-chat__message-highlighted-background-color: var( - --str-chat__message-highlight-color - ); - --str-chat__message-border-block-start: none; - --str-chat__message-border-block-end: none; - --str-chat__message-border-inline-start: none; - --str-chat__message-border-inline-end: none; - --str-chat__message-box-shadow: none; + --str-chat__message-highlighted-background-color: var(--background-core-highlight); --str-chat__message-active-background-color: transparent; - --str-chat__message-options-color: var(--button-secondary-text); - --str-chat__message-options-hover-background-color: var( - --str-chat__tertiary-surface-color - ); - --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle); - --str-chat__message-options-active-color: var(--str-chat__primary-color); - --str-chat__message-bubble-border-radius: var(--message-bubble-radius-group-bottom); - --str-chat__message-bubble-color: var(--chat-text-message); - --str-chat__message-bubble-background-color: var(--chat-bg-incoming); - --str-chat__own-message-bubble-color: var(--chat-text-message); - --str-chat__own-message-bubble-background-color: var(--chat-bg-outgoing); - --str-chat__message-bubble-border-block-start: none; - --str-chat__message-bubble-border-block-end: none; - --str-chat__message-bubble-border-inline-start: none; - --str-chat__message-bubble-border-inline-end: none; - --str-chat__message-bubble-box-shadow: none; --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; - --str-chat__blocked-message-border-block-end: none; - --str-chat__blocked-message-border-inline-start: none; - --str-chat__blocked-message-border-inline-end: none; - --str-chat__blocked-message-box-shadow: none; --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); @@ -52,10 +21,35 @@ --str-chat__message-pinned-background-color: var(--background-core-highlight); /* The maximum allowed width of the message component */ - --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 400); + --str-chat__message-max-width: 400px; /* The maximum allowed width of the message component, if it has attachments */ - --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 400); + --str-chat__message-with-attachment-max-width: 400px; + + .str-chat__message { + &.str-chat__message--me { + --chat-bg: var(--chat-bg-outgoing); + --chat-bg-attachment: var(--chat-bg-attachment-outgoing); + --chat-text: var(--chat-text-outgoing); + --chat-border: var(--chat-border-outgoing); + --chat-border-on-chat: var(--chat-border-on-chat-outgoing); + --chat-reply-indicator: var(--chat-reply-indicator-outgoing); + --chat-poll-progress-track: var(--chat-poll-progress-track-outgoing); + --chat-poll-progress-fill: var(--chat-poll-progress-fill-outgoing); + --chat-thread-connector: var(--chat-thread-connector-outgoing); + } + &.str-chat__message--other { + --chat-bg: var(--chat-bg-incoming); + --chat-bg-attachment: var(--chat-bg-attachment-incoming); + --chat-text: var(--chat-text-incoming); + --chat-border: var(--chat-border-incoming); + --chat-border-on-chat: var(--chat-border-on-chat-incoming); + --chat-reply-indicator: var(--chat-reply-indicator-incoming); + --chat-poll-progress-track: var(--chat-poll-progress-track-incoming); + --chat-poll-progress-fill: var(--chat-poll-progress-fill-incoming); + --chat-thread-connector: var(--chat-thread-connector-incoming); + } + } } /* Make spaces between message groups */ @@ -172,11 +166,12 @@ .str-chat__message-mention { color: var(--str-chat__message-mention-color); - font: var(--str-chat__body-emphasis-text); + font: var(--str-chat__font-body-emphasis); } .str-chat__message { @include utils.component-layer-overrides('message'); + color: var(--str-chat__message-color, var(--chat-text)); @mixin chat-bubble-spacing { padding-inline: var(--spacing-xxs); @@ -244,7 +239,7 @@ display: flex; align-items: center; gap: var(--spacing-xxs); - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); color: var(--text-primary-text); .str-chat__message-pin-indicator__icon { @@ -411,6 +406,8 @@ position: relative; min-width: 0; @include utils.component-layer-overrides('message-bubble'); + color: var(--str-chat__message-bubble-color, inherit); + background-color: var(--str-chat__message-bubble-background-color, var(--chat-bg)); border-radius: var(--message-bubble-radius-group-bottom); overflow: hidden; @@ -426,7 +423,11 @@ &.str-chat__message--me .str-chat__message-bubble { justify-self: flex-end; - background-color: var(--str-chat__own-message-bubble-background-color); + color: var(--str-chat__own-message-bubble-color, inherit); + background-color: var( + --str-chat__own-message-bubble-background-color, + var(--chat-bg) + ); } &.str-chat__message--me .str-chat__message-inner { @@ -460,7 +461,7 @@ color: var(--chat-text-timestamp); * { - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); } .str-chat__message-metadata__name { @@ -481,6 +482,9 @@ .str-chat__message--blocked-inner { @include chat-bubble-spacing; @include utils.component-layer-overrides('blocked-message'); + color: var(--str-chat__blocked-message-color, var(--chat-text)); + background-color: var(--str-chat__blocked-message-background-color, var(--chat-bg)); + // todo: once blocked message designs are ready remove this padding? padding-block: var(--spacing-xs); } @@ -507,7 +511,7 @@ } &.str-chat__message--failed { - $icon-size: calc(var(--str-chat__spacing-px) * 18); + $icon-size: 18px; .str-chat__message-error-indicator { display: block; diff --git a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss index b06c9dcb3..bdf6ec280 100644 --- a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss +++ b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss @@ -18,7 +18,7 @@ grid-area: also-sent-in-channel; padding-block: var(--spacing-xxs); @include utils.component-layer-overrides('message-also-sent-in-channel'); - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); .str-chat__icon { height: var(--spacing-sm); @@ -33,7 +33,7 @@ .str-chat__message-also-sent-in-channel__link-button { @include utils.button-reset; cursor: pointer; - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); color: var(--text-link); } } diff --git a/src/components/Message/styling/MessageRepliesCountButton.scss b/src/components/Message/styling/MessageRepliesCountButton.scss index 1efe4fb2f..885197d8a 100644 --- a/src/components/Message/styling/MessageRepliesCountButton.scss +++ b/src/components/Message/styling/MessageRepliesCountButton.scss @@ -36,7 +36,7 @@ align-items: center; color: var(--text-link); - font: var(--str-chat__heading-xs-text); + font: var(--str-chat__font-heading-xs); } } @@ -54,9 +54,9 @@ &::after { border-end-end-radius: var(--radius-max); border-inline-end: var(--replies-button-connector-stroke-width) solid - var(--chat-thread-connector-outgoing); + var(--chat-thread-connector); border-block-end: var(--replies-button-connector-stroke-width) solid - var(--chat-thread-connector-outgoing); + var(--chat-thread-connector); inset-inline-end: 0; } @@ -76,9 +76,9 @@ &::after { border-end-start-radius: var(--radius-max); border-inline-start: var(--replies-button-connector-stroke-width) solid - var(--chat-thread-connector-incoming); + var(--chat-thread-connector); border-block-end: var(--replies-button-connector-stroke-width) solid - var(--chat-thread-connector-incoming); + var(--chat-thread-connector); inset-inline-start: 0; } diff --git a/src/components/Message/styling/MessageSystem.scss b/src/components/Message/styling/MessageSystem.scss index 767ca8233..08e41658c 100644 --- a/src/components/Message/styling/MessageSystem.scss +++ b/src/components/Message/styling/MessageSystem.scss @@ -14,6 +14,6 @@ border-radius: var(--radius-xl); border: 1px solid var(--border-core-subtle); background: var(--background-core-surface-subtle); - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); } } diff --git a/src/components/Message/styling/MessageTranslationIndicator.scss b/src/components/Message/styling/MessageTranslationIndicator.scss index 2d072b770..2e1274670 100644 --- a/src/components/Message/styling/MessageTranslationIndicator.scss +++ b/src/components/Message/styling/MessageTranslationIndicator.scss @@ -21,11 +21,11 @@ &, .str-chat__message-translation-indicator__translation-toggle { - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); } .str-chat__message-translation-indicator__sign { - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); } svg path { diff --git a/src/components/Message/styling/QuotedMessage.scss b/src/components/Message/styling/QuotedMessage.scss index 99074cde0..72068698f 100644 --- a/src/components/Message/styling/QuotedMessage.scss +++ b/src/components/Message/styling/QuotedMessage.scss @@ -5,7 +5,7 @@ .str-chat__message { .str-chat__quoted-message-preview { - background-color: var(--chat-bg-attachment-incoming); + background-color: var(--chat-bg-attachment); width: calc( var(--str-chat__message-with-attachment-max-width) - calc(2 * var(--spacing-xs)) ); @@ -13,10 +13,4 @@ min-width: 0; } } - - .str-chat__message--me { - .str-chat__quoted-message-preview { - background-color: var(--chat-bg-attachment-outgoing); - } - } } diff --git a/src/components/Message/styling/ReminderNotification.scss b/src/components/Message/styling/ReminderNotification.scss index c732cb609..590f9ff10 100644 --- a/src/components/Message/styling/ReminderNotification.scss +++ b/src/components/Message/styling/ReminderNotification.scss @@ -1,7 +1,7 @@ @use '../../../styling/utils'; .str-chat { - --str-chat__message-saved-for-later-color: var(--str-chat__primary-color); + --str-chat__message-saved-for-later-color: var(--accent-primary); --str-chat__message-saved-for-later-background-color: transparent; --str-chat__message-saved-for-later-border-block-start: none; --str-chat__message-saved-for-later-border-block-end: none; @@ -29,7 +29,7 @@ padding-block: var(--spacing-xxs); margin: 0; @include utils.component-layer-overrides('message-saved-for-later'); - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); svg { width: var(--icon-size-xs); @@ -51,13 +51,13 @@ padding-block: var(--spacing-xxs); margin: 0; @include utils.component-layer-overrides('message-reminder'); - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); svg path { stroke-width: 1.5px; } .str-chat__message-reminder__time-left { - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); } } diff --git a/src/components/MessageActions/styling/MessageActions.scss b/src/components/MessageActions/styling/MessageActions.scss index af1744a4b..afe76d2c3 100644 --- a/src/components/MessageActions/styling/MessageActions.scss +++ b/src/components/MessageActions/styling/MessageActions.scss @@ -30,12 +30,6 @@ color: var(--str-chat__message-options-color); } - .str-chat__message-actions-box-button:hover, - .str-chat__message-reply-in-thread-button:hover, - .str-chat__message-reactions-button:hover { - background-color: var(--str-chat__message-options-hover-background-color); - } - .str-chat__message-actions-box-button:active, .str-chat__message-reply-in-thread-button:active, .str-chat__message-reactions-button:active { diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index 9330e5a8a..7729eb31b 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -19,7 +19,7 @@ --str-chat__attachment-preview-close-icon-border-color: var( --control-remove-control-border ); - --str-chat__attachment-preview-retry-icon-color: var(--str-chat__primary-color); + --str-chat__attachment-preview-retry-icon-color: var(--accent-primary); --str-chat__attachment-preview-download-icon-color: var(--text-secondary); --str-chat__attachment-preview-overlay-color: var(--background-core-overlay); diff --git a/src/components/MessageComposer/styling/CommandChip.scss b/src/components/MessageComposer/styling/CommandChip.scss index 8760a0d4b..6ca5381bf 100644 --- a/src/components/MessageComposer/styling/CommandChip.scss +++ b/src/components/MessageComposer/styling/CommandChip.scss @@ -11,7 +11,7 @@ color: var(--text-inverse); background-color: var(--background-core-inverse, var(--slate-900)); text-transform: uppercase; - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); .str-chat__command-chip__close-button { @include utils.button-reset; diff --git a/src/components/MessageComposer/styling/DropzoneContainer.scss b/src/components/MessageComposer/styling/DropzoneContainer.scss index a0866eeb1..028dd419a 100644 --- a/src/components/MessageComposer/styling/DropzoneContainer.scss +++ b/src/components/MessageComposer/styling/DropzoneContainer.scss @@ -33,7 +33,7 @@ background-color: var(--str-chat__dropzone-container-background-color); color: var(--str-chat__dropzone-container-color); backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter); - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); .str-chat__dropzone-container__content { display: flex; diff --git a/src/components/MessageComposer/styling/GeologacationPreview.scss b/src/components/MessageComposer/styling/GeologacationPreview.scss index 5b05702b4..6ae742c5c 100644 --- a/src/components/MessageComposer/styling/GeologacationPreview.scss +++ b/src/components/MessageComposer/styling/GeologacationPreview.scss @@ -41,11 +41,11 @@ } .str-chat__location-preview__data__title { - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); } .str-chat__location-preview__data__subtitle, .str-chat__location-preview__data__sharing-duration { - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); } } } diff --git a/src/components/MessageComposer/styling/LinkPreviewList.scss b/src/components/MessageComposer/styling/LinkPreviewList.scss index bf7ecdd1c..9789278c7 100644 --- a/src/components/MessageComposer/styling/LinkPreviewList.scss +++ b/src/components/MessageComposer/styling/LinkPreviewList.scss @@ -19,13 +19,13 @@ gap: var(--spacing-xs); padding-inline: var(--spacing-xs) var(--spacing-sm); padding-block: var(--spacing-xs); - background-color: var(--chat-bg-outgoing); + background-color: var(--chat-bg); border-radius: var(--message-bubble-radius-attachment); .str-chat__tooltip { @include utils.ellipsis-text(); display: block; - max-width: calc(var(--str-chat__spacing-px) * 250); + max-width: 250px; padding-inline: 0.5rem; } @@ -40,12 +40,12 @@ } .str-chat__link-preview-card__content-title { - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); } .str-chat__link-preview-card__content-description, .str-chat__link-preview-card__content__url { - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); } .str-chat__link-preview-card__content__url { @@ -63,12 +63,12 @@ // gap: 0.25rem; // // .str-chat__link-preview-card__content-title { -// height: calc(var(--str-chat__spacing-px) * 16); +// height: var(--size-16); // width: 100% // } // // .str-chat__link-preview-card__content-description { -// height: calc(var(--str-chat__spacing-px) * 12); +// height: var(--size-12); // width: 100%; // } // } diff --git a/src/components/MessageComposer/styling/QuotedMessageIndicator.scss b/src/components/MessageComposer/styling/QuotedMessageIndicator.scss index 1fcc9e8e1..25382c1c4 100644 --- a/src/components/MessageComposer/styling/QuotedMessageIndicator.scss +++ b/src/components/MessageComposer/styling/QuotedMessageIndicator.scss @@ -1,5 +1,5 @@ .str-chat__quoted-message-indicator { - background-color: var(--chat-reply-indicator-incoming); + background-color: var(--chat-reply-indicator, var(--chat-reply-indicator-incoming)); border-radius: var(--radius-max); height: 100%; width: 2px; diff --git a/src/components/MessageComposer/styling/SendToChannelCheckbox.scss b/src/components/MessageComposer/styling/SendToChannelCheckbox.scss index c478ce1ab..1d3f9266e 100644 --- a/src/components/MessageComposer/styling/SendToChannelCheckbox.scss +++ b/src/components/MessageComposer/styling/SendToChannelCheckbox.scss @@ -74,7 +74,7 @@ } .str-chat__send-to-channel-checkbox__label { - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); transition: color 0.15s ease, border-color 0.15s ease; diff --git a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss index 126ef8c30..7bc49cc6e 100644 --- a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss +++ b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss @@ -8,12 +8,7 @@ ); /* The text/icon color of file attachments */ - --str-chat__unsupported-attachment-preview-color: var(--str-chat__text-color); - - /* The text/icon color of file attachments for low emphasis texts (for example file size) */ - --str-chat__unsupported-attachment-preview-secondary-color: var( - --str-chat__text-low-emphasis-color - ); + --str-chat__unsupported-attachment-preview-color: var(--text-primary); /* The background color of file attachments */ --str-chat__unsupported-attachment-preview-background-color: transparent; @@ -43,8 +38,8 @@ column-gap: var(--spacing-xs); .str-chat__icon { - height: calc(var(--str-chat__spacing-px) * 20); - width: calc(var(--str-chat__spacing-px) * 20); + height: var(--size-20); + width: var(--size-20); } .str-chat__attachment-preview-unsupported__metadata { diff --git a/src/components/MessageList/styling/MessageList.scss b/src/components/MessageList/styling/MessageList.scss index d3f1d3648..3c4912586 100644 --- a/src/components/MessageList/styling/MessageList.scss +++ b/src/components/MessageList/styling/MessageList.scss @@ -72,10 +72,10 @@ --str-chat__message-list-border-radius: 0; /* The text/icon color of the component */ - --str-chat__message-list-color: var(--str-chat__text-color); + --str-chat__message-list-color: var(--text-primary); /* The background color of the component */ - --str-chat__message-list-background-color: var(--str-chat__background-color); + --str-chat__message-list-background-color: var(--background-core-app); /* Box shadow applied to the component */ --str-chat__message-list-box-shadow: none; @@ -93,8 +93,8 @@ --str-chat__message-list-border-inline-end: none; /* The color used for displaying thread replies and thread separator at the start of a thread */ - --str-chat__thread-head-start-color: var(--str-chat__text-low-emphasis-color); + --str-chat__thread-head-start-color: var(--text-tertiary); /* The color used for the separator below the first message in a thread */ - --str-chat__thread-head-start-border-block-end-color: var(--str-chat__surface-color); + --str-chat__thread-head-start-border-block-end-color: var(--background-core-surface); } diff --git a/src/components/MessageList/styling/NewMessageNotification.scss b/src/components/MessageList/styling/NewMessageNotification.scss index bb2bce08b..bd4ffa968 100644 --- a/src/components/MessageList/styling/NewMessageNotification.scss +++ b/src/components/MessageList/styling/NewMessageNotification.scss @@ -14,7 +14,7 @@ padding: var(--spacing-xxs) var(--spacing-sm); background-color: var(--background-core-surface-subtle); border-radius: var(--radius-max); - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); color: var(--chat-text-system); } } diff --git a/src/components/MessageList/styling/UnreadMessageNotification.scss b/src/components/MessageList/styling/UnreadMessageNotification.scss index ff6e405dd..90dff26c1 100644 --- a/src/components/MessageList/styling/UnreadMessageNotification.scss +++ b/src/components/MessageList/styling/UnreadMessageNotification.scss @@ -31,7 +31,7 @@ border-radius: var(--button-radius-lg) 0 0 var(--button-radius-lg); padding: var(--button-padding-y-md) var(--spacing-xxs) var(--button-padding-y-md) var(--button-padding-x-with-label-md); - font: var(--str-chat__caption-emphasis-text); + font: var(--str-chat__font-caption-emphasis); } button:last-of-type { diff --git a/src/components/MessageList/styling/UnreadMessagesSeparator.scss b/src/components/MessageList/styling/UnreadMessagesSeparator.scss index 97b90cd32..a14594b2d 100644 --- a/src/components/MessageList/styling/UnreadMessagesSeparator.scss +++ b/src/components/MessageList/styling/UnreadMessagesSeparator.scss @@ -16,7 +16,7 @@ .str-chat__unread-messages-separator__text { padding-inline: var(--spacing-xs) var(--spacing-xxs); border-radius: var(--button-radius-lg) 0 0 var(--button-radius-lg); - font: var(--str-chat__caption-emphasis-text); + font: var(--str-chat__font-caption-emphasis); text-transform: lowercase; } diff --git a/src/components/MessageList/styling/VirtualizedMessageList.scss b/src/components/MessageList/styling/VirtualizedMessageList.scss index 984a35ae0..ad5cd21d0 100644 --- a/src/components/MessageList/styling/VirtualizedMessageList.scss +++ b/src/components/MessageList/styling/VirtualizedMessageList.scss @@ -5,10 +5,10 @@ --str-chat__virtual-list-border-radius: 0; /* The text/icon color of the component */ - --str-chat__virtual-list-color: var(--str-chat__text-color); + --str-chat__virtual-list-color: var(--text-primary); /* The background color of the component */ - --str-chat__virtual-list-background-color: var(--str-chat__background-color); + --str-chat__virtual-list-background-color: var(--background-core-app); /* Box shadow applied to the component */ --str-chat__virtual-list-box-shadow: none; diff --git a/src/components/Modal/styling/Modal.scss b/src/components/Modal/styling/Modal.scss index 8c76b5094..f0264f16e 100644 --- a/src/components/Modal/styling/Modal.scss +++ b/src/components/Modal/styling/Modal.scss @@ -5,7 +5,7 @@ --str-chat__modal-border-radius: var(--radius-xl); /* The text/icon color of the content area of the component */ - --str-chat__modal-color: var(--str-chat__text-color); + --str-chat__modal-color: var(--text-primary); /* The background color of the content area of the component */ --str-chat__modal-background-color: var(--background-core-elevation-1); @@ -29,7 +29,7 @@ --str-chat__modal-border-inline-end: none; /* Box shadow applied to the content area of the component */ - --str-chat__modal-box-shadow: var(--str-chat__box-shadow-elevation-1); + --str-chat__modal-box-shadow: var(--str-chat__box-shadow-4); } .str-chat__modal--open { diff --git a/src/components/Notifications/styling/Notification.scss b/src/components/Notifications/styling/Notification.scss index d29389d7b..20690a96d 100644 --- a/src/components/Notifications/styling/Notification.scss +++ b/src/components/Notifications/styling/Notification.scss @@ -36,7 +36,7 @@ .str-chat__notification-message { flex: 1 1 auto; padding-block: var(--spacing-xxxs); - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); text-align: center; white-space: nowrap; } diff --git a/src/components/Poll/styling/Poll.scss b/src/components/Poll/styling/Poll.scss index edc0802b0..853f5a329 100644 --- a/src/components/Poll/styling/Poll.scss +++ b/src/components/Poll/styling/Poll.scss @@ -11,9 +11,7 @@ ); max-width: 100%; min-width: 260px; - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-tight); + font: var(--str-chat__font-caption-default); button { @include utils.button-reset; @@ -22,9 +20,7 @@ .str-chat__poll-header { .str-chat__poll-title { - font-size: var(--typography-font-size-md); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); + font: var(--str-chat__font-body-emphasis); } } @@ -33,52 +29,15 @@ flex-direction: column; align-items: center; gap: var(--spacing-xs); - } - } - - .str-chat__button.str-chat__poll-action { - width: 100%; - color: var(--str-chat__primary-color); - border: 1px solid var(--chat-border-on-chat-incoming); - font-size: var(--typography-font-size-sm); - padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm); - - &.str-chat__poll-action--additional { - border: none; - } - } - - .str-chat__message--me { - .str-chat__poll { - .str-chat__poll-option-list:not(.str-chat__poll-option-list--full) { - .str-chat__poll-option__votes-bar { - background: linear-gradient( - to right, - var(--chat-poll-progress-fill-outgoing) - var(--str-chat__amount-bar-fulfillment), - var(--chat-poll-progress-track-outgoing) - var(--str-chat__amount-bar-fulfillment) - ); - } - - .str-chat__poll-option__votes-bar--winner { - background: linear-gradient( - to right, - var(--chat-poll-progress-fill-outgoing) - var(--str-chat__amount-bar-fulfillment), - var(--chat-poll-progress-track-outgoing) - var(--str-chat__amount-bar-fulfillment) - ); - } - } - .str-chat__poll-actions { - .str-chat__poll-action { - border: 1px solid var(--chat-border-on-chat-outgoing); + .str-chat__button.str-chat__poll-action { + width: 100%; + border: 1px solid var(--chat-border-on-chat); + padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm); + font: var(--str-chat__font-body-emphasis); - &.str-chat__poll-action--additional { - border: none; - } + &.str-chat__poll-action--additional { + border: none; } } } diff --git a/src/components/Poll/styling/PollAnswerList.scss b/src/components/Poll/styling/PollAnswerList.scss index b3b3ea395..512fa553b 100644 --- a/src/components/Poll/styling/PollAnswerList.scss +++ b/src/components/Poll/styling/PollAnswerList.scss @@ -48,7 +48,7 @@ } .str-chat__poll-answer__text { - font: var(--str-chat__body-default-text); + font: var(--str-chat__font-body-default); } .str-chat__poll-vote { diff --git a/src/components/Poll/styling/PollOptionList.scss b/src/components/Poll/styling/PollOptionList.scss index cb7699d46..e84481731 100644 --- a/src/components/Poll/styling/PollOptionList.scss +++ b/src/components/Poll/styling/PollOptionList.scss @@ -27,8 +27,8 @@ grid-row: span 2; height: var(--str-chat__poll-checkmark-size); width: var(--str-chat__poll-checkmark-size); - border-radius: var(--str-chat__border-radius-circle); - border: 1px solid var(--chat-border-on-chat-incoming); + border-radius: var(--radius-max); + border: 1px solid var(--chat-border-on-chat); } .str-chat__checkmark--checked { @@ -36,8 +36,8 @@ background-repeat: no-repeat; background-position: center; background-size: 11px 10px; - background-color: var(--str-chat__primary-color); - border-color: var(--str-chat__primary-color); + background-color: var(--control-radio-check-bg-selected); + border: none; } .str-chat__poll-option-data { @@ -67,8 +67,7 @@ .str-chat__poll-option-vote-count { text-align: right; - font: var(--str-chat__metadata-default-text); - font-variant-numeric: tabular-nums; + font: var(--str-chat__font-metadata-default); } } } @@ -80,18 +79,10 @@ width: 100%; background: linear-gradient( to right, - var(--chat-poll-progress-fill-incoming) var(--str-chat__amount-bar-fulfillment), - var(--chat-poll-progress-track-incoming) var(--str-chat__amount-bar-fulfillment) - ); - border-radius: calc(var(--str-chat__spacing-px) * 4); - } - - .str-chat__poll-option__votes-bar--winner { - background: linear-gradient( - to right, - var(--chat-poll-progress-fill-incoming) var(--str-chat__amount-bar-fulfillment), - var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment) + var(--chat-poll-progress-fill) var(--str-chat__amount-bar-fulfillment), + var(--chat-poll-progress-track) var(--str-chat__amount-bar-fulfillment) ); + border-radius: var(--size-4); } } } diff --git a/src/components/Poll/styling/PollQuestion.scss b/src/components/Poll/styling/PollQuestion.scss index 6959d3575..d1d7fc7e3 100644 --- a/src/components/Poll/styling/PollQuestion.scss +++ b/src/components/Poll/styling/PollQuestion.scss @@ -9,12 +9,12 @@ background: var(--background-core-surface-card); .str-chat__modal__poll-question__label { - font: var(--str-chat__heading-xs-text); + font: var(--str-chat__font-heading-xs); color: var(--text-tertiary); } .str-chat__modal__poll-question__text { - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); color: var(--text-primary); } } diff --git a/src/components/Poll/styling/PollResults.scss b/src/components/Poll/styling/PollResults.scss index d28bab1b2..04ecd1bca 100644 --- a/src/components/Poll/styling/PollResults.scss +++ b/src/components/Poll/styling/PollResults.scss @@ -42,7 +42,7 @@ padding-inline: var(--spacing-md); .str-chat__poll-option__header__label { - font: var(--str-chat__heading-xs-text); + font: var(--str-chat__font-heading-xs); color: var(--text-tertiary); } @@ -51,7 +51,7 @@ align-items: start; gap: var(--spacing-md); width: 100%; - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); color: var(--text-primary); .str-chat__poll-option__option-text { @@ -109,7 +109,7 @@ .str-chat__modal__poll-results__options-total-count { width: 100%; text-align: center; - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); } } @@ -117,7 +117,7 @@ display: flex; gap: var(--spacing-xs); align-items: center; - font: var(--str-chat__caption-emphasis-text); + font: var(--str-chat__font-caption-emphasis); svg { } diff --git a/src/components/Poll/styling/PollVote.scss b/src/components/Poll/styling/PollVote.scss index c8303c087..11b8a1174 100644 --- a/src/components/Poll/styling/PollVote.scss +++ b/src/components/Poll/styling/PollVote.scss @@ -5,7 +5,7 @@ gap: var(--spacing-none, 0); align-self: stretch; width: 100%; - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); .str-chat__poll-vote__author { flex: 1; diff --git a/src/components/Reactions/styling/MessageReactions.scss b/src/components/Reactions/styling/MessageReactions.scss index 021d955bd..e54961b8c 100644 --- a/src/components/Reactions/styling/MessageReactions.scss +++ b/src/components/Reactions/styling/MessageReactions.scss @@ -36,7 +36,7 @@ .str-chat__message-reactions__list-item-count { display: flex; align-items: center; - font: var(--str-chat__numeric-md-text); + font: var(--str-chat__font-numeric-md); } } diff --git a/src/components/Reactions/styling/MessageReactionsDetail.scss b/src/components/Reactions/styling/MessageReactionsDetail.scss index 3ddfba238..d7ac7b667 100644 --- a/src/components/Reactions/styling/MessageReactionsDetail.scss +++ b/src/components/Reactions/styling/MessageReactionsDetail.scss @@ -28,7 +28,7 @@ font-family: var(--typography-font-family-sans); - box-shadow: var(--light-elevation-3); + box-shadow: var(--str-chat__box-shadow-3); padding-block-start: var(--spacing-xxs); @@ -87,7 +87,7 @@ .str-chat__message-reactions-detail__reaction-type-list-item-count { color: var(--reaction-text); - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); } } } @@ -163,7 +163,7 @@ .str-chat__message-reactions-detail__user-list-item-button { @include utils.unset-button; color: var(--text-tertiary); - font: var(--str-chat__metadata-default-text); + font: var(--str-chat__font-metadata-default); cursor: pointer; align-self: flex-start; } diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss index 5e6c00b2c..784ad45cd 100644 --- a/src/components/Reactions/styling/ReactionSelector.scss +++ b/src/components/Reactions/styling/ReactionSelector.scss @@ -12,7 +12,7 @@ border-radius: var(--radius-4xl, 32px); background: var(--background-core-elevation-2, #fff); - box-shadow: var(--light-elevation-3); + box-shadow: var(--str-chat__box-shadow-3); &:has(.str-chat__reaction-selector-extended-list) { padding: 0; diff --git a/src/components/Search/styling/Search.scss b/src/components/Search/styling/Search.scss index efdc57d79..d88646948 100644 --- a/src/components/Search/styling/Search.scss +++ b/src/components/Search/styling/Search.scss @@ -102,7 +102,7 @@ text-align: start; .str-chat__search-result__display-name { - font: var(--str-chat__heading-xs-text); + font: var(--str-chat__font-heading-xs); color: var(--text-primary); flex: 1; min-width: 0; diff --git a/src/components/Thread/styling/Thread.scss b/src/components/Thread/styling/Thread.scss index be1b9aef7..f6504033c 100644 --- a/src/components/Thread/styling/Thread.scss +++ b/src/components/Thread/styling/Thread.scss @@ -5,10 +5,10 @@ --str-chat__thread-border-radius: 0; /* The text/icon color of the component */ - --str-chat__thread-color: var(--str-chat__text-color); + --str-chat__thread-color: var(--text-primary); /* The background color of the component */ - --str-chat__thread-background-color: var(--str-chat__secondary-background-color); + --str-chat__thread-background-color: none; /* Top border of the component */ --str-chat__thread-border-block-start: none; @@ -17,7 +17,7 @@ --str-chat__thread-border-block-end: none; /* Left (right in RTL layout) border of the component */ - --str-chat__thread-border-inline-start: 1px solid var(--str-chat__surface-color); + --str-chat__thread-border-inline-start: 1px solid var(--border-core-default); /* Right (left in RTL layout) border of the component */ --str-chat__thread-border-inline-end: none; @@ -26,7 +26,7 @@ --str-chat__thread-box-shadow: none; /* The text/icon color used to display less emphasized text in the channel header */ - --str-chat__thread-header-info-color: var(--str-chat__text-low-emphasis-color); + --str-chat__thread-header-info-color: var(--text-secondary); } // FIXME: figure out why does this "container" exist when __thread is completely valid diff --git a/src/components/Thread/styling/ThreadHead.scss b/src/components/Thread/styling/ThreadHead.scss index 0f69a282f..9384836c7 100644 --- a/src/components/Thread/styling/ThreadHead.scss +++ b/src/components/Thread/styling/ThreadHead.scss @@ -23,6 +23,6 @@ border-bottom: 1px solid var(--border-core-subtle); background: var(--background-core-surface-subtle); color: var(--chat-text-system); - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); } } diff --git a/src/components/Thread/styling/ThreadHeader.scss b/src/components/Thread/styling/ThreadHeader.scss index 339a16086..f93feb51c 100644 --- a/src/components/Thread/styling/ThreadHeader.scss +++ b/src/components/Thread/styling/ThreadHeader.scss @@ -5,7 +5,7 @@ --str-chat__thread-header-border-radius: 0; /* The text/icon color of the thread header */ - --str-chat__thread-header-color: var(--str-chat__text-color); + --str-chat__thread-header-color: var(--text-primary); /* The background color of the thread header */ --str-chat__thread-header-background-color: var(--background-core-elevation-1); @@ -31,11 +31,11 @@ @include utils.component-layer-overrides('thread-header'); .str-chat__thread-header-title { - font: var(--str-chat__heading-sm-text); + font: var(--str-chat__font-heading-sm); } .str-chat__thread-header-subtitle { - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); color: var(--str-chat__thread-header-info-color); } @@ -64,12 +64,11 @@ } .str-chat__close-thread-button { - $icon-size: calc(var(--str-chat__spacing-px) * 21); display: flex; align-items: flex-start; justify-content: flex-end; - width: calc(var(--str-chat__spacing-px) * 40); - height: calc(var(--str-chat__spacing-px) * 40); + width: var(--size-40); + height: var(--size-40); cursor: pointer; background-color: transparent; border: none; diff --git a/src/components/Threads/ThreadList/styling/ThreadList.scss b/src/components/Threads/ThreadList/styling/ThreadList.scss index 35e77141f..3f795c0b3 100644 --- a/src/components/Threads/ThreadList/styling/ThreadList.scss +++ b/src/components/Threads/ThreadList/styling/ThreadList.scss @@ -2,12 +2,12 @@ .str-chat { --str-chat__thread-list-border-radius: 0; - --str-chat__thread-list-color: var(--str-chat__text-color); - --str-chat__thread-list-background-color: var(--str-chat__secondary-background-color); + --str-chat__thread-list-color: var(--text-primary); + --str-chat__thread-list-background-color: var(--background-core-elevation-1); --str-chat__thread-list-border-block-start: none; --str-chat__thread-list-border-block-end: none; --str-chat__thread-list-border-inline-start: none; - --str-chat__thread-list-border-inline-end: 1px solid var(--str-chat__surface-color); + --str-chat__thread-list-border-inline-end: 1px solid var(--border-core-default); --str-chat__thread-list-box-shadow: none; --str-chat__thread-list-transition-duration: var( --str-chat__channel-list-transition-duration, @@ -79,7 +79,7 @@ .str-chat__unseen-threads-banner { @include utils.unset-button; - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); cursor: pointer; display: flex; color: var(--text-secondary); diff --git a/src/components/Threads/ThreadList/styling/ThreadListHeader.scss b/src/components/Threads/ThreadList/styling/ThreadListHeader.scss index 7ea4de58c..5d51fb4cd 100644 --- a/src/components/Threads/ThreadList/styling/ThreadListHeader.scss +++ b/src/components/Threads/ThreadList/styling/ThreadListHeader.scss @@ -7,7 +7,7 @@ .str-chat__thread-list__header__title { flex: 1; - font: var(--str-chat__heading-lg-text); + font: var(--str-chat__font-heading-lg); color: var(--text-primary); } } diff --git a/src/components/Threads/styling/UnreadCountBadge.scss b/src/components/Threads/styling/UnreadCountBadge.scss index 42f264668..cec7dcefd 100644 --- a/src/components/Threads/styling/UnreadCountBadge.scss +++ b/src/components/Threads/styling/UnreadCountBadge.scss @@ -1,7 +1,7 @@ /* Only available in React SDK. */ .str-chat { - --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color); - --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color); + --str-chat-unread-count-badge-color: var(--badge-text-on-accent); + --str-chat-unread-count-badge-background-color: var(--accent-error); } .str-chat__unread-count-badge { @@ -33,7 +33,6 @@ display: flex; align-items: center; justify-content: center; - font-variant-numeric: tabular-nums; &--top-right { position: absolute; diff --git a/src/components/Tooltip/styling/Tooltip.scss b/src/components/Tooltip/styling/Tooltip.scss index b9238023f..ad6d5e3aa 100644 --- a/src/components/Tooltip/styling/Tooltip.scss +++ b/src/components/Tooltip/styling/Tooltip.scss @@ -33,9 +33,9 @@ gap: var(--spacing-xs); padding: var(--spacing-xs); z-index: 1; - max-width: calc(var(--str-chat__spacing-px) * 150); + max-width: 150px; width: max-content; - font: var(--str-chat__metadata-emphasis-text); + font: var(--str-chat__font-metadata-emphasis); &::after { background-color: var(--str-chat__tooltip-background-color); diff --git a/src/components/TypingIndicator/styling/TypingIndicator.scss b/src/components/TypingIndicator/styling/TypingIndicator.scss index ed33daf29..4e2493d7a 100644 --- a/src/components/TypingIndicator/styling/TypingIndicator.scss +++ b/src/components/TypingIndicator/styling/TypingIndicator.scss @@ -42,12 +42,10 @@ border-radius: var(--message-bubble-radius-group-bottom) var(--message-bubble-radius-group-bottom) var(--message-bubble-radius-group-bottom) var(--message-bubble-radius-tail); - background: var(--chat-bg-incoming); - // variable --chat-bg-typing-indicator has incorrect color value? //background: var(--chat-bg-typing-indicator); - border: 1px solid var(--chat-bg-incoming); - background: var(--chat-bg-incoming, #ebeef1); + border: 1px solid var(--chat-bg); + background: var(--chat-bg); } .str-chat__typing-indicator__dots { @@ -101,7 +99,7 @@ gap: var(--spacing-xs, 4px); white-space: nowrap; color: var(--text-secondary); - font: var(--str-chat__caption-default-text); + font: var(--str-chat__font-caption-default); } .str-chat__typing-indicator-header__dots { diff --git a/src/styling/_global-layout-variables.scss b/src/styling/_global-layout-variables.scss deleted file mode 100644 index f151ebde9..000000000 --- a/src/styling/_global-layout-variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -.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; -} diff --git a/src/styling/_global-theme-variables.scss b/src/styling/_global-theme-variables.scss deleted file mode 100644 index 2a98b1328..000000000 --- a/src/styling/_global-theme-variables.scss +++ /dev/null @@ -1,139 +0,0 @@ -.str-chat { - /* Border radius used for circular elements */ - --str-chat__border-radius-circle: var(--radius-max); - - /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */ - --str-chat__font-family: - var(--typography-font-family-sans), system-ui, -apple-system, BlinkMacSystemFont, - Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; - - --str-chat__metadata-emphasis-text: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); - - --str-chat__metadata-default-text: normal var(--typography-font-weight-regular) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - 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-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-normal) - var(--str-chat__font-family); - - --str-chat__body-emphasis-text: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); - - --str-chat__body-default-text: normal var(--typography-font-weight-regular) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); - - --str-chat__heading-xs-text: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-sm) / var(--typography-line-height-normal) - var(--str-chat__font-family); - - --str-chat__heading-sm-text: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); - - --str-chat__heading-md-text: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-lg) / var(--typography-line-height-relaxed) - var(--str-chat__font-family); - - --str-chat__heading-lg-text: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-xl) / var(--typography-line-height-relaxed) - var(--str-chat__font-family); - - --str-chat__numeric-md-text: normal var(--typography-font-weight-bold) - var(--typography-font-size-xxs) / 100% var(--str-chat__font-family); - - --str-chat__numeric-xl-text: normal var(--typography-font-weight-bold) - var(--typography-font-size-sm) / 100% var(--str-chat__font-family); - - color: var(--text-primary, #1a1b25); -} - -.str-chat, -.str-chat__theme-light { - /* Used for emphasis, brands can inject their main color using this variable */ - --str-chat__primary-color: var(--accent-primary); - - /* 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); - - /* Used as a background color for the main chat UI components */ - --str-chat__background-color: var(--str-chat__grey50); - - /* Used as a background color for the main chat UI components */ - --str-chat__secondary-background-color: var(--str-chat__grey50); - - /* A neutral color used to give emphasis to different surfaces */ - --str-chat__surface-color: var(--str-chat__grey300); - - /* A neutral color used to give emphasis to different surfaces */ - --str-chat__secondary-surface-color: var(--str-chat__grey200); - - /* A neutral color used to give emphasis to different surfaces */ - --str-chat__tertiary-surface-color: var(--str-chat__grey100); - - /* The main color used for texts/icons */ - --str-chat__text-color: var(--str-chat__grey950); - - /* Used for texts/icons that need less emphasis */ - --str-chat__text-low-emphasis-color: var(--str-chat__grey500); - - /* Used for displaying disabled UI elements (typically buttons) */ - --str-chat__disabled-color: var(--str-chat__grey400); - - /* Used for error messages, and destructive actions */ - --str-chat__danger-color: var(--str-chat__red400); - - /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */ - --str-chat__message-highlight-color: var(--str-chat__yellow50); - - /* Used for displaying the unread badge */ - --str-chat__unread-badge-color: var(--str-chat__red400); - - /* 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 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); - - /* 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); - - --str-chat__box-shadow-elevation-1: - 0 0 0 1px rgba(0, 0, 0, 0.05), 0 6px 12px 0 rgba(0, 0, 0, 0.16), - 0 20px 32px 0 rgba(0, 0, 0, 0.12); - - /* Used for online indicator and success messages */ - --str-chat__info-color: var(--str-chat__green500); -} - -.str-chat__theme-dark { - --str-chat__primary-color: var(--accent-primary); - --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__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__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__secondary-overlay-color: rgba(0, 0, 0, 0.4); - --str-chat__secondary-overlay-text-color: var(--str-chat__grey50); - --str-chat__box-shadow-color: rgba(0, 0, 0, 0.8); - --str-chat__info-color: var(--str-chat__green500); -} diff --git a/src/styling/_palette-variables.scss b/src/styling/_palette-variables.scss deleted file mode 100644 index 4dc68eda5..000000000 --- a/src/styling/_palette-variables.scss +++ /dev/null @@ -1,20 +0,0 @@ -.str-chat { - --str-chat__grey950: #080707; - --str-chat__grey900: #17191c; - --str-chat__grey800: #1c1e22; - --str-chat__grey700: #272a30; - --str-chat__grey600: #4c525c; - --str-chat__grey500: #72767e; - --str-chat__grey400: #b4b7bb; - --str-chat__grey300: #dbdde1; - --str-chat__grey200: #e9eaed; - --str-chat__grey100: #f4f4f5; - --str-chat__grey50: #ffffff; - - --str-chat__red600: #cc000b; - --str-chat__red400: #ff3742; - - --str-chat__green500: #20e070; - - --str-chat__yellow900: #332500; -} diff --git a/src/styling/index.scss b/src/styling/index.scss index 73da66669..07ba2b084 100644 --- a/src/styling/index.scss +++ b/src/styling/index.scss @@ -1,9 +1,6 @@ // Base styles @use 'accessibility'; @use 'animations'; -@use 'global-layout-variables'; -@use 'global-theme-variables'; -@use 'palette-variables'; @use './variables-tokens.css'; @use 'variables'; @use 'base'; diff --git a/src/styling/variables/font.scss b/src/styling/variables/font.scss index 7af868e36..508fb5a8c 100644 --- a/src/styling/variables/font.scss +++ b/src/styling/variables/font.scss @@ -1,23 +1,23 @@ // HEADING // ================================================================================= // @mixin text-heading-xs { - font: var(--str-chat__font-body-default); + font: var(--str-chat__font-heading-xs); color: var(--text-primary); } @mixin text-heading-sm { - font: var(--str-chat__font-body-emphasis); + font: var(--str-chat__font-heading-sm); color: var(--text-primary); } @mixin text-heading-md { - font: var(--str-chat__font-body-link); - color: var(--text-link); + font: var(--str-chat__font-heading-md); + color: var(--text-primary); } @mixin text-heading-lg { - font: var(--str-chat__font-body-link-emphasis); - color: var(--text-link); + font: var(--str-chat__font-heading-lg); + color: var(--text-primary); } // BODY @@ -175,25 +175,25 @@ // CAPTION // ================================================================================= // --str-chat__font-caption-default: 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__font-caption-emphasis: 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__font-caption-link: 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__font-caption-link-emphasis: 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); // -------------------- @@ -242,8 +242,7 @@ // -------------------- --str-chat__font-numeric-xl: normal var(--typography-font-weight-bold) - var(--typography-font-size-sm) / var(--line-height-line-height-14) - var(--str-chat__font-family); + var(--typography-font-size-sm) / 100% var(--str-chat__font-family); // -------------------- } From 15f69a7f29f7da4d8a38cfb01fd96b33690ecedf Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Wed, 15 Apr 2026 15:29:49 +0200 Subject: [PATCH 6/8] Regenerate dark-theme tokens from Figma --- src/styling/variables-tokens.css | 193 ++++++++++++++++--------------- 1 file changed, 102 insertions(+), 91 deletions(-) diff --git a/src/styling/variables-tokens.css b/src/styling/variables-tokens.css index aa29e5271..d26a87b51 100644 --- a/src/styling/variables-tokens.css +++ b/src/styling/variables-tokens.css @@ -611,29 +611,75 @@ .str-chat__theme-dark, .str-chat:not(.str-chat__theme-dark) *:not(.str-chat__theme-dark) .str-chat__theme-inverse { + /* Chrome (dark semantic scale – must be defined first, referenced below) */ + --chrome-0: var(--base-black); + --chrome-50: var(--neutral-900); + --chrome-100: var(--neutral-800); + --chrome-150: var(--neutral-700); + --chrome-200: var(--neutral-600); + --chrome-300: var(--neutral-500); + --chrome-400: var(--neutral-400); + --chrome-500: var(--neutral-300); + --chrome-600: var(--neutral-200); + --chrome-700: var(--neutral-150); + --chrome-800: var(--neutral-100); + --chrome-900: var(--neutral-50); + --chrome-1000: var(--base-white); + /* Accent & brand */ + --accent-primary: var(--brand-400); + --accent-success: var(--green-300); + --accent-warning: var(--yellow-300); + --accent-error: var(--red-400); + --accent-neutral: var(--chrome-500); + --brand-50: var(--blue-900); + --brand-100: var(--blue-800); + --brand-150: var(--blue-700); + --brand-200: var(--blue-600); + --brand-300: var(--blue-500); + --brand-500: var(--blue-300); + --brand-600: var(--blue-200); + --brand-700: var(--blue-150); + --brand-800: var(--blue-100); + --brand-900: var(--blue-50); /* Background (Figma dark semantics) */ --background-core-scrim: rgba(0, 0, 0, 0.75); --background-core-overlay-light: rgba(0, 0, 0, 0.75); --background-core-overlay-dark: rgba(0, 0, 0, 0.5); - --background-core-surface: var(--neutral-800); - --background-core-surface-subtle: var(--neutral-900); - --background-core-surface-strong: var(--neutral-700); - --background-core-inverse: var(--neutral-50); + --background-core-elevation-0: var(--chrome-0); + --background-core-elevation-1: var(--chrome-50); + --background-core-elevation-2: var(--chrome-100); + --background-core-elevation-3: var(--chrome-200); + --background-core-elevation-4: var(--chrome-300); + --background-core-app: var(--chrome-0); + --background-core-surface: var(--chrome-100); + --background-core-surface-subtle: var(--chrome-50); + --background-core-surface-strong: var(--chrome-150); + --background-core-surface-card: var(--chrome-100); + --background-core-inverse: var(--chrome-1000); + --background-core-on-accent: var(--chrome-1000); --background-core-highlight: var(--yellow-800); - --background-core-surface-card: var(--neutral-800); - --background-core-elevation-0: var(--neutral-800); - --background-core-elevation-1: var(--neutral-900); - --background-core-elevation-2: var(--neutral-700); - --background-core-elevation-3: var(--neutral-600); - --background-core-elevation-4: var(--neutral-500); - --background-core-on-accent: var(--base-black); - --background-core-app: var(--background-core-elevation-0); --background-utility-hover: rgba(255, 255, 255, 0.15); --background-utility-pressed: var(--base-transparent-white-20); --background-utility-selected: rgba(255, 255, 255, 0.25); - --background-utility-disabled: var(--neutral-700); + --background-utility-disabled: var(--chrome-100); + /* Text */ + --text-primary: var(--chrome-900); + --text-secondary: var(--chrome-700); + --text-tertiary: var(--chrome-500); + --text-inverse: var(--chrome-0); + --text-on-accent: var(--chrome-1000); + --text-disabled: var(--chrome-300); + --text-link: var(--brand-600); /* Border */ - --border-utility-disabled: var(--neutral-700); + --border-core-default: var(--chrome-200); + --border-core-subtle: var(--chrome-100); + --border-core-strong: var(--chrome-300); + --border-core-on-surface: var(--chrome-300); + --border-core-inverse: var(--chrome-0); + --border-core-on-accent: var(--chrome-1000); + --border-core-opacity-subtle: var(--base-transparent-white-20); + --border-core-opacity-strong: rgba(255, 255, 255, 0.25); + --border-utility-disabled: var(--chrome-100); --border-utility-focused: var(--brand-150); --border-utility-focus: rgba(120, 168, 255, 0.25); --border-utility-active: var(--accent-primary); @@ -643,26 +689,11 @@ --border-utility-error: var(--accent-error); --border-utility-warning: var(--accent-warning); --border-utility-success: var(--accent-success); - --border-core-default: var(--neutral-600); - --border-core-subtle: var(--neutral-800); - --border-core-strong: var(--neutral-400); - --border-core-on-surface: var(--neutral-500); - --border-core-inverse: var(--neutral-900); - --border-core-on-accent: var(--base-black); - --border-core-opacity-subtle: var(--base-transparent-white-20); - --border-core-opacity-strong: rgba(255, 255, 255, 0.25); /* System */ --system-bg-blur: rgba(0, 0, 0, 0.01); --system-scrollbar: rgba(255, 255, 255, 0.5); - --system-text: var(--base-white); - /* Text */ - --text-primary: var(--base-white); - --text-secondary: var(--neutral-100); - --text-tertiary: var(--neutral-300); - --text-inverse: var(--neutral-900); - --text-on-accent: var(--base-white); - --text-disabled: var(--neutral-500); - --text-link: var(--brand-600); + --system-text: var(--chrome-1000); + --system-caret: var(--accent-primary); /* Avatar */ --avatar-palette-bg-1: var(--blue-600); --avatar-palette-bg-2: var(--cyan-600); @@ -674,49 +705,21 @@ --avatar-palette-text-3: var(--green-100); --avatar-palette-text-4: var(--purple-100); --avatar-palette-text-5: var(--yellow-100); - --avatar-bg-placeholder: var(--neutral-700); - --avatar-text-placeholder: var(--neutral-400); - /* Accent & brand */ - --accent-success: var(--green-300); - --accent-warning: var(--yellow-300); - --accent-error: var(--red-400); - --accent-neutral: var(--neutral-500); - --accent-primary: var(--brand-400); - --brand-50: var(--blue-900); - --brand-100: var(--blue-800); - --brand-150: var(--blue-700); - --brand-200: var(--blue-600); - --brand-300: var(--blue-500); - --brand-500: var(--blue-300); - --brand-600: var(--blue-200); - --brand-700: var(--blue-150); - --brand-800: var(--blue-100); - --brand-900: var(--blue-50); + --avatar-bg-default: var(--avatar-palette-bg-1); + --avatar-bg-placeholder: var(--chrome-150); + --avatar-text-default: var(--avatar-palette-text-1); + --avatar-text-placeholder: var(--chrome-500); /* Skeleton */ --skeleton-loading-base: var(--base-transparent-0); - --skeleton-loading-highlight: var(--base-transparent-white-20); - /* Chrome (dark semantic scale) */ - --chrome-0: var(--base-black); - --chrome-50: var(--neutral-900); - --chrome-100: var(--neutral-800); - --chrome-150: var(--neutral-700); - --chrome-200: var(--neutral-600); - --chrome-300: var(--neutral-500); - --chrome-400: var(--neutral-400); - --chrome-500: var(--neutral-300); - --chrome-600: var(--neutral-200); - --chrome-700: var(--neutral-150); - --chrome-800: var(--neutral-100); - --chrome-900: var(--neutral-50); - --chrome-1000: var(--base-white); - /* Button (dark mode – aligned with Figma / design-system-tokens dark semantics) */ + --skeleton-loading-highlight: var(--background-core-overlay-light); + /* Button (dark mode – aligned with Figma dark semantics) */ --button-primary-bg: var(--accent-primary); --button-primary-bg-liquid-glass: var(--base-transparent-0); - --button-primary-text: var(--text-link); + --button-primary-text: var(--accent-primary); --button-primary-text-on-accent: var(--text-on-accent); --button-primary-text-inverse: var(--text-inverse); --button-primary-border: var(--brand-200); - --button-primary-border-inverse: var(--text-inverse); + --button-primary-border-inverse: var(--border-core-inverse); --button-secondary-bg: var(--background-core-surface); --button-secondary-bg-liquid-glass: var(--background-core-elevation-0); --button-secondary-text: var(--text-primary); @@ -736,24 +739,30 @@ --chat-bg-outgoing: var(--brand-100); --chat-bg-attachment-incoming: var(--background-core-surface-strong); --chat-bg-attachment-outgoing: var(--brand-150); - --chat-reply-indicator-incoming: var(--neutral-500); - --chat-reply-indicator-outgoing: var(--brand-700); - --chat-poll-progress-fill-outgoing: var(--base-white); + --chat-text-incoming: var(--text-primary); + --chat-text-outgoing: var(--brand-900); --chat-text-username: var(--text-secondary); --chat-text-timestamp: var(--text-tertiary); + --chat-text-typing-indicator: var(--chat-text-incoming); --chat-text-read: var(--accent-primary); --chat-text-mention: var(--text-link); --chat-text-link: var(--text-link); --chat-text-reaction: var(--text-secondary); --chat-text-system: var(--text-secondary); --chat-border-incoming: var(--border-core-subtle); + --chat-border-outgoing: var(--brand-100); --chat-border-on-chat-incoming: var(--border-core-strong); + --chat-border-on-chat-outgoing: var(--brand-300); + --chat-reply-indicator-incoming: var(--chrome-400); + --chat-reply-indicator-outgoing: var(--brand-400); --chat-waveform-bar: var(--border-core-opacity-strong); --chat-waveform-bar-playing: var(--accent-primary); --chat-thread-connector-incoming: var(--border-core-default); - --chat-text-typing-indicator: var(--chat-text-incoming); + --chat-thread-connector-outgoing: var(--brand-150); --chat-poll-progress-track-incoming: var(--control-progress-bar-track); + --chat-poll-progress-track-outgoing: var(--brand-200); --chat-poll-progress-fill-incoming: var(--control-progress-bar-fill); + --chat-poll-progress-fill-outgoing: var(--accent-primary); /* Input */ --input-text-default: var(--text-primary); --input-text-placeholder: var(--text-tertiary); @@ -767,50 +776,52 @@ --reaction-text: var(--text-primary); --reaction-emoji: var(--text-primary); /* Presence */ - --presence-border: var(--border-core-inverse); + --presence-bg-online: var(--accent-success); --presence-bg-offline: var(--accent-neutral); - /* System */ - --system-caret: var(--accent-primary); - /* Badge (-on-dark in tokens = *-inverse in react) */ + --presence-border: var(--border-core-inverse); + /* Badge */ --badge-bg-overlay: rgba(0, 0, 0, 0.75); --badge-bg-default: var(--background-core-elevation-3); --badge-bg-primary: var(--accent-primary); --badge-bg-neutral: var(--accent-neutral); + --badge-bg-error: var(--accent-error); + --badge-bg-inverse: var(--chrome-1000); --badge-text: var(--text-primary); --badge-text-on-accent: var(--text-on-accent); - --badge-border: var(--border-core-inverse); - --badge-bg-inverse: var(--chrome-1000); --badge-text-inverse: var(--text-inverse); + --badge-border: var(--border-core-inverse); /* Control */ --control-checkbox-bg: var(--base-transparent-0); - --control-playback-thumb-border-default: var(--border-core-opacity-strong); + --control-checkbox-border: var(--border-core-default); + --control-checkbox-bg-selected: var(--accent-primary); + --control-checkbox-icon: var(--text-on-accent); --control-radio-button-bg: var(--base-transparent-0); + --control-radio-button-border: var(--border-core-default); + --control-radio-button-bg-selected: var(--accent-primary); + --control-radio-button-indicator: var(--text-on-accent); --control-radio-check-bg: var(--base-transparent-0); + --control-radio-check-border: var(--border-core-default); + --control-radio-check-bg-selected: var(--accent-primary); + --control-radio-check-icon: var(--text-on-accent); --control-remove-control-bg: var(--background-core-inverse); --control-remove-control-icon: var(--text-inverse); --control-remove-control-border: var(--border-core-inverse); --control-progress-bar-track: var(--background-core-surface-strong); --control-progress-bar-fill: var(--accent-neutral); --control-toggle-switch-bg: var(--accent-neutral); + --control-toggle-switch-bg-selected: var(--accent-primary); --control-toggle-switch-bg-disabled: var(--background-utility-disabled); - --control-toggle-switch-knob: var(--background-core-elevation-4); + --control-toggle-switch-knob: var(--background-core-on-accent); --control-playback-toggle-text: var(--text-primary); --control-playback-toggle-border: var(--border-core-default); - --control-checkbox-border: var(--border-core-default); - --control-checkbox-bg-selected: var(--accent-primary); - --control-checkbox-icon: var(--text-on-accent); - --control-play-button-bg: var(--chrome-1000); + --control-play-button-bg: rgba(0, 0, 0, 0.75); --control-play-button-icon: var(--text-on-accent); - --control-playback-thumb-bg-default: var(--background-core-inverse); - --control-playback-thumb-border-active: var(--border-core-on-accent); + --control-playback-thumb-bg-default: var(--background-core-on-accent); + --control-playback-thumb-border-default: var(--border-core-opacity-strong); --control-playback-thumb-bg-active: var(--accent-primary); - --control-radio-button-border: var(--border-core-default); - --control-radio-button-bg-selected: var(--accent-primary); - --control-radio-button-indicator: var(--text-on-accent); - --control-radio-check-border: var(--border-core-default); - --control-radio-check-bg-selected: var(--accent-primary); - --control-radio-check-icon: var(--text-on-accent); + --control-playback-thumb-border-active: var(--border-core-on-accent); /* Avatar */ + --avatar-presence-bg-online: var(--accent-success); --avatar-presence-bg-offline: var(--accent-neutral); --avatar-presence-border: var(--border-core-inverse); } \ No newline at end of file From 9b3891aea19e59916ccf23f8cd07300fdc4b491c Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Wed, 15 Apr 2026 18:01:53 +0200 Subject: [PATCH 7/8] Add properly generated tokens --- src/styling/dark.scss | 610 ++++++++++++++++++++++ src/styling/index.scss | 2 +- src/styling/light.scss | 610 ++++++++++++++++++++++ src/styling/variables-tokens.css | 827 ------------------------------ src/styling/variables-tokens.scss | 14 + 5 files changed, 1235 insertions(+), 828 deletions(-) create mode 100644 src/styling/dark.scss create mode 100644 src/styling/light.scss delete mode 100644 src/styling/variables-tokens.css create mode 100644 src/styling/variables-tokens.scss diff --git a/src/styling/dark.scss b/src/styling/dark.scss new file mode 100644 index 000000000..0e6401ba8 --- /dev/null +++ b/src/styling/dark.scss @@ -0,0 +1,610 @@ +@mixin variables { + /** + * Do not edit directly, this file was auto-generated. + */ + --base-transparent-0: rgba(255, 255, 255, 0); + --base-transparent-white-10: rgba(255, 255, 255, 0.1); + --base-transparent-white-20: rgba(255, 255, 255, 0.2); + --base-transparent-white-30: rgba(255, 255, 255, 0.3); + --base-transparent-white-70: rgba(255, 255, 255, 0.7); + --base-transparent-black-5: rgba(0, 0, 0, 0.05); /** Used for bg in closeButton */ + --base-transparent-black-10: rgba(0, 0, 0, 0.1); /** Used for bg in closeButton */ + --base-transparent-black-70: rgba(0, 0, 0, 0.7); /** Used for bg in closeButton */ + --base-black: #000000; + --base-white: #ffffff; + --slate-50: #f6f8fa; + --slate-100: #ebeef1; + --slate-150: #d5dbe1; + --slate-200: #c0c8d2; + --slate-300: #a3acba; + --slate-400: #87909f; + --slate-500: #687385; + --slate-600: #545969; + --slate-700: #414552; + --slate-800: #30313d; + --slate-900: #1a1b25; + --neutral-50: #f8f8f8; + --neutral-100: #efefef; + --neutral-150: #d8d8d8; + --neutral-200: #c4c4c4; + --neutral-300: #ababab; + --neutral-400: #8f8f8f; + --neutral-500: #6a6a6a; + --neutral-600: #565656; + --neutral-700: #464646; + --neutral-800: #323232; + --neutral-900: #1c1c1c; + --blue-50: #f3f7ff; + --blue-100: #e3edff; + --blue-150: #c3d9ff; + --blue-200: #a5c5ff; + --blue-300: #78a8ff; + --blue-400: #4586ff; + --blue-500: #005fff; + --blue-600: #1b53bd; + --blue-700: #19418d; + --blue-800: #142f63; + --blue-900: #091a3b; + --cyan-50: #f1fbfc; + --cyan-100: #d1f3f6; + --cyan-150: #a9e4ea; + --cyan-200: #72d7e0; + --cyan-300: #45bcc7; + --cyan-400: #1e9ea9; + --cyan-500: #248088; + --cyan-600: #006970; + --cyan-700: #065056; + --cyan-800: #003a3f; + --cyan-900: #002124; + --green-50: #e1ffee; + --green-100: #bdfcdb; + --green-150: #8febbd; + --green-200: #59dea3; + --green-300: #00c384; + --green-400: #00a46e; + --green-500: #277e59; + --green-600: #006643; + --green-700: #004f33; + --green-800: #003a25; + --green-900: #002213; + --purple-50: #f7f8ff; + --purple-100: #ecedff; + --purple-150: #d4d7ff; + --purple-200: #c1c5ff; + --purple-300: #a1a3ff; + --purple-400: #8482fc; + --purple-500: #644af9; + --purple-600: #553bd8; + --purple-700: #4032a1; + --purple-800: #2e2576; + --purple-900: #1a114d; + --yellow-50: #fef9da; + --yellow-100: #fcedb9; + --yellow-150: #fcd579; + --yellow-200: #f6bf57; + --yellow-300: #fa922b; + --yellow-400: #f26d10; + --yellow-500: #c84801; + --yellow-600: #a82c00; + --yellow-700: #842106; + --yellow-800: #5f1a05; + --yellow-900: #331302; + --red-50: #fff5fa; + --red-100: #ffe7f2; + --red-150: #ffccdf; + --red-200: #ffb1cd; + --red-300: #fe87a1; + --red-400: #fc526a; + --red-500: #d90d10; + --red-600: #b3093c; + --red-700: #890d37; + --red-800: #68052b; + --red-900: #3e021a; + --violet-50: #fef4ff; + --violet-100: #fbe8fe; + --violet-150: #f7cffc; + --violet-200: #eeb5f4; + --violet-300: #e68bec; + --violet-400: #d75fe7; + --violet-500: #b716ca; + --violet-600: #9d00ae; + --violet-700: #7c0089; + --violet-800: #5c0066; + --violet-900: #36003d; + --lime-50: #f1fde8; + --lime-100: #d4ffb0; + --lime-150: #b1ee79; + --lime-200: #9cda5d; + --lime-300: #78c100; + --lime-400: #639e11; + --lime-500: #4b7a0a; + --lime-600: #3e6213; + --lime-700: #355315; + --lime-800: #203a00; + --lime-900: #112100; + --size-2: 2px; + --size-4: 4px; + --size-6: 6px; + --size-8: 8px; + --size-12: 12px; + --size-16: 16px; + --size-20: 20px; + --size-24: 24px; + --size-32: 32px; + --size-40: 40px; + --size-48: 48px; + --size-64: 64px; + --size-28: 28px; + --size-80: 80px; + --size-128: 128px; + --size-240: 240px; + --size-320: 320px; + --size-480: 480px; + --size-560: 560px; + --size-640: 640px; + --size-760: 760px; + --size-144: 144px; + --size-208: 208px; + --size-56: 56px; + --radius-0: 0px; + --radius-2: 2px; + --radius-4: 4px; + --radius-6: 6px; + --radius-8: 8px; + --radius-12: 12px; + --radius-16: 16px; + --radius-20: 20px; + --radius-24: 24px; + --radius-32: 32px; + --radius-full: 9999px; + --space-0: 0px; + --space-2: 2px; + --space-4: 4px; + --space-8: 8px; + --space-12: 12px; + --space-16: 16px; + --space-20: 20px; + --space-24: 24px; + --space-32: 32px; + --space-40: 40px; + --space-48: 48px; + --space-64: 64px; + --space-80: 80px; + --w100: 1px; + --w150: 1.5px; + --w200: 2px; + --w300: 3px; + --w400: 4px; + --w120: 1.2px; + --font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ + --font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ + --font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ + --font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ + --font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */ + --font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */ + --font-weight-w400: 400; + --font-weight-w500: 500; + --font-weight-w600: 600; + --font-weight-w700: 700; + --font-size-size-8: 8px; + --font-size-size-10: 10px; + --font-size-size-11: 11px; + --font-size-size-12: 12px; + --font-size-size-13: 13px; + --font-size-size-14: 14px; + --font-size-size-16: 16px; + --font-size-size-15: 15px; + --font-size-size-17: 17px; + --font-size-size-18: 18px; + --font-size-size-20: 20px; + --font-size-size-22: 22px; + --font-size-size-24: 24px; + --font-size-size-28: 28px; + --font-size-size-32: 32px; + --font-size-size-40: 40px; + --font-size-size-48: 48px; + --font-size-size-64: 64px; + --line-height-line-height-8: 8px; + --line-height-line-height-10: 10px; + --line-height-line-height-12: 12px; + --line-height-line-height-13: 13px; + --line-height-line-height-14: 14px; + --line-height-line-height-15: 15px; + --line-height-line-height-16: 16px; + --line-height-line-height-17: 17px; + --line-height-line-height-18: 18px; + --line-height-line-height-20: 20px; + --line-height-line-height-24: 24px; + --line-height-line-height-28: 28px; + --line-height-line-height-32: 32px; + --line-height-line-height-40: 40px; + --line-height-line-height-48: 48px; + --typography-font-family-sans: 'Geist'; + --typography-font-family-mono: 'Geist Mono'; + --typography-font-weight-regular: 400; + --typography-font-weight-medium: 500; + --typography-font-weight-semi-bold: 600; + --typography-font-weight-bold: 700; + --typography-font-size-xxs: 10px; /** Micro text such as timestamps or subtle metadata. */ + --typography-font-size-xs: 12px; /** Compact secondary text, small UI labels. */ + --typography-font-size-sm: 14px; /** Default mobile body size, small controls. */ + --typography-font-size-md: 16px; /** Default desktop body size, main text. */ + --typography-font-size-lg: 18px; /** Medium emphasis, section labels. */ + --typography-font-size-xl: 20px; /** Small headings. */ + --typography-font-size-2xl: 24px; /** Section titles, important headings. */ + --typography-font-size-micro: 8px; /** Micro text such as timestamps or subtle metadata. */ + --typography-line-height-tight: 16px; /** Compact text, headers, UI labels. */ + --typography-line-height-normal: 20px; /** Default reading line-height for sizes 14–16px. */ + --typography-line-height-relaxed: 24px; /** For larger text sizes or multiline descriptions. */ + --light-elevation-1: + 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), + 0px 4px 8px 0px rgba(0, 0, 0, 0.06); /** Low elevation level for subtle separation. */ + --light-elevation-2: + 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.12), + 0px 6px 16px 0px rgba(0, 0, 0, 0.06); + --light-elevation-3: + 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 8px 0px rgba(0, 0, 0, 0.14), + 0px 12px 24px 0px rgba(0, 0, 0, 0.1); + --light-elevation-4: + 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 6px 12px 0px rgba(0, 0, 0, 0.16), + 0px 20px 32px 0px rgba(0, 0, 0, 0.12); + --dark-elevation-1: + 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.2), + 0px 4px 8px 0px rgba(0, 0, 0, 0.1); + --dark-elevation-2: + 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.22), + 0px 6px 16px 0px rgba(0, 0, 0, 0.12); + --dark-elevation-3: + 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 4px 8px 0px rgba(0, 0, 0, 0.24), + 0px 12px 24px 0px rgba(0, 0, 0, 0.14); + --dark-elevation-4: + 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 6px 12px 0px rgba(0, 0, 0, 0.28), + 0px 20px 32px 0px rgba(0, 0, 0, 0.16); + --radius-none: 0px; + --radius-xxs: 2px; + --radius-xs: 4px; + --radius-sm: 6px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-2xl: 20px; + --radius-max: 9999px; + --radius-3xl: 24px; + --radius-4xl: 32px; + --spacing-none: 0px; /** No spacing. Used for tight component joins. */ + --spacing-xxs: 4px; /** Base unit. Minimal padding, tight gaps. */ + --spacing-xs: 8px; /** Small padding and default vertical gaps. */ + --spacing-sm: 12px; /** Common internal spacing in inputs and buttons. */ + --spacing-md: 16px; /** Default large padding for sections and cards. */ + --spacing-xl: 24px; /** Comfortable spacing for chat bubbles and list items. */ + --spacing-2xl: 32px; /** Larger spacing for panels, modals, and gutters. */ + --spacing-3xl: 40px; /** Used for wide layout spacing and breathing room. */ + --spacing-lg: 20px; /** Medium spacing for grouping elements and section breaks. */ + --spacing-xxxs: 2px; + --device-radius: 8px; + --device-safe-area-bottom: 0px; + --device-safe-area-top: 0px; + --message-bubble-radius-group-top: 20px; + --message-bubble-radius-group-middle: 20px; + --message-bubble-radius-group-bottom: 20px; + --message-bubble-radius-tail: 0px; + --message-bubble-radius-attachment: 12px; + --message-bubble-radius-attachment-inline: 8px; + --composer-radius-fixed: 24px; + --composer-radius-floating: 24px; + --button-radius-lg: 9999px; + --button-radius-md: 9999px; + --button-radius-sm: 9999px; + --button-radius-full: 9999px; + --button-visual-height-sm: 32px; + --button-visual-height-md: 40px; + --button-visual-height-lg: 48px; + --button-visual-height-xs: 24px; + /** + * Minimum interactive hit target size. + * + * iOS / Android: enforce minimum touch target. + * Web: do not apply a min-width or min-height; size to content. + * + * Note: Web uses a placeholder value in Figma due to variable mode constraints. + */ + --button-hit-target-min-height: 48px; + /** + * Minimum interactive hit target size. + * + * iOS / Android: enforce minimum touch target. + * Web: do not apply a min-width or min-height; size to content. + * + * Note: Web uses a placeholder value in Figma due to variable mode constraints. + */ + --button-hit-target-min-width: 48px; + --button-padding-y-lg: 14px; + --button-padding-y-md: 10px; + --button-padding-y-sm: 6px; + --button-padding-y-xs: 4px; + --button-padding-x-icon-only-lg: 14px; + --button-padding-x-icon-only-md: 10px; + --button-padding-x-icon-only-sm: 6px; + --button-padding-x-icon-only-xs: 4px; + --button-padding-x-with-label-lg: 16px; + --button-padding-x-with-label-md: 16px; + --button-padding-x-with-label-sm: 16px; + --button-padding-x-with-label-xs: 12px; + --button-primary-bg: #4586ff; + --button-primary-bg-liquid-glass: rgba(255, 255, 255, 0); + --button-primary-text: #4586ff; + --button-primary-text-on-accent: #ffffff; + --button-primary-text-on-dark: #000000; + --button-primary-border: #1b53bd; + --button-primary-border-on-dark: #000000; + --button-secondary-bg: #323232; + --button-secondary-bg-liquid-glass: #000000; + --button-secondary-text: #f8f8f8; + --button-secondary-text-on-accent: #f8f8f8; + --button-secondary-text-on-dark: #000000; + --button-secondary-border: #565656; + --button-secondary-border-on-dark: #000000; + --button-destructive-bg: #fc526a; + --button-destructive-bg-liquid-glass: #000000; + --button-destructive-text: #fc526a; + --button-destructive-text-on-accent: #ffffff; + --button-destructive-text-on-dark: #000000; + --button-destructive-border: #fc526a; + --button-destructive-border-on-dark: #000000; + --icon-size-xs: 12px; + --icon-size-sm: 16px; + --icon-size-md: 20px; + --icon-size-lg: 32px; + --icon-stroke-subtle: 1.2px; + --icon-stroke-default: 1.5px; + --icon-stroke-emphasis: 2px; + --emoji-sm: 16px; + --emoji-md: 24px; + --emoji-lg: 32px; + --emoji-xl: 48px; + --emoji-2xl: 64px; + --background-core-app: #000000; /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */ + --background-core-elevation-0: #000000; /** The base layer. Always white, used as the reference point for the elevation scale. Steps above this gain depth in dark mode through progressively lighter backgrounds. */ + --background-core-elevation-1: #1c1c1c; /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */ + --background-core-elevation-2: #323232; /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */ + --background-core-elevation-3: #565656; /** Used for badge counts that float above other UI elements. */ + --background-core-surface-default: #323232; /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */ + --background-core-surface-subtle: #1c1c1c; /** A slightly receded background. Used for secondary containers or to create soft visual separation. */ + --background-core-surface-card: #323232; /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */ + --background-core-surface-strong: #464646; /** A more prominent background. Used for elements that need to stand out from the main surface. */ + --background-core-inverse: #ffffff; /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */ + --background-core-on-accent: #ffffff; /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */ + --background-core-highlight: #5f1a05; /** A tint for drawing attention to content. Used for highlights and pinned messages. */ + --background-core-overlay-light: rgba( + 0, + 0, + 0, + 0.75 + ); /** A light semi-transparent layer. Used to lighten surfaces and for hover states on dark backgrounds. */ + --background-core-overlay-dark: rgba( + 0, + 0, + 0, + 0.5 + ); /** A dark semi-transparent layer. Used for image overlays. */ + --background-core-scrim: rgba( + 0, + 0, + 0, + 0.75 + ); /** A heavy semi-transparent layer. Used behind sheets, drawers, and modals to separate them from content. */ + --background-utility-hover: rgba( + 255, + 255, + 255, + 0.15 + ); /** A semi-transparent overlay applied on pointer hover. Sits on top of any surface without replacing it. */ + --background-utility-pressed: rgba( + 255, + 255, + 255, + 0.2 + ); /** A slightly stronger overlay applied during an active press or tap. Provides tactile feedback on interactive elements. */ + --background-utility-selected: rgba( + 255, + 255, + 255, + 0.25 + ); /** Indicates an active or selected state. Used for selected messages, active list items, and toggled controls. */ + --background-utility-disabled: #323232; /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */ + --border-utility-error: #fc526a; /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */ + --border-utility-warning: #fa922b; /** Border for cautionary states. Used on inputs or elements requiring attention. */ + --border-utility-success: #00c384; /** Border for positive or confirmed states. Used on validated inputs and success indicators. */ + --border-utility-selected: rgba( + 255, + 255, + 255, + 0.15 + ); /** Border for selected or active items. Used for highlighted list items and active controls. */ + --border-utility-disabled: #323232; /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */ + --border-utility-focused: #19418d; /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */ + --border-utility-active: #4586ff; /** Active input border. Used for focused text fields and selected form elements. */ + --border-utility-hover: rgba( + 255, + 255, + 255, + 0.1 + ); /** Applied on pointer hover over bordered interactive elements. */ + --border-utility-pressed: rgba( + 255, + 255, + 255, + 0.2 + ); /** Applied during an active press on bordered interactive elements. */ + --border-utility-disabled-on-surface: #464646; /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */ + --border-core-default: #565656; /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */ + --border-core-subtle: #323232; /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */ + --border-core-strong: #6a6a6a; /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */ + --border-core-inverse: #000000; /** Used on dark backgrounds. */ + --border-core-on-accent: #ffffff; /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */ + --border-core-opacity-subtle: rgba( + 255, + 255, + 255, + 0.2 + ); /** A very light transparent border. Used as a frame treatment on images and media attachments. */ + --border-core-opacity-strong: rgba( + 255, + 255, + 255, + 0.25 + ); /** A stronger transparent border for elements on colored or dark backgrounds. Used for waveform bars and similar treatments. */ + --border-core-on-inverse: #000000; /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */ + --border-core-on-surface: #6a6a6a; /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */ + --chat-bg-incoming: #323232; /** Incoming bubble background. */ + --chat-bg-outgoing: #142f63; /** Outgoing bubble background. */ + --chat-bg-attachment-incoming: #464646; /** Attachment card in incoming bubble. */ + --chat-bg-attachment-outgoing: #19418d; /** Attachment card in outgoing bubble. */ + --chat-text-incoming: #f8f8f8; /** Message body text. */ + --chat-text-outgoing: #f3f7ff; /** Message body text. */ + --chat-text-username: #d8d8d8; /** Username label. */ + --chat-text-timestamp: #ababab; /** Time labels. */ + --chat-text-typing-indicator: #f8f8f8; /** Typing indicator chip. */ + --chat-text-read: #4586ff; + --chat-text-mention: #a5c5ff; /** Mention styling. */ + --chat-text-link: #a5c5ff; /** Links inside message bubbles. */ + --chat-text-reaction: #d8d8d8; /** Reaction count text. */ + --chat-text-system: #d8d8d8; /** System messages like date separators. */ + --chat-border-incoming: #323232; + --chat-border-outgoing: #142f63; + --chat-border-on-chat-incoming: #6a6a6a; + --chat-border-on-chat-outgoing: #005fff; + --chat-reply-indicator-incoming: #8f8f8f; /** Reply indicator shading for incoming. */ + --chat-reply-indicator-outgoing: #4586ff; /** Reply indicator shading for outgoing. */ + --chat-waveform-bar: rgba(255, 255, 255, 0.25); + --chat-waveform-bar-playing: #4586ff; + --chat-poll-progress-track-incoming: #464646; + --chat-poll-progress-track-outgoing: #1b53bd; + --chat-poll-progress-fill-incoming: #ababab; + --chat-poll-progress-fill-outgoing: #4586ff; + --chat-thread-connector-incoming: #565656; + --chat-thread-connector-outgoing: #19418d; + --input-text-default: #f8f8f8; /** Main text inside the chat input. */ + --input-text-placeholder: #ababab; /** Placeholder text for the input. Lower emphasis than main text. */ + --input-text-disabled: #6a6a6a; /** Placeholder text for the input. Lower emphasis than main text. */ + --input-text-icon: #ababab; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */ + --input-send-icon: #4586ff; /** Default send icon color in the input. Uses the brand accent. */ + --input-send-icon-disabled: #6a6a6a; /** Send icon when disabled (e.g. empty input). */ + --reaction-bg: #565656; + --reaction-border: #565656; + --reaction-text: #f8f8f8; + --reaction-emoji: #f8f8f8; + --presence-bg-online: #00c384; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --presence-border: #000000; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ + --presence-bg-offline: #ababab; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --system-text: #ffffff; + --system-bg-blur: rgba(0, 0, 0, 0.01); + --system-scrollbar: rgba(255, 255, 255, 0.5); + --system-caret: #4586ff; + --badge-bg-default: #565656; + --badge-bg-primary: #4586ff; + --badge-bg-neutral: #ababab; + --badge-bg-error: #fc526a; + --badge-bg-inverse: #ffffff; + --badge-bg-overlay: rgba(0, 0, 0, 0.75); + --badge-text: #f8f8f8; + --badge-text-on-inverse: #000000; + --badge-text-on-accent: #ffffff; + --badge-border: #000000; + --control-remove-control-bg: #ffffff; + --control-remove-control-icon: #000000; + --control-remove-control-border: #000000; + --control-progress-bar-fill: #ababab; + --control-progress-bar-track: #464646; + --control-toggle-switch-bg: #ababab; + --control-toggle-switch-bg-selected: #4586ff; + --control-toggle-switch-bg-disabled: #323232; + --control-toggle-switch-knob: #ffffff; + --control-playback-toggle-text: #f8f8f8; + --control-playback-toggle-border: #565656; + --control-checkbox-bg: rgba(255, 255, 255, 0); + --control-checkbox-border: #565656; + --control-checkbox-bg-selected: #4586ff; + --control-checkbox-icon: #ffffff; + --control-play-button-bg: rgba(0, 0, 0, 0.75); + --control-play-button-icon: #ffffff; + --control-playback-thumb-bg-default: #ffffff; + --control-playback-thumb-border-active: #ffffff; + --control-playback-thumb-bg-active: #4586ff; + --control-playback-thumb-border-default: rgba(255, 255, 255, 0.25); + --control-radio-button-bg: rgba(255, 255, 255, 0); + --control-radio-button-border: #565656; + --control-radio-button-bg-selected: #4586ff; + --control-radio-button-indicator: #ffffff; + --control-radio-check-bg: rgba(255, 255, 255, 0); + --control-radio-check-border: #565656; + --control-radio-check-bg-selected: #4586ff; + --control-radio-check-icon: #ffffff; + --control-chip-border: #565656; + --control-chip-text: #f8f8f8; + --text-primary: #f8f8f8; /** Main body text. Used for message content, titles, and any text that carries primary meaning. */ + --text-secondary: #d8d8d8; /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */ + --text-tertiary: #ababab; /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */ + --text-on-inverse: #000000; /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */ + --text-on-accent: #ffffff; /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */ + --text-disabled: #6a6a6a; /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */ + --text-link: #a5c5ff; /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */ + --avatar-palette-bg-1: #1b53bd; + --avatar-palette-bg-2: #006970; + --avatar-palette-bg-3: #006643; + --avatar-palette-bg-4: #553bd8; + --avatar-palette-bg-5: #a82c00; + --avatar-palette-text-1: #e3edff; + --avatar-palette-text-2: #d1f3f6; + --avatar-palette-text-3: #bdfcdb; + --avatar-palette-text-4: #ecedff; + --avatar-palette-text-5: #fcedb9; + --avatar-bg-default: #1b53bd; + --avatar-bg-placeholder: #464646; + --avatar-text-default: #e3edff; + --avatar-text-placeholder: #ababab; + --avatar-presence-bg-online: #00c384; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --avatar-presence-bg-offline: #ababab; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --avatar-presence-border: #000000; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ + --accent-primary: #4586ff; /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */ + --accent-success: #00c384; /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */ + --accent-warning: #fa922b; /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */ + --accent-error: #fc526a; /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */ + --accent-neutral: #ababab; /** A mid-tone gray for de-emphasized UI elements. */ + --brand-50: #091a3b; + --brand-100: #142f63; + --brand-150: #19418d; + --brand-200: #1b53bd; + --brand-300: #005fff; + --brand-400: #4586ff; + --brand-500: #78a8ff; + --brand-600: #a5c5ff; + --brand-700: #c3d9ff; + --brand-800: #e3edff; + --brand-900: #f3f7ff; + --skeleton-loading-base: rgba( + 255, + 255, + 255, + 0 + ); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */ + --skeleton-loading-highlight: rgba( + 0, + 0, + 0, + 0.75 + ); /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */ + --chrome-0: #000000; + --chrome-50: #1c1c1c; + --chrome-100: #323232; + --chrome-150: #464646; + --chrome-200: #565656; + --chrome-300: #6a6a6a; + --chrome-400: #8f8f8f; + --chrome-500: #ababab; + --chrome-600: #c4c4c4; + --chrome-700: #d8d8d8; + --chrome-800: #efefef; + --chrome-900: #f8f8f8; + --chrome-1000: #ffffff; +} diff --git a/src/styling/index.scss b/src/styling/index.scss index 07ba2b084..a61fc55d8 100644 --- a/src/styling/index.scss +++ b/src/styling/index.scss @@ -1,7 +1,7 @@ // Base styles @use 'accessibility'; @use 'animations'; -@use './variables-tokens.css'; +@use 'variables-tokens'; @use 'variables'; @use 'base'; @use 'fonts'; diff --git a/src/styling/light.scss b/src/styling/light.scss new file mode 100644 index 000000000..5b93f6d4d --- /dev/null +++ b/src/styling/light.scss @@ -0,0 +1,610 @@ +@mixin variables { + /** + * Do not edit directly, this file was auto-generated. + */ + --base-transparent-0: rgba(255, 255, 255, 0); + --base-transparent-white-10: rgba(255, 255, 255, 0.1); + --base-transparent-white-20: rgba(255, 255, 255, 0.2); + --base-transparent-white-30: rgba(255, 255, 255, 0.3); + --base-transparent-white-70: rgba(255, 255, 255, 0.7); + --base-transparent-black-5: rgba(0, 0, 0, 0.05); /** Used for bg in closeButton */ + --base-transparent-black-10: rgba(0, 0, 0, 0.1); /** Used for bg in closeButton */ + --base-transparent-black-70: rgba(0, 0, 0, 0.7); /** Used for bg in closeButton */ + --base-black: #000000; + --base-white: #ffffff; + --slate-50: #f6f8fa; + --slate-100: #ebeef1; + --slate-150: #d5dbe1; + --slate-200: #c0c8d2; + --slate-300: #a3acba; + --slate-400: #87909f; + --slate-500: #687385; + --slate-600: #545969; + --slate-700: #414552; + --slate-800: #30313d; + --slate-900: #1a1b25; + --neutral-50: #f8f8f8; + --neutral-100: #efefef; + --neutral-150: #d8d8d8; + --neutral-200: #c4c4c4; + --neutral-300: #ababab; + --neutral-400: #8f8f8f; + --neutral-500: #6a6a6a; + --neutral-600: #565656; + --neutral-700: #464646; + --neutral-800: #323232; + --neutral-900: #1c1c1c; + --blue-50: #f3f7ff; + --blue-100: #e3edff; + --blue-150: #c3d9ff; + --blue-200: #a5c5ff; + --blue-300: #78a8ff; + --blue-400: #4586ff; + --blue-500: #005fff; + --blue-600: #1b53bd; + --blue-700: #19418d; + --blue-800: #142f63; + --blue-900: #091a3b; + --cyan-50: #f1fbfc; + --cyan-100: #d1f3f6; + --cyan-150: #a9e4ea; + --cyan-200: #72d7e0; + --cyan-300: #45bcc7; + --cyan-400: #1e9ea9; + --cyan-500: #248088; + --cyan-600: #006970; + --cyan-700: #065056; + --cyan-800: #003a3f; + --cyan-900: #002124; + --green-50: #e1ffee; + --green-100: #bdfcdb; + --green-150: #8febbd; + --green-200: #59dea3; + --green-300: #00c384; + --green-400: #00a46e; + --green-500: #277e59; + --green-600: #006643; + --green-700: #004f33; + --green-800: #003a25; + --green-900: #002213; + --purple-50: #f7f8ff; + --purple-100: #ecedff; + --purple-150: #d4d7ff; + --purple-200: #c1c5ff; + --purple-300: #a1a3ff; + --purple-400: #8482fc; + --purple-500: #644af9; + --purple-600: #553bd8; + --purple-700: #4032a1; + --purple-800: #2e2576; + --purple-900: #1a114d; + --yellow-50: #fef9da; + --yellow-100: #fcedb9; + --yellow-150: #fcd579; + --yellow-200: #f6bf57; + --yellow-300: #fa922b; + --yellow-400: #f26d10; + --yellow-500: #c84801; + --yellow-600: #a82c00; + --yellow-700: #842106; + --yellow-800: #5f1a05; + --yellow-900: #331302; + --red-50: #fff5fa; + --red-100: #ffe7f2; + --red-150: #ffccdf; + --red-200: #ffb1cd; + --red-300: #fe87a1; + --red-400: #fc526a; + --red-500: #d90d10; + --red-600: #b3093c; + --red-700: #890d37; + --red-800: #68052b; + --red-900: #3e021a; + --violet-50: #fef4ff; + --violet-100: #fbe8fe; + --violet-150: #f7cffc; + --violet-200: #eeb5f4; + --violet-300: #e68bec; + --violet-400: #d75fe7; + --violet-500: #b716ca; + --violet-600: #9d00ae; + --violet-700: #7c0089; + --violet-800: #5c0066; + --violet-900: #36003d; + --lime-50: #f1fde8; + --lime-100: #d4ffb0; + --lime-150: #b1ee79; + --lime-200: #9cda5d; + --lime-300: #78c100; + --lime-400: #639e11; + --lime-500: #4b7a0a; + --lime-600: #3e6213; + --lime-700: #355315; + --lime-800: #203a00; + --lime-900: #112100; + --size-2: 2px; + --size-4: 4px; + --size-6: 6px; + --size-8: 8px; + --size-12: 12px; + --size-16: 16px; + --size-20: 20px; + --size-24: 24px; + --size-32: 32px; + --size-40: 40px; + --size-48: 48px; + --size-64: 64px; + --size-28: 28px; + --size-80: 80px; + --size-128: 128px; + --size-240: 240px; + --size-320: 320px; + --size-480: 480px; + --size-560: 560px; + --size-640: 640px; + --size-760: 760px; + --size-144: 144px; + --size-208: 208px; + --size-56: 56px; + --radius-0: 0px; + --radius-2: 2px; + --radius-4: 4px; + --radius-6: 6px; + --radius-8: 8px; + --radius-12: 12px; + --radius-16: 16px; + --radius-20: 20px; + --radius-24: 24px; + --radius-32: 32px; + --radius-full: 9999px; + --space-0: 0px; + --space-2: 2px; + --space-4: 4px; + --space-8: 8px; + --space-12: 12px; + --space-16: 16px; + --space-20: 20px; + --space-24: 24px; + --space-32: 32px; + --space-40: 40px; + --space-48: 48px; + --space-64: 64px; + --space-80: 80px; + --w100: 1px; + --w150: 1.5px; + --w200: 2px; + --w300: 3px; + --w400: 4px; + --w120: 1.2px; + --font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ + --font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ + --font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ + --font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ + --font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */ + --font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */ + --font-weight-w400: 400; + --font-weight-w500: 500; + --font-weight-w600: 600; + --font-weight-w700: 700; + --font-size-size-8: 8px; + --font-size-size-10: 10px; + --font-size-size-11: 11px; + --font-size-size-12: 12px; + --font-size-size-13: 13px; + --font-size-size-14: 14px; + --font-size-size-16: 16px; + --font-size-size-15: 15px; + --font-size-size-17: 17px; + --font-size-size-18: 18px; + --font-size-size-20: 20px; + --font-size-size-22: 22px; + --font-size-size-24: 24px; + --font-size-size-28: 28px; + --font-size-size-32: 32px; + --font-size-size-40: 40px; + --font-size-size-48: 48px; + --font-size-size-64: 64px; + --line-height-line-height-8: 8px; + --line-height-line-height-10: 10px; + --line-height-line-height-12: 12px; + --line-height-line-height-13: 13px; + --line-height-line-height-14: 14px; + --line-height-line-height-15: 15px; + --line-height-line-height-16: 16px; + --line-height-line-height-17: 17px; + --line-height-line-height-18: 18px; + --line-height-line-height-20: 20px; + --line-height-line-height-24: 24px; + --line-height-line-height-28: 28px; + --line-height-line-height-32: 32px; + --line-height-line-height-40: 40px; + --line-height-line-height-48: 48px; + --typography-font-family-sans: 'Geist'; + --typography-font-family-mono: 'Geist Mono'; + --typography-font-weight-regular: 400; + --typography-font-weight-medium: 500; + --typography-font-weight-semi-bold: 600; + --typography-font-weight-bold: 700; + --typography-font-size-xxs: 10px; /** Micro text such as timestamps or subtle metadata. */ + --typography-font-size-xs: 12px; /** Compact secondary text, small UI labels. */ + --typography-font-size-sm: 14px; /** Default mobile body size, small controls. */ + --typography-font-size-md: 16px; /** Default desktop body size, main text. */ + --typography-font-size-lg: 18px; /** Medium emphasis, section labels. */ + --typography-font-size-xl: 20px; /** Small headings. */ + --typography-font-size-2xl: 24px; /** Section titles, important headings. */ + --typography-font-size-micro: 8px; /** Micro text such as timestamps or subtle metadata. */ + --typography-line-height-tight: 16px; /** Compact text, headers, UI labels. */ + --typography-line-height-normal: 20px; /** Default reading line-height for sizes 14–16px. */ + --typography-line-height-relaxed: 24px; /** For larger text sizes or multiline descriptions. */ + --light-elevation-1: + 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), + 0px 4px 8px 0px rgba(0, 0, 0, 0.06); /** Low elevation level for subtle separation. */ + --light-elevation-2: + 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.12), + 0px 6px 16px 0px rgba(0, 0, 0, 0.06); + --light-elevation-3: + 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 8px 0px rgba(0, 0, 0, 0.14), + 0px 12px 24px 0px rgba(0, 0, 0, 0.1); + --light-elevation-4: + 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 6px 12px 0px rgba(0, 0, 0, 0.16), + 0px 20px 32px 0px rgba(0, 0, 0, 0.12); + --dark-elevation-1: + 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.2), + 0px 4px 8px 0px rgba(0, 0, 0, 0.1); + --dark-elevation-2: + 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.22), + 0px 6px 16px 0px rgba(0, 0, 0, 0.12); + --dark-elevation-3: + 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 4px 8px 0px rgba(0, 0, 0, 0.24), + 0px 12px 24px 0px rgba(0, 0, 0, 0.14); + --dark-elevation-4: + 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 6px 12px 0px rgba(0, 0, 0, 0.28), + 0px 20px 32px 0px rgba(0, 0, 0, 0.16); + --radius-none: 0px; + --radius-xxs: 2px; + --radius-xs: 4px; + --radius-sm: 6px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-2xl: 20px; + --radius-max: 9999px; + --radius-3xl: 24px; + --radius-4xl: 32px; + --spacing-none: 0px; /** No spacing. Used for tight component joins. */ + --spacing-xxs: 4px; /** Base unit. Minimal padding, tight gaps. */ + --spacing-xs: 8px; /** Small padding and default vertical gaps. */ + --spacing-sm: 12px; /** Common internal spacing in inputs and buttons. */ + --spacing-md: 16px; /** Default large padding for sections and cards. */ + --spacing-xl: 24px; /** Comfortable spacing for chat bubbles and list items. */ + --spacing-2xl: 32px; /** Larger spacing for panels, modals, and gutters. */ + --spacing-3xl: 40px; /** Used for wide layout spacing and breathing room. */ + --spacing-lg: 20px; /** Medium spacing for grouping elements and section breaks. */ + --spacing-xxxs: 2px; + --device-radius: 8px; + --device-safe-area-bottom: 0px; + --device-safe-area-top: 0px; + --message-bubble-radius-group-top: 20px; + --message-bubble-radius-group-middle: 20px; + --message-bubble-radius-group-bottom: 20px; + --message-bubble-radius-tail: 0px; + --message-bubble-radius-attachment: 12px; + --message-bubble-radius-attachment-inline: 8px; + --composer-radius-fixed: 24px; + --composer-radius-floating: 24px; + --button-radius-lg: 9999px; + --button-radius-md: 9999px; + --button-radius-sm: 9999px; + --button-radius-full: 9999px; + --button-visual-height-sm: 32px; + --button-visual-height-md: 40px; + --button-visual-height-lg: 48px; + --button-visual-height-xs: 24px; + /** + * Minimum interactive hit target size. + * + * iOS / Android: enforce minimum touch target. + * Web: do not apply a min-width or min-height; size to content. + * + * Note: Web uses a placeholder value in Figma due to variable mode constraints. + */ + --button-hit-target-min-height: 48px; + /** + * Minimum interactive hit target size. + * + * iOS / Android: enforce minimum touch target. + * Web: do not apply a min-width or min-height; size to content. + * + * Note: Web uses a placeholder value in Figma due to variable mode constraints. + */ + --button-hit-target-min-width: 48px; + --button-padding-y-lg: 14px; + --button-padding-y-md: 10px; + --button-padding-y-sm: 6px; + --button-padding-y-xs: 4px; + --button-padding-x-icon-only-lg: 14px; + --button-padding-x-icon-only-md: 10px; + --button-padding-x-icon-only-sm: 6px; + --button-padding-x-icon-only-xs: 4px; + --button-padding-x-with-label-lg: 16px; + --button-padding-x-with-label-md: 16px; + --button-padding-x-with-label-sm: 16px; + --button-padding-x-with-label-xs: 12px; + --button-primary-bg: #005fff; + --button-primary-bg-liquid-glass: rgba(255, 255, 255, 0); + --button-primary-text: #005fff; + --button-primary-text-on-accent: #ffffff; + --button-primary-text-on-dark: #ffffff; + --button-primary-border: #a5c5ff; + --button-primary-border-on-dark: #ffffff; + --button-secondary-bg: #ebeef1; + --button-secondary-bg-liquid-glass: #ffffff; + --button-secondary-text: #1a1b25; + --button-secondary-text-on-accent: #1a1b25; + --button-secondary-text-on-dark: #ffffff; + --button-secondary-border: #d5dbe1; + --button-secondary-border-on-dark: #ffffff; + --button-destructive-bg: #d90d10; + --button-destructive-bg-liquid-glass: #ffffff; + --button-destructive-text: #d90d10; + --button-destructive-text-on-accent: #ffffff; + --button-destructive-text-on-dark: #ffffff; + --button-destructive-border: #d90d10; + --button-destructive-border-on-dark: #ffffff; + --icon-size-xs: 12px; + --icon-size-sm: 16px; + --icon-size-md: 20px; + --icon-size-lg: 32px; + --icon-stroke-subtle: 1.2px; + --icon-stroke-default: 1.5px; + --icon-stroke-emphasis: 2px; + --emoji-sm: 16px; + --emoji-md: 24px; + --emoji-lg: 32px; + --emoji-xl: 48px; + --emoji-2xl: 64px; + --background-core-app: #ffffff; /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */ + --background-core-elevation-0: #ffffff; /** The base layer. Always white, used as the reference point for the elevation scale. Steps above this gain depth in dark mode through progressively lighter backgrounds. */ + --background-core-elevation-1: #ffffff; /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */ + --background-core-elevation-2: #ffffff; /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */ + --background-core-elevation-3: #ffffff; /** Used for badge counts that float above other UI elements. */ + --background-core-surface-default: #ebeef1; /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */ + --background-core-surface-subtle: #f6f8fa; /** A slightly receded background. Used for secondary containers or to create soft visual separation. */ + --background-core-surface-card: #f6f8fa; /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */ + --background-core-surface-strong: #d5dbe1; /** A more prominent background. Used for elements that need to stand out from the main surface. */ + --background-core-inverse: #000000; /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */ + --background-core-on-accent: #ffffff; /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */ + --background-core-highlight: #fef9da; /** A tint for drawing attention to content. Used for highlights and pinned messages. */ + --background-core-overlay-light: rgba( + 255, + 255, + 255, + 0.75 + ); /** A light semi-transparent layer. Used to lighten surfaces and for hover states on dark backgrounds. */ + --background-core-overlay-dark: rgba( + 26, + 27, + 37, + 0.25 + ); /** A dark semi-transparent layer. Used for image overlays. */ + --background-core-scrim: rgba( + 26, + 27, + 37, + 0.5 + ); /** A heavy semi-transparent layer. Used behind sheets, drawers, and modals to separate them from content. */ + --background-utility-hover: rgba( + 26, + 27, + 37, + 0.1 + ); /** A semi-transparent overlay applied on pointer hover. Sits on top of any surface without replacing it. */ + --background-utility-pressed: rgba( + 26, + 27, + 37, + 0.15 + ); /** A slightly stronger overlay applied during an active press or tap. Provides tactile feedback on interactive elements. */ + --background-utility-selected: rgba( + 26, + 27, + 37, + 0.2 + ); /** Indicates an active or selected state. Used for selected messages, active list items, and toggled controls. */ + --background-utility-disabled: #ebeef1; /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */ + --border-utility-hover: rgba( + 26, + 27, + 37, + 0.1 + ); /** Applied on pointer hover over bordered interactive elements. */ + --border-utility-pressed: rgba( + 26, + 27, + 37, + 0.2 + ); /** Applied during an active press on bordered interactive elements. */ + --border-utility-selected: rgba( + 26, + 27, + 37, + 0.15 + ); /** Border for selected or active items. Used for highlighted list items and active controls. */ + --border-utility-focused: #c3d9ff; /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */ + --border-utility-active: #005fff; /** Active input border. Used for focused text fields and selected form elements. */ + --border-utility-success: #00a46e; /** Border for positive or confirmed states. Used on validated inputs and success indicators. */ + --border-utility-warning: #f26d10; /** Border for cautionary states. Used on inputs or elements requiring attention. */ + --border-utility-error: #d90d10; /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */ + --border-utility-disabled: #ebeef1; /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */ + --border-utility-disabled-on-surface: #d5dbe1; /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */ + --border-core-default: #d5dbe1; /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */ + --border-core-subtle: #ebeef1; /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */ + --border-core-strong: #a3acba; /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */ + --border-core-inverse: #ffffff; /** Used on dark backgrounds. */ + --border-core-on-accent: #ffffff; /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */ + --border-core-on-surface: #a3acba; /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */ + --border-core-opacity-subtle: rgba( + 26, + 27, + 37, + 0.1 + ); /** A very light transparent border. Used as a frame treatment on images and media attachments. */ + --border-core-opacity-strong: rgba( + 26, + 27, + 37, + 0.25 + ); /** A stronger transparent border for elements on colored or dark backgrounds. Used for waveform bars and similar treatments. */ + --border-core-on-inverse: #ffffff; /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */ + --chat-bg-incoming: #ebeef1; /** Incoming bubble background. */ + --chat-bg-outgoing: #e3edff; /** Outgoing bubble background. */ + --chat-bg-attachment-incoming: #d5dbe1; /** Attachment card in incoming bubble. */ + --chat-bg-attachment-outgoing: #c3d9ff; /** Attachment card in outgoing bubble. */ + --chat-text-incoming: #1a1b25; /** Message body text. */ + --chat-text-outgoing: #091a3b; /** Message body text. */ + --chat-text-username: #414552; /** Username label. */ + --chat-text-timestamp: #687385; /** Time labels. */ + --chat-text-typing-indicator: #1a1b25; /** Typing indicator chip. */ + --chat-text-read: #005fff; + --chat-text-mention: #005fff; /** Mention styling. */ + --chat-text-link: #005fff; /** Links inside message bubbles. */ + --chat-text-reaction: #414552; /** Reaction count text. */ + --chat-text-system: #414552; /** System messages like date separators. */ + --chat-border-incoming: #ebeef1; + --chat-border-outgoing: #e3edff; + --chat-border-on-chat-incoming: #a3acba; + --chat-border-on-chat-outgoing: #78a8ff; + --chat-reply-indicator-incoming: #87909f; /** Reply indicator shading for incoming. */ + --chat-reply-indicator-outgoing: #4586ff; /** Reply indicator shading for outgoing. */ + --chat-waveform-bar: rgba(26, 27, 37, 0.25); + --chat-waveform-bar-playing: #005fff; + --chat-poll-progress-track-incoming: #d5dbe1; + --chat-poll-progress-track-outgoing: #a5c5ff; + --chat-poll-progress-fill-incoming: #687385; + --chat-poll-progress-fill-outgoing: #005fff; + --chat-thread-connector-incoming: #d5dbe1; + --chat-thread-connector-outgoing: #c3d9ff; + --input-text-default: #1a1b25; /** Main text inside the chat input. */ + --input-text-placeholder: #687385; /** Placeholder text for the input. Lower emphasis than main text. */ + --input-text-disabled: #a3acba; /** Placeholder text for the input. Lower emphasis than main text. */ + --input-text-icon: #687385; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */ + --input-send-icon: #005fff; /** Default send icon color in the input. Uses the brand accent. */ + --input-send-icon-disabled: #a3acba; /** Send icon when disabled (e.g. empty input). */ + --reaction-bg: #ffffff; + --reaction-border: #d5dbe1; + --reaction-text: #1a1b25; + --reaction-emoji: #1a1b25; + --presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ + --presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --system-text: #000000; + --system-bg-blur: rgba(255, 255, 255, 0.01); + --system-caret: #005fff; + --system-scrollbar: rgba(0, 0, 0, 0.5); + --badge-bg-default: #ffffff; + --badge-bg-primary: #005fff; + --badge-bg-neutral: #687385; + --badge-bg-error: #d90d10; + --badge-bg-inverse: #000000; + --badge-bg-overlay: rgba(0, 0, 0, 0.75); + --badge-text: #1a1b25; + --badge-text-on-inverse: #ffffff; + --badge-text-on-accent: #ffffff; + --badge-border: #ffffff; + --control-remove-control-bg: #000000; + --control-remove-control-icon: #ffffff; + --control-remove-control-border: #ffffff; + --control-progress-bar-fill: #687385; + --control-progress-bar-track: #d5dbe1; + --control-toggle-switch-bg: #687385; + --control-toggle-switch-bg-selected: #005fff; + --control-toggle-switch-bg-disabled: #ebeef1; + --control-toggle-switch-knob: #ffffff; + --control-playback-toggle-text: #1a1b25; + --control-playback-toggle-border: #d5dbe1; + --control-checkbox-bg: rgba(255, 255, 255, 0); + --control-checkbox-border: #d5dbe1; + --control-checkbox-bg-selected: #005fff; + --control-checkbox-icon: #ffffff; + --control-play-button-bg: rgba(0, 0, 0, 0.75); + --control-play-button-icon: #ffffff; + --control-playback-thumb-bg-default: #ffffff; + --control-playback-thumb-border-default: rgba(26, 27, 37, 0.25); + --control-playback-thumb-bg-active: #005fff; + --control-playback-thumb-border-active: #ffffff; + --control-radio-button-bg: rgba(255, 255, 255, 0); + --control-radio-button-border: #d5dbe1; + --control-radio-button-bg-selected: #005fff; + --control-radio-button-indicator: #ffffff; + --control-radio-check-bg: rgba(255, 255, 255, 0); + --control-radio-check-border: #d5dbe1; + --control-radio-check-bg-selected: #005fff; + --control-radio-check-icon: #ffffff; + --control-chip-border: #d5dbe1; + --control-chip-text: #1a1b25; + --text-primary: #1a1b25; /** Main body text. Used for message content, titles, and any text that carries primary meaning. */ + --text-secondary: #414552; /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */ + --text-tertiary: #687385; /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */ + --text-on-inverse: #ffffff; /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */ + --text-on-accent: #ffffff; /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */ + --text-disabled: #a3acba; /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */ + --text-link: #005fff; /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */ + --avatar-palette-bg-1: #c3d9ff; + --avatar-palette-bg-2: #a9e4ea; + --avatar-palette-bg-3: #8febbd; + --avatar-palette-bg-4: #d4d7ff; + --avatar-palette-bg-5: #fcd579; + --avatar-palette-text-1: #091a3b; + --avatar-palette-text-2: #002124; + --avatar-palette-text-3: #002213; + --avatar-palette-text-4: #1a114d; + --avatar-palette-text-5: #331302; + --avatar-bg-default: #c3d9ff; + --avatar-bg-placeholder: #d5dbe1; + --avatar-text-default: #091a3b; + --avatar-text-placeholder: #687385; + --avatar-presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --avatar-presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --avatar-presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ + --accent-primary: #005fff; /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */ + --accent-success: #00a46e; /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */ + --accent-warning: #f26d10; /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */ + --accent-error: #d90d10; /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */ + --accent-neutral: #687385; /** A mid-tone gray for de-emphasized UI elements. */ + --brand-50: #f3f7ff; + --brand-100: #e3edff; + --brand-150: #c3d9ff; + --brand-200: #a5c5ff; + --brand-300: #78a8ff; + --brand-400: #4586ff; + --brand-500: #005fff; + --brand-600: #1b53bd; + --brand-700: #19418d; + --brand-800: #142f63; + --brand-900: #091a3b; + --skeleton-loading-base: rgba( + 255, + 255, + 255, + 0 + ); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */ + --skeleton-loading-highlight: rgba( + 255, + 255, + 255, + 0.75 + ); /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */ + --chrome-0: #ffffff; + --chrome-50: #f6f8fa; + --chrome-100: #ebeef1; + --chrome-150: #d5dbe1; + --chrome-200: #c0c8d2; + --chrome-300: #a3acba; + --chrome-400: #87909f; + --chrome-500: #687385; + --chrome-600: #545969; + --chrome-700: #414552; + --chrome-800: #30313d; + --chrome-900: #1a1b25; + --chrome-1000: #000000; +} diff --git a/src/styling/variables-tokens.css b/src/styling/variables-tokens.css deleted file mode 100644 index d26a87b51..000000000 --- a/src/styling/variables-tokens.css +++ /dev/null @@ -1,827 +0,0 @@ -/** - * Source https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/Chat-SDK-Design-System?node-id=164-2815&p=f&view=variables&var-set-id=41-278&m=dev - */ - -.str-chat, -.str-chat__theme-dark .str-chat__theme-inverse { - /* ─── Palette (color primitives) ─── */ - /* Base */ - --base-transparent-0: rgba(255, 255, 255, 0); - --base-transparent-white-10: rgba(255, 255, 255, 0.1); - --base-transparent-white-20: rgba(255, 255, 255, 0.2); - --base-transparent-white-30: rgba(255, 255, 255, 0.3); - --base-transparent-white-70: rgba(255, 255, 255, 0.7); - --base-transparent-black-5: rgba(0, 0, 0, 0.05); /** Used for bg in closeButton */ - --base-transparent-black-10: rgba(0, 0, 0, 0.1); /** Used for bg in closeButton */ - --base-transparent-black-70: rgba(0, 0, 0, 0.7); /** Used for bg in closeButton */ - --base-black: #000000; - --base-white: #ffffff; - /* Slate */ - --slate-50: #f6f8fa; - --slate-100: #ebeef1; - --slate-150: #d5dbe1; - --slate-200: #c0c8d2; - --slate-300: #a3acba; - --slate-400: #87909f; - --slate-500: #687385; - --slate-600: #545969; - --slate-700: #414552; - --slate-800: #30313d; - --slate-900: #1a1b25; - /* Neutral */ - --neutral-50: #f8f8f8; - --neutral-100: #efefef; - --neutral-150: #d8d8d8; - --neutral-200: #c4c4c4; - --neutral-300: #ababab; - --neutral-400: #8f8f8f; - --neutral-500: #6a6a6a; - --neutral-600: #565656; - --neutral-700: #464646; - --neutral-800: #323232; - --neutral-900: #1c1c1c; - /* Blue */ - --blue-50: #f3f7ff; - --blue-100: #e3edff; - --blue-150: #c3d9ff; - --blue-200: #a5c5ff; - --blue-300: #78a8ff; - --blue-400: #4586ff; - --blue-500: #005fff; - --blue-600: #1b53bd; - --blue-700: #19418d; - --blue-800: #142f63; - --blue-900: #091a3b; - /* Cyan */ - --cyan-50: #f1fbfc; - --cyan-100: #d1f3f6; - --cyan-150: #a9e4ea; - --cyan-200: #72d7e0; - --cyan-300: #45bcc7; - --cyan-400: #1e9ea9; - --cyan-500: #248088; - --cyan-600: #006970; - --cyan-700: #065056; - --cyan-800: #003a3f; - --cyan-900: #002124; - /* Green */ - --green-50: #e1ffee; - --green-100: #bdfcdb; - --green-150: #8febbd; - --green-200: #59dea3; - --green-300: #00c384; - --green-400: #00a46e; - --green-500: #277e59; - --green-600: #006643; - --green-700: #004f33; - --green-800: #003a25; - --green-900: #002213; - /* Purple */ - --purple-50: #f7f8ff; - --purple-100: #ecedff; - --purple-150: #d4d7ff; - --purple-200: #c1c5ff; - --purple-300: #a1a3ff; - --purple-400: #8482fc; - --purple-500: #644af9; - --purple-600: #553bd8; - --purple-700: #4032a1; - --purple-800: #2e2576; - --purple-900: #1a114d; - /* Yellow */ - --yellow-50: #fef9da; - --yellow-100: #fcedb9; - --yellow-150: #fcd579; - --yellow-200: #f6bf57; - --yellow-300: #fa922b; - --yellow-400: #f26d10; - --yellow-500: #c84801; - --yellow-600: #a82c00; - --yellow-700: #842106; - --yellow-800: #5f1a05; - --yellow-900: #331302; - /* Red */ - --red-50: #fff5fa; - --red-100: #ffe7f2; - --red-150: #ffccdf; - --red-200: #ffb1cd; - --red-300: #fe87a1; - --red-400: #fc526a; - --red-500: #d90d10; - --red-600: #b3093c; - --red-700: #890d37; - --red-800: #68052b; - --red-900: #3e021a; - /* Violet */ - --violet-50: #fef4ff; - --violet-100: #fbe8fe; - --violet-150: #f7cffc; - --violet-200: #eeb5f4; - --violet-300: #e68bec; - --violet-400: #d75fe7; - --violet-500: #b716ca; - --violet-600: #9d00ae; - --violet-700: #7c0089; - --violet-800: #5c0066; - --violet-900: #36003d; - /* Lime */ - --lime-50: #f1fde8; - --lime-100: #d4ffb0; - --lime-150: #b1ee79; - --lime-200: #9cda5d; - --lime-300: #78c100; - --lime-400: #639e11; - --lime-500: #4b7a0a; - --lime-600: #3e6213; - --lime-700: #355315; - --lime-800: #203a00; - --lime-900: #112100; - /* Chrome */ - --chrome-0: #ffffff; /** Neutral accent for low-priority badges. */ - --chrome-50: #f6f8fa; - --chrome-100: #ebeef1; - --chrome-150: #d5dbe1; - --chrome-200: #c0c8d2; - --chrome-300: #a3acba; - --chrome-400: #87909f; - --chrome-500: #687385; - --chrome-600: #545969; - --chrome-700: #414552; - --chrome-800: #30313d; - --chrome-900: #1a1b25; - --chrome-1000: #000000; /** Neutral accent for low-priority badges. */ - - /* ─── Size ─── */ - --size-2: 2px; - --size-4: 4px; - --size-6: 6px; - --size-8: 8px; - --size-12: 12px; - --size-16: 16px; - --size-20: 20px; - --size-24: 24px; - --size-32: 32px; - --size-40: 40px; - --size-48: 48px; - --size-64: 64px; - --size-28: 28px; - --size-80: 80px; - --size-128: 128px; - --size-240: 240px; - --size-320: 320px; - --size-480: 480px; - --size-560: 560px; - --size-640: 640px; - --size-760: 760px; - --size-144: 144px; - --size-208: 208px; - --size-56: 56px; - - /* ─── Radius ─── */ - --radius-0: 0; - --radius-2: 2px; - --radius-4: 4px; - --radius-6: 6px; - --radius-8: 8px; - --radius-12: 12px; - --radius-16: 16px; - --radius-20: 20px; - --radius-24: 24px; - --radius-32: 32px; - --radius-full: 9999px; - - /* ─── Space ─── */ - --space-0: 0; - --space-2: 2px; - --space-4: 4px; - --space-8: 8px; - --space-12: 12px; - --space-16: 16px; - --space-20: 20px; - --space-24: 24px; - --space-32: 32px; - --space-40: 40px; - --space-48: 48px; - --space-64: 64px; - --space-80: 80px; - - /* ─── Width (stroke/weight) ─── */ - --w100: 1; - --w150: 1.5; - --w200: 2; - --w300: 3; - --w400: 4; - --w120: 1.2; - - /* ─── Font family ─── */ - --font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ - --font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ - --font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ - --font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ - --font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */ - --font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */ - /* ─── Font weight ─── */ - --font-weight-w400: 400; - --font-weight-w500: 500; - --font-weight-w600: 600; - --font-weight-w700: 700; - - /* ─── Font size ─── */ - --font-size-size-8: 8px; - --font-size-size-10: 10px; - --font-size-size-11: 11px; - --font-size-size-12: 12px; - --font-size-size-13: 13px; - --font-size-size-14: 14px; - --font-size-size-16: 16px; - --font-size-size-15: 15px; - --font-size-size-17: 17px; - --font-size-size-18: 18px; - --font-size-size-20: 20px; - --font-size-size-22: 22px; - --font-size-size-24: 24px; - --font-size-size-28: 28px; - --font-size-size-32: 32px; - --font-size-size-40: 40px; - --font-size-size-48: 48px; - --font-size-size-64: 64px; - - /* ─── Line height ─── */ - --line-height-line-height-8: 8px; - --line-height-line-height-10: 10px; - --line-height-line-height-12: 12px; - --line-height-line-height-13: 13px; - --line-height-line-height-14: 14px; - --line-height-line-height-15: 15px; - --line-height-line-height-16: 16px; - --line-height-line-height-17: 17px; - --line-height-line-height-18: 18px; - --line-height-line-height-20: 20px; - --line-height-line-height-24: 24px; - --line-height-line-height-28: 28px; - --line-height-line-height-32: 32px; - --line-height-line-height-40: 40px; - --line-height-line-height-48: 48px; - - /* ─── Typography (semantic) ─── */ - --typography-font-weight-regular: 400; - --typography-font-weight-medium: 500; - --typography-font-weight-semi-bold: 600; - --typography-font-weight-bold: 700; - - /* ─── Elevation (shadows) ─── */ - --light-elevation-1: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.06); /** Low elevation level for subtle separation. */ - --light-elevation-2: 0 0 0 1px rgba(0,0,0,0.05), 0 2px 4px 0 rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.06); - --light-elevation-3: 0 0 0 1px rgba(0,0,0,0.05), 0 4px 8px 0 rgba(0,0,0,0.14), 0 12px 24px 0 rgba(0,0,0,0.1); - --light-elevation-4: 0 0 0 1px rgba(0,0,0,0.05), 0 6px 12px 0 rgba(0,0,0,0.16), 0 20px 32px 0 rgba(0,0,0,0.12); - --dark-elevation-1: 0 0 0 1px rgba(255,255,255,0.15), 0 1px 2px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.1); - --dark-elevation-2: 0 0 0 1px rgba(255,255,255,0.15), 0 2px 4px 0 rgba(0,0,0,0.22), 0 6px 16px 0 rgba(0,0,0,0.12); - --dark-elevation-3: 0 0 0 1px rgba(255,255,255,0.15), 0 4px 8px 0 rgba(0,0,0,0.24), 0 12px 24px 0 rgba(0,0,0,0.14); - --dark-elevation-4: 0 0 0 1px rgba(255,255,255,0.15), 0 6px 12px 0 rgba(0,0,0,0.28), 0 20px 32px 0 rgba(0,0,0,0.16); - - /* ─── Button (layout: padding, radius, height, hit target) ─── */ - --button-padding-y-lg: 14px; - --button-padding-y-md: 10px; - --button-padding-y-sm: 6px; - --button-padding-y-xs: 4px; - --button-padding-x-icon-only-lg: 14px; - --button-padding-x-icon-only-md: 10px; - --button-padding-x-icon-only-sm: 6px; - --button-padding-x-icon-only-xs: 4px; - --button-padding-x-with-label-lg: 16px; - --button-padding-x-with-label-md: 16px; - --button-padding-x-with-label-sm: 16px; - --button-padding-x-with-label-xs: 12px; - - /* ─── Background (core overlays, system) ─── */ - --background-core-scrim: rgba(26, 27, 37, 0.5); /** Dimmed overlay for modals. */ - --background-core-overlay-light: rgba(255, 255, 255, 0.75); /** Selected overlay. */ - --background-core-overlay-dark: rgba(26, 27, 37, 0.25); /** Selected overlay. */ - --system-bg-blur: rgba(255, 255, 255, 0.01); - --system-scrollbar: rgba(0, 0, 0, 0.5); - --badge-bg-overlay: rgba(0, 0, 0, 0.75); - - /* ─── Typography (family, size scale, line-height) ─── */ - --typography-font-family-sans: "Geist"; - --typography-font-family-mono: "Geist Mono"; - --typography-font-size-xxs: 10px; /** Micro text such as timestamps or subtle metadata. */ - --typography-font-size-xs: 12px; /** Compact secondary text, small UI labels. */ - --typography-font-size-sm: 14px; /** Default mobile body size, small controls. */ - --typography-font-size-md: 16px; /** Default desktop body size, main text. */ - --typography-font-size-lg: 18px; /** Medium emphasis, section labels. */ - --typography-font-size-xl: 20px; /** Small headings. */ - --typography-font-size-2xl: 24px; /** Section titles, important headings. */ - --typography-font-size-micro: 8px; /** Micro text such as timestamps or subtle metadata. */ - --typography-line-height-tight: 16px; /** Compact text, headers, UI labels. */ - --typography-line-height-normal: 20px; /** Default reading line-height for sizes 14–16px. */ - --typography-line-height-relaxed: 24px; /** For larger text sizes or multiline descriptions. */ - - /* ─── Radius (semantic) ─── */ - --radius-none: 0; - --radius-xxs: 2px; - --radius-xs: 4px; - --radius-sm: 6px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - --radius-2xl: 20px; - --radius-max: 9999px; - --radius-3xl: 24px; - --radius-4xl: 32px; - - /* ─── Spacing ─── */ - --spacing-none: 0; /** No spacing. Used for tight component joins. */ - --spacing-xxs: 4px; /** Base unit. Minimal padding, tight gaps. */ - --spacing-xs: 8px; /** Small padding and default vertical gaps. */ - --spacing-sm: 12px; /** Common internal spacing in inputs and buttons. */ - --spacing-md: 16px; /** Default large padding for sections and cards. */ - --spacing-xl: 24px; /** Comfortable spacing for chat bubbles and list items. */ - --spacing-2xl: 32px; /** Larger spacing for panels, modals, and gutters. */ - --spacing-3xl: 40px; /** Used for wide layout spacing and breathing room. */ - --spacing-lg: 20px; /** Medium spacing for grouping elements and section breaks. */ - --spacing-xxxs: 2px; - - /* ─── Device ─── */ - --device-safe-area-bottom: 0; - --device-safe-area-top: 0; - - /* ─── Button (radius, visual height, hit target, liquid glass) ─── */ - --button-radius-lg: 9999px; - --button-radius-md: 9999px; - --button-radius-sm: 9999px; - --button-radius-full: 9999px; - --button-visual-height-sm: 32px; - --button-visual-height-md: 40px; - --button-visual-height-lg: 48px; - --button-visual-height-xs: 24px; - /** - * Minimum interactive hit target size. - * - * iOS / Android: enforce minimum touch target. - * Web: do not apply a min-width or min-height; size to content. - * - * Note: Web uses a placeholder value in Figma due to variable mode constraints. - */ - --button-hit-target-min-height: 48px; - /** - * Minimum interactive hit target size. - * - * iOS / Android: enforce minimum touch target. - * Web: do not apply a min-width or min-height; size to content. - * - * Note: Web uses a placeholder value in Figma due to variable mode constraints. - */ - --button-hit-target-min-width: 48px; - --button-primary-bg-liquid-glass: rgba(255, 255, 255, 0); - - /* ─── Icon & emoji ─── */ - --icon-size-xs: 12px; - --icon-size-sm: 16px; - --icon-size-md: 20px; - --icon-size-lg: 32px; - --icon-stroke-subtle: 1.2; - --icon-stroke-default: 1.5; - --icon-stroke-emphasis: 2; - --emoji-md: 24px; - --emoji-lg: 32px; - --emoji-xl: 48px; - --emoji-2xl: 64px; - - /* ─── Background (core: elevation, surface, utility) ─── */ - --background-core-elevation-0: #ffffff; /** Flat surfaces. */ - --background-core-elevation-1: #ffffff; /** Slightly elevated surfaces. */ - --background-core-elevation-2: #ffffff; /** Card-like elements. */ - --background-core-elevation-3: #ffffff; /** Popovers. */ - --background-core-elevation-4: #ffffff; /** Dialogs, modals. */ - --background-core-surface: #ebeef1; /** Standard section background. */ - --background-core-surface-subtle: #f6f8fa; /** Very light section background. */ - --background-core-surface-strong: #d5dbe1; /** Stronger section background. */ - --background-core-inverse: #1a1b25; /** Inverse background used for elevated, transient, or high-attention UI surfaces that sit on top of the default app background. */ - --background-core-on-accent: #ffffff; /** Use for surfaces that must remain white across themes (e.g., media controls over video). Don’t use for general UI surfaces. */ - --background-core-highlight: #fef9da; - --background-core-surface-card: #f6f8fa; - --background-utility-hover: rgba(26, 27, 37, 0.1); /** Hover feedback overlay. */ - --background-utility-pressed: rgba(26, 27, 37, 0.15); /** Pressed feedback overlay. */ - --background-utility-selected: rgba(26, 27, 37, 0.2); /** Selected overlay. */ - --background-utility-disabled: #ebeef1; /** Disabled backgrounds. */ - - /* ─── Border (utility, core) ─── */ - --border-utility-disabled: #ebeef1; /** Optional disabled background for inputs, buttons, or chips. */ - --border-utility-hover: rgba(26, 27, 37, 0.1); /** Hover feedback overlay. */ - --border-utility-pressed: rgba(26, 27, 37, 0.2); /** Pressed feedback overlay. */ - --border-core-default: #d5dbe1; /** Standard surface border. */ - --border-core-subtle: #ebeef1; /** Very light separators. */ - --border-core-strong: #a3acba; /** Stronger surface border. */ - --border-core-on-accent: #ffffff; /** Borders on accent backgrounds. */ - --border-core-on-surface: #c0c8d2; - --border-core-inverse: #ffffff; /** Border on inverse (dark) surface, e.g. presence ring. */ - --border-utility-focused: var(--blue-150); /** Focus ring or focus border. */ - --border-utility-active: var(--accent-primary); /** Focus ring or focus border. */ - --border-utility-selected: rgba(26, 27, 37, 0.15); /** Focus ring or focus border. */ - --border-core-opacity-subtle: rgba(26, 27, 37, 0.1); /** Image frame border treatment. */ - --border-core-opacity-strong: rgba(26, 27, 37, 0.25); /** Image frame border treatment. */ - - /* ─── Chat (reply, waveform) ─── */ - --chat-reply-indicator-incoming: #87909f; /** Reply indicator shading for incoming. */ - --chat-waveform-bar: rgba(26, 27, 37, 0.25); - - /* ─── System & control ─── */ - --system-text: #000000; - --system-caret: var(--accent-primary); - --control-checkbox-bg: rgba(255, 255, 255, 0); - - /* ─── Text ─── */ - --text-primary: #1a1b25; /** Main text color. */ - --text-secondary: #414552; /** Secondary metadata text. */ - --text-tertiary: #687385; /** Lowest priority text. */ - --text-inverse: #ffffff; /** Text on dark or accent backgrounds. */ - --text-disabled: #a3acba; /** Disabled text. */ - --text-on-accent: #ffffff; /** Text on dark or accent backgrounds. */ - --text-link: var(--accent-primary); /** Hyperlinks and inline actions. */ - - /* ─── Avatar (palette, placeholder) ─── */ - --avatar-palette-bg-1: #c3d9ff; - --avatar-palette-bg-2: #a9e4ea; - --avatar-palette-bg-3: #8febbd; - --avatar-palette-bg-4: #d4d7ff; - --avatar-palette-bg-5: #fcd579; - --avatar-palette-text-1: #091a3b; - --avatar-palette-text-2: #002124; - --avatar-palette-text-3: #002213; - --avatar-palette-text-4: #1a114d; - --avatar-palette-text-5: #331302; - --avatar-bg-placeholder: #d5dbe1; - --avatar-text-placeholder: #687385; - - /* ─── Accent & brand ─── */ - --accent-success: #00a46e; /** For success states and positive actions. */ - --accent-warning: #f26d10; /** Warning or caution messages. */ - --accent-error: #d90d10; /** Destructive actions and error states. */ - --accent-neutral: #687385; /** Neutral accent for low-priority badges. */ - --brand-50: #f3f7ff; - --brand-100: #e3edff; - --brand-150: #c3d9ff; - --brand-200: #a5c5ff; - --brand-300: #78a8ff; - --brand-400: #4586ff; - --brand-500: #005fff; - --brand-600: #1b53bd; - --brand-700: #19418d; - --brand-800: #142f63; - --brand-900: #091a3b; - --accent-primary: #005fff; /** Main brand accent for interactive elements. */ - - /* ─── Skeleton ─── */ - --skeleton-loading-base: rgba(255, 255, 255, 0); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */ - --skeleton-loading-highlight: #ffffff; /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */ - - /* ─── Device & message/composer radius ─── */ - --device-radius: 8px; - --message-bubble-radius-group-top: 20px; - --message-bubble-radius-group-middle: 20px; - --message-bubble-radius-group-bottom: 20px; - --message-bubble-radius-tail: 0; - --message-bubble-radius-attachment: 12px; - --message-bubble-radius-attachment-inline: 8px; - --composer-radius-fixed: 24px; - --composer-radius-floating: 24px; - - /* ─── Button (semantic colors: primary, secondary, destructive) ─── */ - --button-primary-bg: var(--accent-primary); - --button-primary-text: var(--accent-primary); - --button-primary-text-on-accent: #ffffff; - --button-primary-border: #a5c5ff; - --button-primary-text-inverse: #ffffff; - --button-primary-border-inverse: #ffffff; - --button-secondary-text: var(--text-primary); - --button-secondary-bg-liquid-glass: #ffffff; - --button-secondary-border: #d5dbe1; - --button-secondary-bg: #ebeef1; - --button-secondary-text-on-accent: var(--text-primary); - --button-secondary-text-inverse: #ffffff; - --button-secondary-border-inverse: #ffffff; - --button-destructive-text: #d90d10; - --button-destructive-bg: #d90d10; - --button-destructive-text-on-accent: #ffffff; - --button-destructive-bg-liquid-glass: #ffffff; - --button-destructive-border: #d90d10; - --button-destructive-text-inverse: #ffffff; - --button-destructive-border-inverse: #ffffff; - --emoji-sm: 16px; - - /* ─── Background (core app), border (utility state), chat (bg, text, border) ─── */ - --background-core-app: #ffffff; /** Global application background. */ - --border-utility-error: #d90d10; /** Error state. */ - --border-utility-warning: #f26d10; /** Warning borders. */ - --border-utility-success: #00a46e; /** Success borders. */ - --chat-bg-incoming: #ebeef1; /** Incoming bubble background. */ - --chat-bg-outgoing: #e3edff; /** Outgoing bubble background. */ - --chat-bg-attachment-incoming: #d5dbe1; /** Attachment card in incoming bubble. */ - --chat-bg-attachment-outgoing: #c3d9ff; /** Attachment card in outgoing bubble. */ - --chat-text-timestamp: #687385; /** Time labels. */ - --chat-text-username: #414552; /** Username label. */ - --chat-text-reaction: #414552; /** Reaction count text. */ - --chat-text-system: #414552; /** System messages like date separators. */ - --chat-text-incoming: var(--text-primary); /** Message body text. */ - --chat-text-outgoing: #091a3b; /** Message body text. */ - --chat-border-outgoing: #e3edff; - --chat-border-incoming: #ebeef1; - --chat-border-on-chat-outgoing: #78a8ff; - --chat-border-on-chat-incoming: #a3acba; - --chat-reply-indicator-outgoing: #4586ff; /** Reply indicator shading for outgoing. */ - --chat-poll-progress-track-outgoing: #a5c5ff; - --chat-thread-connector-incoming: #d5dbe1; - --chat-thread-connector-outgoing: #c3d9ff; - --chat-text-read: var(--accent-primary); - --chat-text-typing-indicator: var(--text-primary); /** Typing indicator chip. */ - --chat-waveform-bar-playing: var(--accent-primary); - --chat-poll-progress-track-incoming: #d5dbe1; - --chat-poll-progress-fill-incoming: #687385; - --chat-poll-progress-fill-outgoing: var(--accent-primary); - --chat-text-mention: var(--accent-primary); /** Mention styling. */ - --chat-text-link: var(--accent-primary); /** Links inside message bubbles. */ - - /* ─── Input ─── */ - --input-text-default: var(--text-primary); /** Main text inside the chat input. */ - --input-text-placeholder: #687385; /** Placeholder text for the input. Lower emphasis than main text. */ - --input-text-icon: #687385; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */ - --input-text-disabled: #a3acba; /** Placeholder text for the input. Lower emphasis than main text. */ - --input-send-icon: var(--accent-primary); /** Default send icon color in the input. Uses the brand accent. */ - --input-send-icon-disabled: #a3acba; /** Send icon when disabled (e.g. empty input). */ - - /* ─── Reaction ─── */ - --reaction-bg: #ffffff; /** Reaction bar background. */ - --reaction-border: #d5dbe1; /** Border around unselected reaction chips. Subtle in normal modes, strong in high-contrast for visibility. */ - --reaction-text: var(--text-primary); /** Count label next to the emoji inside the reaction chip. Uses secondary text so it does not compete with message text. */ - --reaction-emoji: var(--text-primary); /** Emoji color inside reaction chips. Uses primary text color so the emoji stays clearly legible. */ - - /* ─── Presence ─── */ - --presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ - --presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - - /* ─── Badge ─── */ - --badge-border: #ffffff; - --badge-bg-primary: var(--accent-primary); - --badge-bg-error: #d90d10; - --badge-bg-neutral: #687385; - --badge-text: var(--text-primary); - --badge-bg-default: #ffffff; - --badge-text-on-accent: #ffffff; - --badge-text-on-inverse: #ffffff; - --badge-bg-inverse: var(--chrome-1000); - - /* ─── Control (remove, progress bar, toggle, playback, checkbox, play button, thumb, radio) ─── */ - --control-remove-control-bg: #1a1b25; - --control-remove-control-icon: #ffffff; - --control-remove-control-border: #ffffff; - --control-progress-bar-track: #d5dbe1; - --control-progress-bar-fill: #687385; - --control-toggle-switch-knob: #ffffff; - --control-toggle-switch-bg: #687385; - --control-toggle-switch-bg-selected: var(--accent-primary); - --control-toggle-switch-bg-disabled: #ebeef1; - --control-playback-toggle-border: #d5dbe1; - --control-playback-toggle-text: var(--text-primary); - --control-checkbox-border: #d5dbe1; - --control-checkbox-bg-selected: var(--accent-primary); - --control-checkbox-icon: #ffffff; - --control-play-button-bg: #000000; - --control-play-button-icon: #ffffff; - --control-playback-thumb-bg-default: #ffffff; - --control-playback-thumb-border-default: rgba(26, 27, 37, 0.25); - --control-playback-thumb-bg-active: var(--accent-primary); - --control-playback-thumb-border-active: #ffffff; - --control-radio-button-bg: rgba(255, 255, 255, 0); - --control-radio-button-border: #d5dbe1; - --control-radio-button-bg-selected: var(--accent-primary); - --control-radio-button-indicator: #ffffff; - --control-radio-check-bg: rgba(255, 255, 255, 0); - --control-radio-check-border: #d5dbe1; - --control-radio-check-bg-selected: var(--accent-primary); - --control-radio-check-icon: #ffffff; - - /* ─── Avatar (default, presence) ─── */ - --avatar-bg-default: #c3d9ff; - --avatar-text-default: #091a3b; - --avatar-presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --avatar-presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --avatar-presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ -} - -.str-chat__theme-dark, -.str-chat:not(.str-chat__theme-dark) *:not(.str-chat__theme-dark) .str-chat__theme-inverse { - /* Chrome (dark semantic scale – must be defined first, referenced below) */ - --chrome-0: var(--base-black); - --chrome-50: var(--neutral-900); - --chrome-100: var(--neutral-800); - --chrome-150: var(--neutral-700); - --chrome-200: var(--neutral-600); - --chrome-300: var(--neutral-500); - --chrome-400: var(--neutral-400); - --chrome-500: var(--neutral-300); - --chrome-600: var(--neutral-200); - --chrome-700: var(--neutral-150); - --chrome-800: var(--neutral-100); - --chrome-900: var(--neutral-50); - --chrome-1000: var(--base-white); - /* Accent & brand */ - --accent-primary: var(--brand-400); - --accent-success: var(--green-300); - --accent-warning: var(--yellow-300); - --accent-error: var(--red-400); - --accent-neutral: var(--chrome-500); - --brand-50: var(--blue-900); - --brand-100: var(--blue-800); - --brand-150: var(--blue-700); - --brand-200: var(--blue-600); - --brand-300: var(--blue-500); - --brand-500: var(--blue-300); - --brand-600: var(--blue-200); - --brand-700: var(--blue-150); - --brand-800: var(--blue-100); - --brand-900: var(--blue-50); - /* Background (Figma dark semantics) */ - --background-core-scrim: rgba(0, 0, 0, 0.75); - --background-core-overlay-light: rgba(0, 0, 0, 0.75); - --background-core-overlay-dark: rgba(0, 0, 0, 0.5); - --background-core-elevation-0: var(--chrome-0); - --background-core-elevation-1: var(--chrome-50); - --background-core-elevation-2: var(--chrome-100); - --background-core-elevation-3: var(--chrome-200); - --background-core-elevation-4: var(--chrome-300); - --background-core-app: var(--chrome-0); - --background-core-surface: var(--chrome-100); - --background-core-surface-subtle: var(--chrome-50); - --background-core-surface-strong: var(--chrome-150); - --background-core-surface-card: var(--chrome-100); - --background-core-inverse: var(--chrome-1000); - --background-core-on-accent: var(--chrome-1000); - --background-core-highlight: var(--yellow-800); - --background-utility-hover: rgba(255, 255, 255, 0.15); - --background-utility-pressed: var(--base-transparent-white-20); - --background-utility-selected: rgba(255, 255, 255, 0.25); - --background-utility-disabled: var(--chrome-100); - /* Text */ - --text-primary: var(--chrome-900); - --text-secondary: var(--chrome-700); - --text-tertiary: var(--chrome-500); - --text-inverse: var(--chrome-0); - --text-on-accent: var(--chrome-1000); - --text-disabled: var(--chrome-300); - --text-link: var(--brand-600); - /* Border */ - --border-core-default: var(--chrome-200); - --border-core-subtle: var(--chrome-100); - --border-core-strong: var(--chrome-300); - --border-core-on-surface: var(--chrome-300); - --border-core-inverse: var(--chrome-0); - --border-core-on-accent: var(--chrome-1000); - --border-core-opacity-subtle: var(--base-transparent-white-20); - --border-core-opacity-strong: rgba(255, 255, 255, 0.25); - --border-utility-disabled: var(--chrome-100); - --border-utility-focused: var(--brand-150); - --border-utility-focus: rgba(120, 168, 255, 0.25); - --border-utility-active: var(--accent-primary); - --border-utility-hover: var(--base-transparent-white-10); - --border-utility-pressed: var(--base-transparent-white-20); - --border-utility-selected: rgba(255, 255, 255, 0.15); - --border-utility-error: var(--accent-error); - --border-utility-warning: var(--accent-warning); - --border-utility-success: var(--accent-success); - /* System */ - --system-bg-blur: rgba(0, 0, 0, 0.01); - --system-scrollbar: rgba(255, 255, 255, 0.5); - --system-text: var(--chrome-1000); - --system-caret: var(--accent-primary); - /* Avatar */ - --avatar-palette-bg-1: var(--blue-600); - --avatar-palette-bg-2: var(--cyan-600); - --avatar-palette-bg-3: var(--green-600); - --avatar-palette-bg-4: var(--purple-600); - --avatar-palette-bg-5: var(--yellow-600); - --avatar-palette-text-1: var(--blue-100); - --avatar-palette-text-2: var(--cyan-100); - --avatar-palette-text-3: var(--green-100); - --avatar-palette-text-4: var(--purple-100); - --avatar-palette-text-5: var(--yellow-100); - --avatar-bg-default: var(--avatar-palette-bg-1); - --avatar-bg-placeholder: var(--chrome-150); - --avatar-text-default: var(--avatar-palette-text-1); - --avatar-text-placeholder: var(--chrome-500); - /* Skeleton */ - --skeleton-loading-base: var(--base-transparent-0); - --skeleton-loading-highlight: var(--background-core-overlay-light); - /* Button (dark mode – aligned with Figma dark semantics) */ - --button-primary-bg: var(--accent-primary); - --button-primary-bg-liquid-glass: var(--base-transparent-0); - --button-primary-text: var(--accent-primary); - --button-primary-text-on-accent: var(--text-on-accent); - --button-primary-text-inverse: var(--text-inverse); - --button-primary-border: var(--brand-200); - --button-primary-border-inverse: var(--border-core-inverse); - --button-secondary-bg: var(--background-core-surface); - --button-secondary-bg-liquid-glass: var(--background-core-elevation-0); - --button-secondary-text: var(--text-primary); - --button-secondary-text-on-accent: var(--text-primary); - --button-secondary-text-inverse: var(--text-inverse); - --button-secondary-border: var(--border-core-default); - --button-secondary-border-inverse: var(--border-core-inverse); - --button-destructive-bg: var(--accent-error); - --button-destructive-bg-liquid-glass: var(--background-core-elevation-0); - --button-destructive-text: var(--accent-error); - --button-destructive-text-on-accent: var(--text-on-accent); - --button-destructive-text-inverse: var(--text-inverse); - --button-destructive-border: var(--accent-error); - --button-destructive-border-inverse: var(--text-inverse); - /* Chat (semantic overrides so --chat-bg-* etc resolve in dark) */ - --chat-bg-incoming: var(--background-core-surface); - --chat-bg-outgoing: var(--brand-100); - --chat-bg-attachment-incoming: var(--background-core-surface-strong); - --chat-bg-attachment-outgoing: var(--brand-150); - --chat-text-incoming: var(--text-primary); - --chat-text-outgoing: var(--brand-900); - --chat-text-username: var(--text-secondary); - --chat-text-timestamp: var(--text-tertiary); - --chat-text-typing-indicator: var(--chat-text-incoming); - --chat-text-read: var(--accent-primary); - --chat-text-mention: var(--text-link); - --chat-text-link: var(--text-link); - --chat-text-reaction: var(--text-secondary); - --chat-text-system: var(--text-secondary); - --chat-border-incoming: var(--border-core-subtle); - --chat-border-outgoing: var(--brand-100); - --chat-border-on-chat-incoming: var(--border-core-strong); - --chat-border-on-chat-outgoing: var(--brand-300); - --chat-reply-indicator-incoming: var(--chrome-400); - --chat-reply-indicator-outgoing: var(--brand-400); - --chat-waveform-bar: var(--border-core-opacity-strong); - --chat-waveform-bar-playing: var(--accent-primary); - --chat-thread-connector-incoming: var(--border-core-default); - --chat-thread-connector-outgoing: var(--brand-150); - --chat-poll-progress-track-incoming: var(--control-progress-bar-track); - --chat-poll-progress-track-outgoing: var(--brand-200); - --chat-poll-progress-fill-incoming: var(--control-progress-bar-fill); - --chat-poll-progress-fill-outgoing: var(--accent-primary); - /* Input */ - --input-text-default: var(--text-primary); - --input-text-placeholder: var(--text-tertiary); - --input-text-icon: var(--text-tertiary); - --input-text-disabled: var(--text-disabled); - --input-send-icon: var(--accent-primary); - --input-send-icon-disabled: var(--text-disabled); - /* Reaction */ - --reaction-bg: var(--background-core-elevation-3); - --reaction-border: var(--border-core-default); - --reaction-text: var(--text-primary); - --reaction-emoji: var(--text-primary); - /* Presence */ - --presence-bg-online: var(--accent-success); - --presence-bg-offline: var(--accent-neutral); - --presence-border: var(--border-core-inverse); - /* Badge */ - --badge-bg-overlay: rgba(0, 0, 0, 0.75); - --badge-bg-default: var(--background-core-elevation-3); - --badge-bg-primary: var(--accent-primary); - --badge-bg-neutral: var(--accent-neutral); - --badge-bg-error: var(--accent-error); - --badge-bg-inverse: var(--chrome-1000); - --badge-text: var(--text-primary); - --badge-text-on-accent: var(--text-on-accent); - --badge-text-inverse: var(--text-inverse); - --badge-border: var(--border-core-inverse); - /* Control */ - --control-checkbox-bg: var(--base-transparent-0); - --control-checkbox-border: var(--border-core-default); - --control-checkbox-bg-selected: var(--accent-primary); - --control-checkbox-icon: var(--text-on-accent); - --control-radio-button-bg: var(--base-transparent-0); - --control-radio-button-border: var(--border-core-default); - --control-radio-button-bg-selected: var(--accent-primary); - --control-radio-button-indicator: var(--text-on-accent); - --control-radio-check-bg: var(--base-transparent-0); - --control-radio-check-border: var(--border-core-default); - --control-radio-check-bg-selected: var(--accent-primary); - --control-radio-check-icon: var(--text-on-accent); - --control-remove-control-bg: var(--background-core-inverse); - --control-remove-control-icon: var(--text-inverse); - --control-remove-control-border: var(--border-core-inverse); - --control-progress-bar-track: var(--background-core-surface-strong); - --control-progress-bar-fill: var(--accent-neutral); - --control-toggle-switch-bg: var(--accent-neutral); - --control-toggle-switch-bg-selected: var(--accent-primary); - --control-toggle-switch-bg-disabled: var(--background-utility-disabled); - --control-toggle-switch-knob: var(--background-core-on-accent); - --control-playback-toggle-text: var(--text-primary); - --control-playback-toggle-border: var(--border-core-default); - --control-play-button-bg: rgba(0, 0, 0, 0.75); - --control-play-button-icon: var(--text-on-accent); - --control-playback-thumb-bg-default: var(--background-core-on-accent); - --control-playback-thumb-border-default: var(--border-core-opacity-strong); - --control-playback-thumb-bg-active: var(--accent-primary); - --control-playback-thumb-border-active: var(--border-core-on-accent); - /* Avatar */ - --avatar-presence-bg-online: var(--accent-success); - --avatar-presence-bg-offline: var(--accent-neutral); - --avatar-presence-border: var(--border-core-inverse); -} \ No newline at end of file diff --git a/src/styling/variables-tokens.scss b/src/styling/variables-tokens.scss new file mode 100644 index 000000000..bbbe70191 --- /dev/null +++ b/src/styling/variables-tokens.scss @@ -0,0 +1,14 @@ +@use './light' as light; +@use './dark' as dark; + +.str-chat, +.str-chat__theme-dark .str-chat__theme-inverse { + @include light.variables; +} + +.str-chat__theme-dark, +.str-chat:not(.str-chat__theme-dark) + *:not(.str-chat__theme-dark) + .str-chat__theme-inverse { + @include dark.variables; +} From 600fff03603c8c8ba4b2946c827ab3ed62fd82ba Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Wed, 15 Apr 2026 18:29:36 +0200 Subject: [PATCH 8/8] Temporary fix tooltip dark mode --- src/components/Tooltip/styling/Tooltip.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/styling/Tooltip.scss b/src/components/Tooltip/styling/Tooltip.scss index ad6d5e3aa..9bc59d302 100644 --- a/src/components/Tooltip/styling/Tooltip.scss +++ b/src/components/Tooltip/styling/Tooltip.scss @@ -5,7 +5,7 @@ --str-chat__tooltip-border-radius: var(--radius-md); /* The text/icon color of the component */ - --str-chat__tooltip-color: var(--text-inverse); + --str-chat__tooltip-color: var(--text-on-accent); /* The background color of the component */ --str-chat__tooltip-background-color: var(--background-core-inverse); @@ -24,6 +24,11 @@ /* Box shadow applied to the component */ --str-chat__tooltip-box-shadow: var(--str-chat__box-shadow-3); + + // FIXME: this should not be the case + &.str-chat__theme-dark { + --str-chat__tooltip-background-color: var(--background-core-elevation-2); + } } .str-chat__tooltip {